/* =============================================================================
    Zenvee Portal — app.css
   BlazeStack-style shell (dark sidebar + white topbar + gray content)
   Shell: zs-* classes
    Page components: admin-* classes and page-level theme rules
   ============================================================================= */

/* ── Variables ───────────────────────────────────────────────────────────── */
:root {
    color-scheme: light;

    /* Brand palette (used by page components) */
    --zen-ink:    #1f1634;
    --zen-slate:  #6f6487;
    --zen-berry:  #f24b7c;
    --zen-violet: #5c44ff;
    --zen-night:  #151224;
    --panel-light: rgba(255, 255, 255, 0.92);
    --panel-dark:  rgba(10, 16, 30, 0.90);
    --border-light: rgba(92, 68, 255, 0.14);
    --zen-text: #241b3c;
    --zen-text-strong: #1a132f;
    --zen-text-muted: #6f6487;
    --zen-text-soft: #84799c;
    --zen-text-on-accent: #ffffff;
    --zen-surface-page: #f1f4f8;
    --zen-surface-panel: rgba(255, 255, 255, 0.92);
    --zen-surface-subtle: rgba(255, 255, 255, 0.68);
    --zen-surface-input: rgba(255, 255, 255, 0.78);
    --zen-surface-accent-soft: rgba(92, 68, 255, 0.08);
    --zen-surface-elevated: rgba(255, 255, 255, 0.98);
    --zen-border-subtle: rgba(92, 68, 255, 0.14);
    --zen-border-faint: rgba(92, 68, 255, 0.08);
    --zen-shadow-panel: 0 4px 16px rgba(53, 25, 70, 0.06);
    --zen-link: #2f65e2;
    --zen-link-hover: #2856c1;
    --zen-focus-ring: rgba(79, 106, 245, 0.14);
    --zen-success-text: #146c43;
    --zen-success-strong: #18844a;
    --zen-success-surface: rgba(231, 255, 244, 0.98);
    --zen-success-surface-soft: rgba(226, 250, 237, 0.94);
    --zen-success-border: rgba(27, 135, 84, 0.3);
    --zen-success-border-soft: rgba(24, 132, 74, 0.18);
    --zen-error-text: #a61e4d;
    --zen-error-strong: #c43d4b;
    --zen-error-surface: rgba(255, 236, 241, 0.98);
    --zen-error-surface-soft: rgba(242, 75, 124, 0.10);
    --zen-error-border: rgba(192, 54, 84, 0.32);
    --zen-warning-text: #8a6700;
    --zen-warning-surface-soft: rgba(255, 247, 212, 0.9);
    --zen-warning-border-soft: rgba(184, 149, 0, 0.18);
    --bs-body-bg: var(--zen-surface-page);
    --bs-body-color: var(--zen-text);
    --bs-border-color: var(--zen-border-subtle);
    --bs-card-bg: var(--zen-surface-panel);
    --bs-card-color: var(--zen-text);
    --bs-card-border-color: var(--zen-border-subtle);
    --bs-card-cap-bg: var(--zen-surface-subtle);

    /* BlazeStack shell */
    --zs-sidebar-w:           230px;
    --zs-sidebar-w-collapsed:   64px;
    --zs-sidebar-bg:     #ffffff;
    --zs-sidebar-active: rgba(92, 68, 255, 0.08);
    --zs-sidebar-hover:  rgba(0, 0, 0, 0.04);
    --zs-sidebar-text:   #3e4e63;
    --zs-sidebar-label:  #8fa0b5;
    --zs-topbar-h:   60px;
    --zs-topbar-bg:  #ffffff;
    --zs-content-bg: var(--zen-surface-page);
    --zs-primary:    #4f6af5;
}

html.dark {
    color-scheme: dark;
    --zen-ink:     #f4f7fb;
    --zen-slate:   #b7c3d4;
    --zen-violet:  #a9bcff;
    --zen-berry:   #6ee7da;
    --panel-light: rgba(31, 39, 50, 0.92);
    --panel-dark:  rgba(25, 32, 42, 0.96);
    --border-light: rgba(173, 205, 255, 0.22);
    --zen-text: #eaf1fb;
    --zen-text-strong: #f7fbff;
    --zen-text-muted: #c6d0de;
    --zen-text-soft: #a9b6c8;
    --zen-surface-page: #0f1722;
    --zen-surface-panel: rgba(25, 32, 42, 0.96);
    --zen-surface-subtle: rgba(255, 255, 255, 0.06);
    --zen-surface-input: rgba(255, 255, 255, 0.08);
    --zen-surface-accent-soft: rgba(169, 188, 255, 0.14);
    --zen-surface-elevated: rgba(25, 32, 42, 0.98);
    --zen-border-subtle: rgba(173, 205, 255, 0.22);
    --zen-border-faint: rgba(255, 255, 255, 0.08);
    --zen-shadow-panel: 0 12px 28px rgba(0, 0, 0, 0.28);
    --zen-link: #9bb5ff;
    --zen-link-hover: #c8d7ff;
    --zen-focus-ring: rgba(173, 205, 255, 0.18);
    --zen-success-text: #d9fff1;
    --zen-success-strong: #a6f2d7;
    --zen-success-surface: rgba(24, 74, 67, 0.92);
    --zen-success-surface-soft: rgba(101, 216, 178, 0.18);
    --zen-success-border: rgba(101, 216, 178, 0.28);
    --zen-success-border-soft: rgba(166, 242, 215, 0.18);
    --zen-error-text: #ffe0e7;
    --zen-error-strong: #ffd2df;
    --zen-error-surface: rgba(93, 71, 86, 0.98);
    --zen-error-surface-soft: rgba(242, 154, 176, 0.18);
    --zen-error-border: rgba(242, 154, 176, 0.24);
    --zen-warning-text: #ffe39f;
    --zen-warning-surface-soft: rgba(243, 200, 107, 0.2);
    --zen-warning-border-soft: rgba(255, 227, 159, 0.18);
    --bs-body-bg: var(--zen-surface-page);
    --bs-body-color: var(--zen-text);
    --bs-border-color: var(--zen-border-subtle);
    --bs-card-bg: var(--zen-surface-panel);
    --bs-card-color: var(--zen-text);
    --bs-card-border-color: var(--zen-border-subtle);
    --bs-card-cap-bg: var(--zen-surface-subtle);
    --bs-secondary-color: var(--zen-text-soft);
    --bs-secondary-color-rgb: 169, 182, 200;
    --bs-tertiary-color: var(--zen-text-soft);
    --bs-tertiary-color-rgb: 169, 182, 200;
    --zs-topbar-bg:  #17212c;
    --zs-content-bg: var(--zen-surface-page);
    --zs-sidebar-bg:     #131c26;
    --zs-sidebar-active: rgba(255, 255, 255, 0.16);
    --zs-sidebar-hover:  rgba(255, 255, 255, 0.10);
    --zs-sidebar-text:   rgba(241, 246, 252, 0.92);
    --zs-sidebar-label:  rgba(205, 216, 229, 0.74);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }

body {
    font-family: "Aptos", "Segoe UI Variable Text", "Trebuchet MS", sans-serif;
    background: var(--zs-content-bg);
    color: var(--zen-text);
}

html.dark body { color: var(--zen-text); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
h1:focus { outline: none; }

/* ── BlazeStack shell ────────────────────────────────────────────────────── */

.zs-standalone {
    position: relative;
    min-height: 100vh;
    padding: 1.5rem;
    background: var(--zen-surface-page);
    overflow: hidden;
}

.zs-standalone-body {
    flex: 1;
    display: grid;
    place-items: center;
}

html.dark .zs-standalone {
    background: var(--zen-surface-page);
}

.zs-shell {
    display: flex;
    min-height: 100vh;
}

.zs-workspace-gate-shell {
    min-height: 100vh;
}

.zs-shell.is-workspace-gated .zs-sidebar,
.zs-shell.is-workspace-gated .zs-topbar,
.zs-shell.is-workspace-gated .zs-portal-footer {
    user-select: none;
}

.zs-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: rgba(0, 0, 0, 0.42);
}

@media (min-width: 992px) { .zs-backdrop { display: none; } }

.zs-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: var(--zs-sidebar-w);
    background: var(--zs-sidebar-bg);
    border-right: 1px solid var(--zen-border-faint);
    overflow-y: auto;
    overflow-x: hidden;
    transition: transform 260ms ease, width 260ms ease;
}

@media (max-width: 991.98px) {
    .zs-sidebar { transform: translateX(-100%); }
    .zs-sidebar.is-open { transform: translateX(0); }
}

/* Desktop sidebar collapsed (icon-only) */
@media (min-width: 992px) {
    .zs-sidebar.is-collapsed {
        width: var(--zs-sidebar-w-collapsed);
    }
    .zs-sidebar.is-collapsed .zs-brand-text,
    .zs-sidebar.is-collapsed .zs-nav-section-label,
    .zs-sidebar.is-collapsed .zs-nav-item-label,
    .zs-sidebar.is-collapsed .zs-nav-badge,
    .zs-sidebar.is-collapsed .zs-sidebar-version {
        display: none;
    }
    .zs-sidebar.is-collapsed .zs-brand {
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .zs-sidebar.is-collapsed .zs-nav {
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
    .zs-sidebar.is-collapsed .zs-nav-item {
        justify-content: center;
        padding: 0.6rem;
        gap: 0;
    }
    .zs-sidebar.is-collapsed .zs-nav-live-indicator {
        position: absolute;
        top: 0.46rem;
        right: 0.46rem;
        min-width: 1rem;
        height: 1rem;
        padding: 0;
        font-size: 0.58rem;
        margin-left: 0;
    }
    .zs-sidebar.is-collapsed .zs-nav-item .bi {
        font-size: 1.15rem;
        opacity: 0.82;
    }
}

.zs-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.1rem 1rem;
    border-bottom: 1px solid var(--zen-border-faint);
    color: var(--zen-text-strong);
    text-decoration: none;
}

html.dark .zs-brand { border-bottom-color: var(--zen-border-faint); color: var(--zen-text-strong); }
html.dark .zs-sidebar { border-right-color: var(--zen-border-faint); }

.zs-brand-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, var(--zen-berry), var(--zen-violet));
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
}

.zs-brand-text strong {
    display: block;
    max-width: 11.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--zen-text-strong);
    line-height: 1.2;
}

html.dark .zs-brand-text strong { color: var(--zen-text-strong); }

.zs-brand-text span {
    font-size: 0.7rem;
    color: var(--zs-sidebar-label);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.zs-nav {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0.65rem;
    flex: 1;
}

.zs-nav-section {
    margin-bottom: 0.35rem;
}

.zs-nav-section-label {
    margin: 0.6rem 0 0.25rem 0.55rem;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--zs-sidebar-label);
}

.zs-nav-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    position: relative;
    padding: 0.52rem 0.75rem;
    border-radius: 0.55rem;
    color: var(--zs-sidebar-text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
    border: none;
    background: transparent;
    text-decoration: none;
    width: 100%;
    text-align: left;
}

.zs-nav-item-label {
    min-width: 0;
}

.zs-nav-item:hover        { background: var(--zs-sidebar-hover); color: var(--zen-text-strong); text-decoration: none; }
.zs-nav-item.is-active    { background: var(--zs-sidebar-active); color: var(--zen-text-strong); font-weight: 600; }
html.dark .zs-nav-item:hover     { background: var(--zs-sidebar-hover); color: var(--zen-text-strong); }
html.dark .zs-nav-item.is-active { color: var(--zen-text-strong); }
.zs-nav-item-disabled     { opacity: 0.48; cursor: default; pointer-events: none; }

.zs-nav-badge {
    margin-left: auto;
    font-size: 0.67rem;
    font-weight: 700;
    padding: 0.12rem 0.42rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

html.dark .zs-nav-badge {
    background: rgba(89, 208, 198, 0.18);
    color: var(--zen-text-strong);
}

.zs-nav-item .bi { flex-shrink: 0; font-size: 0.95rem; opacity: 0.72; line-height: 1; }
.zs-nav-item:hover .bi, .zs-nav-item.is-active .bi { opacity: 1; }

.zs-nav-live-indicator {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: #f28b3c;
    color: #fffaf2;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 0 0 0 rgba(242, 139, 60, 0.52);
    animation: zs-nav-live-pulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
}

html.dark .zs-nav-live-indicator {
    background: #ffb562;
    box-shadow: 0 0 0 0 rgba(255, 181, 98, 0.42);
}

@keyframes zs-nav-live-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(0.92);
        box-shadow: 0 0 0 0 rgba(242, 139, 60, 0.5);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.12);
        box-shadow: 0 0 0 0.42rem rgba(242, 139, 60, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .zs-nav-live-indicator {
        animation: none;
    }
}

.zs-sidebar-version {
    margin: auto 0.85rem 0.85rem;
    padding: 0.72rem 0.8rem;
    border: 1px solid var(--zen-border-faint);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.62);
    color: var(--zs-sidebar-label);
    font-size: 0.72rem;
    line-height: 1.2;
}

.zs-sidebar-version span,
.zs-sidebar-version strong {
    display: block;
}

.zs-sidebar-version span {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.zs-sidebar-version strong {
    margin-top: 0.18rem;
    color: var(--zen-text-strong);
    font-size: 0.86rem;
    font-weight: 800;
}

html.dark .zs-sidebar-version {
    background: rgba(255, 255, 255, 0.06);
    color: var(--zs-sidebar-label);
}

/* ── Main column ────────────────────────────────────────────────────────── */
.zs-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    margin-left: var(--zs-sidebar-w);
    transition: margin-left 260ms ease;
}

@media (max-width: 991.98px) { .zs-main { margin-left: 0; } }

@media (min-width: 992px) {
    .zs-main.sidebar-is-collapsed { margin-left: var(--zs-sidebar-w-collapsed); }
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
.zs-topbar {
    position: sticky;
    top: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--zs-topbar-h);
    padding: 0 1.25rem;
    background: var(--zs-topbar-bg);
    border-bottom: 1px solid var(--zen-border-faint);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    color: var(--zen-text);
}

html.dark .zs-topbar {
    border-bottom-color: var(--zen-border-faint);
    box-shadow: 0 2px 10px rgba(8, 16, 30, 0.24);
}

.zs-topbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: 0.4rem;
    background: transparent;
    color: inherit;
    font-size: 1.35rem;
    cursor: pointer;
    line-height: 1;
}

.zs-topbar-toggle:hover { background: var(--zen-surface-accent-soft); }
html.dark .zs-topbar-toggle:hover { background: var(--zen-surface-accent-soft); color: var(--zen-text-strong); }

.zs-topbar-title {
    max-width: min(26rem, 34vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--zen-text-muted);
}

.zs-topbar-clock {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    gap: 0.45rem;
    padding: 0.48rem 0.8rem;
    border: 1px solid var(--zen-border-faint);
    border-radius: 999px;
    background: color-mix(in srgb, var(--zen-surface-elevated) 88%, transparent);
    color: var(--zen-text-strong);
    font-family: var(--bs-font-monospace, ui-monospace, monospace);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    pointer-events: none;
}

html.dark .zs-topbar-clock {
    background: color-mix(in srgb, var(--zen-surface-elevated) 82%, transparent);
    box-shadow: 0 14px 28px rgba(8, 16, 30, 0.28);
}

.zs-topbar-clock .bi {
    font-size: 0.82rem;
    opacity: 0.82;
}

.zs-user-menu-preferences {
    min-width: 20rem;
}

.zs-user-menu-timezone-select {
    width: 100%;
}

.zs-feedback-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(10px);
}

body:has(.zs-feedback-modal-overlay) { overflow: hidden; }

.zs-feedback-modal-dialog {
    width: min(34rem, 100%);
    max-height: calc(100vh - 3rem);
}

.zs-feedback-modal {
    overflow: hidden;
}

.zs-feedback-modal.is-success {
    border-color: var(--zen-success-border);
    background: linear-gradient(180deg, var(--zen-surface-elevated), var(--zen-success-surface));
    box-shadow: 0 1.1rem 2.8rem rgba(18, 105, 67, 0.16);
}

.zs-feedback-modal.is-error {
    border-color: var(--zen-error-border);
    background: linear-gradient(180deg, var(--zen-surface-elevated), var(--zen-error-surface));
    box-shadow: 0 1.1rem 2.8rem rgba(146, 39, 66, 0.18);
}

.zs-feedback-modal-message {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.65;
    color: var(--zen-text-strong);
}

.zs-feedback-modal.is-success .admin-eyebrow,
.zs-feedback-modal.is-success .admin-modal-title,
.zs-feedback-modal.is-success .zs-feedback-modal-message {
    color: var(--zen-success-text);
}

.zs-feedback-modal.is-error .admin-eyebrow,
.zs-feedback-modal.is-error .admin-modal-title,
.zs-feedback-modal.is-error .zs-feedback-modal-message {
    color: var(--zen-error-text);
}

html.dark .zs-feedback-modal.is-success {
    border-color: var(--zen-success-border);
    background: linear-gradient(180deg, var(--zen-surface-elevated), var(--zen-success-surface));
}

html.dark .zs-feedback-modal.is-error {
    border-color: var(--zen-error-border);
    background: linear-gradient(180deg, var(--zen-surface-elevated), var(--zen-error-surface));
}

.zs-user-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.5rem !important;
    border: 1px solid var(--zen-border-subtle) !important;
    border-radius: 2rem !important;
    background: transparent !important;
    color: inherit !important;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    box-shadow: none !important;
}

.zs-user-toggle:hover { background: var(--zen-surface-accent-soft) !important; }
html.dark .zs-user-toggle { border-color: var(--zen-border-subtle) !important; }
html.dark .zs-user-toggle:hover { background: var(--zen-surface-accent-soft) !important; border-color: var(--zen-border-subtle) !important; }

.zs-signout-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--bs-danger);
    cursor: pointer;
    width: 100%;
    text-align: start;
    font-weight: 600;
}

.zs-user-menu {
    min-width: 13.5rem;
    border-radius: 1rem;
    border: 1px solid var(--zen-border-subtle);
    background: var(--zen-surface-panel);
    box-shadow: 0 1.2rem 2.8rem rgba(14, 20, 31, 0.16);
    overflow: hidden;
}

.zs-user-menu .dropdown-item {
    color: var(--zen-text);
    font-weight: 500;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.zs-user-menu .dropdown-item:hover,
.zs-user-menu .dropdown-item:focus {
    background: var(--zen-surface-accent-soft);
    color: var(--zen-text-strong);
}

.zs-user-menu .dropdown-divider {
    margin: 0;
    border-top-color: var(--zen-border-faint);
}

.zs-user-menu-current-role {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    pointer-events: none;
}

.zs-user-menu-current-role-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--zen-text-soft);
}

.zs-user-menu .form-check-input {
    background-color: rgba(79, 106, 245, 0.22);
    border-color: rgba(79, 106, 245, 0.28);
}

.zs-user-menu .form-check-input:checked {
    background-color: var(--zs-primary);
    border-color: var(--zs-primary);
}

.zs-user-menu .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(79, 106, 245, 0.18);
}

.zs-user-menu .zs-signout-btn {
    color: var(--zen-error-text);
}

.zs-user-menu .zs-signout-btn:hover {
    color: var(--zen-error-strong);
}

html.dark .zs-user-menu {
    border-color: var(--zen-border-subtle);
    background: var(--zen-surface-panel);
    box-shadow: 0 1.25rem 2.8rem rgba(8, 16, 30, 0.28);
}

html.dark .zs-user-menu .dropdown-item {
    color: var(--zen-text);
}

html.dark .zs-user-menu .dropdown-item:hover,
html.dark .zs-user-menu .dropdown-item:focus {
    background: var(--zen-surface-accent-soft);
    color: var(--zen-text-strong);
}

html.dark .zs-user-menu .dropdown-divider {
    border-top-color: var(--zen-border-faint);
}

html.dark .zs-user-menu-current-role-label {
    color: var(--zen-text-soft);
}

html.dark .zs-user-menu .form-check-input {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(226, 235, 255, 0.20);
}

html.dark .zs-user-menu .form-check-input:checked {
    background-color: var(--zen-violet);
    border-color: var(--zen-violet);
}

html.dark .zs-user-menu .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(226, 235, 255, 0.18);
}

html.dark .zs-user-menu .zs-signout-btn {
    color: var(--zen-error-text);
}

html.dark .zs-user-menu .zs-signout-btn:hover {
    color: var(--zen-text-strong);
}

.zs-user-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--zen-text-strong);
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.dark .zs-user-name { color: var(--zen-text-strong); }

.zs-user-photo {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    object-fit: cover;
    flex-shrink: 0;
}

.zs-user-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--zen-berry), var(--zen-violet));
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

/* ── Content area ────────────────────────────────────────────────────────── */
.zs-content {
    flex: 1;
    padding: 1.5rem;
    background: var(--zs-content-bg);
}

.zs-portal-footer {
    padding: 0 1.5rem 1.25rem;
    color: rgba(68, 56, 93, 0.72);
    font-size: 0.82rem;
    text-align: center;
}

.zs-portal-footer-standalone {
    width: 100%;
    padding-top: 1rem;
}

html.dark .zs-portal-footer {
    color: rgba(237, 243, 251, 0.74);
}

/* Blazor error UI */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem;
    position: fixed;
    width: 100%;
    z-index: 9000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* =============================================================================
    Page component styles
   ============================================================================= */

/* ── Typography ─────────────────────────────────────────────────────────── */
.admin-muted { color: var(--zen-text-muted); line-height: 1.65; }

.admin-eyebrow {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--zen-text-soft);
}

.admin-section-title {
    margin: 0.45rem 0 0;
    font-family: "Aptos Display", "Segoe UI Variable Display", "Trebuchet MS", sans-serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--zen-text-strong);
}

.admin-section-subtitle { margin: 0; font-size: 1rem; font-weight: 600; color: var(--zen-text); }
.admin-subsection-title { margin: 0.35rem 0 0; font-size: 1.05rem; color: var(--zen-text-strong); }

.zen-schedule-lane-deck {
    gap: 1.2rem;
}

.zen-schedule-lane-card {
    overflow: hidden;
    border: 1px solid rgba(78, 61, 154, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(252, 247, 255, 0.96)),
        linear-gradient(135deg, rgba(255, 214, 170, 0.16), rgba(124, 92, 255, 0.08));
    box-shadow: 0 18px 36px rgba(46, 33, 94, 0.08);
}

.zen-schedule-lane-body {
    padding: 1.3rem;
}

.zen-schedule-lane-header {
    padding: 1.15rem 1.2rem;
    border: 1px solid rgba(112, 87, 255, 0.12);
    border-radius: 1.35rem;
    background:
        linear-gradient(135deg, rgba(255, 241, 222, 0.98), rgba(244, 240, 255, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.zen-schedule-lane-header-copy {
    display: grid;
    gap: 0.1rem;
}

.zen-schedule-lane-stats {
    font-size: 1rem;
    font-weight: 700;
    color: var(--zen-text);
}

.zen-schedule-lane-chip {
    background: rgba(112, 87, 255, 0.12);
}

.zen-schedule-lane-section {
    padding: 1.15rem 1.2rem;
    border: 1px solid rgba(78, 61, 154, 0.08);
    border-radius: 1.3rem;
    background: rgba(255, 255, 255, 0.78);
}

html.dark .zen-schedule-lane-card {
    border-color: rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(42, 51, 71, 0.98), rgba(35, 43, 62, 0.96)),
        linear-gradient(135deg, rgba(255, 214, 170, 0.06), rgba(124, 92, 255, 0.08));
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
}

html.dark .zen-schedule-lane-header {
    border-color: rgba(255, 255, 255, 0.08);
    background: linear-gradient(135deg, rgba(74, 64, 103, 0.7), rgba(48, 58, 86, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.dark .zen-schedule-lane-section {
    border-color: rgba(255, 255, 255, 0.07);
    background: rgba(23, 30, 46, 0.62);
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.admin-view-stack          { display: grid; gap: 1.4rem; }
.admin-overview-grid       { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.admin-grid-overview       { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.85fr); align-items: start; }
.admin-grid-two            { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.admin-panel-stack         { display: grid; gap: 1rem; }
.admin-actions-row         { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.admin-detail-list         { display: grid; gap: .7rem; margin: 0; }
.admin-detail-list div     { display: grid; gap: .2rem; padding-bottom: .65rem; border-bottom: 1px solid var(--zen-border-faint); }
.admin-detail-list div:last-child { padding-bottom: 0; border-bottom: 0; }
.admin-detail-list dt      { color: var(--zen-text-muted); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.admin-detail-list dd      { margin: 0; color: var(--zen-text-strong); font-weight: 700; overflow-wrap: anywhere; }
.admin-notes-preview       { min-height: 10rem; padding: 1rem 1.1rem; border: 1px solid var(--zen-border-faint); border-radius: 1.2rem; background: var(--zen-surface-soft); color: var(--zen-text); white-space: pre-wrap; word-break: break-word; }
.admin-inline-action-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.65rem;
    flex-wrap: wrap;
}

.admin-inline-action-note .admin-form-note {
    margin: 0;
}

.admin-actions-column {
    display: grid;
    gap: .65rem;
    align-items: start;
}

.admin-actions-column .admin-ghost-button {
    justify-content: center;
}

.technician-availability-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(14rem, 1.2fr) minmax(10rem, auto) auto;
    gap: .85rem;
    align-items: end;
}

.technician-availability-reason {
    min-width: 0;
}

.admin-checkbox-field {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--zen-muted);
    font-weight: 800;
}

.admin-checkbox-field input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--zen-accent);
}

.admin-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: .45rem .75rem;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-status-info {
    color: #075985;
    background: rgba(125, 211, 252, .28);
    border: 1px solid rgba(14, 165, 233, .28);
}

html.dark .admin-status-info {
    color: #bae6fd;
    background: rgba(14, 165, 233, .14);
    border-color: rgba(125, 211, 252, .22);
}

.technician-availability-repeat {
    align-self: center;
    margin-block-end: .2rem;
}

.technician-availability-list {
    display: grid;
    gap: .75rem;
}

.technician-availability-window-card {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: .95rem 1rem;
    border-radius: 1.2rem;
    border: 1px solid var(--zen-border-faint);
    background: rgba(255,255,255,.72);
}

html.dark .technician-availability-window-card {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.12);
}

@media (max-width: 992px) {
    .technician-availability-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .technician-availability-form,
    .technician-availability-window-card {
        grid-template-columns: 1fr;
    }

    .technician-availability-window-card {
        display: grid;
    }
}

.admin-onboarding-welcome-shell {
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(240,247,255,.94));
}

html.dark .admin-onboarding-welcome-shell {
    background: linear-gradient(145deg, rgba(100,114,128,.96), rgba(84,98,112,.94));
}

.admin-onboarding-welcome-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(16rem, .9fr);
    gap: 1rem;
    align-items: start;
}

.admin-onboarding-callout {
    display: grid;
    gap: .75rem;
    padding: 1rem;
    border-radius: 1.4rem;
    border: 1px solid rgba(92,68,255,.08);
    background: rgba(255,255,255,.62);
}

html.dark .admin-onboarding-callout {
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
}

.admin-technician-path-gallery {
    overflow: hidden;
    border-radius: 1.35rem;
    border: 1px solid rgba(92,68,255,.14);
    background:
        radial-gradient(circle at 15% 15%, rgba(248,163,216,.2), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.82), rgba(235,243,255,.76));
}

