/*
 * M.css — Canonical M Group visual runtime
 * Last Updated: 2026-09-01 19:32 UTC
 *
 * Authority:
 * - M-UXUI.xml owns normative UX/UI, behavior, accessibility, responsive and interaction rules.
 * - M.css owns the M Group visual profile and visual state projection.
 * - M.svg owns production icons.
 *
 * Architecture:
 * Foundations -> Primitives -> Composites -> Shell
 *
 * Canonical rule:
 * One primitive has one visual owner. A component's location/context may change layout,
 * but MUST NOT redefine the primitive's visual identity.
 */

:root {
    color-scheme: light;

    /* Typography */
    --mt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mt-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    /* Semantic color */
    --mt-canvas: #f2f2ef;
    --mt-surface: #ffffff;
    --mt-surface-2: #f7f7f4;
    --mt-surface-3: #ecece8;
    --mt-text: #111111;
    --mt-text-secondary: #696963;
    --mt-text-disabled: #8d8d88;
    --mt-line: #bdbdb8;
    --mt-line-strong: #8f8f8a;
    --mt-header: #000000;
    --mt-header-text: #f7f7f7;
    --mt-header-muted: #b9b9b5;
    --mt-gold: #c49a36;
    --mt-gold-contrast: #000000;
    --mt-success: #55b86a;
    --mt-warning: #d79a32;
    --mt-danger: #d85b56;
    --mt-info: #5a8fd6;
    --mt-neutral: #8f8f8f;
    --mt-focus: #c49a36;
    --mt-backdrop: rgba(0, 0, 0, .66);
    --mt-disabled-bg: #e7e7e2;
    --mt-readonly-bg: #f1f1ee;
    --mt-selected-bg: color-mix(in srgb, var(--mt-gold) 14%, var(--mt-surface));
    --mt-hover-bg: color-mix(in srgb, var(--mt-gold) 8%, transparent);
    --mt-shadow: 0 12px 32px rgba(0, 0, 0, .10);
    --mt-float: var(--mt-surface-2);
    --mt-float-shadow: 0 16px 36px rgba(0, 0, 0, .22);

    /* Canonical geometry */
    --mt-cut: 7px;
    --mt-inner-cut: 6px;
    --mt-cut-7: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
    --mt-point-36: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
    --mt-point-45: polygon(22.5px 0, calc(100% - 22.5px) 0, 100% 50%, calc(100% - 22.5px) 100%, 22.5px 100%, 0 50%);
    --mt-diamond: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    --mt-status-shape: polygon(10.5px 0, calc(100% - 10.5px) 0, 100% 50%, calc(100% - 10.5px) 100%, 10.5px 100%, 0 50%);

    /* Canonical dimensions */
    --mt-control-h: 36px;
    --mt-action-h: 45px;
    --mt-compact-h: 36px;
    --mt-icon-action: 36px;
    --mt-floating-size: 52px;
    --mt-status-h: 21px;
    --mt-header-h: 60px;
    --mt-bottom-nav-h: 70px;
    --mt-touch-min: 44px;

    /* Space scale */
    --mt-space-0: 0;
    --mt-space-1: 4px;
    --mt-space-2: 8px;
    --mt-space-3: 12px;
    --mt-space-4: 16px;
    --mt-space-5: 20px;
    --mt-space-6: 24px;
    --mt-space-8: 32px;
    --mt-space-10: 40px;

    /* Type scale */
    --mt-text-xs: 11px;
    --mt-text-sm: 12px;
    --mt-text-md: 14px;
    --mt-text-lg: 17px;
    --mt-title-sm: 20px;
    --mt-title-md: 24px;
    --mt-title-lg: 30px;

    /* Motion */
    --mt-motion-fast: 120ms;
    --mt-motion-normal: 180ms;
    --mt-motion-slow: 240ms;
    --mt-ease: cubic-bezier(.2, .7, .2, 1);

    /* Layering */
    --mt-z-sticky: 200;
    --mt-z-dropdown: 500;
    --mt-z-drawer: 700;
    --mt-z-modal: 800;
    --mt-z-toast: 900;
}

html[data-theme="dark"],
html.mt-theme-dark,
body.mt-canonical-ui.dark-theme,
body.mt-canonical-ui.mt-dark {
    color-scheme: dark;
    --mt-canvas: #0d0d0d;
    --mt-surface: #171717;
    --mt-surface-2: #202020;
    --mt-surface-3: #242424;
    --mt-text: #f7f7f7;
    --mt-text-secondary: #9a9a9a;
    --mt-text-disabled: #747474;
    --mt-line: #3a3a3a;
    --mt-line-strong: #5a5a5a;
    --mt-disabled-bg: #2a2a2a;
    --mt-readonly-bg: #1e1e1e;
    --mt-shadow: 0 16px 42px rgba(0, 0, 0, .34);
    --mt-float-shadow: 0 18px 42px rgba(0, 0, 0, .48);
}

/* ==========================================================================
   1. Foundations / reset / accessibility
   ========================================================================== */

html {
    min-height: 100%;
    background: var(--mt-canvas);
}

body.mt-canonical-ui {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: clip;
    background: var(--mt-canvas);
    color: var(--mt-text);
    font-family: var(--mt-font);
    font-size: var(--mt-text-md);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.mt-canonical-ui *,
body.mt-canonical-ui *::before,
body.mt-canonical-ui *::after {
    box-sizing: border-box;
    border-radius: 0;
}

body.mt-canonical-ui :where(button, input, select, textarea) {
    font: inherit;
}

body.mt-canonical-ui :where(button, [role="button"], a) {
    -webkit-tap-highlight-color: transparent;
}

body.mt-canonical-ui a {
    color: inherit;
    text-decoration: none;
}

body.mt-canonical-ui :where(a:hover, a:focus-visible) {
    color: var(--mt-gold);
}

body.mt-canonical-ui :where(img, svg, video, canvas) {
    max-width: 100%;
}

body.mt-canonical-ui svg {
    display: block;
}

body.mt-canonical-ui :where(h1, h2, h3, h4, p) {
    overflow-wrap: anywhere;
}

body.mt-canonical-ui :where(.m-visually-hidden, .sr-only, .visually-hidden) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.mt-canonical-ui :where(button, a, [role="button"]):focus-visible {
    outline: 2px solid var(--mt-focus);
    outline-offset: 3px;
}

body.mt-canonical-ui :where(input, select, textarea):focus,
body.mt-canonical-ui :where(input, select, textarea):focus-visible {
    outline: 0;
    box-shadow: none;
}

body.mt-canonical-ui :where(button, input, select, textarea):disabled,
body.mt-canonical-ui :where([aria-disabled="true"], .is-disabled, .disabled) {
    cursor: not-allowed;
    opacity: .48;
}

body.mt-canonical-ui :where(code, kbd, samp, .m-technical) {
    font-family: var(--mt-font-mono);
    font-size: .92em;
}

/* ==========================================================================
   2. Layout primitives
   ========================================================================== */

body.mt-canonical-ui .m-container {
    width: min(100%, 1480px);
    min-width: 0;
    margin-inline: auto;
    padding-inline: var(--mt-space-4);
}

body.mt-canonical-ui .m-stack {
    display: grid;
    gap: var(--mt-stack-gap, var(--mt-space-3));
}

body.mt-canonical-ui .m-inline {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--mt-inline-gap, var(--mt-space-2));
    flex-wrap: wrap;
}

body.mt-canonical-ui .m-cluster {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mt-space-3);
    flex-wrap: wrap;
}

body.mt-canonical-ui .m-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(var(--m-cols, 1), minmax(0, 1fr));
    gap: var(--m-gap, var(--mt-space-3));
}

body.mt-canonical-ui .m-grid--2 { --m-cols: 2; }
body.mt-canonical-ui .m-grid--3 { --m-cols: 3; }
body.mt-canonical-ui .m-grid--4 { --m-cols: 4; }

body.mt-canonical-ui .m-scroll-x {
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

body.mt-canonical-ui .m-divider {
    width: 100%;
    height: 1px;
    border: 0;
    background: var(--mt-line);
}

body.mt-canonical-ui .m-sticky-region {
    position: sticky;
    z-index: var(--mt-z-sticky);
    top: var(--m-sticky-top, 0);
}

/* ==========================================================================
   3. Surface primitive
   ========================================================================== */

body.mt-canonical-ui :where(
    .m-surface,
    .m-card,
    .panel,
    .box,
    .card,
    .modal-content,
    .dropdown-menu,
    .popover
) {
    border: 1px solid transparent;
    background:
        linear-gradient(var(--mt-surface), var(--mt-surface)) padding-box,
        linear-gradient(var(--mt-line), var(--mt-line)) border-box;
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
    box-shadow: var(--mt-shadow);
}

body.mt-canonical-ui .m-surface--flat {
    box-shadow: none;
}

body.mt-canonical-ui .m-surface__header,
body.mt-canonical-ui :where(.panel-heading, .modal-header) {
    min-height: 52px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mt-space-3);
    border-bottom: 1px solid var(--mt-line);
}

body.mt-canonical-ui .m-surface__body,
body.mt-canonical-ui :where(.panel-body, .modal-body) {
    min-width: 0;
    padding: 14px;
}

body.mt-canonical-ui .m-surface__footer,
body.mt-canonical-ui :where(.panel-footer, .modal-footer) {
    min-height: 60px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mt-space-2);
    flex-wrap: wrap;
    border-top: 1px solid var(--mt-line);
}

/* ==========================================================================
   4. Typography primitives
   ========================================================================== */

body.mt-canonical-ui .m-page-title {
    margin: 0;
    color: var(--mt-text);
    font-size: var(--mt-title-md);
    line-height: 1.2;
    font-weight: 750;
}

body.mt-canonical-ui .m-section-title {
    margin: 0;
    color: var(--mt-text);
    font-size: var(--mt-title-sm);
    line-height: 1.25;
    font-weight: 750;
}

body.mt-canonical-ui .m-record-title {
    margin: 0;
    color: var(--mt-text);
    font-size: var(--mt-text-lg);
    font-weight: 750;
}

body.mt-canonical-ui .m-body {
    color: var(--mt-text);
    font-size: var(--mt-text-md);
}

body.mt-canonical-ui .m-meta,
body.mt-canonical-ui .m-helper {
    color: var(--mt-text-secondary);
    font-size: var(--mt-text-sm);
}

/* ==========================================================================
   5. Icon primitive
   ========================================================================== */

body.mt-canonical-ui .m-icon {
    width: var(--m-icon-size, 20px);
    height: var(--m-icon-size, 20px);
    display: inline-block;
    flex: 0 0 var(--m-icon-size, 20px);
    color: currentColor;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

/* ==========================================================================
   6. Action primitives
   ========================================================================== */

body.mt-canonical-ui :where(.m-button, .btn:not(.btn-link), .btn45) {
    min-width: 112px;
    width: max-content;
    max-width: 100%;
    height: var(--mt-action-h);
    min-height: var(--mt-action-h);
    padding: 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mt-space-2);
    border: 0;
    background: var(--mt-gold);
    color: var(--mt-gold-contrast);
    box-shadow: none;
    clip-path: var(--mt-point-45);
    font-weight: 750;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
}

body.mt-canonical-ui :where(.m-button, .btn:not(.btn-link), .btn45):where(:hover, :focus-visible) {
    color: var(--mt-gold-contrast);
    filter: brightness(.96);
}

body.mt-canonical-ui :where(.m-button--secondary, .btn-default) {
    background: var(--mt-surface-2);
    color: var(--mt-text);
}

body.mt-canonical-ui .m-button--success,
body.mt-canonical-ui .btn-success {
    background: var(--mt-success);
    color: #000000;
}

body.mt-canonical-ui .m-button--warning,
body.mt-canonical-ui .btn-warning {
    background: var(--mt-warning);
    color: #000000;
}

body.mt-canonical-ui .m-button--danger,
body.mt-canonical-ui .btn-danger {
    background: var(--mt-danger);
    color: #000000;
}

body.mt-canonical-ui :where(.m-button--compact, .btn36, .btn-sm, .btn-xs) {
    min-width: 88px;
    height: var(--mt-compact-h);
    min-height: var(--mt-compact-h);
    padding: 0 20px;
    clip-path: var(--mt-point-36);
    font-size: var(--mt-text-md);
}

body.mt-canonical-ui :where(.m-icon-button, .btn-icon, .icon36) {
    position: relative;
    width: var(--mt-icon-action);
    min-width: var(--mt-icon-action);
    height: var(--mt-icon-action);
    min-height: var(--mt-icon-action);
    padding: 0;
    display: inline-grid;
    place-items: center;
    border: 0;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    clip-path: var(--mt-diamond);
    cursor: pointer;
}

body.mt-canonical-ui .m-icon-button--bare {
    background: transparent;
    clip-path: none;
}

body.mt-canonical-ui :where(.m-fab, .fab) {
    position: fixed;
    z-index: 80;
    right: 16px;
    left: auto;
    bottom: calc(var(--mt-bottom-nav-h) + env(safe-area-inset-bottom) + 15px);
    width: 52px;
    min-width: 52px;
    height: 52px;
    min-height: 52px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: var(--mt-gold);
    color: #000000;
    clip-path: var(--mt-diamond);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .24);
    cursor: pointer;
}

body.mt-canonical-ui .m-fab .m-ico {
    width: 26px;
    height: 26px;
    color: #000000;
}

body.mt-canonical-ui .m-action-group {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    justify-content: center;
    gap: var(--mt-space-2);
}

/* ==========================================================================
   7. Indicator / badge / avatar primitives
   ========================================================================== */

body.mt-canonical-ui .m-indicator-counter {
    position: absolute;
    z-index: 2;
    inset-block-start: -5px;
    inset-inline-end: -5px;
    min-width: 18px;
    height: 18px;
    padding-inline: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mt-danger);
    color: #000000;
    clip-path: var(--mt-status-shape);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

body.mt-canonical-ui .m-avatar {
    width: var(--m-avatar-size, 36px);
    height: var(--m-avatar-size, 36px);
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #d7d7d2;
    color: #111111;
    font-weight: 800;
    object-fit: cover;
    object-position: 50% 35%;
}

body.mt-canonical-ui .m-avatar > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
}

/* ==========================================================================
   8. Field primitives
   One painted shell. Cut 7. Label and icon sit inside. No focus frame.
   A select draws exactly one chevron.
   ========================================================================== */

body.mt-canonical-ui .m-field {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-rows: auto minmax(22px, auto);
    align-items: center;
    column-gap: 8px;
    row-gap: 0;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    margin: 0;
    padding: 6px 12px 6px 10px;
    border: 0;
    border-radius: 0;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
    box-shadow: none;
}

body.mt-canonical-ui .m-field:has(> select) {
    padding-inline-end: 28px;
}

body.mt-canonical-ui .m-field > .m-ico {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 18px;
    height: 18px;
    color: var(--mt-gold);
}

body.mt-canonical-ui .m-field__label {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin: 0;
    padding: 0;
    color: var(--mt-text-secondary);
    font-size: var(--mt-text-xs);
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

body.mt-canonical-ui :where(
    .m-input,
    .m-select,
    .m-textarea,
    .form-control
) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: var(--mt-control-h);
    min-height: var(--mt-control-h);
    margin: 0;
    padding: 7px 11px;
    border: 0;
    border-radius: 0;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
    box-shadow: none;
    outline: 0;
}

body.mt-canonical-ui .m-field > :where(.m-input, .m-select, .m-textarea, textarea, .form-control) {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
    height: auto;
    min-height: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    clip-path: none;
    box-shadow: none;
    outline: 0;
    font: inherit;
    font-size: 16px;
    line-height: 1.25;
}

