/* ==========================================================================
   TURKSENSE member portal — dark instrument interface
   The --ref-* palette is fixed; every other surface token is a tint of it.
   Rose means "live / active / focused" and is used nowhere else.
   ========================================================================== */

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/static/vendor/fonts/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("/static/vendor/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "JetBrains Mono Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 800;
    src: url("/static/vendor/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "JetBrains Mono Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 800;
    src: url("/static/vendor/fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    /* Fixed brand palette */
    --ref-bg: #111213;
    --ref-cream: #f4f2ee;
    --ref-muted: #a9abad;
    --ref-line: #838486;
    --ref-hairline: #2b2c2d;
    --ref-pink: #bc7675;
    --ref-danger: #d58b8a;

    /* Surfaces: bg tinted toward cream (panels) or toward black (inset fields) */
    --ts-panel-top: #171819;
    --ts-panel-bottom: #141516;
    --ts-raised: #1d1e1f;
    --ts-inset: #0d0e0f;
    --ts-border: rgba(244, 242, 238, .075);
    --ts-border-strong: rgba(244, 242, 238, .13);
    --ts-rose-line: rgba(188, 118, 117, .55);
    --ts-rose-soft: rgba(188, 118, 117, .15);
    --ts-rose-wash: rgba(188, 118, 117, .07);
    --ts-danger-line: rgba(213, 139, 138, .32);
    --ts-danger-wash: rgba(213, 139, 138, .07);

    --font-sans: "Inter Variable", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono Variable", "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

    --motion-fast: 150ms;
    --motion-control: 180ms;
    --motion-panel: 280ms;
    --motion-brand: 560ms;
    --motion-ease: cubic-bezier(.22,.68,.18,1);

    /* Radius follows hierarchy: surface > control > field */
    --radius-field: 4px;
    --radius-control: 7px;
    --radius-surface: 10px;

    --layout-max: 1180px;
    --shell-h: 60px;
    --gutter: clamp(16px, 3vw, 40px);
    --gap: 14px;

    --ico-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
    --ico-account: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='5'/%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3C/svg%3E");
    --ico-invitations: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E");
    --ico-support: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m4.93 4.93 4.24 4.24'/%3E%3Cpath d='m14.83 9.17 4.24-4.24'/%3E%3Cpath d='m14.83 14.83 4.24 4.24'/%3E%3Cpath d='m9.17 14.83-4.24 4.24'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
    --ico-staff: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Stable gutter: switching between short and long pages must not shift the layout sideways. */
html { background: var(--ref-bg); color-scheme: dark; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
html, body { margin: 0; min-width: 100%; min-height: 100%; }
body {
    position: relative;
    isolation: isolate;
    min-height: 100dvh;
    overflow-x: hidden;
    background: var(--ref-bg);
    color: var(--ref-cream);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* Dot matrix, strongest under the header and fading toward the fold. */
body::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle at 1px 1px, rgba(244, 242, 238, .085) 1px, transparent 1.5px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 110% 80% at 50% 0%, #000 25%, rgba(0, 0, 0, .35) 60%, transparent 92%);
    mask-image: radial-gradient(ellipse 110% 80% at 50% 0%, #000 25%, rgba(0, 0, 0, .35) 60%, transparent 92%);
}
/* A single, faint rose light above the fold. */
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    top: -380px;
    left: 50%;
    width: 1500px;
    height: 720px;
    margin-left: -750px;
    pointer-events: none;
    background: radial-gradient(closest-side, rgba(188, 118, 117, .16), rgba(188, 118, 117, .045) 55%, transparent 100%);
}
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:not(:disabled), a { cursor: pointer; }
button:disabled { cursor: default; opacity: .4; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
:focus-visible { outline: 2px solid rgba(188, 118, 117, .75); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; }
::selection { background: rgba(188, 118, 117, .4); color: var(--ref-cream); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: #34363a padding-box; }
::-webkit-scrollbar-thumb:hover { background: #45474b padding-box; }
.hidden, [hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.ico { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */
:is(.uhd-section, .account-card, .invite-metrics > div, .support-queue, .support-thread, .staff-gate, .staff-reauth,
    .staff-metrics > article, .staff-attention, .staff-dossier, .staff-table-wrap, .staff-filter-row, .staff-create-row,
    .staff-audit-toolbar, .home-module, .home-readout, .home-shortcuts) {
    position: relative;
    border: 1px solid var(--ts-border);
    border-radius: var(--radius-surface);
    background: linear-gradient(180deg, var(--ts-panel-top), var(--ts-panel-bottom));
    box-shadow: inset 0 1px 0 rgba(244, 242, 238, .035);
}
/* Rose top edge: always on for primary instruments, on focus-within for working panels. */
:is(.uhd-section, .account-card, .support-thread, .staff-dossier, .home-module, .staff-gate, .staff-reauth, .uhd-modal-panel, .auth-card)::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 14%;
    right: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ref-pink), transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-panel) var(--motion-ease);
}
:is(.uhd-section, .account-card, .support-thread, .staff-dossier):focus-within::before,
:is(.home-module, .staff-gate, .staff-reauth, .uhd-modal-panel, .auth-card)::before { opacity: 1; }

/* --------------------------------------------------------------------------
   Status language: LEDs, pills, badges
   -------------------------------------------------------------------------- */
.led { display: inline-block; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--ref-line); }
.ts-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid var(--ts-border-strong);
    border-radius: var(--radius-field);
    background: rgba(244, 242, 238, .025);
    color: var(--ref-muted);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 1.2;
    white-space: nowrap;
}
.ts-pill.is-live { border-color: rgba(188, 118, 117, .4); background: var(--ts-rose-wash); color: var(--ref-cream); }
.ts-pill.is-live .led { background: var(--ref-pink); box-shadow: 0 0 0 3px rgba(188, 118, 117, .16), 0 0 10px rgba(188, 118, 117, .65); animation: led-pulse 2.8s ease-in-out infinite; }
.ts-pill.is-ok { color: var(--ref-cream); }
.ts-pill.is-ok .led { background: var(--ref-cream); box-shadow: 0 0 6px rgba(244, 242, 238, .35); }
.ts-pill.is-muted .led { background: transparent; box-shadow: inset 0 0 0 1px var(--ref-line); }
.ts-pill.is-danger { border-color: var(--ts-danger-line); background: var(--ts-danger-wash); color: var(--ref-danger); }
.ts-pill.is-danger .led { background: var(--ref-danger); }

.badge,
.uhd-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 26px;
    padding: 3px 9px;
    border: 1px solid var(--ts-border-strong);
    border-radius: var(--radius-field);
    color: var(--ref-muted);
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
}
#staff-session-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ref-line); }
#staff-session-state.status-ok { border-color: rgba(188, 118, 117, .4); background: var(--ts-rose-wash); color: var(--ref-cream); }
#staff-session-state.status-ok::before { background: var(--ref-pink); box-shadow: 0 0 8px rgba(188, 118, 117, .65); animation: led-pulse 2.8s ease-in-out infinite; }
.badge-owner, .badge-co { color: var(--ref-pink); }
.badge-vip { color: var(--ref-cream); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.reference-submit,
.uhd-primary,
.btn-primary,
.one-time-reveal > button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 16px;
    border: 1px solid var(--ref-cream);
    border-radius: var(--radius-control);
    background: var(--ref-cream);
    color: var(--ref-bg);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.005em;
    white-space: nowrap;
    box-shadow: inset 0 -1px 0 rgba(17, 18, 19, .14);
    transition: background-color var(--motion-fast) ease, box-shadow var(--motion-control) ease, border-color var(--motion-fast) ease, filter var(--motion-fast) ease;
}
.reference-submit:hover,
.reference-submit:focus-visible,
.uhd-primary:hover,
.uhd-primary:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible,
.one-time-reveal > button:hover,
.one-time-reveal > button:focus-visible {
    outline: none;
    background: #fffdfa;
    border-color: #fffdfa;
    box-shadow: 0 0 0 3px rgba(188, 118, 117, .24), 0 12px 30px -12px rgba(188, 118, 117, .6);
}
.reference-submit:active, .uhd-primary:active, .btn-primary:active, .one-time-reveal > button:active { filter: brightness(.95); }
.uhd-primary.danger, .btn-primary.danger { border-color: var(--ref-danger); background: var(--ref-danger); }
.uhd-primary.danger:hover, .uhd-primary.danger:focus-visible { border-color: #e09e9d; background: #e09e9d; box-shadow: 0 0 0 3px rgba(213, 139, 138, .25); }
.motion-arrow { position: relative; left: 0; display: inline-block; min-width: .75em; transition: left var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) ease; }
.reference-submit:hover .motion-arrow,
.reference-submit:focus-visible .motion-arrow,
.uhd-primary:hover .motion-arrow,
.uhd-primary:focus-visible .motion-arrow,
.btn-primary:hover .motion-arrow,
.btn-primary:focus-visible .motion-arrow,
.uhd-text-action:hover .motion-arrow,
.uhd-text-action:focus-visible .motion-arrow,
.btn-ghost:hover .motion-arrow,
.btn-ghost:focus-visible .motion-arrow { left: 4px; opacity: .86; }

.uhd-text-action,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--ts-border-strong);
    border-radius: var(--radius-control);
    background: rgba(244, 242, 238, .02);
    color: var(--ref-cream);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
.uhd-text-action:hover,
.uhd-text-action:focus-visible,
.btn-ghost:hover,
.btn-ghost:focus-visible { border-color: var(--ts-rose-line); background: var(--ts-rose-wash); outline: none; }
.uhd-text-action.danger,
.btn-ghost.danger { border-color: var(--ts-danger-line); color: var(--ref-danger); }
.uhd-text-action.danger:hover,
.uhd-text-action.danger:focus-visible,
.btn-ghost.danger:hover,
.btn-ghost.danger:focus-visible { border-color: var(--ref-danger); background: var(--ts-danger-wash); }
.text-button { padding: 0; border: 0; background: transparent; color: var(--ref-cream); font-size: inherit; transition: color var(--motion-fast) ease; }
.text-button:hover, .text-button:focus-visible { color: var(--ref-pink); }
.list-state .text-button,
.staff-member-history-head .text-button { min-height: 30px; padding: 0 10px; border: 1px solid var(--ts-border-strong); border-radius: var(--radius-control); font-size: 12.5px; }

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */
.reference-auth-field input,
.uhd-form input,
.uhd-form textarea,
.ticket-toolbar input,
.staff-filter-row input,
.staff-create-row input,
.staff-inline-action select,
.staff-reauth input,
.staff-audit-toolbar input {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid var(--ts-border-strong);
    border-radius: var(--radius-field);
    outline: none;
    background: var(--ts-inset);
    color: var(--ref-cream);
    font-family: var(--font-sans);
    font-size: 13.5px;
    line-height: 1.4;
    caret-color: var(--ref-pink);
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
:is(.reference-auth-field, .uhd-form, .ticket-toolbar, .staff-filter-row, .staff-create-row, .staff-reauth, .staff-audit-toolbar) :is(input, textarea)::placeholder { color: var(--ref-line); opacity: 1; }
:is(.reference-auth-field, .uhd-form, .ticket-toolbar, .staff-filter-row, .staff-create-row, .staff-reauth, .staff-audit-toolbar) :is(input, textarea):hover { border-color: rgba(244, 242, 238, .2); }
.reference-auth-field input:focus,
.uhd-form input:focus,
.uhd-form textarea:focus,
.ticket-toolbar input:focus,
.staff-filter-row input:focus,
.staff-create-row input:focus,
.staff-reauth input:focus,
.staff-audit-toolbar input:focus { border-color: var(--ts-rose-line); box-shadow: 0 0 0 3px var(--ts-rose-soft); }
.uhd-form textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
input[type="number"] { font-variant-numeric: tabular-nums; }
.uhd-form { display: grid; gap: 14px; }
.uhd-form label { display: grid; gap: 7px; min-width: 0; color: var(--ref-muted); font-size: 12px; font-weight: 500; }
.uhd-password-wrap,
.reference-password-wrap { position: relative; }
.uhd-password-wrap input,
.reference-password-wrap input { padding-right: 44px; }
.reference-password-toggle,
.uhd-eye-button {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    width: 34px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--ref-muted);
    transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}
.reference-password-toggle:hover,
.reference-password-toggle:focus-visible,
.uhd-eye-button:hover,
.uhd-eye-button:focus-visible { color: var(--ref-cream); background: rgba(244, 242, 238, .05); }
.reference-eye { position: relative; display: block; width: 20px; height: 13px; }
.reference-eye svg { display: block; width: 100%; height: 100%; overflow: visible; }
.reference-password-toggle[aria-pressed="true"] .reference-eye::before,
.uhd-eye-button[aria-pressed="true"] .reference-eye::before { content: ""; position: absolute; z-index: 2; left: -1px; top: 6px; width: 22px; height: 1.5px; background: currentColor; transform: rotate(-31deg); transform-origin: center; }
.form-error { color: var(--ref-danger); font-size: 12.5px; line-height: 1.45; }
.form-error:not(:empty) { padding: 9px 12px; border: 1px solid var(--ts-danger-line); border-radius: var(--radius-field); background: var(--ts-danger-wash); }

.custom-select { position: relative; min-width: 140px; }
.custom-select-native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.custom-select-trigger {
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--ts-border-strong);
    border-radius: var(--radius-field);
    background: var(--ts-inset);
    color: var(--ref-cream);
    font-size: 13.5px;
    font-weight: 400;
    text-align: left;
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.custom-select-trigger:hover { border-color: rgba(244, 242, 238, .2); }
.custom-select-trigger:focus-visible,
.custom-select.is-open .custom-select-trigger { outline: none; border-color: var(--ts-rose-line); box-shadow: 0 0 0 3px var(--ts-rose-soft); }
.custom-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-caret { position: relative; top: -2px; flex: 0 0 auto; width: 7px; height: 7px; border-right: 1.5px solid var(--ref-muted); border-bottom: 1.5px solid var(--ref-muted); transform: rotate(45deg); transition: transform var(--motion-fast) var(--motion-ease), top var(--motion-fast) var(--motion-ease); }
.custom-select.is-open .custom-select-caret { top: 2px; transform: rotate(225deg); }
.custom-select-menu { position: fixed; z-index: 160; left: 0; top: 0; min-width: 0; max-height: 240px; overflow-y: auto; padding: 4px; border: 1px solid var(--ts-border-strong); border-radius: var(--radius-control); background: rgba(23, 24, 25, .97); box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .75); transform-origin: top center; }
.custom-select.is-open .custom-select-menu { animation: custom-select-open var(--motion-control) var(--motion-ease) both; }
.custom-select.is-closing .custom-select-menu { animation: custom-select-close 120ms ease both; }
.custom-select-option { width: 100%; display: block; padding: 8px 10px; border: 0; border-radius: var(--radius-field); background: transparent; color: var(--ref-muted); font-size: 13px; text-align: left; transition: background-color 100ms ease, color 100ms ease; }
.custom-select-option:hover,
.custom-select-option:focus-visible { outline: none; background: rgba(244, 242, 238, .055); color: var(--ref-cream); }
.custom-select-option[aria-selected="true"] { color: var(--ref-cream); box-shadow: inset 2px 0 0 var(--ref-pink); background: var(--ts-rose-wash); }

/* --------------------------------------------------------------------------
   Sign in / register
   -------------------------------------------------------------------------- */
.reference-auth-screen { position: relative; display: flex; flex-direction: column; min-height: 100dvh; }
.auth-topbar { height: var(--shell-h); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.reference-ts-mark { display: block; width: 30px; height: auto; }
.auth-topbar-host { color: var(--ref-line); font-family: var(--font-mono); font-size: 11.5px; }
.reference-auth-stage { flex: 1; display: grid; place-items: center; padding: 16px var(--gutter) calc(var(--shell-h) + 16px); }
.auth-card {
    position: relative;
    width: min(400px, 100%);
    padding: 32px 30px 28px;
    border: 1px solid var(--ts-border);
    border-radius: var(--radius-surface);
    background: linear-gradient(180deg, rgba(26, 27, 28, .88), rgba(19, 20, 21, .88));
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    backdrop-filter: blur(16px) saturate(120%);
    box-shadow: inset 0 1px 0 rgba(244, 242, 238, .05), 0 40px 90px -40px rgba(0, 0, 0, .85);
}
.reference-auth-wordmark { display: block; width: 172px; height: auto; margin: 0 0 26px; }
.reference-auth-head { display: grid; gap: 14px; margin-bottom: 22px; }
.reference-auth-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; border: 1px solid var(--ts-border); border-radius: var(--radius-control); background: var(--ts-inset); }
.reference-auth-mode { position: relative; display: flex; align-items: center; justify-content: center; min-height: 32px; border-radius: 5px; color: var(--ref-muted); font-size: 13px; font-weight: 500; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.reference-auth-mode:hover, .reference-auth-mode:focus-visible { color: var(--ref-cream); }
.reference-auth-mode.is-active { background: var(--ts-raised); color: var(--ref-cream); box-shadow: inset 0 0 0 1px var(--ts-border-strong); }
.reference-auth-mode.is-active::after { content: ""; position: absolute; left: 32%; right: 32%; bottom: 0; height: 1px; background: var(--ref-pink); box-shadow: 0 0 8px rgba(188, 118, 117, .8); }
.reference-auth-desc { margin: 0; color: var(--ref-muted); font-size: 13px; }
.reference-auth-form { display: grid; gap: 14px; }
.reference-auth-field { position: relative; display: grid; gap: 7px; }
.reference-auth-field > label { display: flex; justify-content: space-between; gap: 16px; color: var(--ref-muted); font-size: 12px; font-weight: 500; }
.reference-required { color: var(--ref-pink); font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; }
.reference-auth-micro { display: flex; align-items: center; gap: 7px; color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; }
.reference-auth-micro::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ref-line); }
.reference-auth-micro[data-state="valid"] { color: var(--ref-cream); }
.reference-auth-micro[data-state="valid"]::before { background: var(--ref-pink); box-shadow: 0 0 8px rgba(188, 118, 117, .7); }
.reference-auth-micro[data-state="invalid"] { color: var(--ref-danger); }
.reference-auth-micro[data-state="invalid"]::before { background: var(--ref-danger); box-shadow: none; }
.reference-auth-message { color: var(--ref-muted); font-size: 12.5px; line-height: 1.45; }
.reference-auth-error { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--ts-danger-line); border-radius: var(--radius-field); background: var(--ts-danger-wash); color: var(--ref-danger); }
.auth-standing-title { color: var(--ref-cream); font-size: 13px; font-weight: 600; }
.auth-standing-reason { color: var(--ref-danger); }
.auth-standing-expiry { color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; }
.reference-auth-actions { margin-top: 6px; }
.reference-auth-actions .reference-submit { width: 100%; min-height: 42px; justify-content: space-between; padding: 0 16px; font-size: 13.5px; }

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.reference-app { min-height: 100dvh; }
.shell-bar {
    position: fixed;
    z-index: 60;
    top: 0;
    left: 0;
    right: 0;
    height: var(--shell-h);
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid var(--ts-border);
}
/* The blur lives on a pseudo-element: a backdrop-filter on .shell-bar itself would
   become the containing block of the fixed mobile dock nested inside it. */