html.dark .admin-technician-path-gallery {
    border-color: rgba(255,255,255,.14);
    background:
        radial-gradient(circle at 15% 15%, rgba(248,163,216,.16), transparent 34%),
        linear-gradient(135deg, rgba(21,31,46,.96), rgba(38,50,68,.9));
}

.admin-technician-path-slide {
    min-height: 12rem;
    padding: 1.25rem 3.5rem;
    display: grid;
    align-content: center;
    gap: .55rem;
}

.admin-technician-path-slide .admin-form-note {
    max-width: 42rem;
}

.admin-technician-path-gallery .carousel-control-prev,
.admin-technician-path-gallery .carousel-control-next {
    width: 2.75rem;
}

.admin-technician-path-gallery .carousel-indicators {
    margin-bottom: .45rem;
}

.admin-technician-path-gallery .carousel-indicators [data-bs-target] {
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
}

.admin-onboarding-checklist {
    display: grid;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-onboarding-check-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .8rem;
    align-items: start;
}

.admin-onboarding-check-item strong,
.admin-onboarding-step-meta strong {
    display: block;
    margin-bottom: .15rem;
}

.admin-onboarding-check-item small,
.admin-onboarding-step-meta small {
    display: block;
    color: var(--zen-slate);
    line-height: 1.5;
}

.admin-onboarding-check-icon,
.admin-onboarding-step-number {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--zen-berry), var(--zen-violet));
    color: #fff;
    font-size: .82rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(92,68,255,.18);
}

.admin-onboarding-wizard { gap: 1.2rem; }

.admin-onboarding-progress-shell {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.admin-onboarding-progress-copy {
    display: grid;
    justify-items: end;
    gap: .2rem;
}

.admin-onboarding-progress-bar {
    width: 100%;
    height: .8rem;
    border-radius: 999px;
    background: rgba(92,68,255,.08);
    overflow: hidden;
}

.admin-onboarding-progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--zen-berry), var(--zen-violet));
    transition: width 160ms ease;
}

.admin-onboarding-step-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.admin-onboarding-requirement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: .75rem;
}

.admin-onboarding-step-button {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    align-items: center;
    width: 100%;
    padding: .9rem 1rem;
    border: 1px solid rgba(92,68,255,.08);
    border-radius: 1.2rem;
    background: rgba(255,255,255,.68);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
}

.admin-onboarding-step-button:hover {
    border-color: rgba(92,68,255,.18);
    box-shadow: 0 0 0 1px rgba(92,68,255,.08), 0 10px 24px rgba(92,68,255,.10);
    transform: translateY(-1px);
}

.admin-onboarding-step-button.is-current {
    border-color: rgba(92,68,255,.22);
    background: rgba(92,68,255,.08);
}

.admin-onboarding-step-button.is-complete {
    border-color: rgba(50,199,177,.22);
    background: rgba(50,199,177,.08);
}

html.dark .admin-onboarding-step-button {
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
}

html.dark .admin-onboarding-step-button.is-current {
    border-color: rgba(143,168,255,.24);
    background: rgba(143,168,255,.14);
}

html.dark .admin-onboarding-step-button.is-complete {
    border-color: rgba(101,216,178,.24);
    background: rgba(101,216,178,.12);
}

.admin-onboarding-note {
    display: grid;
    gap: .65rem;
    padding: 1rem 1.1rem;
    border-radius: 1.25rem;
}

.admin-onboarding-requirement-card {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: .9rem;
    padding: .95rem 1rem;
    border: 1px solid rgba(92,68,255,.09);
    border-radius: 1.15rem;
    background: rgba(255,255,255,.68);
}

.admin-onboarding-requirement-card.is-complete {
    border-color: rgba(50,199,177,.18);
    background: linear-gradient(180deg, rgba(50,199,177,.12), rgba(255,255,255,.78));
}

.admin-onboarding-requirement-copy {
    display: grid;
    gap: .25rem;
}

.admin-onboarding-requirement-copy small {
    color: var(--zen-slate);
}

html.dark .admin-onboarding-requirement-card {
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
}

html.dark .admin-onboarding-requirement-card.is-complete {
    border-color: rgba(101,216,178,.24);
    background: linear-gradient(180deg, rgba(101,216,178,.12), rgba(255,255,255,.06));
}

.admin-onboarding-summary-grid,
.admin-workspace-tool-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.admin-workspace-tool-card {
    display: grid;
    gap: .35rem;
    padding: 1rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(92,68,255,.08);
    background: rgba(255,255,255,.62);
}

html.dark .admin-workspace-tool-card {
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
}

.admin-workspace-tool-card span {
    color: var(--zen-slate);
    font-size: .86rem;
}

.shop-themed-header {
    border: 1px solid rgba(36, 24, 68, 0.06);
    box-shadow: 0 10px 30px rgba(44, 24, 74, 0.06);
}

.shop-themed-header__image {
    display: block;
    width: 100%;
    height: 6rem;
    object-fit: cover;
    object-position: center;
}

html.dark .shop-themed-header__image {
    filter: brightness(0.9) saturate(0.94);
}

.shop-themed-header__body {
    background: var(--zen-surface-panel);
}

.shop-themed-header .admin-form-note {
    max-width: 52rem;
}

html.dark .shop-themed-header {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 34px rgba(8, 16, 30, 0.22);
}

html.dark .shop-themed-header__body {
    background: var(--zen-surface-panel);
}

.shop-home-hero-panel {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.82), transparent 32%),
        linear-gradient(135deg, rgba(255, 244, 233, 0.96), rgba(238, 231, 255, 0.94));
}

html.dark .shop-home-hero-panel {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.08), transparent 28%),
        linear-gradient(135deg, rgba(36, 24, 68, 0.9), rgba(20, 32, 54, 0.92));
}

/* First-login emphasis: prompt the owner to complete their shop profile. Accent border so it stands
   out above the hero. */
.shop-home-setup-callout {
    border-left: 4px solid var(--zen-link);
    background: linear-gradient(135deg, rgba(47, 101, 213, 0.07), rgba(47, 101, 213, 0.02));
}

html.dark .shop-home-setup-callout {
    background: linear-gradient(135deg, rgba(47, 101, 213, 0.18), rgba(47, 101, 213, 0.06));
}

.shop-home-setup-callout-action {
    white-space: nowrap;
}

.shop-home-hero-copy {
    display: grid;
    gap: 0.45rem;
}

.shop-home-hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
}

.shop-home-nav-card {
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    border: 1px solid rgba(36, 24, 68, 0.06);
    cursor: pointer;
}

.shop-home-nav-card:hover,
.shop-home-nav-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 1.2rem 2.8rem rgba(44, 24, 74, 0.14) !important;
    border-color: rgba(98, 79, 255, 0.18);
}

.shop-home-nav-card:active {
    transform: translateY(-2px) scale(0.99);
}

html.dark .shop-home-nav-card {
    border-color: rgba(255, 255, 255, 0.08);
}

html.dark .shop-home-nav-card:hover,
html.dark .shop-home-nav-card:focus-visible {
    box-shadow: 0 1.3rem 3rem rgba(8, 16, 30, 0.32) !important;
    border-color: rgba(180, 172, 255, 0.18);
}

.shop-home-nav-image {
    height: 5.5rem;
    object-fit: cover;
}

html.dark .shop-home-nav-image {
    filter: brightness(0.9) saturate(0.94);
}

.customer-workspace-page {
    gap: 1.25rem;
}

.customer-workspace-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.customer-workspace-header-home {
    padding: 0;
}

.customer-workspace-header-copy {
    display: grid;
    gap: 0.45rem;
    max-width: 46rem;
}

.customer-workspace-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.customer-workspace-category-deck {
    gap: 1rem;
}

.customer-workspace-assistant-composer-actions {
    justify-content: space-between;
}

.customer-workspace-assistant-composer-actions-end {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.zen-assistant-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    border: 1px solid rgba(36, 24, 68, 0.14);
    background: rgba(255, 255, 255, 0.85);
    color: var(--zen-ink, #241844);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.zen-assistant-icon-button:hover:not(:disabled) {
    background: rgba(92, 68, 255, 0.1);
    border-color: rgba(92, 68, 255, 0.35);
    color: #4a32d6;
}

.zen-assistant-icon-button:disabled {
    opacity: 0.6;
    cursor: default;
}

html.dark .zen-assistant-icon-button {
    background: rgba(25, 32, 42, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
    color: #e2e8f0;
}

html.dark .zen-assistant-icon-button:hover:not(:disabled) {
    background: rgba(127, 188, 255, 0.16);
    border-color: rgba(127, 188, 255, 0.45);
    color: #bcd4ff;
}

.zen-spin {
    display: inline-block;
    animation: zen-spin 0.9s linear infinite;
}

@keyframes zen-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.customer-workspace-section-heading,
.customer-workspace-category-header,
.customer-workspace-service-item,
.customer-workspace-app-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.customer-workspace-section-heading,
.customer-workspace-category-header,
.customer-workspace-service-item {
    align-items: flex-start;
    justify-content: space-between;
}

.customer-workspace-service-list {
    display: grid;
    gap: 0.85rem;
}

.customer-workspace-provider-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.customer-workspace-assistant-launcher {
    position: fixed;
    right: 1.25rem;
    top: 74vh;
    bottom: auto;
    transform: translateY(-50%);
    z-index: 72;
    border: 0;
    padding: 0;
    background: transparent;
}

.customer-workspace-assistant-launcher-shell {
    display: inline-grid;
    place-items: center;
    width: 5.2rem;
    height: 5.2rem;
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 28% 25%, rgba(255, 255, 255, 0.32), transparent 34%),
        linear-gradient(155deg, var(--zen-violet), var(--zen-berry));
    box-shadow: 0 18px 44px rgba(70, 44, 135, 0.28);
}

.customer-workspace-assistant-launcher-core {
    display: inline-grid;
    place-items: center;
    width: 3.55rem;
    height: 3.55rem;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.2), transparent 34%),
        linear-gradient(160deg, #7a63ff, #ef5b8f);
    color: #fff;
    font-size: 1.45rem;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 10px 22px rgba(80, 55, 160, 0.28);
}

.customer-workspace-assistant-launcher:hover .customer-workspace-assistant-launcher-shell {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 22px 48px rgba(70, 44, 135, 0.34);
}

.customer-workspace-assistant-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 1.25rem;
    background: rgba(15, 20, 36, 0.14);
}

body:has(.customer-workspace-assistant-overlay) {
    overflow: hidden;
}

.customer-workspace-assistant-drawer {
    width: min(25rem, calc(100vw - 2.5rem));
    max-height: min(44rem, calc(100vh - 2.5rem));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(36, 24, 68, 0.08);
    border-radius: 1.4rem;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.74), transparent 32%),
        linear-gradient(180deg, rgba(255, 250, 244, 0.98), rgba(247, 249, 255, 0.98));
    box-shadow: 0 24px 60px rgba(14, 18, 34, 0.24);
}

.customer-workspace-assistant-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.15rem 1rem;
    border-bottom: 1px solid rgba(36, 24, 68, 0.08);
}

.customer-workspace-assistant-drawer-body {
    display: grid;
    gap: 0.9rem;
    min-height: 0;
    padding: 1rem 1.15rem 1.15rem;
    overflow: auto;
}

.customer-workspace-assistant-shell {
    display: grid;
    gap: 1rem;
}

.customer-workspace-assistant-session-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
    padding: 0.75rem 0.95rem;
    border: 1px solid rgba(36, 24, 68, 0.08);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.88rem;
}

.customer-workspace-assistant-session-banner-title {
    font-weight: 700;
}

.customer-workspace-assistant-session-banner-meta {
    opacity: 0.74;
}

.customer-workspace-assistant-thread {
    display: grid;
    gap: 0.85rem;
}

.customer-workspace-assistant-message {
    display: grid;
    gap: 0.45rem;
    max-width: 48rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    background: rgba(240, 247, 255, 0.88);
    border: 1px solid rgba(58, 112, 173, 0.14);
}

.customer-workspace-assistant-message.is-user {
    justify-self: end;
    background: rgba(239, 236, 255, 0.9);
    border-color: rgba(92, 68, 255, 0.16);
}

.customer-workspace-assistant-message.is-operator {
    background: rgba(225, 247, 236, 0.92);
    border-color: rgba(34, 153, 102, 0.24);
}

.customer-workspace-assistant-message.is-system {
    justify-self: center;
    max-width: 90%;
    text-align: center;
    background: transparent;
    border: none;
    padding: 0.25rem 0.5rem;
    color: var(--zen-slate);
    font-size: 0.85rem;
}

.customer-workspace-assistant-message.is-system .customer-workspace-assistant-message-meta {
    display: none;
}

.customer-workspace-assistant-message p {
    margin-bottom: 0;
    white-space: pre-wrap;
}

.customer-workspace-assistant-handoff-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.95rem;
    border-radius: 0.85rem;
    background: rgba(255, 244, 224, 0.9);
    border: 1px solid rgba(214, 158, 46, 0.3);
    color: #5c4a1a;
    font-size: 0.92rem;
}

.customer-workspace-assistant-handoff-banner.is-active {
    background: rgba(225, 247, 236, 0.92);
    border-color: rgba(34, 153, 102, 0.3);
    color: #14502f;
}

.customer-workspace-assistant-handoff-icon {
    font-size: 1rem;
    line-height: 1;
}

html.dark .customer-workspace-assistant-message.is-operator {
    background: rgba(34, 153, 102, 0.18);
    border-color: rgba(34, 153, 102, 0.4);
}

html.dark .customer-workspace-assistant-handoff-banner {
    background: rgba(214, 158, 46, 0.16);
    border-color: rgba(214, 158, 46, 0.4);
    color: #f4dca0;
}

html.dark .customer-workspace-assistant-handoff-banner.is-active {
    background: rgba(34, 153, 102, 0.18);
    border-color: rgba(34, 153, 102, 0.4);
    color: #bce8cf;
}

.customer-workspace-assistant-message-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--zen-slate);
    font-size: 0.85rem;
}

.customer-workspace-assistant-composer {
    padding: 1rem 1.1rem;
    border: 1px solid rgba(36, 24, 68, 0.08);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
}

.customer-workspace-provider-card {
    min-height: 100%;
}

.customer-workspace-page-home .customer-workspace-bookings-panel {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    background:
        radial-gradient(circle at top right, rgba(92, 68, 255, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 255, 0.94));
}

.customer-workspace-page-bookings .customer-workspace-bookings-panel {
    border: 1px solid rgba(196, 111, 44, 0.16);
    background:
        radial-gradient(circle at top right, rgba(255, 199, 142, 0.24), transparent 24%),
        radial-gradient(circle at bottom left, rgba(255, 229, 204, 0.78), transparent 30%),
        linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(255, 244, 232, 0.96));
    box-shadow: 0 14px 30px rgba(151, 88, 42, 0.08);
}

.customer-workspace-bookings-panel-header {
    display: grid;
    gap: 0.6rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(196, 111, 44, 0.14);
    border-radius: 1.1rem;
    background:
        radial-gradient(circle at 94% 18%, rgba(255, 255, 255, 0.58), transparent 24%),
        linear-gradient(160deg, rgba(255, 247, 236, 0.98), rgba(255, 239, 223, 0.96));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.customer-workspace-bookings-panel-header .admin-section-title,
.customer-workspace-bookings-panel-header .admin-form-note {
    margin-bottom: 0;
}

.customer-workspace-booking-card {
    border-radius: 1.2rem;
    box-shadow: 0 12px 26px rgba(23, 30, 58, 0.06);
}

.customer-workspace-provider-list {
    display: grid;
    gap: 0.75rem;
}

.customer-workspace-shop-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
    gap: 0.8rem;
}

.customer-workspace-shop-option-shell,
.customer-workspace-provider-option-shell {
    position: relative;
}

.customer-workspace-shop-option {
    display: grid;
    gap: 0.28rem;
    width: 100%;
    min-height: 6.75rem;
    padding: 0.95rem 4rem 0.95rem 1rem;
    text-align: left;
    align-content: end;
    border: 1px solid rgba(216, 109, 44, 0.16);
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.9), transparent 30%),
        radial-gradient(circle at 0% 100%, rgba(255, 215, 186, 0.55), transparent 38%),
        linear-gradient(160deg, rgba(255, 245, 230, 0.98), rgba(255, 232, 214, 0.96) 54%, rgba(245, 247, 255, 0.96));
    color: var(--zen-text-strong);
    box-shadow: 0 14px 30px rgba(199, 111, 42, 0.12);
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}

.customer-workspace-shop-option-icon {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    margin-bottom: 0.2rem;
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.92);
    color: #b85b2a;
    font-size: 1rem;
    box-shadow: inset 0 0 0 1px rgba(184, 91, 42, 0.1), 0 10px 18px rgba(184, 91, 42, 0.12);
}

.customer-workspace-shop-option:hover {
    transform: translateY(-3px);
    border-color: rgba(216, 109, 44, 0.32);
    box-shadow: 0 20px 36px rgba(199, 111, 42, 0.18);
}

.customer-workspace-shop-option.is-active {
    border-color: rgba(228, 103, 44, 0.42);
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.92), transparent 28%),
        radial-gradient(circle at 0% 100%, rgba(255, 200, 153, 0.7), transparent 40%),
        linear-gradient(160deg, rgba(255, 228, 204, 0.99), rgba(255, 245, 236, 0.98));
    box-shadow: 0 0 0 1px rgba(228, 103, 44, 0.16), 0 22px 38px rgba(145, 75, 33, 0.18);
}

.customer-workspace-shop-option-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

.customer-workspace-shop-option-meta {
    color: var(--zen-slate);
    font-size: 0.88rem;
    font-weight: 600;
}

.customer-workspace-provider-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 1rem;
    width: 100%;
    min-height: 7rem;
    padding: 0 4rem 0 0;
    text-align: left;
    border: 1px solid rgba(36, 24, 68, 0.08);
    border-radius: 1.2rem;
    background:
        radial-gradient(circle at 94% 14%, rgba(255, 255, 255, 0.84), transparent 26%),
        linear-gradient(160deg, rgba(250, 252, 255, 0.96), rgba(242, 247, 255, 0.94));
    color: var(--zen-text-strong);
    box-shadow: 0 16px 32px rgba(23, 30, 58, 0.08);
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}

.customer-workspace-provider-option:hover,
.customer-workspace-provider-option:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(92, 68, 255, 0.18);
    box-shadow: 0 22px 38px rgba(23, 30, 58, 0.12);
}

.customer-workspace-map-action {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border: 1px solid rgba(36, 24, 68, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--zen-text-strong);
    box-shadow: 0 8px 18px rgba(23, 30, 58, 0.08);
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, color 120ms ease;
}

.customer-workspace-map-action:hover,
.customer-workspace-map-action:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(92, 68, 255, 0.24);
    color: var(--zen-violet);
    box-shadow: 0 12px 24px rgba(23, 30, 58, 0.12);
}

.customer-workspace-provider-option.is-active {
    border-color: rgba(92, 68, 255, 0.3);
    background:
        radial-gradient(circle at 94% 14%, rgba(255, 255, 255, 0.9), transparent 24%),
        linear-gradient(160deg, rgba(239, 236, 255, 0.98), rgba(231, 241, 255, 0.96));
    box-shadow: 0 0 0 1px rgba(92, 68, 255, 0.12), 0 22px 38px rgba(49, 55, 90, 0.14);
}

.customer-workspace-provider-copy {
    display: grid;
    gap: 0.28rem;
    align-content: center;
    min-width: 0;
    padding: 0.9rem 0 0.9rem;
}

.customer-workspace-provider-rail {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    min-height: 100%;
    align-self: stretch;
    border-radius: 1.2rem 0 0 1.2rem;
    background: linear-gradient(180deg, #5a68d8, #7fb6ff);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

.customer-workspace-provider-rail::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 34%, rgba(8, 13, 24, 0.12));
    pointer-events: none;
}

.customer-workspace-provider-rail-label {
    position: relative;
    z-index: 1;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: rgba(247, 250, 255, 0.96);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.customer-workspace-provider-rail-icon {
    position: relative;
    z-index: 1;
    color: rgba(247, 250, 255, 0.97);
    font-size: 1.55rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(8, 13, 24, 0.28));
}

.customer-workspace-provider-map-shell {
    position: relative;
    width: 100%;
    height: 340px;
}

.customer-workspace-provider-map {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(90, 75, 214, 0.18);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
    background: #eef1f8;
}

.customer-workspace-provider-map-status {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    max-width: min(32rem, calc(100% - 2rem));
    width: max-content;
    padding: 1rem 1.15rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--zen-violet) 20%, transparent);
    background: rgba(255, 255, 255, 0.92);
    color: #241b3f;
    text-align: center;
    font-weight: 800;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
}

.customer-workspace-provider-map-note {
    margin-top: 0.6rem;
}

.customer-workspace-provider-option-shell:nth-child(4n + 1) .customer-workspace-provider-rail {
    background: linear-gradient(180deg, #5a68d8, #7fb6ff);
}

.customer-workspace-provider-option-shell:nth-child(4n + 2) .customer-workspace-provider-rail {
    background: linear-gradient(180deg, #0f9f91, #61d6c8);
}

.customer-workspace-provider-option-shell:nth-child(4n + 3) .customer-workspace-provider-rail {
    background: linear-gradient(180deg, #c56a36, #f0b06f);
}

.customer-workspace-provider-option-shell:nth-child(4n + 4) .customer-workspace-provider-rail {
    background: linear-gradient(180deg, #934dcb, #d59dff);
}

.customer-workspace-provider-title {
    font-weight: 700;
    min-width: 0;
    overflow-wrap: anywhere;
}

.customer-workspace-provider-title-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.customer-workspace-provider-icon {
    display: inline-grid;
    place-items: center;
    width: 1.95rem;
    height: 1.95rem;
    border-radius: 999px;
    background: rgba(238, 244, 255, 0.95);
    color: #4262a7;
    font-size: 0.95rem;
    box-shadow: inset 0 0 0 1px rgba(66, 98, 167, 0.12);
    flex: 0 0 auto;
}

.customer-workspace-provider-meta {
    color: var(--zen-slate);
    font-size: 0.92rem;
}

.customer-workspace-service-item {
    padding: 0.95rem 1rem;
    border: 1px solid rgba(36, 24, 68, 0.06);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.68);
}

.customer-workspace-service-item h4 {
    margin-bottom: 0.2rem;
    font-size: 1rem;
}

.customer-workspace-service-item p {
    margin-bottom: 0;
    color: var(--zen-slate);
}

.customer-workspace-service-meta {
    display: grid;
    gap: 0.2rem;
    justify-items: end;
    min-width: 7rem;
}

.customer-workspace-app-links {
    align-items: center;
}

#customer-apps {
    margin-top: 1rem;
}

@media (max-width: 900px) {
    .customer-workspace-provider-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .customer-workspace-assistant-launcher {
        right: 1rem;
        top: 72vh;
    }

    .customer-workspace-assistant-launcher-shell {
        width: 4.7rem;
        height: 4.7rem;
        border-radius: 1.2rem;
    }

    .customer-workspace-assistant-launcher-core {
        width: 3.25rem;
        height: 3.25rem;
        font-size: 1.3rem;
    }

    .customer-workspace-assistant-overlay {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
        background: rgba(8, 12, 22, 0.34);
    }

    .customer-workspace-assistant-drawer {
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    .customer-workspace-assistant-drawer-header {
        padding: 1rem 1rem 0.9rem;
    }

    .customer-workspace-assistant-drawer-body {
        padding: 0.95rem 1rem 1rem;
    }

}

html.dark .customer-workspace-service-item {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
}

html.dark .customer-workspace-assistant-session-banner,
html.dark .customer-workspace-assistant-composer {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.06);
}

html.dark .customer-workspace-assistant-launcher-shell {
    background:
        radial-gradient(circle at 28% 25%, rgba(255, 255, 255, 0.18), transparent 34%),
        linear-gradient(155deg, #8a9fff, #6ee7da);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
}

html.dark .customer-workspace-assistant-launcher-core {
    background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.16), transparent 34%),
        linear-gradient(160deg, #6d86ff, #4ecabf);
}

html.dark .customer-workspace-assistant-overlay {
    background: rgba(5, 8, 18, 0.28);
}

html.dark .customer-workspace-assistant-drawer {
    border-color: rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.05), transparent 30%),
        linear-gradient(180deg, rgba(26, 32, 46, 0.98), rgba(18, 24, 38, 0.98));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36);
}

html.dark .customer-workspace-assistant-drawer-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

html.dark .customer-workspace-assistant-message {
    background: rgba(76, 122, 185, 0.12);
    border-color: rgba(120, 180, 255, 0.18);
}

html.dark .customer-workspace-assistant-message.is-user {
    background: rgba(103, 82, 187, 0.16);
    border-color: rgba(161, 138, 255, 0.2);
}

html.dark .customer-workspace-shop-option {
    border-color: rgba(255, 179, 126, 0.18);
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.1), transparent 28%),
        radial-gradient(circle at 0% 100%, rgba(255, 167, 118, 0.16), transparent 38%),
        linear-gradient(160deg, rgba(67, 37, 23, 0.96), rgba(48, 28, 42, 0.96) 52%, rgba(24, 35, 54, 0.98));
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