body.mt-canonical-ui :where(.m-input, .m-select, .m-textarea, .form-control):focus,
body.mt-canonical-ui :where(.m-input, .m-select, .m-textarea, .form-control):focus-visible,
body.mt-canonical-ui .m-field:focus-within,
body.mt-canonical-ui .m-field:focus-within :where(.m-input, .m-select, .m-textarea, textarea) {
    outline: 0;
    box-shadow: none;
    border-color: transparent;
}

body.mt-canonical-ui .m-textarea,
body.mt-canonical-ui textarea.form-control {
    height: auto;
    min-height: 110px;
    resize: vertical;
}

body.mt-canonical-ui .m-field > textarea.m-textarea {
    min-height: 88px;
}

body.mt-canonical-ui .m-select,
body.mt-canonical-ui select.form-control {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: none !important;
    padding-inline-end: 0;
}

body.mt-canonical-ui .m-field:has(> select)::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    inset-inline-end: 12px;
    width: 7px;
    height: 7px;
    border-inline-end: 1.6px solid var(--mt-gold);
    border-bottom: 1.6px solid var(--mt-gold);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

body.mt-canonical-ui .m-field--readonly :where(.m-input, .m-select, .m-textarea),
body.mt-canonical-ui :where(.m-input, .m-select, .m-textarea)[readonly] {
    background: transparent;
}

body.mt-canonical-ui .m-field__error {
    color: var(--mt-danger);
    font-size: var(--mt-text-sm);
}

body.mt-canonical-ui .m-header .m-field {
    min-height: 40px;
    background: #131313;
    color: var(--mt-header-text);
}

body.mt-canonical-ui .m-header .m-field > .m-field__label,
body.mt-canonical-ui .m-header .m-field > .m-ico {
    color: var(--mt-header-muted);
}

/* Select/combo shell: one boundary, one indicator */
body.mt-canonical-ui .m-control-frame {
    position: relative;
    min-width: 0;
}

body.mt-canonical-ui .m-control-frame > :where(.m-input, .m-select) {
    padding-inline-start: var(--m-control-start-pad, 11px);
    padding-inline-end: var(--m-control-end-pad, 32px);
}

body.mt-canonical-ui .m-control-frame__icon {
    position: absolute;
    top: 50%;
    inset-inline-start: 11px;
    width: 18px;
    height: 18px;
    color: var(--mt-text-secondary);
    transform: translateY(-50%);
    pointer-events: none;
}

body.mt-canonical-ui .m-control-frame--icon-start {
    --m-control-start-pad: 38px;
}

body.mt-canonical-ui .m-control-frame__chevron,
body.mt-canonical-ui .m-field:has(> select)::after {
    width: 7px;
    height: 7px;
    border-inline-end: 1.6px solid var(--mt-gold);
    border-bottom: 1.6px solid var(--mt-gold);
}

body.mt-canonical-ui .m-control-frame__chevron {
    position: absolute;
    top: 50%;
    inset-inline-end: 12px;
    color: var(--mt-gold);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

/* ==========================================================================
   9. Boolean / selection primitives
   ========================================================================== */

body.mt-canonical-ui .m-toggle {
    position: relative;
    width: 45px;
    min-width: 45px;
    height: 26px;
    display: inline-block;
    border: 0;
    background: var(--mt-neutral);
    clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%);
    cursor: pointer;
}

body.mt-canonical-ui .m-toggle::after {
    content: "";
    position: absolute;
    top: 4px;
    inset-inline-start: 4px;
    width: 18px;
    height: 18px;
    background: #000000;
    clip-path: var(--mt-diamond);
    transition: inset-inline-start var(--mt-motion-fast) var(--mt-ease);
}

body.mt-canonical-ui .m-toggle:is(.is-on, [aria-checked="true"]) {
    background: var(--mt-gold);
}

body.mt-canonical-ui .m-toggle:is(.is-on, [aria-checked="true"])::after {
    inset-inline-start: 23px;
}

body.mt-canonical-ui .m-checkbox,
body.mt-canonical-ui .m-radio {
    position: relative;
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 22px;
}

body.mt-canonical-ui .m-checkbox {
    background: var(--mt-line);
    clip-path: var(--mt-diamond);
}

body.mt-canonical-ui .m-checkbox::before {
    content: "";
    width: 18px;
    height: 18px;
    background: var(--mt-surface);
    clip-path: var(--mt-diamond);
}

body.mt-canonical-ui .m-checkbox:is(.is-checked, [aria-checked="true"])::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--mt-gold);
    clip-path: var(--mt-diamond);
}

body.mt-canonical-ui .m-radio {
    transform: rotate(45deg);
    border: 1px solid var(--mt-line-strong);
    background: var(--mt-surface);
}

body.mt-canonical-ui .m-radio:is(.is-checked, [aria-checked="true"])::after {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--mt-gold);
}

/* ==========================================================================
   10. Segmented / tabs / chips
   ========================================================================== */

body.mt-canonical-ui .m-segmented {
    min-height: 36px;
    padding: 3px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 3px;
    background: var(--mt-surface-2);
    clip-path: var(--mt-point-36);
}

body.mt-canonical-ui .m-segmented > :where(button, [role="tab"]) {
    min-width: 0;
    min-height: 30px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--mt-text);
    clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%);
    font-weight: 650;
    white-space: nowrap;
}

body.mt-canonical-ui .m-segmented > :where(.is-active, [aria-selected="true"]) {
    background: var(--mt-gold);
    color: #000000;
}

body.mt-canonical-ui .m-tabs {
    min-width: 0;
    margin: 0;
    padding: 0 8px;
    display: flex;
    align-items: stretch;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--mt-line);
    scrollbar-width: none;
    white-space: nowrap;
}

body.mt-canonical-ui .m-tabs::-webkit-scrollbar { display: none; }

body.mt-canonical-ui .m-tabs > :where(a, button, [role="tab"]) {
    position: relative;
    min-height: 48px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--mt-text-secondary);
    font-weight: 650;
}

body.mt-canonical-ui .m-tabs > :where(.is-active, [aria-current="page"], [aria-selected="true"]) {
    color: var(--mt-text);
    box-shadow: inset 0 -4px 0 var(--mt-gold);
}

body.mt-canonical-ui .m-chip {
    width: max-content;
    max-width: 100%;
    min-height: 28px;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
    font-size: var(--mt-text-sm);
}

/* ==========================================================================
   11. Search composite
   ========================================================================== */

body.mt-canonical-ui .m-search {
    position: relative;
    min-width: 0;
}

body.mt-canonical-ui .m-search__input {
    padding-inline: 38px;
}

body.mt-canonical-ui .m-search__icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    inset-inline-start: 11px;
    width: 18px;
    height: 18px;
    color: var(--mt-text-secondary);
    transform: translateY(-50%);
    pointer-events: none;
}

body.mt-canonical-ui .m-search__clear {
    position: absolute;
    z-index: 2;
    top: 0;
    inset-inline-end: 0;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--mt-text-secondary);
}

body.mt-canonical-ui .m-search__results {
    position: absolute;
    z-index: var(--mt-z-dropdown);
    top: calc(100% + 4px);
    inset-inline: 0;
    max-height: min(55vh, 420px);
    overflow: auto;
    padding: 6px;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--mt-surface), var(--mt-surface)) padding-box,
        linear-gradient(var(--mt-line), var(--mt-line)) border-box;
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
    box-shadow: var(--mt-shadow);
}

body.mt-canonical-ui .m-search-result {
    min-height: 42px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body.mt-canonical-ui .m-search-result:is(:hover, :focus-visible, .is-active) {
    background: var(--mt-selected-bg);
}


/* ==========================================================================
   11b. Brand stripe / separator / progress primitive
   ========================================================================== */

body.mt-canonical-ui .m-brand-stripe {
    --m-brand-stripe-size: 6px;
    --m-brand-stripe-progress: 100%;
    position: relative;
    width: 100%;
    height: var(--m-brand-stripe-size);
    overflow: hidden;
    background: var(--mt-surface-3);
}
body.mt-canonical-ui .m-brand-stripe--thin { --m-brand-stripe-size: 3px; }
body.mt-canonical-ui .m-brand-stripe--strong { --m-brand-stripe-size: 10px; }
body.mt-canonical-ui .m-brand-stripe::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--m-brand-stripe-progress);
    background: repeating-linear-gradient(135deg,#000 0 3px,#fff 3px 6px);
}
body.mt-canonical-ui .m-brand-stripe--indeterminate::before {
    width: 140%;
    animation: m-brand-stripe-move .72s linear infinite;
}
@keyframes m-brand-stripe-move { to { transform: translateX(-12px); } }

/* ==========================================================================
   12. Status / feedback primitives
   ========================================================================== */

body.mt-canonical-ui .m-status {
    width: max-content;
    max-width: 100%;
    height: var(--mt-status-h);
    min-height: var(--mt-status-h);
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mt-neutral);
    color: #000000;
    clip-path: var(--mt-status-shape);
    font-size: var(--mt-text-xs);
    font-weight: 750;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.mt-canonical-ui .m-status--success { background: var(--mt-success); }
body.mt-canonical-ui .m-status--warning { background: var(--mt-warning); }
body.mt-canonical-ui .m-status--danger { background: var(--mt-danger); }
body.mt-canonical-ui .m-status--info { background: var(--mt-info); }
body.mt-canonical-ui .m-status--active { background: var(--mt-gold); }

body.mt-canonical-ui .m-notice {
    padding: 12px;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--mt-surface), var(--mt-surface)) padding-box,
        linear-gradient(var(--m-notice-line, var(--mt-line)), var(--m-notice-line, var(--mt-line))) border-box;
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-notice--success { --m-notice-line: var(--mt-success); }
body.mt-canonical-ui .m-notice--warning { --m-notice-line: var(--mt-warning); }
body.mt-canonical-ui .m-notice--danger { --m-notice-line: var(--mt-danger); }
body.mt-canonical-ui .m-notice--info { --m-notice-line: var(--mt-info); }

body.mt-canonical-ui .m-progress {
    width: 100%;
    height: 10px;
    overflow: hidden;
    background: var(--mt-surface-2);
    clip-path: var(--mt-point-36);
}

body.mt-canonical-ui .m-progress__value {
    display: block;
    width: var(--m-progress, 0%);
    height: 100%;
    background: var(--mt-gold);
}

body.mt-canonical-ui .m-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--mt-line);
    border-top-color: var(--mt-gold);
    animation: m-spin .8s linear infinite;
}

@keyframes m-spin { to { transform: rotate(360deg); } }

body.mt-canonical-ui .m-skeleton {
    min-height: 1em;
    background: linear-gradient(90deg, var(--mt-surface-2), var(--mt-surface-3), var(--mt-surface-2));
    background-size: 200% 100%;
    animation: m-skeleton 1.2s linear infinite;
}

@keyframes m-skeleton { to { background-position: -200% 0; } }

body.mt-canonical-ui .m-empty-state,
body.mt-canonical-ui .m-error-state,
body.mt-canonical-ui .m-offline-state {
    min-height: 180px;
    padding: 24px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    color: var(--mt-text-secondary);
    text-align: center;
}

/* ==========================================================================
   13. Card / list / table composites
   ========================================================================== */

body.mt-canonical-ui .m-record-card {
    position: relative;
    min-width: 0;
    padding: 38px 14px 14px;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--mt-surface), var(--mt-surface)) padding-box,
        linear-gradient(var(--mt-line), var(--mt-line)) border-box;
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-record-card > .m-status {
    position: absolute;
    inset-block-start: 5px;
    inset-inline-end: 5px;
}

body.mt-canonical-ui .m-record-card__date {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-start: 10px;
    color: var(--mt-text-secondary);
    font-size: var(--mt-text-xs);
}

body.mt-canonical-ui .m-record-card__actions {
    margin-top: 12px;
    padding-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-top: 1px solid var(--mt-line);
}

body.mt-canonical-ui .m-list {
    display: grid;
}

body.mt-canonical-ui .m-list-row {
    min-height: 58px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--mt-line);
}

body.mt-canonical-ui .m-list-row:last-child {
    border-bottom: 0;
}

body.mt-canonical-ui .m-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

body.mt-canonical-ui .m-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--mt-text);
}

body.mt-canonical-ui .m-table th {
    padding: 9px 8px;
    border-bottom: 1px solid var(--mt-line);
    background: var(--mt-surface-2);
    color: var(--mt-text-secondary);
    font-size: var(--mt-text-sm);
    font-weight: 750;
    text-align: start;
    white-space: nowrap;
}

body.mt-canonical-ui .m-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--mt-line);
    color: var(--mt-text);
    font-size: 13px;
    text-align: start;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.mt-canonical-ui .m-table tbody tr:hover {
    background: var(--mt-hover-bg);
}

body.mt-canonical-ui .m-pagination {
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.mt-canonical-ui .m-pagination > :where(a, button) {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    clip-path: var(--mt-diamond);
}

body.mt-canonical-ui .m-pagination > :where(.is-active, [aria-current="page"]) {
    background: var(--mt-gold);
    color: #000000;
}

/* ==========================================================================
   14. Bulk action composite
   ========================================================================== */

body.mt-canonical-ui .m-bulk-bar {
    min-height: 52px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    background: var(--mt-disabled-bg);
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-bulk-count {
    min-width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    background: var(--mt-gold);
    color: #000000;
    clip-path: var(--mt-diamond);
    font-size: var(--mt-text-sm);
    font-weight: 800;
}

/* ==========================================================================
   15. Menu / popover / tooltip
   ========================================================================== */

body.mt-canonical-ui .m-anchor {
    position: relative;
}

body.mt-canonical-ui .m-menu,
body.mt-canonical-ui .m-popover {
    position: absolute;
    z-index: var(--mt-z-dropdown);
    inset-block-start: calc(100% + 4px);
    inset-inline-end: 0;
    min-width: 220px;
    max-width: min(92vw, 420px);
    padding: 6px;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--mt-surface), var(--mt-surface)) padding-box,
        linear-gradient(var(--mt-line), var(--mt-line)) border-box;
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
    box-shadow: var(--mt-shadow);
}

body.mt-canonical-ui .m-menu-item {
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--mt-text);
    text-align: start;
}

body.mt-canonical-ui .m-menu-item:is(:hover, :focus-visible, .is-active) {
    background: var(--mt-selected-bg);
}

body.mt-canonical-ui .m-tooltip {
    position: absolute;
    z-index: var(--mt-z-toast);
    max-width: 280px;
    padding: 6px 8px;
    background: #000000;
    color: #ffffff;
    clip-path: var(--mt-cut-7);
    font-size: var(--mt-text-xs);
}

/* ==========================================================================
   16. Modal / drawer / bottom sheet
   ========================================================================== */

body.mt-canonical-ui .m-modal-layer {
    position: fixed;
    z-index: var(--mt-z-modal);
    inset: 0;
    display: none;
    place-items: center;
    padding: 12px;
}

body.mt-canonical-ui .m-modal-layer.is-open {
    display: grid;
}

body.mt-canonical-ui .m-modal-backdrop {
    position: absolute;
    inset: 0;
    background: var(--mt-backdrop);
}

body.mt-canonical-ui .m-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(680px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow: auto;
}