.shell-bar::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: rgba(17, 18, 19, .76);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
}
.shell-mark { justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-left: -6px; padding: 6px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--ref-cream); transition: background-color var(--motion-fast) ease; }
.shell-mark:hover { background: rgba(244, 242, 238, .04); }
.shell-mark img { display: block; width: 26px; height: auto; }
.shell-brand { font-size: 15px; font-weight: 600; letter-spacing: -.025em; }
.shell-nav { position: relative; display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--ts-border); border-radius: var(--radius-control); background: rgba(13, 14, 15, .62); }
#staff-nav-slot { display: contents; }
.shell-nav button {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--ref-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--motion-fast) ease;
}
.shell-nav button::before { content: ""; flex: 0 0 auto; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--nav-ico, var(--ico-home)) center / contain no-repeat; mask: var(--nav-ico, var(--ico-home)) center / contain no-repeat; }
.shell-nav [data-section-target="home"] { --nav-ico: var(--ico-home); }
.shell-nav [data-section-target="account"] { --nav-ico: var(--ico-account); }
.shell-nav [data-section-target="invitations"] { --nav-ico: var(--ico-invitations); }
.shell-nav [data-section-target="tickets"] { --nav-ico: var(--ico-support); }
.shell-nav [data-section-target="staff"] { --nav-ico: var(--ico-staff); }
.shell-nav button:hover,
.shell-nav button:focus-visible,
.shell-nav button.active { color: var(--ref-cream); }
.shell-nav button.active::before { color: var(--ref-pink); background: var(--ref-pink); }
.shell-nav-indicator {
    position: absolute;
    z-index: 0;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 0;
    margin-left: -1px;
    border-radius: 5px;
    background: var(--ts-raised);
    box-shadow: inset 0 0 0 1px var(--ts-border-strong);
    opacity: 0;
    pointer-events: none;
    transition: left 200ms var(--motion-ease), width 200ms var(--motion-ease), opacity 120ms ease;
}
.shell-nav-indicator::after { content: ""; position: absolute; left: 24%; right: 24%; bottom: 0; height: 1px; background: var(--ref-pink); box-shadow: 0 0 8px rgba(188, 118, 117, .8); }
.shell-nav-indicator.is-visible { opacity: 1; }
.shell-actions { justify-self: end; display: flex; align-items: center; gap: 8px; min-width: 0; }
.shell-identity { min-width: 0; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 12px 4px 4px; border: 1px solid var(--ts-border); border-radius: var(--radius-control); background: rgba(13, 14, 15, .55); color: var(--ref-cream); text-align: left; transition: border-color var(--motion-fast) ease; }
.shell-identity:hover, .shell-identity:focus-visible { border-color: var(--ts-border-strong); }
.shell-avatar { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 5px; background: linear-gradient(145deg, rgba(188, 118, 117, .32), rgba(188, 118, 117, .06)); box-shadow: inset 0 0 0 1px rgba(188, 118, 117, .42); font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.shell-identity-text { min-width: 0; display: grid; gap: 2px; line-height: 1.15; }
#user-display-name { max-width: 150px; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.reference-user-role.badge { min-height: 0; padding: 0; border: 0; font-size: 9.5px; letter-spacing: .08em; }
.shell-icon-button { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 1px solid var(--ts-border); border-radius: var(--radius-control); background: rgba(13, 14, 15, .55); color: var(--ref-muted); transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease; }
.shell-icon-button:hover, .shell-icon-button:focus-visible { border-color: var(--ts-rose-line); color: var(--ref-cream); }

/* --------------------------------------------------------------------------
   Home: download module + session readout
   -------------------------------------------------------------------------- */
.reference-home { min-height: 100dvh; padding: calc(var(--shell-h) + clamp(28px, 5vh, 56px)) var(--gutter) 28px; display: flex; flex-direction: column; align-items: center; }
.reference-home-center { width: min(var(--layout-max), 100%); display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); gap: var(--gap); align-items: stretch; }
.home-module { grid-column: 1; min-width: 0; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; overflow: hidden; }
.home-module::before { left: 0; right: 45%; background: linear-gradient(90deg, var(--ref-pink), transparent); }
/* Instrument frame: four corner ticks. */
.home-module::after {
    content: "";
    position: absolute;
    inset: 10px;
    pointer-events: none;
    --tick: rgba(244, 242, 238, .22);
    background:
        linear-gradient(var(--tick), var(--tick)) left top / 10px 1px no-repeat,
        linear-gradient(var(--tick), var(--tick)) left top / 1px 10px no-repeat,
        linear-gradient(var(--tick), var(--tick)) right top / 10px 1px no-repeat,
        linear-gradient(var(--tick), var(--tick)) right top / 1px 10px no-repeat,
        linear-gradient(var(--tick), var(--tick)) left bottom / 10px 1px no-repeat,
        linear-gradient(var(--tick), var(--tick)) left bottom / 1px 10px no-repeat,
        linear-gradient(var(--tick), var(--tick)) right bottom / 10px 1px no-repeat,
        linear-gradient(var(--tick), var(--tick)) right bottom / 1px 10px no-repeat;
}
.home-module-head { display: grid; gap: 16px; margin-bottom: 28px; }
.reference-home-wordmark { display: block; width: clamp(220px, 24vw, 380px); height: auto; }
.home-greeting { margin: 0; color: var(--ref-muted); font-size: 13.5px; }
.home-greeting strong { color: var(--ref-cream); font-weight: 600; }
/* Steps, rule and download form one group anchored to the bottom of the module, so the
   module lines up with the readout beside it without an empty band in the middle. */