html.dark .customer-workspace-shop-option-icon {
    background: rgba(255, 255, 255, 0.08);
    color: #ffb37e;
    box-shadow: inset 0 0 0 1px rgba(255, 179, 126, 0.14);
}

html.dark .customer-workspace-shop-option.is-active {
    border-color: rgba(255, 167, 118, 0.42);
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 255, 255, 0.12), transparent 26%),
        radial-gradient(circle at 0% 100%, rgba(255, 196, 156, 0.18), transparent 40%),
        linear-gradient(160deg, rgba(96, 52, 24, 0.96), rgba(70, 38, 52, 0.97) 56%, rgba(31, 40, 60, 0.98));
    box-shadow: 0 0 0 1px rgba(255, 167, 118, 0.16), 0 22px 38px rgba(0, 0, 0, 0.28);
}

html.dark .customer-workspace-bookings-panel {
    background:
        radial-gradient(circle at top right, rgba(143, 168, 255, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(25, 32, 42, 0.98), rgba(17, 24, 36, 0.96));
}

html.dark .customer-workspace-page-home .customer-workspace-bookings-panel {
    background:
        radial-gradient(circle at top right, rgba(143, 168, 255, 0.12), transparent 28%),
        linear-gradient(180deg, rgba(25, 32, 42, 0.98), rgba(17, 24, 36, 0.96));
}

html.dark .customer-workspace-page-bookings .customer-workspace-bookings-panel {
    border-color: rgba(245, 176, 104, 0.18);
    background:
        radial-gradient(circle at top right, rgba(255, 190, 120, 0.14), transparent 24%),
        radial-gradient(circle at bottom left, rgba(255, 149, 92, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(39, 28, 24, 0.99), rgba(25, 28, 40, 0.98));
    box-shadow: 0 20px 38px rgba(0, 0, 0, 0.28);
}

html.dark .customer-workspace-bookings-panel-header {
    border-color: rgba(245, 176, 104, 0.18);
    background:
        radial-gradient(circle at 94% 18%, rgba(255, 255, 255, 0.06), transparent 24%),
        linear-gradient(160deg, rgba(64, 42, 28, 0.98), rgba(39, 32, 42, 0.98));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

html.dark .customer-workspace-map-action {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(20, 26, 42, 0.92);
    color: rgba(232, 238, 255, 0.88);
}

html.dark .customer-workspace-provider-option {
    border-color: rgba(140, 167, 214, 0.14);
    background:
        radial-gradient(circle at 94% 14%, rgba(255, 255, 255, 0.05), transparent 24%),
        linear-gradient(160deg, rgba(28, 36, 52, 0.98), rgba(18, 24, 36, 0.98));
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

html.dark .customer-workspace-provider-option:hover,
html.dark .customer-workspace-provider-option:focus-visible {
    border-color: rgba(150, 178, 255, 0.24);
    box-shadow: 0 24px 42px rgba(0, 0, 0, 0.34);
}

html.dark .customer-workspace-provider-option.is-active {
    border-color: rgba(139, 158, 255, 0.34);
    background:
        radial-gradient(circle at 94% 14%, rgba(255, 255, 255, 0.08), transparent 22%),
        linear-gradient(160deg, rgba(39, 37, 71, 0.99), rgba(21, 29, 43, 0.99));
    box-shadow: 0 0 0 1px rgba(139, 158, 255, 0.1), 0 24px 44px rgba(0, 0, 0, 0.36);
}

html.dark .customer-workspace-provider-icon {
    background: rgba(255, 255, 255, 0.08);
    color: #9fc0ff;
    box-shadow: inset 0 0 0 1px rgba(159, 192, 255, 0.16);
}

html.dark .customer-workspace-provider-meta {
    color: rgba(206, 217, 242, 0.76);
}

.marketing-overview-card,
.marketing-module-card {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.72), transparent 34%),
        linear-gradient(145deg, rgba(255, 249, 239, 0.96), rgba(240, 247, 242, 0.94));
}

.marketing-overview-card .admin-stat-value,
.marketing-module-card .admin-section-title {
    color: var(--zen-text-strong);
}

html.dark .marketing-overview-card,
html.dark .marketing-module-card {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.06), transparent 28%),
        linear-gradient(145deg, rgba(44, 34, 56, 0.92), rgba(24, 42, 44, 0.94));
}

.account-overview-card {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.74), transparent 34%),
        linear-gradient(145deg, rgba(245, 246, 255, 0.97), rgba(240, 247, 255, 0.94));
}

.account-overview-card .admin-stat-value {
    color: var(--zen-text-strong);
}

html.dark .account-overview-card {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.06), transparent 28%),
        linear-gradient(145deg, rgba(34, 38, 66, 0.92), rgba(22, 38, 54, 0.94));
}

/* Folder-style tabs (shared: account + services pages). The wrapper div keeps the Blazorise
   nav and tab-content out of the admin-view-stack grid (so no 1.4rem gap between them), and
   the panel drops its top line + top rounding so the active tab and panel are one sheet. */
.folder-tabs .nav {
    border-bottom: 0;
    gap: .25rem;
    padding: 0 1.4rem;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.folder-tabs .nav-item .nav-link {
    border: 1px solid transparent;
    border-bottom: 0;
    border-top-left-radius: .85rem;
    border-top-right-radius: .85rem;
    padding: .6rem 1.1rem;
    font-weight: 700;
    color: var(--zen-text-muted);
    background: transparent;
}

.folder-tabs .nav-item .nav-link:hover {
    color: var(--zen-text);
    background: var(--zen-surface-subtle);
}

.folder-tabs .nav-item .nav-link.active {
    color: var(--zen-text-strong);
    background: var(--zen-surface-panel);
    border-color: var(--zen-border-subtle);
}

/* Folder body sits flush under the tab row: no gap, no top border line, no top rounding,
   so the active tab flows straight into the panel surface. */
.folder-tabs .tab-content {
    margin-top: 0;
}

.folder-tabs .tab-content .admin-panel {
    margin-top: 0;
}

/* Only the panel(s) that meet the tab row lose the top line + top rounding, so the active
   tab flows straight into the folder body. Panels stacked further down stay fully rounded.
   Covers: a single panel (account tabs), a row of panels (services Manage grid), and the
   first panel of a vertical stack (services Catalog rosters). */
.folder-tabs .tab-content .tab-pane > .admin-panel:first-child,
.folder-tabs .tab-content .tab-pane > .admin-grid-two:first-child > .admin-panel,
.folder-tabs .tab-content .tab-pane > .admin-view-stack:first-child > .admin-panel:first-child {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Logs tab: its first card lives inside a two-panel workspace, so drop that panel's top inset and the
   first card's top line/rounding too — the card then flows straight out of the folder tab like the others. */
.folder-tabs .tab-content .tab-pane > .admin-view-stack:first-child > .admin-logs-workspace:first-child .admin-logs-list-content {
    padding-top: 0;
}
.folder-tabs .tab-content .tab-pane > .admin-view-stack:first-child > .admin-logs-workspace:first-child .admin-logs-list-content > .admin-logs-cleanup-card:first-child {
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.admin-onboarding-modal-overlay { z-index: 3600; }

/* ── Stat cards ─────────────────────────────────────────────────────────── */
.admin-stat-card {
    padding: 1.35rem;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 1.7rem;
    background: #fff;
    box-shadow: 0 4px 16px rgba(53, 25, 70, 0.06);
}

.admin-stat-card-button {
    width: 100%;
    text-align: left;
    appearance: none;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.admin-stat-card-button:hover,
.admin-stat-card-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(53, 25, 70, 0.1);
    border-color: rgba(92, 68, 255, 0.24);
}

.admin-stat-card-button:focus-visible {
    outline: 2px solid rgba(92, 68, 255, 0.24);
    outline-offset: 3px;
}

html.dark .admin-stat-card {
    border-color: rgba(208, 221, 245, 0.15);
    background: #61707d;
}

html.dark .admin-stat-card-button:hover,
html.dark .admin-stat-card-button:focus-visible {
    border-color: rgba(143, 168, 255, 0.28);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.16);
}

.admin-stat-label       { margin: 0; font-size: 0.92rem; color: var(--zen-slate); }
.admin-stat-value       { margin: 0.55rem 0 0; font-family: "Aptos Display","Segoe UI Variable Display","Trebuchet MS",sans-serif; font-size: 2.35rem; font-weight: 800; line-height: 1; color: var(--zen-text-strong); }
.admin-stat-value-small { font-size: 1.65rem; }
.admin-stat-value-compact {
    font-size: clamp(1.35rem, 4vw, 2rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.admin-stat-delta       { margin: 0.55rem 0 0; font-size: 0.84rem; font-weight: 700; color: var(--zen-text-muted); }

/* ── Panels ─────────────────────────────────────────────────────────────── */
.admin-panel {
    border: 1px solid var(--zen-border-subtle);
    border-radius: 1.8rem;
    background: var(--zen-surface-panel);
    box-shadow: var(--zen-shadow-panel);
    color: var(--zen-text);
}

html.dark .admin-panel { border-color: var(--zen-border-subtle); background: var(--zen-surface-panel); }
.admin-panel-padding { padding: 1.4rem; }

.admin-section-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.admin-summary-status-row,
.admin-field-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-validation-list {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--zen-error-border);
    background: var(--zen-error-surface-soft);
    color: var(--zen-error-text);
    display: grid;
    gap: 0.35rem;
}

html.dark .admin-validation-list {
    border-color: var(--zen-error-border);
    background: var(--zen-error-surface-soft);
    color: var(--zen-error-text);
}

.workspace-editor-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

.workspace-editor-column {
    display: grid;
    gap: 0.8rem;
    align-content: start;
}

.workspace-settings-grid {
    align-items: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workspace-hours-usage-note {
    display: grid;
    gap: 0.35rem;
    padding: 0.9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--zen-sky) 28%, var(--zen-border-subtle));
    border-radius: 1rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--zen-sky) 12%, transparent), transparent 60%),
        var(--zen-surface);
    color: var(--zen-text);
    font-size: 0.9rem;
    line-height: 1.45;
}

.workspace-hours-usage-note strong {
    color: var(--zen-text-strong);
}

.workspace-hours-day-card {
    display: grid;
    gap: 0.7rem;
    overflow: hidden;
    border: 1px solid var(--zen-border-subtle);
    border-radius: 1rem;
    background: var(--zen-surface-subtle);
    padding: 0.85rem;
    color: var(--zen-text);
}

html.dark .workspace-hours-day-card {
    border-color: var(--zen-border-subtle);
    background: var(--zen-surface-subtle);
}

.workspace-hours-day-header {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.workspace-hours-day-title {
    min-width: 0;
}

.workspace-hours-header-ranges {
    display: grid;
    gap: 0.55rem;
    max-width: none;
    min-width: 0;
}

.workspace-hours-day-note {
    margin: -0.25rem 0 0;
    color: var(--zen-slate);
    font-size: 0.82rem;
    line-height: 1.4;
}

.workspace-hours-card-actions {
    display: flex;
    justify-content: flex-end;
}

.workspace-hours-state-toggle {
    min-width: 5.75rem;
    min-height: 2.5rem;
    padding: 0 0.85rem;
    border: 1px solid var(--zen-border-subtle);
    border-radius: 999px;
    background: var(--zen-surface-input);
    color: var(--zen-text-strong);
    font-size: 0.9rem;
    font-weight: 800;
    transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.workspace-hours-state-toggle.is-open {
    border-color: color-mix(in srgb, var(--zen-success-strong) 42%, var(--zen-border-subtle));
    background: color-mix(in srgb, var(--zen-success-strong) 14%, var(--zen-surface-input));
    color: var(--zen-success-strong);
}

.workspace-hours-state-toggle.is-closed {
    border-color: color-mix(in srgb, var(--zen-slate) 35%, var(--zen-border-subtle));
    background: color-mix(in srgb, var(--zen-slate) 12%, var(--zen-surface-input));
    color: var(--zen-text-muted);
}

.workspace-hours-state-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

.workspace-hours-interval-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
}

.workspace-hours-range-card {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--zen-border-subtle) 78%, transparent);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--zen-surface-elevated) 82%, transparent);
}

.workspace-hours-range-card.is-preview {
    opacity: 0.68;
}

.workspace-hours-range-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--zen-slate);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.workspace-hours-range-header strong {
    color: var(--zen-text-strong);
    font-size: 0.82rem;
    letter-spacing: 0;
    text-transform: none;
}

.workspace-hours-range-control {
    display: grid;
    gap: 0.2rem;
}

.workspace-hours-range-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--zen-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.workspace-hours-dual-range {
    position: relative;
    min-height: 2.15rem;
}

.workspace-hours-dual-range::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--zen-border-subtle) 72%, transparent);
    transform: translateY(-50%);
}

.workspace-hours-range-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 2.15rem;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    pointer-events: none;
}

.workspace-hours-range-input::-webkit-slider-runnable-track {
    height: 0.45rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
}

.workspace-hours-range-input::-moz-range-track {
    height: 0.45rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
}

.workspace-hours-range-input::-webkit-slider-thumb {
    width: 1.35rem;
    height: 1.35rem;
    margin-top: -0.45rem;
    border: 2px solid var(--zen-surface-elevated);
    border-radius: 999px;
    background: var(--zs-primary);
    box-shadow: 0 4px 14px rgba(79, 106, 245, 0.34);
    cursor: grab;
    pointer-events: auto;
    -webkit-appearance: none;
}

.workspace-hours-range-input::-moz-range-thumb {
    width: 1.35rem;
    height: 1.35rem;
    border: 2px solid var(--zen-surface-elevated);
    border-radius: 999px;
    background: var(--zs-primary);
    box-shadow: 0 4px 14px rgba(79, 106, 245, 0.34);
    cursor: grab;
    pointer-events: auto;
}

.workspace-hours-range-input:disabled::-webkit-slider-thumb {
    cursor: not-allowed;
}

.workspace-hours-range-input:disabled::-moz-range-thumb {
    cursor: not-allowed;
}

.workspace-hours-range-input-start {
    z-index: 2;
}

.workspace-hours-range-input-end {
    z-index: 3;
}

@media (max-width: 760px) {
    .workspace-profile-grid {
        grid-template-columns: 1fr;
    }

    .workspace-profile-grid .field.field-full {
        grid-column: 1 / -1;
    }

    .workspace-hours-day-header {
        grid-template-columns: 1fr auto;
        align-items: center;
    }

    .workspace-hours-header-ranges {
        grid-column: 1 / -1;
        order: 3;
    }
}

.workspace-hours-interval-row-stack {
    grid-template-columns: minmax(0, 1fr);
}

.workspace-hours-exception-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
}

/* ── Status chips ───────────────────────────────────────────────────────── */
.admin-chip, .admin-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.55rem;
    padding: 0 0.7rem;
    border: 0;
    border-radius: 999px;
    background-clip: padding-box;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
    appearance: none;
}

.admin-chip, .status-neutral { background: var(--zen-surface-accent-soft); color: var(--zen-violet); }
html.dark .admin-chip, html.dark .status-neutral { background: var(--zen-surface-accent-soft); color: var(--zen-text-strong); }
.status-warning  { background: var(--zen-warning-surface-soft); color: var(--zen-warning-text); }
html.dark .status-warning  { background: var(--zen-warning-surface-soft); color: var(--zen-warning-text); }
.status-complete { background: var(--zen-success-surface-soft); color: var(--zen-success-strong); }
html.dark .status-complete { background: var(--zen-success-surface-soft); color: var(--zen-success-strong); }
.status-danger, .admin-message-error {
    background: rgba(242,75,124,.10);
    border-color: rgba(184, 47, 95, 0.25);
    color: var(--zen-error-text);
}
html.dark .status-danger, html.dark .admin-message-error {
    background: rgba(242, 154, 176, 0.18);
    border-color: rgba(255, 210, 223, 0.2);
    color: var(--zen-error-text);
}
.admin-message-success {
    background: linear-gradient(180deg, rgba(218, 247, 240, 0.96) 0%, rgba(206, 242, 234, 0.96) 100%);
    border-color: rgba(21, 106, 92, 0.14);
    color: var(--zen-success-text);
}
html.dark .admin-message-success {
    background: linear-gradient(180deg, rgba(24, 74, 67, 0.92) 0%, rgba(18, 63, 57, 0.92) 100%);
    border-color: rgba(178, 247, 222, 0.18);
    color: var(--zen-success-text);
}

/* ── Avatar ─────────────────────────────────────────────────────────────── */
.admin-avatar {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, var(--zen-berry), var(--zen-violet));
    color: #fff;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(92,68,255,.22);
}

.admin-avatar.admin-avatar-sm    { width: 2.25rem; height: 2.25rem; border-radius: .65rem; font-size: .75rem; }
.admin-avatar-compact            { width: 2.7rem;  height: 2.7rem;  border-radius: .9rem; }
.admin-avatar-large              { width: 4.5rem;  height: 4.5rem;  border-radius: 1.35rem; }

.admin-profile-photo {
    width: 4.5rem; height: 4.5rem; border-radius: 1.35rem;
    object-fit: cover; border: 1px solid var(--border-light);
}

.admin-profile-photo-sm {
    width: 2.25rem; height: 2.25rem; border-radius: .65rem;
    object-fit: cover; border: 1px solid var(--border-light);
}

/* ── Person cell ────────────────────────────────────────────────────────── */
.admin-person-cell { display: grid; grid-template-columns: auto 1fr; gap: .85rem; }
.admin-technician-identity { display: flex; align-items: center; gap: 1rem; }
.team-member-identity {
    display: grid;
    gap: .22rem;
    min-width: 0;
}

.team-member-name,
.team-member-cell-value,
.team-member-action-note {
    font-size: .98rem;
    line-height: 1.4;
}

.team-member-name {
    font-weight: 700;
    color: var(--zen-text-strong);
}

.team-member-email {
    color: var(--zen-text-muted);
    font-size: .98rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.team-member-flag-row {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin-top: .12rem;
}

.team-member-cell-value {
    color: var(--zen-text);
}

.team-member-action-note {
    color: var(--zen-text-muted);
    font-weight: 600;
}

.team-member-edit-cell {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 12rem;
}

.team-member-edit-cell .admin-select {
    min-width: 8.5rem;
}

.team-member-inline-save {
    min-height: 2.35rem;
    padding-inline: .85rem;
    white-space: nowrap;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn,
.admin-action-button,
.admin-ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.9rem;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.btn-primary,
.admin-action-button {
    background: linear-gradient(135deg, var(--zen-berry), var(--zen-violet));
    border-color: rgba(92,68,255,.18);
    color: var(--zen-text-on-accent);
    box-shadow: 0 8px 20px rgba(92,68,255,.22);
}

.btn-outline-primary {
    background: var(--zen-surface-elevated);
    border-color: rgba(92,68,255,.2);
    color: var(--zen-text-strong);
}

.btn-secondary,
.btn-outline-secondary,
.admin-ghost-button {
    background: var(--zen-surface-input);
    border-color: var(--zen-border-subtle);
    color: var(--zen-text-strong);
}

.btn-link {
    min-height: auto;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--zs-primary);
    box-shadow: none;
}

html.dark .btn-secondary,
html.dark .btn-outline-primary,
html.dark .btn-outline-secondary,
html.dark .admin-ghost-button {
    background: var(--zen-surface-input);
    border-color: var(--zen-border-subtle);
    color: var(--zen-text-strong);
}

.btn-primary:hover:not(:disabled):not(.disabled),
.btn-primary:focus-visible,
.admin-action-button:hover:not(:disabled),
.admin-action-button:focus-visible {
    color: var(--zen-text-on-accent);
}

.btn-outline-primary:hover:not(:disabled):not(.disabled),
.btn-outline-primary:focus-visible,
.btn-secondary:hover:not(:disabled):not(.disabled),
.btn-secondary:focus-visible,
.btn-outline-secondary:hover:not(:disabled):not(.disabled),
.btn-outline-secondary:focus-visible,
.admin-ghost-button:hover:not(:disabled),
.admin-ghost-button:focus-visible {
    background: var(--zen-surface-accent-soft);
    border-color: rgba(92, 68, 255, 0.28);
    color: var(--zen-link-hover);
}

.btn.disabled,
.btn:disabled,
.admin-action-button:disabled,
.admin-ghost-button:disabled {
    opacity: .55;
    box-shadow: none;
}

.admin-state-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem;
    padding: 0 .85rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
    cursor: default;
    text-decoration: none;
    appearance: none;
    transition: box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.admin-state-action-button.status-neutral {
    background: rgba(92,68,255,.12);
    border-color: rgba(92,68,255,.16);
    color: var(--zen-text-strong);
}

html.dark .admin-state-action-button.status-neutral {
    background: rgba(143, 168, 255, 0.18);
    border-color: rgba(173, 205, 255, 0.24);
    color: var(--zen-text-strong);
}

.admin-state-action-button.status-warning {
    background: rgba(255,191,71,.16);
    border-color: rgba(255,191,71,.18);
    color: var(--zen-warning-text);
}

html.dark .admin-state-action-button.status-warning {
    background: rgba(243, 200, 107, 0.2);
    border-color: rgba(255, 227, 159, 0.18);
    color: var(--zen-warning-text);
}

.admin-state-action-button.status-complete {
    background: rgba(50,199,177,.16);
    border-color: rgba(50,199,177,.18);
    color: var(--zen-success-strong);
}

html.dark .admin-state-action-button.status-complete {
    background: rgba(101, 216, 178, 0.18);
    border-color: rgba(166, 242, 215, 0.18);
    color: var(--zen-success-strong);
}

.admin-state-action-button.status-danger {
    background: rgba(242,75,124,.12);
    border-color: rgba(242,75,124,.16);
    color: var(--zen-error-text);
}

html.dark .admin-state-action-button.status-danger {
    background: rgba(242, 154, 176, 0.18);
    border-color: rgba(255, 210, 223, 0.18);
    color: var(--zen-error-text);
}

.btn,
.btn-close,
.admin-action-button,
.admin-ghost-button,
.admin-danger-button,
.admin-asset-remove-button {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

.btn:hover:not(:disabled):not(.disabled),
.btn-close:hover,
.admin-action-button:hover:not(:disabled),
.admin-ghost-button:hover:not(:disabled),
.admin-danger-button:hover:not(:disabled),
.admin-asset-remove-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(92,68,255,.08), 0 0 18px rgba(92,68,255,.12);
}

.admin-action-button:focus-visible,
.admin-ghost-button:focus-visible {
    outline: 3px solid var(--zen-focus-ring);
    outline-offset: 2px;
}

html.dark .btn:hover:not(:disabled):not(.disabled),
html.dark .btn-close:hover,
html.dark .admin-action-button:hover:not(:disabled),
html.dark .admin-ghost-button:hover:not(:disabled),
html.dark .admin-danger-button:hover:not(:disabled),
html.dark .admin-asset-remove-button:hover:not(:disabled) {
    box-shadow: 0 0 0 1px rgba(240, 245, 255, 0.22), 0 0 24px rgba(255, 255, 255, 0.18);
}

html.dark .admin-action-button:hover:not(:disabled) {
    filter: brightness(1.08);
}

html.dark .btn-outline-primary:hover:not(:disabled):not(.disabled),
html.dark .btn-outline-primary:focus-visible,
html.dark .btn-secondary:hover:not(:disabled):not(.disabled),
html.dark .btn-secondary:focus-visible,
html.dark .btn-outline-secondary:hover:not(:disabled):not(.disabled),
html.dark .btn-outline-secondary:focus-visible,
html.dark .admin-ghost-button:hover:not(:disabled),
html.dark .admin-ghost-button:focus-visible {
    background: var(--zen-surface-accent-soft);
    border-color: rgba(173, 205, 255, 0.34);
    color: var(--zen-text-strong);
}

.admin-row-action-toggle { min-width: 8.5rem; }

.admin-nowrap-button {
    white-space: nowrap;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.admin-table-shell { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 1rem .75rem; border-top: 1px solid var(--zen-border-faint); text-align: left; vertical-align: top; color: var(--zen-text); }
html.dark .admin-table th, html.dark .admin-table td { border-top-color: var(--zen-border-faint); }
.admin-table thead th { border-top: 0; color: var(--zen-text-muted); font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.admin-table-row-actionable {
    cursor: pointer;
    transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.admin-table-row-actionable:hover,
.admin-table-row-actionable:focus-visible {
    background: color-mix(in srgb, var(--zen-violet) 9%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zen-violet) 18%, transparent);
    outline: none;
}
.admin-table-row-muted {
    opacity: 0.92;
}
.admin-user-row-trigger {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    color: inherit;
}
.admin-user-row-trigger:focus-visible {
    outline: 3px solid var(--zen-focus-ring);
    outline-offset: 4px;
    border-radius: 1rem;
}
.admin-chip-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.admin-security-summary-cell {
    min-width: 18rem;
    line-height: 1.55;
}
.admin-security-overview-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.admin-security-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.6rem;
}
.admin-security-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--zen-border-subtle);
    background: var(--zen-surface-soft);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}