body.mt-canonical-ui .m-drawer {
    position: fixed;
    z-index: var(--mt-z-drawer);
    top: var(--mt-header-h);
    bottom: 0;
    inset-inline-end: 0;
    width: min(460px, 100vw);
    overflow: auto;
    border-inline-start: 1px solid var(--mt-line);
    background: var(--mt-surface);
    color: var(--mt-text);
    box-shadow: var(--mt-shadow);
    transform: translateX(calc(102% * var(--m-drawer-dir, 1)));
    transition: transform var(--mt-motion-slow) var(--mt-ease);
}

[dir="rtl"] body.mt-canonical-ui .m-drawer {
    --m-drawer-dir: -1;
}

body.mt-canonical-ui .m-drawer.is-open {
    transform: translateX(0);
}

body.mt-canonical-ui .m-bottom-sheet {
    position: fixed;
    z-index: var(--mt-z-modal);
    inset-inline: 0;
    bottom: 0;
    max-height: min(78dvh, 680px);
    overflow: auto;
    border-top: 1px solid var(--mt-line);
    background: var(--mt-surface);
    color: var(--mt-text);
    box-shadow: var(--mt-shadow);
}

/* ==========================================================================
   17. Toast / notification feedback
   ========================================================================== */

body.mt-canonical-ui .m-toast-region {
    position: fixed;
    z-index: var(--mt-z-toast);
    inset-block-start: calc(var(--mt-header-h) + 12px);
    inset-inline-end: 12px;
    width: min(380px, calc(100vw - 24px));
    display: grid;
    gap: 8px;
}

body.mt-canonical-ui .m-toast {
    padding: 12px;
    border: 1px solid var(--mt-line);
    background: var(--mt-surface);
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
    box-shadow: var(--mt-shadow);
}

/* ==========================================================================
   18. Accordion / disclosure / tree
   ========================================================================== */

body.mt-canonical-ui .m-accordion-item {
    border-bottom: 1px solid var(--mt-line);
}

body.mt-canonical-ui .m-accordion-trigger {
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    color: var(--mt-text);
    text-align: start;
}

body.mt-canonical-ui .m-accordion-panel {
    padding: 0 10px 12px;
}

body.mt-canonical-ui .m-tree {
    display: grid;
    gap: 2px;
}

body.mt-canonical-ui .m-tree-item {
    min-height: 40px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   19. File upload / dropzone
   ========================================================================== */

body.mt-canonical-ui .m-file-upload {
    min-height: 120px;
    padding: 16px;
    display: grid;
    place-items: center;
    gap: 8px;
    border: 1px dashed var(--mt-line-strong);
    background: var(--mt-surface-2);
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
    text-align: center;
}

body.mt-canonical-ui .m-file-upload.is-dragover {
    border-color: var(--mt-gold);
    background: var(--mt-selected-bg);
}

/* ==========================================================================
   20. Date / time visual family
   Behavior is owned by M-UXUI/React; M.css owns only the visual projection.
   ========================================================================== */

body.mt-canonical-ui .m-date-picker,
body.mt-canonical-ui .m-time-picker {
    min-width: min(100%, 320px);
}

body.mt-canonical-ui .m-date-rail,
body.mt-canonical-ui .m-time-rail {
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

body.mt-canonical-ui :where(.m-date-rail, .m-time-rail)::-webkit-scrollbar {
    display: none;
}

body.mt-canonical-ui :where(.m-date-rail, .m-time-rail) > button {
    min-width: 88px;
    height: 36px;
    padding: 0 18px;
    flex: 0 0 auto;
    border: 0;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    clip-path: var(--mt-point-36);
}

body.mt-canonical-ui :where(.m-date-rail, .m-time-rail) > button:is(.is-active, [aria-selected="true"]) {
    background: var(--mt-gold);
    color: #000000;
}

body.mt-canonical-ui .m-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

body.mt-canonical-ui .m-calendar-day {
    min-height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--mt-text);
}

body.mt-canonical-ui .m-calendar-day:is(.is-selected, [aria-selected="true"]) {
    background: var(--mt-gold);
    color: #000000;
    clip-path: var(--mt-diamond);
}

body.mt-canonical-ui .m-calendar-day.is-in-range {
    background: var(--mt-selected-bg);
}

/* ==========================================================================
   21. Settings row composite
   ========================================================================== */

body.mt-canonical-ui .m-settings-list {
    display: grid;
}

body.mt-canonical-ui .m-settings-row {
    min-height: 58px;
    padding: 8px 10px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--mt-line);
}

body.mt-canonical-ui .m-settings-row:last-child {
    border-bottom: 0;
}

/* ==========================================================================
   22. Shell: Header + navigation + account/notification/cart
   ========================================================================== */

body.mt-canonical-ui .m-app-shell {
    min-height: 100vh;
    background: var(--mt-canvas);
    color: var(--mt-text);
}

body.mt-canonical-ui .m-header {
    position: sticky;
    z-index: calc(var(--mt-z-sticky) + 20);
    top: 0;
    width: 100%;
    min-height: var(--mt-header-h);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: calc(8px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
    background: var(--mt-header);
    color: var(--mt-header-text);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .10);
}