.home-steps { margin: auto 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; }
.home-steps li { min-width: 0; padding: 0 18px; display: grid; align-content: start; gap: 4px; border-left: 1px solid var(--ts-border); }
.home-steps li:first-child { padding-left: 0; border-left: 0; }
.home-step-index { color: var(--ref-line); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; }
.home-steps strong { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.home-steps small { color: var(--ref-muted); font-size: 12.5px; line-height: 1.45; }
.reference-home-rule { width: 100%; height: 1px; margin-top: 24px; background: linear-gradient(90deg, var(--ref-pink), rgba(188, 118, 117, .25) 32%, var(--ts-border) 62%); transform-origin: left center; }

/* Download: a quiet outlined control. The module already frames it, so it needs no fill,
   glow or shine to read as the main action. Click feedback is a hairline sweep only —
   the browser owns real progress, so nothing here pretends to show a percentage. */
.reference-download-link {
    position: relative;
    align-self: flex-start;
    min-height: 46px;
    margin-top: 24px;
    padding: 0 18px 0 16px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    border: 1px solid var(--ts-border-strong);
    border-radius: var(--radius-control);
    background: rgba(244, 242, 238, .035);
    color: var(--ref-cream);
    transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
.reference-download-link:hover { border-color: rgba(244, 242, 238, .26); background: rgba(244, 242, 238, .06); }
.reference-download-link:focus-visible { outline: none; border-color: var(--ts-rose-line); box-shadow: 0 0 0 3px var(--ts-rose-soft); }
.reference-download-link:active { background: rgba(244, 242, 238, .08); }
.download-icon { width: 17px; height: 17px; color: var(--ref-muted); overflow: visible; transition: color var(--motion-fast) ease; }
.reference-download-link:hover .download-icon,
.reference-download-link:focus-visible .download-icon { color: var(--ref-cream); }
.download-arrow { transition: transform var(--motion-control) var(--motion-ease); }
.reference-download-link:hover .download-arrow,
.reference-download-link:focus-visible .download-arrow { transform: translateY(2px); }
#home-download-label { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.download-file { padding-left: 12px; border-left: 1px solid var(--ts-border-strong); color: var(--ref-muted); font-family: var(--font-mono); font-size: 11.5px; line-height: 18px; }
.download-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--ref-pink), transparent) -67% 0 / 40% 100% no-repeat; transition: opacity var(--motion-fast) ease; }
.reference-download-link[data-state] .download-progress { opacity: 1; animation: ts-download-sweep 1.2s linear infinite; }
.reference-download-link[data-state] .download-arrow { animation: ts-download-drop 1s var(--motion-ease) infinite; }