.admin-security-legend-item > .bi {
    font-size: 0.9rem;
}
.admin-security-legend-item .field-help-tooltip {
    margin-left: 0.05rem;
}
/* Tint each legend chip with the same color family used by the matrix selects. */
.admin-security-legend-item.is-full { border-color: rgba(15, 118, 110, 0.3); background: rgba(15, 118, 110, 0.08); color: #0f766e; }
.admin-security-legend-item.is-scoped { border-color: rgba(92, 68, 255, 0.26); background: rgba(92, 68, 255, 0.08); color: var(--zen-violet); }
.admin-security-legend-item.is-limited { border-color: rgba(245, 158, 11, 0.32); background: rgba(245, 158, 11, 0.08); color: #b45309; }
.admin-security-legend-item.is-own { border-color: rgba(59, 130, 246, 0.26); background: rgba(59, 130, 246, 0.07); color: #1d4ed8; }
.admin-security-legend-item.is-none { border-color: rgba(148, 163, 184, 0.26); background: rgba(148, 163, 184, 0.08); color: var(--zen-text-muted); }
.admin-security-membership-panel {
    display: grid;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 1.15rem;
    border: 1px solid var(--zen-border-subtle);
    background: color-mix(in srgb, var(--zen-surface-soft) 90%, white);
}
.admin-security-membership-list {
    display: grid;
    gap: 0.75rem;
}
.admin-security-membership-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--zen-border-subtle);
    background: color-mix(in srgb, var(--zen-surface) 92%, white);
}
.admin-security-membership-item-main {
    min-width: 0;
}
.admin-security-membership-item strong,
.admin-security-membership-item span {
    display: block;
}
.admin-security-membership-item span {
    margin-top: 0.25rem;
    color: var(--zen-text-secondary);
    font-size: 0.9rem;
}
.admin-security-membership-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
}
.admin-inline-select {
    min-width: 10rem;
}
.admin-security-activity-list {
    display: grid;
    gap: 0.75rem;
}
.admin-security-activity-item {
    display: grid;
    gap: 0.45rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--zen-border-subtle);
    background: color-mix(in srgb, var(--zen-surface) 92%, white);
}
.admin-security-activity-topline,
.admin-security-activity-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.admin-security-activity-topline strong {
    color: var(--zen-text-strong);
}
.admin-security-activity-topline span,
.admin-security-activity-meta span {
    color: var(--zen-text-secondary);
    font-size: 0.85rem;
}
.admin-security-activity-item p {
    margin: 0;
    color: var(--zen-text);
}
html.dark .admin-security-membership-panel {
    background: rgba(15, 23, 42, 0.5);
}
html.dark .admin-security-membership-item {
    background: rgba(15, 23, 42, 0.72);
}
html.dark .admin-security-activity-item {
    background: rgba(15, 23, 42, 0.72);
}
.admin-security-matrix-shell {
    border-radius: 1.35rem;
    border: 1px solid var(--zen-border-subtle);
    background: color-mix(in srgb, var(--zen-surface-soft) 84%, white);
}
html.dark .admin-security-matrix-shell {
    background: rgba(15, 23, 42, 0.5);
}
.admin-security-matrix {
    min-width: 52rem;
}
.admin-security-matrix th,
.admin-security-matrix td {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    vertical-align: middle;
}
/* Keep the page/feature label visible while scrolling the role columns horizontally. */
.admin-security-area-cell {
    min-width: 11rem;
    position: sticky;
    left: 0;
    z-index: 1;
    background: color-mix(in srgb, var(--zen-surface-soft) 84%, white);
}
html.dark .admin-security-area-cell {
    background: #0f1830;
}
.admin-security-area-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.admin-security-area-cell strong {
    color: var(--zen-text-strong);
    font-size: 0.92rem;
    line-height: 1.25;
}
.admin-security-matrix-cell {
    min-width: 7rem;
}
.admin-security-select {
    min-width: 6.75rem;
    border-radius: 0.7rem;
    font-weight: 700;
}
.admin-security-select.is-full {
    border-color: rgba(15, 118, 110, 0.26);
    background: rgba(15, 118, 110, 0.08);
    color: #0f766e;
}
.admin-security-select.is-scoped {
    border-color: rgba(92, 68, 255, 0.24);
    background: rgba(92, 68, 255, 0.08);
    color: var(--zen-violet);
}
.admin-security-select.is-limited {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.08);
    color: #b45309;
}
.admin-security-select.is-own {
    border-color: rgba(59, 130, 246, 0.24);
    background: rgba(59, 130, 246, 0.07);
    color: #1d4ed8;
}
.admin-security-select.is-none {
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(148, 163, 184, 0.08);
    color: var(--zen-text-muted);
}
.admin-security-select:disabled {
    opacity: 1;
}
.admin-security-access-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.8rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}
.admin-security-access-chip.is-full {
    background: rgba(15, 118, 110, 0.12);
    border-color: rgba(15, 118, 110, 0.2);
    color: #0f766e;
}
.admin-security-access-chip.is-scoped,
.admin-security-access-chip.is-own {
    background: rgba(92, 68, 255, 0.1);
    border-color: rgba(92, 68, 255, 0.18);
    color: var(--zen-violet);
}
.admin-security-access-chip.is-limited,
.admin-security-access-chip.is-read {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.22);
    color: #b45309;
}
.admin-security-access-chip.is-none {
    background: rgba(148, 163, 184, 0.14);
    border-color: rgba(148, 163, 184, 0.22);
    color: var(--zen-text-muted);
}
html.dark .admin-security-access-chip.is-full {
    background: rgba(45, 212, 191, 0.14);
    border-color: rgba(45, 212, 191, 0.24);
    color: #7cead9;
}
html.dark .admin-security-access-chip.is-scoped,
html.dark .admin-security-access-chip.is-own {
    background: rgba(143, 168, 255, 0.14);
    border-color: rgba(143, 168, 255, 0.22);
    color: #bfd0ff;
}
html.dark .admin-security-access-chip.is-limited,
html.dark .admin-security-access-chip.is-read {
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.24);
    color: #f7d17c;
}
html.dark .admin-security-select.is-full {
    border-color: rgba(45, 212, 191, 0.28);
    background: rgba(45, 212, 191, 0.12);
    color: #7cead9;
}
html.dark .admin-security-select.is-scoped {
    border-color: rgba(143, 168, 255, 0.24);
    background: rgba(143, 168, 255, 0.12);
    color: #bfd0ff;
}
html.dark .admin-security-select.is-limited {
    border-color: rgba(251, 191, 36, 0.28);
    background: rgba(251, 191, 36, 0.12);
    color: #f7d17c;
}
html.dark .admin-security-select.is-own {
    border-color: rgba(96, 165, 250, 0.26);
    background: rgba(96, 165, 250, 0.12);
    color: #c3dcff;
}
html.dark .admin-security-select.is-none {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(148, 163, 184, 0.10);
    color: #c9d2e4;
}
.admin-security-workflow-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
.admin-table-row-selected { background: color-mix(in srgb, var(--zen-violet) 10%, transparent); }
.admin-customer-row { cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.admin-customer-row:hover,
.admin-customer-row:focus-visible {
  background: color-mix(in srgb, var(--zen-violet) 8%, transparent);
  box-shadow: inset 0 0 0 1px rgba(92,68,255,.08);
  transform: translateY(-1px);
  outline: none;
}
html.dark .admin-customer-row:hover,
html.dark .admin-customer-row:focus-visible {
  background: rgba(143, 168, 255, 0.10);
  box-shadow: inset 0 0 0 1px rgba(173, 205, 255, 0.16);
}
.customer-workspace-service-row td {
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.customer-workspace-service-row:hover td,
.customer-workspace-service-row:focus-within td,
.customer-workspace-service-row:focus-visible td {
  background: color-mix(in srgb, var(--zen-violet) 8%, transparent);
  box-shadow: inset 0 0 0 1px rgba(92,68,255,.08);
  transform: translateY(-1px);
}
html.dark .customer-workspace-service-row:hover td,
html.dark .customer-workspace-service-row:focus-within td,
html.dark .customer-workspace-service-row:focus-visible td {
  background: rgba(143, 168, 255, 0.10);
  box-shadow: inset 0 0 0 1px rgba(173, 205, 255, 0.16);
}
.customer-workspace-service-row {
  cursor: pointer;
  outline: none;
}
.service-category-row td {
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.service-category-row {
  cursor: pointer;
  outline: none;
}

.service-item-row {
  cursor: pointer;
  outline: none;
}

.service-category-row:hover td,
.service-category-row:focus-visible td,
.service-category-row:focus-within td {
  background: color-mix(in srgb, var(--zen-violet) 8%, transparent);
  box-shadow: inset 0 0 0 1px rgba(92, 68, 255, 0.08);
  transform: translateY(-1px);
}

html.dark .service-category-row:hover td,
html.dark .service-category-row:focus-visible td,
html.dark .service-category-row:focus-within td {
  background: rgba(143, 168, 255, 0.10);
  box-shadow: inset 0 0 0 1px rgba(173, 205, 255, 0.16);
}

.service-item-row td {
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.service-item-row:hover td,
.service-item-row:focus-visible td,
.service-item-row:focus-within td {
  background: color-mix(in srgb, var(--zen-teal) 14%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--zen-teal) 24%, rgba(92, 68, 255, 0.12)),
    0 16px 28px rgba(15, 23, 42, 0.08);
  transform: translateY(-2px);
}

html.dark .service-item-row:hover td,
html.dark .service-item-row:focus-visible td,
html.dark .service-item-row:focus-within td {
  background: rgba(111, 227, 208, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(173, 205, 255, 0.18),
    0 18px 32px rgba(0, 0, 0, 0.22);
}

.service-category-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.service-item-summary {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 0.35rem;
  transition: transform .18s ease;
}

.service-category-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

/* Condensed description in the service roster: one line, width-bounded, ellipsis on overflow
   (the full text is on the element's title and in the edit form). */
.service-description-preview {
  max-width: 42ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.service-category-icon-picker-preview {
  justify-content: end;
}

.service-category-icon-preview {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 100%;
  padding: 0.85rem 0.95rem;
  border-radius: 1rem;
  border: 1px solid var(--zen-border-subtle);
  background: var(--zen-surface-soft);
}

html.dark .service-category-icon-preview {
  border-color: var(--zen-border-faint);
  background: rgba(255, 255, 255, 0.02);
}

.service-category-copy strong {
  color: var(--zen-text-strong);
  font-size: 1rem;
}

.service-category-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.7rem;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 0.95rem;
  border: 1px solid color-mix(in srgb, var(--service-accent, #5c44ff) 34%, transparent);
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--service-accent, #5c44ff) 24%, white) 0%, transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--service-accent, #5c44ff) 18%, transparent), rgba(111, 227, 208, 0.16));
  color: var(--zen-text-strong);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.service-color-dot {
  display: inline-flex;
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  background: var(--service-accent, #5c44ff);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 16px color-mix(in srgb, var(--service-accent, #5c44ff) 24%, transparent);
}

.service-color-dot-large {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform .18s ease, box-shadow .18s ease;
}

.service-item-row:hover .service-item-summary,
.service-item-row:focus-visible .service-item-summary,
.service-item-row:focus-within .service-item-summary {
  transform: translateX(2px);
}

.service-item-row:hover .service-color-dot-large,
.service-item-row:focus-visible .service-color-dot-large,
.service-item-row:focus-within .service-color-dot-large {
  transform: translateY(-1px) scale(1.08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 12px 22px color-mix(in srgb, var(--service-accent, #5c44ff) 30%, transparent);
}

.service-color-caption {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--zen-text-muted);
  font-size: 0.9rem;
}

.service-color-picker-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.service-color-input-shell {
  position: relative;
  display: inline-flex;
  width: 3.4rem;
  height: 2.65rem;
  border-radius: 0.85rem;
  border: 1px solid var(--zen-border-subtle);
  background: var(--service-accent, #5c44ff);
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, white 16%, transparent),
    0 12px 28px color-mix(in srgb, var(--service-accent, #5c44ff) 18%, transparent);
}

.service-color-input-shell:focus-within {
  outline: 2px solid color-mix(in srgb, var(--service-accent, #5c44ff) 42%, white);
  outline-offset: 2px;
}

.service-color-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: inherit;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  appearance: none;
  -webkit-appearance: none;
}

.service-color-reset-button {
  min-width: 8.2rem;
}

.service-category-icon i {
  font-size: 1.15rem;
  line-height: 1;
}

.service-category-row:hover .service-category-icon,
.service-category-row:focus-visible .service-category-icon,
.service-category-row:focus-within .service-category-icon {
  transform: translateY(-2px) scale(1.03);
  border-color: color-mix(in srgb, var(--service-accent, #5c44ff) 52%, transparent);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--service-accent, #5c44ff) 18%, transparent);
}

html.dark .service-category-icon {
  border-color: color-mix(in srgb, var(--service-accent, #5c44ff) 30%, rgba(173, 205, 255, 0.18));
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--service-accent, #5c44ff) 22%, white) 0%, transparent 62%),
    linear-gradient(135deg, color-mix(in srgb, var(--service-accent, #5c44ff) 24%, transparent), rgba(91, 217, 194, 0.16));
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}

html.dark .service-category-row:hover .service-category-icon,
html.dark .service-category-row:focus-visible .service-category-icon,
html.dark .service-category-row:focus-within .service-category-icon {
  border-color: color-mix(in srgb, var(--service-accent, #5c44ff) 54%, rgba(173, 205, 255, 0.12));
  box-shadow: 0 18px 34px color-mix(in srgb, var(--service-accent, #5c44ff) 24%, transparent);
}

@media (max-width: 768px) {
  .service-category-icon-picker-preview {
    justify-content: stretch;
  }
}

.customer-workspace-service-modal-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.customer-workspace-service-modal {
    display: flex;
    flex-direction: column;
    width: min(960px, 100%);
    max-height: calc(100vh - 3rem);
    overflow: hidden;
}

.customer-workspace-service-modal .admin-modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 1.35rem;
}

.customer-workspace-service-modal .admin-actions-row {
    position: sticky;
    bottom: 0;
    padding-top: 0.75rem;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, var(--zen-surface-elevated) 22%);
}

/* Present the customer welcome / required-step / service modals as a centered card rather than
   near-full-width on tablets/desktop. */
.services-confirm-modal-overlay .analytics-detail-modal-dialog:has(.customer-workspace-service-modal, .customer-workspace-welcome-modal) {
    max-width: 600px;
}

/* The header and footer sit outside the scrolling .admin-modal-body, so they're already pinned to
   the top/bottom while the body scrolls — give them an elevated background + soft shadow so they
   read clearly as fixed bars (title + primary action always visible). */
.customer-workspace-service-modal > .admin-modal-header,
.customer-workspace-welcome-modal > .admin-modal-header {
    background: var(--zen-surface-elevated);
    box-shadow: 0 6px 12px -10px rgba(20, 26, 54, .55);
    z-index: 1;
}

.customer-workspace-service-modal > .admin-modal-footer {
    background: var(--zen-surface-elevated);
    box-shadow: 0 -6px 12px -10px rgba(20, 26, 54, .55);
    z-index: 1;
}

.customer-workspace-booking-section {
    padding-top: 0.25rem;
    border-top: 1px solid var(--zen-border-subtle);
}

.customer-workspace-booking-section + .customer-workspace-booking-section {
    margin-top: 0.25rem;
}

.customer-workspace-booking-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.customer-workspace-booking-slot-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
}

.customer-workspace-booking-slot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.85rem 0.95rem;
    border-radius: 1rem;
    border: 1px solid var(--zen-border-subtle);
    background: var(--zen-surface-soft);
    color: var(--zen-text-strong);
    text-align: left;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.customer-workspace-booking-slot:hover,
.customer-workspace-booking-slot:focus-visible {
    border-color: rgba(92, 68, 255, 0.35);
    transform: translateY(-1px);
}

.customer-workspace-booking-slot.is-active {
    border-color: rgba(92, 68, 255, 0.55);
    background: rgba(92, 68, 255, 0.08);
}

.customer-workspace-booking-slot-title {
    font-weight: 700;
}

.customer-workspace-booking-slot-meta {
    font-size: 0.88rem;
    color: var(--zen-text-secondary);
}

.customer-workspace-welcome-copy {
    margin: .65rem 0 0;
    max-width: 42rem;
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--zen-text-secondary);
}

.customer-workspace-welcome-modal .admin-eyebrow {
    font-size: .92rem;
    letter-spacing: .26em;
}

.customer-workspace-welcome-modal .admin-modal-title {
    font-size: clamp(2rem, 3vw, 2.45rem);
    line-height: 1.12;
}

html.dark .customer-workspace-service-modal .admin-actions-row {
    background: linear-gradient(180deg, rgba(15,23,42,0) 0%, var(--zen-surface-elevated) 22%);
}

.customers-selection-card {
  border: 1px dashed var(--zen-border-subtle);
  background: var(--zen-surface-soft);
}
.admin-inline-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--zen-text-strong);
  font: inherit;
  font-weight: 700;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.admin-inline-link:hover,
.admin-inline-link:focus-visible {
  color: var(--zen-violet);
  text-decoration: underline;
}

/* ── Empty / loading states ─────────────────────────────────────────────── */
.admin-empty-state { padding: 2.2rem 1rem 1rem; text-align: center; }
.admin-empty-state h3 { margin: 0; font-family: "Aptos Display","Segoe UI Variable Display","Trebuchet MS",sans-serif; font-size: 1.35rem; font-weight: 700; text-align: center; }
.admin-empty-state-compact { margin-bottom: 1rem; }
.admin-message-banner {
    padding: 1rem 1.1rem;
    border: 1px solid transparent;
    border-radius: 1rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.admin-form-grid > * { min-width: 0; }
.admin-roster-search { max-width: 24rem; margin-bottom: 1.1rem; }
.admin-roster-filters { margin-bottom: 1.1rem; }
.workspace-profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem 1rem;
    align-items: start;
}

.workspace-profile-grid .field {
    gap: 0.4rem;
}

.workspace-profile-grid .field.field-full {
    grid-column: 1 / -1;
}

.workspace-geocode-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.workspace-geocode-row .admin-action-button i {
    margin-right: 0.4rem;
}

.workspace-geocode-status {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--admin-text-muted, #6b6280);
}

.workspace-geocode-status.is-resolved {
    color: var(--admin-success, #0f9f91);
}

.workspace-profile-grid .field span {
    font-size: 0.88rem;
}

.workspace-profile-grid .field small,
.workspace-profile-grid .field-feedback {
    font-size: 0.74rem;
    line-height: 1.25;
}

.workspace-profile-grid .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.workspace-profile-grid .field select,
.workspace-profile-grid .field textarea {
    min-height: 2.85rem;
    border-radius: 0.9rem;
    padding-inline: 0.95rem;
}

.workspace-profile-grid .admin-input-validation-shell input,
.workspace-profile-grid .admin-input-validation-shell select,
.workspace-profile-grid .admin-input-validation-shell textarea {
    padding-right: 3.25rem;
}

.workspace-profile-grid .admin-input-valid-indicator {
    right: 0.7rem;
    width: 1.15rem;
    height: 1.15rem;
}

.admin-user-filter-grid {
    display: grid;
    grid-template-columns: minmax(15rem, 2.2fr) repeat(3, minmax(10rem, 1fr));
    gap: .9rem;
    margin-bottom: 1rem;
    align-items: end;
}

.admin-user-filter-grid .field { margin: 0; }

.field { display: grid; gap: .5rem; font-weight: 700; min-width: 0; }
.field span { font-size: .92rem; }
.field.field-full { grid-column: 1 / -1; }
.field small { color: var(--zen-slate); font-size: .84rem; font-weight: 500; line-height: 1.5; }
.field.field-switch .form-check { margin-bottom: 0; }
.field.field-switch .form-check-label { color: inherit; font-weight: 600; }
.field-label-with-help {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

.field-help-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 5;
}

.field-help-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--zen-text-muted) 42%, transparent);
    border-radius: 999px;
    background: var(--zen-surface-elevated);
    color: var(--zen-text-muted);
    font-size: .62rem;
    line-height: 1;
    cursor: help;
    transition: border-color .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.field-help-tooltip-trigger:hover,
.field-help-tooltip-trigger:focus-visible {
    border-color: color-mix(in srgb, var(--zen-violet) 64%, transparent);
    background: var(--zen-surface-accent-soft);
    color: var(--zen-violet);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--zen-violet) 16%, transparent);
    outline: none;
    transform: translateY(-1px);
}

.field-help-tooltip-trigger::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + .65rem);
    width: min(18rem, 70vw);
    padding: .72rem .82rem;
    border: 1px solid var(--zen-border-subtle);
    border-radius: .9rem;
    background: var(--zen-surface-elevated);
    color: var(--zen-text);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .18);
    font-size: .76rem;
    font-weight: 650;
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    text-align: left;
    transform: translate(-50%, .25rem);
    transition: opacity .14s ease, transform .14s ease;
    z-index: 80;
}

.field-help-tooltip-trigger::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + .38rem);
    width: .6rem;
    height: .6rem;
    border-right: 1px solid var(--zen-border-subtle);
    border-bottom: 1px solid var(--zen-border-subtle);
    background: var(--zen-surface-elevated);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, .25rem) rotate(45deg);
    transition: opacity .14s ease, transform .14s ease;
    z-index: 79;
}

.field-help-tooltip-trigger:hover::before,
.field-help-tooltip-trigger:hover::after,
.field-help-tooltip-trigger:focus-visible::before,
.field-help-tooltip-trigger:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0) rotate(45deg);
}

.field-help-tooltip-trigger:hover::after,
.field-help-tooltip-trigger:focus-visible::after {
    transform: translate(-50%, 0);
}
.field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
}

.field .field-required-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 1.4rem;
    height: 1.4rem;
    padding: 0;
    border-radius: 999px;
    background: transparent;
    color: transparent;
    font-size: 0;
    line-height: 0;
    white-space: nowrap;
}

.field .field-required-badge::before,
.field .field-required-badge::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .72rem;
    height: 2px;
    border-radius: 999px;
    background: #c43d4b;
    transform-origin: center;
}

.field .field-required-badge::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.field .field-required-badge::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.admin-input-validation-shell .field-required-badge {
    position: absolute;
    top: 50%;
    right: .85rem;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

.field-feedback {
    margin-top: -.05rem;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.45;
}

.field-feedback:empty { display: none; }

.field-feedback.is-pending { color: var(--zen-text-muted); }
.field-feedback.is-valid { color: var(--zen-success-strong); }
.field-feedback.is-invalid { color: var(--zen-error-strong); }

.admin-input-validation-shell { position: relative; }

.admin-input-validation-shell input,
.admin-input-validation-shell select,
.admin-input-validation-shell textarea {
    padding-right: 5.5rem;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.admin-input-validation-shell.has-password-toggle input { padding-right: 8rem; }

.admin-input-validation-shell.is-valid input,
.admin-input-validation-shell.is-valid select,
.admin-input-validation-shell.is-valid textarea {
    border-color: rgba(24, 132, 74, 0.42) !important;
    box-shadow: 0 0 0 3px rgba(24, 132, 74, 0.12);
}

.admin-input-validation-shell.is-invalid input,
.admin-input-validation-shell.is-invalid select,
.admin-input-validation-shell.is-invalid textarea {
    border-color: rgba(196, 61, 75, 0.38) !important;
    box-shadow: 0 0 0 3px rgba(196, 61, 75, 0.10);
}

.admin-input-validation-shell:has(.field-required-badge) input,
.admin-input-validation-shell:has(.field-required-badge) select,
.admin-input-validation-shell:has(.field-required-badge) textarea {
    border-color: rgba(196, 61, 75, 0.38) !important;
    box-shadow: 0 0 0 3px rgba(196, 61, 75, 0.10);
}

.admin-input-valid-indicator {
    position: absolute;
    top: 50%;
    right: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    color: #18844a;
    pointer-events: none;
    transform: translateY(-50%);
}

.admin-input-validation-shell.has-password-toggle .admin-input-valid-indicator { right: 3.2rem; }

.admin-input-validation-shell.has-password-toggle .field-required-badge { right: 3.2rem; }

.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .field select, .field textarea {
    width: 100%;
    min-height: 3.3rem;
    min-width: 0;
    max-width: 100%;
    padding: 0 1rem;
    border: 1px solid var(--zen-border-subtle);
    border-radius: 1rem;
    background: var(--zen-surface-input);
    color: inherit;
}

html.dark .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), html.dark .field select, html.dark .field textarea {
    background: var(--zen-surface-input);
    border-color: var(--zen-border-subtle);
}

html.dark .field .form-control::placeholder,
html.dark .field input::placeholder,
html.dark .field textarea::placeholder,
html.dark .form-control::placeholder,
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: var(--zen-text-soft) !important;
    opacity: 1;
}

.field textarea { min-height: 8rem; padding: .9rem 1rem; resize: vertical; }
.field select { appearance: none; }
.form-stack { display: grid; gap: 1rem; margin-top: 1.2rem; }
.admin-form-note { font-size: .84rem; color: var(--zen-slate); line-height: 1.5; }

/* ── Modals ─────────────────────────────────────────────────────────────── */
.modal { --bs-modal-zindex: 3200; z-index: var(--bs-modal-zindex); }
.modal.show { background: rgba(10,16,30,.42); }
.modal-backdrop { display: none !important; }

.admin-review-assets-modal-overlay {
    position: fixed; inset: 0; z-index: 3600;
    overflow-y: auto; overscroll-behavior: contain;
    background: rgba(10,16,30,.5);
}

body:has(.admin-review-assets-modal-overlay) { overflow: hidden; }
.admin-review-assets-modal-overlay .modal-dialog {
    z-index: 1;
    margin-block: 1rem;
    height: calc(100vh - 2rem);
}

.admin-review-assets-modal-overlay .admin-modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
}

.admin-review-assets-modal-overlay .admin-modal-body {
    overflow: auto;
}

.admin-review-asset-summary {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.admin-review-assets-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    padding: 0 1rem;
    border: 1px solid var(--zen-border-subtle);
    border-radius: 999px;
    background: var(--zen-surface-elevated);
    color: var(--zen-text-strong);
    font-size: .95rem;
    font-weight: 800;
    appearance: none;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}

html.dark .admin-review-assets-trigger {
    background: var(--zen-surface-input);
    border-color: var(--zen-border-subtle);
    color: var(--zen-text-strong);
}

.admin-review-assets-trigger:hover {
    box-shadow: 0 0 0 1px rgba(92,68,255,.10), 0 0 18px rgba(92,68,255,.14);
}

.admin-review-assets-modal-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .85rem;
}

.admin-review-assets-modal-card {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    min-width: 0;
    padding: .75rem;
    border: 1px solid var(--zen-border-subtle);
    border-radius: 1rem;
    background: var(--zen-surface-subtle);
    transition: box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

html.dark .admin-review-assets-modal-card {
    background: var(--zen-surface-subtle);
    border-color: var(--zen-border-subtle);
}

.admin-review-assets-modal-card:hover,
.admin-review-assets-modal-card:focus-within {
    border-color: rgba(92,68,255,.18);
    box-shadow: 0 0 0 1px rgba(92,68,255,.10), 0 0 18px rgba(92,68,255,.14);
}

.admin-review-assets-modal-thumb-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: inherit;
    cursor: zoom-in;
    border-radius: 1rem;
}

.admin-review-assets-modal-thumb-button:focus-visible {
    outline: 2px solid var(--zen-link);
    outline-offset: 4px;
}

.admin-review-assets-modal-thumb-shell {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: .85rem;
    background: rgba(100,116,139,.08);
}

.admin-review-assets-modal-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-review-assets-modal-copy {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.admin-review-assets-modal-copy strong {
    font-size: .88rem;
}

.admin-review-assets-modal-copy span,
.admin-review-assets-modal-copy a {
    font-size: .75rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.admin-review-assets-modal-copy a {
    color: var(--zen-link);
    font-weight: 700;
    text-decoration: none;
}

.admin-review-assets-modal-copy a:hover {
    color: var(--zen-link-hover);
    text-decoration: underline;
}

html.dark .admin-review-assets-modal-copy a {
    color: var(--zen-link);
}

html.dark .admin-review-assets-modal-copy a:hover {
    color: var(--zen-link-hover);
}

.admin-review-asset-preview-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3700;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(10,16,30,.58);
}

body:has(.admin-review-asset-preview-modal-overlay) { overflow: hidden; }

.admin-review-asset-preview-modal-overlay .modal-dialog {
    z-index: 1;
    margin-block: 1rem;
    height: calc(100vh - 2rem);
}

.admin-review-asset-preview-modal-overlay .admin-modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
}

.admin-review-asset-preview-modal-overlay .admin-modal-body {
    overflow: auto;
}

.admin-review-asset-preview-modal-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    height: min(58vh, calc(100vh - 15rem));
    padding: 1rem;
    border-radius: 1.25rem;
    background: rgba(100,116,139,.08);
}

.admin-review-asset-preview-modal-image {
    width: 100%;
    max-width: 100%;
    max-height: min(calc(58vh - 2rem), calc(100vh - 17rem));
    object-fit: contain;
    display: block;
}

.admin-review-asset-preview-modal-meta {
    margin-top: .9rem;
}

.admin-modal-content {
    border: 1px solid var(--zen-border-subtle);
    border-radius: 1.7rem;
    background: var(--zen-surface-elevated);
    box-shadow: 0 24px 54px rgba(20,26,54,.18);
}

html.dark .admin-modal-content { border-color: var(--zen-border-subtle); background: var(--zen-surface-elevated); }

.admin-modal-header, .admin-modal-body, .admin-modal-footer { padding-inline: 1.4rem; }
.admin-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.35rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--zen-border-faint);
}
html.dark .admin-modal-header { border-bottom-color: var(--zen-border-faint); }
.admin-modal-title { margin-top: .4rem; }
.admin-modal-body { padding-top: .4rem; padding-bottom: 1rem; }
.admin-modal-footer { justify-content: space-between; gap: 1rem; padding-top: .9rem; padding-bottom: 1.35rem; border-top: 1px solid var(--zen-border-faint); }
html.dark .admin-modal-footer { border-top-color: var(--zen-border-faint); }
.admin-modal-footer-end { justify-content: flex-end; }

