/*
 * 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-back: polygon(16px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 16px 100%, 0 50%);
    --mt-back-rtl: polygon(7px 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 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;
    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;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
body.mt-canonical-ui .m-page-title > span {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

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: 0;
    width: max-content;
    max-width: 100%;
    height: var(--mt-action-h);
    min-height: var(--mt-action-h);
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mt-space-2);
    border: 0;
    background: var(--mt-gold);
    color: #000000;
    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: #000000;
    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: 0;
    width: max-content;
    height: var(--mt-compact-h);
    min-height: var(--mt-compact-h);
    padding: 0 9px;
    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:has(input:not([readonly]):not([disabled]), textarea:not([readonly]):not([disabled])) {
    background: var(--mt-surface-3);
}
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,
body.mt-canonical-ui .m-field.is-disclosure::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,
body.mt-canonical-ui .m-field.is-disclosure::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-page-title + .m-date-rail,
body.mt-canonical-ui .m-page-title + .m-scope {
    margin-top: 28px;
}
body.mt-canonical-ui .m-date-rail,
body.mt-canonical-ui .m-time-rail {
    min-height: 28px;
    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: 0;
    height: 28px;
    padding: 0 5px;
    flex: 0 0 auto;
    border: 0;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    clip-path: var(--mt-cut-7);
}

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;
    left: 0;
    right: 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: fixed;
    z-index: var(--mt-z-modal);
    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 {
    position: relative;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-top: -12px;
    background: var(--mt-gold);
    color: #000000;
    clip-path: var(--mt-diamond);
    box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--mt-gold);
}

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: 0 0 auto;
        width: max-content;
    }
}

@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: max-content; flex: 0 0 auto; 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 {
    position: relative;
    z-index: 2;
    color: #000000;
}

body.mt-canonical-ui .m-person__open {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: transparent;
}
body.mt-canonical-ui .m-person__hit {
    position: absolute;
    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: 8px 14px 8px;
    margin: 0 0 8px;
}

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((45px - 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: 12px 0;
}
body.mt-canonical-ui .m-filter-actions .m-button {
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
}
body.mt-canonical-ui .m-filter-actions {
    margin: 12px 0;
    gap: 8px;
}

body.mt-canonical-ui .m-filter-actions :where(.m-button, a) {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    width: max-content;
    min-width: 0;
    padding: 0 26px;
    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: max-content;
    min-width: 0;
    margin-inline: auto;
}
/* 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: 4.5px;
    width: fit-content;
    max-width: 100%;
    height: 32px;
    min-height: 32px;
    margin: 0 0 12px;
    padding: 0 12px 0 18px;
    border: 0;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
    clip-path: var(--mt-back);
}

html[dir="rtl"] body.mt-canonical-ui a.m-back {
    padding: 0 18px 0 12px;
    clip-path: var(--mt-back-rtl);
}

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

body.mt-canonical-ui a.m-back > .m-ico {
    margin-inline-start: -4px;
}

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: 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: max-content;
    min-width: 0;
    margin-inline: auto;
}

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: 8px 0 24px;
    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-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: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 12px 12px 20px;
    }
}

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

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;
    color: #222;
}
body.mt-canonical-ui .m-side-nav a:not(.is-active) .m-ico {
    color: #555;
}

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: 2px;
    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: 0;
    padding: 0 5px;
}

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: 28px;
    padding: 0 13px !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: end;
    text-align-last: end;
    padding-inline-start: 12px;
    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; }

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 8px;
}
body.mt-canonical-ui .m-tile {
    min-height: 77px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 4px;
    padding: 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-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: visible;
    }
    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-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:has(> .m-field__mark) > .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}

body.mt-canonical-ui.mt-store,body.mt-canonical-ui.mt-request{--mt-public-bar-h:calc(36px + env(safe-area-inset-top, 0px) / 2);padding-top:var(--mt-public-bar-h) !important}
body.mt-canonical-ui.mt-store .m-public-bar,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:calc(env(safe-area-inset-top, 0px) / 2)}
body.mt-canonical-ui.mt-store .m-store{margin-top:16px}
body.mt-canonical-ui .m-home-mark{margin-top:0}
body.mt-canonical-ui.mt-request .m-page{padding-top:4px}

body.mt-canonical-ui.mt-store .m-home-mark,body.mt-canonical-ui.mt-store .m-home-wordmark{animation:mt-lockup-in 520ms cubic-bezier(.2,.8,.2,1) 80ms both}
.mt-slogan{display:none;align-items:center;justify-content:center;gap:8px;margin:0;color:#fff;font-family:var(--mt-font);font-size:clamp(14px,4vw,18px);line-height:1;font-weight:700;letter-spacing:.105em;white-space:nowrap}
.mt-slogan.is-placed{display:flex}
.mt-slogan__words,.mt-slogan__period,.mt-slogan__dash,.mt-slogan__diamond{opacity:0}
.mt-slogan.is-placed .mt-slogan__words{animation:mt-lockup-in 420ms cubic-bezier(.2,.8,.2,1) 650ms forwards}
.mt-slogan__dash{width:23px;height:10px;color:var(--mt-gold);flex:none;transform-origin:left center;transform:scaleX(0)}
.mt-slogan.is-placed .mt-slogan__dash{animation:mt-slogan-dash 260ms cubic-bezier(.2,.9,.3,1) 1.02s forwards}
.mt-slogan__period{display:inline-block}
.mt-slogan.is-placed .mt-slogan__period{animation:mt-slogan-period 300ms cubic-bezier(.2,.9,.3,1) 1.25s forwards}
.mt-slogan__diamond{width:11px;height:11px;color:var(--mt-gold);flex:none;transform:scale(0)}
.mt-slogan.is-placed .mt-slogan__diamond{animation:mt-slogan-diamond 440ms cubic-bezier(.2,1.5,.4,1) 1.48s forwards}
@keyframes mt-lockup-in{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes mt-slogan-dash{0%{opacity:0;transform:scaleX(0)}65%{opacity:1;transform:scaleX(1.18)}100%{opacity:1;transform:scaleX(1)}}
@keyframes mt-slogan-period{0%{opacity:0;transform:translateY(5px)}70%{opacity:1;transform:translateY(-1px)}100%{opacity:1;transform:none}}
@keyframes mt-slogan-diamond{0%{opacity:0;transform:scale(0)}65%{opacity:1;transform:scale(1.28)}100%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
body.mt-canonical-ui.mt-store .m-home-mark,body.mt-canonical-ui.mt-store .m-home-wordmark,.mt-slogan__words,.mt-slogan__period,.mt-slogan__dash,.mt-slogan__diamond{animation:none !important;opacity:1 !important;transform:none !important}
}

body.mt-canonical-ui .m-store-login .m-login-field{background:#111111;color:#f7f7f7}
body.mt-canonical-ui .m-store-login .m-login-field[name="email"]{font-size:14px}
body.mt-canonical-ui .m-store-login .m-login-field[name="email"]::placeholder{font-size:13px}

body.mt-canonical-ui.mt-store .m-home-wordmark{margin-bottom:0}
.mt-slogan__dash{width:30px;height:8px;color:var(--mt-gold);transform-origin:center center}
.mt-slogan.is-placed .mt-slogan__words{animation:mt-lockup-in 420ms cubic-bezier(.2,.8,.2,1) .52s forwards}
.mt-slogan.is-placed .mt-slogan__dash{animation:mt-slogan-dash 280ms cubic-bezier(.2,.9,.3,1) .98s forwards}
.mt-slogan.is-placed .mt-slogan__period{animation:mt-slogan-strike 320ms cubic-bezier(.2,.9,.3,1) 1.32s forwards}
.mt-slogan__diamond{width:9px;height:9px}
.mt-slogan.is-placed .mt-slogan__diamond{animation:mt-slogan-diamond 420ms cubic-bezier(.2,1.5,.4,1) 1.56s forwards}
@keyframes mt-slogan-strike{0%{opacity:0;transform:translateX(16px)}68%{opacity:1;transform:translateX(-3px)}100%{opacity:1;transform:none}}

.mt-slogan{align-items:baseline}
.mt-slogan__dash{width:24px;height:6.4px;align-self:center;overflow:visible}
.mt-slogan__diamond{display:block;width:6.4px;height:6.4px;align-self:baseline;margin-inline-start:-5px;overflow:visible;color:var(--mt-gold);transform-box:fill-box;transform-origin:50% 100%}
.mt-slogan.is-placed .mt-slogan__diamond{opacity:1;animation:mt-slogan-diamond 420ms cubic-bezier(.2,1.5,.4,1) 1.56s both}

body.mt-canonical-ui .m-login-slot{position:relative;display:block;margin:0 0 10px}
body.mt-canonical-ui .m-login-slot .m-login-field{margin:0}
body.mt-canonical-ui .m-login-slot > .m-ico{position:absolute;left:10px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--mt-gold);pointer-events:none}
body.mt-canonical-ui .m-login-slot--id .m-login-field{padding:0 12px 0 32px;font-size:14px}
body.mt-canonical-ui .m-login-slot--id .m-login-field::placeholder{font-size:13px}
body.mt-canonical-ui .m-login-slot--secret .m-login-field{padding:0 36px;font-size:14px}body.mt-canonical-ui .m-login-slot--secret .m-login-field::placeholder{font-size:13px}
body.mt-canonical-ui .m-login-eye{position:absolute;right:0;top:0;width:36px;height:44px;padding:0;border:0;background:transparent;color:var(--mt-gold);display:grid;place-items:center;cursor:pointer}
body.mt-canonical-ui .m-login-eye .m-ico{width:16px;height:16px;color:var(--mt-gold)}

.mt-slogan{--mt-slogan-bar:6.4px}
.mt-slogan__dash{width:24px;height:var(--mt-slogan-bar)}
.mt-slogan__period{display:inline-flex;align-items:flex-end;gap:4px}
.mt-slogan__diamond{display:inline-block;width:var(--mt-slogan-bar);height:var(--mt-slogan-bar);flex:none;margin:0;align-self:flex-end;overflow:visible;opacity:1;transform:none;transform-origin:center bottom;color:#c49a36}
.mt-slogan.is-placed .mt-slogan__diamond{animation:mt-slogan-diamond 420ms cubic-bezier(.2,1.5,.4,1) 1.56s both}

.mt-slogan__diamond{width:var(--mt-slogan-bar);height:var(--mt-slogan-bar);background:#c49a36;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transform:none}

body.mt-canonical-ui .m-login-slot > .m-ico{z-index:2;color:#c49a36;fill:#c49a36}
body.mt-canonical-ui .m-login-slot > .m-ico use{color:#c49a36}

.mt-slogan.is-placed .mt-slogan__words{animation-duration:280ms;animation-delay:.2s}
.mt-slogan.is-placed .mt-slogan__dash{animation-duration:180ms;animation-delay:.46s}
.mt-slogan.is-placed .mt-slogan__period{opacity:1;animation:none}
.mt-slogan__letter{opacity:0;display:inline-block}
.mt-slogan.is-placed .mt-slogan__letter{animation:mt-slogan-tick 70ms linear forwards}
.mt-slogan.is-placed .mt-slogan__letter:nth-child(1){animation-delay:.68s}
.mt-slogan.is-placed .mt-slogan__letter:nth-child(2){animation-delay:.78s}
.mt-slogan.is-placed .mt-slogan__letter:nth-child(3){animation-delay:.88s}
.mt-slogan.is-placed .mt-slogan__letter:nth-child(4){animation-delay:.98s}
.mt-slogan.is-placed .mt-slogan__letter:nth-child(5){animation-delay:1.08s}
.mt-slogan.is-placed .mt-slogan__letter:nth-child(6){animation-delay:1.18s}
.mt-slogan.is-placed .mt-slogan__diamond{animation-delay:1.3s}
@keyframes mt-slogan-tick{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
.mt-slogan__letter{opacity:1 !important;animation:none !important}
}

.mt-slogan{margin-top:calc(22px * -0.2);margin-bottom:calc(22px * 0.15);gap:calc(8px * 0.92);font-size:clamp(calc(14px * 0.92),calc(4vw * 0.92),calc(18px * 0.92));justify-content:center}
.mt-slogan__dash{width:calc(24px * 0.92 * 0.85);height:6.4px}
.mt-slogan__period{gap:calc(4px * 0.92)}
.mt-slogan__diamond{width:calc(6.4px * 0.92);height:calc(6.4px * 0.92)}

body.mt-canonical-ui .m-store__title{margin:0;color:#fff;font-size:19px;line-height:1.3;font-weight:750}
body.mt-canonical-ui .m-store__para{display:grid;justify-items:center;gap:8px;margin:0}
body.mt-canonical-ui .m-store__diamond{width:7px;height:7px;background:var(--mt-gold);clip-path:var(--mt-diamond)}
body.mt-canonical-ui .m-store__close{margin:0}

body.mt-canonical-ui .m-store__panel{gap:8px}
body.mt-canonical-ui .m-store__para,body.mt-canonical-ui .m-store__close{display:block;margin:0;text-align:start}
body.mt-canonical-ui .m-store__para{padding-inline-start:18px;text-indent:-14px}
body.mt-canonical-ui .m-store__diamond{display:inline-block;width:6px;height:6px;margin:0;margin-inline-end:8px;vertical-align:.12em;background:var(--mt-gold);clip-path:var(--mt-diamond)}

body.mt-canonical-ui .m-store__panel p{font-size:calc(17px * 0.9)}
body.mt-canonical-ui .m-store__title{font-size:calc(19px * 0.9)}
body.mt-canonical-ui .m-store__diamond{width:6px;height:6px}

.mt-slogan,.mt-slogan__words,.mt-slogan__period,.mt-slogan__letter{direction:ltr;unicode-bidi:isolate}
.mt-slogan{flex-direction:row}
body.mt-canonical-ui .m-store__panel p{font-size:15px}
body.mt-canonical-ui .m-store__title{font-size:17px}
body.mt-canonical-ui .m-store__diamond{width:6px;height:6px}

html[dir=rtl] body.mt-canonical-ui .m-store__panel{direction:rtl}
html[dir=ltr] body.mt-canonical-ui .m-store__panel{direction:ltr}
body.mt-canonical-ui .m-store__title{text-align:center}
body.mt-canonical-ui .m-store__para{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:8px;align-items:start;padding:0;text-indent:0;text-align:start}
body.mt-canonical-ui .m-store__copy,body.mt-canonical-ui .m-store__close{text-align:start;text-indent:0;padding:0}
body.mt-canonical-ui .m-store__diamond{width:6px;height:6px;margin:0.35em 0 0;justify-self:center}
body.mt-canonical-ui.mt-store .m-home-mark,body.mt-canonical-ui.mt-store .m-home-wordmark,.mt-slogan{direction:ltr}
body.mt-canonical-ui .m-phone,body.mt-canonical-ui .m-phone__code{direction:ltr;unicode-bidi:isolate}

body.mt-canonical-ui .m-dev-field > .m-field > .m-field__label,body.mt-canonical-ui .m-filters .m-field > .m-field__label,body.mt-canonical-ui .m-history .m-field > .m-field__label{flex:0 1 auto;min-width:0;max-width:100%;padding-inline:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.mt-canonical-ui .m-filters .m-field > select{position:relative;inset:auto;flex:1 1 auto;width:auto;min-width:3.2em;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:end;text-align-last:end}

body.mt-canonical-ui .m-header{position:fixed;top:0;left:0;right:0;z-index:90;align-self:start;order:-1;grid-column:1 / -1;grid-row:1;height:auto;}
body.mt-canonical-ui .m-side-nav{grid-column:1;grid-row:2}
body.mt-canonical-ui .m-page{grid-row:2}
@media (max-width:767px) and (orientation:portrait){
  #mt-shell{display:block}
  body.mt-canonical-ui .m-header{position:fixed;top:0;left:0;right:0}
}

body.mt-canonical-ui .m-bottom-nav__primary{width:52px;height:52px;aspect-ratio:1;margin-top:-10px;margin-bottom:0;display:grid;place-items:center;background:var(--mt-gold);color:#000;clip-path:var(--mt-diamond)}
body.mt-canonical-ui .m-bottom-nav__primary .m-ico{width:26px;height:26px;color:#000}

#scan-reader{width:100%;aspect-ratio:1/1;height:auto;min-height:0;overflow:hidden;position:relative;background:#000}
body.mt-canonical-ui .m-scan-video{display:block;width:100%;min-height:320px;aspect-ratio:3/4;background:#111;object-fit:cover;}

body.mt-canonical-ui .m-account-menu .m-dev-field > .m-field > .m-field__label{flex:0 0 auto;min-width:max-content;max-width:none;padding-inline:0;overflow:visible;text-overflow:clip;white-space:nowrap}
body.mt-canonical-ui .m-account-menu .m-dev-field > .m-field > button.m-select{position:relative;inset:auto;flex:1 1 auto;width:auto;min-width:0;height:36px;margin:0;padding:0 18px 0 8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:end;text-align-last:end}
body.mt-canonical-ui .m-account-menu .m-dev-field > .m-menu{inset-inline:0;width:100%;min-width:0;max-width:none}

body.mt-canonical-ui .m-dev-field > .m-field.is-next::after{transform:translateY(-50%) rotate(-45deg)}

body.mt-canonical-ui .m-names{display:grid;gap:12px;width:100%}
body.mt-canonical-ui .m-names__bar{position:relative;display:block;width:100%}
body.mt-canonical-ui .m-names__bar>.m-field{width:100%;padding-inline-end:44px}
body.mt-canonical-ui .m-names__bar>.m-field .m-input{padding-inline-end:4px}
body.mt-canonical-ui .m-names__toggle{position:absolute;z-index:3;top:0;bottom:0;inset-inline-end:10px;width:28px;border:0;background:transparent;display:grid;place-items:center}
body.mt-canonical-ui .m-names__toggle::after{content:"";display:block;width:7px;height:7px;border-inline-end:1.6px solid var(--mt-gold);border-bottom:1.6px solid var(--mt-gold);transform:translateY(-2px) rotate(45deg)}
body.mt-canonical-ui .m-names__toggle.is-open::after{transform:translateY(2px) rotate(-135deg)}
body.mt-canonical-ui .m-page{padding-bottom:calc(var(--mt-bottom-nav-h) + 84px + env(safe-area-inset-bottom))}

body.mt-canonical-ui .m-actions{display:flex;flex-direction:row;flex-wrap:wrap;direction:ltr;justify-content:center;align-items:center;gap:12px;width:100%}
body.mt-canonical-ui .m-actions>form{display:flex;width:auto;margin:0}
body.mt-canonical-ui :where(#mt-module,.m-page) .m-actions .m-button{width:max-content;max-width:100%;margin:0}
body.mt-canonical-ui .m-actions .m-button--secondary,body.mt-canonical-ui .m-filter-actions .m-button--secondary{order:1}
body.mt-canonical-ui .m-actions .m-button:not(.m-button--secondary),body.mt-canonical-ui .m-filter-actions .m-button:not(.m-button--secondary){order:2}
body.mt-canonical-ui .m-filter-actions{direction:ltr}

body.mt-canonical-ui .m-hero > .m-names__toggle{position:absolute;top:auto;bottom:8px;height:22px;inset-inline-end:14px;width:28px}

body.mt-canonical-ui .m-hero h1{font-size:var(--mt-text-md);font-weight:750;line-height:1.25}

body.mt-canonical-ui .m-pack-lines{display:grid;gap:8px}
body.mt-canonical-ui .m-pack-line{display:grid;grid-template-columns:36px minmax(0,1fr) max-content;direction:ltr;column-gap:8px;align-items:start;min-height:48px;padding:6px 10px;background:var(--mt-surface);color:inherit;text-decoration:none;clip-path:var(--mt-cut-7)}
body.mt-canonical-ui .m-pack-line img,body.mt-canonical-ui .m-pack-mark{width:36px;height:36px;object-fit:cover;clip-path:var(--mt-cut-7)}
body.mt-canonical-ui .m-pack-mark{display:grid;place-items:center;background:var(--mt-surface-2);font-size:11px;font-weight:750}
body.mt-canonical-ui .m-pack-line__name{display:flex;align-items:center;min-height:36px}
body.mt-canonical-ui .m-pack-line strong{display:block;overflow:hidden;font-size:13px;font-weight:750;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
body.mt-canonical-ui .m-pack-line small{display:block;margin-top:2px;color:var(--mt-text-secondary);font-size:11px;font-weight:650}
body.mt-canonical-ui .m-pack-total{margin-top:8px}
body.mt-canonical-ui .m-pack-total>summary{display:grid;grid-template-columns:minmax(0,1fr) 16px;align-items:center;gap:8px;padding:8px 12px;background:var(--mt-surface);cursor:pointer;list-style:none;clip-path:var(--mt-cut-7)}
body.mt-canonical-ui .m-pack-total>summary::-webkit-details-marker{display:none}
body.mt-canonical-ui .m-pack-total>summary::after{content:"";width:7px;height:7px;justify-self:end;border-inline-end:1.6px solid var(--mt-gold);border-bottom:1.6px solid var(--mt-gold);transform:rotate(45deg)}
body.mt-canonical-ui .m-pack-total[open]>summary::after{transform:rotate(-135deg)}
body.mt-canonical-ui .m-pack-boxes{display:grid;gap:8px;padding-top:8px}
body.mt-canonical-ui .m-pack-box{position:relative;padding:8px 12px;background:var(--mt-surface);clip-path:var(--mt-cut-7)}
body.mt-canonical-ui .m-pack-box__open{display:grid;gap:6px;color:inherit;text-decoration:none}
body.mt-canonical-ui .m-pack-box__id{display:block;padding-inline-end:18px;font-size:13px;font-weight:750}
body.mt-canonical-ui .m-pack-box__brief,body.mt-canonical-ui .m-pack-box__more ul{display:grid;gap:2px}
body.mt-canonical-ui .m-pack-box__brief span,body.mt-canonical-ui .m-pack-box__more a{display:block;overflow:hidden;color:var(--mt-text-secondary);font-size:11px;font-weight:650;line-height:1.25;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
body.mt-canonical-ui .m-pack-box__more>summary{position:absolute;top:8px;right:10px;z-index:1;width:18px;height:18px;padding:0;background:transparent;cursor:pointer;list-style:none}
body.mt-canonical-ui .m-pack-box__more>summary::-webkit-details-marker{display:none}
body.mt-canonical-ui .m-pack-box__more>summary::after{content:"";position:absolute;top:4px;right:4px;width:7px;height:7px;border-inline-end:1.6px solid var(--mt-gold);border-bottom:1.6px solid var(--mt-gold);transform:rotate(45deg)}
body.mt-canonical-ui .m-pack-box__more[open]>summary::after{transform:rotate(-135deg)}
body.mt-canonical-ui .m-pack-box__more ul{margin:2px 0 0;padding:0;list-style:none}

body.mt-canonical-ui .m-pack-line__name,body.mt-canonical-ui .m-pack-line__name strong,body.mt-canonical-ui .m-pack-line small a,body.mt-canonical-ui .m-pack-split a{color:inherit;text-decoration:none}
body.mt-canonical-ui .m-pack-line__meta{justify-self:end;align-self:start;min-height:36px;text-align:right}
body.mt-canonical-ui .m-pack-line__meta>small,body.mt-canonical-ui .m-pack-split>summary{display:flex;align-items:center;min-height:36px}
body.mt-canonical-ui .m-pack-line__meta small{margin-top:0;white-space:nowrap}
body.mt-canonical-ui .m-pack-split{margin-top:0}
body.mt-canonical-ui .m-pack-split>summary{display:flex;align-items:center;justify-content:flex-end;gap:8px;width:max-content;max-width:100%;margin-left:auto;cursor:pointer;list-style:none}
body.mt-canonical-ui .m-pack-split>summary::-webkit-details-marker{display:none}
body.mt-canonical-ui .m-pack-split>summary::after{content:"";width:7px;height:7px;flex:0 0 auto;border-inline-end:1.6px solid var(--mt-gold);border-bottom:1.6px solid var(--mt-gold);transform:rotate(45deg)}
body.mt-canonical-ui .m-pack-split[open]>summary::after{transform:rotate(-135deg)}
body.mt-canonical-ui .m-pack-split ul{display:grid;justify-items:end;gap:4px;margin:6px 0 0;padding:0;list-style:none;text-align:right}
body.mt-canonical-ui .m-pack-split li{color:var(--mt-text-secondary);font-size:12px}

body.mt-canonical-ui .m-person__lead{margin-right:auto;color:var(--mt-text-secondary);font-size:12px;font-weight:650;line-height:1.2}
body.mt-canonical-ui .m-person__meta--stack{grid-column:1 / -1}

body.mt-canonical-ui .m-pack-line>.m-pack-mark,body.mt-canonical-ui .m-pack-line>img,body.mt-canonical-ui .m-pack-line__name,body.mt-canonical-ui .m-pack-line__meta{align-self:start}
body.mt-canonical-ui .m-pack-line:has(.m-pack-split[open]) .m-pack-line__name{align-items:flex-start}
body.mt-canonical-ui .m-pack-line:has(.m-pack-split[open]) strong{overflow:visible;text-overflow:unset;white-space:normal}
body.mt-canonical-ui .m-pack-box:has(.m-pack-box__more[open]) .m-pack-box__brief span,body.mt-canonical-ui .m-pack-box:has(.m-pack-box__more[open]) .m-pack-box__more a{overflow:visible;text-overflow:unset;white-space:normal}


body.mt-canonical-ui .m-filters .m-field > .m-field__label {
    flex: 0 0 auto;
    min-width: max-content;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}
body.mt-canonical-ui .m-filters .m-field > select {
    flex: 1 1 0;
    width: 0;
    min-width: 2.2em;
}


body.mt-canonical-ui .m-filters .m-dev-field > .m-field > .m-field__label {
    flex: 0 0 auto;
    min-width: max-content;
    max-width: calc(100% - 72px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.mt-canonical-ui .m-filters .m-dev-field > .m-field > button.m-select {
    flex: 1 1 0;
    width: 0;
    min-width: 2.4em;
    overflow: hidden;
    text-overflow: ellipsis;
}


body.mt-canonical-ui .m-ledger { display: grid; gap: 8px; }
body.mt-canonical-ui .m-ledger__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 44px; padding: 8px 12px; background: var(--mt-surface-2); clip-path: var(--mt-cut-7); }
body.mt-canonical-ui .m-ledger__row strong { display: grid; justify-items: end; color: var(--mt-gold); }
body.mt-canonical-ui .m-ledger__row small { color: var(--mt-text-secondary); font-weight: 650; }
body.mt-canonical-ui .m-compare { display: grid; gap: 6px; margin-top: 8px; }
body.mt-canonical-ui .m-compare__row { display: flex; gap: 8px; align-items: start; }
body.mt-canonical-ui .m-compare__row > span { flex: 0 0 76px; color: var(--mt-text-secondary); }
body.mt-canonical-ui .m-compare__row > b { flex: 1 1 0; min-width: 0; font-weight: 650; overflow-wrap: anywhere; }
body.mt-canonical-ui .m-compare__row > b.is-same { color: var(--mt-gold); }

body.mt-canonical-ui .m-person > .m-compare,
body.mt-canonical-ui .m-person > .m-filter-actions {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}
body.mt-canonical-ui .m-person > .m-compare { grid-row: 4; }
body.mt-canonical-ui .m-person > .m-filter-actions { grid-row: 5; }
body.mt-canonical-ui .m-compare {
    container-type: inline-size;
    overflow-x: auto;
    max-width: 100%;
}
body.mt-canonical-ui .m-compare__row {
    display: grid;
    width: max-content;
    min-width: 100%;
    grid-template-columns: 88px repeat(var(--sides, 1), calc((100cqi - 88px) / 2.5));
    gap: 2px 8px;
    align-items: start;
}
body.mt-canonical-ui .m-compare[data-fit="1"] .m-compare__row {
    width: 100%;
    grid-template-columns: 88px repeat(var(--sides, 1), minmax(0, 1fr));
}
body.mt-canonical-ui .m-compare__row > span {
    grid-row: auto;
    grid-column: 1;
    flex: none;
    min-width: 0;
    line-height: 1.2;
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--mt-surface);
}
body.mt-canonical-ui .m-compare__row > b {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}
body.mt-canonical-ui .m-compare__row[data-field="Name"] > b,
body.mt-canonical-ui .m-compare__row[data-field="Name"] a {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 650;
}
body.mt-canonical-ui .m-compare__head > b {
    color: var(--mt-gold);
}
body.mt-canonical-ui .m-compare__row.is-same > b.is-same {
    color: var(--mt-gold);
    background: color-mix(in srgb, var(--mt-gold) 16%, transparent);
}

body.mt-canonical-ui .m-watch{position:fixed;left:16px;right:16px;bottom:92px;z-index:80;display:grid;gap:12px;padding:16px;background:#111;color:#fff;border:1px solid var(--mt-gold)}
body.mt-canonical-ui .m-watch p{margin:0}
body.mt-canonical-ui .m-watch .m-filter-actions{display:flex;gap:8px}

body.mt-canonical-ui .m-nav-group{display:flex;align-items:center;gap:8px;padding:16px 8px 4px;color:var(--mt-gold);font-size:12px;letter-spacing:.04em;text-transform:uppercase}

body.mt-canonical-ui .m-account-menu a.m-account-summary{display:flex;align-items:center;gap:8px;grid-template-columns:none;color:inherit;text-decoration:none}
body.mt-canonical-ui .m-account-menu a.m-account-summary .m-ico{color:var(--mt-gold)}
body.mt-canonical-ui .m-account-menu .m-clock{justify-content:space-between;width:100%}
body.mt-canonical-ui .m-clock__time,body.mt-canonical-ui .m-clock__action{display:inline-flex;align-items:center;gap:8px}

body.mt-canonical-ui .m-person-tabs{position:sticky;top:var(--mt-header-h);z-index:30;background:var(--mt-bg);padding:8px 0}

/* 20261016n scope ends flush, type icons, product face */
body.mt-canonical-ui .m-scope__scroll {
    flex: 0 1 auto !important;
    width: max-content !important;
    max-width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    background: transparent !important;
    clip-path: none !important;
}
body.mt-canonical-ui :is(a, button).m-scope__chip {
    background: var(--mt-surface-2);
    clip-path: none;
}
body.mt-canonical-ui :is(a, button).m-scope__chip.is-active {
    background: var(--mt-gold) !important;
    color: #000000 !important;
    clip-path: none;
}
body.mt-canonical-ui :is(a, button).m-scope__chip:first-child {
    clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 calc(100% - 7px), 0 7px) !important;
}
body.mt-canonical-ui :is(a, button).m-scope__chip:last-child {
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%) !important;
}
body.mt-canonical-ui :is(a, button).m-scope__chip:first-child:last-child {
    clip-path: var(--mt-cut-7) !important;
}
body.mt-canonical-ui .m-scope__chip .m-ico {
    width: 16px;
    height: 16px;
    flex: none;
}
body.mt-canonical-ui .m-scope__chip.is-active .m-ico {
    color: #000000 !important;
}
body.mt-canonical-ui .m-person__id {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    align-self: center;
}
body.mt-canonical-ui .m-person__id > .m-person__name {
    grid-column: auto;
    grid-row: auto;
    padding-top: 0;
}
body.mt-canonical-ui .m-person__kicker {
    display: block;
    color: var(--mt-gold);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.03em;
    line-height: 1.2;
}
body.mt-canonical-ui .m-person__suffix {
    color: var(--mt-text-secondary);
    font-weight: 650;
}
body.mt-canonical-ui .m-person__avatar .m-ico,
body.mt-canonical-ui .m-hero .m-person__avatar .m-ico {
    width: 22px;
    height: 22px;
    color: var(--mt-gold);
}
body.mt-canonical-ui .m-person__name .m-ico {
    width: 16px;
    height: 16px;
    margin-inline-end: 6px;
    vertical-align: -3px;
    color: var(--mt-gold);
}
body.mt-canonical-ui .m-hero h1:has(.m-person__kicker) {
    padding-top: 0 !important;
}
body.mt-canonical-ui .m-hero h1 .m-person__kicker {
    margin-bottom: 1px;
}

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