body.mt-canonical-ui .m-header__brand {
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.mt-canonical-ui .m-header__mark {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

body.mt-canonical-ui .m-header__center {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.mt-canonical-ui .m-header__search {
    width: min(560px, 44vw);
    min-width: 220px;
}

body.mt-canonical-ui .m-header__scope {
    width: min(260px, 24vw);
    min-width: 150px;
}

body.mt-canonical-ui .m-header__actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

body.mt-canonical-ui .m-header :where(.m-icon-button, .m-avatar) {
    color: var(--mt-gold);
}

body.mt-canonical-ui .m-header .m-icon-button {
    background: transparent;
}

body.mt-canonical-ui .m-header .m-search :where(.m-input, .m-search__input),
body.mt-canonical-ui .m-header .m-header__scope .m-select {
    background:
        linear-gradient(#131313, #131313) padding-box,
        linear-gradient(#454545, #454545) border-box;
    color: var(--mt-header-text);
}

body.mt-canonical-ui .m-header .m-search :where(.m-input, .m-search__input):focus,
body.mt-canonical-ui .m-header .m-header__scope .m-select:focus {
    background:
        linear-gradient(#131313, #131313) padding-box,
        linear-gradient(var(--mt-gold), var(--mt-gold)) border-box;
}

body.mt-canonical-ui .m-account-menu,
body.mt-canonical-ui .m-notification-center {
    position: absolute;
    z-index: var(--mt-z-dropdown);
    inset-block-start: calc(100% + 6px);
    inset-inline-end: 0;
    width: min(320px, calc(100vw - 24px));
    max-height: min(70vh, 560px);
    overflow: auto;
    padding: 6px;
    border: 1px solid transparent;
    background:
        linear-gradient(var(--mt-surface), var(--mt-surface)) padding-box,
        linear-gradient(var(--mt-line), var(--mt-line)) border-box;
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
    box-shadow: var(--mt-shadow);
}
body.mt-canonical-ui .m-account-menu__appearance {
    padding: 8px;
    display: grid;
    gap: 6px;
    border-top: 1px solid var(--mt-line);
    border-bottom: 1px solid var(--mt-line);
}
body.mt-canonical-ui .m-account-menu__appearance-options {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 4px;
}
body.mt-canonical-ui .m-account-menu__appearance-options button {
    min-height: 36px; border:0; background:var(--mt-surface-2); color:var(--mt-text); clip-path:var(--mt-point-36);
}
body.mt-canonical-ui .m-account-menu__appearance-options button.is-active { background:var(--mt-gold); color:#000; }

body.mt-canonical-ui .m-account-summary {
    padding: 10px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--mt-line);
}

body.mt-canonical-ui .m-navigation-drawer {
    display: grid;
    gap: 4px;
    padding: 8px;
}

body.mt-canonical-ui .m-navigation-item {
    min-height: 42px;
    padding: 0 10px;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
    text-align: start;
}

body.mt-canonical-ui .m-navigation-item:is(:hover, :focus-visible, .is-active, [aria-current="page"]) {
    background: var(--mt-selected-bg);
}

/* Mobile Search <-> Scope switcher.
   Behavior/state changes are owned by React/M-UXUI. */
body.mt-canonical-ui .m-mobile-header-switcher {
    min-width: 0;
    display: none;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 6px;
}

body.mt-canonical-ui .m-mobile-header-switcher__center {
    min-width: 0;
}

body.mt-canonical-ui .m-mobile-header-switcher[data-state="normal"] .m-search {
    display: none;
}

body.mt-canonical-ui .m-mobile-header-switcher:not([data-state="normal"]) .m-scope-control {
    display: none;
}

/* ==========================================================================
   23. Mobile Bottom Navigation
   ========================================================================== */

body.mt-canonical-ui .m-bottom-nav {
    display: none;
}

body.mt-canonical-ui .m-bottom-nav > :where(a, button) {
    min-width: 0;
    min-height: 52px;
    padding: 2px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    border: 0;
    background: transparent;
    color: var(--mt-gold);
    font-size: 10px;
}

body.mt-canonical-ui .m-bottom-nav__icon-wrap {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    background: var(--mt-gold);
    color: #000000;
    clip-path: var(--mt-diamond);
}

body.mt-canonical-ui .m-bottom-nav__icon-wrap .m-ico {
    width: 22px;
    height: 22px;
    color: #000000;
}

body.mt-canonical-ui .m-bottom-nav__primary {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-top: -18px;
    background: var(--mt-gold);
    color: #000000;
    clip-path: var(--mt-diamond);
}

body.mt-canonical-ui .m-bottom-nav__primary .m-ico {
    width: 26px;
    height: 26px;
}

/* ==========================================================================
   24. Responsive table/card projection
   ========================================================================== */

@media (max-width: 767px) {
    body.mt-canonical-ui .m-table--cards thead {
        display: none;
    }

    body.mt-canonical-ui .m-table--cards,
    body.mt-canonical-ui .m-table--cards tbody,
    body.mt-canonical-ui .m-table--cards tr,
    body.mt-canonical-ui .m-table--cards td {
        display: block;
        width: 100%;
    }

    body.mt-canonical-ui .m-table--cards tr {
        margin-bottom: 10px;
        padding: 10px;
        border: 1px solid transparent;
        background:
            linear-gradient(var(--mt-surface), var(--mt-surface)) padding-box,
            linear-gradient(var(--mt-line), var(--mt-line)) border-box;
        clip-path: var(--mt-cut-7);
    }

    body.mt-canonical-ui .m-table--cards td {
        min-height: 36px;
        padding: 6px 0;
        display: grid;
        grid-template-columns: minmax(90px, 35%) minmax(0, 1fr);
        gap: 8px;
        border-bottom: 1px solid var(--mt-line);
        white-space: normal;
    }

    body.mt-canonical-ui .m-table--cards td::before {
        content: attr(data-label);
        color: var(--mt-text-secondary);
        font-size: var(--mt-text-sm);
        font-weight: 650;
    }
}

/* ==========================================================================
   25. Responsive shell / density
   ========================================================================== */

@media (max-width: 991px) {
    body.mt-canonical-ui .m-grid--4 {
        --m-cols: 2;
    }

    body.mt-canonical-ui .m-header__search {
        width: min(440px, 42vw);
    }
}

@media (max-width: 767px) {
    body.mt-canonical-ui {
        padding-bottom: calc(var(--mt-bottom-nav-h) + env(safe-area-inset-bottom));
    }

    body.mt-canonical-ui .m-container {
        padding-inline: 12px;
    }

    body.mt-canonical-ui .m-grid--2,
    body.mt-canonical-ui .m-grid--3,
    body.mt-canonical-ui .m-grid--4 {
        --m-cols: 1;
    }

    body.mt-canonical-ui :where(input, select, textarea, .m-input, .m-select, .m-textarea) {
        font-size: 16px;
    }

    body.mt-canonical-ui .m-header {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        min-height: var(--mt-header-h);
    }

    body.mt-canonical-ui .m-header__center > .m-header__search {
        display: block;
        width: 100%;
        min-width: 0;
    }

    body.mt-canonical-ui .m-header__scope {
        width: 100%;
        min-width: 0;
    }

    body.mt-canonical-ui .m-mobile-header-switcher {
        display: none;
    }

    body.mt-canonical-ui .m-header__actions {
        gap: 3px;
    }

    body.mt-canonical-ui .m-bottom-nav {
        position: fixed;
        z-index: calc(var(--mt-z-sticky) + 40);
        inset-inline: 0;
        bottom: 0;
        min-height: var(--mt-bottom-nav-h);
        padding: 5px max(6px, env(safe-area-inset-right))
            calc(5px + env(safe-area-inset-bottom))
            max(6px, env(safe-area-inset-left));
        display: grid;
        grid-template-columns: repeat(var(--m-bottom-items, 5), minmax(0, 1fr));
        align-items: end;
        background: #000000;
        color: var(--mt-gold);
        border-top: 1px solid #242424;
    }

    body.mt-canonical-ui .m-drawer {
        bottom: calc(var(--mt-bottom-nav-h) + env(safe-area-inset-bottom));
    }

    body.mt-canonical-ui .m-action-group {
        width: 100%;
    }

    body.mt-canonical-ui .m-action-group > .m-button {
        flex: 1 1 auto;
    }
}

@media (max-width: 420px) {
    body.mt-canonical-ui .m-header {
        gap: 6px;
        padding-inline: 6px;
    }

    body.mt-canonical-ui .m-header__actions .m-icon-button[data-compact-hide="true"] {
        display: none;
    }
}

/* ==========================================================================
   26. Utility ownership
   ========================================================================== */

body.mt-canonical-ui .m-hidden { display: none !important; }
body.mt-canonical-ui .m-block { display: block; }
body.mt-canonical-ui .m-inline-block { display: inline-block; }
body.mt-canonical-ui .m-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.mt-canonical-ui .m-no-wrap { white-space: nowrap; }
body.mt-canonical-ui .m-w-full { width: 100%; }
body.mt-canonical-ui .m-min-w-0 { min-width: 0; }

/* ==========================================================================
   27. Reduced motion / print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    body.mt-canonical-ui *,
    body.mt-canonical-ui *::before,
    body.mt-canonical-ui *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    body.mt-canonical-ui {
        padding: 0;
        background: #ffffff;
        color: #000000;
    }

    body.mt-canonical-ui :where(.m-header, .m-bottom-nav, .m-fab, .m-page-actions, .m-toast-region) {
        display: none !important;
    }

    body.mt-canonical-ui :where(.m-surface, .m-card, .m-record-card) {
        border: 1px solid #777777;
        background: #ffffff;
        color: #000000;
        clip-path: none;
        box-shadow: none;
    }
}

body.mt-canonical-ui .m-tooltip-anchor{position:relative;display:inline-flex}
body.mt-canonical-ui .m-tooltip-bubble{position:absolute;z-index:var(--mt-z-toast);inset-block-end:calc(100% + 6px);inset-inline-start:50%;transform:translateX(-50%);max-width:260px;padding:6px 8px;background:#000;color:#fff;clip-path:var(--mt-cut-7);font-size:var(--mt-text-xs);white-space:nowrap}

@media (max-width: 480px) {
  body.mt-canonical-ui .m-action-group { grid-auto-flow: row; grid-auto-columns:minmax(0,1fr); width:100%; }
  body.mt-canonical-ui .m-action-group > .m-button { width:min(100%,320px); justify-self:center; }
}
@media (max-width: 767px) {
  body.mt-canonical-ui .m-account-menu, body.mt-canonical-ui .m-notification-center {
    position: fixed;
    z-index: var(--mt-z-modal);
    inset-inline: 12px;
    inset-block-start: auto;
    inset-block-end: calc(var(--mt-bottom-nav-h) + env(safe-area-inset-bottom) + 10px);
    width: auto;
    max-height: min(62dvh,560px);
  }
  body.mt-canonical-ui .m-header__actions { gap:3px; }
}

body.mt-canonical-ui .m-native-choice{position:absolute;width:1px;height:1px;margin:-1px;opacity:0;pointer-events:none}
body.mt-canonical-ui .m-native-choice:focus-visible + .m-checkbox,body.mt-canonical-ui .m-native-choice:focus-visible + .m-radio{outline:2px solid var(--mt-focus);outline-offset:3px}

/* UC-CATALOG-TAXON-TILES-V5.4 */
.m-taxon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;align-items:stretch}
.m-taxon-tile{min-height:158px;display:grid;grid-template-rows:minmax(84px,1fr) auto 20px;align-items:center;justify-items:center;gap:8px;padding:12px 10px;text-align:center;text-decoration:none;overflow:hidden}
.m-taxon-tile>img,.m-taxon-tile>span:first-child{display:flex;width:100%;height:88px;min-height:88px;align-items:center;justify-content:center;object-fit:contain}
.m-taxon-tile>img{max-width:82%;margin-inline:auto}
.m-taxon-tile>span:first-child>svg{width:72px;height:72px}
.m-taxon-tile>strong{display:block;width:100%;font-size:clamp(13px,1.25vw,16px);line-height:1.2;font-weight:650;text-align:center;overflow-wrap:anywhere}
.m-taxon-tile>svg:last-child{width:16px;height:16px}
@media(max-width:640px){.m-taxon-grid{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline mandatory;padding-bottom:6px;-webkit-overflow-scrolling:touch}.m-taxon-tile{flex:0 0 132px;min-height:150px;grid-template-rows:82px auto 18px;scroll-snap-align:start}.m-taxon-tile>img,.m-taxon-tile>span:first-child{height:82px;min-height:82px}.m-taxon-tile>strong{font-size:13px}}

/* Action rows stay centered. Button content stays centered. */
body.mt-canonical-ui :where(.m-filter-actions, .m-actions, .m-form-actions, .m-hero__actions, .m-pager) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

body.mt-canonical-ui :where(.m-button, .btn:not(.btn-link), .btn45, .btn36) {
    justify-content: center;
    text-align: center;
}

/* Record card: name shares the avatar row. Status sits on the inline end, so
   Hebrew (rtl) puts it on the left and every other language puts it on the right. */
body.mt-canonical-ui .m-person {
    position: relative;
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: start;
    min-height: 64px;
    padding: 10px 12px;
    background: var(--mt-surface);
    color: inherit;
    text-decoration: none;
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-person__avatar {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--mt-surface-3);
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
    font-weight: 750;
}

body.mt-canonical-ui .m-person__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.mt-canonical-ui .m-person__name {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    min-width: 0;
    margin: 0;
    padding-top: calc((45px - 1lh) / 2);
    font-weight: 750;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.mt-canonical-ui .m-person__meta {
    grid-column: 2;
    grid-row: 3;
    display: grid;
    gap: 2px;
    min-width: 0;
    color: var(--mt-text-secondary);
    font-size: var(--mt-text-sm);
}

body.mt-canonical-ui .m-person__statuses {
    position: relative;
    z-index: 1;
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: flex-start;
    gap: 4px;
    width: 100%;
    max-width: none;
}

body.mt-canonical-ui .m-person__statuses:not(:has(.m-status)) {
    display: none;
}

body.mt-canonical-ui a.m-status,
body.mt-canonical-ui a.m-status:hover,
body.mt-canonical-ui a.m-status:focus-visible {
    color: #000000;
}

body.mt-canonical-ui .m-person__open {
    position: absolute;
    z-index: 0;
    inset: 0;
}

body.mt-canonical-ui .m-hero {
    position: relative;
    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: start;
    padding: 12px 14px 14px;
}

body.mt-canonical-ui .m-hero > .m-person__avatar {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    width: 45px;
    height: 45px;
}

body.mt-canonical-ui .m-hero > .m-hero__meta {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
}

body.mt-canonical-ui .m-hero h1 {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0;
    padding-top: calc((72px - 1lh) / 2);
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

body.mt-canonical-ui .m-hero .m-person__statuses,
body.mt-canonical-ui .m-hero .m-person__chips {
    position: relative;
    grid-column: 1 / -1;
    grid-row: 1;
    top: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    width: 100%;
    max-width: none;
    margin: 0;
}

body.mt-canonical-ui .m-header__search {
    position: relative;
}

body.mt-canonical-ui .m-suggest {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    inset-inline: 0;
    display: grid;
    gap: 4px;
    max-height: min(52vh, 420px);
    overflow: auto;
    padding: 6px;
    background: var(--mt-surface);
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
    border-radius: 0;
}

body.mt-canonical-ui .m-suggest__label,
body.mt-canonical-ui .m-suggest__empty {
    margin: 0;
    padding: 4px 8px 0;
    color: var(--mt-text-secondary);
    font-size: 11px;
    font-weight: 700;
}

body.mt-canonical-ui .m-suggest__item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 6px 8px;
    background: var(--mt-surface);
    color: inherit;
    text-decoration: none;
    clip-path: var(--mt-cut-7);
    border-radius: 0;
}

body.mt-canonical-ui .m-suggest__item .m-ico {
    color: var(--mt-gold);
}

body.mt-canonical-ui .m-suggest__item span {
    display: grid;
    min-width: 0;
}

body.mt-canonical-ui .m-suggest__item strong,
body.mt-canonical-ui .m-suggest__item small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.mt-canonical-ui .m-suggest__item small {
    color: var(--mt-text-secondary);
    font-size: 12px;
}

@media (max-width: 767px) {
    body.mt-canonical-ui .m-header__search {
        width: 100%;
        min-width: 0;
    }
}

body.mt-canonical-ui .m-infinite-sentinel {
    height: 1px;
}

body.mt-canonical-ui .m-suggest[hidden] {
    display: none !important;
}

body.mt-canonical-ui .m-scope {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0 0 10px;
}

body.mt-canonical-ui .m-scope__title {
    flex: none;
    color: var(--mt-text-secondary);
    font-size: 13px;
    font-weight: 750;
}

body.mt-canonical-ui .m-scope__scroll {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
    height: auto;
    min-height: 36px;
    min-width: 0;
    padding: 0 4px;
    overflow-x: auto;
    overflow-y: visible;
    background: var(--mt-surface-2);
    clip-path: none;
    border-radius: 0;
    scrollbar-width: none;
}

body.mt-canonical-ui .m-scope__scroll::-webkit-scrollbar {
    display: none;
}

body.mt-canonical-ui .m-scope__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    min-height: 36px;
    padding: 0 16px;
    background: transparent;
    color: var(--mt-text-secondary);
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    clip-path: none;
    border-radius: 0;
}

body.mt-canonical-ui .m-scope__chip.is-active {
    padding-inline: 18px;
    background: var(--mt-gold);
    color: #000000;
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-scope__chip.is-active :is(span, b) {
    color: #000000;
}

body.mt-canonical-ui .m-filters .m-field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    min-height: 36px;
    padding: 0 26px 0 8px;
}

body.mt-canonical-ui .m-filters .m-field > .m-ico {
    position: relative;
    z-index: 0;
    flex: none;
    grid-row: auto;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

body.mt-canonical-ui .m-filters .m-field__label {
    position: relative;
    z-index: 0;
    flex: none;
    grid-column: auto;
    grid-row: auto;
    max-width: 58%;
    color: var(--mt-text);
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    pointer-events: none;
}

body.mt-canonical-ui .m-filters .m-field > select {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 36px;
    min-height: 0;
    margin: 0;
    padding: 0 23px 0 8px;
    background: transparent;
    color: var(--mt-text-secondary);
    font-size: 13px;
    text-align: end;
    text-align-last: end;
}

body.mt-canonical-ui .m-filters .m-field:has(> select)::after {
    z-index: 2;
}

body.mt-canonical-ui .m-filter-actions {
    margin-bottom: 12px;
}

body.mt-canonical-ui .m-filter-actions :where(.m-button, a) {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 0 22px;
    clip-path: var(--mt-point-36);
}

body.mt-canonical-ui .m-header__search .m-field {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    grid-template-rows: 44px;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
}

body.mt-canonical-ui .m-header__search .m-field > .m-ico {
    grid-column: 1;
    grid-row: 1;
    z-index: 1;
}

body.mt-canonical-ui .m-header__search .m-field > .m-input {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 28px;
    background: transparent;
    text-align: start;
}

body.mt-canonical-ui .m-header__search .m-field > .m-input:placeholder-shown {
    text-align: center;
}


body.mt-canonical-ui .m-side-nav {
    display: none;
}

@media (min-width: 768px) {
    body.mt-canonical-ui .m-app-shell {
        display: grid;
        grid-template-columns: 248px minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        align-items: start;
    }

    body.mt-canonical-ui .m-header {
        grid-column: 1 / -1;
    }

    body.mt-canonical-ui .m-side-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
        position: sticky;
        top: var(--mt-header-h);
        max-height: calc(100vh - var(--mt-header-h));
        overflow: auto;
        padding: 12px 10px 20px;
        background: var(--mt-header);
        color: var(--mt-gold);
    }

    body.mt-canonical-ui .m-page {
        grid-column: 2;
    }
}

body.mt-canonical-ui .m-side-nav a {
    min-height: 36px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-side-nav a.is-child {
    padding-inline-start: 28px;
}

body.mt-canonical-ui .m-side-nav a.is-nested {
    padding-inline-start: 46px;
}

body.mt-canonical-ui .m-side-nav a.is-active {
    background: var(--mt-gold);
    color: #000000;
}

body.mt-canonical-ui .m-side-nav a.is-active .m-ico {
    color: #000000;
}

body.mt-canonical-ui .m-side-nav .m-ico {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
body.mt-canonical-ui .m-person {
    grid-template-columns: 45px minmax(0, 1fr);
}

body.mt-canonical-ui .m-person__avatar,
body.mt-canonical-ui .m-person__avatar--lg,
body.mt-canonical-ui .m-hero > .m-person__avatar,
body.mt-canonical-ui .m-header .m-avatar {
    width: 45px;
    height: 45px;
    border-radius: 0;
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-person__name {
    padding-top: calc((45px - 1lh) / 2);
}

body.mt-canonical-ui .m-hero {
    grid-template-columns: 45px minmax(0, 1fr);
}

body.mt-canonical-ui .m-header .m-avatar {
    padding: 0;
    border: 0;
    cursor: pointer;
    background: var(--mt-surface-3);
    color: var(--mt-text);
}

body.mt-canonical-ui .m-account-anchor {
    position: relative;
}

body.mt-canonical-ui .m-account-menu .m-account-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
}

body.mt-canonical-ui .m-account-menu .m-account-summary small {
    color: var(--mt-text-secondary);
}

body.mt-canonical-ui .m-account-appearance {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
    gap: 4px;
    align-items: center;
}

body.mt-canonical-ui .m-account-appearance button {
    min-height: 36px;
    border: 0;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
    cursor: pointer;
}

body.mt-canonical-ui .m-account-appearance button.is-active {
    background: var(--mt-gold);
    color: #000000;
}

body.mt-canonical-ui .m-account-appearance__icon {
    display: grid;
    place-items: center;
    color: var(--mt-gold);
}

body.mt-canonical-ui .m-account-language {
    display: grid;
    gap: 4px;
    padding: 8px;
}

body.mt-canonical-ui .m-account-language select {
    height: 36px;
    padding: 0 10px;
    border: 0;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-account-qr {
    display: grid;
    place-items: center;
    padding: 8px;
}

body.mt-canonical-ui .m-account-menu form {
    margin: 0;
    padding: 6px;
}

body.mt-canonical-ui .m-account-menu form .m-button {
    width: 100%;
}
/* Temporary layer above the page.
   --mt-float is --mt-surface-2: one step darker in light, one step lighter in dark. */
body.mt-canonical-ui .m-account-menu,
body.mt-canonical-ui .m-notification-center,
body.mt-canonical-ui .m-suggest,
body.mt-canonical-ui .m-search__results,
body.mt-canonical-ui .m-menu,
body.mt-canonical-ui .m-popover,
body.mt-canonical-ui .dropdown-menu,
body.mt-canonical-ui .popover,
body.mt-canonical-ui .m-float {
    background: var(--mt-float);
    box-shadow: var(--mt-float-shadow);
}

body.mt-canonical-ui .m-fab {
    box-shadow: var(--mt-float-shadow);
}

body.mt-canonical-ui a.m-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    height: 32px;
    min-height: 32px;
    margin: 0 0 12px;
    padding: 0 16px 0 18px;
    border: 0;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
    clip-path: polygon(12px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 12px 100%, 0 50%);
}

html[dir="rtl"] body.mt-canonical-ui a.m-back {
    padding: 0 18px 0 16px;
    clip-path: polygon(0 7px, 7px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 7px 100%, 0 calc(100% - 7px));
}

html[dir="rtl"] body.mt-canonical-ui a.m-back .m-ico {
    transform: scaleX(-1);
}

body.mt-canonical-ui .m-section {
    margin: 18px 0 8px;
}

body.mt-canonical-ui .m-section h2 {
    margin: 0;
    font-size: 15px;
}

body.mt-canonical-ui .m-history {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 8px;
}

body.mt-canonical-ui .m-page {
    padding-bottom: calc(var(--mt-bottom-nav-h) + env(safe-area-inset-bottom) + 36px);
}

body.mt-canonical-ui .m-infinite {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    margin: 8px 0 12px;
    color: var(--mt-text-secondary);
    font-size: 13px;
    font-weight: 750;
}

body.mt-canonical-ui .m-infinite[hidden] {
    display: none;
}

body.mt-canonical-ui .m-infinite__mark {
    width: 14px;
    height: 14px;
    background: var(--mt-gold);
    clip-path: var(--mt-diamond);
    animation: m-infinite-pulse .9s ease-in-out infinite;
}

@keyframes m-infinite-pulse {
    50% { opacity: .35; }
}


/* Folded from borderless.css so the site loads one stylesheet. */

/* Sole visual delta versus canonical M.css: no stroke frames. Background only. */

body.mt-canonical-ui :where(.m-input, .m-select, .m-textarea, .form-control) {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

body.mt-canonical-ui :where(.m-button, .m-icon-button, button) {
    border: 0 !important;
    box-shadow: none !important;
}

body.mt-canonical-ui :where(.m-card, .m-surface, .m-record, .m-account-menu, .m-person) {
    border: 0 !important;
    box-shadow: none !important;
}

body.mt-canonical-ui .m-page {
    width: min(880px, 100%);
    margin-inline: auto;
    padding: 12px 12px 28px;
    display: grid;
    gap: 12px;
}

body.mt-canonical-ui .m-banner {
    padding: 10px 12px;
    background: var(--mt-surface-2);
    color: var(--mt-text-secondary);
    font-size: var(--mt-text-sm);
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-list {
    display: grid;
    gap: 8px;
}

body.mt-canonical-ui .m-person__avatar {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--mt-surface-3);
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
    font-weight: 750;
}

body.mt-canonical-ui .m-person__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.mt-canonical-ui .m-person__avatar--lg {
    width: 45px;
    height: 45px;
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-person strong {
    font-weight: 750;
}

body.mt-canonical-ui .m-pager {
    display: flex;
    justify-content: center;
    gap: 8px;
}

body.mt-canonical-ui .m-bottom-nav a {
    min-height: 44px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    color: var(--mt-gold);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
}

body.mt-canonical-ui .m-bottom-nav a.is-active {
    color: #ffffff;
}

body.mt-canonical-ui .m-detail {
    display: grid;
    gap: 8px;
    padding: 14px;
    background: var(--mt-surface);
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-detail div {
    display: grid;
    gap: 2px;
}

body.mt-canonical-ui .m-detail dt {
    color: var(--mt-text-secondary);
    font-size: var(--mt-text-sm);
}

body.mt-canonical-ui .m-login {
    width: min(420px, 100%);
    margin: 12vh auto 0;
    display: grid;
    gap: 14px;
    padding: 0 16px;
}

body.mt-canonical-ui .m-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

body.mt-canonical-ui .m-field--wide,
body.mt-canonical-ui .m-filter-actions {
    grid-column: 1 / -1;
}

body.mt-canonical-ui .m-filter-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

body.mt-canonical-ui .m-person__body {
    display: grid;
    gap: 4px;
    min-width: 0;
}

body.mt-canonical-ui .m-person__title,
body.mt-canonical-ui .m-person__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
    min-width: 0;
}

body.mt-canonical-ui .m-person__title small,
body.mt-canonical-ui .m-person__line,
body.mt-canonical-ui .m-hero__id,
body.mt-canonical-ui .m-hero__work {
    color: var(--mt-text-secondary);
    font-size: var(--mt-text-sm);
}

body.mt-canonical-ui .m-hero,
body.mt-canonical-ui .m-section,
body.mt-canonical-ui .m-kpi {
    background: var(--mt-surface);
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-hero h1,
body.mt-canonical-ui .m-section h2 {
    margin: 0;
    font-size: var(--mt-title-sm, 18px);
}

body.mt-canonical-ui .m-hero p {
    margin: 2px 0 0;
}

body.mt-canonical-ui .m-hero__actions,
body.mt-canonical-ui .m-tabs {
    display: flex;
    gap: 8px;
    overflow: auto;
    padding-bottom: 2px;
}

body.mt-canonical-ui .m-hero__actions {
    margin-top: 8px;
}

body.mt-canonical-ui .m-tabs a {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 12px;
    display: inline-grid;
    align-items: center;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    text-decoration: none;
    font-weight: 700;
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

body.mt-canonical-ui .m-kpi {
    padding: 10px 12px;
}

body.mt-canonical-ui .m-kpi strong {
    display: block;
    font-size: 22px;
}

body.mt-canonical-ui .m-kpi span,
body.mt-canonical-ui .m-empty,
body.mt-canonical-ui .m-record span {
    color: var(--mt-text-secondary);
    font-size: var(--mt-text-sm);
}

body.mt-canonical-ui .m-section {
    display: grid;
    gap: 8px;
    padding: 14px;
}

body.mt-canonical-ui .m-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    margin: 0;
}

body.mt-canonical-ui .m-grid div {
    min-width: 0;
}

body.mt-canonical-ui .m-grid dt {
    color: var(--mt-text-secondary);
    font-size: var(--mt-text-sm);
}

body.mt-canonical-ui .m-grid dd {
    margin: 0;
    overflow-wrap: anywhere;
}

body.mt-canonical-ui .m-grid .is-wide {
    grid-column: 1 / -1;
}

body.mt-canonical-ui .m-record {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    background: var(--mt-surface-2);
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-empty {
    margin: 0;
}

body.mt-canonical-ui .m-pager__count {
    display: grid;
    align-items: center;
    color: var(--mt-text-secondary);
}

body.mt-canonical-ui .m-section h2 span {
    color: var(--mt-text-secondary);
    font-size: var(--mt-text-sm);
    font-weight: 650;
}

body.mt-canonical-ui .m-hero a,
body.mt-canonical-ui .m-record a {
    color: inherit;
}

body.mt-canonical-ui .m-person__line:empty {
    display: none;
}

body.mt-canonical-ui .m-ico {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 18px;
    color: var(--mt-text-secondary);
}

body.mt-canonical-ui .m-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.mt-canonical-ui .m-button .m-ico,
body.mt-canonical-ui .m-bottom-nav .m-ico {
    color: currentColor;
}

body.mt-canonical-ui .m-bottom-nav > a {
    display: grid;
    justify-items: center;
    gap: 2px;
}

body.mt-canonical-ui .m-fab {
    position: fixed;
    z-index: 80;
    right: 16px;
    left: auto;
    bottom: calc(var(--mt-bottom-nav-h) + env(safe-area-inset-bottom) + 15px);
}

body.mt-canonical-ui .m-fab .m-ico {
    width: 26px;
    height: 26px;
    color: #000;
}

/* Detail pairs: caption sits inside the same cell as the value. */
body.mt-canonical-ui .m-grid div {
    display: grid !important;
    gap: 2px !important;
    min-width: 0;
    padding: 8px 10px;
    background: var(--mt-surface-2);
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-grid dt {
    margin: 0;
    color: var(--mt-text-secondary);
    font-size: 11px;
    font-weight: 700;
}

body.mt-canonical-ui .m-grid dd {
    margin: 0;
}

body.mt-canonical-ui .m-tabs a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

body.mt-canonical-ui .m-tabs a .m-ico {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--mt-gold);
}

/* Bottom menu and floating plus: always on, not only under 767px. */
body.mt-canonical-ui {
    padding-bottom: calc(var(--mt-bottom-nav-h) + env(safe-area-inset-bottom)) !important;
}

body.mt-canonical-ui .m-bottom-nav {
    position: fixed !important;
    z-index: 70 !important;
    display: grid !important;
    grid-template-columns: repeat(var(--m-bottom-items, 2), minmax(0, 1fr)) !important;
    align-items: end !important;
    overflow: visible !important;
    inset-inline: 0 !important;
    bottom: 0 !important;
    min-height: var(--mt-bottom-nav-h) !important;
    padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    background: #000000 !important;
    color: var(--mt-gold) !important;
    border-top: 0 !important;
}

body.mt-canonical-ui .m-bottom-nav > a {
    min-height: 52px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    color: var(--mt-gold) !important;
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 750 !important;
}

body.mt-canonical-ui .m-bottom-nav > a.is-active {
    color: #ffffff !important;
}

body.mt-canonical-ui .m-fab {
    position: fixed !important;
    z-index: 80 !important;
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    right: 16px !important;
    left: auto !important;
    bottom: calc(var(--mt-bottom-nav-h) + env(safe-area-inset-bottom) + 15px) !important;
    background: var(--mt-gold) !important;
    color: #000000 !important;
    text-decoration: none !important;
    clip-path: var(--mt-diamond) !important;
    box-shadow: var(--mt-float-shadow) !important;
}

body.mt-canonical-ui .m-page {
    padding-bottom: 28px;
}
body.mt-canonical-ui .m-person {
    grid-template-columns: 45px minmax(0, 1fr);
}

body.mt-canonical-ui .m-person__avatar,
body.mt-canonical-ui .m-person__avatar--lg,
body.mt-canonical-ui .m-hero > .m-person__avatar,
body.mt-canonical-ui .m-header .m-avatar {
    width: 45px;
    height: 45px;
    border-radius: 0;
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-person__name {
    padding-top: calc((45px - 1lh) / 2);
}

body.mt-canonical-ui .m-hero {
    grid-template-columns: 45px minmax(0, 1fr);
}

body.mt-canonical-ui .m-header .m-avatar {
    padding: 0;
    border: 0;
    cursor: pointer;
    background: var(--mt-surface-3);
    color: var(--mt-text);
}

body.mt-canonical-ui .m-account-anchor {
    position: relative;
}

body.mt-canonical-ui .m-account-menu .m-account-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
}

body.mt-canonical-ui .m-account-menu .m-account-summary small {
    color: var(--mt-text-secondary);
}

body.mt-canonical-ui .m-account-appearance {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
    gap: 4px;
    align-items: center;
}

body.mt-canonical-ui .m-account-appearance button {
    min-height: 36px;
    border: 0;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
    cursor: pointer;
}

body.mt-canonical-ui .m-account-appearance button.is-active {
    background: var(--mt-gold);
    color: #000000;
}

body.mt-canonical-ui .m-account-appearance__icon {
    display: grid;
    place-items: center;
    color: var(--mt-gold);
}

body.mt-canonical-ui .m-account-language {
    display: grid;
    gap: 4px;
    padding: 8px;
}

body.mt-canonical-ui .m-account-language select {
    height: 36px;
    padding: 0 10px;
    border: 0;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-account-qr {
    display: grid;
    place-items: center;
    padding: 8px;
}

body.mt-canonical-ui .m-account-menu form {
    margin: 0;
    padding: 6px;
}

body.mt-canonical-ui .m-account-menu form .m-button {
    width: 100%;
}

body.mt-canonical-ui .m-header,
html[data-theme="dark"] body.mt-canonical-ui .m-header,
body.mt-canonical-ui.mt-dark .m-header {
    background: #000000 !important;
    color: var(--mt-gold) !important;
}

body.mt-canonical-ui .m-header__brand {
    color: var(--mt-gold);
}

body.mt-canonical-ui .m-brand-mark {
    display: block;
    width: 34px;
    height: 30px;
}

body.mt-canonical-ui .m-bottom-nav,
html[data-theme="dark"] body.mt-canonical-ui .m-bottom-nav,
body.mt-canonical-ui.mt-dark .m-bottom-nav {
    background: #000000 !important;
    color: var(--mt-gold) !important;
}

body.mt-canonical-ui .m-header .m-avatar {
    width: 36px !important;
    height: 36px !important;
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-header {
    overflow: visible;
}

body.mt-canonical-ui .m-account-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;
    inset-inline-start: auto;
    width: min(320px, 66.666vw);
    margin-top: 0;
}

body.mt-canonical-ui .m-theme-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 36px;
    margin: 8px;
    background: var(--mt-surface-2);
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-theme-switch button {
    min-height: 36px;
    border: 0;
    background: transparent;
    color: var(--mt-text-secondary);
    display: grid;
    place-items: center;
    cursor: pointer;
}

body.mt-canonical-ui .m-theme-switch button.is-active {
    background: var(--mt-gold);
    color: #000000;
}

body.mt-canonical-ui .m-theme-switch .m-ico {
    width: 18px;
    height: 18px;
}

@media (max-width: 767px) {
    body.mt-canonical-ui .m-account-menu {
        position: absolute !important;
        inset: auto 0 auto auto !important;
        top: 100% !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;
        width: 66.666vw !important;
        max-height: min(70dvh, 560px);
    }
}

body.mt-canonical-ui .m-theme-switch {
    width: 84px;
    height: 28px;
    margin: 8px;
    justify-self: start;
}

body.mt-canonical-ui .m-theme-switch button {
    min-height: 28px;
}

body.mt-canonical-ui .m-theme-switch .m-ico {
    width: 14px;
    height: 14px;
}

body.mt-canonical-ui .m-account-language.m-field {
    width: calc(100% - 16px);
    min-height: 36px;
    height: 36px;
    margin: 0 8px 8px;
    padding: 0 28px 0 10px;
    grid-template-rows: 36px;
}

body.mt-canonical-ui .m-account-language.m-field > select {
    grid-row: 1;
    height: 36px;
    min-height: 0;
    padding: 0;
    background: transparent;
    color: var(--mt-text);
    clip-path: none;
    appearance: none;
    -webkit-appearance: none;
}

body.mt-canonical-ui .m-account-qr {
    cursor: pointer;
}

body.mt-canonical-ui .m-account-qr canvas,
body.mt-canonical-ui .m-account-qr img {
    display: block;
    background: #ffffff;
    box-shadow: 0 0 0 3px #ffffff;
}

body.mt-canonical-ui .m-account-qr.is-expanded {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    background: rgba(0, 0, 0, .82);
}

body.mt-canonical-ui .m-account-qr.is-expanded canvas,
body.mt-canonical-ui .m-account-qr.is-expanded img {
    width: calc(100vw - 24px) !important;
    height: calc(100vw - 24px) !important;
}
/* Temporary layer above the page.
   --mt-float is --mt-surface-2: one step darker in light, one step lighter in dark. */
body.mt-canonical-ui .m-account-menu,
body.mt-canonical-ui .m-notification-center,
body.mt-canonical-ui .m-suggest,
body.mt-canonical-ui .m-search__results,
body.mt-canonical-ui .m-menu,
body.mt-canonical-ui .m-popover,
body.mt-canonical-ui .dropdown-menu,
body.mt-canonical-ui .popover,
body.mt-canonical-ui .m-float {
    background: var(--mt-float) !important;
    box-shadow: var(--mt-float-shadow) !important;
}

body.mt-canonical-ui .m-fab {
    box-shadow: var(--mt-float-shadow);
}

body.mt-canonical-ui .m-account-menu .m-field {
    background: var(--mt-surface-2) !important;
    color: var(--mt-text) !important;
}

body.mt-canonical-ui .m-account-menu .m-field > .m-ico {
    color: var(--mt-gold) !important;
}

body.mt-canonical-ui .m-account-menu .m-field > select {
    color: var(--mt-text) !important;
    -webkit-text-fill-color: var(--mt-text);
    background: transparent !important;
}

body.mt-canonical-ui .m-person__avatar img.is-logo {
    object-fit: contain;
    padding: 6px;
    background: transparent;
}

body.mt-canonical-ui a.m-back .m-ico,
body.mt-canonical-ui .m-drill .m-ico,
body.mt-canonical-ui .m-field:has(> select)::after,
body.mt-canonical-ui .m-control-frame__chevron {
    color: var(--mt-gold) !important;
    border-color: var(--mt-gold) !important;
}

body.mt-canonical-ui .m-drill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    color: var(--mt-text);
    font-weight: 750;
}

body.mt-canonical-ui .m-drill .m-ico {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
}

@media (max-width: 767px) and (orientation: portrait) {
    body.mt-canonical-ui .m-side-nav.is-open {
        display: flex;
        flex-direction: column;
        gap: 2px;
        position: fixed;
        z-index: 90;
        inset-inline: 10px;
        bottom: calc(var(--mt-browser-bottom) + var(--mt-bottom-nav-h) + env(safe-area-inset-bottom));
        max-height: min(70vh, 520px);
        overflow: auto;
        padding: 10px;
        background: var(--mt-float);
        color: var(--mt-text);
        box-shadow: var(--mt-float-shadow);
        clip-path: var(--mt-cut-7);
    }

    body.mt-canonical-ui .m-side-nav.is-open a {
        color: var(--mt-text);
    }

    body.mt-canonical-ui .m-side-nav.is-open a.is-active {
        background: var(--mt-gold);
        color: #000000;
    }
}

body.mt-canonical-ui .m-bottom-nav > button {
    font: inherit;
    cursor: pointer;
}
body.mt-canonical-ui .m-person__avatar img,
body.mt-canonical-ui .m-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    clip-path: var(--mt-cut-7);
    transform: translateZ(0);
}

body.mt-canonical-ui {
    --mt-browser-bottom: 0px;
}

body.mt-canonical-ui .m-bottom-nav {
    bottom: var(--mt-browser-bottom) !important;
    height: calc(var(--mt-bottom-nav-h) + env(safe-area-inset-bottom)) !important;
    min-height: calc(var(--mt-bottom-nav-h) + env(safe-area-inset-bottom)) !important;
    padding-top: 4px !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    box-sizing: border-box !important;
}

body.mt-canonical-ui .m-fab {
    bottom: calc(var(--mt-browser-bottom) + var(--mt-bottom-nav-h) + env(safe-area-inset-bottom) + 3px) !important;
}

body.mt-canonical-ui .m-brand-assets {
    display: grid;
    gap: 12px;
}

body.mt-canonical-ui .m-brand-asset {
    margin: 0;
    padding: 8px 0;
    background: transparent;
}

body.mt-canonical-ui .m-brand-asset img {
    display: block;
    width: min(100%, 520px);
    max-height: 180px;
    object-fit: contain;
    background: transparent;
}

body.mt-canonical-ui .m-brand-asset.is-print {
    padding: 12px;
    background: #f3efe6;
}

body.mt-canonical-ui .m-brand-asset figcaption {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 750;
    color: var(--mt-text-secondary);
}

body.mt-canonical-ui .m-brand-asset.is-print figcaption {
    color: #3a342c;
}

body.mt-canonical-ui h1.m-page-title {
    margin: 6px 0 14px;
    text-align: start;
    font-size: 22px;
    font-weight: 750;
    line-height: 1.15;
}

body.mt-canonical-ui .m-person__avatar.is-filled {
    background: var(--mark-bg, #ffffff) !important;
}

body.mt-canonical-ui .m-person__avatar.is-filled img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    padding: 8px;
    background: transparent !important;
}

body.mt-canonical-ui .m-infinite:not(.is-busy) {
    min-height: 12px;
    margin: 0;
}

body.mt-canonical-ui .m-infinite.is-busy {
    min-height: 48px;
}

body.mt-canonical-ui .m-scope {
    display: block;
    width: 100%;
}

body.mt-canonical-ui .m-scope__scroll {
    width: 100%;
    flex: none;
}

body.mt-canonical-ui .m-theme-switch {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 88px !important;
    height: 36px !important;
    margin: 8px !important;
    justify-self: start !important;
    background: #000000 !important;
    clip-path: var(--mt-cut-7) !important;
    overflow: hidden;
}

body.mt-canonical-ui .m-theme-switch button,
html[data-theme="light"] body.mt-canonical-ui .m-theme-switch button,
html[data-theme="dark"] body.mt-canonical-ui .m-theme-switch button {
    min-height: 0 !important;
    height: 100% !important;
    border: 0 !important;
    background: #000000 !important;
    color: var(--mt-gold) !important;
    clip-path: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.mt-canonical-ui .m-theme-switch button.is-active {
    background: var(--mt-gold) !important;
    color: #000000 !important;
}

body.mt-canonical-ui .m-theme-switch .m-ico {
    width: 16px !important;
    height: 16px !important;
    color: var(--mt-gold) !important;
}

body.mt-canonical-ui .m-theme-switch button.is-active .m-ico {
    color: #000000 !important;
}

body.mt-canonical-ui .m-account-qr.is-expanded {
    position: fixed !important;
    z-index: 4000 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(0, 0, 0, .82) !important;
    clip-path: none !important;
    overflow: visible !important;
}

body.mt-canonical-ui .m-account-qr.is-expanded canvas,
body.mt-canonical-ui .m-account-qr.is-expanded img {
    width: min(calc(100vw - 24px), calc(100dvh - 24px)) !important;
    height: min(calc(100vw - 24px), calc(100dvh - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px #ffffff !important;
}

html[data-theme] body.mt-canonical-ui .m-theme-switch {
    width: 112px !important;
    height: 36px !important;
    background: #000000 !important;
}

html[data-theme] body.mt-canonical-ui .m-theme-switch button:not(.is-active) {
    background: #000000 !important;
    color: #ffffff !important;
}

html[data-theme] body.mt-canonical-ui .m-theme-switch button:not(.is-active) .m-ico {
    color: #ffffff !important;
}

html[data-theme] body.mt-canonical-ui .m-theme-switch button.is-active {
    background: var(--mt-gold) !important;
    color: #000000 !important;
}

html[data-theme] body.mt-canonical-ui .m-theme-switch button.is-active .m-ico {
    color: #000000 !important;
}

body.mt-canonical-ui :is(
    .m-button:not(.m-button--secondary),
    .m-fab,
    .m-scope__chip.is-active,
    .m-status--active
) {
    color: #000000 !important;
}

body.mt-canonical-ui :is(
    .m-button:not(.m-button--secondary),
    .m-fab,
    .m-scope__chip.is-active,
    .m-status--active
) .m-ico {
    color: #000000 !important;
}

body.mt-canonical-ui .m-section {
    scroll-margin-top: 72px;
}

body.mt-canonical-ui .m-tabs a.is-active {
    background: var(--mt-gold) !important;
    color: #000000 !important;
}

body.mt-canonical-ui .m-tabs a.is-active .m-ico {
    color: #000000 !important;
}

body.mt-canonical-ui .m-dev-field { position: relative; }
body.mt-canonical-ui .m-dev-field .m-field > button.m-select { position: absolute; z-index: 1; inset: 0; height: 36px; margin: 0; padding: 0 28px 0 8px; border: 0; background: transparent; color: var(--mt-text-secondary); font: inherit; font-size: 13px; text-align: end; }
body.mt-canonical-ui .m-dev-field .m-field::after { content: ""; position: absolute; z-index: 2; top: 50%; inset-inline-end: 12px; width: 7px; height: 7px; border-inline-end: 1.6px solid var(--mt-gold); border-bottom: 1.6px solid var(--mt-gold); transform: translateY(-65%) rotate(45deg); pointer-events: none; }
body.mt-canonical-ui .m-dev-field > .m-menu { position: absolute; z-index: 40; inset-inline: 0; top: calc(100% + 4px); padding: 4px; }
body.mt-canonical-ui .m-dev-field .m-menu button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; border: 0; background: transparent; color: inherit; text-align: start; }
body.mt-canonical-ui .m-dev-field .m-menu button.is-selected { background: var(--mt-gold); color: #000; }
body.mt-canonical-ui .m-dev-field .m-menu button.is-selected .m-ico { color: #000; }
body.mt-canonical-ui .m-person.is-bulk-selected { outline: none; }
body.mt-canonical-ui .m-button.is-danger { background: #d85b56; color: #000; }

/* Bottom menu only while the phone is upright.
   Landscape and wide screens use the side menu. */
@media (min-width: 768px), (orientation: landscape) {
    body.mt-canonical-ui {
        padding-bottom: 0 !important;
    }

    body.mt-canonical-ui .m-bottom-nav {
        display: none !important;
    }

    body.mt-canonical-ui .m-fab {
        bottom: calc(16px + var(--mt-browser-bottom) + env(safe-area-inset-bottom)) !important;
    }
}

@media (orientation: landscape) and (max-width: 767px) {
    body.mt-canonical-ui .m-app-shell {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        align-items: start;
    }

    body.mt-canonical-ui .m-header {
        grid-column: 1 / -1;
    }

    body.mt-canonical-ui .m-side-nav {
        display: flex !important;
        flex-direction: column;
        position: sticky;
        top: var(--mt-header-h);
        max-height: calc(100dvh - var(--mt-header-h));
        overflow: auto;
        background: #000000;
        color: var(--mt-gold);
    }

    body.mt-canonical-ui .m-page {
        grid-column: 2;
        min-width: 0;
    }
}

@media (max-width: 767px) and (orientation: portrait) {
    body.mt-canonical-ui {
        padding-bottom: calc(var(--mt-browser-bottom) + var(--mt-bottom-nav-h) + env(safe-area-inset-bottom)) !important;
    }

    body.mt-canonical-ui .m-side-nav.is-open {
        z-index: 65;
        bottom: calc(var(--mt-browser-bottom) + var(--mt-bottom-nav-h) + env(safe-area-inset-bottom)) !important;
    }
}
#mt-shell { display: contents; }
body.mt-canonical-ui .m-header,
body.mt-canonical-ui .m-bottom-nav { direction: ltr; }
body.mt-canonical-ui .m-fab {
    right: 16px !important;
    bottom: calc(var(--mt-browser-bottom) + var(--mt-bottom-nav-h) + env(safe-area-inset-bottom) + 16px) !important;
}
@media (min-width: 768px), (orientation: landscape) {
    body.mt-canonical-ui .m-fab {
        bottom: calc(16px + var(--mt-browser-bottom) + env(safe-area-inset-bottom)) !important;
    }
}
body.mt-canonical-ui .m-calendar__head { display: flex; align-items: center; gap: 6px; }
body.mt-canonical-ui .m-calendar__head button { border: 0; background: transparent; color: var(--mt-gold); }
body.mt-canonical-ui .m-calendar__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
body.mt-canonical-ui .m-calendar__grid button { min-height: 32px; border: 0; background: transparent; color: inherit; }
body.mt-canonical-ui .m-calendar__grid button.is-selected { background: var(--mt-gold); color: #000; }
body.mt-canonical-ui .m-suggest__more { max-height: 240px; overflow: auto; background: var(--mt-float); }
body.mt-canonical-ui .m-scope { display: flex; min-width: 0; }
body.mt-canonical-ui .m-scope__scroll { display: flex; gap: 8px; overflow: auto; min-width: 0; }
body.mt-canonical-ui .m-scope__chip { flex: 0 0 auto; }

/* mt-lab-shared */
body.mt-canonical-ui button.m-scope__chip { border: 0; background: transparent; font: inherit; cursor: pointer; }
body.mt-canonical-ui .m-choice { display: flex; align-items: center; gap: 12px; min-height: 36px; margin: 8px 0; }
body.mt-canonical-ui button.m-toggle,
body.mt-canonical-ui button.m-checkbox { border: 0; padding: 0; cursor: pointer; }
body.mt-canonical-ui .m-person.is-expanded { position: relative; z-index: 5; }
body.mt-canonical-ui .m-card-detail { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 4px); padding: 10px 12px; background: #000; color: var(--mt-gold); }
body.mt-canonical-ui .m-card-detail a,
body.mt-canonical-ui .m-card-detail strong { color: var(--mt-gold); }
body.mt-canonical-ui .m-suggest__item { display: flex; align-items: center; gap: 8px; width: 100%; }
body.mt-canonical-ui .m-suggest__item.is-active,
body.mt-canonical-ui .m-suggest__item.is-active small,
body.mt-canonical-ui .m-suggest__item.is-active .m-suggest__state { background: var(--mt-gold); color: #000; }
body.mt-canonical-ui .m-suggest__item.is-active .m-ico { color: #000; }
body.mt-canonical-ui .m-suggest__state { margin-inline-start: auto; font-style: normal; font-size: 11px; }
/* mt-lab-fix */
@media (max-width: 767px) {
    body.mt-canonical-ui .m-header {
        grid-template-columns: 44px minmax(0, 1fr) auto !important;
        overflow: visible;
    }

    body.mt-canonical-ui .m-header__brand {
        position: relative;
        z-index: 8;
        display: inline-flex !important;
        visibility: visible !important;
        width: 44px;
        min-width: 44px;
        overflow: visible;
    }

    body.mt-canonical-ui .m-header__center {
        position: relative;
        z-index: 1;
        min-width: 0;
    }

    body.mt-canonical-ui .m-header__search {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.mt-canonical-ui .m-brand-mark {
        display: block !important;
        width: 34px;
        height: 30px;
    }
}

body.mt-canonical-ui .m-suggest.is-expanded {
    max-height: min(78dvh, 760px);
}

body.mt-canonical-ui .m-account-menu .m-account-qr {
    width: calc(100% - 16px);
    margin: 0 8px 8px;
    cursor: pointer;
}

body.mt-canonical-ui .m-account-menu .m-account-qr.is-expanded {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: calc(100% - 16px) !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    margin: 0 8px 8px !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    clip-path: none !important;
    place-items: stretch !important;
}

body.mt-canonical-ui .m-account-menu .m-account-qr.is-expanded canvas,
body.mt-canonical-ui .m-account-menu .m-account-qr.is-expanded img,
body.mt-canonical-ui .m-account-menu .m-account-qr.is-expanded table {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

body.mt-canonical-ui .m-account-menu .m-dev-field {
    position: relative;
    width: calc(100% - 16px);
    margin: 0 8px 8px;
}

body.mt-canonical-ui .m-account-menu .m-dev-field .m-field {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding: 0 26px 0 8px;
}

body.mt-canonical-ui .m-account-menu .m-dev-field .m-field > .m-ico {
    position: relative;
    z-index: 0;
    flex: none;
    grid-row: auto;
    width: 16px;
    height: 16px;
}

body.mt-canonical-ui .m-account-menu .m-dev-field .m-field > .m-field__label {
    position: relative;
    z-index: 0;
    flex: none;
    grid-column: auto;
    grid-row: auto;
    max-width: 46%;
    color: var(--mt-text);
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
}

body.mt-canonical-ui .m-account-menu .m-dev-field .m-field > button.m-select {
    position: absolute;
    inset: 0;
    height: 36px;
    padding: 0 28px 0 8px;
    text-align: end;
}

body.mt-canonical-ui .m-dev-field > .m-menu {
    inset-inline-start: 0 !important;
    inset-inline-end: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

body.mt-canonical-ui .m-calendar__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

body.mt-canonical-ui .m-calendar__head strong {
    min-width: 72px;
    text-align: center;
}


#mt-lab .m-list {
    display: grid;
    gap: 8px;
}

#mt-lab .m-person {
    background: var(--mt-surface-2);
    border: 0;
    box-shadow: none;
    outline: none;
}

body.mt-canonical-ui .m-person.is-bulk-selected,
body.mt-canonical-ui .m-person.is-selected,
body.mt-canonical-ui #mt-lab .m-person.is-bulk-selected {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: color-mix(in srgb, var(--mt-gold) 22%, var(--mt-surface-2)) !important;
}


/* Date picker, More, and Records. These replace the earlier copies. */
body.mt-canonical-ui .m-page,
body.mt-canonical-ui .m-section,
body.mt-canonical-ui .m-filters,
body.mt-canonical-ui .m-dev-field {
    overflow: visible;
}

body.mt-canonical-ui .m-dev-field > .m-calendar {
    position: relative;
    z-index: 6;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: none;
    margin: 8px 0 0;
    padding: 12px;
    background: var(--mt-surface);
    box-shadow: var(--mt-float-shadow);
    overflow: visible;
}

@media (max-width: 767px) {
    body.mt-canonical-ui .m-dev-field > .m-calendar {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: 12px 12px 20px;
    }
}

body.mt-canonical-ui .m-calendar .m-date-rail {
    margin-bottom: 8px;
}

body.mt-canonical-ui .m-calendar .m-date-rail > button.is-active {
    color: #000000;
}

body.mt-canonical-ui .m-calendar-week {
    margin-bottom: 2px;
}

body.mt-canonical-ui .m-calendar-week span,
body.mt-canonical-ui .m-calendar-day {
    min-height: 40px;
    color: var(--mt-text);
}

body.mt-canonical-ui .m-calendar-week span {
    display: grid;
    place-items: center;
    color: var(--mt-text-secondary);
    font-size: 12px;
}

body.mt-canonical-ui .m-calendar-day:disabled {
    visibility: hidden;
}

body.mt-canonical-ui .m-side-nav a:not(.is-active) {
    background: transparent;
}

body.mt-canonical-ui .m-side-nav a.is-active,
body.mt-canonical-ui .m-side-nav.is-open a.is-active,
body.mt-canonical-ui .m-side-nav a.is-active .m-ico,
body.mt-canonical-ui .m-bottom-nav a.is-active,
body.mt-canonical-ui .m-bottom-nav a.is-active .m-ico {
    color: #000000;
}

body.mt-canonical-ui .m-scope__scroll {
    height: auto;
    min-height: 36px;
    overflow-x: auto;
    overflow-y: visible;
    clip-path: none;
}

body.mt-canonical-ui .m-scope__chip,
body.mt-canonical-ui button.m-scope__chip {
    flex: 0 0 auto;
    white-space: nowrap;
    overflow: visible;
}

body.mt-canonical-ui .m-scope__chip.is-active,
body.mt-canonical-ui button.m-scope__chip.is-active {
    padding-inline: 18px;
    background: var(--mt-gold);
    color: #000000;
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-scope__chip.is-active :is(span, b) {
    color: #000000;
}

/* The calendar stays in the page flow and the month rail scrolls inside it. */
body.mt-canonical-ui .m-filters,
body.mt-canonical-ui .m-dev-field {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

body.mt-canonical-ui .m-dev-field > .m-calendar {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
}

body.mt-canonical-ui .m-calendar .m-date-rail,
body.mt-canonical-ui .m-calendar .m-calendar-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

body.mt-canonical-ui .m-calendar .m-date-rail {
    overflow-x: auto;
    overflow-y: hidden;
}

@media (max-width: 767px) {
    body.mt-canonical-ui {
        overflow-x: hidden;
    }

    body.mt-canonical-ui .m-dev-field > .m-calendar {
        width: 100%;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

body.mt-canonical-ui .m-scope {
    display: flex;
    max-width: 100%;
    min-width: 0;
}

body.mt-canonical-ui .m-scope__scroll {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
body.mt-canonical-ui .m-dev-field > .m-menu:not(.m-calendar) {
    max-height: min(320px, 70vh);
    overflow: auto;
}
body.mt-canonical-ui .m-dev-field > .m-menu .m-field::after {
    content: none;
}
body.mt-canonical-ui .m-filters > .m-dev-field[data-layer="dates"] {
    grid-column: 1 / -1;
}

body.mt-canonical-ui .m-filters > .m-dev-field[data-layer="dates"] .m-field > button.m-select {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.mt-canonical-ui .m-dev-field > .m-calendar .m-date-rail {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

body.mt-canonical-ui .m-dev-field > .m-calendar .m-date-rail > button {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    min-width: 84px;
}

body.mt-canonical-ui .m-calendar-day.is-selected,
body.mt-canonical-ui .m-calendar-day:is(.is-selected, [aria-selected="true"]) {
    background: transparent !important;
    clip-path: none !important;
    color: #000000;
}

body.mt-canonical-ui .m-calendar-day {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

body.mt-canonical-ui .m-calendar-day > span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    line-height: 1;
    flex: 0 0 32px;
}

body.mt-canonical-ui .m-calendar-day.is-selected > span {
    background: var(--mt-gold);
    color: #000000;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

body.mt-canonical-ui .m-log-param {
    display: grid;
    gap: 4px;
    margin-top: 6px;
}

body.mt-canonical-ui .m-log-param > button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: start;
}

body.mt-canonical-ui .m-log-param .m-log-param {
    margin-inline-start: 16px;
}
/* calendar-range-gold-50 */
body.mt-canonical-ui .m-calendar-day.is-in-range {
    background: transparent !important;
}

body.mt-canonical-ui .m-calendar-day.is-in-range > span {
    background: color-mix(in srgb, var(--mt-gold) 50%, transparent);
    color: #000000;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

body.mt-canonical-ui .m-dev-field > .m-calendar .m-date-rail > button:not(.is-active) {
    background: var(--mt-surface-2) !important;
    color: var(--mt-text) !important;
}

body.mt-canonical-ui .m-dev-field > .m-calendar .m-date-rail > button.is-active {
    background: var(--mt-gold) !important;
    color: #000000 !important;
}

/* activity-choice-fit */
body.mt-canonical-ui .m-dev-field > .m-calendar .m-date-rail > button {
    width: max-content !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    height: 36px;
    padding: 0 26px !important;
    box-sizing: border-box;
}

body.mt-canonical-ui .m-log {
    cursor: pointer;
}

body.mt-canonical-ui .m-log .m-card-detail {
    position: static;
    inset: auto;
    top: auto;
    margin-top: 8px;
    background: transparent;
    color: inherit;
}

body.mt-canonical-ui .m-log .m-card-detail > button,
body.mt-canonical-ui .m-log-param > button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: start;
    cursor: pointer;
}

/* activity-log-lines */
body.mt-canonical-ui .m-log .m-person__name,
body.mt-canonical-ui .m-log .m-person__line,
body.mt-canonical-ui .m-log .m-log-line,
body.mt-canonical-ui .m-log .m-log-line__value {
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
}

body.mt-canonical-ui .m-log .m-person__name a,
body.mt-canonical-ui .m-log .m-person__line {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    text-decoration: none;
}

body.mt-canonical-ui .m-log .m-card-detail {
    grid-column: 1 / -1;
    position: static;
    width: auto;
    min-width: 0;
}

body.mt-canonical-ui .m-log .m-log-line {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 32px;
    color: inherit;
    text-decoration: none;
}

body.mt-canonical-ui .m-log .m-log-line__label {
    flex: 0 0 auto;
}

body.mt-canonical-ui .m-log .m-log-line__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* activity-filter-gap */
body.mt-canonical-ui #mt-activity > div {
    display: grid;
    gap: 20px;
    align-content: start;
}
body.mt-canonical-ui #mt-activity .m-filter-actions {
    margin: 0;
}

/* permission-modules */
body.mt-canonical-ui .m-perm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
}

body.mt-canonical-ui .m-perm-actions .m-scope__chip {
    height: 32px;
    min-height: 32px;
}


/* flow-pages */
body.mt-canonical-ui #mt-packing > div,
body.mt-canonical-ui #mt-work > div {
    display: grid;
    gap: 16px;
    align-content: start;
}

body.mt-canonical-ui .m-person > .m-card-detail {
    grid-column: 1 / -1;
    position: static;
    min-width: 0;
}


/* selected-value */
body.mt-canonical-ui .m-dev-field > .m-field {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding-inline-end: 26px;
}

body.mt-canonical-ui .m-dev-field > .m-field > .m-field__label {
    flex: none;
    max-width: none;
}

body.mt-canonical-ui .m-dev-field > .m-field > button.m-select,
body.mt-canonical-ui .m-account-menu .m-dev-field > .m-field > button.m-select,
body.mt-canonical-ui .m-filters .m-field > select {
    position: relative;
    inset: auto;
    z-index: 1;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 36px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: start;
    text-align-last: start;
    background: transparent;
    color: var(--mt-text-secondary);
}


/* perm-table */
body.mt-canonical-ui .m-perm-table {
    display: grid;
    gap: 8px;
}

body.mt-canonical-ui .m-perm-table__head,
body.mt-canonical-ui .m-perm-table__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 56px 56px 56px 56px;
    align-items: center;
}

body.mt-canonical-ui .m-perm-table__head span {
    color: var(--mt-text-secondary);
    font-size: 11px;
    font-weight: 650;
    text-align: center;
}

body.mt-canonical-ui .m-perm-table__row {
    min-height: 52px;
    padding: 0 12px 0 14px;
    background: var(--mt-surface-2);
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-perm-table__name {
    min-width: 0;
    overflow: hidden;
    color: var(--mt-text);
    font-weight: 650;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.mt-canonical-ui .m-perm-table__row > .m-checkbox,
body.mt-canonical-ui .m-perm-table__row > .m-toggle {
    justify-self: center;
}

body.mt-canonical-ui .m-perm-table__row > button:disabled {
    opacity: 0.4;
}


/* perm-head */
body.mt-canonical-ui .m-perm-table__head {
    padding: 0 12px 0 14px;
}

body.mt-canonical-ui .m-perm-table__head span {
    justify-self: center;
    width: 56px;
    text-align: center;
}

body.mt-canonical-ui .m-perm-table__head span:first-child,
body.mt-canonical-ui .m-perm-table__head span:last-child {
    width: auto;
}


/* more-size */
body.mt-canonical-ui .m-bottom-nav > button {
    min-height: 52px !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    padding: 2px !important;
    margin: 0 !important;
    background: transparent !important;
    color: var(--mt-gold) !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    cursor: pointer;
}

body.mt-canonical-ui .m-bottom-nav > button .m-bottom-nav__icon-wrap {
    width: 45px !important;
    height: 45px !important;
}

/* storefront */
body.mt-canonical-ui.mt-store { background:#000; color:#fff; padding-bottom:24px !important; }
body.mt-canonical-ui .m-store-tools { position:fixed; z-index:40; top:calc(8px + env(safe-area-inset-top)); right:max(10px, env(safe-area-inset-right)); display:flex; align-items:center; gap:8px; direction:ltr; }
body.mt-canonical-ui .m-lang-globe, body.mt-canonical-ui.mt-store .m-avatar, body.mt-canonical-ui .m-header--login .m-avatar { width:36px; height:36px; display:grid; place-items:center; padding:0; border:0; background:transparent; color:#fff; cursor:pointer; }
body.mt-canonical-ui.mt-store .m-avatar { border-radius:0; }
body.mt-canonical-ui .m-lang-globe .m-ico, body.mt-canonical-ui.mt-store .m-avatar .m-ico { width:22px; height:22px; }
body.mt-canonical-ui .m-store { width:min(560px, calc(100% - 32px)); margin:72px auto 32px; display:grid; justify-items:center; gap:22px; }
body.mt-canonical-ui .m-store__logo .m-brand-mark { width:84px; height:74px; color:var(--mt-gold); }
body.mt-canonical-ui .m-store__frame { position:relative; width:100%; padding:28px; background:repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px); }
body.mt-canonical-ui .m-store__cloth { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
body.mt-canonical-ui .m-store__panel { position:relative; z-index:1; background:#000; color:#fff; padding:28px 22px; display:grid; gap:14px; text-align:center; }
body.mt-canonical-ui .m-store__panel p { margin:0; font-size:17px; line-height:1.45; }
body.mt-canonical-ui .m-store-actions { width:100%; display:flex; justify-content:center; align-items:start; gap:8px; }
body.mt-canonical-ui .m-store-actions > button { flex:1 1 0; min-width:0; max-width:160px; display:grid; justify-items:center; align-content:start; gap:8px; padding:0; border:0; background:transparent; color:var(--mt-gold); cursor:pointer; font:inherit; font-size:12px; font-weight:650; line-height:1.25; text-align:center; }
body.mt-canonical-ui .m-store-actions .m-bottom-nav__icon-wrap { width:72px; height:72px; }
body.mt-canonical-ui .m-store-actions .m-bottom-nav__icon-wrap .m-ico { width:28px; height:28px; }
body.mt-canonical-ui .m-store-actions > button > span:last-child { display:block; max-width:100%; }
body.mt-canonical-ui .m-lang-menu { display:grid; padding:6px; }
body.mt-canonical-ui .m-lang-menu button { min-height:36px; padding:6px 10px; border:0; background:transparent; color:inherit; text-align:start; cursor:pointer; }
body.mt-canonical-ui .m-lang-menu button.is-active { background:var(--mt-gold); color:#000; }
body.mt-canonical-ui .m-header--login .m-brand-mark { width:40px; height:36px; }
body.mt-canonical-ui .m-theme-switch--text { height:auto; min-height:36px; }
body.mt-canonical-ui .m-theme-switch--text button { font-size:11px; line-height:1.2; padding:4px; }
@media (prefers-reduced-motion: reduce) {
    body.mt-canonical-ui .m-store__cloth { display:none; }
}

body.mt-canonical-ui .m-lang-globe, body.mt-canonical-ui .m-header--login .m-avatar { color:inherit; }
body.mt-canonical-ui.mt-store .m-lang-globe, body.mt-canonical-ui.mt-store .m-avatar { color:#fff; }
body.mt-canonical-ui .m-account-menu > a { display:flex; align-items:center; min-height:44px; padding:8px 12px; color:inherit; text-decoration:none; }
body.mt-canonical-ui .m-store-actions .m-bottom-nav__icon-wrap { clip-path:var(--mt-diamond); background:var(--mt-gold); color:#000; }
body.mt-canonical-ui .m-header--login { background:transparent; box-shadow:none; }
body.mt-canonical-ui .m-header--login .m-brand-mark { width:40px; height:36px; }

body.mt-canonical-ui .m-store-actions > a { flex:1 1 0; min-width:0; max-width:160px; display:grid; justify-items:center; align-content:start; gap:8px; padding:0; border:0; background:transparent; color:#fff; cursor:pointer; font:inherit; font-size:12px; font-weight:650; line-height:1.25; text-align:center; text-decoration:none; }

html { overflow-x: clip; }
body.mt-canonical-ui .m-page,
body.mt-canonical-ui .m-header { max-width: 100%; }
body.mt-canonical-ui .m-person__line,
body.mt-canonical-ui .m-person__meta { min-width: 0; overflow-wrap: anywhere; }
body.mt-canonical-ui :where(#mt-module, .m-page) .m-button { display: flex; width: max-content; max-width: calc(100% - 24px); margin-inline: auto; }
body.mt-canonical-ui .m-filter-actions .m-button { margin-inline: 0; }
body.mt-canonical-ui .m-dev-field:has(> .m-menu) { z-index: 30; }
body.mt-canonical-ui .m-fab:not([href]) { display: none; }
body.mt-canonical-ui .m-header--login .m-brand-mark { width: 36px; height: 36px; }
@media (max-width: 767px) {
    body.mt-canonical-ui .m-dev-field > .m-calendar {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}
body.mt-canonical-ui .m-store__logo { display:grid; place-items:center; width:100%; min-height:96px; }
body.mt-canonical-ui .m-store__logo .m-brand-mark { width:120px !important; height:106px !important; color:var(--mt-gold); }
body.mt-canonical-ui.mt-store .m-lang-globe,
body.mt-canonical-ui.mt-store .m-avatar,
body.mt-canonical-ui.mt-store .m-lang-globe .m-ico,
body.mt-canonical-ui.mt-store .m-avatar .m-ico { color:var(--mt-gold) !important; }
body.mt-canonical-ui .m-store__legal { margin:8px 0 0; color:#fff; font-size:13px; letter-spacing:.04em; }
body.mt-canonical-ui .m-store-actions > a { animation:m-store-in .7s ease both; }
body.mt-canonical-ui .m-store-actions > a:nth-child(2) { animation-delay:.18s; }
body.mt-canonical-ui .m-store-actions > a:nth-child(3) { animation-delay:.36s; }
@keyframes m-store-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
body.mt-canonical-ui .m-store-login { display:grid; gap:8px; width:min(280px, 100%); padding:4px 8px 8px; }
body.mt-canonical-ui .m-store-login .m-button { width:100%; max-width:none; }
@media (prefers-reduced-motion: reduce) {
    body.mt-canonical-ui .m-store-actions > a { animation:none; }
}

html[data-theme="light"] body.mt-canonical-ui .m-field {
    background: #e3e1db;
}
html[data-theme="light"] body.mt-canonical-ui .m-button--secondary {
    background: #d9d7d0;
    color: #111111;
}
html[data-theme="light"] body.mt-canonical-ui .m-store-login .m-button--secondary .m-ico,
html[data-theme="light"] body.mt-canonical-ui .m-list .m-button--secondary .m-ico {
    color: #111111;
}
html[data-theme="dark"] body.mt-canonical-ui .m-field {
    background: #333333;
}
html[data-theme="dark"] body.mt-canonical-ui .m-button--secondary {
    background: #333333;
    color: #f7f7f7;
}
html[data-theme="dark"] body.mt-canonical-ui .m-account-menu .m-button--secondary .m-ico,
html[data-theme="dark"] body.mt-canonical-ui .m-store-login .m-button--secondary .m-ico {
    color: #f7f7f7;
}
html[data-theme="dark"] body.mt-canonical-ui .m-account-menu .m-field {
    background: #3a3a3a !important;
}
html[data-theme="light"] body.mt-canonical-ui .m-account-menu .m-field {
    background: #e3e1db !important;
}
body.mt-canonical-ui .m-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px;
}
body.mt-canonical-ui .m-tile {
    min-height: 104px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    padding: 12px 8px;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    text-align: center;
    clip-path: var(--mt-cut-7);
}
body.mt-canonical-ui .m-tile strong {
    font-size: 22px;
    line-height: 1;
}
body.mt-canonical-ui .m-tile span {
    color: var(--mt-text-secondary);
    font-size: 11px;
    font-weight: 700;
}
html[data-theme="dark"] body.mt-canonical-ui .m-tile {
    background: #3a3a3a;
}
html[data-theme="light"] body.mt-canonical-ui .m-tile {
    background: #e3e1db;
}
/* Mobile column: filters and cards stay inside the screen. */
body.mt-canonical-ui .m-app-shell,
body.mt-canonical-ui .m-page,
body.mt-canonical-ui .m-page > *,
body.mt-canonical-ui .m-filters,
body.mt-canonical-ui .m-list,
body.mt-canonical-ui .m-scope,
body.mt-canonical-ui .m-dev-field,
body.mt-canonical-ui .m-person,
body.mt-canonical-ui .m-section {
    min-width: 0;
    max-width: 100%;
}
body.mt-canonical-ui .m-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.mt-canonical-ui .m-filters .m-field,
body.mt-canonical-ui .m-dev-field > .m-field {
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}
body.mt-canonical-ui .m-dev-field > .m-field > .m-field__label,
body.mt-canonical-ui .m-filters .m-field__label {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 62%;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.mt-canonical-ui .m-person__statuses,
body.mt-canonical-ui .m-status {
    max-width: 100%;
}
body.mt-canonical-ui .m-scope__scroll {
    max-width: 100%;
    overflow-x: auto;
}
@media (max-width: 767px) {
    body.mt-canonical-ui .m-page {
        width: 100%;
        overflow-x: clip;
    }
    body.mt-canonical-ui .m-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    body.mt-canonical-ui .m-filter-actions {
        margin-top: 16px;
        margin-bottom: 16px;
    }
    body.mt-canonical-ui .m-perm-table__head,
    body.mt-canonical-ui .m-perm-table__row {
        grid-template-columns: minmax(0, 1fr) repeat(4, minmax(0, 44px));
    }
    body.mt-canonical-ui .m-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    body.mt-canonical-ui .m-tile strong {
        font-size: 18px;
    }
}

body.mt-canonical-ui .m-menu__mark{width:18px;height:18px;object-fit:contain;flex:0 0 18px}
body.mt-canonical-ui .m-filters>#mt-range,body.mt-canonical-ui .m-history>#mt-range,body.mt-canonical-ui .m-history>.m-dev-field{grid-column:1 / -1;width:100%}
body.mt-canonical-ui .m-infinite{height:1px}

body.mt-canonical-ui .m-public-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 12px;padding-top:calc(8px + env(safe-area-inset-top));background:var(--mt-bg,#111);direction:ltr}
body.mt-canonical-ui .m-public-bar .m-brand-mark{width:36px;height:36px;color:var(--mt-gold)}
body.mt-canonical-ui .m-public-tools{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
body.mt-canonical-ui .m-public-bar .m-lang-globe,body.mt-canonical-ui .m-public-bar .m-avatar,body.mt-canonical-ui .m-public-tools .m-lang-globe,body.mt-canonical-ui .m-public-tools .m-avatar{color:var(--mt-gold)}
body.mt-canonical-ui .m-inquiry,body.mt-canonical-ui .m-form{display:flex;flex-direction:column;gap:16px}
body.mt-canonical-ui .m-form>.m-button,body.mt-canonical-ui .m-page>.m-button{align-self:center}
body.mt-canonical-ui .m-field__mark{grid-column:2;grid-row:1;justify-self:end;color:var(--mt-gold);font-size:11px;font-weight:700}
body.mt-canonical-ui .m-field__label{max-width:calc(100% - 72px)}
body.mt-canonical-ui .m-phone{grid-column:2;grid-row:2;display:flex;align-items:center;gap:8px;min-width:0}
body.mt-canonical-ui .m-phone__code{flex:0 0 auto;border:0;background:transparent;color:var(--mt-text);font:inherit;cursor:pointer}
body.mt-canonical-ui .m-phone .m-input{flex:1;min-width:0;background:transparent;padding:0}
body.mt-canonical-ui .m-phone__menu{grid-column:1 / -1;display:flex;flex-direction:column;gap:8px}
body.mt-canonical-ui .m-phone__list{max-height:220px;overflow:auto;display:flex;flex-direction:column}
body.mt-canonical-ui .m-phone__list button{text-align:start;background:transparent;color:inherit;border:0;padding:8px 0;cursor:pointer}
body.mt-canonical-ui .m-phone__list button.is-active{color:var(--mt-gold)}
body.mt-canonical-ui :where(input,textarea,select){color-scheme:inherit}
body.mt-canonical-ui :where(input,textarea,select):-webkit-autofill,body.mt-canonical-ui :where(input,textarea,select):-webkit-autofill:hover,body.mt-canonical-ui :where(input,textarea,select):-webkit-autofill:focus,body.mt-canonical-ui :where(input,textarea,select):-webkit-autofill:active{transition:background-color 99999s ease-out 0s;-webkit-text-fill-color:var(--mt-text) !important;caret-color:var(--mt-text);background-color:transparent !important;background-image:none !important;-webkit-box-shadow:0 0 0 1000px var(--mt-surface-2) inset !important;box-shadow:0 0 0 1000px var(--mt-surface-2) inset !important}
body.mt-canonical-ui .m-inquiry__title,body.mt-canonical-ui .m-inquiry__text{margin:0}
body.mt-canonical-ui .m-telegram{align-self:center}

body.mt-canonical-ui .m-wordmark{display:block;height:36px;width:auto;max-width:148px}
html[data-theme="light"] body.mt-canonical-ui .m-wordmark{filter:invert(1)}

@keyframes mt-mark-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes mt-word-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
body.mt-canonical-ui.mt-store .m-public-bar .m-brand-mark{animation:mt-mark-in .35s ease both}
body.mt-canonical-ui .m-home-wordmark{display:block;height:72px;width:auto;max-width:min(280px,82vw);margin:10px auto 6px;animation:mt-word-in .5s ease .32s both}
@media (prefers-reduced-motion:reduce){
body.mt-canonical-ui.mt-store .m-public-bar .m-brand-mark,body.mt-canonical-ui .m-home-wordmark{animation:none}
}
body.mt-canonical-ui .m-pack{display:grid;gap:16px}
body.mt-canonical-ui .m-pack .m-filters,body.mt-canonical-ui .m-pack .m-list{grid-template-columns:minmax(0,1fr);gap:16px}
body.mt-canonical-ui .m-pack .m-filter-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:16px;margin-bottom:16px}
body.mt-canonical-ui .m-card-detail{display:grid;gap:16px;margin-top:16px}
body.mt-canonical-ui .m-person__statuses--counts{justify-content:space-between;align-items:center;direction:ltr;gap:8px}
body.mt-canonical-ui .m-counts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0;color:var(--mt-text-secondary);font-size:11px;font-weight:650;line-height:1.2}
body.mt-canonical-ui .m-count b{font-weight:750;color:inherit}
body.mt-canonical-ui .m-count b.is-process{color:var(--mt-gold)}
body.mt-canonical-ui .m-count b.is-stock{color:var(--mt-success)}
body.mt-canonical-ui .m-public-bar{background:#000}
body.mt-canonical-ui.mt-store,body.mt-canonical-ui.mt-store .m-public-bar,body.mt-canonical-ui.mt-store .m-store{background:#000}
body.mt-canonical-ui.mt-request{background:#111}
body.mt-canonical-ui.mt-request .m-page{background:#111}
body.mt-canonical-ui .m-home-mark{display:flex;justify-content:center;margin:12px 0 0;color:var(--mt-gold)}
body.mt-canonical-ui .m-home-mark .m-brand-mark{width:72px;height:64px}
body.mt-canonical-ui .m-login-field{display:block;width:100%;height:44px;min-height:44px;margin:0 0 10px;padding:0 12px;text-align:center}
body.mt-canonical-ui .m-login-field::placeholder{color:var(--mt-text-secondary,#9a9a9a);opacity:1}
@media (max-width:767px){
  body.mt-canonical-ui .m-account-menu.m-lang-menu{inset-inline:auto 12px;width:min(50vw,220px)}
}
body.mt-canonical-ui .m-field .m-textarea{padding-inline-end:92px}
body.mt-canonical-ui .m-home-mark{margin:6px 0 0}
body.mt-canonical-ui .m-home-mark .m-brand-mark{width:72px;height:62px;display:block}
body.mt-canonical-ui .m-home-wordmark{height:58px;margin:0 auto 8px}
body.mt-canonical-ui .m-public-bar{position:sticky;top:0;z-index:80;background:#000}
body.mt-canonical-ui .m-telegram .m-ico{color:#2AABEE}
body.mt-canonical-ui .m-field__label{padding-inline-end:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.mt-canonical-ui .m-field:has(textarea) .m-field__label{white-space:normal;overflow:visible;text-overflow:unset;line-height:1.3}
body.mt-canonical-ui .m-field__mark{position:relative;z-index:1;background:transparent}
body.mt-canonical-ui h1.m-page-title{display:flex;align-items:center;gap:10px}
body.mt-canonical-ui h1.m-page-title .m-page-title__icon,body.mt-canonical-ui h1.m-page-title>svg{width:22px;height:22px;color:var(--mt-gold);flex:none}
body.mt-canonical-ui.mt-store .m-store{margin-top:96px}
body.mt-canonical-ui .m-home-mark{position:relative;z-index:1;margin:8px 0 0}
body.mt-canonical-ui .m-home-mark .m-brand-mark{width:84px;height:74px}
body.mt-canonical-ui .m-home-wordmark{margin-top:0}
body.mt-canonical-ui h1.m-page-title>svg{overflow:hidden}

body.mt-canonical-ui.mt-store,body.mt-canonical-ui.mt-request,body.mt-canonical-ui.mt-request .m-page,body.mt-canonical-ui .m-public-bar{background:#000}
body.mt-canonical-ui .m-public-bar{position:sticky;top:0;z-index:80}
body.mt-canonical-ui .m-home-wordmark{margin-top:-11px}

body.mt-canonical-ui .m-public-bar{position:fixed;top:0;left:0;right:0;z-index:90;background:#000}
body.mt-canonical-ui.mt-request,body.mt-canonical-ui.mt-store{padding-top:calc(56px + env(safe-area-inset-top))}
body.mt-canonical-ui .m-public-bar .m-lang-globe,body.mt-canonical-ui .m-public-bar .m-avatar,body.mt-canonical-ui .m-public-tools .m-lang-globe,body.mt-canonical-ui .m-public-tools .m-avatar{width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;border-radius:0;background:transparent;color:var(--mt-gold);clip-path:none;overflow:visible;box-shadow:none}
body.mt-canonical-ui .m-public-bar .m-ico,body.mt-canonical-ui .m-public-tools .m-ico{width:22px;height:22px;color:var(--mt-gold)}
body.mt-canonical-ui .m-inquiry .m-dev-field > .m-field > .m-field__label{flex:0 1 auto;max-width:none}
body.mt-canonical-ui .m-inquiry .m-dev-field > .m-field > button.m-select{flex:0 1 auto;margin-inline-start:8px;color:var(--mt-text-secondary);text-align:start}

body.mt-canonical-ui{--mt-public-bar-h:calc(56px + env(safe-area-inset-top))}
body.mt-canonical-ui.mt-request{padding-top:var(--mt-public-bar-h)}
body.mt-canonical-ui.mt-request .m-public-bar{height:var(--mt-public-bar-h);min-height:0;padding:0 12px;padding-top:env(safe-area-inset-top);align-items:center}
body.mt-canonical-ui.mt-request .m-page{padding-top:8px;gap:8px}
body.mt-canonical-ui .m-inquiry{gap:10px}
body.mt-canonical-ui .m-inquiry .m-form{gap:16px}
body.mt-canonical-ui .m-field__error{grid-column:1 / -1;margin:4px 0 0;color:var(--mt-gold);font-size:12px;line-height:1.3}
body.mt-canonical-ui .m-inquiry .m-dev-field > .m-field > .m-field__label{white-space:normal;flex:1 1 auto;max-width:none;line-height:1.3}
body.mt-canonical-ui.mt-request{--mt-public-bar-h:calc(44px + env(safe-area-inset-top, 0px));padding-top:var(--mt-public-bar-h)}
body.mt-canonical-ui.mt-request .m-public-bar{box-sizing:border-box;height:var(--mt-public-bar-h);min-height:var(--mt-public-bar-h);padding:0 12px;padding-top:env(safe-area-inset-top, 0px);align-items:center}
body.mt-canonical-ui.mt-request .m-page{padding-top:4px;gap:8px}
body.mt-canonical-ui.mt-request h1.m-page-title{margin:0 0 4px}
body.mt-canonical-ui.mt-request .m-inquiry{gap:8px}
body.mt-canonical-ui.mt-request .m-inquiry .m-form{gap:16px}
body.mt-canonical-ui.mt-request .m-inquiry .m-dev-field > .m-field{height:auto;min-height:52px;align-items:flex-start;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
body.mt-canonical-ui.mt-request .m-inquiry .m-dev-field > .m-field > .m-ico{align-self:flex-start;margin-top:1px}
body.mt-canonical-ui.mt-request .m-inquiry .m-dev-field > .m-field > .m-field__label{flex:1 1 auto;max-width:none;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;padding-inline-end:18px}
body.mt-canonical-ui.mt-request .m-inquiry .m-dev-field > .m-field > button.m-select{position:static;inset:auto;z-index:0;height:auto;min-height:0;flex:1 1 100%;margin:2px 0 0;padding:0 18px 0 30px;text-align:start;white-space:normal;color:var(--mt-text)}
body.mt-canonical-ui.mt-request .m-inquiry .m-dev-field > .m-field > button.m-select:empty{display:none}
body.mt-canonical-ui.mt-request .m-field > .m-field__error,body.mt-canonical-ui.mt-request .m-field-block > .m-field__error{display:block;grid-column:1 / -1;grid-row:3;width:100%;margin:4px 0 0;color:var(--mt-gold);font-size:12px;line-height:1.3}

body.mt-canonical-ui.mt-request{--mt-public-bar-h:calc(44px + env(safe-area-inset-top, 0px));padding-top:var(--mt-public-bar-h) !important}
body.mt-canonical-ui.mt-request .m-public-bar{position:fixed !important;top:0;left:0;right:0;z-index:90;box-sizing:border-box;height:var(--mt-public-bar-h);min-height:var(--mt-public-bar-h);margin:0;padding:0 12px;padding-top:env(safe-area-inset-top, 0px);background:#000}
body.mt-canonical-ui.mt-request .m-page{margin-top:0;padding-top:8px;gap:6px}
body.mt-canonical-ui.mt-request h1.m-page-title{margin:0 0 2px}
body.mt-canonical-ui.mt-request .m-inquiry{gap:8px}
body.mt-canonical-ui.mt-request .m-inquiry .m-form{gap:16px}