/* Service/category/eligibility modals: make the dialog a fixed-height flex column so the body
   scrolls (header stays put) instead of overflowing off-screen with no scrollbar. */
.services-confirm-modal-overlay .admin-modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100vh - 3rem);
    overflow: hidden;
}

.services-confirm-modal-overlay .admin-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Condense the edit form: drop the redundant inner panel (the modal body already pads/frames it)
   and keep the Save/Cancel row stuck to the bottom of the scroll area so it's always reachable. */
.services-confirm-modal-overlay .service-modal-form {
    gap: .85rem;
}

.services-confirm-modal-overlay .service-modal-form .admin-modal-footer {
    position: sticky;
    bottom: 0;
    margin-top: .35rem;
    padding-top: .85rem;
    background: var(--zen-surface-elevated);
}

.analytics-detail-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3700;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(10px);
}

.analytics-detail-modal-dialog {
    width: min(960px, 100%);
    max-height: calc(100vh - 3rem);
}

.analytics-detail-modal-content {
    overflow: hidden;
}

.services-confirm-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3700;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Scroll the overlay itself when a modal is taller than the viewport (e.g. tablet/landscape or
       other short-height widths) so the bottom of a tall form is always reachable — instead of the
       grid `place-items:center` we used before, which clipped the top of an over-tall dialog. */
    overflow-y: auto;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(10px);
}

/* Auto block-margins center the modal when it fits, but let it top-align + the overlay scroll when
   it doesn't — the scroll-safe way to vertically center an arbitrarily tall dialog. */
.services-confirm-modal-overlay > * {
    margin-block: auto;
    flex: 0 0 auto;
}

/* Repair the height/scroll chain for modals that nest their content inside the dialog wrapper
   (customer welcome + required-step): make the wrapper a viewport-bounded flex column so the inner
   .admin-modal-body actually scrolls instead of overflowing and clipping. */
.services-confirm-modal-overlay .analytics-detail-modal-dialog {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: calc(100vh - 3rem);
    overflow: hidden;
}

body:has(.services-confirm-modal-overlay) { overflow: hidden; }

.analytics-detail-modal-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.analytics-detail-close-button {
    flex-shrink: 0;
}

.analytics-detail-modal-body {
    display: grid;
    gap: 1rem;
}

.analytics-detail-summary-card {
    padding: 1.15rem 1.2rem;
    border: 1px solid rgba(92, 68, 255, 0.1);
    border-radius: 1.4rem;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,247,255,.94));
}

html.dark .analytics-detail-summary-card {
    border-color: rgba(143, 168, 255, 0.18);
    background: linear-gradient(180deg, rgba(84, 98, 111, .96), rgba(74, 88, 101, .96));
}

.analytics-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .95fr);
    gap: 1rem;
}

.analytics-detail-panel {
    padding: 1.1rem 1.15rem;
    border: 1px solid rgba(92, 68, 255, 0.08);
    border-radius: 1.4rem;
    background: rgba(248, 250, 255, 0.96);
}

html.dark .analytics-detail-panel {
    border-color: rgba(143, 168, 255, 0.14);
    background: rgba(86, 99, 111, 0.92);
}

.analytics-detail-breakdown-list,
.analytics-detail-evidence-list,
.analytics-detail-action-list {
    display: grid;
    gap: .8rem;
}

.analytics-detail-breakdown-item,
.analytics-detail-evidence-item {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1rem;
    border-radius: 1rem;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(92, 68, 255, 0.06);
}

html.dark .analytics-detail-breakdown-item,
html.dark .analytics-detail-evidence-item {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.08);
}

.analytics-detail-breakdown-label {
    margin: 0;
    font-weight: 800;
    color: #2c2a46;
}

html.dark .analytics-detail-breakdown-label {
    color: #f5f8ff;
}

.analytics-detail-breakdown-note {
    margin: .25rem 0 0;
    font-size: .84rem;
    color: var(--zen-slate);
}

.analytics-detail-breakdown-value {
    font-family: "Aptos Display","Segoe UI Variable Display","Trebuchet MS",sans-serif;
    font-size: 1.15rem;
    white-space: nowrap;
}

.analytics-detail-action-link {
    width: 100%;
}

.analytics-detail-evidence-link {
    flex-shrink: 0;
}

.analytics-detail-modal-footer {
    align-items: center;
}

@media (max-width: 860px) {
    .analytics-detail-grid {
        grid-template-columns: 1fr;
    }

    .analytics-detail-modal-header,
    .analytics-detail-modal-footer {
        flex-direction: column;
    }

    .analytics-detail-close-button,
    .analytics-detail-modal-footer .admin-actions-row {
        width: 100%;
    }
}

/* ── Definition list ────────────────────────────────────────────────────── */
.admin-definition-list { display: grid; gap: .9rem; margin: 1rem 0 0; padding: 0; }
.admin-definition-list dt { color: var(--zen-slate); font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.admin-definition-list dd { margin: .2rem 0 0; font-weight: 700; }

/* ── Standalone / login pages ───────────────────────────────────────────── */
.admin-standalone-shell {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.admin-standalone-card { max-width: 36rem; text-align: center; }

/* ── Login page ──────────────────────────────────────────────────────────── */

.zs-standalone:has(.login-page-shell) {
    background: linear-gradient(155deg, var(--zen-surface-page) 0%, var(--zen-surface-panel) 48%, var(--zen-surface-page) 100%);
}

html.dark .zs-standalone:has(.login-page-shell) {
    background: linear-gradient(155deg, var(--zen-surface-page) 0%, #121b27 48%, var(--zen-surface-page) 100%);
}

.login-page-shell {
    position: relative;
    width: min(960px, 100%);
    margin: 0 auto;
    padding: clamp(1rem, 2.6vw, 1.75rem);
    box-sizing: border-box;
    color: var(--zen-text);
}

.login-page-shell::before,
.login-page-shell::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    filter: blur(44px);
    opacity: .62;
}

.login-page-shell::before {
    width: 15rem;
    height: 15rem;
    top: -2.5rem;
    left: -1.8rem;
    background: radial-gradient(circle, rgba(131, 178, 255, .68) 0%, rgba(131, 178, 255, 0) 72%);
}

.login-page-shell::after {
    width: 18rem;
    height: 18rem;
    right: -2.2rem;
    bottom: -3rem;
    background: radial-gradient(circle, rgba(68, 124, 255, .42) 0%, rgba(68, 124, 255, 0) 74%);
}

.login-split {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    width: 100%;
    min-height: 540px;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(20, 32, 54, 0.16), 0 4px 16px rgba(20, 32, 54, 0.08);
    background: var(--zen-surface-elevated);
}

/* ── Brand panel (left) ───────────────────────────────────────────────── */
.login-brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.75rem 2.25rem;
    isolation: isolate;
    background:
        radial-gradient(circle at top left, rgba(128, 163, 255, 0.16), transparent 36%),
        radial-gradient(circle at top right, rgba(123, 101, 232, 0.12), transparent 32%),
        linear-gradient(165deg, #232c39 0%, #202935 52%, #1d2430 100%);
    color: var(--zen-text-strong);
    overflow: hidden;
}

.login-brand-panel::before,
.login-brand-panel::after {
    content: "";
    position: absolute;
    inset: auto;
    pointer-events: none;
    z-index: 0;
}

.login-brand-panel::before {
    left: -18%;
    right: -12%;
    bottom: 8.75rem;
    height: 8rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(66, 120, 220, 0.18), rgba(116, 144, 255, 0.08), rgba(112, 221, 206, 0.10));
    filter: blur(28px);
    opacity: 0.75;
}

.login-brand-panel::after {
    left: -8%;
    right: -28%;
    bottom: 4rem;
    height: 10rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(97, 124, 255, 0.12), transparent 68%);
    filter: blur(14px);
}

.login-brand-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.login-brand-illustration {
    position: absolute;
    right: -3.5rem;
    bottom: -8.75rem;
    left: -2rem;
    z-index: 0;
    pointer-events: none;
    opacity: 0.92;
    -webkit-mask-image: linear-gradient(180deg, transparent 4%, rgba(0, 0, 0, 0.22) 16%, rgba(0, 0, 0, 0.86) 38%, rgba(0, 0, 0, 0.98) 70%, rgba(0, 0, 0, 0.64) 88%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 4%, rgba(0, 0, 0, 0.22) 16%, rgba(0, 0, 0, 0.86) 38%, rgba(0, 0, 0, 0.98) 70%, rgba(0, 0, 0, 0.64) 88%, transparent 100%);
}

.login-breeze-svg {
    display: block;
    width: 125%;
    max-width: none;
    height: auto;
}

.login-brand-logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.login-logo-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.7rem;
    background: linear-gradient(140deg, var(--zen-link) 0%, var(--zen-violet) 55%, #62a1ff 100%);
    font-weight: 800;
    font-size: 1.2rem;
    color: #fff;
}

.login-logo-name {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--zen-text-strong);
    letter-spacing: -0.02em;
}

.login-brand-tagline {
    margin: 0;
    max-width: 11rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(243, 247, 255, 0.94);
    line-height: 1.35;
    letter-spacing: -0.03em;
}

.login-brand-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.82rem;
    color: rgba(220, 230, 245, 0.84);
}

.login-brand-meta p { margin: 0; }
.login-brand-meta a { color: #9cb8ff; text-decoration: none; }
.login-brand-meta a:hover { color: #c0d4ff; }

.admin-help-toolbar {
    display: grid;
    gap: 1rem;
}

.admin-help-grid,
.admin-settings-grid,
.admin-analytics-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
}

.admin-settings-grid.workspace-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.admin-help-card,
.admin-analytics-chart-card {
    min-height: 100%;
}

.admin-help-keywords {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: auto;
}

.admin-help-top-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.zen-handoff-summary-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.zen-handoff-summary-card {
    min-height: 11.5rem;
    width: 100%;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.72), transparent 34%),
        linear-gradient(145deg, rgba(247, 248, 255, 0.98), rgba(240, 248, 244, 0.95));
}

.zen-handoff-quality-list {
    display: grid;
    gap: 0.9rem;
}

.zen-handoff-quality-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
    border-radius: 1rem;
    background:
        linear-gradient(135deg, rgba(255, 247, 237, 0.72), rgba(255, 255, 255, 0.86)),
        var(--surface-subtle, rgba(148, 163, 184, 0.08));
}

.zen-handoff-quality-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.35rem;
}

.zen-handoff-flag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.zen-handoff-flag {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0 0.7rem;
    border-radius: 999px;
    background: rgba(172, 90, 33, 0.12);
    color: #8a3e16;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.zen-handoff-composer-actions {
    justify-content: space-between;
}

.zen-handoff-end-chat-button {
    margin-left: auto;
}

.zen-handoff-timeline {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 0.5rem;
}

.zen-handoff-timeline div {
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--border, rgba(148, 163, 184, 0.22));
    border-radius: 0.9rem;
    background: var(--surface-subtle, rgba(148, 163, 184, 0.08));
}

.zen-handoff-timeline dt {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--zen-slate, #64748b);
}

.zen-handoff-timeline dd {
    margin: 0.4rem 0 0;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--zen-text-strong);
}

.zen-handoff-queue-item {
    display: grid;
    gap: 0.3rem;
    width: 100%;
    text-align: left;
    padding: 0.75rem 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
    background: var(--surface-subtle, rgba(148, 163, 184, 0.08));
    cursor: pointer;
}

.zen-handoff-queue-item.is-selected {
    border-color: rgba(92, 68, 255, 0.45);
    box-shadow: 0 0 0 1px rgba(92, 68, 255, 0.25);
}

.zen-handoff-queue-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.zen-handoff-queue-name {
    font-weight: 600;
}

.zen-handoff-queue-meta {
    font-size: 0.8rem;
    color: var(--zen-slate, #64748b);
}

.zen-handoff-dock {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1025;
    width: min(28rem, calc(100vw - 2rem));
    border: 1px solid rgba(92, 68, 255, 0.18);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.94), transparent 28%),
        linear-gradient(180deg, rgba(255, 248, 241, 0.98), rgba(249, 250, 255, 0.98));
    box-shadow: 0 28px 60px rgba(25, 35, 66, 0.22);
    backdrop-filter: blur(12px);
}

.zen-handoff-dock.is-minimized {
    width: min(22rem, calc(100vw - 2rem));
}

.zen-handoff-dock-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 1rem 1rem 0.9rem;
}

.zen-handoff-dock-title {
    margin: 0.15rem 0 0.25rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--zen-text-strong);
}

.zen-handoff-dock-status-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin: 0;
    color: var(--zen-slate, #64748b);
    font-size: 0.84rem;
    font-weight: 600;
}

.zen-handoff-dock-header-actions {
    justify-content: flex-end;
}

.zen-handoff-dock-open-link {
    text-decoration: none;
}

.zen-handoff-dock-body {
    display: grid;
    gap: 0.85rem;
    padding: 0 1rem 1rem;
}

.zen-handoff-dock-thread {
    max-height: min(26rem, calc(100vh - 19rem));
    min-height: 12rem;
}

@media (max-width: 900px) {
    .zen-handoff-dock {
        right: 0.75rem;
        left: 0.75rem;
        bottom: 0.75rem;
        width: auto;
    }

    .zen-handoff-dock-header {
        flex-direction: column;
    }

    .zen-handoff-dock-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .zen-handoff-dock-thread {
        max-height: 45vh;
    }
}

@media (max-width: 900px) {
    .zen-handoff-summary-grid,
    .admin-help-top-grid {
        grid-template-columns: 1fr;
    }

    .zen-handoff-timeline {
        grid-template-columns: 1fr;
    }

    .zen-handoff-quality-item {
        grid-template-columns: 1fr;
    }
}

.admin-help-ask-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.admin-help-ask-row .field {
    flex: 1 1 320px;
}

.admin-help-assistant-answer {
    border: 1px solid var(--border, rgba(148, 163, 184, 0.25));
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--surface-subtle, rgba(148, 163, 184, 0.08));
}

.admin-help-assistant-answer p:last-child {
    margin-bottom: 0;
}

.admin-chip-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.2rem;
    padding: 0 0.9rem;
    border: 1px solid var(--zen-border-subtle);
    border-radius: 999px;
    background: var(--zen-surface-input);
    color: var(--zen-text-strong);
    font-size: 0.78rem;
    font-weight: 700;
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.admin-chip-button:hover,
.admin-chip-button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--zen-violet) 16%, transparent);
    outline: none;
}

.admin-chip-button.is-active {
    background: var(--zen-surface-accent-soft);
    border-color: var(--zen-border-subtle);
    color: var(--zen-text-strong);
}

.admin-data-list {
    display: grid;
    gap: 0.9rem;
    margin: 0;
}

.admin-data-pair {
    display: grid;
    gap: 0.2rem;
}

.admin-data-pair dt {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--zen-slate);
}

.admin-data-pair dd {
    margin: 0;
    color: var(--zen-ink);
    font-weight: 700;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.platform-shops-layout {
    display: grid;
    gap: 1rem;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}

.platform-shop-directory-note {
    margin-top: 0.35rem;
}

.platform-shop-list {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.platform-shop-directory-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.platform-shop-view-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.9rem;
    min-width: 2.9rem;
    padding: 0;
}

.platform-shop-view-toggle .bi {
    font-size: 1rem;
}

.platform-shop-card-shell {
    --platform-shop-accent-start: #f2a65a;
    --platform-shop-accent-end: #f7d08a;
    --platform-shop-accent-shadow: rgba(242, 166, 90, 0.18);
    display: flex;
    min-height: 100%;
}

.platform-shop-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    padding: 0;
    border: 1px solid rgba(92,68,255,.08);
    border-radius: 1.15rem;
    background: rgba(255,255,255,.76);
    color: inherit;
    text-align: left;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease;
    overflow: hidden;
}

.platform-shop-card:hover {
    border-color: rgba(92,68,255,.18);
    box-shadow: 0 10px 22px rgba(92,68,255,.08);
    transform: translateY(-1px);
}

.platform-shop-card.is-selected {
    border-color: color-mix(in srgb, var(--platform-shop-accent-start) 58%, rgba(92,68,255,.35));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--platform-shop-accent-start) 28%, transparent), 0 18px 34px var(--platform-shop-accent-shadow);
    background: color-mix(in srgb, white 88%, var(--platform-shop-accent-start) 12%);
}

.platform-shop-card__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    background:
        linear-gradient(135deg, var(--platform-shop-accent-start), var(--platform-shop-accent-end));
    color: #1b1736;
}

.platform-shop-card__header > * {
    position: relative;
    z-index: 1;
}

.platform-shop-card__header--wave::before,
.platform-shop-card__header--wave::after {
    content: "";
    position: absolute;
    inset: auto -6% 0;
    height: 68%;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.9;
}

.platform-shop-card__header--wave::before {
    bottom: -10%;
    background:
        radial-gradient(115% 95% at 8% 100%, rgba(255, 250, 241, 0.86) 0 42%, transparent 43%),
        radial-gradient(92% 80% at 56% 100%, rgba(255, 243, 230, 0.72) 0 38%, transparent 39%),
        radial-gradient(85% 78% at 102% 100%, rgba(255, 234, 214, 0.76) 0 36%, transparent 37%);
}

.platform-shop-card__header--wave::after {
    bottom: -22%;
    opacity: 0.58;
    background:
        radial-gradient(90% 72% at 20% 100%, rgba(255, 255, 255, 0.52) 0 34%, transparent 35%),
        radial-gradient(78% 66% at 74% 100%, rgba(255, 255, 255, 0.42) 0 31%, transparent 32%);
}

.platform-shop-card__header-label {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.platform-shop-card__header .admin-chip {
    background: rgba(255,255,255,.7);
    color: #1b1736;
    border-color: rgba(27,23,54,.08);
}

.platform-shop-card__body {
    display: grid;
    gap: 0.8rem;
    height: 100%;
    padding: 1rem;
}

.platform-shop-card__topline {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.75rem;
}

.platform-shop-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.platform-shop-card__subtitle,
.platform-shop-card__slug,
.platform-shop-card__cta,
.platform-shop-card__owner {
    margin: 0;
    font-size: 0.86rem;
}

.platform-shop-card__subtitle,
.platform-shop-card__slug {
    color: var(--zen-slate);
}

.platform-shop-card__owner-list {
    display: grid;
    gap: 0.7rem;
}

.platform-shop-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.platform-shop-card__meta-item {
    display: inline-flex;
    align-items: center;
    min-height: 1.85rem;
    padding: 0 0.65rem;
    border-radius: 999px;
    background: rgba(92,68,255,.07);
    color: var(--zen-violet);
    font-size: 0.78rem;
    font-weight: 700;
}

.platform-shop-card__owner {
    font-weight: 700;
    color: var(--zen-ink);
}

.platform-shop-card__owner-shell {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.platform-shop-card__owner-row {
    display: grid;
    gap: 0.25rem;
}

.platform-shop-card__owner-list .platform-shop-card__owner-row:first-child {
    margin-top: auto;
}

.platform-shop-card__owner-email {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--zen-violet);
    text-decoration: none;
    word-break: break-all;
}

.platform-shop-card__owner-email:hover,
.platform-shop-card__owner-email:focus-visible {
    text-decoration: underline;
}

.platform-shop-table-owner-list {
    display: grid;
    gap: 0.65rem;
}

.platform-shop-table-owner-primary {
    margin-left: 0.45rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--zen-text-muted);
}

.platform-shop-table-shell {
    border: 1px solid rgba(92, 68, 255, 0.08);
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.82);
    overflow: hidden;
}

.platform-shop-table {
    min-width: 100%;
}

.platform-shop-table thead th {
    background: rgba(248, 246, 255, 0.98);
}

.platform-shop-table-row {
    --platform-shop-accent-start: #f2a65a;
    --platform-shop-accent-end: #f7d08a;
    --platform-shop-accent-shadow: rgba(242, 166, 90, 0.18);
    cursor: pointer;
    transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.platform-shop-table-row:hover td,
.platform-shop-table-row:focus-within td {
    background: color-mix(in srgb, white 88%, var(--platform-shop-accent-start) 12%);
}

.platform-shop-table-row td:first-child {
    box-shadow: inset 0.3rem 0 0 color-mix(in srgb, var(--platform-shop-accent-start) 85%, white 15%);
}

.platform-shop-table-row.is-selected td {
    background: color-mix(in srgb, white 84%, var(--platform-shop-accent-start) 16%);
}

.platform-shop-table-name-cell {
    min-width: 16rem;
}

.platform-shop-table-name {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.platform-shop-table-accent {
    width: 0.72rem;
    align-self: stretch;
    min-height: 3.2rem;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--platform-shop-accent-start), var(--platform-shop-accent-end));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
    flex-shrink: 0;
}

.platform-shop-table-name strong,
.platform-shop-table-stack span {
    display: block;
    color: var(--zen-text-strong);
}

.platform-shop-table-name span,
.platform-shop-table-stack small {
    display: block;
    margin-top: 0.2rem;
    color: var(--zen-slate);
    line-height: 1.4;
}

.platform-shop-table-stack small {
    font-size: 0.82rem;
}

.workspace-gate {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 2vw, 2rem);
}

.workspace-gate__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top right, rgba(79, 106, 245, 0.20), transparent 38%),
        linear-gradient(180deg, rgba(17, 24, 39, 0.34), rgba(17, 24, 39, 0.58));
    backdrop-filter: blur(14px);
}

.workspace-gate__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.25rem;
    width: min(980px, 100%);
    max-height: calc(100vh - 2rem);
    padding: clamp(1.25rem, 2vw, 2rem);
    overflow: auto;
    border: 1px solid rgba(92, 68, 255, 0.14);
    border-radius: 1.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 249, 253, 0.96));
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
}

.workspace-gate__header {
    display: grid;
    gap: 0.75rem;
}

.workspace-gate__eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.workspace-gate__eyebrow {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--zs-primary);
}

.workspace-gate__lock-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--zen-border-subtle);
    background: rgba(79, 106, 245, 0.10);
    color: var(--zen-text-strong);
    font-size: 0.82rem;
    font-weight: 700;
}

.workspace-gate__lock-pill-text {
    position: absolute;
    top: 50%;
    left: calc(100% + 0.65rem);
    right: auto;
    z-index: 12;
    min-width: 15rem;
    max-width: 18rem;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--zen-border-subtle);
    border-radius: 0.9rem;
    background: var(--zen-surface-elevated);
    color: var(--zen-text-strong);
    box-shadow: 0 14px 32px rgba(20, 26, 54, 0.16);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
    opacity: 0;
    transform: translate(0.15rem, -50%);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

.workspace-gate__lock-pill:hover .workspace-gate__lock-pill-text,
.workspace-gate__lock-pill:focus-visible .workspace-gate__lock-pill-text,
.workspace-gate__lock-pill:focus-within .workspace-gate__lock-pill-text {
    opacity: 1;
    transform: translate(0, -50%);
}

.workspace-gate__header h1 {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    line-height: 1.05;
}

.workspace-gate__lede {
    margin: 0;
    max-width: 60ch;
    color: var(--zen-slate);
    font-size: 1rem;
}

.workspace-gate__status {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--zen-border-subtle);
    border-radius: 1rem;
    background: var(--zen-surface-elevated);
    color: var(--zen-text-strong);
    font-weight: 600;
}