body.mt-canonical-ui .m-page-title .m-person__kicker { display: block; margin-bottom: 2px; }
body.mt-canonical-ui .m-page-title .m-person__suffix { font-size: 0.72em; }

body.mt-canonical-ui a.m-clear {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    min-height: 36px;
    margin: 0 0 12px;
    padding: 0 10px 0 12px;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 750;
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
}
body.mt-canonical-ui a.m-clear > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.mt-canonical-ui a.m-clear .m-ico {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--mt-gold);
}
body.mt-canonical-ui button.m-fab {
    display: grid !important;
    border: 0;
    background: var(--mt-gold);
    color: #000000;
    cursor: pointer;
}
body.mt-canonical-ui .m-add-menu {
    position: fixed;
    z-index: 85;
    right: 16px;
    left: auto;
    bottom: calc(var(--mt-browser-bottom) + var(--mt-bottom-nav-h) + env(safe-area-inset-bottom) + 78px);
    display: grid;
    gap: 6px;
    width: min(280px, calc(100vw - 32px));
    max-height: min(60vh, 420px);
    overflow: auto;
    padding: 8px;
    background: #111111;
    color: var(--mt-text);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    box-shadow: var(--mt-float-shadow);
}
@media (min-width: 768px), (orientation: landscape) {
    body.mt-canonical-ui .m-add-menu {
        bottom: calc(16px + var(--mt-browser-bottom) + env(safe-area-inset-bottom) + 62px);
    }
}
body.mt-canonical-ui .m-add-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 750;
    clip-path: polygon(10px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 10px 100%, 0 50%);
}
body.mt-canonical-ui .m-add-menu .m-ico {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--mt-gold) !important;
}

body.mt-canonical-ui .m-pack{grid-template-columns:minmax(0,1fr);cursor:pointer}
body.mt-canonical-ui .m-pack>.m-person__statuses{display:flex;justify-content:flex-end;align-items:center;gap:4px}
body.mt-canonical-ui .m-pack__stamp{display:inline-flex;align-items:center;gap:4px;min-width:0;color:var(--mt-text-secondary);font-size:11px;font-weight:650;line-height:1.2}
body.mt-canonical-ui .m-pack__stamp .m-ico{width:12px;height:12px;color:var(--mt-gold);flex:none}
body.mt-canonical-ui .m-pack__stamp b{color:var(--mt-text);font-weight:750;flex:none}
body.mt-canonical-ui .m-pack__stamp span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.mt-canonical-ui .m-pack .m-status{flex:none}
body.mt-canonical-ui .m-pack__body{grid-column:1 / -1;display:grid;gap:2px;min-width:0}
body.mt-canonical-ui .m-pack__title{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0}
body.mt-canonical-ui .m-pack__title .m-ico{width:16px;height:16px;color:var(--mt-gold);flex:none;margin-top:2px}
body.mt-canonical-ui .m-pack__name{color:var(--mt-gold);font-weight:750;line-height:1.25}
body.mt-canonical-ui .m-pack__facts{color:var(--mt-text-secondary);font-size:var(--mt-text-sm);line-height:1.35}
body.mt-canonical-ui .m-pack__rest{grid-column:1 / -1;display:grid;gap:8px;min-width:0;padding-top:6px}
body.mt-canonical-ui .m-pack__line{display:grid;gap:1px;min-width:0}
body.mt-canonical-ui .m-pack__line strong{font-weight:750}
body.mt-canonical-ui .m-pack__line span{color:var(--mt-text-secondary);font-size:var(--mt-text-sm)}
body.mt-canonical-ui .m-pack .m-drill{position:relative;z-index:1}

body.mt-canonical-ui :is(a, button).m-scope__chip.is-active,
body.mt-canonical-ui :is(a, button).m-scope__chip.is-active:first-child,
body.mt-canonical-ui :is(a, button).m-scope__chip.is-active:last-child,
body.mt-canonical-ui :is(a, button).m-scope__chip:first-child.is-active,
body.mt-canonical-ui :is(a, button).m-scope__chip:last-child.is-active {
    clip-path: var(--mt-cut-7) !important;
}
body.mt-canonical-ui .m-person__id {
    position: relative;
    display: block;
    align-self: start;
    min-height: 45px;
    padding-top: calc((45px - 1lh) / 2);
}
body.mt-canonical-ui .m-person__id > .m-person__kicker {
    position: absolute;
    inset-inline-start: 0;
    top: calc((45px - 1lh) / 2);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.1;
    transform: translateY(calc(-100% - 1px));
}
body.mt-canonical-ui .m-person__id > .m-person__name { padding-top: 0; }
body.mt-canonical-ui .m-person__lead {
    margin-right: 0;
    margin-inline-end: auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 650;
}
body.mt-canonical-ui .m-pack { grid-template-columns: 45px minmax(0, 1fr); }
body.mt-canonical-ui .m-pack__chevron {
    position: absolute;
    inset-inline-end: 0;
    top: calc((45px - 16px) / 2);
    display: grid;
    color: var(--mt-gold);
}
body.mt-canonical-ui .m-pack__chevron .m-ico { width: 16px; height: 16px; }
body.mt-canonical-ui .m-pack .m-person__name { padding-inline-end: 22px; }