.home-readout { grid-column: 2; min-width: 0; display: flex; flex-direction: column; padding: 6px 20px 18px; }
.home-readout-row { min-height: 54px; padding: 10px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--ts-border); }
.home-readout-key { flex: 0 0 auto; color: var(--ref-muted); font-size: 12.5px; }
.home-readout-value { min-width: 0; display: grid; justify-items: end; gap: 4px; text-align: right; }
.home-readout-value small { color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; }
.home-readout-text { overflow: hidden; font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.home-readout-mono { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.home-readout-action { align-self: flex-start; margin-top: 18px; }

.home-shortcuts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
.home-shortcut { position: relative; min-width: 0; display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; border: 0; border-right: 1px solid var(--ts-border); background: transparent; color: var(--ref-cream); text-align: left; transition: background-color var(--motion-fast) ease; }
.home-shortcut:last-child { border-right: 0; }
.home-shortcut::after { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 1px; background: linear-gradient(90deg, transparent, var(--ref-pink), transparent); opacity: 0; transition: opacity var(--motion-control) ease; }
.home-shortcut .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--ref-muted); transition: color var(--motion-fast) ease; }
.home-shortcut > span { min-width: 0; display: grid; gap: 3px; }
.home-shortcut strong { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.home-shortcut small { color: var(--ref-muted); font-size: 12.5px; }
.home-shortcut:hover,
.home-shortcut:focus-visible { background: rgba(244, 242, 238, .025); }
.home-shortcut:focus-visible { outline-offset: -2px; }
.home-shortcut:hover .ico,
.home-shortcut:focus-visible .ico { color: var(--ref-pink); }
.home-shortcut:hover::after,
.home-shortcut:focus-visible::after { opacity: 1; }
.home-footer { width: min(var(--layout-max), 100%); margin-top: auto; padding-top: 48px; display: flex; justify-content: center; }
.reference-signature { display: block; width: clamp(170px, 13vw, 230px); height: auto; opacity: .5; }

/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */
.portal-panels { min-height: 100dvh; padding: calc(var(--shell-h) + clamp(28px, 5vh, 52px)) var(--gutter) clamp(56px, 8vh, 96px); }
.uhd-panel { width: min(var(--layout-max), 100%); margin: 0 auto; }
.uhd-panel-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; margin-bottom: clamp(20px, 3vh, 28px); }
.uhd-panel-heading > div { min-width: 0; }
.uhd-kicker { margin: 0 0 10px; color: var(--ref-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; }
.uhd-panel-heading h1 { margin: 0; color: var(--ref-cream); font-size: clamp(32px, 3.4vw, 48px); font-weight: 560; letter-spacing: -.045em; line-height: 1; }
.uhd-panel-subtitle { max-width: 60ch; margin: 10px 0 0; color: var(--ref-muted); font-size: 13.5px; line-height: 1.55; }
.uhd-heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.tab-count { color: var(--ref-line); font-family: var(--font-mono); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.tab-count:empty { display: none; }
.staff-tab.active .tab-count, .text-tab.active .tab-count { color: var(--ref-pink); }

.uhd-section { margin-top: var(--gap); }
.uhd-section-heading { min-height: 52px; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--ts-border); }
.uhd-section-heading h2 { margin: 0; color: var(--ref-cream); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.uhd-section-heading > span { flex: 0 0 auto; min-width: 26px; padding: 2px 7px; border: 1px solid var(--ts-border-strong); border-radius: var(--radius-field); color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; text-align: center; font-variant-numeric: tabular-nums; }
.uhd-section-eyebrow { color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .06em; }

.uhd-ledger { margin: 0; }
.uhd-ledger-row { min-height: 52px; padding: 10px 22px; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 20px; border-bottom: 1px solid var(--ts-border); }
.uhd-ledger-row:last-child { border-bottom: 0; }
.uhd-ledger-row > span { color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; }
.uhd-ledger-row strong,
.mono-copy { min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ref-cream); font-size: 13.5px; font-weight: 500; line-height: 1.4; text-align: left; }
.mono-copy { font-family: var(--font-mono); }
.account-ledger .uhd-ledger-row strong,
.account-ledger .mono-copy { font-variant-numeric: tabular-nums; }
.uhd-list > * { border-bottom: 1px solid var(--ts-border); }

/* Account */
.account-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .62fr); gap: var(--gap); align-items: start; }
.account-main { min-width: 0; display: grid; gap: var(--gap); }
.account-main > .uhd-section,
.account-aside > .uhd-section { margin-top: 0; }
.account-aside { position: sticky; top: calc(var(--shell-h) + 20px); min-width: 0; }
.account-card { overflow: hidden; }
.account-identity-strip { padding: 22px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; border-bottom: 1px solid var(--ts-border); background: radial-gradient(120% 160% at 0% 0%, rgba(188, 118, 117, .11), transparent 55%); }
.account-avatar { width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--radius-control); background: linear-gradient(145deg, rgba(188, 118, 117, .32), rgba(188, 118, 117, .05)); box-shadow: inset 0 0 0 1px rgba(188, 118, 117, .45); font-family: var(--font-mono); font-size: 22px; font-weight: 600; }
.account-identity-primary { min-width: 0; display: grid; gap: 6px; }
.account-identity-primary > span,
.account-role > span { color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .06em; }
.account-identity-primary > strong { min-width: 0; overflow: hidden; color: var(--ref-cream); font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.account-role { display: grid; justify-items: end; gap: 6px; text-align: right; }
.account-role > strong { font-size: 15px; font-weight: 600; }
.account-copy-value { width: min(100%, 360px); margin-left: -10px; padding: 5px 5px 5px 10px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid transparent; border-radius: var(--radius-control); cursor: pointer; transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.account-copy-value:hover,
.account-copy-value:focus-visible { border-color: var(--ts-border-strong); background: rgba(244, 242, 238, .025); }
.account-copy-value > strong { min-width: 0; overflow: hidden; font-family: var(--font-mono); text-overflow: ellipsis; white-space: nowrap; }
.account-copy-value > small { flex: 0 0 auto; padding: 3px 7px; border: 1px solid var(--ts-border-strong); border-radius: var(--radius-field); color: var(--ref-muted); font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: .05em; transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.account-copy-value:hover > small,
.account-copy-value:focus-visible > small { color: var(--ref-cream); }
.account-copy-value[data-copy-state="copied"] > small { border-color: var(--ts-rose-line); background: var(--ts-rose-wash); color: var(--ref-cream); }
.account-section-heading,
.account-security-heading { min-height: 0; padding: 20px 22px 18px; align-items: flex-start; }
.account-section-heading > div,
.account-security-heading > div { display: grid; gap: 6px; }
.account-section-heading h2,
.account-security-heading h2 { font-size: 15px; }
.account-section-heading p,
.account-security-heading p { margin: 0; color: var(--ref-muted); font-size: 13px; line-height: 1.5; }
.account-section-heading > span,
.account-security-heading > span { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; padding: 3px 9px; letter-spacing: .05em; }
#account-subscription-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ref-line); }
#account-subscription-state[data-state="active"] { border-color: rgba(188, 118, 117, .4); background: var(--ts-rose-wash); color: var(--ref-cream); }
#account-subscription-state[data-state="active"]::before { background: var(--ref-pink); box-shadow: 0 0 8px rgba(188, 118, 117, .7); animation: led-pulse 2.8s ease-in-out infinite; }
#account-subscription-state[data-state="expired"] { border-color: var(--ts-danger-line); background: var(--ts-danger-wash); color: var(--ref-danger); }
#account-subscription-state[data-state="expired"]::before { background: var(--ref-danger); box-shadow: none; }
.account-subscription-section > .account-ledger { border-bottom: 1px solid var(--ts-border); }
.account-redeem-form { padding: 18px 22px 22px; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.account-redeem-form input { font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.account-redeem-form .form-error { grid-column: 1 / -1; }
#account-password-form { padding: 18px 22px 22px; }
#account-password-form .uhd-primary { justify-self: start; margin-top: 2px; }

/* Invitations */
.invite-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 0; }
.invite-metrics > div { width: auto; max-width: none; flex: none; min-height: 132px; padding: 18px 20px 20px; display: grid; grid-template-rows: auto auto auto 1fr; align-content: start; gap: 8px; }
.invite-metrics span { color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; }
.invite-metrics strong { font-family: var(--font-mono); font-size: clamp(30px, 2.8vw, 40px); font-weight: 500; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.invite-metrics small { color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; }
.invite-meter { position: relative; align-self: end; display: block; height: 3px; margin-top: 10px; overflow: hidden; border-radius: 2px; background: rgba(244, 242, 238, .07); }
.invite-meter b { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 2px; background: linear-gradient(90deg, rgba(188, 118, 117, .55), var(--ref-pink)); box-shadow: 0 0 10px rgba(188, 118, 117, .6); transition: width var(--motion-panel) var(--motion-ease); }
.one-time-reveal,
.one-time-secret { margin-top: var(--gap); border: 1px solid rgba(188, 118, 117, .45); border-radius: var(--radius-surface); background: linear-gradient(90deg, rgba(188, 118, 117, .11), rgba(188, 118, 117, .02) 62%), var(--ts-panel-bottom); box-shadow: 0 0 0 4px rgba(188, 118, 117, .06); }
.one-time-reveal { padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 20px; }
.one-time-reveal div { min-width: 0; display: grid; gap: 8px; }
.one-time-reveal span { color: var(--ref-pink); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; }
.one-time-reveal code { color: var(--ref-cream); font-family: var(--font-mono); font-size: clamp(15px, 1.4vw, 20px); letter-spacing: .02em; word-break: break-all; }
.one-time-reveal small { color: var(--ref-muted); font-size: 12.5px; }
.one-time-secret { padding: 16px 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.one-time-secret > strong { color: var(--ref-pink); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; }
.one-time-secret > code { color: var(--ref-cream); font-family: var(--font-mono); font-size: 14px; word-break: break-all; }
.one-time-secret > span { color: var(--ref-muted); font-size: 12.5px; }
.invite-ledgers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin: var(--gap) 0 0; }
.invite-ledgers > .invite-ledger { width: auto; max-width: none; flex: none; min-width: 0; margin-top: 0; padding: 0; }
.invite-ledger-note { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--ts-border); color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; line-height: 1.6; }

/* Tables */
.uhd-table-wrap,
.staff-table-wrap { width: 100%; overflow-x: auto; }
.uhd-table,
.staff-table { width: 100%; border-collapse: collapse; color: var(--ref-cream); font-size: 13px; }
.uhd-table th,
.staff-table th { padding: 10px 14px; border-bottom: 1px solid var(--ts-border); background: rgba(244, 242, 238, .018); color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .04em; text-align: left; white-space: nowrap; }
.uhd-table td,
.staff-table td { padding: 12px 14px; border-bottom: 1px solid var(--ts-border); line-height: 1.45; vertical-align: middle; }
:is(.uhd-table, .staff-table) :is(th, td):first-child { padding-left: 20px; }
:is(.uhd-table, .staff-table) :is(th, td):last-child { padding-right: 20px; }
:is(.uhd-table, .staff-table) tbody tr:last-child td { border-bottom: 0; }
:is(.uhd-table, .staff-table) tbody tr { transition: background-color var(--motion-fast) ease; }
:is(.uhd-table, .staff-table) tbody tr:hover { background: rgba(244, 242, 238, .022); }
:is(.uhd-table, .staff-table) td[colspan] { padding-top: 22px; padding-bottom: 22px; color: var(--ref-muted); }
.uhd-table td small,
.staff-table td small { display: block; margin-top: 3px; color: var(--ref-muted); font-size: 11.5px; }
.cell-mono { font-family: var(--font-mono); font-size: 12px; }
.invite-expiry { font-family: var(--font-mono); font-size: 10.5px !important; letter-spacing: .03em; text-transform: uppercase; }
.staff-table .btn-ghost,
.uhd-table .uhd-text-action { min-height: 28px; padding: 0 10px; font-size: 12px; }

/* Support */
.support-desk { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.6fr); gap: var(--gap); align-items: start; }
.support-queue { position: sticky; top: calc(var(--shell-h) + 20px); min-width: 0; overflow: hidden; }
.support-thread { min-width: 0; min-height: 520px; padding: 22px 24px 24px; }
.ticket-toolbar { padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--ts-border); }
.ticket-toolbar > div { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--ts-border); border-radius: var(--radius-control); background: var(--ts-inset); }
.support-queue .ticket-toolbar { display: grid; gap: 10px; }
.support-queue .ticket-toolbar > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.text-tab,
.staff-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 0; border-radius: 5px; background: transparent; color: var(--ref-muted); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
.text-tab:hover, .text-tab:focus-visible,
.staff-tab:hover, .staff-tab:focus-visible { color: var(--ref-cream); }
.text-tab.active,
.staff-tab.active { background: var(--ts-raised); color: var(--ref-cream); box-shadow: inset 0 0 0 1px var(--ts-border-strong); }
.text-tab.active::after,
.staff-tab.active::after { content: ""; position: absolute; left: 26%; right: 26%; bottom: 0; height: 1px; background: var(--ref-pink); box-shadow: 0 0 8px rgba(188, 118, 117, .8); }
.tickets-list { max-height: min(62vh, 640px); overflow-y: auto; }
.ticket-row { position: relative; width: 100%; padding: 14px 16px 14px 18px; display: grid; align-content: center; gap: 5px; border-bottom: 1px solid var(--ts-border); color: inherit; cursor: pointer; transition: background-color var(--motion-fast) var(--motion-ease); }
.ticket-row:last-child { border-bottom: 0; }
.ticket-row::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 2px; border-radius: 0 2px 2px 0; background: var(--ref-pink); box-shadow: 0 0 8px rgba(188, 118, 117, .7); opacity: 0; transition: opacity var(--motion-fast) var(--motion-ease); }
.ticket-row:hover { background: rgba(244, 242, 238, .025); }
.ticket-row:focus-visible { outline: none; background: rgba(244, 242, 238, .025); box-shadow: inset 0 0 0 1px var(--ts-rose-line); }
.ticket-row.is-selected { background: var(--ts-rose-wash); }
.ticket-row.is-selected::before { opacity: 1; }
.ticket-row-kicker,
.ticket-row-meta { min-width: 0; overflow: hidden; color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; }
.ticket-row-kicker::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: -1px 8px 0 0; border-radius: 50%; vertical-align: middle; box-shadow: inset 0 0 0 1px var(--ref-line); }
.ticket-row[data-status="open"] .ticket-row-kicker::before { background: var(--ref-pink); box-shadow: 0 0 8px rgba(188, 118, 117, .7); }
.ticket-row[data-status="approved"] .ticket-row-kicker::before { background: var(--ref-cream); box-shadow: none; }
.ticket-row[data-status="denied"] .ticket-row-kicker::before { background: var(--ref-danger); box-shadow: none; }
.ticket-row > strong { min-width: 0; overflow: hidden; color: var(--ref-cream); font-size: 14px; font-weight: 550; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap; }
.ticket-status-select { min-width: 110px; }
.ticket-empty,
.list-state { padding: 26px 20px; display: grid; justify-items: start; gap: 8px; color: var(--ref-muted); font-size: 13px; }
.ticket-empty h2,
.list-state strong { margin: 0; color: var(--ref-cream); font-size: 14px; font-weight: 600; }
.ticket-empty p { margin: 0; }
.list-state.is-error { color: var(--ref-danger); }
.item-skel { height: 76px; border-bottom: 1px solid var(--ts-border); background: linear-gradient(90deg, transparent 0%, rgba(244, 242, 238, .04) 50%, transparent 100%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
.support-thread-head { display: grid; gap: 6px; padding-bottom: 4px; }
.support-thread-head h2 { margin: 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.03em; }
.support-thread-head p { margin: 0; color: var(--ref-muted); font-size: 13px; line-height: 1.55; }
.support-compose { grid-template-columns: minmax(0, 1.4fr) minmax(160px, .6fr); gap: 16px; }
.support-compose .support-thread-head,
.support-compose .support-compose-message,
.support-compose .form-error,
.support-compose .support-submit { grid-column: 1 / -1; }
.support-compose textarea { min-height: 160px; max-height: 360px; }
.support-submit { display: flex; justify-content: flex-end; }
.ticket-conversation { min-width: 0; display: grid; align-content: start; }
.ticket-conversation-head { padding-bottom: 16px; border-bottom: 1px solid var(--ts-border); }
.ticket-conversation-head h2 { margin: 0 0 8px; font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; overflow-wrap: anywhere; }
.ticket-conversation-head p { margin: 0; color: var(--ref-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em; overflow-wrap: anywhere; }
.ticket-controls { padding: 14px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-bottom: 1px solid var(--ts-border); }
.ticket-status-control { margin-right: auto; display: flex; align-items: center; gap: 10px; color: var(--ref-muted); font-size: 12.5px; }
.ticket-status-control .custom-select { min-width: 140px; }
.ticket-edit-panel { padding: 16px 0; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--ts-border); }
.ticket-edit-panel .ticket-edit-body,
.ticket-edit-panel .modal-actions { grid-column: 1 / -1; }
.ticket-messages { max-height: min(56vh, 620px); padding: 18px 0; display: grid; gap: 12px; overflow-y: auto; }
.ticket-message { max-width: min(88%, 680px); justify-self: start; padding: 12px 14px 14px; border: 1px solid var(--ts-border); border-radius: var(--radius-control); background: rgba(244, 242, 238, .02); }
.ticket-message.is-own { justify-self: end; }
.ticket-message.is-team { border-color: rgba(188, 118, 117, .32); background: var(--ts-rose-wash); }
.ticket-message-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.ticket-message-head span { min-width: 0; color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; overflow-wrap: anywhere; }
.ticket-message.is-team .ticket-message-head span { color: var(--ref-pink); }
.ticket-message-head small { flex: 0 0 auto; color: var(--ref-line); font-family: var(--font-mono); font-size: 10.5px; }
.ticket-message p { max-width: 72ch; margin: 8px 0 0; color: var(--ref-cream); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.ticket-reply { padding-top: 16px; gap: 8px; border-top: 1px solid var(--ts-border); }
.ticket-reply > label { color: var(--ref-muted); font-size: 12px; font-weight: 500; }
.ticket-reply textarea { min-height: 84px; }
.ticket-reply-actions { display: flex; justify-content: flex-end; }
.ticket-thread-empty { padding: 24px 0; display: grid; gap: 8px; }
.ticket-thread-empty p { margin: 0; color: var(--ref-muted); font-size: 13px; line-height: 1.55; }

/* Staff */
.staff-gate { width: min(440px, 100%); margin: clamp(28px, 6vh, 72px) auto 0; padding: 26px; display: grid; gap: 18px; }
.staff-gate h2 { margin: 0 0 6px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.staff-gate p { margin: 0; color: var(--ref-muted); font-size: 13px; line-height: 1.6; }
.staff-mfa-form input { font-family: var(--font-mono); font-size: 18px; letter-spacing: .3em; text-align: center; }
.staff-mfa-form .uhd-primary { justify-self: end; }
.staff-gate-action { display: flex; }
.mfa-secret { display: block; margin-top: 12px; padding: 10px 12px; border: 1px dashed rgba(188, 118, 117, .5); border-radius: var(--radius-field); background: var(--ts-inset); color: var(--ref-cream); font-family: var(--font-mono); font-size: 14px; letter-spacing: .08em; word-break: break-all; }
.mfa-uri { margin: 8px 0 0 !important; color: var(--ref-muted); font-family: var(--font-mono); font-size: 11px !important; word-break: break-all; }
.recovery-codes { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.recovery-codes code { padding: 8px 10px; border: 1px solid var(--ts-border-strong); border-radius: var(--radius-field); background: var(--ts-inset); font-family: var(--font-mono); font-size: 12.5px; text-align: center; }
.staff-workspace { margin-top: 4px; }
.staff-tabs { display: flex; flex-wrap: nowrap; gap: 2px; padding: 3px; overflow-x: auto; border: 1px solid var(--ts-border); border-radius: var(--radius-control); background: var(--ts-inset); scrollbar-width: none; }
.staff-tabs::-webkit-scrollbar { display: none; }
.staff-tab { flex: 1 0 auto; }
.staff-panel { min-height: 360px; padding-top: var(--gap); }
.staff-panel > .list-state { border: 1px solid var(--ts-border); border-radius: var(--radius-surface); background: var(--ts-panel-bottom); }
.staff-panel-head { padding: 4px 2px 14px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; }
.staff-panel-head h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -.015em; }
.staff-panel-head p,
.quiet { margin: 0; color: var(--ref-muted); font-size: 13px; line-height: 1.55; }
.staff-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 0; }
.staff-metrics > article { width: auto; max-width: none; flex: none; min-height: 108px; padding: 16px 18px; display: grid; align-content: start; gap: 8px; }
.staff-metrics > article:has(small.is-alert) { border-color: rgba(188, 118, 117, .38); }
.staff-metrics span { display: block; color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
.staff-metrics strong { font-family: var(--font-mono); font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.staff-metrics small { color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; }
.staff-metrics small.is-alert,
.staff-attention-item span.is-alert { color: var(--ref-pink); }
.staff-overview-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr); gap: var(--gap); align-items: start; }
.staff-overview-main { min-width: 0; }
.staff-attention { overflow: hidden; }
.staff-attention > h2 { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--ts-border); font-size: 14.5px; font-weight: 600; }
.staff-attention-item { padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--ts-border); }
.staff-attention-item:last-child { border-bottom: 0; }
.staff-attention-item > div { min-width: 0; display: grid; gap: 5px; }
.staff-attention-item span,
.staff-attention-empty span { color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; }
.staff-attention-item p { margin: 0; font-size: 13px; line-height: 1.45; }
.staff-attention-empty { padding: 18px; display: grid; gap: 6px; }
.staff-attention-empty p { margin: 0; color: var(--ref-muted); font-size: 13px; }
.staff-activity-table td strong { display: block; font-size: 13px; font-weight: 600; }
.panel-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; }
.panel-heading > span:first-child { display: grid; gap: 6px; }
.panel-heading strong { color: var(--ref-pink); font-size: 13.5px; font-weight: 600; }
.panel-heading small { color: var(--ref-muted); font-size: 12.5px; }
.compact-list > *,
.staff-summary-row { padding: 10px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--ts-border); }
.staff-summary-row span { min-width: 0; display: grid; gap: 4px; }
.staff-summary-row code { color: var(--ref-cream); font-family: var(--font-mono); font-size: 13px; word-break: break-all; }
.staff-summary-row small { color: var(--ref-muted); font-size: 11.5px; }
.compact-list > :last-child { border-bottom: 0; }
.staff-keys-reveal,
.staff-wave-reveal { display: grid; justify-content: stretch; gap: 10px; }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.staff-filter-row,
.staff-create-row { margin-bottom: 12px; padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.staff-filter-row label,
.staff-create-row label { flex: 1 1 180px; min-width: 0; display: grid; gap: 6px; color: var(--ref-muted); font-size: 12px; font-weight: 500; }
.staff-create-row .badge { align-self: center; }
.staff-filter-row .staff-members-meta { margin-left: auto; }
.staff-filter-row.staff-members-filter { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(140px, .7fr)) auto auto; align-items: center; gap: 10px; }
.staff-members-filter label { display: grid; }
.staff-filter-actions { justify-content: flex-end; gap: 8px; }
.staff-members-meta { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; white-space: nowrap; }
.staff-members-meta span { color: var(--ref-muted); font-weight: 400; }
.staff-members-meta strong { color: var(--ref-cream); font-weight: 500; }
.staff-members-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .5fr); gap: var(--gap); align-items: start; }
.staff-members-directory { min-width: 0; }
.staff-members-table { table-layout: fixed; min-width: 660px; }
.staff-members-table th:nth-child(1) { width: 22%; }
.staff-members-table th:nth-child(2) { width: 12%; }
.staff-members-table th:nth-child(3) { width: 17%; }
.staff-members-table th:nth-child(4) { width: 17%; }
.staff-members-table th:nth-child(5) { width: 17%; }
.staff-members-table th:nth-child(6) { width: 15%; }
.staff-members-table td { font-size: 12px; }
.staff-members-table tbody tr.is-selected { background: var(--ts-rose-wash); }
.staff-members-table tbody tr.is-selected td:first-child { box-shadow: inset 2px 0 0 var(--ref-pink); }
.staff-member-identity { min-width: 0; display: grid; gap: 4px; }
.staff-member-name { min-width: 0; max-width: 100%; overflow: hidden; color: var(--ref-cream); font-family: var(--font-mono); font-size: 12.5px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.staff-member-name strong { font-weight: 600; }
.staff-member-uid { color: var(--ref-muted); font-family: var(--font-mono); white-space: nowrap; }
.staff-dossier { position: sticky; top: calc(var(--shell-h) + 20px); min-width: 0; overflow: hidden; }
.staff-dossier > .list-state { min-height: 160px; }
.staff-dossier-empty { min-height: 160px; padding: 22px 20px; display: grid; align-content: start; gap: 8px; }
.staff-dossier-empty span { color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; }
.staff-dossier-empty p { margin: 0; color: var(--ref-muted); font-size: 13px; line-height: 1.55; }
.staff-member-history { margin: 0; }
.staff-member-history-head { padding: 20px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--ts-border); background: radial-gradient(120% 160% at 0 0, rgba(188, 118, 117, .1), transparent 55%); }
.staff-member-history-head > div { min-width: 0; display: grid; gap: 6px; }
.staff-member-history-head span,
.staff-history-grid header span,
.staff-history-empty span { color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .05em; }
.staff-member-history-head strong { font-size: clamp(22px, 2vw, 30px); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; overflow-wrap: anywhere; }
.staff-member-history-head small { color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; }
.staff-dossier-ledger > div { min-height: 40px; padding: 8px 20px; display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 12px; border-bottom: 1px solid var(--ts-border); }
.staff-dossier-ledger span { color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; }
.staff-dossier-ledger strong { min-width: 0; overflow: hidden; color: var(--ref-cream); font-family: var(--font-mono); font-size: 12px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.staff-history-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.staff-history-grid > section { min-width: 0; padding: 14px 20px 6px; }
.staff-history-grid header { margin-bottom: 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.staff-history-grid header strong { color: var(--ref-cream); font-family: var(--font-mono); font-size: 11px; font-weight: 500; }
.staff-history-list { border-top: 1px solid var(--ts-border); }
.staff-history-entry,
.staff-history-empty { padding: 10px 0; display: grid; align-content: center; gap: 4px; border-bottom: 1px solid var(--ts-border); }
.staff-history-entry:last-child,
.staff-history-empty:last-child { border-bottom: 0; }
.staff-history-entry > strong { color: var(--ref-cream); font-size: 12.5px; font-weight: 500; line-height: 1.45; }
.staff-history-entry > small { color: var(--ref-muted); font-size: 11px; }
.staff-history-empty { grid-template-columns: 64px minmax(0, 1fr); align-items: center; }
.staff-history-empty p { margin: 0; color: var(--ref-muted); font-size: 12.5px; }
.staff-rate-limits .staff-history-empty,
.uhd-section > div > .staff-history-empty { padding: 14px 20px; }
.staff-history-more { padding: 8px 0; color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; }
.staff-dossier-actions { padding: 16px 20px 20px; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--ts-border); }
.staff-dossier-actions .staff-dossier-delete { margin-left: auto; }
.staff-directory-empty { padding: 8px 0; display: flex; align-items: center; gap: 14px; color: var(--ref-muted); }
.staff-directory-empty span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; }
.staff-directory-empty strong { color: var(--ref-cream); font-size: 13px; font-weight: 500; }
.staff-panel-footer { padding: 12px 4px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 14px; }
.staff-reauth { width: min(420px, 100%); margin: 24px auto; padding: 24px; display: grid; gap: 14px; }
.staff-reauth h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.staff-reauth .uhd-primary { justify-self: end; }
.staff-audit-toolbar { margin-bottom: 12px; padding: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.staff-audit-toolbar > div { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--ts-border); border-radius: var(--radius-control); background: var(--ts-inset); }
.staff-audit-toolbar input { flex: 1 1 220px; width: auto; max-width: 340px; margin-left: auto; }
.staff-log-table td { font-size: 12.5px; }
.staff-log-table td.cell-mono { font-size: 11.5px; }
.staff-rate-limit-table .cell-action { text-align: right; white-space: nowrap; }
.severity-label { display: inline-flex; align-items: center; gap: 7px; color: var(--ref-muted); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; }
.severity-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ref-line); }
.severity-label.is-warning { color: var(--ref-cream); }
.severity-label.is-warning::before { background: var(--ref-muted); box-shadow: none; }
.severity-label.is-critical { color: var(--ref-pink); }
.severity-label.is-critical::before { background: var(--ref-pink); box-shadow: 0 0 8px rgba(188, 118, 117, .7); animation: led-pulse 2.8s ease-in-out infinite; }
.staff-support-desk { margin-top: 0; }