.workspace-gate__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.workspace-gate__card {
    --workspace-accent: var(--zs-primary);
    --workspace-accent-rgb: 79, 106, 245;
    --workspace-accent-soft: rgba(79, 106, 245, 0.12);
    --workspace-accent-ink: var(--zs-primary);
    position: relative;
    min-height: 100%;
    overflow: hidden;
    border-color: rgba(var(--workspace-accent-rgb), 0.16);
    box-shadow: 0 10px 30px rgba(44, 24, 74, 0.06);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.workspace-gate__card-image {
    display: block;
    width: 100%;
    height: 3.5rem;
    object-fit: cover;
    object-position: center;
    transition: transform 180ms ease, filter 180ms ease;
}

html.dark .workspace-gate__card-image {
    filter: brightness(0.9) saturate(0.94);
}

.workspace-gate__card-body {
    display: grid;
    gap: 0.95rem;
    padding: 1rem 1rem 1.05rem;
    background: var(--zen-surface-panel);
}

.workspace-gate__card-hitbox {
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    cursor: pointer;
}

.workspace-gate__card-hitbox--button {
    border: 0;
    padding: 0;
    background: transparent;
}

.workspace-gate__card-hitbox:focus-visible {
    outline: 2px solid var(--workspace-accent);
    outline-offset: 3px;
}

.workspace-gate__card-hitbox[disabled] {
    cursor: not-allowed;
}

.workspace-gate__card::after {
    content: "";
    position: absolute;
    top: -2.2rem;
    right: -1.6rem;
    width: 7rem;
    height: 7rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(var(--workspace-accent-rgb), 0.16), transparent 68%);
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
}

.workspace-gate__card-topline,
.workspace-gate__card-title,
.workspace-gate__card-copy,
.workspace-gate__card-flair,
.workspace-gate__form {
    position: relative;
    z-index: 3;
}

.workspace-gate__action {
    position: relative;
    z-index: 5;
}

.workspace-gate__card--platform {
    --workspace-accent: #4f6af5;
    --workspace-accent-rgb: 79, 106, 245;
    --workspace-accent-soft: rgba(79, 106, 245, 0.12);
    --workspace-accent-ink: #3654ea;
}

.workspace-gate__card--developer {
    --workspace-accent: #0ea5a4;
    --workspace-accent-rgb: 14, 165, 164;
    --workspace-accent-soft: rgba(14, 165, 164, 0.12);
    --workspace-accent-ink: #0b7f81;
}

.workspace-gate__card--customer {
    --workspace-accent: #4d86e6;
    --workspace-accent-rgb: 77, 134, 230;
    --workspace-accent-soft: rgba(77, 134, 230, 0.12);
    --workspace-accent-ink: #2f67cb;
}

.workspace-gate__card--technician {
    --workspace-accent: #c85b7e;
    --workspace-accent-rgb: 200, 91, 126;
    --workspace-accent-soft: rgba(200, 91, 126, 0.12);
    --workspace-accent-ink: #ab4166;
}

.workspace-gate__card--shop {
    --workspace-accent: #ea8b2f;
    --workspace-accent-rgb: 234, 139, 47;
    --workspace-accent-soft: rgba(234, 139, 47, 0.14);
    --workspace-accent-ink: #cb6d17;
}

.workspace-gate__card--owner {
    --workspace-accent: #4f6af5;
    --workspace-accent-rgb: 79, 106, 245;
    --workspace-accent-soft: rgba(79, 106, 245, 0.12);
    --workspace-accent-ink: #3654ea;
}

.workspace-gate__card--manager {
    --workspace-accent: #7b65e8;
    --workspace-accent-rgb: 123, 101, 232;
    --workspace-accent-soft: rgba(123, 101, 232, 0.14);
    --workspace-accent-ink: #6249d4;
}

.workspace-gate__card--reception {
    --workspace-accent: #e68a55;
    --workspace-accent-rgb: 230, 138, 85;
    --workspace-accent-soft: rgba(230, 138, 85, 0.14);
    --workspace-accent-ink: #c96c37;
}

.workspace-gate__card--staff {
    --workspace-accent: #0ea5a4;
    --workspace-accent-rgb: 14, 165, 164;
    --workspace-accent-soft: rgba(14, 165, 164, 0.12);
    --workspace-accent-ink: #0b7f81;
}

.workspace-gate__card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: -1rem;
}

.workspace-gate__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--zen-surface-panel) 82%, white 18%);
    color: var(--workspace-accent-ink);
    font-size: 1.3rem;
    box-shadow: 0 10px 20px rgba(var(--workspace-accent-rgb), 0.14);
    border: 1px solid rgba(var(--workspace-accent-rgb), 0.10);
}

.workspace-gate__icon-shop {
    background: var(--workspace-accent-soft);
    color: var(--workspace-accent-ink);
}

.workspace-gate__card-title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
}

.workspace-gate__card-copy {
    margin: 0.35rem 0 0;
    color: var(--zen-slate);
    font-size: 0.92rem;
    line-height: 1.45;
}

.workspace-gate__card-flair {
    margin: 0;
    min-height: 2.7rem;
    color: var(--workspace-accent-ink);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.45;
}

.workspace-gate__form {
    display: grid;
}

.workspace-gate__action {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.workspace-gate__action.workspace-gate__action-icon {
    width: 3rem;
    height: 3rem;
    margin-left: auto;
    border-radius: 999px;
    padding: 0;
    font-size: 1.35rem;
    line-height: 1;
    box-shadow: 0 10px 24px rgba(var(--workspace-accent-rgb), 0.18);
}

.workspace-gate__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(92, 68, 255, 0.10);
}

.workspace-gate__footer-copy {
    margin: 0;
    color: var(--zen-slate);
    font-size: 0.9rem;
}

.btn.workspace-gate__signout-button {
    min-width: 8.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(57, 75, 98, 0.16);
    color: #223145;
}

.workspace-gate__signout-button:hover:not(:disabled):not(.disabled),
.workspace-gate__signout-button:focus-visible {
    background: #ffffff;
    border-color: rgba(57, 75, 98, 0.28);
    color: #223145;
}

.workspace-gate__card--platform .platform-shop-status-chip,
.workspace-gate__card--developer .platform-shop-status-chip,
.workspace-gate__card--technician .platform-shop-status-chip,
.workspace-gate__card--shop .platform-shop-status-chip,
.workspace-gate__card--owner .platform-shop-status-chip,
.workspace-gate__card--manager .platform-shop-status-chip,
.workspace-gate__card--reception .platform-shop-status-chip,
.workspace-gate__card--staff .platform-shop-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.7rem;
    padding: 0 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #394b62;
    border: 1px solid rgba(120, 136, 156, 0.24);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.platform-shop-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.2rem;
}

.platform-shop-card__cta {
    font-weight: 700;
    color: var(--zen-violet);
}

.platform-shop-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3700;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.46);
    backdrop-filter: blur(10px);
}

.platform-shop-modal-dialog {
    width: min(1080px, 100%);
    max-height: calc(100vh - 2rem);
}

.platform-shop-modal-content {
    display: flex;
    flex-direction: column;
    max-height: inherit;
    overflow: hidden;
}

.platform-shop-modal-header {
    flex-shrink: 0;
}

.platform-shop-modal-body {
    overflow-y: auto;
    padding-bottom: 1.1rem;
}

.platform-shop-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.platform-shop-modal-footer-primary,
.platform-shop-modal-footer-secondary {
    display: flex;
    align-items: center;
}

.platform-shop-modal-footer-secondary {
    margin-left: auto;
    justify-content: flex-end;
}

.platform-shop-owner-roster-shell {
    margin-top: 1rem;
    border: 1px solid rgba(92, 68, 255, 0.08);
    background: rgba(248, 246, 255, 0.72);
}

.platform-shop-owner-membership-card {
    border: 1px solid rgba(92, 68, 255, 0.08);
    background: rgba(255, 255, 255, 0.84);
}

.platform-shop-owner-membership-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.platform-shop-owner-membership-meta-item {
    display: inline-flex;
    align-items: center;
    min-height: 1.9rem;
    padding: 0 0.65rem;
    border-radius: 999px;
    background: rgba(92, 68, 255, 0.07);
    color: var(--zen-violet);
    font-size: 0.78rem;
    font-weight: 700;
}

html.dark .platform-shop-card {
    border-color: rgba(255,255,255,.12);
    background: rgba(20, 29, 44, 0.92);
}

html.dark .platform-shop-card.is-selected {
    border-color: color-mix(in srgb, var(--platform-shop-accent-start) 48%, rgba(255,255,255,.18));
    background: color-mix(in srgb, rgba(20, 29, 44, 0.96) 82%, var(--platform-shop-accent-start) 18%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--platform-shop-accent-start) 28%, transparent), 0 20px 40px rgba(5, 10, 20, 0.36);
}

html.dark .workspace-gate__dialog {
    border-color: var(--zen-border-subtle);
    background: linear-gradient(180deg, var(--zen-surface-elevated), var(--zen-surface-panel));
    box-shadow: 0 28px 80px rgba(4, 10, 20, 0.52);
    color: var(--zen-text-strong);
}

html.dark .workspace-gate__backdrop {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(7, 12, 20, 0.42), rgba(7, 12, 20, 0.68));
}

html.dark .workspace-gate__eyebrow {
    color: var(--zen-link);
}

html.dark .workspace-gate__lede,
html.dark .workspace-gate__footer-copy,
html.dark .workspace-gate__card-copy {
    color: var(--zen-text-muted);
}

html.dark .workspace-gate__lock-pill,
html.dark .workspace-gate__status,
html.dark .workspace-gate__icon,
html.dark .workspace-gate__icon-shop {
    background: color-mix(in srgb, var(--zen-surface-elevated) 88%, white 12%);
    border-color: var(--zen-border-subtle);
    color: var(--zen-text-strong);
}

html.dark .workspace-gate__card-title,
html.dark .workspace-gate__lock-pill,
html.dark .workspace-gate__signout,
html.dark .workspace-gate__card-flair,
html.dark .workspace-gate__card--platform .platform-shop-status-chip,
html.dark .workspace-gate__card--developer .platform-shop-status-chip,
html.dark .workspace-gate__card--technician .platform-shop-status-chip,
html.dark .workspace-gate__card--shop .platform-shop-status-chip {
    color: var(--zen-text-strong);
}

html.dark .workspace-gate__card--platform .platform-shop-status-chip,
html.dark .workspace-gate__card--developer .platform-shop-status-chip,
html.dark .workspace-gate__card--technician .platform-shop-status-chip,
html.dark .workspace-gate__card--shop .platform-shop-status-chip,
html.dark .workspace-gate__card--owner .platform-shop-status-chip,
html.dark .workspace-gate__card--manager .platform-shop-status-chip,
html.dark .workspace-gate__card--reception .platform-shop-status-chip,
html.dark .workspace-gate__card--staff .platform-shop-status-chip {
    background: var(--zen-surface-input);
    border-color: var(--zen-border-subtle);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html.dark .workspace-gate__card {
    border-color: var(--zen-border-subtle);
    box-shadow: 0 14px 34px rgba(8, 16, 30, 0.22);
}

html.dark .workspace-gate__card-body {
    background: linear-gradient(180deg, rgba(27, 38, 58, 0.98), rgba(20, 31, 47, 0.98));
}

html.dark .workspace-gate__card::after {
    background: radial-gradient(circle, rgba(var(--workspace-accent-rgb), 0.12), transparent 70%);
}

html.dark .workspace-gate__footer {
    border-top-color: var(--zen-border-subtle);
}

html.dark .workspace-gate__signout-button {
    background: var(--zen-surface-input);
    border-color: var(--zen-border-subtle);
    color: var(--zen-text-strong);
}

html.dark .workspace-gate__signout-button:hover:not(:disabled):not(.disabled),
html.dark .workspace-gate__signout-button:focus-visible {
    background: var(--zen-surface-elevated);
    border-color: var(--zen-border-faint);
    color: var(--zen-text-strong);
}

html.dark .platform-shop-card__meta-item {
    background: rgba(143,168,255,.14);
    color: #dfe9ff;
}

html.dark .platform-shop-card__header {
    color: #0f1327;
}

html.dark .platform-shop-card__header--wave::before {
    background:
        radial-gradient(115% 95% at 8% 100%, rgba(255, 255, 255, 0.22) 0 42%, transparent 43%),
        radial-gradient(92% 80% at 56% 100%, rgba(255, 245, 230, 0.16) 0 38%, transparent 39%),
        radial-gradient(85% 78% at 102% 100%, rgba(255, 255, 255, 0.18) 0 36%, transparent 37%);
}

html.dark .platform-shop-card__header--wave::after {
    opacity: 0.42;
    background:
        radial-gradient(90% 72% at 20% 100%, rgba(255, 255, 255, 0.12) 0 34%, transparent 35%),
        radial-gradient(78% 66% at 74% 100%, rgba(255, 255, 255, 0.1) 0 31%, transparent 32%);
}

.platform-shop-card-shell.is-amber,
.platform-shop-table-row.is-amber {
    --platform-shop-accent-start: #f3b562;
    --platform-shop-accent-end: #f8d39a;
    --platform-shop-accent-shadow: rgba(243, 181, 98, 0.18);
}

.platform-shop-card-shell.is-coral,
.platform-shop-table-row.is-coral {
    --platform-shop-accent-start: #f28c8c;
    --platform-shop-accent-end: #f6b7a7;
    --platform-shop-accent-shadow: rgba(242, 140, 140, 0.18);
}

.platform-shop-card-shell.is-mint,
.platform-shop-table-row.is-mint {
    --platform-shop-accent-start: #58c8a1;
    --platform-shop-accent-end: #9ce4cc;
    --platform-shop-accent-shadow: rgba(88, 200, 161, 0.18);
}

.platform-shop-card-shell.is-sky,
.platform-shop-table-row.is-sky {
    --platform-shop-accent-start: #67b7f7;
    --platform-shop-accent-end: #9dd8ff;
    --platform-shop-accent-shadow: rgba(103, 183, 247, 0.18);
}

.platform-shop-card-shell.is-rose,
.platform-shop-table-row.is-rose {
    --platform-shop-accent-start: #e58ab3;
    --platform-shop-accent-end: #f3bdd2;
    --platform-shop-accent-shadow: rgba(229, 138, 179, 0.18);
}

.platform-shop-card-shell.is-lilac,
.platform-shop-table-row.is-lilac {
    --platform-shop-accent-start: #9c90f5;
    --platform-shop-accent-end: #c9c1ff;
    --platform-shop-accent-shadow: rgba(156, 144, 245, 0.18);
}

html.dark .platform-shop-table-shell {
    border-color: rgba(255,255,255,.12);
    background: rgba(20, 29, 44, 0.92);
}

html.dark .platform-shop-table thead th {
    background: rgba(31, 39, 56, 0.96);
}

html.dark .platform-shop-table-row:hover td,
html.dark .platform-shop-table-row:focus-within td {
    background: color-mix(in srgb, rgba(20, 29, 44, 0.94) 84%, var(--platform-shop-accent-start) 16%);
}

html.dark .platform-shop-table-row.is-selected td {
    background: color-mix(in srgb, rgba(20, 29, 44, 0.92) 78%, var(--platform-shop-accent-start) 22%);
}

html.dark .platform-shop-table-name span,
html.dark .platform-shop-table-stack small {
    color: #b8c3dd;
}

html.dark .platform-shop-owner-roster-shell {
    border-color: rgba(255,255,255,.1);
    background: rgba(28, 36, 52, 0.78);
}

html.dark .platform-shop-owner-membership-card {
    border-color: rgba(255,255,255,.08);
    background: rgba(20, 29, 44, 0.9);
}

html.dark .platform-shop-owner-membership-meta-item {
    background: rgba(143,168,255,.14);
    color: #dfe9ff;
}

@media (max-width: 960px) {
    .workspace-gate {
        padding: 0.75rem;
    }

    .workspace-gate__dialog {
        max-height: calc(100vh - 1.5rem);
        border-radius: 1.2rem;
    }

    .workspace-gate__card-image {
        height: 3rem;
    }

    .workspace-gate__card-topline {
        margin-top: -0.85rem;
    }

    .platform-shop-modal-overlay {
        padding: 0.75rem;
    }

    .platform-shop-modal-dialog {
        max-height: calc(100vh - 1.5rem);
    }

    .platform-shop-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .platform-shop-modal-footer-primary,
    .platform-shop-modal-footer-secondary {
        width: 100%;
    }

    .platform-shop-modal-footer-secondary {
        margin-left: 0;
        justify-content: flex-start;
    }
}

.admin-chart-shell {
    position: relative;
    min-height: 320px;
}

.admin-settings-grid .field {
    margin-bottom: 0;
}

html.dark .admin-chip-button {
    background: var(--zen-surface-input);
    border-color: var(--zen-border-subtle);
    color: var(--zen-text-strong);
}

html.dark .admin-chip-button.is-active {
    background: var(--zen-surface-accent-soft);
    border-color: var(--zen-border-subtle);
    color: var(--zen-text-strong);
}

/* ── Form panel (right) ───────────────────────────────────────────────── */
.login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.75rem;
    background: linear-gradient(180deg, var(--zen-surface-elevated) 0%, var(--zen-surface-panel) 100%);
}

.login-form-inner {
    display: grid;
    gap: 1rem;
    width: 100%;
    max-width: 380px;
}

.login-form-panel .admin-eyebrow { color: var(--zen-link); }

.login-form-heading {
    margin: 0.1rem 0 0.35rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--zen-text-strong);
}

.login-form-panel .form-stack { margin-top: 0.15rem; }

.login-form-panel .field span {
    color: var(--zen-text);
    font-weight: 700;
}

.login-form-panel .field .form-control,
.login-form-panel .field input,
.login-form-panel .field select {
    background: var(--zen-surface-input) !important;
    border-color: var(--zen-border-subtle) !important;
    color: var(--zen-text-strong) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.login-form-panel .field .form-control::placeholder,
.login-form-panel .field input::placeholder,
.login-form-panel .field select::placeholder {
    color: var(--zen-text-soft);
}

.login-form-panel .field .form-control:focus,
.login-form-panel .field input:focus,
.login-form-panel .field select:focus {
    background: var(--zen-surface-elevated) !important;
    border-color: rgba(61, 110, 229, 0.65);
    box-shadow: 0 0 0 3px var(--zen-focus-ring);
}

.login-form-actions { margin-top: 0.2rem; }

.login-form-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.login-form-link {
    color: var(--zen-link);
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
}

.login-form-link:hover {
    color: var(--zen-link-hover);
    text-decoration: underline;
}

.login-inline-action {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--zen-link);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.login-inline-action:hover {
    color: var(--zen-link-hover);
    text-decoration: underline;
}

.login-inline-action:disabled {
    color: var(--zen-text-soft);
    cursor: not-allowed;
    text-decoration: none;
}

.login-inline-action-countdown {
    margin-left: auto;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.login-form-support-copy {
    margin: 0;
    color: var(--zen-text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.login-flow-status-list {
    display: grid;
    gap: 0.65rem;
    margin: 0.15rem 0 0.25rem;
}

.login-flow-status-item {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--zen-border-subtle);
    border-radius: 0.8rem;
    background: var(--zen-surface-input);
    color: var(--zen-text);
}

.login-flow-status-item strong {
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.login-flow-status-item span {
    font-weight: 700;
}

.login-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.9rem;
    padding: 0 1.5rem;
    border: none;
    border-radius: 0.65rem;
    background: linear-gradient(135deg, var(--zen-link) 0%, var(--zen-violet) 100%);
    color: var(--zen-text-on-accent);
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 160ms ease, box-shadow 160ms ease;
}

.login-submit-btn:hover {
    background: linear-gradient(135deg, var(--zen-link-hover) 0%, #4278d2 100%);
    box-shadow: 0 8px 18px rgba(47, 101, 213, 0.3);
}

.login-social-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0 1rem;
    color: var(--zen-text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.login-social-divider::before,
.login-social-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--zen-border);
}

.login-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 2.9rem;
    padding: 0 1.5rem;
    border: 1px solid var(--zen-border);
    border-radius: 0.65rem;
    background: var(--zen-surface-elevated);
    color: var(--zen-text);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.login-social-btn:hover {
    border-color: var(--zen-link);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.login-social-btn .bi-google {
    color: #ea4335;
}

html.dark .login-page-shell .login-form-panel {
    background: linear-gradient(180deg, var(--zen-surface-elevated) 0%, var(--zen-surface-panel) 100%);
}

html.dark .login-page-shell .field .form-control,
html.dark .login-page-shell .field input,
html.dark .login-page-shell .field select {
    background: var(--zen-surface-input) !important;
    border-color: var(--zen-border-subtle) !important;
    color: var(--zen-text-strong) !important;
}

html.dark .login-page-shell,
html.dark .login-page-shell .login-form-heading,
html.dark .login-page-shell .field span,
html.dark .login-page-shell .admin-eyebrow {
    color: var(--zen-text-strong);
}

html.dark .login-page-shell .login-form-support-copy {
    color: var(--zen-text-muted);
}

html.dark .login-page-shell .login-form-link {
    color: var(--zen-link);
}

html.dark .login-page-shell .login-inline-action {
    color: var(--zen-link);
}

html.dark .login-page-shell .login-inline-action:disabled {
    color: var(--zen-text-soft);
}

html.dark .login-flow-status-item {
    color: var(--zen-text);
}

html.dark .login-page-shell .password-toggle {
    color: var(--zen-text-soft);
}

html.dark .field-required-badge {
    background: transparent;
    color: transparent;
}

html.dark .field-feedback.is-pending { color: var(--zen-text-muted); }
html.dark .field-feedback.is-invalid { color: var(--zen-error-strong); }
html.dark .field-feedback.is-valid { color: var(--zen-success-strong); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 620px) {
    .login-split {
        grid-template-columns: 1fr;
    }
    .login-brand-panel {
        padding: 2rem 1.5rem;
        min-height: 0;
    }
    .login-brand-illustration {
        right: -2rem;
        bottom: -5rem;
        left: -1.25rem;
        opacity: 0.72;
    }
    .login-brand-tagline { font-size: 1.15rem; }
    .login-brand-meta { display: none; }
    .login-form-panel { padding: 2rem 1.5rem; }
}

/* ── Password field ──────────────────────────────────────────────────── */
.password-field { position: relative; }
.password-field input { padding-right: 3.7rem; }

.password-toggle {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--zen-text-soft);
    cursor: pointer;
    transform: translateY(-50%);
}

.password-toggle:hover { background: var(--zen-surface-accent-soft); color: var(--zen-text-strong); }

.password-icon {
    display: inline-flex;
    width: 1.2rem;
    height: 1.2rem;
}

.password-icon.is-hidden { display: none; }
.password-icon svg { width: 100%; height: 100%; fill: currentColor; }

/* ── Social / profile page ───────────────────────────────────────────────── */

.social-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 820px) {
    .social-layout { grid-template-columns: 1fr; }
    .social-profile-cropper-grid { grid-template-columns: 1fr; }
}

/* Sidebar cards */
.social-sidebar { display: flex; flex-direction: column; gap: 0.85rem; }

.social-sidebar-heading {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--zen-ink);
}

/* Profile card */
.social-profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.75rem 1.25rem 1.25rem;
    text-align: center;
}

.social-photo-wrap {
    width: 7.5rem;
    height: 7.5rem;
    flex-shrink: 0;
    overflow: hidden;
    border: 3px solid var(--border-light);
    border-radius: 999px;
    background: var(--zen-surface-subtle);
}

.social-photo {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: center center;
}

.social-photo-initials {
    width: 100% !important;
    height: 100% !important;
    border-radius: 999px !important;
    font-size: 1.4rem !important;
}

.social-identity { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }

.social-profile-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
}

.social-profile-upload-shell {
    position: relative;
    display: inline-flex;
    justify-content: center;
}

.social-profile-upload-button {
    min-width: 6.5rem;
}

.social-profile-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.social-profile-cropper-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(10, 16, 30, 0.62);
}

body:has(.social-profile-cropper-modal-overlay) { overflow: hidden; }

.social-profile-cropper-modal-dialog {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    flex: 0 1 auto;
    margin: 0;
    width: min(94vw, 72rem);
    max-width: min(94vw, 72rem);
    max-height: calc(100vh - 2rem);
}

.social-profile-cropper-modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
}

.social-profile-cropper-modal-header {
    gap: 0.75rem;
}

.social-profile-cropper-modal-copy {
    margin: 0.35rem 0 0;
    color: var(--zen-slate);
    line-height: 1.55;
}

.social-profile-cropper-modal-body {
    overflow: auto;
}

.social-profile-cropper-shell {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding-top: 0.35rem;
}

.social-profile-cropper-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(16rem, 0.95fr);
    gap: 1.25rem;
    align-items: start;
}

.social-profile-cropper-field {
    margin-bottom: 0;
}

.social-profile-cropper {
    width: 100%;
    min-height: min(34rem, calc(100vh - 20rem));
    border-radius: 1.2rem;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.08);
}

.social-profile-cropper .cropper-view-box,
.social-profile-cropper .cropper-face {
    border-radius: 999px;
}

.social-profile-cropper-preview {
    width: min(16rem, 32vw);
    height: min(16rem, 32vw);
    margin: 0 auto;
    border-radius: 999px;
    overflow: hidden;
    border: 3px solid rgba(92, 68, 255, 0.16);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
    background: rgba(148, 163, 184, 0.08);
}

.social-profile-cropper-preview > * {
    width: 100%;
    height: 100%;
}

.social-profile-cropper-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 991.98px) {
    .social-profile-cropper-modal-dialog {
        width: min(96vw, 96vw);
        max-width: min(96vw, 96vw);
    }

    .social-profile-cropper-grid {
        grid-template-columns: 1fr;
    }

    .social-profile-cropper {
        min-height: min(25rem, calc(100vh - 24rem));
    }

    .social-profile-cropper-preview {
        width: min(14rem, 58vw);
        height: min(14rem, 58vw);
    }
}

.social-display-name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--zen-text-strong);
}

.social-role-label {
    margin: 0;
    font-size: 0.82rem;
    color: var(--zen-slate);
    font-weight: 500;
}

/* Tags */
.social-tag-list { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.social-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    background: rgba(92, 68, 255, 0.08);
    color: var(--zen-violet);
}

html.dark .social-tag { background: var(--zen-surface-accent-soft); color: var(--zen-text-strong); }

.social-tag-area {
    background: rgba(50, 199, 177, 0.10);
    color: var(--zen-success-strong);
}

html.dark .social-tag-area { background: var(--zen-success-surface-soft); color: var(--zen-success-strong); }

/* About */
.social-bio {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: var(--zen-slate);
    line-height: 1.6;
}

.social-about-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    font-size: 0.875rem;
    color: var(--zen-slate);
    margin-top: 0.4rem;
}

.social-about-row .bi { flex-shrink: 0; font-size: 0.9rem; }

.social-contact-button {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--zen-border-subtle);
    background: var(--zen-surface-accent-soft);
    color: var(--zen-text-strong);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