body.mt-canonical-ui .m-scan-stage{position:relative}
body.mt-canonical-ui .m-scan-torch{position:absolute;z-index:6;top:12px;right:12px;width:44px;height:44px;display:grid;place-items:center;background:rgba(0,0,0,.62);color:var(--mt-gold);clip-path:var(--mt-cut-7)}
body.mt-canonical-ui .m-scan-torch.is-on{background:var(--mt-gold);color:#000}
body.mt-canonical-ui .m-scan-torch .m-ico{width:20px;height:20px}
body.mt-canonical-ui .m-header__search .m-field{grid-template-columns:22px minmax(0,1fr) 28px}
body.mt-canonical-ui .m-header__search .m-field>.m-input{padding-inline-end:40px}
body.mt-canonical-ui .m-search-scan{grid-column:3;grid-row:1;z-index:2;display:grid;place-items:center;width:28px;height:28px;color:var(--mt-gold)}
body.mt-canonical-ui .m-search-scan .m-ico{width:18px;height:18px}

body.mt-canonical-ui .m-pack__name { color: var(--mt-text) !important; }
body.mt-canonical-ui form.m-list { display: grid; gap: 8px; }
body.mt-canonical-ui .m-filters { margin-bottom: 12px; }
body.mt-canonical-ui .m-page-title { display: flex; align-items: center; gap: 8px; }
body.mt-canonical-ui .m-page-title .m-ico,
body.mt-canonical-ui .m-page-title__icon { width: 22px; height: 22px; flex: none; color: var(--mt-gold); }
body.mt-canonical-ui .m-person__avatar.is-mark img { object-fit: contain; width: 100%; height: 100%; padding: 5px; }

body.mt-canonical-ui .m-person.is-picked { outline: none; }

body.mt-canonical-ui .m-person__under {display:block;margin-top:2px;color:#bdbdbd;font-size:13px;font-weight:500;line-height:1.25;}

body.mt-canonical-ui .is-bulk-hit > .m-person { background: color-mix(in srgb, var(--mt-gold) 22%, var(--mt-surface-2)) !important; }
body.mt-canonical-ui a.is-disabled { pointer-events: none; opacity: 0.45; }

body.mt-canonical-ui .m-person__avatar,
body.mt-canonical-ui .m-person__id,
body.mt-canonical-ui .m-person__name,
body.mt-canonical-ui .m-person__meta,
body.mt-canonical-ui .m-person__under,
body.mt-canonical-ui .m-person__statuses,
body.mt-canonical-ui .m-person__lead,
body.mt-canonical-ui .m-person__kicker,
body.mt-canonical-ui .m-person__suffix {
    pointer-events: none;
}
body.mt-canonical-ui .m-person__statuses a,
body.mt-canonical-ui .m-person button,
body.mt-canonical-ui .m-person summary,
body.mt-canonical-ui .m-person input,
body.mt-canonical-ui .m-person select,
body.mt-canonical-ui .m-person textarea,
body.mt-canonical-ui .m-person .m-pack__chevron {
    pointer-events: auto;
    position: relative;
    z-index: 4;
}
body.mt-canonical-ui .is-received {
    outline: none;
    box-shadow: inset 0 -2px 0 var(--mt-gold);
}
body.mt-canonical-ui.is-loading::before {
    content: "";
    position: fixed;
    z-index: 80;
    top: 0;
    left: 0;
    width: 36%;
    height: 3px;
    background: var(--mt-gold);
    animation: mt-load 0.7s ease-in-out infinite;
}
@keyframes mt-load {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

body.mt-canonical-ui .m-balance {
    font-weight: 750;
    font-style: normal;
}
body.mt-canonical-ui .m-person > .m-balance {
    position: static;
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    z-index: 4;
    max-width: 100%;
    margin: 1px 0 0;
    font-size: 15px;
    line-height: 1.2;
    pointer-events: none;
}
body.mt-canonical-ui .m-balance.is-owed { color: #3dbe7a; }
body.mt-canonical-ui .m-balance.is-due { color: #e15b5b; }
body.mt-canonical-ui .m-balance.is-even { color: var(--mt-gold); }
body.mt-canonical-ui .m-ledger__row .m-balance { display: block; margin-top: 2px; font-size: 12px; }

body.mt-canonical-ui .m-person__statuses,
body.mt-canonical-ui .m-person__statuses--counts {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}
body.mt-canonical-ui .m-person__statuses .m-counts {
    flex: 1 1 auto;
    min-width: 0;
}
body.mt-canonical-ui .m-person__statuses .m-status,
body.mt-canonical-ui .m-person__statuses a.m-status {
    flex: 0 0 auto;
    margin-left: 0;
    margin-right: 0;
}
body.mt-canonical-ui .m-person__statuses > .m-status:first-of-type,
body.mt-canonical-ui .m-person__statuses > a.m-status:first-of-type {
    margin-inline-start: auto;
}
body.mt-canonical-ui .m-logo-mark {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #111;
    font-size: 11px;
    font-weight: 750;
}
body.mt-canonical-ui .m-logo-mark img {
    width: 78%;
    height: 78%;
    object-fit: contain;
}
body.mt-canonical-ui .m-logo-mark__ink {
    width: 72%;
    height: 72%;
    background: var(--brand-ink);
    -webkit-mask: var(--brand-image) center / contain no-repeat;
    mask: var(--brand-image) center / contain no-repeat;
}
body.mt-canonical-ui .m-menu .m-logo-mark,
body.mt-canonical-ui .m-side-nav .m-logo-mark {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) 100%, 3px 100%, 0 calc(100% - 3px), 0 3px);
}
body.mt-canonical-ui .m-side-nav .m-brand-mark {
    width: 18px;
    height: 18px;
    color: var(--mt-text-secondary);
}
body.mt-canonical-ui a.m-nav-group {
    clip-path: none;
    min-height: 0;
    padding: 16px 8px 4px;
    color: var(--mt-gold);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
}
body.mt-canonical-ui .m-nav-line {
    display: flex;
    align-items: center;
}
body.mt-canonical-ui .m-nav-line > a {
    flex: 1 1 auto;
    min-width: 0;
}
body.mt-canonical-ui .m-side-nav button.m-nav-row,
body.mt-canonical-ui .m-nav-chevron {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
}
body.mt-canonical-ui .m-side-nav button.m-nav-row {
    width: 100%;
    min-height: 36px;
    padding: 0 10px 0 28px;
}
body.mt-canonical-ui .m-nav-chevron {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    justify-content: center;
    padding: 0;
}
body.mt-canonical-ui .m-nav-chevron .m-ico {
    width: 16px;
    height: 16px;
}

body.mt-canonical-ui label.m-choice{cursor:pointer}
body.mt-canonical-ui label.m-choice .m-native-choice{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}

body.mt-canonical-ui .m-hero h1 {
    position: relative;
    display: block;
    align-self: center;
    margin: 0;
    padding-top: 0;
}
body.mt-canonical-ui .m-hero h1 .m-person__kicker {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: calc(100% + 1px);
    display: block;
    margin: 0;
    color: var(--mt-text-secondary);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    body.mt-canonical-ui .m-side-nav.is-open {
        top: calc(var(--mt-header-h) + 8px);
        bottom: calc(var(--mt-browser-bottom) + var(--mt-bottom-nav-h) + env(safe-area-inset-bottom) + 8px);
        max-height: none;
        height: auto;
        overflow-x: hidden;
        overflow-y: auto;
        justify-content: flex-start;
        padding-top: 8px;
    }
}

body.mt-canonical-ui .m-nav-line > button.m-nav-row {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    padding-inline-end: 0;
}
body.mt-canonical-ui .m-nav-line > .m-nav-chevron {
    margin-inline-start: auto;
}

body.mt-canonical-ui .m-side-nav a.m-nav-group.is-active {
    clip-path: var(--mt-cut-7);
    min-height: 36px;
    margin-block: 4px;
    padding: 0 10px;
    background: var(--mt-gold);
    color: #000000;
    font-size: inherit;
    letter-spacing: 0;
}
body.mt-canonical-ui .m-side-nav a.m-nav-group.is-active .m-ico,
body.mt-canonical-ui .m-side-nav a.m-nav-group.is-active .m-brand-mark {
    color: #000000;
}

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

body.mt-canonical-ui .m-side-nav .m-nav-group,
body.mt-canonical-ui .m-side-nav a.m-nav-group {
    min-height: 36px;
    margin: 0;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mt-gold);
}
body.mt-canonical-ui .m-side-nav .m-ico,
body.mt-canonical-ui .m-side-nav .m-brand-mark {
    color: var(--mt-text-secondary);
}
body.mt-canonical-ui .m-side-nav a.is-active .m-ico,
body.mt-canonical-ui .m-side-nav a.is-active .m-brand-mark {
    color: #000000;
}
body.mt-canonical-ui .m-side-nav a.m-nav-group.is-active {
    margin-block: 0;
}
@media (max-width: 767px) {
    body.mt-canonical-ui:has(.m-side-nav.is-open) {
        overflow: visible;
    }
    body.mt-canonical-ui .m-side-nav.is-open {
        overscroll-behavior: contain;
    }
}

/* Scope rail stays full width. The selected chip travels on it. */
body.mt-canonical-ui .m-scope {
    width: 100%;
}
body.mt-canonical-ui .m-scope__scroll {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    background: var(--mt-surface-2) !important;
    clip-path: var(--mt-cut-7) !important;
}
body.mt-canonical-ui :is(a, button).m-scope__chip,
body.mt-canonical-ui :is(a, button).m-scope__chip:first-child,
body.mt-canonical-ui :is(a, button).m-scope__chip:last-child,
body.mt-canonical-ui :is(a, button).m-scope__chip:first-child:last-child {
    background: transparent !important;
    clip-path: none !important;
}
body.mt-canonical-ui :is(a, button).m-scope__chip.is-active,
body.mt-canonical-ui :is(a, button).m-scope__chip.is-active:first-child,
body.mt-canonical-ui :is(a, button).m-scope__chip.is-active:last-child,
body.mt-canonical-ui :is(a, button).m-scope__chip:first-child.is-active,
body.mt-canonical-ui :is(a, button).m-scope__chip:last-child.is-active {
    background: var(--mt-gold) !important;
    color: #000000 !important;
    clip-path: var(--mt-cut-7) !important;
}

/* Product face: article above the name. Size and brand continue the name. */
body.mt-canonical-ui h1.m-page-title { position: relative; padding-top: 0; }

body.mt-canonical-ui .m-hero h1,
body.mt-canonical-ui .m-person__id {
    position: relative;
    display: flex !important;
    align-items: center;
    min-width: 0;
    min-height: 45px;
    padding-top: 0 !important;
    overflow: visible;
    overflow-wrap: normal;
}
body.mt-canonical-ui .m-hero h1 .m-person__kicker,
body.mt-canonical-ui .m-person__id > .m-person__kicker,
body.mt-canonical-ui .m-page-title .m-person__kicker {
    position: absolute !important;
    inset-inline: 0 !important;
    top: auto !important;
    bottom: calc(50% + 0.72em) !important;
    display: block !important;
    width: auto;
    max-width: 100%;
    margin: 0 !important;
    transform: none !important;
    color: var(--mt-text-secondary);
    font-size: 11px !important;
    font-weight: 650;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.mt-canonical-ui .m-face-line {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
}
body.mt-canonical-ui .m-face-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.mt-canonical-ui .m-face-part { flex: none; }
body.mt-canonical-ui .m-diamond {
    flex: none;
    width: 5px;
    height: 5px;
    margin: 0 6px;
    background: var(--mt-gold);
    transform: rotate(45deg);
}
body.mt-canonical-ui .m-person__name { padding-top: 0 !important; }
body.mt-canonical-ui :is(.m-list, form.m-list, .m-filters) + :is(.m-list, form.m-list, .m-filters, .m-section) {
    margin-top: 8px;
}

body.mt-canonical-ui .m-filters > .m-presets { grid-column: 1 / -1; min-width: 0; }
body.mt-canonical-ui .m-presets__scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    min-width: 0;
    scrollbar-width: none;
}
body.mt-canonical-ui .m-presets__scroll::-webkit-scrollbar { display: none; }
body.mt-canonical-ui .m-presets__chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    clip-path: var(--mt-cut-7);
}
body.mt-canonical-ui .m-presets__chip.is-active {
    background: var(--mt-gold);
    color: #000000;
}

body.mt-canonical-ui .m-presets,
body.mt-canonical-ui .m-presets__scroll { width: 100%; max-width: 100%; }
body.mt-canonical-ui .m-presets__chip.is-active {
    background: #c49a36 !important;
    color: #000000 !important;
}

body.mt-canonical-ui .m-presets { display: block; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }
body.mt-canonical-ui .m-presets__scroll {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
}
body.mt-canonical-ui .m-presets__chip.is-active { background: #c49a36 !important; color: #000000 !important; }
body.mt-canonical-ui .m-stat {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 72px;
    padding: 8px 10px;
    color: inherit;
    text-decoration: none;
}
body.mt-canonical-ui .m-stat__art {
    width: 52px;
    height: 52px;
    object-fit: contain;
    background: #ffffff;
    display: grid;
    place-items: center;
    clip-path: var(--mt-cut-7);
}
body.mt-canonical-ui .m-stat__art .m-ico { width: 28px; height: 28px; }
body.mt-canonical-ui .m-stat__name { font-size: 15px; line-height: 1.2; }
body.mt-canonical-ui .m-stat__tiles { display: flex; gap: 6px; align-items: stretch; }
body.mt-canonical-ui .m-stat__money,
body.mt-canonical-ui .m-stat__units {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    min-width: 72px;
    padding: 6px 8px;
    clip-path: var(--mt-cut-7);
}
body.mt-canonical-ui .m-stat__money { color: var(--mt-gold); font-weight: 750; font-size: 16px; }
body.mt-canonical-ui .m-stat__units { background: #3a3a3a; color: #ffffff; }
body.mt-canonical-ui .m-stat__units b { font-size: 16px; font-weight: 750; line-height: 1; }
body.mt-canonical-ui .m-stat__units small { font-size: 10px; letter-spacing: .04em; color: #c8c8c8; }

body.mt-canonical-ui .m-field{overflow:hidden}
body.mt-canonical-ui .m-field > span.m-input{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

body.mt-canonical-ui .m-field{overflow:hidden;contain:paint;}

body.mt-canonical-ui .m-page{padding-bottom:132px}

body.mt-canonical-ui .m-progress{grid-column:1 / -1;display:block;height:3px;margin-top:8px;background:rgba(255,255,255,.08);overflow:hidden}
body.mt-canonical-ui .m-progress > span{display:block;height:100%;background:#c6a15b}

body.mt-canonical-ui .m-person__avatar .m-ico,
body.mt-canonical-ui .m-hero .m-person__avatar .m-ico{width:calc(100% - 6px);height:calc(100% - 6px);color:var(--mt-gold)}
body.mt-canonical-ui .m-person__avatar img{width:calc(100% - 6px);height:calc(100% - 6px);object-fit:contain}

body.mt-canonical-ui .m-menu button > .m-ico{width:22px;height:22px;flex:0 0 22px;color:var(--mt-gold)}
body.mt-canonical-ui .m-menu button.is-selected > .m-ico{color:#000}


body.mt-canonical-ui .m-date-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;min-width:0}
body.mt-canonical-ui .m-date-pair>.m-field{min-width:0}

html, body.mt-canonical-ui { height: auto; overflow: visible; overscroll-behavior-y: auto; }
body.mt-canonical-ui .m-page { overflow: visible; padding-top: calc(var(--mt-header-h) + 8px); }
body.mt-canonical-ui .m-infinite { display: block; height: 64px; min-height: 64px; margin: 0; pointer-events: none; }

body.mt-canonical-ui { --mt-stack: 8px; }
body.mt-canonical-ui .m-page,
body.mt-canonical-ui .m-list,
body.mt-canonical-ui form.m-list,
body.mt-canonical-ui .m-section,
body.mt-canonical-ui .m-filters,
body.mt-canonical-ui .m-history,
body.mt-canonical-ui .m-form,
body.mt-canonical-ui .m-inquiry,
body.mt-canonical-ui .m-pack .m-list,
body.mt-canonical-ui .m-date-pair {
  gap: var(--mt-stack);
}
body.mt-canonical-ui .m-section,
body.mt-canonical-ui .m-filter-actions,
body.mt-canonical-ui .m-filters,
body.mt-canonical-ui h1.m-page-title,
body.mt-canonical-ui .m-page-title {
  margin-top: 0;
  margin-bottom: 0;
}
body.mt-canonical-ui .m-section { padding: 0; }
body.mt-canonical-ui :is(.m-list, form.m-list, .m-filters) + :is(.m-list, form.m-list, .m-filters, .m-section) { margin-top: 0; }

body.mt-canonical-ui div.m-choice { display: block; width: 100%; min-height: 0; margin: 0; }
body.mt-canonical-ui div.m-choice > .m-dev-field,
body.mt-canonical-ui div.m-choice > .m-field,
body.mt-canonical-ui .m-field-block { margin: 0; }

body.mt-canonical-ui .m-presets-picker .m-field { display: none !important; }
body.mt-canonical-ui .m-presets-picker .m-dev-field > .m-calendar { margin-top: 0; }
body.mt-canonical-ui h1.m-page-title .m-diamond,
body.mt-canonical-ui .m-hero h1 .m-diamond { margin-inline-start: 0; }

body.mt-canonical-ui .m-app-shell,
body.mt-canonical-ui .m-page,
body.mt-canonical-ui .m-page > * { min-width: 0; max-width: 100%; }
body.mt-canonical-ui .m-presets,
body.mt-canonical-ui .m-scope { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }
body.mt-canonical-ui .m-presets__scroll,
body.mt-canonical-ui .m-scope__scroll { touch-action: pan-x; overscroll-behavior-x: contain; }
@media (max-width: 900px) {
  html:not(.is-zoomed) body.mt-canonical-ui .m-page {
    overflow-x: visible;
    max-width: 100%;
  }
}

body.mt-canonical-ui .m-person {
  --mt-name-lh: 1.08em;
  align-items: start;
  grid-template-columns: 45px minmax(0, 1fr);
}
body.mt-canonical-ui .m-person__avatar { align-self: start; }
body.mt-canonical-ui .m-person__id {
  display: block !important;
  align-self: start;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 45px;
  padding-top: calc((45px - var(--mt-name-lh)) / 2) !important;
  line-height: 1.08;
  overflow: visible;
}
body.mt-canonical-ui .m-person > .m-person__name {
  align-self: start;
  box-sizing: border-box;
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding-top: calc((45px - var(--mt-name-lh)) / 2) !important;
  line-height: 1.08;
  white-space: normal;
  overflow-wrap: anywhere;
}
body.mt-canonical-ui .m-person__id > .m-person__name {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding-top: 0 !important;
  line-height: 1.08;
  white-space: normal;
  overflow-wrap: anywhere;
}
body.mt-canonical-ui .m-face-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  row-gap: 0;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  line-height: 1.08;
}
body.mt-canonical-ui .m-face-name,
body.mt-canonical-ui .m-face-part {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  overflow-wrap: anywhere;
  line-height: 1.08;
}
body.mt-canonical-ui .m-person__id > .m-person__kicker {
  top: calc((45px - var(--mt-name-lh)) / 2) !important;
  bottom: auto !important;
  transform: translateY(calc(-100% - 1px)) !important;
}
body.mt-canonical-ui .m-log .m-person__name,
body.mt-canonical-ui .m-log .m-face-line,
body.mt-canonical-ui .m-log .m-face-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-wrap: nowrap;
  overflow-wrap: normal;
}

body.mt-canonical-ui .m-presets { margin-bottom: var(--mt-stack, 8px); }
body.mt-canonical-ui h1.m-page-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.mt-canonical-ui h1.m-page-title > .m-ico,
body.mt-canonical-ui h1.m-page-title > svg { width: 22px; height: 22px; flex: none; color: var(--mt-gold); }
body.mt-canonical-ui h1.m-page-title .m-diamond { width: 6px; height: 6px; margin: 0; flex: none; }

body.mt-canonical-ui .m-presets-wrap { position: relative; z-index: 30; margin-bottom: var(--mt-stack, 8px); }
body.mt-canonical-ui .m-presets-wrap .m-presets { margin-bottom: 0; }
body.mt-canonical-ui button.m-presets__chip { border: 0; cursor: pointer; font: inherit; }
body.mt-canonical-ui .m-presets-picker {
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  top: calc(100% + 8px);
  margin: 0;
}
body.mt-canonical-ui .m-presets-picker .m-dev-field > .m-calendar { margin-top: 0; }
body.mt-canonical-ui h1.m-page-title .m-face-line,
body.mt-canonical-ui h1.m-page-title .m-face-name,
body.mt-canonical-ui h1.m-page-title .m-face-part {
  flex: none;
  min-width: max-content;
  max-width: none;
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
}

body.mt-canonical-ui .m-hero { align-items: start; }
body.mt-canonical-ui .m-hero > .m-person__avatar { align-self: start; }
body.mt-canonical-ui .m-hero h1,
body.mt-canonical-ui .m-person__id {
  display: block !important;
  align-self: start !important;
  min-height: 45px;
  padding-top: calc((45px - 1lh) / 2) !important;
}
body.mt-canonical-ui .m-hero h1 .m-person__kicker,
body.mt-canonical-ui .m-person__id > .m-person__kicker {
  position: absolute !important;
  inset-inline: 0 !important;
  top: calc((45px - 1lh) / 2) !important;
  bottom: auto !important;
  height: auto !important;
  transform: translateY(calc(-100% - 1px)) !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.mt-canonical-ui .m-hero h1 .m-face-line,
body.mt-canonical-ui .m-person__id .m-face-line {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
body.mt-canonical-ui .m-hero h1 .m-face-name,
body.mt-canonical-ui .m-hero h1 .m-face-part,
body.mt-canonical-ui .m-person__id .m-face-name,
body.mt-canonical-ui .m-person__id .m-face-part {
  display: inline;
  white-space: normal;
  overflow-wrap: break-word;
}
body.mt-canonical-ui button.m-tile {
  width: 100%;
  border: 0;
  font: inherit;
  cursor: pointer;
}
body.mt-canonical-ui .m-tile-range {
  margin: -4px 0 8px;
  color: var(--mt-text-secondary);
  font-size: 12px;
  font-weight: 650;
  text-align: center;
}

body.mt-canonical-ui .m-choice-add {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin-top: 4px;
  padding: 0 10px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--mt-gold) 35%, transparent);
  background: transparent;
  color: var(--mt-gold);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  text-align: start;
}
body.mt-canonical-ui .m-choice-add .m-ico { width: 16px; height: 16px; color: var(--mt-gold); }

body.mt-canonical-ui .m-presets__scroll {
  padding-inline: 28%;
  scroll-behavior: auto;
}
body.mt-canonical-ui .m-presets__chip.is-active {
  background: #c49a36 !important;
  color: #000000 !important;
  font-weight: 800;
  box-shadow: none;
}

body.mt-canonical-ui .m-doc-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--mt-surface-2);
  clip-path: var(--mt-cut-7);
}
body.mt-canonical-ui .m-doc-line__name {
  min-width: 0;
  color: inherit;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-decoration: none;
}
body.mt-canonical-ui .m-doc-line__fig {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  min-width: 7.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.2;
  text-align: end;
  text-decoration: none;
  cursor: pointer;
}
body.mt-canonical-ui .m-doc-line__fig strong { color: var(--mt-gold); font-weight: 750; }
body.mt-canonical-ui .m-doc-line__edit {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}
body.mt-canonical-ui .m-doc-line__edit label { display: grid; gap: 4px; color: var(--mt-text-secondary); font-size: 12px; }
body.mt-canonical-ui .m-doc-line__edit input {
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  background: var(--mt-surface);
  color: var(--mt-text);
  font: inherit;
}
body.mt-canonical-ui .m-doc-line__photo { width: 36px; height: 36px; }
body.mt-canonical-ui .m-doc-line__photo img { width: 36px; height: 36px; object-fit: cover; }

body.mt-canonical-ui .m-status-edit { display: grid; justify-items: start; gap: var(--mt-stack); }
body.mt-canonical-ui .m-status-edit > .m-status { cursor: pointer; border: 0; }
body.mt-canonical-ui .m-status-edit form { width: 100%; }
body.mt-canonical-ui .m-doc-line__edit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.mt-canonical-ui .m-doc-line__edit .m-button { grid-column: auto; }

body.mt-canonical-ui .m-date-pair { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
body.mt-canonical-ui .m-date-pair > .m-field { grid-column: auto !important; width: auto; min-width: 0; }
body.mt-canonical-ui .m-doc-line__name { display: flex; align-items: flex-start; gap: 4px; }
body.mt-canonical-ui .m-doc-line__name > a,
body.mt-canonical-ui .m-doc-line__name > span { flex: 1 1 auto; min-width: 0; }
body.mt-canonical-ui .m-doc-line__chev { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--mt-gold); }
body.mt-canonical-ui .m-doc-line__chev .m-ico { width: 14px; height: 14px; transform: rotate(90deg); }
body.mt-canonical-ui .m-doc-line__chev.is-open .m-ico { transform: rotate(-90deg); }
body.mt-canonical-ui .m-doc-line__more { grid-column: 1 / -1; display: grid; gap: 2px; padding-top: 4px; }
body.mt-canonical-ui .m-doc-line__more div { display: flex; justify-content: space-between; gap: 8px; color: var(--mt-text-secondary); font-size: 12px; }
body.mt-canonical-ui .m-doc-line__more b { color: var(--mt-text); font-weight: 700; text-align: end; }
body.mt-canonical-ui .m-doc-line.is-picked { outline: 2px solid #c49a36; outline-offset: -2px; }
body.mt-canonical-ui .m-doc-pick {
  position: fixed;
  z-index: 40;
  left: 12px;
  right: 12px;
  bottom: calc(var(--mt-bottom-nav-h, 64px) + env(safe-area-inset-bottom) + 8px);
  display: flex;
  gap: 8px;
}
body.mt-canonical-ui .m-doc-pick .m-button { flex: 0 0 auto; width: max-content; min-width: 0; }

body.mt-canonical-ui .m-back-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; position: sticky; top: var(--mt-header-h); z-index: calc(var(--mt-z-sticky) + 10); background: var(--mt-canvas, #f2f2ef); }
body.mt-canonical-ui .m-back-row > .m-back { margin: 0; }
body.mt-canonical-ui :is(a, button).m-back-sticker { flex: 0 0 auto; height: 32px; min-height: 32px; padding: 0 12px; background: var(--mt-gold); color: #000; }
body.mt-canonical-ui.light-theme :is(a, button).m-back-sticker,
body.mt-canonical-ui:not(.dark-theme):not(.mt-dark) :is(a, button).m-back-sticker { background: #d0d0d0; }
body.mt-canonical-ui .m-hero > .m-person__kicker {
  grid-column: 2;
  grid-row: 2;
  position: static !important;
  inset: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: block !important;
  width: auto;
  max-width: 100%;
  margin: 0 0 1px !important;
  color: var(--mt-text-secondary);
  font-size: 11px !important;
  font-weight: 650;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.mt-canonical-ui .m-hero > .m-person__avatar { grid-row: 3; align-self: start; }
body.mt-canonical-ui .m-hero > h1 {
  grid-column: 2;
  grid-row: 3;
  display: block !important;
  position: static !important;
  align-self: start !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding-top: 12px !important;
}
body.mt-canonical-ui .m-hero > .m-hero__meta { grid-row: 4; }
body.mt-canonical-ui .m-person__id {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 0 !important;
  padding-top: 0 !important;
}
body.mt-canonical-ui .m-person__id > .m-person__kicker {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  order: -1;
  margin: 0 0 1px !important;
}

body.mt-canonical-ui .m-doc-line { position: relative; }
body.mt-canonical-ui .m-progress.m-supply {
  position: absolute;
  z-index: 3;
  top: 0;
  inset-inline: 0;
  width: auto;
  height: 2px;
  margin: 0;
  background: rgba(255,255,255,.14);
  clip-path: none;
  pointer-events: none;
}
body.mt-canonical-ui .m-progress.m-supply > span {
  display: block;
  height: 100%;
  background: var(--mt-success);
}
body.mt-canonical-ui .m-progress.m-supply.m-urgent > span {
  width: 100%;
  background: #d85b56;
}

body.mt-canonical-ui .m-one-date { position: relative; z-index: 6; }
body.mt-canonical-ui .m-one-date > .m-calendar {
  position: absolute;
  z-index: 80;
  inset-inline: 0;
  top: calc(100% + 4px);
  bottom: auto;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}

body.mt-canonical-ui .m-calendar .m-date-months {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  margin: 0 0 4px;
}
body.mt-canonical-ui .m-calendar .m-date-months > button {
  width: 100%;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: var(--mt-surface-2);
  color: var(--mt-text);
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  line-height: 1;
  clip-path: none;
}
body.mt-canonical-ui .m-calendar .m-date-months > button.is-active {
  background: var(--mt-gold);
  color: #000000;
}

body.mt-canonical-ui .m-doc-name { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }
body.mt-canonical-ui .m-doc-name__bit { display: inline-flex; align-items: center; min-width: 0; }
body.mt-canonical-ui .m-doc-name .m-diamond { display: inline-block; }

html[data-theme="dark"] body.mt-canonical-ui .m-side-nav,
body.mt-canonical-ui.mt-dark .m-side-nav,
body.mt-canonical-ui.dark-theme .m-side-nav {
    color: #ffffff;
}
html[data-theme="dark"] body.mt-canonical-ui .m-side-nav a:not(.m-nav-group):not(.is-active),
html[data-theme="dark"] body.mt-canonical-ui .m-side-nav button.m-nav-row,
html[data-theme="dark"] body.mt-canonical-ui .m-side-nav .m-nav-chevron,
html[data-theme="dark"] body.mt-canonical-ui .m-side-nav.is-open a:not(.m-nav-group):not(.is-active),
body.mt-canonical-ui.mt-dark .m-side-nav a:not(.m-nav-group):not(.is-active),
body.mt-canonical-ui.dark-theme .m-side-nav a:not(.m-nav-group):not(.is-active) {
    color: #ffffff;
}
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav,
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav.is-open {
    color: #ffffff;
}
body.mt-canonical-ui .m-side-nav .m-nav-group,
body.mt-canonical-ui .m-side-nav a.m-nav-group:not(.is-active) {
    color: var(--mt-gold);
}
body.mt-canonical-ui .m-side-nav .m-ico,
body.mt-canonical-ui .m-side-nav .m-brand-mark {
    color: inherit;
}
body.mt-canonical-ui .m-side-nav a.is-active,
body.mt-canonical-ui .m-side-nav a.is-active .m-ico,
body.mt-canonical-ui .m-side-nav a.is-active .m-brand-mark,
body.mt-canonical-ui .m-side-nav.is-open a.is-active,
body.mt-canonical-ui .m-side-nav.is-open a.is-active .m-ico,
body.mt-canonical-ui .m-side-nav a.m-nav-group.is-active,
body.mt-canonical-ui .m-side-nav a.m-nav-group.is-active .m-ico,
body.mt-canonical-ui .m-side-nav a.m-nav-group.is-active .m-brand-mark {
    color: #000000;
}

html[dir="rtl"] :is(.m-stat__money, .m-stat__units b, .m-doc-line__fig, .m-doc-line__fig span, .m-doc-line__fig strong, .m-kpi strong, input[type="number"], input[inputmode="decimal"], input[inputmode="numeric"]) {
    direction: ltr;
    unicode-bidi: isolate;
}

body.mt-canonical-ui .m-dev-field > .m-calendar,
body.mt-canonical-ui .m-one-date > .m-calendar {
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
body.mt-canonical-ui .m-calendar .m-date-months {
    display: grid;
    grid-template-columns: repeat(12, 36px);
    gap: 2px;
    width: max-content;
    max-width: 100%;
    margin: 0 0 4px;
}
body.mt-canonical-ui .m-calendar .m-date-months > button {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
    flex: 0 0 36px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    clip-path: var(--mt-cut-7) !important;
    background: var(--mt-surface-2);
    color: var(--mt-text);
}
body.mt-canonical-ui .m-calendar .m-date-months > button.is-active {
    background: var(--mt-gold) !important;
    color: #000000 !important;
}
body.mt-canonical-ui .m-calendar .m-date-rail,
body.mt-canonical-ui .m-calendar .m-calendar-grid {
    width: calc(12 * 36px + 11 * 2px);
    max-width: 100%;
}

/* rtl-status-left */

html[dir="rtl"] body.mt-canonical-ui .m-person__statuses .m-status,
html[dir="rtl"] body.mt-canonical-ui .m-person__statuses a.m-status {
    margin-left: 0;
    margin-right: 0;
}
html[dir="rtl"] body.mt-canonical-ui .m-record-card > .m-status {
    inset-inline-end: auto;
    left: 5px;
    right: auto;
}

/* calendar fits the twelve months; years scroll inside it */
body.mt-canonical-ui .m-dev-field > .m-calendar,
body.mt-canonical-ui .m-one-date > .m-calendar,
body.mt-canonical-ui .m-presets-picker .m-dev-field > .m-calendar {
    width: calc(12 * 36px + 11 * 2px + 24px) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    justify-self: start;
}
body.mt-canonical-ui .m-calendar .m-date-rail,
body.mt-canonical-ui .m-dev-field > .m-calendar .m-date-rail {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}
body.mt-canonical-ui .m-calendar .m-calendar-grid {
    width: 100% !important;
    max-width: 100% !important;
}

body.mt-canonical-ui .m-dev-field:has(> .m-menu)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 25;
    background: transparent;
}
body.mt-canonical-ui .m-dev-field:has(> .m-menu) { z-index: 30; }
body.mt-canonical-ui .m-dev-field > .m-menu { z-index: 35; }

body.mt-canonical-ui .m-doc-line__jump { display: flex; justify-content: space-between; gap: 8px; color: inherit; text-decoration: none; }
body.mt-canonical-ui .m-doc-line__jump b { color: var(--mt-gold); text-decoration: underline; text-underline-offset: 2px; }

body.mt-canonical-ui .m-back-row__end { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; margin-inline-end: 8px; }
body.mt-canonical-ui .m-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
body.mt-canonical-ui .m-title-row > .m-page-title { flex: 1; min-width: 0; margin: 0; }
body.mt-canonical-ui .m-title-row .m-status-edit { margin: 0; flex: none; }
body.mt-canonical-ui .m-order-head { display: grid; gap: 8px; padding: 12px; background: var(--mt-surface); clip-path: var(--mt-cut-7); }
body.mt-canonical-ui .m-order-head__dates,
body.mt-canonical-ui .m-order-head__people { display: flex; justify-content: space-between; gap: 12px; }
body.mt-canonical-ui .m-order-head__dates > span,
body.mt-canonical-ui .m-order-head__total { display: grid; gap: 2px; }
body.mt-canonical-ui .m-order-head__dates > span:last-child,
body.mt-canonical-ui .m-order-head__total { text-align: end; }
body.mt-canonical-ui .m-order-head small { color: var(--mt-text-secondary); font-size: 11px; font-weight: 650; }
body.mt-canonical-ui .m-order-head__customer { font-size: 18px; }
body.mt-canonical-ui .m-order-head__counts { display: flex; justify-content: space-between; gap: 12px; }
body.mt-canonical-ui .m-order-head__counts > span { display: grid; gap: 2px; }
body.mt-canonical-ui .m-order-head__counts > span:last-child { text-align: end; }
body.mt-canonical-ui .m-order-head__counts b, body.mt-canonical-ui .m-doc-qty { font-weight: 750; }
body.mt-canonical-ui .m-doc-qty { width: 4.75rem; min-height: 28px; padding: 0 6px; border: 0; background: color-mix(in srgb, var(--mt-surface-2) 97%, #000); color: var(--mt-text); font: inherit; font-weight: 750; text-align: end; -webkit-appearance: none; appearance: none; }

body.mt-canonical-ui .m-order-head__total b { font-weight: 700; }
body.mt-canonical-ui .m-order-head__note { margin: 0; white-space: pre-line; color: var(--mt-text-secondary); }

body.mt-canonical-ui .m-back-row .m-button,
body.mt-canonical-ui .m-back-row :is(a, button).m-back-sticker {
  height: 32px;
  min-height: 32px;
  min-width: 0;
  width: max-content;
  max-width: none;
  margin-inline: 0;
  padding: 0 12px;
  clip-path: var(--mt-cut-7) !important;
}
body.mt-canonical-ui .m-share-sheet {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 12px;
  background: var(--mt-surface);
  clip-path: var(--mt-cut-7);
}
body.mt-canonical-ui .m-share-sheet .m-filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Canonical chevron: always gold */
body.mt-canonical-ui .m-nav-chevron,
body.mt-canonical-ui .m-pack__chevron,
body.mt-canonical-ui .m-control-frame__chevron,
body.mt-canonical-ui [class*='chevron'] .m-ico {
    color: var(--mt-gold) !important;
}

/* Compact summary card for locked facts */
body.mt-canonical-ui .m-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
    padding: 12px;
    background: var(--mt-surface);
    border-radius: 8px;
    margin-bottom: 12px;
}
body.mt-canonical-ui .m-summary__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
body.mt-canonical-ui .m-summary__label {
    font-size: 11px;
    color: var(--mt-text-muted);
    text-transform: uppercase;
}
body.mt-canonical-ui .m-summary__value {
    font-size: 14px;
    font-weight: 600;
    color: var(--mt-text);
}
body.mt-canonical-ui .m-summary__value a {
    color: var(--mt-gold);
    text-decoration: none;
}

html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav,
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav.is-open,
body.mt-canonical-ui.light-theme .m-side-nav {
    color: #ffffff;
}
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav a:not(.is-active),
body.mt-canonical-ui.light-theme .m-side-nav a:not(.is-active) {
    color: #ffffff;
}


/* Record chrome restored: menu, back, share, titles, order sort. */
body.mt-canonical-ui .m-more-backdrop{position:fixed;inset:0;z-index:60;border:0;padding:0;background:rgba(0,0,0,.28)}
@media (max-width:767px){
  body.mt-canonical-ui:has(.m-side-nav.is-open){overflow:visible !important;height:auto !important}
  body.mt-canonical-ui .m-side-nav.is-open{z-index:65 !important;top:auto !important;bottom:calc(var(--mt-bottom-nav-h) + env(safe-area-inset-bottom) + 8px) !important;max-height:min(60vh,480px) !important}
  body.mt-canonical-ui .m-bottom-nav{z-index:80 !important}
}
body.mt-canonical-ui .m-back-row :is(a,button).m-back-sticker,
body.mt-canonical-ui :is(a,button).m-back-sticker{
  height:32px !important;min-height:32px !important;min-width:0 !important;width:max-content !important;
  padding:0 12px !important;clip-path:var(--mt-cut-7) !important;border-radius:0 !important
}
body.mt-canonical-ui a.m-back>.m-ico{margin:0 !important}
body.mt-canonical-ui h1.m-page-title{display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:4px 8px !important;margin:0 0 8px !important;padding:0 !important}
body.mt-canonical-ui h1.m-page-title .m-person__kicker{position:static !important;inset:auto !important;transform:none !important;display:block !important;flex:1 0 100% !important;order:-1 !important;margin:0 !important;line-height:1.15 !important}
body.mt-canonical-ui .m-line-sort{display:flex !important;overflow:visible !important;min-height:44px !important;margin:8px 0 !important}
body.mt-canonical-ui .m-line-sort .m-scope__scroll{display:flex !important;min-height:36px !important;overflow-x:auto !important;overflow-y:visible !important}
body.mt-canonical-ui #prices{margin-top:8px}

/* Share stays a full cut-7 button. min-width 0 was crushing the label. */
body.mt-canonical-ui .m-back-row__end { flex: 0 0 auto; }
body.mt-canonical-ui .m-back-row__end > form { display: inline-flex; flex: 0 0 auto; }
body.mt-canonical-ui .m-back-row :is(a, button).m-back-sticker,
body.mt-canonical-ui :is(a, button).m-back-sticker {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
  width: max-content !important;
  max-width: none !important;
  height: 32px !important;
  padding: 0 22px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  clip-path: var(--mt-cut-7) !important;
}

/* Quantity field: one step off the line card under it, not a black box. */
body.mt-canonical-ui input.m-doc-qty {
  background: color-mix(in srgb, var(--mt-surface-2) 97%, #000) !important;
  background-color: color-mix(in srgb, var(--mt-surface-2) 97%, #000) !important;
  color: var(--mt-text) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.mt-canonical-ui .m-doc-line,
body.mt-canonical-ui .m-doc-line.is-picked { outline: none !important; }
body.mt-canonical-ui .m-progress.m-supply.m-urgent {
  background: #d85b56 !important;
  height: 3px !important;
}
body.mt-canonical-ui .m-progress.m-supply.m-urgent > span {
  width: 100% !important;
  background: #d85b56 !important;
}
body.mt-canonical-ui .m-list:has(> .m-tile) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
body.mt-canonical-ui a.m-tile {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 78px;
  padding: 10px;
  background: var(--mt-surface-2);
  color: inherit;
  text-decoration: none;
  clip-path: var(--mt-cut-7);
}
body.mt-canonical-ui a.m-tile b { font-size: 12px; font-weight: 750; }
body.mt-canonical-ui a.m-tile span { font-size: 13px; font-weight: 750; line-height: 1.2; }
body.mt-canonical-ui a.m-tile span + span { color: var(--mt-text-secondary); font-size: 12px; font-weight: 650; }

#mt-order-bar, #mt-order-sheet { position: fixed; z-index: 70; left: 12px; right: 12px; }
#mt-order-bar { top: calc(var(--mt-header-h) + 8px); display: grid; gap: 8px; max-height: 42vh; overflow: auto; padding: 10px; background: var(--mt-surface-2); color: var(--mt-text); clip-path: var(--mt-cut-7); }
#mt-order-bar p, #mt-order-sheet p { margin: 0; }
#mt-order-bar .m-order-line, #mt-order-sheet button, #mt-order-bar button { font: inherit; }
.m-order-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.m-order-line b { font-weight: 650; }
.m-order-qty { display: flex; align-items: center; gap: 6px; }
.m-order-qty button, #mt-order-bar .m-order-go, #mt-order-sheet button { height: 32px; padding: 0 10px; border: 0; background: var(--mt-gold); color: #000; clip-path: var(--mt-cut-7); }
.m-order-qty input { width: 4.2rem; height: 32px; border: 0; background: color-mix(in srgb, var(--mt-surface-2) 97%, #000); color: inherit; text-align: end; font: inherit; }
#mt-order-sheet { bottom: calc(var(--mt-bottom-nav-h) + 12px); max-height: 58vh; overflow: auto; display: grid; gap: 8px; padding: 12px; background: var(--mt-surface); color: var(--mt-text); clip-path: var(--mt-cut-7); }
#mt-order-sheet article { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.08); }
.m-list [data-id].is-order-picked .m-person { box-shadow: inset 3px 0 0 #d85b56; }


body.mt-canonical-ui button.m-field {
    appearance: none;
    -webkit-appearance: none;
    text-align: start;
    cursor: pointer;
}
body.mt-canonical-ui .m-activity.is-open .m-field.is-disclosure::after {
    transform: translateY(-20%) rotate(225deg);
}

body.mt-canonical-ui .m-activity { margin-top: 12px; }
body.mt-canonical-ui .m-activity__body { display: grid; gap: 8px; margin-top: 8px; }
body.mt-canonical-ui .m-activity__lines p { margin: 0; font-size: 13px; line-height: 1.35; }

body.mt-canonical-ui .m-list:has(.m-tile) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body.mt-canonical-ui .m-list:has(.m-tile) > div:has(.m-tile) { display: contents; }
body.mt-canonical-ui .m-list:has(.m-tile) > div:not(:has(.m-tile)) { display: block; grid-column: 1 / -1; min-width: 0; }
body.mt-canonical-ui .m-list:has(.m-tile) h2.m-page-title { grid-column: 1 / -1; }
body.mt-canonical-ui .m-list:has(.m-tile) a.m-stat { width: 100%; box-sizing: border-box; }
body.mt-canonical-ui .m-scope__scroll { padding-inline: 8px; }

body.mt-canonical-ui .m-menu .m-choice-hit{display:flex;align-items:stretch;gap:0;width:100%}body.mt-canonical-ui .m-menu .m-choice-hit>button:first-child{flex:1;min-width:0}body.mt-canonical-ui .m-qty{display:inline-flex;align-items:center;gap:6px;margin-inline-start:auto;flex:none}body.mt-canonical-ui .m-qty b{font-weight:750;font-variant-numeric:tabular-nums}body.mt-canonical-ui .m-qty b.is-stock{color:var(--mt-success)}body.mt-canonical-ui .m-qty b.is-process{color:var(--mt-gold)}body.mt-canonical-ui .m-choice-addline,body.mt-canonical-ui .m-suggest__add{flex:none;border:0;background:transparent;color:var(--mt-gold);font:inherit;font-size:12px;font-weight:750;padding:8px;text-align:end}body.mt-canonical-ui .m-suggest__row{display:flex;align-items:center;width:100%}body.mt-canonical-ui .m-suggest__row .m-suggest__item{flex:1;min-width:0}

body.mt-canonical-ui .m-size-pair{display:inline-flex;direction:ltr;align-items:center;gap:8px;flex:none}
body.mt-canonical-ui .m-size-pair b{font-weight:750;line-height:1}
body.mt-canonical-ui .m-size-pair b.is-us{color:var(--mt-gold)}
body.mt-canonical-ui .m-size-fields{display:grid;grid-template-columns:1fr 1fr;direction:ltr;gap:8px}
body.mt-canonical-ui .m-size-fields .m-field{min-width:0}

body.mt-canonical-ui form.m-list > .m-size-fields{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;direction:ltr;gap:8px}
body.mt-canonical-ui .m-size-fields > .m-dev-field{min-width:0}
body.mt-canonical-ui .m-size-fields .m-dev-field > .m-menu{min-width:100%}

body.mt-canonical-ui .m-progress.m-supply > span.is-process,
body.mt-canonical-ui .m-progress.m-supply > span.is-green{position:absolute;inset-inline-start:0;top:0;height:100%;display:block}
body.mt-canonical-ui .m-progress.m-supply > span.is-process{z-index:1;background:#e39a3c}
body.mt-canonical-ui .m-progress.m-supply > span.is-green{z-index:2;background:var(--mt-success)}
body.mt-canonical-ui .m-progress.m-supply.is-rush{background:rgba(216,91,86,.45)}

body.mt-canonical-ui .m-qty-mode{display:grid;gap:6px;margin:8px 0 4px}
body.mt-canonical-ui .m-qty-mode > span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
body.mt-canonical-ui .m-qty-mode > small{font-size:12px;line-height:1.35;opacity:.8}
body.mt-canonical-ui .m-qty-mode__note{margin:0 0 6px;font-size:12px;color:#e0a15a}
body.mt-canonical-ui .m-doc-line__more .m-qty-mode{margin-top:8px}

body.mt-canonical-ui label.m-toggle{position:relative;display:flex;direction:ltr;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0;height:auto;margin:8px 0;padding:8px 2px;background:transparent;clip-path:none;color:inherit;cursor:pointer}
body.mt-canonical-ui label.m-toggle::after{content:none}
body.mt-canonical-ui label.m-toggle > span:first-child{min-width:0;text-align:left}
body.mt-canonical-ui label.m-toggle input{position:absolute;opacity:0;pointer-events:none}
body.mt-canonical-ui label.m-toggle .m-toggle__track{position:relative;flex:0 0 45px;width:45px;height:26px;margin-inline-start:auto;background:var(--mt-neutral);clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,13px 100%,0 50%)}
body.mt-canonical-ui label.m-toggle .m-toggle__track::after{content:"";position:absolute;top:4px;left:4px;width:18px;height:18px;background:#000;clip-path:var(--mt-diamond)}
body.mt-canonical-ui label.m-toggle .m-toggle__track.is-on{background:var(--mt-gold)}
body.mt-canonical-ui label.m-toggle .m-toggle__track.is-on::after{left:23px}


html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav a:not(.is-active),
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav a:not(.is-active) .m-ico,
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav a:not(.is-active) .m-brand-mark,
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav button.m-nav-row,
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav .m-nav-chevron,
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav.is-open a:not(.is-active) {
    color: #ffffff !important;
}
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav a:not(.is-active) .m-ico,
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav a:not(.is-active) .m-brand-mark,
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav .m-nav-chevron {
    color: #ffffff !important;
}
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav .m-nav-group:not(.is-active),
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav a.m-nav-group:not(.is-active),
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav a.m-nav-group:not(.is-active) .m-ico {
    color: var(--mt-gold) !important;
}
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav a.is-active,
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav a.is-active .m-ico,
html:not([data-theme="dark"]) body.mt-canonical-ui .m-side-nav a.is-active .m-brand-mark {
    color: #000000 !important;
}

.m-photo{display:flex;flex-direction:column;gap:10px;padding:12px 0}
.m-photo img{width:84px;height:84px;object-fit:cover;border-radius:12px}
.m-photo__empty{width:84px;height:84px;display:grid;place-items:center;border-radius:12px;background:#111;color:#fff}
.m-photo__pending{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.m-photo input[type=file]{font-size:14px}

.m-pick{display:flex;align-items:center;gap:6px;width:100%;min-width:0}
.m-pick>.m-ico{color:#fff;flex:none}
.m-pick__name{flex:1;min-width:0;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-pick__facts,.m-pick__size{display:flex;align-items:center;gap:4px;flex:none;font-size:12px}
.m-pick__facts b{font-weight:650}
.m-pick__swatch{width:10px;height:10px;border-radius:2px;display:inline-block}
.m-pick .m-logo-mark{width:22px;height:22px;flex:none}
.m-scan-pop{position:fixed;inset:0;z-index:80;background:#000;display:grid}
.m-scan-pop video{width:100%;height:100%;object-fit:cover}
@media (max-width:520px){
  .m-pick__facts{gap:0}
  .m-pick__facts b+b::before{content:" · ";margin:0 2px}
}

body.mt-canonical-ui .m-diamond{display:inline-block;vertical-align:middle}
body.mt-canonical-ui .m-suggest strong .m-face-line{display:inline-flex;align-items:center;max-width:100%}
body.mt-canonical-ui .m-suggest strong .m-diamond{display:inline-block}

body.mt-canonical-ui .m-menu-search{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:8px;min-height:44px;margin:-4px -4px 4px;padding:6px 8px;background:var(--mt-surface-3)}
body.mt-canonical-ui .m-menu-search>.m-ico{width:18px;height:18px;flex:none;color:var(--mt-gold)}
body.mt-canonical-ui .m-menu-search>.m-input{flex:1;min-width:0;height:32px;min-height:32px;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-size:16px}
body.mt-canonical-ui .m-menu-search>.m-search-scan{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border:0;background:transparent;color:var(--mt-gold);padding:0}
body.mt-canonical-ui .m-menu-search>.m-search-scan .m-ico{width:18px;height:18px}

body.mt-canonical-ui .m-pick__title{display:flex;align-items:baseline;gap:4px;min-width:0;flex:1 1 auto}
body.mt-canonical-ui .m-pick__name{flex:0 1 auto}
body.mt-canonical-ui .m-pick__near{flex:none;color:var(--mt-text-secondary);font-size:12px;font-weight:650}
body.mt-canonical-ui .m-pick__size{margin-inline-start:auto}
body.mt-canonical-ui .m-pick__swatch{display:none}
body.mt-canonical-ui .m-dev-field .m-menu .m-menu-search>.m-search-scan{position:relative;inset:auto;width:32px !important;min-width:32px;max-width:32px;flex:0 0 32px;min-height:32px}

body.mt-canonical-ui .m-pack-slot{display:grid;gap:8px;padding:10px;background:var(--mt-surface-2);border:1px solid transparent}
body.mt-canonical-ui .m-pack-slot.is-set{background:var(--mt-surface-3)}
body.mt-canonical-ui .m-pack-slot.is-open{border-color:var(--mt-gold)}
body.mt-canonical-ui .m-pack-slot[hidden]{display:none !important}
body.mt-canonical-ui .m-pack-slot__reset{justify-self:end;display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 4px;border:0;background:transparent;color:var(--mt-text-secondary);font:inherit;font-size:13px}
body.mt-canonical-ui .m-pack-slot__reset .m-ico{width:16px;height:16px;color:var(--mt-text-secondary)}

@media (max-width: 900px) {
  body.mt-canonical-ui .m-header,
  body.mt-canonical-ui .m-header__center,
  body.mt-canonical-ui .m-header__search { overflow: visible; }
  body.mt-canonical-ui .m-header__search .m-suggest {
    top: calc(100% + 28px);
    z-index: 8;
    max-height: min(46dvh, 360px);
  }
}
body.mt-canonical-ui .m-suggest__row { align-items: stretch; }
body.mt-canonical-ui .m-suggest__add {
  align-self: center;
  flex: none;
  white-space: nowrap;
  background: var(--mt-gold);
  color: #111;
  font-weight: 750;
  padding: 8px 10px;
  margin-inline-start: 6px;
  clip-path: var(--mt-cut-7);
}

/* Choice menu: the search field must not sit inside overflow:hidden or clip-path.
   iOS otherwise opens the keyboard and drops every character. */
body.mt-canonical-ui .m-dev-field,
body.mt-canonical-ui .m-filters,
body.mt-canonical-ui .m-section {
    overflow: visible !important;
}
body.mt-canonical-ui .m-menu,
body.mt-canonical-ui .m-dev-field > .m-menu {
    clip-path: none !important;
}
body.mt-canonical-ui .m-dev-field > .m-menu:not(.m-calendar) {
    display: flex;
    flex-direction: column;
    overflow: visible;
    max-height: min(52dvh, 420px);
}
body.mt-canonical-ui .m-menu-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    max-height: min(40dvh, 320px);
    flex: 1 1 auto;
}
body.mt-canonical-ui .m-menu-search {
    position: relative;
    z-index: 4;
    flex: none;
}
body.mt-canonical-ui .m-menu-search > .m-input {
    position: relative;
    z-index: 5;
    min-width: 0;
    font-size: 16px;
    line-height: 32px;
    color: var(--mt-text);
    -webkit-text-fill-color: var(--mt-text);
    caret-color: var(--mt-text);
    pointer-events: auto;
    -webkit-user-select: text;
    user-select: text;
}
body.mt-canonical-ui .m-field-tools {
    position: absolute;
    z-index: 4;
    inset-inline-end: 2px;
    top: 0;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 0;
}
body.mt-canonical-ui .m-field-tools .m-field-tool {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--mt-gold);
}
body.mt-canonical-ui .m-field-tools .m-ico { width: 18px; height: 18px; }
body.mt-canonical-ui .m-scan-pop__close {
    position: absolute;
    z-index: 2;
    top: calc(env(safe-area-inset-top) + 12px);
    inset-inline-end: 12px;
    width: 44px;
    height: 44px;
    border: 0;
    background: #111111;
    color: #f7f7f7;
    font-size: 32px;
    line-height: 40px;
}
body.mt-canonical-ui .m-choice-miss {
    position: fixed;
    z-index: 90;
    left: 16px;
    right: 16px;
    bottom: calc(var(--mt-bottom-nav-h) + env(safe-area-inset-bottom) + 16px);
    padding: 12px 14px;
    background: #111111;
    color: #f7f7f7;
    text-align: center;
    font-weight: 750;
    clip-path: var(--mt-cut-7);
}

body.mt-canonical-ui .m-field > .m-choice-find {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    height: 36px;
    margin: 0;
    padding: 0 76px 0 4px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--mt-text);
    -webkit-text-fill-color: var(--mt-text);
    caret-color: var(--mt-text);
    font: inherit;
    font-size: 16px;
    line-height: 36px;
    text-align: end;
}
body.mt-canonical-ui .m-scan-pop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px;
    background: rgba(0, 0, 0, .86);
}
body.mt-canonical-ui .m-scan-pop__bar {
    position: absolute;
    top: calc(env(safe-area-inset-top) + 10px);
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: flex-end;
}
body.mt-canonical-ui .m-scan-pop__frame {
    width: min(84vw, 420px);
    aspect-ratio: 3 / 4;
    border: 2px solid var(--mt-gold);
    background: #000;
    overflow: hidden;
}
body.mt-canonical-ui .m-scan-pop__frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body.mt-canonical-ui .m-scan-pop__actions { display: flex; gap: 12px; }
body.mt-canonical-ui .m-scan-pop__close,
body.mt-canonical-ui .m-scan-pop__torch,
body.mt-canonical-ui .m-scan-pop__leave {
    position: static;
    min-width: 64px;
    height: 44px;
    padding: 0 16px;
    border: 0;
    background: #1a1a1a;
    color: #f7f7f7;
    font: inherit;
    font-size: 16px;
    font-weight: 750;
}
body.mt-canonical-ui .m-scan-pop__close { min-width: 44px; font-size: 28px; line-height: 40px; }
body.mt-canonical-ui .m-scan-pop__torch.is-on { background: var(--mt-gold); color: #111; }

body.mt-canonical-ui .m-item-find {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) 36px;
    align-items: center;
    direction: ltr;
    min-height: 44px;
    padding: 0 8px;
    background: var(--mt-surface-2);
    clip-path: none;
    overflow: visible;
}
body.mt-canonical-ui .m-item-find > .m-ico {
    grid-column: 1;
    grid-row: 1;
    width: 18px;
    height: 18px;
    color: var(--mt-gold);
    pointer-events: none;
}
body.mt-canonical-ui .m-item-find > .m-input {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 44px 0 30px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--mt-text);
    -webkit-text-fill-color: var(--mt-text);
    caret-color: var(--mt-text);
    font: inherit;
    font-size: 16px;
    line-height: 44px;
    text-align: start;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    pointer-events: auto;
    -webkit-user-select: text;
    user-select: text;
    touch-action: manipulation;
}
body.mt-canonical-ui .m-item-find > .m-search-scan {
    grid-column: 3;
    grid-row: 1;
    position: relative;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--mt-gold);
}
body.mt-canonical-ui .m-item-set {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    font-size: 16px;
    line-height: 1.3;
}

body.mt-canonical-ui body.mt-canonical-ui .m-board { display: grid; gap: 8px; margin: 0 0 12px; min-width: 0; }
body.mt-canonical-ui .m-board-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 8px; }
body.mt-canonical-ui .m-board__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; min-width: 0; }
body.mt-canonical-ui .m-board .m-card { min-width: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; box-shadow: none; }
body.mt-canonical-ui .m-board .m-card > h2 { display: flex; align-items: flex-start; gap: 4px; min-height: 2.7em; margin: 0; font-size: 12px; line-height: 1.2; }
body.mt-canonical-ui .m-board .m-card > h2 .m-ico { color: var(--mt-gold); flex: 0 0 auto; }
body.mt-canonical-ui .m-board .m-card > h2 > span { min-width: 0; white-space: normal; }
body.mt-canonical-ui .m-board__when { margin: 0; min-height: 1.2em; color: var(--mt-text-secondary); font-size: 10px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
body.mt-canonical-ui .m-board__split { height: 1px; margin: 2px 0; background: var(--mt-line); }
body.mt-canonical-ui .m-board__now { margin-top: 0; }
body.mt-canonical-ui .m-board .m-tiles { grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; }
body.mt-canonical-ui .m-board .m-tile { min-height: 0; justify-items: start; align-content: start; text-align: start; gap: 1px; padding: 7px 8px; }
body.mt-canonical-ui a.m-board__wait { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; color: inherit; text-decoration: none; font-weight: 750; }
body.mt-canonical-ui a.m-board__wait .m-ico { color: var(--mt-gold); }
body.mt-canonical-ui a.m-board__wait b { margin-inline-start: auto; color: var(--mt-gold); font-size: 18px; font-variant-numeric: tabular-nums; }
body.mt-canonical-ui .m-board a.m-tile,
body.mt-canonical-ui .m-board a.m-record { color: inherit; text-decoration: none; min-width: 0; }
body.mt-canonical-ui .m-board .m-tile span,
body.mt-canonical-ui .m-board .m-tile small,
body.mt-canonical-ui .m-board .m-tile strong { max-width: 100%; overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: normal; word-break: keep-all; text-align: start; }
body.mt-canonical-ui .m-board .m-tile strong { font-size: clamp(11px, 8cqi, 22px); line-height: 1.15; font-variant-numeric: tabular-nums; }
body.mt-canonical-ui .m-board .m-card { container-type: inline-size; }
body.mt-canonical-ui .m-board .m-tile small { color: var(--mt-text-secondary); font-size: 10px; font-weight: 700; line-height: 1.25; }
body.mt-canonical-ui .m-board .m-tile.is-gold strong { color: var(--mt-gold); }
body.mt-canonical-ui .m-tile.is-gold strong { color: var(--mt-gold); }
body.mt-canonical-ui .m-tile.is-long strong { font-size: 13px; line-height: 1.15; }
body.mt-canonical-ui .m-board .m-progress { height: 4px; background: color-mix(in srgb, var(--mt-text) 12%, transparent); }
body.mt-canonical-ui .m-board .m-record { min-width: 0; }
body.mt-canonical-ui .m-board .m-record strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.mt-canonical-ui .m-board .m-empty { margin: 0; padding: 4px 0 2px; }
body.mt-canonical-ui .m-board .m-tabs { gap: 4px; }
@media (max-width: 720px) {
  body.mt-canonical-ui .m-board-filters { grid-template-columns: minmax(0, 1fr); }
  body.mt-canonical-ui .m-board .m-card { padding: 6px; }
  body.mt-canonical-ui .m-board .m-card > h2 { font-size: 11px; }
}


/* Closed choice fields are a label and the chosen value.
   Search stays inside the open menu, not painted over the filter. */
body.mt-canonical-ui .m-choice-find,
body.mt-canonical-ui .m-field-tools {
    display: none !important;
}
body.mt-canonical-ui .m-menu-search {
    display: flex !important;
    align-items: center;
    gap: 8px;
}
body.mt-canonical-ui .m-menu-search > .m-input {
    clip-path: none !important;
    -webkit-clip-path: none !important;
}
body.mt-canonical-ui .m-dev-field > .m-field > button.m-select {
    padding-inline-end: 28px !important;
}

/* An input inside clip-path receives focus on iOS and then drops every key. */
body.mt-canonical-ui :is(.m-section, .m-page, .m-list, .m-hero, .m-card):has(.m-item-find) {
    clip-path: none !important;
    -webkit-clip-path: none !important;
}

/* Product face on search and opened carton lines. */
body.mt-canonical-ui .m-suggest__face {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto;
}
body.mt-canonical-ui .m-suggest__kicker {
    display: block !important;
    color: var(--mt-gold);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.mt-canonical-ui .m-suggest__face strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.mt-canonical-ui .m-suggest__face .m-face-line {
    display: inline-flex !important;
    align-items: center;
    max-width: 100%;
    white-space: nowrap;
}
body.mt-canonical-ui .m-suggest__face .m-face-name,
body.mt-canonical-ui .m-suggest__face .m-face-part,
body.mt-canonical-ui .m-suggest__face .m-size-pair {
    display: inline !important;
}
body.mt-canonical-ui .m-pack__line > .m-person__kicker {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: block !important;
    color: var(--mt-gold);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.15;
}
body.mt-canonical-ui .m-pack__line .m-face-line,
body.mt-canonical-ui .m-pack__line .m-face-name,
body.mt-canonical-ui .m-pack__line .m-face-part {
    color: var(--mt-text);
    font-size: inherit;
    font-weight: 750;
}

body.mt-canonical-ui .m-fold{display:flex;align-items:center;width:100%;min-height:52px;margin:0;padding:0 16px;border:0;border-bottom:1px solid rgba(255,255,255,.08);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}
body.mt-canonical-ui .m-fold::after{content:"";margin-inline-start:auto;width:7px;height:7px;border-inline-end:1.6px solid var(--mt-gold);border-bottom:1.6px solid var(--mt-gold);transform:translateY(-2px) rotate(45deg)}
body.mt-canonical-ui .m-fold.is-open::after{transform:translateY(2px) rotate(-135deg)}
body.mt-canonical-ui .m-fold-body[hidden]{display:none !important}
body.mt-canonical-ui .m-barcode-row{position:relative}
body.mt-canonical-ui .m-barcode-plus{position:absolute;z-index:2;top:50%;inset-inline-end:10px;transform:translateY(-50%);width:26px;height:26px;border:0;border-radius:8px;background:#c6a15b;color:#111;font-weight:700;font-size:18px;line-height:26px;padding:0}
body.mt-canonical-ui .m-barcode-row .m-input{padding-inline-end:42px}

body.mt-canonical-ui .m-progress.m-supply{overflow:visible}
body.mt-canonical-ui .m-progress.m-supply > b.m-progress__left{position:absolute;top:4px;inset-inline-end:8px;z-index:4;height:auto;width:auto;margin:0;background:none;color:var(--mt-text);font-size:10px;font-weight:650;line-height:1;opacity:.72;pointer-events:none}

body.mt-canonical-ui .m-pending {
  grid-column: 2;
  grid-row: 4;
  justify-self: end;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
  color: #e3943a;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body.mt-canonical-ui .m-pending.is-covered,
body.mt-canonical-ui .m-pending.is-covered b { color: #3dbe7a; }
body.mt-canonical-ui .m-pending b {
  color: #f0a202;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

body.mt-canonical-ui .m-board-head {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
body.mt-canonical-ui .m-board-head .m-board-field,
body.mt-canonical-ui .m-board-head .m-field-block { min-width: 0; height: 100%; }
body.mt-canonical-ui .m-board-head .m-board__wait { height: 100%; min-height: 52px; box-sizing: border-box; }
body.mt-canonical-ui .m-board__note { margin: 0; color: var(--mt-text-secondary); font-size: 11px; line-height: 1.35; }
body.mt-canonical-ui .m-board .m-card { height: 100%; }
body.mt-canonical-ui .m-board .m-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  flex: 1 1 auto;
  gap: 6px;
  margin: 0;
}
body.mt-canonical-ui .m-board .m-tile { gap: 1px; }
@media (max-width: 720px) {
  body.mt-canonical-ui .m-board-head { grid-template-columns: 1fr 1fr; }
  body.mt-canonical-ui .m-board-head .is-client { grid-column: 1; grid-row: 1; }
  body.mt-canonical-ui .m-board-head .m-board__wait { grid-column: 2; grid-row: 1; }
  body.mt-canonical-ui .m-board-head .is-brand { grid-column: 1; grid-row: 2; }
  body.mt-canonical-ui .m-board-head .is-category { grid-column: 2; grid-row: 2; }
  body.mt-canonical-ui .m-board-head:not(:has(.is-client)) .m-board__wait { grid-column: 1; grid-row: 1; }
  body.mt-canonical-ui .m-board__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.mt-canonical-ui .m-person__id:has(> .m-balance) {
  justify-content: center;
  min-height: 45px;
}
body.mt-canonical-ui .m-person__under.m-balance {
  display: block;
  margin-top: 1px;
  font-size: 15px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  letter-spacing: 0;
}

body.mt-canonical-ui .m-who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: -4px 0 2px;
  color: inherit;
  text-decoration: none;
}
body.mt-canonical-ui .m-who .m-person__avatar {
  width: 36px;
  height: 36px;
  grid-column: auto;
  grid-row: auto;
}
body.mt-canonical-ui .m-who strong {
  font-size: 16px;
  font-weight: 750;
  line-height: 1.2;
}

body.mt-canonical-ui .m-field__money {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: center;
  z-index: 2;
  color: var(--mt-gold);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .04em;
  pointer-events: none;
}
body.mt-canonical-ui .m-field:has(> .m-field__money) > .m-input {
  padding-inline-end: 58px;
}

body.mt-canonical-ui .m-rate-list{display:flex;flex-direction:column;gap:8px}
body.mt-canonical-ui .m-rate{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:28px;font-size:13px;line-height:1.3}
body.mt-canonical-ui .m-rate b{font-weight:750}
body.mt-canonical-ui .m-rate span{color:var(--mt-text-secondary,#9a9a9a)}
body.mt-canonical-ui .m-rate.is-open b{color:var(--mt-gold)}

body.mt-canonical-ui .m-side-nav,
body.mt-canonical-ui .m-side-nav.is-open {
    background: #111111;
    color: #ffffff;
}
body.mt-canonical-ui .m-side-nav a:not(.is-active),
body.mt-canonical-ui .m-side-nav a:not(.is-active) .m-ico,
body.mt-canonical-ui .m-side-nav a:not(.is-active) .m-brand-mark,
body.mt-canonical-ui .m-side-nav button.m-nav-row,
body.mt-canonical-ui .m-side-nav .m-nav-chevron,
body.mt-canonical-ui .m-side-nav.is-open a:not(.is-active),
body.mt-canonical-ui .m-side-nav.is-open a:not(.is-active) .m-ico {
    color: #ffffff !important;
}
body.mt-canonical-ui .m-side-nav .m-nav-group:not(.is-active),
body.mt-canonical-ui .m-side-nav a.m-nav-group:not(.is-active),
body.mt-canonical-ui .m-side-nav a.m-nav-group:not(.is-active) .m-ico {
    color: var(--mt-gold) !important;
}

body.mt-canonical-ui :is(a, button).m-scope__chip,
body.mt-canonical-ui :is(a, button).m-scope__chip.is-active,
body.mt-canonical-ui :is(a, button).m-scope__chip.is-active :is(span, b) {
    font-family: var(--mt-font);
    font-size: 13px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1;
    font-synthesis: none;
}

body.mt-canonical-ui .m-title-row .m-mine { flex: none; align-self: center; min-height: 32px; }
body.mt-canonical-ui .m-title-row .m-mine > a { display: grid; place-items: center; min-height: 26px; padding: 0 12px; color: var(--mt-text); font-size: 12px; font-weight: 750; line-height: 1; text-decoration: none; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); }
body.mt-canonical-ui .m-title-row .m-mine > a.is-active { background: var(--mt-gold); color: #000; }

body.mt-canonical-ui .m-back-row { background: transparent; z-index: calc(var(--mt-z-sticky) + 10); pointer-events: none; }
body.mt-canonical-ui .m-back-row > * { pointer-events: auto; }
@media (max-width: 900px) {
  body.mt-canonical-ui .m-header__search .m-suggest { top: calc(100% + 6px); z-index: 40; }
}

body.mt-canonical-ui .m-card-print { position: absolute; z-index: 2; top: 8px; inset-inline-end: 8px; width: 28px; height: 28px; display: grid; place-items: center; background: var(--mt-gold); color: #000; clip-path: var(--mt-cut-7); }
body.mt-canonical-ui .m-card-print .m-ico { width: 14px; height: 14px; color: #000; }
body.mt-canonical-ui .m-person { position: relative; }

body.mt-canonical-ui .m-board-head .m-field {
  min-height: 40px;
  padding: 3px 22px 3px 8px;
  grid-template-rows: auto auto;
}
body.mt-canonical-ui .m-board-head .m-field > :where(.m-select, button.m-select) {
  min-height: 0;
  font-size: 14px;
  line-height: 1.05;
}
body.mt-canonical-ui .m-board-head .m-board__wait {
  min-height: 40px;
}

body.mt-canonical-ui .m-title-row .m-mine {
  height: 24px;
  min-height: 24px;
  padding: 2px;
}
body.mt-canonical-ui .m-title-row .m-mine > a {
  height: 20px;
  min-height: 20px;
  padding: 0 10px;
  font-size: 12px;
}
body.mt-canonical-ui .m-account-menu .m-theme-switch:not(.m-theme-switch--text) {
  width: 56px !important;
  height: 24px !important;
  margin: 6px 8px !important;
}
body.mt-canonical-ui .m-account-menu .m-theme-switch:not(.m-theme-switch--text) .m-ico {
  width: 13px !important;
  height: 13px !important;
}
body.mt-canonical-ui .m-account-menu .m-theme-switch--text {
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  width: max-content !important;
  height: 24px !important;
  margin: 0 8px 8px !important;
  padding: 2px !important;
  gap: 2px;
  justify-self: start !important;
  background: var(--mt-surface-2) !important;
  clip-path: none !important;
}
body.mt-canonical-ui .m-account-menu .m-theme-switch--text button {
  height: 20px !important;
  min-height: 0 !important;
  padding: 0 10px !important;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  background: transparent !important;
  color: var(--mt-text) !important;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%) !important;
}
body.mt-canonical-ui .m-account-menu .m-theme-switch--text button.is-active {
  background: var(--mt-gold) !important;
  color: #000 !important;
}

body.mt-canonical-ui .m-account-menu .m-mine {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  width: max-content;
  height: 24px;
  min-height: 24px;
  margin: 6px 8px;
  padding: 2px;
  gap: 0;
  justify-self: start;
  /* One step darker than the menu, so the shape stays visible on it. */
  background: #e0e0da;
  clip-path: none;
}
html[data-theme="dark"] body.mt-canonical-ui .m-account-menu .m-mine,
body.mt-canonical-ui.mt-dark .m-account-menu .m-mine {
  background: #000000;
}
body.mt-canonical-ui .m-account-menu .m-mine > button {
  display: grid;
  place-items: center;
  height: 20px;
  min-height: 20px;
  min-width: 0;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--mt-text);
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}
body.mt-canonical-ui .m-account-menu .m-mine > button.is-active {
  background: var(--mt-gold);
  color: #000;
}
body.mt-canonical-ui .m-account-menu .m-mine > button .m-ico {
  width: 13px;
  height: 13px;
  color: currentColor;
}

body.mt-canonical-ui .m-list-summary {
  margin: 0 12px 8px;
  color: var(--mt-text-secondary);
  font-size: 12px;
  font-weight: 650;
}
body.mt-canonical-ui .m-tile.is-open {
  box-shadow: inset 0 0 0 1px var(--mt-gold);
}
body.mt-canonical-ui .m-tile-lines {
  margin: 0 8px 12px;
  padding: 0;
  list-style: none;
  background: color-mix(in srgb, var(--mt-text) 6%, var(--mt-surface));
  clip-path: var(--mt-cut-7);
}
body.mt-canonical-ui .m-tile-lines li {
  padding: 8px 12px;
  border-bottom: 1px solid var(--mt-line);
  font-size: 13px;
}
body.mt-canonical-ui .m-tile-lines li:last-child { border-bottom: 0; }

/* Canonical two-state switch. Packing mine/all, theme, and old/new all use .m-mine. */
body.mt-canonical-ui .m-segmented.m-mine,
body.mt-canonical-ui .m-title-row .m-mine,
body.mt-canonical-ui .m-account-menu .m-mine {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    width: max-content;
    height: 24px;
    min-height: 24px;
    margin: 6px 8px;
    padding: 0;
    gap: 2px;
    justify-self: start;
    background: transparent !important;
    clip-path: none !important;
    overflow: visible;
}
body.mt-canonical-ui .m-title-row .m-mine { margin: 0; }
body.mt-canonical-ui .m-segmented.m-mine > :where(a, button),
body.mt-canonical-ui .m-title-row .m-mine > :where(a, button),
body.mt-canonical-ui .m-account-menu .m-mine > :where(a, button) {
    display: grid;
    place-items: center;
    height: 24px;
    min-height: 24px;
    min-width: 0;
    padding: 0 14px;
    border: 0;
    background: #e3e1db;
    color: #111111;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
}
html[data-theme="dark"] body.mt-canonical-ui .m-segmented.m-mine > :where(a, button):not(.is-active):not([aria-selected="true"]),
html[data-theme="dark"] body.mt-canonical-ui .m-title-row .m-mine > :where(a, button):not(.is-active):not([aria-selected="true"]),
html[data-theme="dark"] body.mt-canonical-ui .m-account-menu .m-mine > :where(a, button):not(.is-active):not([aria-selected="true"]),
body.mt-canonical-ui.mt-dark .m-segmented.m-mine > :where(a, button):not(.is-active):not([aria-selected="true"]) {
    background: #3a3a3a;
    color: #f7f7f7;
}
body.mt-canonical-ui .m-segmented.m-mine > :where(a, button).is-active,
body.mt-canonical-ui .m-segmented.m-mine > :where(a, button)[aria-selected="true"],
body.mt-canonical-ui .m-title-row .m-mine > :where(a, button).is-active,
body.mt-canonical-ui .m-title-row .m-mine > :where(a, button)[aria-selected="true"],
body.mt-canonical-ui .m-account-menu .m-mine > :where(a, button).is-active,
body.mt-canonical-ui .m-account-menu .m-mine > :where(a, button)[aria-selected="true"] {
    background: var(--mt-gold);
    color: #000000;
}
body.mt-canonical-ui .m-mine > :where(a, button) .m-ico {
    width: 13px;
    height: 13px;
    color: currentColor;
}

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

/* m-mine-track: one rail, gold segment slides on the inactive track */
body.mt-canonical-ui .m-segmented.m-mine,
body.mt-canonical-ui .m-title-row .m-mine,
body.mt-canonical-ui .m-account-menu .m-mine{
  gap:0 !important;
  padding:0 !important;
  height:24px !important;
  min-height:24px !important;
  background:#e3e1db !important;
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%,0 50%) !important;
  overflow:hidden !important;
}
html[data-theme="dark"] body.mt-canonical-ui .m-segmented.m-mine,
html[data-theme="dark"] body.mt-canonical-ui .m-title-row .m-mine,
html[data-theme="dark"] body.mt-canonical-ui .m-account-menu .m-mine,
body.mt-canonical-ui.mt-dark .m-segmented.m-mine,
body.mt-canonical-ui.mt-dark .m-title-row .m-mine,
body.mt-canonical-ui.mt-dark .m-account-menu .m-mine{background:#3a3a3a !important}
body.mt-canonical-ui .m-segmented.m-mine > :where(a,button),
body.mt-canonical-ui .m-title-row .m-mine > :where(a,button),
body.mt-canonical-ui .m-account-menu .m-mine > :where(a,button){
  background:transparent !important;
  clip-path:none !important;
  color:#111 !important;
  height:24px !important;
  min-height:24px !important;
}
html[data-theme="dark"] body.mt-canonical-ui .m-segmented.m-mine > :where(a,button):not(.is-active):not([aria-selected="true"]),
html[data-theme="dark"] body.mt-canonical-ui .m-title-row .m-mine > :where(a,button):not(.is-active):not([aria-selected="true"]),
html[data-theme="dark"] body.mt-canonical-ui .m-account-menu .m-mine > :where(a,button):not(.is-active):not([aria-selected="true"]),
body.mt-canonical-ui.mt-dark .m-segmented.m-mine > :where(a,button):not(.is-active):not([aria-selected="true"]),
body.mt-canonical-ui.mt-dark .m-title-row .m-mine > :where(a,button):not(.is-active):not([aria-selected="true"]),
body.mt-canonical-ui.mt-dark .m-account-menu .m-mine > :where(a,button):not(.is-active):not([aria-selected="true"]),
body.mt-canonical-ui.mt-dark .m-segmented.m-mine > :where(a,button):not(.is-active):not([aria-selected="true"]){color:#f7f7f7 !important}
body.mt-canonical-ui .m-segmented.m-mine > :where(a,button).is-active,
body.mt-canonical-ui .m-segmented.m-mine > :where(a,button)[aria-selected="true"],
body.mt-canonical-ui .m-title-row .m-mine > :where(a,button).is-active,
body.mt-canonical-ui .m-title-row .m-mine > :where(a,button)[aria-selected="true"],
body.mt-canonical-ui .m-account-menu .m-mine > :where(a,button).is-active,
body.mt-canonical-ui .m-account-menu .m-mine > :where(a,button)[aria-selected="true"]{
  background:var(--mt-gold) !important;
  color:#000 !important;
}

body.mt-canonical-ui :where(.m-button, .m-icon-button, .m-segmented > button, .m-date-rail > button, .m-time-rail > button, .m-scope__chip).is-pressed,
body.mt-canonical-ui :where(.m-button, .m-segmented > button, .m-date-rail > button, .m-time-rail > button, .m-scope__chip):active {
    background: var(--mt-gold);
    color: #000000;
}
body.mt-canonical-ui .m-bottom-nav > a:active,
body.mt-canonical-ui .m-bottom-nav > a:active .m-ico,
body.mt-canonical-ui .m-side-nav a:active,
body.mt-canonical-ui .m-side-nav a:active .m-ico {
    color: #000000 !important;
}
body.mt-canonical-ui .m-tabs > :where(a, button):active {
    color: var(--mt-text);
    box-shadow: inset 0 -4px 0 var(--mt-gold);
}
body.mt-canonical-ui .m-toggle:active {
    background: var(--mt-gold);
}

body.mt-canonical-ui .m-section:has(#mt-filter-rail-slot) { min-width: 0; }
body.mt-canonical-ui #mt-filter-rail-slot { display: block; position: relative; z-index: 60; min-width: 0; max-width: 100%; overflow: visible; }
body.mt-canonical-ui .m-lab-cards { display: grid; gap: 8px; margin: 0; padding: 0; background: transparent; clip-path: none; }
body.mt-canonical-ui .m-lab-cards > h2 { margin: 0; font-size: 15px; }
body.mt-canonical-ui .m-lab-cards > .m-list { display: grid; gap: 8px; background: transparent; }

body.mt-canonical-ui .m-account-menu form.m-store-login .m-button{width:100% !important;max-width:none !important;margin-inline:0 !important}
body.mt-canonical-ui .m-store-login .m-button{color:#111 !important;font-size:14px !important;font-weight:750}
body.mt-canonical-ui .m-store-login .m-button--secondary{color:#f4f1ea !important;background:#3a3a3a !important}
body.mt-canonical-ui .m-store-login .m-button>span{display:inline !important;position:static !important;width:auto !important;height:auto !important;overflow:visible !important;color:inherit !important;-webkit-text-fill-color:currentColor !important;font-size:14px !important;font-weight:750;line-height:1.15;white-space:nowrap}
body.mt-canonical-ui .m-store-login .m-login-field::placeholder{color:transparent !important;-webkit-text-fill-color:transparent !important;opacity:0 !important}
body.mt-canonical-ui .m-login-hint{position:absolute;inset:0 36px;display:flex;align-items:center;justify-content:center;padding:0;pointer-events:none;color:#bdbdbd;font-size:13px;line-height:1.2;text-align:center;z-index:1}
body.mt-canonical-ui .m-login-slot--id .m-login-hint{inset:0 8px 0 28px}
body.mt-canonical-ui .m-login-field:not(:placeholder-shown)~.m-login-hint{display:none}
body.mt-canonical-ui .m-store-login .m-choice{color:#f4f1ea;font-size:13px}
body.mt-canonical-ui .m-store-login .m-banner{margin:0;padding:8px;color:#f4f1ea;background:#2a2418;font-size:13px;line-height:1.35;text-align:center}

body.mt-canonical-ui .m-otp-sink{position:absolute;left:-9999px;top:0;width:160px;height:44px;opacity:0;border:0;padding:0}
body.mt-canonical-ui .m-store-login label.m-choice>span:last-child{display:inline !important;color:#f4f1ea !important;-webkit-text-fill-color:#f4f1ea !important;font-size:13px !important;line-height:1.3;white-space:normal}
body.mt-canonical-ui .m-store-login .m-button .m-ico{width:18px;height:18px;color:currentColor;fill:currentColor;flex:none}

/* Back button: arrow side is a 16/16 point on the 32px height. The other side stays cut-7.
   Share stickers stay a full cut-7. Do not fold a.m-back into that rule. */
body.mt-canonical-ui a.m-back{
  height:32px !important;
  min-height:32px !important;
  width:max-content !important;
  max-width:100% !important;
  padding:0 12px 0 18px !important;
  clip-path:var(--mt-back) !important;
  border-radius:0 !important
}
html[dir="rtl"] body.mt-canonical-ui a.m-back{
  padding:0 18px 0 12px !important;
  clip-path:var(--mt-back-rtl) !important
}

body.mt-canonical-ui #mt-activity-rail { position: relative; z-index: 60; overflow: visible; min-width: 0; }
body.mt-canonical-ui .m-activity h2 { margin: 0 0 8px; font-size: 16px; }

/* ORDER_MATRIX_EXTENSION_V1 */
/* New layout owned by the canonical m.css. Existing m-button/m-field/m-scope remain unchanged. */
.m-matrix{--matrix-context-height:0px;min-width:0}
.m-matrix__context{position:sticky;inset-block-start:var(--matrix-sticky-top,0px);z-index:12;background:var(--mt-surface);padding-block:.5rem}
.m-matrix__context .m-scope{overflow-x:auto;flex-wrap:nowrap}
.m-matrix__context .m-person__meta{white-space:normal;overflow-wrap:anywhere}
.m-matrix__scroll{max-width:100%;overflow:auto;max-height:65vh;overscroll-behavior-inline:contain}
.m-matrix__table{border-collapse:separate;border-spacing:0;width:100%;min-width:max-content}
.m-matrix__table caption{text-align:start;padding-block:.5rem;font-weight:600}
.m-matrix__table th,.m-matrix__table td{padding:.5rem;text-align:center;background:var(--mt-surface)}
.m-matrix__table thead th{position:sticky;inset-block-start:0;z-index:3}
.m-matrix__table tr>th:first-child{position:sticky;inset-inline-start:0;z-index:2;text-align:start}
.m-matrix__table thead tr>th:first-child{z-index:4}
.m-matrix__table .m-doc-qty{width:6rem;min-height:44px;text-align:center;scroll-margin-block:6rem}
.m-matrix__table .is-active>th,.m-matrix__table th.is-active{background:var(--mt-selected-bg);color:var(--mt-text)}
.m-matrix__table td.is-active{outline:2px solid var(--mt-focus);outline-offset:-2px}
.m-matrix [aria-invalid=true]{outline:2px solid var(--mt-danger);outline-offset:-2px}
.m-matrix__image{width:48px;height:48px;object-fit:contain;vertical-align:middle;margin-inline-end:.75rem}
.m-matrix__position{display:flex;justify-content:center;gap:.65rem;align-items:center;font-size:.75rem;margin-block-end:.3rem;font-variant-numeric:tabular-nums}
.m-matrix__position>span{display:inline-flex;align-items:center;gap:.2rem}
.m-matrix__position svg{width:12px;height:12px}
.m-matrix__stock{color:var(--mt-success)}
.m-matrix__process{color:var(--mt-warning)}
.m-matrix summary{cursor:pointer;min-height:44px;line-height:2.75rem}
.m-matrix__footer{position:sticky;inset-block-end:var(--matrix-bottom-clearance,0px);z-index:13;background:var(--mt-surface);padding-block:.75rem}
.m-matrix .m-doc-line__name{overflow-wrap:anywhere}
@media(max-width:767px) and (orientation:portrait){.m-matrix{--matrix-bottom-clearance:calc(var(--mt-bottom-nav-h) + env(safe-area-inset-bottom,0px));padding-block-end:var(--matrix-bottom-clearance)}}

/* Scoped skin. Inherit the existing application's font. No font files bundled. */
.mt-sku-guide{--sku-bg:var(--surface,#111);--sku-panel:var(--surface-raised,#242424);--sku-fg:var(--text-primary,#f5f5f5);--sku-muted:var(--text-secondary,#c8c8c8);--sku-gold:var(--brand-gold,#c79a32);--sku-line:var(--border-color,#666);--sku-cut:7px;background:var(--sku-bg);color:var(--sku-fg);font:inherit;line-height:1.6;max-width:100%;padding:clamp(12px,2.5vw,28px);box-sizing:border-box}
.mt-sku-guide *{box-sizing:border-box}
.mt-sku-guide :is(button,input,select){font:inherit;border-radius:0;min-height:44px}
.mt-sku-guide :is(button,input,select,a):focus-visible,.mt-sku-guide h3:focus{outline:3px solid var(--sku-gold);outline-offset:4px}
.mt-sku-guide button{position:relative;isolation:isolate;border:0;background:transparent;color:var(--sku-fg);padding:10px 16px;cursor:pointer;text-align:inherit;overflow-wrap:anywhere}
.mt-sku-guide button::before,.mt-sku-card::before{content:"";position:absolute;inset:0;background:var(--sku-panel);z-index:-1;clip-path:polygon(var(--sku-cut) 0,calc(100% - var(--sku-cut)) 0,100% var(--sku-cut),100% calc(100% - var(--sku-cut)),calc(100% - var(--sku-cut)) 100%,var(--sku-cut) 100%,0 calc(100% - var(--sku-cut)),0 var(--sku-cut))}
.mt-sku-guide button:is([aria-pressed=true],[aria-current=true]){color:#111;font-weight:700}
.mt-sku-guide button:is([aria-pressed=true],[aria-current=true])::before{background:var(--sku-gold)}
.mt-sku-guide button:disabled{opacity:.5;cursor:default}
.mt-sku-guide button:hover:not(:disabled){text-decoration:underline;text-underline-offset:4px}
.mt-sku-guide :is(input,select){width:100%;min-width:0;border:1px solid var(--sku-line);background:var(--sku-bg);color:var(--sku-fg);padding:8px 12px}
.mt-sku-guide label{display:block;margin-block-end:6px;font-weight:700}
.mt-sku-header,.mt-sku-controls,.mt-sku-input-row{display:flex;gap:16px;justify-content:space-between;align-items:start;flex-wrap:wrap}
.mt-sku-header{border-block-end:1px solid var(--sku-line);padding-block-end:16px;margin-block-end:20px}
.mt-sku-header h2{margin:0;font-size:clamp(1.6rem,3vw,2.4rem)}
.mt-sku-header p{margin:0;color:var(--sku-muted)}
.mt-sku-header .mt-sku-brand{color:var(--sku-gold);font-weight:700;letter-spacing:.1em}
.mt-sku-languages{display:flex;gap:8px;flex-wrap:wrap}
.mt-sku-controls>div{flex:1 1 240px;min-width:0}
.mt-sku-layout{display:grid;grid-template-columns:minmax(180px,240px) minmax(0,1fr);gap:24px}
.mt-sku-layout nav{min-width:0}
.mt-sku-layout nav ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mt-sku-layout nav button{width:100%}
.mt-sku-layout article{min-width:0}
.mt-sku-layout h3{font-size:1.65rem;margin-block:0 12px;scroll-margin-block-start:24px}
.mt-sku-card{position:relative;isolation:isolate;background:transparent;margin:16px 0;padding:20px;min-width:0}
.mt-sku-note{color:var(--sku-muted)}
.mt-sku-guide code,.mt-sku-guide bdi[dir=ltr]{direction:ltr;unicode-bidi:isolate;font-family:var(--font-mono,ui-monospace,monospace)}
.mt-sku-full-code{display:block;text-align:start;font-size:1.25rem;font-weight:700;overflow-wrap:anywhere;margin-block:10px}
.mt-sku-badge{font-size:.82rem;font-weight:700;color:var(--sku-gold)}
.mt-sku-historical{color:var(--sku-fg);border-block-end:2px dashed var(--sku-gold)}
.mt-sku-segments{display:flex;flex-wrap:wrap;list-style:none;gap:10px;margin:16px 0;padding:0;direction:ltr}
.mt-sku-segments li{display:grid;align-content:start;text-align:center;gap:4px;flex:0 1 120px;min-width:48px;overflow-wrap:anywhere}
.mt-sku-segments code{display:block;padding:8px;color:var(--sku-gold);border:1px solid var(--sku-line)}
.mt-sku-segments span{font-size:.85rem;color:var(--sku-muted)}
.mt-sku-guide small{color:var(--sku-muted)}
.mt-sku-table-wrap{max-width:100%;margin-block:16px}
.mt-sku-guide table{width:100%;border-collapse:collapse;table-layout:fixed}
.mt-sku-guide th,.mt-sku-guide td{padding:12px;overflow-wrap:anywhere;text-align:start;vertical-align:top;border-block-end:1px solid var(--sku-line)}
.mt-sku-guide thead{background:var(--sku-panel)}
.mt-sku-guide th:first-child{width:32%}
.mt-sku-pagination{display:flex;gap:8px;flex-wrap:wrap;margin-block:24px}
.mt-sku-input-row input{flex:1 1 240px}
.mt-sku-input-row button{flex:0 1 auto}
.mt-sku-guide a{color:var(--sku-gold);text-underline-offset:3px}
@media(max-width:720px){.mt-sku-layout{grid-template-columns:minmax(0,1fr)}.mt-sku-layout nav ul{grid-template-columns:repeat(2,minmax(0,1fr))}.mt-sku-layout nav button{height:100%;font-size:.85rem;padding:10px}.mt-sku-card{padding:16px}.mt-sku-guide th,.mt-sku-guide td{padding:8px}.mt-sku-languages{width:100%}}
@media(prefers-reduced-motion:reduce){.mt-sku-guide *{scroll-behavior:auto}}
@media(forced-colors:active){.mt-sku-guide button,.mt-sku-card{border:1px solid CanvasText}.mt-sku-guide button[aria-current=true]{border:3px solid Highlight}}

.mt-product-engine .mt-sku-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.mt-product-engine label{display:block;margin-block:12px}.mt-product-engine .m-input{width:100%}.mt-product-engine .mt-sku-table{overflow:auto}.mt-product-engine .m-button-row{display:flex;gap:8px;flex-wrap:wrap}.mt-product-engine [dir="ltr"]{unicode-bidi:isolate}.mt-product-engine pre{white-space:pre-wrap;overflow-wrap:anywhere}

body.mt-canonical-ui .is-returned{outline:2px solid var(--mt-gold);outline-offset:-2px}

body.mt-canonical-ui .m-board > .m-segmented { width: 100%; }
body.mt-canonical-ui .m-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
  background: transparent;
}
body.mt-canonical-ui .m-overview__tile {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  padding: 8px 6px;
  background: var(--mt-surface-2);
  color: var(--mt-text);
  clip-path: var(--mt-cut-7);
  box-shadow: none;
}
html[data-theme="dark"] body.mt-canonical-ui .m-overview__tile { background: #3a3a3a; }
html[data-theme="light"] body.mt-canonical-ui .m-overview__tile { background: #e3e1db; }
body.mt-canonical-ui .m-overview__tile h2 {
  margin: 0 0 6px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 750;
}
body.mt-canonical-ui .m-overview__metrics {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}
body.mt-canonical-ui a.m-overview__metric {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  background: transparent;
}
body.mt-canonical-ui .m-overview__metric span {
  color: var(--mt-text-secondary);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}
body.mt-canonical-ui .m-overview__metric strong {
  font-size: clamp(8px, 11cqi, 18px);
  line-height: 1.15;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.mt-canonical-ui .m-overview__metric small {
  color: var(--mt-text-secondary);
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
}
body.mt-canonical-ui .m-pending { display: grid; gap: 2px; }
body.mt-canonical-ui .m-pending h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 14px;
}
body.mt-canonical-ui .m-pending h2 b,
body.mt-canonical-ui a.m-pending__row b {
  margin-inline-start: auto;
  color: var(--mt-gold);
  font-variant-numeric: tabular-nums;
}
body.mt-canonical-ui a.m-pending__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
}

/* Force header search input readable in light mode */
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 {
    color: #f7f7f7 !important;
    -webkit-text-fill-color: #f7f7f7 !important;
    caret-color: #f7f7f7 !important;
    color-scheme: dark !important;
}
body.mt-canonical-ui .m-header .m-search :where(.m-input, .m-search__input)::placeholder {
    color: #b9b9b5 !important;
    -webkit-text-fill-color: #b9b9b5 !important;
}

/* Force readable text in header search even in light mode */
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 {
    color: #f7f7f7 !important;
    -webkit-text-fill-color: #f7f7f7 !important;
    caret-color: #f7f7f7 !important;
    color-scheme: dark !important;
}


/* header search always readable */
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 {
    color: #f7f7f7 !important;
    -webkit-text-fill-color: #f7f7f7 !important;
    caret-color: #f7f7f7 !important;
    color-scheme: dark !important;
}


/* Shell always dark, regardless of theme */
html[data-theme="light"] body.mt-canonical-ui .m-header,
html[data-theme="light"] body.mt-canonical-ui .m-bottom-nav,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu,
html[data-theme="light"] body.mt-canonical-ui .m-more-menu,
html[data-theme="light"] body.mt-canonical-ui .m-side-menu,
body.mt-canonical-ui .m-header,
body.mt-canonical-ui .m-bottom-nav {
    background: #000000 !important;
    color: #c49a36 !important;
    color-scheme: dark !important;
}
body.mt-canonical-ui .m-header .m-search :where(.m-input, .m-search__input),
body.mt-canonical-ui .m-header .m-field {
    background: #131313 !important;
    color: #f7f7f7 !important;
    -webkit-text-fill-color: #f7f7f7 !important;
    caret-color: #f7f7f7 !important;
    color-scheme: dark !important;
}

/* Shell always dark, regardless of theme */
body.mt-canonical-ui .m-header,
body.mt-canonical-ui .m-bottom-nav,
body.mt-canonical-ui .m-side-nav,
body.mt-canonical-ui .m-account-menu,
body.mt-canonical-ui .m-add-menu,
html[data-theme="light"] body.mt-canonical-ui .m-header,
html[data-theme="light"] body.mt-canonical-ui .m-bottom-nav,
html[data-theme="light"] body.mt-canonical-ui .m-side-nav,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu,
html[data-theme="light"] body.mt-canonical-ui .m-add-menu {
    background: #000000 !important;
    color: var(--mt-gold) !important;
}
body.mt-canonical-ui .m-header .m-search :where(.m-input, .m-search__input),
html[data-theme="light"] body.mt-canonical-ui .m-header .m-search :where(.m-input, .m-search__input) {
    background: #131313 !important;
    color: #f7f7f7 !important;
    -webkit-text-fill-color: #f7f7f7 !important;
    caret-color: #f7f7f7 !important;
    color-scheme: dark !important;
}


/* Force shell (header, bottom nav, menus) always dark */
body.mt-canonical-ui .m-header,
body.mt-canonical-ui .m-bottom-nav,
body.mt-canonical-ui .m-account-menu,
body.mt-canonical-ui .m-notification-center,
body.mt-canonical-ui .m-drawer,
html[data-theme="light"] body.mt-canonical-ui .m-header,
html[data-theme="light"] body.mt-canonical-ui .m-bottom-nav {
    background: #000000 !important;
    color: #f7f7f7 !important;
}
body.mt-canonical-ui .m-header .m-search :where(.m-input, .m-search__input) {
    background: #131313 !important;
    color: #f7f7f7 !important;
    -webkit-text-fill-color: #f7f7f7 !important;
    color-scheme: dark !important;
}

/* shell always dark regardless of theme */
html[data-theme="light"] body.mt-canonical-ui .m-header,
html[data-theme="light"] body.mt-canonical-ui .m-bottom-nav,
html[data-theme="light"] body.mt-canonical-ui .m-side-nav,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu,
html[data-theme="light"] body.mt-canonical-ui .m-more-menu,
html[data-theme="light"] body.mt-canonical-ui .m-notification-center {
    background: #000000 !important;
    color: var(--mt-gold) !important;
}
html[data-theme="light"] body.mt-canonical-ui .m-header .m-search :where(.m-input, .m-search__input),
html[data-theme="light"] body.mt-canonical-ui .m-header .m-header__scope .m-select {
    background: linear-gradient(#131313, #131313) padding-box, linear-gradient(#454545, #454545) border-box !important;
    color: #f7f7f7 !important;
    -webkit-text-fill-color: #f7f7f7 !important;
    caret-color: #f7f7f7 !important;
    color-scheme: dark !important;
}

/* No frame on list cards — only the progress bar is the loading indicator */
body.mt-canonical-ui .m-list .m-person,
body.mt-canonical-ui .m-list .m-card,
body.mt-canonical-ui .m-person.is-loading,
body.mt-canonical-ui .m-card.is-loading {
    
    background: var(--mt-surface) !important;
    box-shadow: none !important;
}
/* Logo / brand click feedback — small scale instead of bar */
body.mt-canonical-ui .m-header__brand:active,
body.mt-canonical-ui .m-person__avatar:active {
    transform: scale(0.92);
    transition: transform 0.1s ease;
}

/* Better press indicator for logo/avatar — small scale + opacity instead of bar */
body.mt-canonical-ui .m-person__avatar:active,
body.mt-canonical-ui .m-person.is-loading .m-person__avatar {
    transform: scale(0.92);
    opacity: 0.75;
    transition: transform 0.12s ease, opacity 0.12s ease;
}
body.mt-canonical-ui .m-person.is-loading .m-progress {
    /* Keep the bar as the only loading indicator */
    opacity: 1;
}

/* Force no frame/border on cards at all times, including loading and return */
body.mt-canonical-ui .m-person,
body.mt-canonical-ui .m-person.is-loading,
body.mt-canonical-ui .m-person.is-picked,
body.mt-canonical-ui .m-person.is-selected,
body.mt-canonical-ui .m-person.is-expanded,
body.mt-canonical-ui .m-list .m-person {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Logo click indicator: small scale + slight opacity, no bar */
body.mt-canonical-ui .m-person__avatar:active,
body.mt-canonical-ui .m-header__brand:active {
    transform: scale(0.88);
    opacity: 0.7;
    transition: transform 0.08s ease, opacity 0.08s ease;
}

/* no card frame v2 — absolute */
body.mt-canonical-ui .m-list article,
body.mt-canonical-ui .m-list .m-person,
body.mt-canonical-ui .m-list .m-card,
body.mt-canonical-ui .m-person,
body.mt-canonical-ui .m-person.is-picked,
body.mt-canonical-ui .m-person.is-loading,
body.mt-canonical-ui .m-person.is-selected,
body.mt-canonical-ui .m-person.is-expanded,
body.mt-canonical-ui a.m-person,
body.mt-canonical-ui .m-list > a {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
/* Logo press: small scale only, no bar */
body.mt-canonical-ui .m-header__brand:active,
body.mt-canonical-ui .m-person__avatar:active,
body.mt-canonical-ui .m-header .m-brand-mark:active {
    transform: scale(0.85) !important;
    opacity: 0.7 !important;
    transition: transform 0.08s ease, opacity 0.08s ease !important;
}

/* Force entire shell + account menu + filters always dark */
html[data-theme="light"] body.mt-canonical-ui .m-header,
html[data-theme="light"] body.mt-canonical-ui .m-bottom-nav,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu,
html[data-theme="light"] body.mt-canonical-ui .m-account,
html[data-theme="light"] body.mt-canonical-ui .m-more-menu,
html[data-theme="light"] body.mt-canonical-ui .m-side-menu,
html[data-theme="light"] body.mt-canonical-ui .m-filters,
html[data-theme="light"] body.mt-canonical-ui .m-header .m-search,
html[data-theme="light"] body.mt-canonical-ui .m-header .m-field,
html[data-theme="light"] body.mt-canonical-ui .m-account .m-field,
html[data-theme="light"] body.mt-canonical-ui .m-account .m-select,
html[data-theme="light"] body.mt-canonical-ui .m-account .m-input {
    background: #000000 !important;
    color: #f7f7f7 !important;
    color-scheme: dark !important;
    -webkit-text-fill-color: #f7f7f7 !important;
}
html[data-theme="light"] body.mt-canonical-ui .m-account .m-select,
html[data-theme="light"] body.mt-canonical-ui .m-account .m-field {
    background: #131313 !important;
    border-color: #333 !important;
}

/* Force entire shell to stay dark in all themes */
html[data-theme="light"] body.mt-canonical-ui .m-header,
html[data-theme="light"] body.mt-canonical-ui .m-bottom-nav,
html[data-theme="light"] body.mt-canonical-ui .m-side-nav,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu,
html[data-theme="light"] body.mt-canonical-ui .m-add-menu,
html[data-theme="light"] body.mt-canonical-ui .m-filters,
html[data-theme="light"] body.mt-canonical-ui .m-search,
html[data-theme="light"] body.mt-canonical-ui .m-header .m-input,
html[data-theme="light"] body.mt-canonical-ui .m-header .m-select,
html[data-theme="light"] body.mt-canonical-ui .m-header .m-search__input {
    background: #000000 !important;
    color: var(--mt-gold) !important;
    border-color: #222 !important;
}
html[data-theme="light"] body.mt-canonical-ui .m-header .m-search :where(.m-input, .m-search__input) {
    background: #131313 !important;
    color: #f7f7f7 !important;
    -webkit-text-fill-color: #f7f7f7 !important;
    caret-color: #f7f7f7 !important;
    color-scheme: dark !important;
}

/* Force entire shell always dark in light mode */
html[data-theme="light"] body.mt-canonical-ui .m-header,
html[data-theme="light"] body.mt-canonical-ui .m-bottom-nav,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu,
html[data-theme="light"] body.mt-canonical-ui .m-notification-center,
html[data-theme="light"] body.mt-canonical-ui .m-drawer,
html[data-theme="light"] body.mt-canonical-ui .m-header .m-search,
html[data-theme="light"] body.mt-canonical-ui .m-header .m-field,
html[data-theme="light"] body.mt-canonical-ui .m-header .m-select,
html[data-theme="light"] body.mt-canonical-ui .m-header .m-input {
    background: #000000 !important;
    color: #f7f7f7 !important;
}
html[data-theme="light"] body.mt-canonical-ui .m-header .m-input,
html[data-theme="light"] body.mt-canonical-ui .m-header .m-select,
html[data-theme="light"] body.mt-canonical-ui .m-header .m-search__input {
    background: #131313 !important;
    color: #f7f7f7 !important;
    -webkit-text-fill-color: #f7f7f7 !important;
    color-scheme: dark !important;
}

/* shell always dark v3 — no exceptions */
html[data-theme="light"] body.mt-canonical-ui .m-header,
html[data-theme="light"] body.mt-canonical-ui .m-bottom-nav,
html[data-theme="light"] body.mt-canonical-ui .m-side-nav,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu,
html[data-theme="light"] body.mt-canonical-ui .m-more-menu,
html[data-theme="light"] body.mt-canonical-ui .m-notification-center,
html[data-theme="light"] body.mt-canonical-ui .m-filter-rail,
html[data-theme="light"] body.mt-canonical-ui .m-header__scope,
html[data-theme="light"] body.mt-canonical-ui .m-header .m-search,
html[data-theme="light"] body.mt-canonical-ui .m-header .m-select,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu .m-select,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu .m-field {
    background: #000000 !important;
    color: var(--mt-gold) !important;
    border-color: #454545 !important;
}
html[data-theme="light"] body.mt-canonical-ui .m-header .m-search :where(.m-input, .m-search__input),
html[data-theme="light"] body.mt-canonical-ui .m-header .m-header__scope .m-select,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu .m-select,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu .m-field,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu .m-input {
    background: linear-gradient(#131313, #131313) padding-box, linear-gradient(#454545, #454545) border-box !important;
    color: #f7f7f7 !important;
    -webkit-text-fill-color: #f7f7f7 !important;
    caret-color: #f7f7f7 !important;
    color-scheme: dark !important;
}

/* Account menu layout adjustments */
body.mt-canonical-ui .m-account-menu .m-theme-toggle,
body.mt-canonical-ui .m-account-menu [data-old-new] {
    /* Place New/Old on the same line as theme toggle, right side */
}
body.mt-canonical-ui .m-account-menu .m-notifications {
    /* Place bell on the same line as the name */
    position: absolute;
    top: 12px;
    right: 14px;
}

/* Account menu always exactly dark */
html[data-theme="light"] body.mt-canonical-ui .m-account-menu,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu * {
    background: #000000 !important;
    color: #f7f7f7 !important;
    color-scheme: dark !important;
    -webkit-text-fill-color: #f7f7f7 !important;
}
html[data-theme="light"] body.mt-canonical-ui .m-account-menu .m-field,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu .m-select,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu .m-input,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu .m-segmented {
    background: #131313 !important;
    color: #f7f7f7 !important;
    border-color: #333 !important;
}
/* Position New/Old above language, aligned with theme toggle */
.m-account-menu .m-segmented.m-mine:last-of-type {
    order: -1;
}

/* Force account menu 1:1 dark in all themes */
html[data-theme="light"] body.mt-canonical-ui .m-account-menu,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu * {
    background-color: #000000 !important;
    color: #f7f7f7 !important;
    border-color: #222 !important;
}
html[data-theme="light"] body.mt-canonical-ui .m-account-menu .m-select,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu select,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu .m-input {
    background: #131313 !important;
    color: #f7f7f7 !important;
    -webkit-text-fill-color: #f7f7f7 !important;
    color-scheme: dark !important;
}

/* Position New/Old button above language, parallel to theme toggle */
body.mt-canonical-ui .m-account-menu .m-old-new,
body.mt-canonical-ui .m-account-menu [data-role="old-new"],
body.mt-canonical-ui .m-account-menu button:has(span:contains("ישן")),
body.mt-canonical-ui .m-account-menu button:has(span:contains("חדש")) {
    position: absolute !important;
    top: 48px !important;
    right: 14px !important;
    z-index: 10 !important;
}

/* Account menu always identical to dark mode */
html[data-theme="light"] body.mt-canonical-ui .m-account-menu,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu * {
    background: #000000 !important;
    color: #f7f7f7 !important;
    border-color: #2a2a2a !important;
}
html[data-theme="light"] body.mt-canonical-ui .m-account-menu .m-field,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu .m-select,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu .m-input {
    background: #131313 !important;
    color: #f7f7f7 !important;
    -webkit-text-fill-color: #f7f7f7 !important;
}

/* Position New/Old next to theme toggle */
.m-account-menu .m-segmented.m-mine:first-of-type,
.m-account-menu .m-segmented.m-mine:nth-of-type(2) {
    display: inline-flex;
    margin: 4px 0;
}
.m-account-menu {
    display: flex;
    flex-direction: column;
}
.m-account-menu .m-account-summary { order: 1; }
.m-account-menu .m-segmented:first-of-type { order: 2; } /* theme */
.m-account-menu .m-segmented:last-of-type { order: 2; } /* new/old next to theme */
.m-account-menu [data-layer="account:language"] { order: 3; }

/* account menu row — theme + interface side by side */
body.mt-canonical-ui .m-account-menu .m-segmented.m-mine {
    display: inline-flex !important;
}
body.mt-canonical-ui .m-account-menu > div:has(.m-segmented) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
/* Force account menu always dark */
html[data-theme="light"] body.mt-canonical-ui .m-account-menu,
html[data-theme="light"] body.mt-canonical-ui .m-account-menu * {
    background-color: #000 !important;
    color: #f7f7f7 !important;
}
html[data-theme="light"] body.mt-canonical-ui .m-account-menu .m-segmented button.is-active {
    background: var(--mt-gold) !important;
    color: #000 !important;
}
.m-account-menu { display: flex; flex-direction: column; }
.m-account-menu .m-account-summary { order: 1; }
.m-account-menu .m-segmented:first-of-type { order: 3; }
.m-account-menu .m-segmented:last-of-type { order: 3; }
.m-account-menu [data-layer="account:language"] { order: 4; }
html[data-theme="light"] .m-account-menu,
html[data-theme="light"] .m-account-menu * { background:#000 !important; color:#f7f7f7 !important; color-scheme:dark !important; }

/* desktop nav density — tighter spacing, bolder section headers */
body.mt-canonical-ui .m-side-nav a {
    min-height: 28px !important;
    padding: 0 8px !important;
    font-size: 1.1em;
}
body.mt-canonical-ui .m-nav-group {
    padding: 10px 8px 2px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    color: var(--mt-gold) !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 2px;
}
body.mt-canonical-ui .m-side-nav a.is-child {
    padding-inline-start: 24px !important;
}
body.mt-canonical-ui .m-side-nav a.is-nested {
    padding-inline-start: 40px !important;
}

/* account menu force order */
body.mt-canonical-ui .m-account-menu {
    display: flex !important;
    flex-direction: column !important;
}
body.mt-canonical-ui .m-account-menu .m-account-summary { order: 1 !important; }
body.mt-canonical-ui .m-account-menu .m-segmented.m-mine { order: 2 !important; }
body.mt-canonical-ui .m-account-menu [aria-label="Language"],
body.mt-canonical-ui .m-account-menu .m-account-menu__language { order: 3 !important; }
body.mt-canonical-ui .m-account-menu .m-account-qr { order: 4 !important; }
body.mt-canonical-ui .m-account-menu form.m-clock,
body.mt-canonical-ui .m-account-menu .m-clock { order: 5 !important; }
body.mt-canonical-ui .m-account-menu form[action*="logout"] { order: 6 !important; }

/* account menu final layout */
body.mt-canonical-ui .m-account-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
/* theme + old/new on same row above language */
body.mt-canonical-ui .m-account-menu .m-segmented.m-mine {
    display: inline-flex !important;
    max-height: 36px !important;
    font-size: 13px !important;
}
body.mt-canonical-ui .m-account-menu .m-segmented.m-mine:first-of-type {
    margin-right: auto;
}
body.mt-canonical-ui .m-account-menu .m-segmented.m-mine:last-of-type {
    margin-left: auto;
}
/* clock and sign out smaller, centered, stacked */
body.mt-canonical-ui .m-account-menu form.m-clock,
body.mt-canonical-ui .m-account-menu .m-clock,
body.mt-canonical-ui .m-account-menu form[action*="logout"] {
    max-height: 36px !important;
    width: fit-content !important;
    margin: 4px auto !important;
    font-size: 13px !important;
    padding: 0 12px !important;
}
body.mt-canonical-ui .m-account-menu .m-button {
    min-height: 32px !important;
    max-height: 36px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
}

/* account menu clock bottom + button padding */
body.mt-canonical-ui .m-account-menu .m-clock,
body.mt-canonical-ui .m-account-menu form.m-clock {
    order: 10 !important;
    margin-top: auto !important;
}
body.mt-canonical-ui .m-account-menu form[action*="logout"] {
    order: 11 !important;
}
body.mt-canonical-ui .m-account-menu .m-button,
body.mt-canonical-ui .m-account-menu .m-clock,
body.mt-canonical-ui .m-account-menu form.m-clock button {
    padding: 0 16px !important;
    max-height: 36px !important;
}

/* account menu final fix */
body.mt-canonical-ui .m-account-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
body.mt-canonical-ui .m-account-menu .m-account-summary { order: 1 !important; }
body.mt-canonical-ui .m-account-menu .m-segmented.m-mine { order: 2 !important; }
body.mt-canonical-ui .m-account-menu [aria-label="Language"],
body.mt-canonical-ui .m-account-menu .m-field { order: 3 !important; }
body.mt-canonical-ui .m-account-menu .m-account-qr { order: 4 !important; }
body.mt-canonical-ui .m-account-menu .m-clock,
body.mt-canonical-ui .m-account-menu form.m-clock { order: 10 !important; margin-top: 8px !important; }
body.mt-canonical-ui .m-account-menu form[action*="logout"] { order: 11 !important; }
/* toggles on same row, aligned to language field edges */
body.mt-canonical-ui .m-account-menu .m-segmented.m-mine {
    display: inline-flex !important;
    max-width: 48% !important;
}
body.mt-canonical-ui .m-account-menu .m-segmented.m-mine:nth-of-type(1) { margin-right: auto !important; }
body.mt-canonical-ui .m-account-menu .m-segmented.m-mine:nth-of-type(2) { margin-left: auto !important; }



/* communications page only */
body.mt-canonical-ui .m-list:has(.m-page-title) {
    max-width: 100%;
    overflow-x: hidden;
}
body.mt-canonical-ui .m-list:has(.m-page-title) .m-tile {
    max-width: 100%;
    overflow: hidden;
    word-break: break-word;
}
body.mt-canonical-ui .m-list:has(.m-page-title) .m-tile form,
body.mt-canonical-ui .m-list:has(.m-page-title) .m-tile label,
body.mt-canonical-ui .m-list:has(.m-page-title) .m-tile input,
body.mt-canonical-ui .m-list:has(.m-page-title) .m-tile button {
    max-width: 100%;
    box-sizing: border-box;
}
@media (max-width: 640px) {
    body.mt-canonical-ui .m-list:has(.m-page-title) {
        padding: 8px;
    }
}