/* --------------------------------------------------------------------------
   Dialog and toast
   -------------------------------------------------------------------------- */
.uhd-modal { position: fixed; z-index: 120; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(9, 10, 10, .68); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 140ms ease; }
.uhd-modal.is-open { opacity: 1; }
.uhd-modal.is-closing { opacity: 0; }
.uhd-modal-panel { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 22px; border: 1px solid var(--ts-border-strong); border-radius: var(--radius-surface); background: linear-gradient(180deg, #1a1b1c, #151617); box-shadow: inset 0 1px 0 rgba(244, 242, 238, .05), 0 40px 100px -30px rgba(0, 0, 0, .85); opacity: 0; transform: scale(.986); transition: opacity var(--motion-control) ease, transform var(--motion-control) var(--motion-ease); }
/* "none", not scale(1): any transform would make the panel the containing block of
   the fixed-position custom select menus inside the dialog. */
.uhd-modal.is-open .uhd-modal-panel { opacity: 1; transform: none; }
.uhd-modal.is-closing .uhd-modal-panel { opacity: 0; transform: scale(.992); }
.uhd-modal-panel > header { margin-bottom: 18px; padding-bottom: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--ts-border); }
.uhd-modal-panel header h2 { margin: 0 0 6px; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.uhd-modal-panel header p { margin: 0; color: var(--ref-muted); font-size: 13px; line-height: 1.55; }
.uhd-modal-panel header > button { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--ts-border); border-radius: var(--radius-control); background: transparent; color: var(--ref-muted); transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease; }
.uhd-modal-panel header > button:hover,
.uhd-modal-panel header > button:focus-visible { border-color: var(--ts-border-strong); color: var(--ref-cream); }
.modal-actions { padding-top: 4px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

#toast { position: fixed; z-index: 200; right: 20px; bottom: 20px; max-width: min(380px, calc(100vw - 40px)); padding: 11px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--ts-border-strong); border-radius: var(--radius-control); background: rgba(24, 25, 26, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .75); color: var(--ref-cream); font-size: 13px; opacity: 0; transform: translateY(8px) scale(.985); transform-origin: right bottom; pointer-events: none; }
#toast::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--ref-pink); box-shadow: 0 0 8px rgba(188, 118, 117, .75); }
#toast.is-in { animation: toast-in 240ms var(--motion-ease) forwards; }
#toast.is-out { animation: toast-out 180ms ease forwards; }

/* --------------------------------------------------------------------------
   Motion — CSS fallback choreography. Once the bundled Motion runtime is ready
   (.motion-ready) these keyframes are switched off and app.js drives the same
   effects with interruptible native animations.
   -------------------------------------------------------------------------- */
.motion-auth-intro .auth-topbar { animation: ts-fade 360ms ease both; }
.motion-auth-intro .auth-card { animation: ts-rise 440ms var(--motion-ease) 40ms both; }
.motion-app-intro .shell-bar { animation: ts-fade 320ms ease both; }
.reference-home.motion-home-intro .home-module { animation: ts-rise 440ms var(--motion-ease) both; }
.reference-home.motion-home-intro .reference-home-rule { animation: ts-rule-draw 560ms var(--motion-ease) 140ms both; }
.reference-home.motion-home-intro .home-readout-row { animation: ts-boot 320ms ease 220ms both; }
.reference-home.motion-home-intro .home-readout-row:nth-child(2) { animation-delay: 280ms; }
.reference-home.motion-home-intro .home-readout-row:nth-child(3) { animation-delay: 340ms; }
.reference-home.motion-home-intro .home-readout-row:nth-child(4) { animation-delay: 400ms; }
.reference-home.motion-home-intro .home-readout-row:nth-child(5) { animation-delay: 460ms; }
.reference-home.motion-home-intro .home-shortcuts { animation: ts-rise 440ms var(--motion-ease) 180ms both; }
.reference-home.motion-home-intro .reference-signature { animation: ts-fade 700ms ease 420ms both; }
.motion-panel-enter { animation: ts-rise var(--motion-panel) var(--motion-ease) backwards; }
.motion-subpanel-enter { animation: ts-rise 220ms var(--motion-ease) backwards; }
.motion-secret-reveal { animation: ts-secret 360ms var(--motion-ease) backwards; }
.motion-secret-reveal code { animation: ts-fade 220ms ease 90ms both; }
.motion-secret-reveal button { animation: ts-fade 220ms ease 150ms both; }
.motion-cascade > *,
.motion-panel-enter .uhd-ledger-row,
.motion-panel-enter .uhd-table tbody tr,
.motion-panel-enter .ticket-row,
.motion-subpanel-enter .staff-table tbody tr,
.motion-subpanel-enter .staff-summary-row { animation: ts-row 220ms var(--motion-ease) backwards; }
.motion-cascade > *:nth-child(2),
.motion-panel-enter .uhd-ledger-row:nth-child(2),
.motion-panel-enter .uhd-table tbody tr:nth-child(2),
.motion-panel-enter .ticket-row:nth-child(2),
.motion-subpanel-enter .staff-table tbody tr:nth-child(2),
.motion-subpanel-enter .staff-summary-row:nth-child(2) { animation-delay: 24ms; }
.motion-cascade > *:nth-child(3),
.motion-panel-enter .uhd-ledger-row:nth-child(3),
.motion-panel-enter .uhd-table tbody tr:nth-child(3),
.motion-panel-enter .ticket-row:nth-child(3),
.motion-subpanel-enter .staff-table tbody tr:nth-child(3),
.motion-subpanel-enter .staff-summary-row:nth-child(3) { animation-delay: 48ms; }
.motion-cascade > *:nth-child(4),
.motion-panel-enter .uhd-table tbody tr:nth-child(4),
.motion-panel-enter .ticket-row:nth-child(4),
.motion-subpanel-enter .staff-table tbody tr:nth-child(4),
.motion-subpanel-enter .staff-summary-row:nth-child(4) { animation-delay: 72ms; }
.motion-cascade > *:nth-child(5),
.motion-panel-enter .uhd-table tbody tr:nth-child(5),
.motion-panel-enter .ticket-row:nth-child(5),
.motion-subpanel-enter .staff-table tbody tr:nth-child(5),
.motion-subpanel-enter .staff-summary-row:nth-child(5) { animation-delay: 96ms; }
.motion-cascade > *:nth-child(6),
.motion-panel-enter .uhd-table tbody tr:nth-child(6),
.motion-panel-enter .ticket-row:nth-child(6),
.motion-subpanel-enter .staff-table tbody tr:nth-child(6),
.motion-subpanel-enter .staff-summary-row:nth-child(6) { animation-delay: 120ms; }
.motion-cascade > *:nth-child(7),
.motion-panel-enter .uhd-table tbody tr:nth-child(7),
.motion-panel-enter .ticket-row:nth-child(7),
.motion-subpanel-enter .staff-table tbody tr:nth-child(7),
.motion-subpanel-enter .staff-summary-row:nth-child(7) { animation-delay: 144ms; }
.motion-cascade > *:nth-child(8),
.motion-panel-enter .uhd-table tbody tr:nth-child(8),
.motion-panel-enter .ticket-row:nth-child(8),
.motion-subpanel-enter .staff-table tbody tr:nth-child(8),
.motion-subpanel-enter .staff-summary-row:nth-child(8) { animation-delay: 168ms; }
.motion-cascade > *:nth-child(n+9),
.motion-panel-enter .uhd-table tbody tr:nth-child(n+9),
.motion-panel-enter .ticket-row:nth-child(n+9),
.motion-subpanel-enter .staff-table tbody tr:nth-child(n+9),
.motion-subpanel-enter .staff-summary-row:nth-child(n+9) { animation-delay: 180ms; }

@keyframes ts-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ts-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ts-row { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ts-boot { 0% { opacity: 0; } 40% { opacity: .55; } 55% { opacity: .25; } 100% { opacity: 1; } }
@keyframes ts-rule-draw { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes ts-secret { from { opacity: 0; clip-path: inset(50% 0 50% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes ts-download-sweep { from { background-position: -67% 0; } to { background-position: 167% 0; } }
@keyframes ts-download-drop { 0% { opacity: 0; transform: translateY(-4px); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(5px); } }
@keyframes led-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes custom-select-open { from { opacity: 0; transform: scaleY(.96); } to { opacity: 1; transform: scaleY(1); } }
@keyframes custom-select-close { from { opacity: 1; transform: scaleY(1); } to { opacity: 0; transform: scaleY(.98); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes toast-in { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(4px) scale(.99); } }

.motion-ready .motion-auth-intro .auth-topbar,
.motion-ready .motion-auth-intro .auth-card,
.motion-ready .motion-app-intro .shell-bar,
.motion-ready .reference-home.motion-home-intro .home-module,
.motion-ready .reference-home.motion-home-intro .reference-home-rule,
.motion-ready .reference-home.motion-home-intro .home-readout-row,
.motion-ready .reference-home.motion-home-intro .home-shortcuts,
.motion-ready .reference-home.motion-home-intro .reference-signature,
.motion-ready .motion-panel-enter,
.motion-ready .motion-subpanel-enter,
.motion-ready .motion-secret-reveal,
.motion-ready .motion-secret-reveal code,
.motion-ready .motion-secret-reveal button,
.motion-ready .motion-cascade > *,
.motion-ready .motion-panel-enter .uhd-ledger-row,
.motion-ready .motion-panel-enter .uhd-table tbody tr,
.motion-ready .motion-panel-enter .ticket-row,
.motion-ready .motion-subpanel-enter .staff-table tbody tr,
.motion-ready .motion-subpanel-enter .staff-summary-row,
.motion-ready .custom-select.is-open .custom-select-menu,
.motion-ready .custom-select.is-closing .custom-select-menu { animation: none; }
.motion-ready .uhd-modal,
.motion-ready .uhd-modal-panel,
.motion-ready .shell-nav-indicator,
.motion-ready .motion-arrow { transition: none; }
.motion-ready :is(.reference-submit, .uhd-primary, .btn-primary, .btn-ghost, .uhd-text-action, .account-copy-value, .staff-metrics article) { transform-origin: center; }
.motion-ready :is(.reference-submit, .uhd-primary, .btn-primary, .btn-ghost, .uhd-text-action, .account-copy-value, .staff-metrics article)[data-motion-engaged="true"] { transform: scale(1.006); }
.motion-ready :is(.reference-submit, .uhd-primary, .btn-primary, .btn-ghost, .uhd-text-action)[data-motion-pressed="true"] { transform: scale(.988); }
.motion-ready [data-motion-pressed="true"] .motion-arrow { left: 1px; }
.motion-suspended *, .motion-suspended *::before, .motion-suspended *::after { animation-play-state: paused !important; transition: none !important; }
.motion-suspended :is(.reference-submit, .uhd-primary, .btn-primary, .btn-ghost, .uhd-text-action, .account-copy-value, .staff-metrics article) { transform: none !important; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    .invite-ledgers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .account-layout,
    .staff-overview-layout,
    .staff-members-layout,
    .support-desk { grid-template-columns: minmax(0, 1fr); }
    .account-aside,
    .support-queue,
    .staff-dossier { position: relative; top: auto; }
    .support-thread { min-height: 0; }
    .staff-filter-row.staff-members-filter { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(130px, .7fr)); }
    .staff-members-filter .staff-filter-actions { justify-content: flex-start; }
    .staff-members-filter .staff-members-meta { justify-content: flex-end; }
}

@media (max-width: 960px) {
    .reference-home-center { grid-template-columns: minmax(0, 1fr); }
    .home-module,
    .home-readout { grid-column: 1; }
    .staff-filter-row.staff-members-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .staff-filter-search { grid-column: 1 / -1; }
}

/* Below 860px the navigation moves to a bottom dock. */
@media (max-width: 860px) {
    .shell-bar { grid-template-columns: minmax(0, 1fr) auto; }
    .shell-nav {
        position: fixed;
        z-index: 70;
        left: 10px;
        right: 10px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        padding: 4px;
        border-color: var(--ts-border-strong);
        background: rgba(22, 23, 24, .9);
        -webkit-backdrop-filter: blur(16px) saturate(130%);
        backdrop-filter: blur(16px) saturate(130%);
        box-shadow: 0 20px 44px -16px rgba(0, 0, 0, .85);
    }
    .shell-nav button { flex: 1 1 0; min-width: 0; min-height: 50px; padding: 6px 2px; flex-direction: column; justify-content: center; gap: 4px; font-size: 10.5px; }
    .shell-nav button::before { width: 18px; height: 18px; }
    .shell-nav-indicator { top: 4px; bottom: 4px; }
    .reference-home,
    .portal-panels { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
    #toast { right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 24px); }
}

@media (max-width: 768px) {
    :root { --gap: 12px; }
    .invite-metrics { grid-template-columns: minmax(0, 1fr); }
    .invite-metrics > div { min-height: 0; }
    .one-time-reveal { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .one-time-reveal > button { justify-self: start; }
    .home-shortcuts { grid-template-columns: minmax(0, 1fr); }
    .home-shortcut { border-right: 0; border-bottom: 1px solid var(--ts-border); }
    .home-shortcut:last-child { border-bottom: 0; }
    .support-thread { padding: 18px; }
    .support-compose { grid-template-columns: minmax(0, 1fr); }
    .ticket-edit-panel { grid-template-columns: minmax(0, 1fr); }
    .ticket-message { max-width: 100%; }
    .staff-overview-layout .staff-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .staff-attention-item { align-items: flex-start; flex-direction: column; gap: 10px; }
    .staff-filter-row,
    .staff-create-row { align-items: stretch; flex-direction: column; }
    .staff-filter-row.staff-members-filter { grid-template-columns: minmax(0, 1fr); }
    .staff-filter-row .staff-members-meta { margin-left: 0; }
    .staff-audit-toolbar input { max-width: none; margin-left: 0; }
    .staff-tab .tab-count { display: none; }
    .staff-table,
    .uhd-table { min-width: 720px; }
    .staff-members-table { min-width: 600px; }
    .uhd-modal { padding: 12px; align-items: end; }
    .uhd-modal-panel { max-height: calc(100dvh - 24px); padding: 18px; }
}

@media (max-width: 520px) {
    #user-role-badge { display: none; }
    #user-display-name { max-width: 96px; }
    .shell-brand { display: none; }
    .auth-card { padding: 26px 20px 22px; }
    .home-module { padding: 22px 18px; }
    .home-module::after { inset: 8px; }
    .reference-download-link { align-self: stretch; justify-content: center; min-height: 48px; }
    .home-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .home-steps li,
    .home-steps li:first-child { padding: 0 0 0 12px; border-left: 1px solid var(--ts-border); }
    .home-readout { padding: 4px 16px 16px; }
    .uhd-panel-heading { align-items: flex-start; flex-direction: column; }
    .uhd-heading-actions { justify-content: flex-start; }
    .account-identity-strip { grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
    .account-role { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: space-between; justify-items: start; align-items: center; padding-top: 12px; border-top: 1px solid var(--ts-border); text-align: left; }
    .account-avatar { width: 46px; height: 46px; font-size: 18px; }
    .uhd-ledger-row { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 18px; }
    .account-copy-value { width: 100%; }
    .account-section-heading,
    .account-security-heading { flex-direction: column; padding: 18px; }
    .account-redeem-form,
    #account-password-form { padding: 16px 18px 18px; }
    .account-redeem-form { grid-template-columns: minmax(0, 1fr); }
    .account-redeem-form .uhd-primary { justify-self: start; }
    .uhd-section-heading { padding: 12px 16px; }
    .recovery-codes { grid-template-columns: minmax(0, 1fr); }
    .staff-overview-layout .staff-metrics { grid-template-columns: minmax(0, 1fr); }
    .staff-history-empty { grid-template-columns: minmax(0, 1fr); }
}

/* Reduced motion: nothing travels, scales or loops. Colour and opacity changes keep their
   short fades, and app.js still cross-fades pages with opacity alone. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-property: color, background-color, border-color, box-shadow, opacity !important; }
}