html.dark .social-contact-button {
    border-color: var(--zen-border-subtle);
    background: var(--zen-surface-input);
    color: var(--zen-text);
}

/* Feed */
.social-feed-heading {
    margin: 0 0 1.25rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--zen-ink);
}

.social-feed-panel {
    display: grid;
    gap: 1rem;
}

.social-feed-section { margin-bottom: 1.75rem; }
.social-feed-section:last-child { margin-bottom: 0; }

.social-feed-section-label {
    margin: 0 0 0.85rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--zen-slate);
    border-bottom: 1px solid var(--zen-border-faint);
    padding-bottom: 0.5rem;
}

html.dark .social-feed-section-label { border-bottom-color: var(--zen-border-faint); }

.social-timeline-list,
.social-message-list {
    display: grid;
    gap: 0.9rem;
}

.social-timeline-card,
.social-message-card {
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    border: 1px solid var(--zen-border-faint);
    border-radius: 1.25rem;
    background: var(--zen-surface-subtle);
}

html.dark .social-timeline-card,
html.dark .social-message-card {
    background: var(--zen-surface-subtle);
    border-color: var(--zen-border-faint);
}

.social-timeline-card {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
}

.social-timeline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999px;
    background: var(--zen-surface-accent-soft);
    color: var(--zen-text-strong);
    font-size: 1rem;
}

.social-timeline-copy,
.social-message-heading {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.social-timeline-meta,
.social-message-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.social-timeline-kicker,
.social-message-channel {
    color: var(--zen-text-soft);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.social-timeline-time {
    color: var(--zen-text-soft);
    font-size: 0.82rem;
    font-weight: 600;
}

.social-timeline-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--zen-text-strong);
}

.social-timeline-body {
    margin: 0;
    color: var(--zen-text);
    line-height: 1.55;
}

.social-message-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.social-message-badges {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

/* Empty feed state */
.social-empty-feed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--zen-slate);
    font-weight: 600;
    font-size: 0.9rem;
}

.social-empty-icon {
    font-size: 1.8rem;
    opacity: 0.4;
    margin-bottom: 0.25rem;
}

.social-empty-sub {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--zen-slate);
    opacity: 0.8;
}

/* ── Asset / completion badge ───────────────────────────────────────────── */
.admin-asset-section {
    display: grid; gap: 1rem; margin-bottom: .5rem; padding: 1rem;
    border: 1px solid var(--zen-border-faint); border-radius: 1.25rem;
    background: var(--zen-surface-subtle);
}

html.dark .admin-asset-section { background: var(--zen-surface-subtle); border-color: var(--zen-border-faint); }
.admin-asset-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }

.admin-asset-list, .admin-review-asset-list { display: flex; flex-wrap: wrap; gap: .85rem; }

.admin-technician-asset-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .85rem;
}

.admin-asset-card {
    position: relative;
    display: grid; grid-template-columns: auto 1fr;
    gap: .85rem; min-width: min(100%, 18rem);
    padding: .85rem;
    border: 1px solid var(--zen-border-faint); border-radius: 1rem;
    background: var(--zen-surface-input);
}

html.dark .admin-asset-card { background: var(--zen-surface-input); border-color: var(--zen-border-faint); }

.admin-technician-asset-card {
    min-width: 0;
    grid-template-columns: 1fr;
    gap: .65rem;
    padding: .75rem;
}

.admin-technician-asset-preview-shell {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: .85rem;
    background: rgba(100,116,139,.08);
}

.admin-technician-asset-preview-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: inherit;
    cursor: zoom-in;
}

.admin-technician-asset-preview-button:focus-visible {
    outline: 2px solid #4f6af5;
    outline-offset: 4px;
    border-radius: 1rem;
}

.admin-technician-asset-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-technician-asset-copy {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.admin-technician-asset-copy strong {
    font-size: .88rem;
}

.admin-technician-asset-copy span,
.admin-technician-asset-copy a {
    font-size: .75rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.admin-technician-asset-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3600;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(10,16,30,.5);
}

body:has(.admin-technician-asset-modal-overlay) { overflow: hidden; }
.admin-technician-asset-modal-overlay .modal-dialog {
    z-index: 1;
    margin-block: 1rem;
    height: calc(100vh - 2rem);
}

.admin-technician-asset-modal-overlay .admin-modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
}

.admin-technician-asset-modal-overlay .admin-modal-body {
    overflow: auto;
}

.admin-technician-asset-modal-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    height: min(58vh, calc(100vh - 15rem));
    padding: 1rem;
    border-radius: 1.25rem;
    background: rgba(100,116,139,.08);
}

.admin-technician-asset-modal-image {
    width: 100%;
    max-width: 100%;
    max-height: min(calc(58vh - 2rem), calc(100vh - 17rem));
    object-fit: contain;
    display: block;
}

.admin-technician-asset-modal-meta {
    margin-top: .9rem;
}

.admin-asset-remove-button {
    position: absolute; top: .45rem; right: .45rem;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.7rem; height: 1.7rem;
    padding: 0; border: 1px solid var(--zen-error-border); border-radius: 999px;
    background: var(--zen-surface-elevated); color: var(--zen-error-text);
    cursor: pointer; font-size: .85rem;
}

.admin-upload-field small { color: var(--zen-slate); font-size: .84rem; font-weight: 500; line-height: 1.5; }
.admin-upload-field input[type="file"] { min-height: 0; padding: .85rem 1rem; }

.admin-completion-badge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .22rem .65rem;
    border: 1px solid var(--zen-warning-border-soft); border-radius: 999px;
    background: var(--zen-warning-surface-soft); color: var(--zen-warning-text);
    font-size: .72rem; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; white-space: nowrap;
}

.admin-completion-badge.is-complete { border-color: var(--zen-success-border-soft); background: var(--zen-success-surface-soft); color: var(--zen-success-strong); }
.admin-completion-badge.is-complete::before { content: "\2713"; margin-right: .35rem; font-size: .76rem; line-height: 1; }

.admin-input-status-shell { position: relative; }
.admin-input-status-shell input, .admin-input-status-shell select { padding-right: 7.5rem; }
.admin-input-status-shell textarea { padding-right: 8rem; }
.admin-completion-badge-inline { position: absolute; top: 50%; right: .8rem; transform: translateY(-50%); pointer-events: none; z-index: 1; }
.admin-input-status-shell-textarea .admin-completion-badge-inline,
.admin-input-status-shell-file .admin-completion-badge-inline { top: .85rem; transform: none; }

/* ── Row action menus ───────────────────────────────────────────────────── */
.admin-row-action-menu { min-width: 12rem; padding: .45rem 0; border: 1px solid var(--zen-border-subtle); border-radius: 1.2rem; background: var(--zen-surface-elevated); box-shadow: 0 22px 48px rgba(20,26,54,.18); }
html.dark .admin-row-action-menu { border-color: var(--zen-border-subtle); background: var(--zen-surface-elevated); }
.admin-row-action-text { padding: .7rem 1rem; color: var(--zen-text-muted); font-size: .9rem; font-weight: 700; }
html.dark .admin-row-action-text { color: var(--zen-text-muted); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .admin-grid-overview,
    .admin-onboarding-welcome-grid,
    .admin-security-workflow-grid {
        grid-template-columns: 1fr;
    }

    .admin-onboarding-step-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-technician-asset-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .admin-technician-asset-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .admin-asset-upload-grid, .admin-form-grid, .admin-grid-two, .workspace-settings-grid { grid-template-columns: 1fr; }
    .admin-user-filter-grid { grid-template-columns: 1fr; }
    .admin-security-overview-grid { grid-template-columns: 1fr; }
    .admin-onboarding-progress-shell {
        flex-direction: column;
        align-items: start;
    }

    .admin-onboarding-progress-copy {
        justify-items: start;
    }

    .admin-onboarding-step-list {
        grid-template-columns: 1fr;
    }

    .admin-technician-asset-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .admin-technician-asset-list { grid-template-columns: 1fr; }
}

/* =============================================================================
   Verification queue page (/verifications)
   ============================================================================= */

.admin-verification-workspace {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 1024px) { .admin-verification-workspace { grid-template-columns: 1fr; } }

.admin-verification-queue-panel {
    display: flex;
    flex-direction: column;
    align-self: start;
    border: 1px solid var(--zen-border-subtle);
    border-radius: 1.8rem;
    background: var(--panel-light);
    box-shadow: 0 4px 16px rgba(53,25,70,.08);
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
}

html.dark .admin-verification-queue-panel { border-color: var(--zen-border-faint); background: var(--panel-dark); }

.admin-verification-queue-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem 2rem;
}

.admin-verification-queue-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.admin-filter-input {
    width: 100%;
    padding: .55rem .85rem;
    border: 1px solid var(--zen-border-subtle);
    border-radius: .85rem;
    background: var(--zen-surface-input);
    color: var(--zen-text);
    font-size: .875rem;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.admin-filter-input:focus { border-color: rgba(79,106,245,.5); box-shadow: 0 0 0 3px rgba(79,106,245,.12); }
html.dark .admin-filter-input { border-color: var(--zen-border-subtle); background: var(--zen-surface-input); color: var(--zen-text); }

.admin-logs-header-filter {
    min-width: 0;
}

.admin-logs-header-input {
    width: 100%;
    min-width: 0;
    padding: .28rem .45rem;
    border-radius: .6rem;
    font-size: .74rem;
    line-height: 1.15;
}

.admin-logs-data-grid th {
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.admin-verification-filter-bar {
    display: flex;
    flex-direction: column;
    /* No gap — use border-top dividers so rows butt up uniformly */
    border: 1px solid var(--zen-border-subtle);
    border-radius: 1rem;
    overflow: hidden;
}

.admin-verification-filter-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    height: 2.75rem;           /* fixed — same on every row */
    padding: 0 1rem;
    border: none;
    border-top: 1px solid var(--zen-border-faint);
    border-radius: 0;
    background: transparent;
    color: var(--zen-text);
    font-size: .92rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .1s, color .1s;
}

.admin-verification-filter-btn:first-child { border-top: none; }

.admin-verification-filter-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.admin-verification-filter-btn:hover {
    background: rgba(79,106,245,.07);
    color: var(--zen-text-strong);
}

.admin-verification-filter-btn.is-active {
    background: var(--zen-link);
    color: var(--zen-text-on-accent);
    font-weight: 700;
}

html.dark .admin-verification-filter-bar {
    border-color: var(--zen-border-subtle);
}

html.dark .admin-verification-filter-btn {
    color: var(--zen-text);
    border-top-color: var(--zen-border-faint);
}

html.dark .admin-verification-filter-btn:hover {
    background: var(--zen-surface-accent-soft);
    color: var(--zen-text-strong);
}

html.dark .admin-verification-filter-btn.is-active {
    background: var(--zen-violet);
    color: var(--zen-text-on-accent);
}

.admin-verification-filter-count {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: rgba(100,116,139,.14);
    font-size: .72rem;
    font-weight: 800;
    line-height: 1;
}

.admin-verification-filter-btn.is-active .admin-verification-filter-count {
    background: rgba(255,255,255,.28);
    color: var(--zen-text-on-accent);
}

.admin-verification-queue-list { display: flex; flex-direction: column; gap: .5rem; }

.admin-verification-queue-card {
    width: 100%;
    display: flex; flex-direction: column; gap: .35rem;
    padding: .85rem 1rem;
    border: 1px solid var(--zen-border-subtle); border-radius: 1.1rem;
    background: var(--zen-surface-subtle);
    text-align: left; cursor: pointer;
    transition: background .12s, border-color .12s, box-shadow .12s;
}

.admin-verification-queue-card:hover { background: rgba(79,106,245,.05); border-color: rgba(79,106,245,.2); }
.admin-verification-queue-card.is-selected { background: rgba(79,106,245,.08); border-color: rgba(79,106,245,.3); box-shadow: 0 4px 16px rgba(79,106,245,.1); }
html.dark .admin-verification-queue-card { border-color: var(--zen-border-subtle); background: var(--zen-surface-subtle); }
html.dark .admin-verification-queue-card.is-selected { background: var(--zen-surface-accent-soft); border-color: var(--zen-border-subtle); }

.admin-verification-queue-card-identity { display: flex; align-items: center; gap: .65rem; }
.admin-verification-queue-card-meta { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.admin-verification-queue-card-meta strong { font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-verification-queue-card-meta span { font-size: .78rem; color: var(--zen-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-verification-queue-card-status { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.admin-verification-queue-card-time { font-size: .75rem; color: var(--zen-slate); }

.admin-verification-review-panel {
    display: flex; flex-direction: column;
    border: 1px solid var(--zen-border-subtle); border-radius: 1.8rem;
    background: var(--panel-light);
    box-shadow: 0 4px 16px rgba(53,25,70,.08);
    overflow: hidden;
}

html.dark .admin-verification-review-panel { border-color: var(--zen-border-faint); background: var(--panel-dark); }

.admin-verification-empty-selection {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    color: var(--zen-slate);
}

.admin-verification-empty-selection-copy {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 1.5rem 2rem;
    text-align: center;
}

.admin-verification-review-content { display: flex; flex-direction: column; }

.admin-verification-review-header { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem 2rem 1.5rem; border-bottom: 1px solid var(--border-light); }
html.dark .admin-verification-review-header { border-bottom-color: rgba(255,255,255,.08); }

.admin-verification-review-identity { display: flex; align-items: center; gap: 1rem; }
.admin-verification-review-identity h2 { margin: 0; font-size: 1.25rem; }
.admin-verification-review-identity > div { display: flex; flex-direction: column; gap: .15rem; }
.admin-verification-review-identity > div span { font-size: .85rem; color: var(--zen-slate); }
.admin-verification-review-status-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.admin-verification-section { display: flex; flex-direction: column; gap: .85rem; padding: 1.5rem 2rem; border-bottom: 1px solid var(--border-light); }
html.dark .admin-verification-section { border-bottom-color: rgba(255,255,255,.06); }

.admin-verification-asset-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }

.admin-verification-asset-card { display: flex; flex-direction: column; gap: .6rem; border: 1px solid var(--zen-border-subtle); border-radius: 1.1rem; overflow: hidden; background: var(--zen-surface-subtle); }
html.dark .admin-verification-asset-card { border-color: var(--zen-border-subtle); background: var(--zen-surface-subtle); }

.admin-verification-asset-image-shell { aspect-ratio: 4/3; overflow: hidden; background: rgba(100,116,139,.08); }
.admin-verification-asset-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-verification-asset-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--zen-slate); font-size: .8rem; }

.admin-verification-asset-meta { display: flex; flex-direction: column; gap: .2rem; padding: 0 .75rem .75rem; }
.admin-verification-asset-meta strong { font-size: .85rem; font-weight: 600; }
.admin-verification-asset-meta span { font-size: .75rem; color: var(--zen-slate); }
.admin-verification-asset-link { font-size: .8rem; color: var(--zen-link); text-decoration: none; font-weight: 700; }
.admin-verification-asset-link:hover { color: var(--zen-link-hover); text-decoration: underline; }
html.dark .admin-verification-asset-link { color: var(--zen-link); }
html.dark .admin-verification-asset-link:hover { color: var(--zen-link-hover); }

.admin-verification-prior-note {
    display: flex; flex-direction: column; gap: .35rem;
    padding: .85rem 1rem;
    border-left: 3px solid var(--zen-warning-border); border-radius: 0 .75rem .75rem 0;
    background: var(--zen-warning-surface-soft); font-size: .875rem;
}

html.dark .admin-verification-prior-note { border-left-color: var(--zen-warning-border); background: var(--zen-warning-surface-soft); }

.admin-verification-action-buttons { display: flex; flex-wrap: wrap; gap: .6rem; }

.admin-danger-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .55rem 1.1rem;
    border: 1px solid var(--zen-error-border); border-radius: .85rem;
    background: var(--zen-error-surface-soft); color: var(--zen-error-text);
    font-size: .875rem; font-weight: 600; cursor: pointer;
    transition: background .12s, border-color .12s, box-shadow .12s;
}

.admin-danger-button:hover:not(:disabled) { background: var(--zen-error-surface-soft); border-color: var(--zen-error-border); box-shadow: 0 4px 12px rgba(239,68,68,.15); }
.admin-danger-button:disabled { opacity: .45; cursor: not-allowed; }
html.dark .admin-danger-button { border-color: var(--zen-error-border); color: var(--zen-error-text); background: var(--zen-error-surface-soft); }

.admin-verification-decision-form {
    display: flex; flex-direction: column; gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--zen-border-subtle); border-radius: 1.1rem;
    background: var(--zen-surface-accent-soft);
}

html.dark .admin-verification-decision-form { border-color: var(--zen-border-subtle); background: var(--zen-surface-accent-soft); }

@media (max-width: 1280px) {
    .admin-verification-asset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .admin-verification-asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .admin-verification-asset-grid { grid-template-columns: 1fr; }
}
.admin-verification-review-form { border-bottom: none; }

.admin-prompt-preview {
    margin: 0;
    padding: 1rem;
    border-radius: 0.5rem;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.08);
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    max-height: 22rem;
    overflow-y: auto;
}

/* ── Technician workspace ───────────────────────────────────────────────── */
.technician-workspace-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.technician-workspace-hero-panel {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.82), transparent 24%),
        radial-gradient(circle at 18% 88%, rgba(111, 227, 208, 0.24), transparent 26%),
        linear-gradient(135deg, rgba(245, 239, 255, 0.98) 0%, rgba(239, 247, 255, 0.96) 48%, rgba(236, 250, 245, 0.95) 100%);
}

.technician-workspace-hero-panel::before,
.technician-workspace-hero-panel::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.technician-workspace-hero-panel::before {
    inset: auto -7rem -6.5rem auto;
    width: 24rem;
    height: 14rem;
    border-radius: 48% 52% 52% 48% / 58% 42% 58% 42%;
    background:
        linear-gradient(135deg, rgba(92, 68, 255, 0.16), rgba(111, 227, 208, 0.12)),
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), transparent 46%);
    filter: blur(0.5px);
    opacity: 0.95;
}

.technician-workspace-hero-panel::after {
    inset: 3.4rem -1.6rem auto auto;
    width: 17rem;
    height: 4.5rem;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(92, 68, 255, 0.12), rgba(111, 227, 208, 0.08), rgba(92, 68, 255, 0.04));
    transform: rotate(-7deg);
    opacity: 0.9;
}

.technician-workspace-hero-copy {
    display: grid;
    gap: 0.45rem;
    max-width: 45rem;
    position: relative;
    z-index: 1;
}

.technician-workspace-hero-meta {
    position: relative;
    z-index: 1;
}

html.dark .technician-workspace-hero-panel {
    background:
        radial-gradient(circle at 82% 16%, rgba(255, 255, 255, 0.08), transparent 22%),
        radial-gradient(circle at 16% 84%, rgba(111, 227, 208, 0.16), transparent 26%),
        linear-gradient(135deg, rgba(37, 27, 70, 0.94) 0%, rgba(18, 31, 56, 0.95) 54%, rgba(16, 41, 43, 0.92) 100%);
}

html.dark .technician-workspace-hero-panel::before {
    background:
        linear-gradient(135deg, rgba(143, 168, 255, 0.16), rgba(111, 227, 208, 0.1)),
        radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.12), transparent 48%);
}

html.dark .technician-workspace-hero-panel::after {
    background:
        linear-gradient(90deg, rgba(143, 168, 255, 0.12), rgba(111, 227, 208, 0.08), rgba(143, 168, 255, 0.04));
}

.technician-workspace-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.45fr) minmax(19rem, 0.85fr);
    align-items: start;
}

.technician-schedule-stack {
    display: grid;
    gap: 1rem;
}

.technician-calendar-shell {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.technician-schedule-panel {
    position: relative;
    overflow: hidden;
}

.technician-schedule-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 0.35rem;
    background: var(--zen-violet);
    opacity: 0.9;
}

.technician-schedule-panel-calendar::before {
    background: linear-gradient(90deg, #4f6af5 0%, #6a59ff 100%);
}

.technician-schedule-panel-week::before {
    background: linear-gradient(90deg, #35c2c9 0%, #7a62ff 100%);
}

.technician-schedule-panel-agenda::before {
    background: linear-gradient(90deg, #27b88d 0%, #6ed7da 100%);
}

.technician-schedule-panel-activity::before {
    background: linear-gradient(90deg, #f0a83c 0%, #f26b7a 100%);
}

.technician-calendar-picker {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 1rem;
    border: 1px solid var(--zen-border-subtle);
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(79, 106, 245, 0.08) 0%, rgba(255, 255, 255, 0.88) 100%);
    overflow: hidden;
}

.technician-calendar-picker input.flatpickr-input {
    display: block;
    width: 100%;
    min-height: 3.2rem;
    margin: 0 0 0.9rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(92, 68, 255, 0.16);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.94);
    color: var(--zen-text-strong);
    font-size: 1rem;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.technician-calendar-picker input.flatpickr-input:focus {
    outline: none;
    border-color: rgba(92, 68, 255, 0.28);
    box-shadow: 0 0 0 3px rgba(92, 68, 255, 0.12);
}

.technician-calendar-picker .flatpickr-calendar.inline {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    box-shadow: none;
    background: transparent;
    flex: 1 1 auto;
}

.technician-calendar-picker .flatpickr-innerContainer,
.technician-calendar-picker .flatpickr-rContainer,
.technician-calendar-picker .flatpickr-weekdays,
.technician-calendar-picker .flatpickr-weekdaycontainer,
.technician-calendar-picker .flatpickr-days,
.technician-calendar-picker .dayContainer {
    width: 100% !important;
    min-width: 0;
    max-width: none;
}

.technician-calendar-picker .flatpickr-innerContainer {
    display: flex;
}

.technician-calendar-picker .flatpickr-weekdaycontainer,
.technician-calendar-picker .dayContainer {
    display: flex;
    flex-wrap: wrap;
}

.technician-calendar-picker .flatpickr-weekday,
.technician-calendar-picker .flatpickr-day {
    width: calc(100% / 7);
    max-width: none;
    flex: 0 0 calc(100% / 7);
}

.technician-calendar-picker .flatpickr-day {
    color: var(--zen-text);
}

.technician-calendar-picker .flatpickr-day.selected,
.technician-calendar-picker .flatpickr-day.startRange,
.technician-calendar-picker .flatpickr-day.endRange {
    background: var(--zen-violet);
    border-color: var(--zen-violet);
    color: #fff;
}

.technician-calendar-picker .flatpickr-day.today {
    border-color: var(--zen-violet);
}

.technician-calendar-detail {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
}

.technician-panel-kicker {
    margin: 0 0 0.25rem;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.technician-panel-kicker-sky {
    color: #4f6af5;
}

.technician-calendar-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.technician-calendar-detail-header strong {
    display: block;
    color: var(--zen-text-strong);
    font-size: 1.1rem;
}

.technician-calendar-detail-header span {
    color: var(--zen-text-muted);
}

.technician-calendar-snapshot {
    display: grid;
    gap: 0.75rem;
    grid-auto-flow: column;
    grid-auto-columns: clamp(10.5rem, 14vw, 12.75rem);
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    margin-inline: -0.2rem;
    padding: 0.25rem 0.2rem 0.85rem;
    scroll-padding-inline: 0.2rem;
    scroll-snap-type: x proximity;
}

.technician-calendar-snapshot-day {
    position: relative;
    display: grid;
    gap: 0.3rem;
    width: 100%;
    min-height: 10.25rem;
    padding: 1rem;
    border: 1px solid var(--zen-border-faint);
    border-radius: 1rem;
    background:
        linear-gradient(180deg, var(--snapshot-soft, rgba(92, 68, 255, 0.12)) 0%, var(--zen-surface-subtle) 58%);
    text-align: left;
    appearance: none;
    cursor: pointer;
    overflow: hidden;
    scroll-snap-align: start;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.technician-calendar-snapshot-day::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 0.32rem;
    background: var(--snapshot-accent, var(--zen-violet));
}

.technician-calendar-snapshot-day:hover,
.technician-calendar-snapshot-day:focus-visible {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--snapshot-accent, var(--zen-violet)) 28%, var(--zen-border-faint));
    box-shadow: 0 14px 28px rgba(53, 25, 70, 0.1);
    outline: none;
}

.technician-calendar-snapshot-day.is-selected {
    border-color: color-mix(in srgb, var(--snapshot-accent, var(--zen-violet)) 42%, var(--zen-border-faint));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--snapshot-accent, var(--zen-violet)) 20%, transparent), 0 16px 30px rgba(53, 25, 70, 0.12);
}

.technician-calendar-snapshot-day-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 1.65rem;
    padding: 0 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--snapshot-accent, var(--zen-violet)) 14%, white);
    color: color-mix(in srgb, var(--snapshot-accent, var(--zen-violet)) 74%, var(--zen-text-strong));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.technician-calendar-snapshot-day strong,
.technician-calendar-snapshot-day b {
    color: var(--zen-text-strong);
}

.technician-calendar-snapshot-day span {
    color: var(--zen-text-muted);
    font-size: 0.85rem;
}

.technician-calendar-snapshot-day b {
    font-size: 0.95rem;
}

.technician-calendar-snapshot-day small {
    color: var(--zen-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.technician-calendar-snapshot-day.snapshot-tone-monday {
    --snapshot-accent: #4f6af5;
    --snapshot-soft: rgba(79, 106, 245, 0.14);
}

.technician-calendar-snapshot-day.snapshot-tone-tuesday {
    --snapshot-accent: #3fbac2;
    --snapshot-soft: rgba(63, 186, 194, 0.14);
}

.technician-calendar-snapshot-day.snapshot-tone-wednesday {
    --snapshot-accent: #7a62ff;
    --snapshot-soft: rgba(122, 98, 255, 0.14);
}

.technician-calendar-snapshot-day.snapshot-tone-thursday {
    --snapshot-accent: #f0a83c;
    --snapshot-soft: rgba(240, 168, 60, 0.15);
}

.technician-calendar-snapshot-day.snapshot-tone-friday {
    --snapshot-accent: #ec6b89;
    --snapshot-soft: rgba(236, 107, 137, 0.14);
}

.technician-calendar-snapshot-day.snapshot-tone-saturday {
    --snapshot-accent: #27b88d;
    --snapshot-soft: rgba(39, 184, 141, 0.14);
}

.technician-calendar-snapshot-day.snapshot-tone-sunday {
    --snapshot-accent: #5d7df1;
    --snapshot-soft: rgba(93, 125, 241, 0.14);
}

.technician-calendar-snapshot-day.snapshot-tone-default {
    --snapshot-accent: var(--zen-violet);
    --snapshot-soft: rgba(92, 68, 255, 0.12);
}

html.dark .technician-calendar-picker {
    background: linear-gradient(180deg, rgba(79, 106, 245, 0.16) 0%, rgba(25, 32, 42, 0.96) 100%);
}

html.dark .technician-calendar-picker input.flatpickr-input {
    border-color: rgba(173, 205, 255, 0.18);
    background: rgba(15, 23, 34, 0.86);
    color: var(--zen-text-strong);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

html.dark .technician-calendar-picker .flatpickr-current-month,
html.dark .technician-calendar-picker .flatpickr-current-month .flatpickr-monthDropdown-months,
html.dark .technician-calendar-picker .flatpickr-current-month input.cur-year,
html.dark .technician-calendar-picker .flatpickr-weekday,
html.dark .technician-calendar-picker .flatpickr-prev-month,
html.dark .technician-calendar-picker .flatpickr-next-month {
    color: var(--zen-text-strong);
    fill: var(--zen-text-strong);
}

html.dark .technician-calendar-picker .flatpickr-prev-month:hover svg,
html.dark .technician-calendar-picker .flatpickr-next-month:hover svg,
html.dark .technician-calendar-picker .flatpickr-prev-month svg,
html.dark .technician-calendar-picker .flatpickr-next-month svg {
    fill: var(--zen-text-strong);
}

html.dark .technician-calendar-snapshot-day {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--snapshot-accent, var(--zen-violet)) 18%, rgba(18, 24, 34, 0.92)) 0%, rgba(24, 32, 44, 0.94) 58%);
}

html.dark .technician-calendar-snapshot-day:hover,
html.dark .technician-calendar-snapshot-day:focus-visible {
    border-color: color-mix(in srgb, var(--snapshot-accent, var(--zen-violet)) 34%, rgba(173, 205, 255, 0.18));
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
}

html.dark .technician-calendar-snapshot-day.is-selected {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--snapshot-accent, var(--zen-violet)) 28%, transparent), 0 18px 32px rgba(0, 0, 0, 0.32);
}

html.dark .technician-calendar-snapshot-day-badge {
    background: color-mix(in srgb, var(--snapshot-accent, var(--zen-violet)) 18%, rgba(255, 255, 255, 0.06));
    color: #f3f6ff;
}

.technician-calendar-empty,
.technician-table-subcopy,
.technician-table-note {
    color: var(--zen-text-muted);
    font-size: 0.88rem;
}

.technician-calendar-empty {
    margin: 0;
    padding-top: 0.25rem;
}

.technician-appointment-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.8rem;
    border: 1px solid var(--zen-border-subtle);
    border-radius: 1rem;
    background: var(--zen-surface-elevated);
    box-shadow: 0 4px 14px rgba(53, 25, 70, 0.06);
}

html.dark .technician-appointment-card {
    background: rgba(18, 24, 34, 0.96);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.technician-interactive-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.technician-interactive-card:hover,
.technician-interactive-card:focus-within {
    transform: translateY(-5px);
    border-color: rgba(92, 68, 255, 0.28);
    box-shadow: 0 18px 34px rgba(53, 25, 70, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 245, 255, 0.96));
}

html.dark .technician-interactive-card:hover,
html.dark .technician-interactive-card:focus-within {
    border-color: rgba(173, 205, 255, 0.28);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.3);
    background:
        linear-gradient(180deg, rgba(27, 35, 48, 0.98), rgba(20, 28, 40, 0.98));
}

.technician-appointment-openable {
    cursor: pointer;
}

.technician-appointment-openable:focus-visible {
    outline: 3px solid var(--zen-focus-ring);
    outline-offset: 2px;
}

.technician-appointment-card-topline,
.technician-agenda-item-topline,
.technician-timeline-item-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.technician-appointment-card-main {
    display: grid;
    grid-template-columns: 0.35rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}

.technician-appointment-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.technician-appointment-accent {
    display: block;
    width: 0.35rem;
    min-height: 100%;
    border-radius: 999px;
    background: var(--zen-surface-accent-soft);
}

.technician-appointment-accent.accent-neutral { background: var(--zen-violet); }
.technician-appointment-accent.accent-warning { background: #d6a100; }
.technician-appointment-accent.accent-complete { background: #2ab673; }
.technician-appointment-accent.accent-danger { background: #d84b67; }

.technician-appointment-card-customer {
    color: var(--zen-text-strong);
    font-size: 0.95rem;
}

.technician-appointment-card-copy,
.technician-agenda-item p,
.technician-timeline-item p,
.technician-review-summary p {
    margin: 0;
    color: var(--zen-text-muted);
}

.technician-agenda-list,
.technician-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.technician-response-panel {
    border-color: color-mix(in srgb, #e0aa00 28%, var(--zen-border-subtle));
    background:
        radial-gradient(circle at top right, color-mix(in srgb, #ffd666 18%, transparent), transparent 36%),
        var(--zen-surface-elevated);
}

.technician-response-list {
    display: grid;
    gap: 0.9rem;
}

.technician-response-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, #e0aa00 22%, var(--zen-border-subtle));
    border-radius: 1.25rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, #ffd666 12%, transparent), transparent 40%),
        var(--zen-surface-subtle);
}

.technician-response-card-main {
    display: grid;
    grid-template-columns: 0.35rem minmax(0, 1fr);
    gap: 0.9rem;
    min-width: 0;
}

.technician-response-card-topline,
.technician-card-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.technician-response-card-topline span:last-child {
    color: var(--zen-text-muted);
    font-weight: 800;
}

.technician-response-card h3,
.technician-response-card p {
    margin: 0.35rem 0 0;
}

.technician-response-card h3 {
    color: var(--zen-text-strong);
}

.technician-response-card p {
    color: var(--zen-text-muted);
}

.technician-response-actions,
.technician-card-action-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.technician-card-action-row {
    margin-top: 0.85rem;
}

.technician-marker-button {
    border-color: color-mix(in srgb, #ffb000 32%, var(--zen-border-subtle)) !important;
    color: color-mix(in srgb, #ffb000 72%, var(--zen-text-strong)) !important;
}

.technician-marker-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    min-width: 2.65rem;
    height: 2.65rem;
    min-height: 2.65rem;
    padding: 0;
    border-radius: 999px;
    background: color-mix(in srgb, #ffb000 11%, var(--zen-surface-subtle)) !important;
}

.technician-marker-icon-button i {
    font-size: 1.08rem;
    line-height: 1;
}

.technician-marker-icon-button:hover:not(:disabled),
.technician-marker-icon-button:focus-visible {
    border-color: color-mix(in srgb, #ffb000 58%, var(--zen-border-subtle)) !important;
    background: color-mix(in srgb, #ffb000 18%, var(--zen-surface-subtle)) !important;
    box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, #ffb000 18%, transparent);
    transform: translateY(-1px);
}

.technician-inline-marker-button {
    margin-left: 0.75rem;
    vertical-align: middle;
}

.technician-agenda-deck {
    margin: 0;
}

.technician-agenda-card {
    position: relative;
    overflow: hidden;
    --agenda-accent: #5c44ff;
    --agenda-soft: rgba(92, 68, 255, 0.14);
    --agenda-border: rgba(92, 68, 255, 0.2);
    --agenda-shadow: rgba(53, 25, 70, 0.12);
    border: 1px solid var(--agenda-border) !important;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.72), transparent 34%),
        linear-gradient(180deg, var(--agenda-soft) 0%, rgba(255, 255, 255, 0.98) 38%, rgba(249, 248, 255, 0.98) 100%);
    box-shadow: 0 14px 30px var(--agenda-shadow), 0 0 0 1px color-mix(in srgb, var(--agenda-accent) 4%, transparent);
}

.technician-agenda-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 0.35rem;
    background: linear-gradient(90deg, var(--agenda-accent) 0%, color-mix(in srgb, var(--agenda-accent) 58%, white) 100%);
}

.technician-agenda-card.agenda-card-tone-complete {
    --agenda-accent: #27b88d;
    --agenda-soft: rgba(110, 215, 218, 0.14);
    --agenda-border: rgba(39, 184, 141, 0.2);
    --agenda-shadow: rgba(31, 112, 106, 0.12);
}

.technician-agenda-card.agenda-card-tone-warning {
    --agenda-accent: #e0aa00;
    --agenda-soft: rgba(255, 214, 102, 0.18);
    --agenda-border: rgba(224, 170, 0, 0.22);
    --agenda-shadow: rgba(163, 118, 0, 0.12);
}

.technician-agenda-card.agenda-card-tone-danger {
    --agenda-accent: #d84b67;
    --agenda-soft: rgba(242, 125, 153, 0.16);
    --agenda-border: rgba(216, 75, 103, 0.22);
    --agenda-shadow: rgba(130, 34, 57, 0.14);
}

.technician-agenda-card.agenda-card-tone-neutral {
    --agenda-accent: #5c44ff;
    --agenda-soft: rgba(122, 98, 255, 0.15);
    --agenda-border: rgba(92, 68, 255, 0.2);
    --agenda-shadow: rgba(53, 25, 70, 0.12);
}

.technician-agenda-card-body,
.technician-agenda-item,
.technician-timeline-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.technician-agenda-item,
.technician-timeline-item {
    padding: 0.95rem 1rem;
    border: 1px solid var(--zen-border-subtle);
    border-radius: 1rem;
    background: var(--zen-surface-subtle);
}

.technician-timeline-item-openable {
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.technician-timeline-item-openable:hover,
.technician-timeline-item-openable:focus-within {
    border-color: color-mix(in srgb, var(--zen-violet) 24%, var(--zen-border-subtle));
    box-shadow: 0 14px 28px rgba(53, 25, 70, 0.12);
    transform: translateY(-1px);
}

.technician-timeline-status-note {
    font-size: 0.9rem;
    font-weight: 800;
}

.technician-agenda-card .card-body {
    height: 100%;
}

.technician-agenda-card .technician-appointment-card-main {
    min-height: 100%;
}

.technician-agenda-card .technician-agenda-item-topline {
    padding-top: 0.15rem;
}

.technician-agenda-item .technician-agenda-item-topline span:last-child {
    color: var(--zen-text-muted);
    text-align: right;
}

html.dark .technician-agenda-card {
    border-color: color-mix(in srgb, var(--agenda-accent) 38%, rgba(255, 255, 255, 0.08)) !important;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.07), transparent 32%),
        linear-gradient(180deg, color-mix(in srgb, var(--agenda-accent) 24%, rgba(24, 32, 44, 0.98)) 0%, rgba(24, 32, 44, 0.98) 44%, rgba(18, 29, 37, 0.98) 100%);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28), 0 0 0 1px color-mix(in srgb, var(--agenda-accent) 10%, transparent);
}

html.dark .technician-response-panel {
    background:
        radial-gradient(circle at top right, rgba(255, 183, 0, 0.16), transparent 34%),
        rgba(20, 28, 40, 0.98);
}

html.dark .technician-response-card {
    background:
        linear-gradient(135deg, rgba(255, 183, 0, 0.1), transparent 42%),
        rgba(26, 35, 48, 0.98);
    border-color: rgba(255, 214, 102, 0.24);
}

.technician-appointment-detail-dialog {
    width: min(820px, 100%);
    max-height: calc(100vh - 2rem);
    display: flex;
}

.technician-appointment-map-dialog {
    width: min(880px, 100%);
    max-height: calc(100vh - 2rem);
    display: flex;
}

.technician-appointment-detail-modal {
    width: 100%;
    max-height: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.technician-appointment-map-modal {
    width: 100%;
    max-height: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.technician-appointment-detail-body {
    display: grid;
    gap: 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 1.25rem;
}

.technician-appointment-map-body {
    display: grid;
    gap: 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 1.25rem;
}

.technician-appointment-detail-summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.technician-appointment-map-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.technician-appointment-map-summary article {
    padding: 1rem;
    border-radius: 1.1rem;
    border: 1px solid var(--zen-border-faint);
    background:
        radial-gradient(circle at top right, rgba(255, 176, 0, 0.12), transparent 38%),
        var(--zen-surface-subtle);
}

.technician-appointment-map-summary strong,
.technician-appointment-map-summary span {
    display: block;
}

.technician-appointment-map-summary strong {
    color: var(--zen-text-strong);
}

.technician-appointment-map-summary span {
    margin-top: 0.35rem;
    color: var(--zen-text-muted);
    font-weight: 800;
}

.technician-appointment-map-canvas {
    min-height: 22rem;
    border-radius: 1.25rem;
    border: 1px solid color-mix(in srgb, #ffb000 22%, var(--zen-border-subtle));
    overflow: hidden;
    background: var(--zen-surface-subtle);
    box-shadow: var(--zen-shadow-soft);
}

.technician-appointment-map-empty {
    display: grid;
    gap: 0.45rem;
    min-height: 12rem;
    place-items: center;
    padding: 1.4rem;
    text-align: center;
    border-radius: 1.25rem;
    border: 1px dashed var(--zen-border-subtle);
    background: var(--zen-surface-subtle);
}

.technician-appointment-map-empty strong {
    color: var(--zen-text-strong);
}

.technician-appointment-map-empty p {
    max-width: 32rem;
    margin: 0;
    color: var(--zen-text-muted);
}

.technician-appointment-detail-section {
    background: var(--zen-surface-subtle);
}

.technician-appointment-message-panel {
    border-color: color-mix(in srgb, var(--zen-violet) 18%, var(--zen-border-subtle));
}

.technician-appointment-message-thread {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--zen-sky) 18%, var(--zen-border-subtle));
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--zen-surface-strong) 82%, transparent);
}

.technician-appointment-message-thread-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.admin-ghost-button-small {
    min-height: 2.4rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.88rem;
}

.technician-appointment-message-list {
    display: grid;
    gap: 0.75rem;
    max-height: 18rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.technician-appointment-message-bubble {
    max-width: min(46rem, 88%);
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--zen-border-subtle) 88%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--zen-surface-subtle) 86%, transparent);
}

.technician-appointment-message-bubble.is-technician {
    justify-self: end;
    border-color: color-mix(in srgb, var(--zen-cyan) 32%, transparent);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--zen-cyan) 20%, var(--zen-surface-subtle)),
        color-mix(in srgb, var(--zen-blue) 22%, var(--zen-surface-subtle)));
}

.technician-appointment-message-bubble.is-customer {
    justify-self: start;
    border-color: color-mix(in srgb, var(--zen-amber) 28%, transparent);
}

.technician-appointment-message-bubble p {
    margin: 0.45rem 0 0;
    white-space: pre-wrap;
}

.technician-appointment-message-delivery {
    display: block;
    margin-top: 0.55rem;
    color: var(--zen-text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.technician-appointment-message-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem 0.8rem;
    color: var(--zen-text-muted);
    font-size: 0.86rem;
}

.technician-appointment-message-input {
    width: 100%;
    min-height: 7rem;
    resize: vertical;
}

.technician-appointment-message-actions,
.technician-appointment-detail-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.technician-appointment-message-actions {
    justify-content: flex-end;
}

.technician-appointment-message-send-button {
    opacity: 0.72;
    filter: saturate(0.78);
    transition: opacity 160ms ease, filter 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.technician-appointment-message-send-button.is-ready:not(:disabled) {
    opacity: 1;
    filter: saturate(1.15);
    box-shadow: 0 1rem 2.6rem color-mix(in srgb, var(--zen-cyan) 24%, transparent),
        0 0 0 0.16rem color-mix(in srgb, var(--zen-cyan) 34%, transparent);
    transform: translateY(-1px);
}

.technician-appointment-line-items {
    display: grid;
    gap: 0.75rem;
}

.booking-qr-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(22rem, .8fr);
    gap: 1rem;
    align-items: start;
}

.booking-qr-camera-shell {
    display: grid;
    gap: .65rem;
}

.booking-qr-camera {
    width: 100%;
    min-height: 18rem;
    border-radius: 1.35rem;
    border: 1px solid var(--zen-border-subtle);
    background:
        linear-gradient(135deg, rgba(15, 23, 42, .9), rgba(30, 41, 59, .84)),
        var(--zen-surface-soft);
    object-fit: cover;
}

.booking-qr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.booking-qr-audit-list {
    display: grid;
    gap: .75rem;
}

.booking-qr-audit-card {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border-radius: 1.2rem;
    border: 1px solid var(--zen-border-faint);
    background: color-mix(in srgb, var(--zen-surface-elevated) 88%, var(--zen-violet) 6%);
}

.booking-qr-audit-card strong {
    color: var(--zen-text-strong);
}

.booking-qr-audit-card p,
.booking-qr-audit-card small {
    display: block;
    margin: .2rem 0 0;
    color: var(--zen-text-muted);
}

.customer-booking-qr-deck {
    display: grid;
    gap: 1rem;
}

.customer-booking-qr-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1.15rem;
    border-radius: 1.35rem;
    border: 1px solid var(--zen-border-faint);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--zen-mint) 18%, transparent), transparent 34%),
        color-mix(in srgb, var(--zen-surface-elevated) 92%, var(--zen-violet) 4%);
    box-shadow: var(--zen-shadow-soft);
}

.customer-booking-qr-copy {
    display: grid;
    gap: .45rem;
}

.customer-booking-qr-code {
    display: grid;
    justify-items: center;
    gap: .45rem;
    min-width: 11rem;
    padding: .85rem;
    border-radius: 1.1rem;
    border: 1px solid color-mix(in srgb, var(--zen-violet) 18%, var(--zen-border-faint));
    background: #fff;
    color: #1f1638;
}

.customer-booking-qr-code img {
    width: 8.75rem;
    height: 8.75rem;
    display: block;
}

.qr-brand-frame {
    position: relative;
    display: inline-grid;
    place-items: center;
}

.qr-brand-mark {
    position: absolute;
    inset: 50% auto auto 50%;
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    transform: translate(-50%, -50%);
    border: .22rem solid #fff;
    border-radius: .8rem;
    background: linear-gradient(135deg, #d83d96, #6d42f5);
    color: #fff;
    font-size: 1.18rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: .02em;
    box-shadow: 0 .45rem 1rem rgba(88, 58, 210, .26);
    pointer-events: none;
}

.customer-booking-qr-code a {
    color: var(--zen-violet-strong);
    font-weight: 800;
    text-decoration: none;
}

.customer-booking-qr-code small {
    color: #675f7c;
    text-align: center;
}

.technician-qr-button {
    white-space: nowrap;
}

.technician-meet-qr-panel {
    border-color: rgba(49, 190, 167, .34);
    background:
        radial-gradient(circle at top right, rgba(49, 190, 167, .18), transparent 34rem),
        var(--zen-panel);
}

.technician-meet-qr-list {
    display: grid;
    gap: 1rem;
}

.technician-meet-qr-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(49, 190, 167, .28);
    border-radius: 1.35rem;
    background: rgba(255, 255, 255, .74);
    box-shadow: 0 1rem 2rem rgba(30, 23, 55, .08);
}

[data-theme="dark"] .technician-meet-qr-card {
    background: rgba(20, 28, 41, .88);
}

.technician-meet-qr-card-main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .85rem;
    align-items: flex-start;
}

.technician-qr-primary-button {
    white-space: nowrap;
}

.technician-appointment-qr-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.technician-appointment-qr-display {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
}

.technician-appointment-qr-code img {
    width: 12rem;
    height: 12rem;
}

.technician-appointment-qr-code .qr-brand-mark {
    width: 3.05rem;
    height: 3.05rem;
    border-radius: 1rem;
    font-size: 1.5rem;
}

.technician-appointment-qr-instructions {
    display: grid;
    gap: .45rem;
}

@media (max-width: 760px) {
    .technician-meet-qr-card {
        align-items: stretch;
        flex-direction: column;
    }

    .technician-meet-qr-card .technician-response-actions {
        width: 100%;
        justify-content: stretch;
    }

    .technician-meet-qr-card .technician-response-actions > button {
        flex: 1 1 12rem;
    }
}

.technician-appointment-line-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--zen-border-faint);
}

.technician-appointment-line-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.technician-appointment-line-item strong,
.technician-appointment-line-item span {
    color: var(--zen-text-strong);
}

.technician-appointment-line-item p {
    margin: 0.25rem 0 0;
    color: var(--zen-text-muted);
}

.technician-appointment-detail-modal .admin-modal-header,
.technician-appointment-detail-modal .admin-modal-footer,
.technician-appointment-map-modal .admin-modal-header,
.technician-appointment-map-modal .admin-modal-footer {
    flex-shrink: 0;
}

.technician-appointment-detail-modal .admin-modal-header,
.technician-appointment-map-modal .admin-modal-header {
    position: relative;
    padding-right: 6rem;
}

.technician-appointment-detail-close-button {
    position: absolute;
    top: 1.15rem;
    right: 1.4rem;
    z-index: 1;
}

.technician-review-summary {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.technician-review-summary strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--zen-text-strong);
}

.technician-customer-table td {
    min-width: 10rem;
}

.technician-table-note {
    margin-top: 0.35rem;
    max-width: 22rem;
}

@media (max-width: 1280px) {
    .technician-calendar-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .technician-calendar-snapshot {
        grid-auto-columns: min(12rem, 78vw);
    }
}

@media (max-width: 640px) {
    .technician-workspace-meta {
        justify-content: flex-start;
    }

    .technician-appointment-detail-summary {
        flex-direction: column;
    }

    .technician-appointment-map-summary {
        grid-template-columns: 1fr;
    }

    .technician-appointment-message-actions,
    .technician-appointment-detail-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .technician-response-card {
        grid-template-columns: 1fr;
    }

    .technician-response-actions,
    .technician-card-action-row {
        justify-content: stretch;
    }

    .technician-response-actions > *,
    .technician-card-action-row > * {
        flex: 1 1 auto;
    }

    .booking-qr-grid,
    .booking-qr-audit-card,
    .customer-booking-qr-card {
        grid-template-columns: 1fr;
    }

    .booking-qr-grid {
        display: grid;
    }

    .booking-qr-audit-card {
        display: grid;
    }

    .customer-booking-qr-code {
        width: 100%;
    }

    .technician-review-summary {
        grid-template-columns: 1fr;
    }

    .technician-calendar-detail-header {
        flex-direction: column;
    }
}

/* ── Journeys: session list + action timeline ─────────────────────────── */
.admin-row-list { display: flex; flex-direction: column; gap: .5rem; max-height: 32rem; overflow-y: auto; }
.admin-row-item {
    display: flex; flex-direction: column; gap: .15rem;
    text-align: left; width: 100%; cursor: pointer;
    padding: .7rem .85rem; border-radius: .6rem;
    border: 1px solid var(--zen-border-faint); background: transparent; color: var(--zen-text);
}
.admin-row-item:hover { border-color: var(--zen-border-subtle); background: var(--zen-surface-subtle); }
.admin-row-item.is-selected { border-color: var(--zen-text-strong); background: var(--zen-surface-subtle); }
html.dark .admin-row-item:hover, html.dark .admin-row-item.is-selected { background: rgba(255,255,255,.05); }

.admin-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.admin-timeline-item {
    display: flex; gap: .85rem; padding: .55rem 0;
    border-left: 2px solid var(--zen-border-faint); padding-left: .9rem; margin-left: .35rem;
    position: relative;
}
.admin-timeline-item::before {
    content: ""; position: absolute; left: -5px; top: .85rem;
    width: 8px; height: 8px; border-radius: 50%; background: var(--zen-text-strong);
}
.admin-timeline-time { font-variant-numeric: tabular-nums; color: var(--zen-slate); min-width: 4.5rem; font-size: .9rem; }
.admin-timeline-body { color: var(--zen-text); }

/* Journeys: idle-gap divider + milestone (conversion) emphasis */
.admin-timeline-gap {
    list-style: none; color: var(--zen-text-muted); font-size: .8rem;
    padding: .3rem 0 .3rem .9rem; margin-left: .35rem; opacity: .7; font-style: italic;
}
.admin-timeline-item.is-milestone::before {
    width: 11px; height: 11px; left: -6px; background: var(--zen-success-border, var(--zen-text-strong));
}
.admin-timeline-item.is-milestone .admin-timeline-body strong { color: var(--zen-success-border, var(--zen-text-strong)); }

/* Journeys: booking funnel + linked-booking callout */
.admin-funnel { display: flex; flex-direction: column; gap: .45rem; }
.admin-funnel-row { display: grid; grid-template-columns: 12rem 1fr auto 4rem; align-items: center; gap: .75rem; }
.admin-funnel-label { color: var(--zen-text); font-size: .92rem; }
.admin-funnel-bar-track { background: var(--zen-surface-subtle); border-radius: .4rem; height: 1.1rem; overflow: hidden; }
.admin-funnel-bar { display: block; height: 100%; background: var(--zen-text-strong); border-radius: .4rem; min-width: 2px; }
.admin-funnel-count { font-variant-numeric: tabular-nums; text-align: right; color: var(--zen-text); }
.admin-funnel-drop { font-variant-numeric: tabular-nums; text-align: right; color: var(--zen-slate); font-size: .82rem; }
.admin-callout {
    padding: .6rem .85rem; border-radius: .6rem; font-size: .92rem;
    background: var(--zen-success-surface-soft, var(--zen-surface-subtle));
    border: 1px solid var(--zen-success-border-soft, var(--zen-border-subtle));
    color: var(--zen-text);
}
@media (max-width: 720px) { .admin-funnel-row { grid-template-columns: 8rem 1fr auto; } .admin-funnel-drop { display:none; } }

/* Journeys: live-tail badge */
.admin-live-badge {
    margin-left: .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
    color: #fff; background: #d23b3b; padding: .1rem .45rem; border-radius: .5rem;
    vertical-align: middle; animation: admin-live-pulse 1.6s ease-in-out infinite;
}
@keyframes admin-live-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* Journeys: visit headers + idle live-badge variant */
.admin-timeline-visit {
    list-style: none; margin: .6rem 0 .2rem -.35rem; padding: .25rem .6rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .02em;
    color: var(--zen-text-strong); background: var(--zen-surface-subtle);
    border-radius: .5rem; display: inline-block;
}
.admin-live-badge.is-idle {
    background: var(--zen-slate, #888); animation: none; color: #fff;
}