:root {
    --admin-shell-max-width: 1680px;
    --admin-shell-padding: 28px;
    --admin-shell-padding-sm: 14px;
    --admin-page-gap: 24px;
    --admin-section-gap: 16px;

    --admin-radius-xl: 18px;
    --admin-radius-lg: 14px;
    --admin-radius-md: 10px;
    --admin-radius-sm: 8px;

    --admin-shadow-lg: 0 20px 45px rgba(4, 8, 18, 0.35);
    --admin-shadow-md: 0 10px 26px rgba(3, 10, 24, 0.22);
    --admin-shadow-sm: 0 5px 14px rgba(3, 10, 24, 0.16);

    --admin-control-height: 44px;
    --admin-touch-height: 40px;

    --admin-table-cell-padding-x: 12px;
    --admin-table-cell-padding-y: 10px;
    --admin-table-header-height: 44px;
}

html {
    margin: 0;
    min-height: 100%;
    font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--mud-palette-text-primary);
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: inherit;
    background: radial-gradient(130% 140% at 100% -20%, rgba(94, 120, 255, 0.12), transparent 46%),
        radial-gradient(140% 120% at -10% 120%, rgba(45, 209, 201, 0.12), transparent 40%),
        var(--mud-palette-background);
    background-attachment: fixed;
    color: inherit;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.admin-login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: clamp(24px, 6vw, 64px);
}

.admin-login-card {
    width: min(100%, 460px);
    padding: clamp(24px, 4vw, 36px);
    border-radius: var(--admin-radius-xl);
    background: linear-gradient(
            145deg,
            color-mix(in oklab, var(--mud-palette-surface) 92%, transparent),
            color-mix(in oklab, var(--mud-palette-background) 72%, var(--mud-palette-primary) 6%));
    box-shadow:
        0 34px 80px rgba(3, 10, 24, 0.42),
        0 0 0 1px color-mix(in oklab, var(--mud-palette-lines-default) 58%, transparent),
        0 0 42px color-mix(in oklab, var(--mud-palette-primary) 14%, transparent);
}

.admin-login-brand {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.admin-login-mark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--mud-palette-primary);
    background: color-mix(in oklab, var(--mud-palette-primary) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mud-palette-primary) 22%, transparent);
}

.admin-login-title {
    margin: 0;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

.admin-login-subtitle {
    margin-top: 6px;
    color: var(--mud-palette-text-secondary);
}

.admin-login-form {
    display: grid;
    gap: 12px;
}

.admin-login-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-login-input {
    width: 100%;
    min-height: var(--admin-control-height);
    padding: 0 14px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 78%, transparent);
    border-radius: var(--admin-radius-md);
    outline: none;
    color: var(--mud-palette-text-primary);
    background: color-mix(in oklab, var(--mud-palette-surface) 74%, var(--mud-palette-background));
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.admin-login-input:focus {
    border-color: color-mix(in oklab, var(--mud-palette-primary) 70%, var(--mud-palette-lines-default));
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--mud-palette-primary) 18%, transparent);
}

.admin-login-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem;
}

.admin-login-submit {
    min-height: 46px;
}

.admin-login-alert {
    margin-bottom: 18px;
}

.admin-main-container {
    max-width: var(--admin-shell-max-width);
    margin: 0 auto;
    padding: var(--admin-shell-padding);
}

.admin-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.admin-page-title {
    margin: 0;
    letter-spacing: -0.018em;
    line-height: 1.15;
    font-weight: 700;
}

.admin-page-subtitle {
    margin-top: 6px;
    max-width: 88ch;
    color: var(--mud-palette-text-secondary);
    font-size: 0.94rem;
}

/* Page-level action cluster on the right of an admin-page-header (e.g. a
   Refresh / Export / New button). Sits flush with the page title baseline. */
.admin-page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Inline scope/info banner. Used to clarify what a list represents (e.g.
   what gets logged on the Activity Log). Subtler than MudAlert -- a thin
   tinted strip with an icon, no panel chrome. */
.admin-info-strip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--admin-radius-md);
    background: color-mix(in oklab, var(--mud-palette-info) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--mud-palette-info) 30%, transparent);
    color: var(--mud-palette-text-primary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.admin-info-strip .mud-icon-root {
    color: var(--mud-palette-info);
    flex-shrink: 0;
    margin-top: 2px;
}

.admin-info-strip strong {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.admin-info-link {
    color: var(--mud-palette-info);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px dotted color-mix(in oklab, var(--mud-palette-info) 60%, transparent);
}

.admin-info-link:hover {
    border-bottom-style: solid;
    color: var(--mud-palette-primary);
}

.admin-page-grid {
    display: grid;
    gap: var(--admin-page-gap);
}

/* ── Page tab navigation ─────────────────────────────────────
   Used by sibling pages that should feel like one tabbed surface
   (Categories: Browse/Refiner/Merges, Players: Browse/Schema, etc.).
   Sits below the page header. */
.admin-page-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    margin-bottom: 18px;
    border-radius: var(--admin-radius-md);
    background: color-mix(in oklab, var(--mud-palette-surface) 60%, var(--mud-palette-background));
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 50%, transparent);
    overflow-x: auto;
    width: fit-content;
    max-width: 100%;
}

.admin-page-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--admin-radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.admin-page-tab:hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 8%, transparent);
    color: var(--mud-palette-text-primary);
}

.admin-page-tab--active {
    background: color-mix(in oklab, var(--mud-palette-primary) 15%, transparent);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mud-palette-primary) 35%, transparent);
}

.admin-page-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: color-mix(in oklab, var(--mud-palette-primary) 22%, transparent);
    color: var(--mud-palette-primary);
    font-variant-numeric: tabular-nums;
}

.admin-page-tabs--sticky {
    position: sticky;
    top: 76px;
    z-index: 5;
    backdrop-filter: blur(8px);
    background: color-mix(in oklab, var(--mud-palette-surface) 85%, transparent);
}

/* Scroll-margin keeps anchor links from jumping under the sticky AppBar/tab strip. */
.admin-anchor-section {
    scroll-margin-top: 132px;
}

/* ── Collapsible "Advanced" cards ─────────────────────────────
   Used for power-user surfaces (Bundles Seed Export, anywhere else
   that needs an "open to reveal" container). Uses native <details>
   for a11y; chevron rotates via the [open] selector. */
.admin-collapsible-card {
    list-style: none;
    border-radius: var(--admin-radius-xl);
    overflow: hidden;
}

.admin-collapsible-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    cursor: pointer;
    user-select: none;
}

.admin-collapsible-card-header::-webkit-details-marker {
    display: none;
}

.admin-collapsible-card[open] > .admin-collapsible-card-header {
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 50%, transparent);
}

.admin-collapsible-card[open] > .admin-collapsible-card-header .qe-chevron {
    transform: rotate(180deg);
}

.admin-collapsible-card-body {
    padding: 24px;
}

/* ── Cmd+K command palette ───────────────────────────────── */
.cmdk-overlay {
    position: fixed;
    inset: 0;
    z-index: 1600;
    background: color-mix(in oklab, var(--mud-palette-background) 70%, transparent);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
    animation: cmdk-fade 0.12s ease-out;
}

@keyframes cmdk-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cmdk-shell {
    width: min(640px, 92vw);
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: color-mix(in oklab, var(--mud-palette-surface) 96%, transparent);
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
    border-radius: var(--admin-radius-lg);
    box-shadow:
        0 0 80px rgba(110, 139, 255, 0.08),
        0 25px 60px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    overflow: hidden;
    animation: cmdk-scale 0.16s ease-out;
}

@keyframes cmdk-scale {
    from { opacity: 0; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1); }
}

.cmdk-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 50%, transparent);
}

.cmdk-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-size: 1rem;
    font-family: inherit;
}

.cmdk-input::placeholder {
    color: var(--mud-palette-text-disabled);
}

.cmdk-results {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.cmdk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: var(--admin-radius-sm);
    background: transparent;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    font-size: 0.9rem;
    text-align: left;
    transition: background 0.1s ease;
}

.cmdk-row:hover,
.cmdk-row--active {
    background: color-mix(in oklab, var(--mud-palette-primary) 14%, transparent);
}

.cmdk-row-icon {
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.cmdk-row-label {
    flex: 1;
    font-weight: 500;
}

.cmdk-row-section {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
}

.cmdk-empty {
    padding: 36px 24px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.cmdk-hints {
    display: flex;
    gap: 16px;
    padding: 10px 18px;
    border-top: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 50%, transparent);
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
}

.cmdk-kbd {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in oklab, var(--mud-palette-text-primary) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 80%, transparent);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Publish Schedule timeline strip ─────────────────────── */
.publish-timeline-strip {
    position: relative;
    height: 88px;
    padding-top: 18px;
}

.publish-timeline-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.publish-timeline-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: color-mix(in oklab, var(--mud-palette-lines-default) 50%, transparent);
}

.publish-timeline-tick-label {
    position: absolute;
    top: 0;
    left: 4px;
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.publish-timeline-bars {
    position: absolute;
    top: 22px;
    left: 0;
    right: 0;
    bottom: 6px;
}

.publish-timeline-bar {
    position: absolute;
    height: 18px;
    border-radius: 4px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    overflow: hidden;
    cursor: default;
    background: color-mix(in oklab, var(--mud-palette-primary) 30%, var(--mud-palette-surface));
    border: 1px solid color-mix(in oklab, var(--mud-palette-primary) 50%, transparent);
    color: var(--mud-palette-text-primary);
}

.publish-timeline-bar + .publish-timeline-bar {
    margin-top: 4px;
    /* Stack overlapping bars vertically by giving each a small offset slot */
    top: 26px;
}

.publish-timeline-bar--event {
    background: color-mix(in oklab, var(--mud-palette-tertiary) 28%, var(--mud-palette-surface));
    border-color: color-mix(in oklab, var(--mud-palette-tertiary) 50%, transparent);
}

.publish-timeline-bar--segment {
    background: color-mix(in oklab, var(--mud-palette-info) 28%, var(--mud-palette-surface));
    border-color: color-mix(in oklab, var(--mud-palette-info) 50%, transparent);
}

.publish-timeline-bar--changeset {
    background: color-mix(in oklab, var(--mud-palette-warning) 28%, var(--mud-palette-surface));
    border-color: color-mix(in oklab, var(--mud-palette-warning) 50%, transparent);
}

.publish-timeline-bar-label {
    font-size: 0.72rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Sparkline ────────────────────────────────────────────── */
.sparkline {
    display: inline-block;
    line-height: 0;
    color: var(--mud-palette-text-secondary);
}

.sparkline svg {
    width: 100%;
    height: 100%;
    display: block;
}

.sparkline-empty {
    font-size: 0.7rem;
    opacity: 0.4;
}

.admin-surface {
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 85%, transparent);
    border-radius: var(--admin-radius-xl);
    box-shadow: var(--admin-shadow-sm);
    background: color-mix(in oklab, var(--mud-palette-surface) 92%, transparent);
    backdrop-filter: blur(2px);
}

.admin-surface--raised {
    box-shadow: var(--admin-shadow-md);
}

.admin-section-title {
    margin: 0 0 8px;
}

.admin-section-divider {
    margin: 6px 0 14px;
    border-color: var(--mud-palette-lines-default) !important;
}

.admin-inline-hint {
    color: var(--mud-palette-text-secondary);
}

.admin-chip {
    border-radius: 999px;
    font-weight: 600;
}

.admin-form-grid {
    row-gap: 24px;
}

.admin-form-grid .mud-input-control {
    min-height: var(--admin-control-height);
}

/* Improved form section spacing */
.admin-form-section {
    margin-bottom: 32px;
}

.admin-form-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--mud-palette-text-primary);
}

/* Two-column form layout */
.admin-form-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 768px) {
    .admin-form-2col {
        grid-template-columns: 1fr;
    }
}

/* Three-column form layout with better gaps */
.admin-form-3col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1024px) {
    .admin-form-3col {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .admin-form-3col {
        grid-template-columns: 1fr;
    }
}

/* Empty state styling */
.admin-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.admin-empty-state-icon {
    font-size: 64px;
    margin-bottom: 16px;
    color: var(--mud-palette-text-secondary);
    opacity: 0.5;
}

.admin-empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--mud-palette-text-primary);
}

.admin-empty-state-subtitle {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    max-width: 400px;
}

/* Spinbutton sizing fixes (exclude MudSwitch toggle base) */
.mud-input-control .mud-icon-button:not(.mud-switch-base) {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}

.mud-input-control input[type="number"]::-webkit-inner-spin-button,
.mud-input-control input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
}

/* Better slider styling */
.mud-slider .mud-slider-track {
    height: 8px;
    border-radius: 4px;
}

.mud-slider .mud-slider-thumb {
    width: 20px;
    height: 20px;
}

/* Stat card improvements */
.admin-stat-card {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Containment so long values (e.g. 14-character version timestamps in
       Bundle Manager) can never bleed into the next column. */
    min-width: 0;
    overflow: hidden;
    /* Uniform min-height keeps rows of stat cards aligned across pages
       (Jobs/Questions/Releases/Categories all converge at the same baseline). */
    min-height: 132px;
    justify-content: center;
}

.admin-stat-card-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-stat-card-value {
    /* Fluid sizing so long values shrink gracefully in narrow columns
       (Bundle Manager's 14-char version timestamp was overflowing the card
       at the previous fixed 2.5rem). */
    font-size: clamp(1.5rem, 2.6vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
    /* Allow long unbroken strings (version IDs, hashes) to wrap inside the
       card instead of overflowing. min-width:0 unlocks shrink in flex columns. */
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    /* Tabular numerals so numeric KPI values across cards stay vertically
       aligned regardless of digit width. */
    font-variant-numeric: tabular-nums;
}

.admin-stat-card-trend {
    font-size: 0.875rem;
    font-weight: 500;
}

.admin-stat-card-trend--up {
    color: var(--mud-palette-success);
}

.admin-stat-card-trend--down {
    color: var(--mud-palette-error);
}

/* Jobs Header - Flexbox Alignment */
.jobs-compact-header {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

@media (max-width: 768px) {
    .jobs-compact-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
}

.jobs-compact-header .locale-select {
    width: 140px;
    flex-shrink: 0;
}

/* Category Selector */
.jobs-compact-header .category-selector {
    flex: 1 1 auto;
    min-width: 280px;
    width: 100%;
}

.jobs-compact-header .category-selector .mud-menu,
.jobs-compact-header .category-selector .mud-menu > div,
.jobs-compact-header .category-selector .mud-input-control,
.jobs-compact-header .category-selector .mud-input-control-input-container,
.jobs-compact-header .category-selector .mud-input {
    width: 100% !important;
}

/* Strip MudBlazor's default margins so flex-end works perfectly */
.jobs-compact-header .mud-input-control {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Force buttons to be exactly 56px to match the inputs */
.jobs-compact-header .settings-toggle,
.jobs-compact-header .queue-button {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.jobs-compact-header .settings-toggle .mud-icon-button {
    height: 56px !important;
    width: 56px !important;
}

.jobs-compact-header .queue-button .mud-button {
    height: 56px !important;
    white-space: nowrap !important;
}

/* Category Dropdown Panel */
.category-dropdown-panel {
    min-width: 560px;
    max-width: 640px;
    max-height: 600px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: var(--admin-radius-lg);
    background: var(--mud-palette-surface);
    box-shadow: var(--admin-shadow-lg);
}

@media (max-width: 680px) {
    .category-dropdown-panel {
        min-width: 300px;
        max-width: calc(100vw - 32px);
    }
}

.category-dropdown-search {
    padding: 16px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.category-dropdown-tabs {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in oklab, var(--mud-palette-surface) 97%, var(--mud-palette-primary));
}

.category-dropdown-tabs ::deep .mud-tabs-toolbar {
    min-height: 52px;
}

.category-dropdown-tabs ::deep .mud-tab {
    min-height: 52px;
    padding: 14px 24px;
    font-weight: 500;
    font-size: 0.875rem;
    text-transform: none;
    letter-spacing: 0;
}

.category-dropdown-tabs ::deep .mud-tab.mud-tab-active {
    background: color-mix(in oklab, var(--mud-palette-surface) 100%, transparent);
    font-weight: 600;
}

.category-dropdown-content {
    padding: 16px 20px;
    overflow-y: auto;
    max-height: 380px;
}

/* Enhanced Category Tree Items - Larger, More Clickable */
.category-tree-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 4px;
}

.category-tree-item:hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 10%, transparent);
}

.category-tree-item--selected {
    background: color-mix(in oklab, var(--mud-palette-primary) 18%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--mud-palette-primary) 40%, transparent);
}

.category-tree-expand {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.15s ease;
    background: color-mix(in oklab, var(--mud-palette-surface) 100%, transparent);
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 50%, transparent);
}

.category-tree-expand:hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 20%, transparent);
    border-color: color-mix(in oklab, var(--mud-palette-primary) 50%, transparent);
    transform: scale(1.05);
}

/* Browse breadcrumb navigation */
.category-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 12px 16px;
    background: color-mix(in oklab, var(--mud-palette-surface) 95%, var(--mud-palette-primary));
    border-radius: 10px;
    margin-bottom: 16px;
}

.category-breadcrumb .mud-button-root {
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.category-breadcrumb .mud-button-root:not(:disabled):hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 12%, transparent);
}

.category-breadcrumb .mud-icon-root {
    color: var(--mud-palette-text-secondary);
    opacity: 0.6;
}

/* Settings Expansion Panel */
.settings-collapsed-summary {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.settings-expanded-panel {
    padding: 20px 24px 24px;
    background: color-mix(in oklab, var(--mud-palette-background) 50%, transparent);
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* ── Job queue settings (expanded panel layout) ─────────────────────
   Restructured from a flat 4-column MudGrid into named sections so an
   operator can scan the controls by purpose (Volume / Difficulty / Mode
   / Options) instead of guessing what each row affects. */
.qe-job-settings {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.1fr)
        minmax(280px, 1.4fr)
        minmax(260px, 1.2fr)
        minmax(240px, 1fr);
    gap: 24px 32px;
    align-items: start;
}

@media (max-width: 1199px) {
    .qe-job-settings {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 599px) {
    .qe-job-settings {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.qe-job-settings__section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.qe-job-settings__label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.qe-job-settings__hint {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: 0.75rem;
    color: var(--mud-palette-text-primary);
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
}

.qe-job-settings__fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qe-job-settings__fields--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Difficulty range pills (5 buttons, click closer endpoint to move it) */
.qe-difficulty-chips {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.qe-difficulty-pill {
    background: color-mix(in oklab, var(--mud-palette-surface) 80%, transparent);
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
    border-radius: 8px;
    padding: 8px 4px 6px;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    font-family: inherit;
    -webkit-user-select: none;
    user-select: none;
}

.qe-difficulty-pill:hover {
    border-color: color-mix(in oklab, var(--mud-palette-primary) 40%, transparent);
    color: var(--mud-palette-text-primary);
}

.qe-difficulty-pill:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.qe-difficulty-pill--active {
    background: color-mix(in oklab, var(--mud-palette-primary) 14%, transparent);
    border-color: color-mix(in oklab, var(--mud-palette-primary) 50%, transparent);
    color: var(--mud-palette-text-primary);
}

.qe-difficulty-pill--endpoint {
    background: color-mix(in oklab, var(--mud-palette-primary) 26%, transparent);
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--mud-palette-primary) 35%, transparent);
}

.qe-difficulty-pill__num {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.qe-difficulty-pill__label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
    line-height: 1;
    /* Reserve a row even on mid pills (2, 4) so all five align vertically. */
    min-height: 0.7rem;
}

/* Image ratio: percentage display + slider + legend */
.qe-image-ratio {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 4px 0;
}

.qe-image-ratio__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.qe-image-ratio__label {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.qe-image-ratio__value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.qe-image-ratio__legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
    margin-top: -4px;
}

/* Toggle row (switch + 2-line label). Wraps the whole row in <label> so
   clicking anywhere in the copy block still activates the switch. */
.qe-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    cursor: pointer;
}

.qe-toggle-row__copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 6px;
}

.qe-toggle-row__title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
}

.qe-toggle-row__hint {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
    opacity: 0.85;
}

/* Disabled toggle: dim the whole row in tandem with MudSwitch's own dim
   state so the parent rule is visually aligned with the disabled control. */
.qe-toggle-row--disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.qe-toggle-row--disabled .qe-toggle-row__title,
.qe-toggle-row--disabled .qe-toggle-row__hint {
    opacity: 1;
}

/* Quick category chips */
.category-quick-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-chip {
    cursor: pointer;
    transition: all 0.15s ease;
}

.category-chip:hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 15%, transparent);
    border-color: var(--mud-palette-primary);
}

.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}

.admin-toolbar > * {
    min-width: 160px;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.admin-actions .mud-button-root {
    min-height: var(--admin-touch-height);
    padding-inline: 14px;
}

.admin-filter-toolbar {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.admin-filter-toolbar > * {
    grid-column: span 3;
    min-width: 0;
}

.admin-table-container {
    padding: 10px;
}

.admin-table-container .mud-table-container {
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 80%, transparent);
    border-radius: var(--admin-radius-lg);
    overflow: auto;
}

.admin-table-stable .mud-table-table {
    table-layout: fixed;
    width: 100%;
}

/* admin-table-stable enforces fixed widths via column %, so the table
   container should never need horizontal scroll. Suppress the spurious
   bottom scrollbar that appears from sub-pixel rounding when the table
   fits exactly. Mobile (<600px) collapses tables to cards anyway. */
.admin-table-stable.admin-table-container .mud-table-container,
.admin-table-stable .mud-table-container {
    overflow-x: hidden;
}

/* Sticky Actions column for wide tables (Jobs, Players, etc.).
   Cause: column widths summing to ~100% can still push the rightmost
   column off-screen on narrower viewports because overflow-x: hidden
   silently clips excess. Pinning the actions cell to the right edge
   keeps View Details / Cancel reachable without horizontal scrolling
   and without forcing every consumer to recompute column percentages
   when adding a new column. Apply by adding the .admin-actions-sticky
   class to the relevant <MudTh> and <MudTd> Style attribute, or scope
   via [data-label="Actions"] (MudTable sets DataLabel as data-label). */
.admin-table-stable .mud-table-cell[data-label="Actions"] {
    position: sticky;
    right: 0;
    background: var(--mud-palette-surface);
    z-index: 1;
    /* Subtle left shadow so the operator perceives the sticky column
       as floating above the underlying scrolled content rather than
       overlapping it. */
    box-shadow: -2px 0 6px -2px color-mix(in oklab, var(--mud-palette-background) 60%, transparent);
}

.admin-table-stable .mud-table-head .mud-table-cell[data-label="Actions"],
.admin-table-stable .mud-table-head th:last-child {
    position: sticky;
    right: 0;
    background: var(--mud-palette-surface);
    z-index: 2;
}

/* Visually hidden but available to assistive tech (a11y utility).
   Use for column headers that have icon-only content (e.g. kebab menus)
   or any control where the visible text would be redundant. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.admin-table-stable .mud-table-head .mud-table-cell {
    height: var(--admin-table-header-height);
    font-size: 0.72rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 0 var(--admin-table-cell-padding-x);
    vertical-align: middle;
    white-space: nowrap;
}

.admin-table-stable .mud-table-body .mud-table-cell {
    padding: var(--admin-table-cell-padding-y) var(--admin-table-cell-padding-x);
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
    vertical-align: middle;
    /* Tabular numerals globally: keeps numeric columns (cost, runtime, counts,
       currency, dates) optically aligned without per-page fiddling. */
    font-variant-numeric: tabular-nums;
}

.admin-stat-card-trend {
    font-variant-numeric: tabular-nums;
}

/* ── Asset / image preview surfaces ─────────────────────────────
   Used for category icon thumbnails (white-on-dark + dark-on-light
   contrast pairs) and illustration previews. Replaces hand-coded
   #333 / #eee / #f5f5f5 backgrounds with palette-driven surfaces
   that adapt to dark/light theme. */
.admin-asset-thumb {
    border-radius: var(--admin-radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklab, var(--mud-palette-text-primary) 78%, var(--mud-palette-background));
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
}

.admin-asset-thumb--dark {
    /* Dark thumb: white-on-dark icons render against the inverse of body text */
    background: color-mix(in oklab, var(--mud-palette-text-primary) 82%, var(--mud-palette-background));
}

.admin-asset-thumb--light {
    /* Light thumb: dark icons render against a near-paper surface */
    background: color-mix(in oklab, var(--mud-palette-text-primary) 12%, var(--mud-palette-surface));
}

.admin-illustration-thumb {
    border-radius: var(--admin-radius-sm);
    background: color-mix(in oklab, var(--mud-palette-surface) 50%, var(--mud-palette-background));
    border: 1px dashed color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Settings status strip ───────────────────────────────────
   Inline horizontal status row (Model / API Key / Overrides).
   Replaces the misuse of .admin-stat-card for non-numeric status. */
.admin-settings-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    padding: 6px 12px;
    align-items: center;
}

.admin-settings-status-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
}

.admin-settings-status-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.admin-settings-status-value {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.admin-table-stable .mud-table-body tr:last-child .mud-table-cell {
    border-bottom: 0;
}

.admin-table-auto .mud-table-table {
    table-layout: auto;
}

.admin-cell-truncate {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.admin-cell-error {
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.8rem;
    opacity: 0.85;
}

.admin-error-tooltip {
    max-width: 400px;
}

.admin-table-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.categories-table .mud-table-container {
    overflow-x: hidden !important;
}

.category-id-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.category-icon-cell,
.category-color-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.category-color-swatch {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in oklab, #fff 28%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab, #000 30%, transparent) inset;
    flex: 0 0 auto;
}

.categories-actions .mud-icon-button {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

.categories-modal {
    width: min(820px, 94vw);
}

.admin-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.admin-category-browser {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--admin-radius-lg);
    background: color-mix(in oklab, var(--mud-palette-surface) 84%, transparent);
}

.admin-category-browser .mud-list {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--admin-radius-md);
    max-height: 260px;
    overflow-y: auto;
}

.admin-modal-shell {
    width: min(1100px, 96vw);
    max-height: 92vh;
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 4px solid var(--mud-palette-primary);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.admin-modal-shell.job-modal-v2 {
    height: 90vh;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.admin-modal-close {
    opacity: 0.6;
    transition: opacity 0.15s, background-color 0.15s;
}

.admin-modal-close:hover {
    opacity: 1;
    background-color: color-mix(in oklab, var(--mud-palette-text-primary) 10%, transparent);
}

.mobile-sheet-actions {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in oklab, var(--mud-palette-surface) 93%, transparent);
    backdrop-filter: blur(3px);
}

.mud-paper {
    border-radius: var(--admin-radius-xl);
}

.mud-button-root:not(.mud-switch-base) {
    border-radius: var(--admin-radius-md);
}

.mud-input-slot {
    border-radius: var(--admin-radius-md);
}

/* MudSwitch: boost track visibility on dark backgrounds */
.mud-switch-track {
    opacity: 0.38;
}

.mud-switch-base-checked ~ .mud-switch-track,
.mud-switch .mud-checked ~ .mud-switch-track {
    opacity: 0.6;
}

.mud-alert {
    border-radius: var(--admin-radius-lg);
}

.blazor-error-boundary {
    margin: 16px;
    border-radius: var(--admin-radius-lg);
    background: #b91c1c;
    color: #fff;
    padding: 12px 16px;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

@media (max-width: 1200px) {
    .admin-filter-toolbar > * {
        grid-column: span 4;
    }
}

@media (max-width: 960px) {
    .admin-main-container {
        padding: var(--admin-shell-padding-sm);
    }

    .admin-page-header {
        margin-bottom: 14px;
    }

    .admin-filter-toolbar > * {
        grid-column: span 6;
    }
}

@media (max-width: 700px) {
    .admin-filter-toolbar > * {
        grid-column: span 12;
    }

    .admin-actions {
        width: 100%;
    }

    .admin-actions .mud-button-root {
        flex: 1 1 auto;
    }

    .admin-table-stable .mud-table-head .mud-table-cell {
        letter-spacing: 0.04em;
    }
}

/* ── Mobile table & filter behavior ──────────────────────────
   Below 600px:
   - Tables collapse to a stacked-card row layout so the operator
     never has to deal with horizontal scroll. MudBlazor renders
     each cell with the DataLabel as a chip-style header.
   - The filter toolbar wraps to one column.
   - Page header wraps and the tab nav strip becomes scrollable. */
@media (max-width: 599px) {
    .admin-table-stable .mud-table-table,
    .admin-table-stable .mud-table-thead,
    .admin-table-stable .mud-table-tbody,
    .admin-table-stable .mud-table-row,
    .admin-table-stable .mud-table-cell {
        display: block;
        width: 100%;
    }

    .admin-table-stable .mud-table-head {
        display: none;
    }

    .admin-table-stable .mud-table-row {
        margin-bottom: 12px;
        border-radius: var(--admin-radius-md);
        background: color-mix(in oklab, var(--mud-palette-surface) 86%, transparent);
        border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 50%, transparent);
        padding: 8px 12px;
    }

    .admin-table-stable .mud-table-row .mud-table-cell {
        padding: 8px 0;
        border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 30%, transparent);
        text-align: left;
    }

    .admin-table-stable .mud-table-row .mud-table-cell:last-child {
        border-bottom: none;
    }

    .admin-table-stable .mud-table-row .mud-table-cell::before {
        content: attr(data-label);
        display: block;
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--mud-palette-text-secondary);
        margin-bottom: 4px;
    }

    .admin-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-page-tabs {
        max-width: 100%;
        overflow-x: auto;
    }

    /* Sticky tab strips lose the sticky behavior on mobile -- they push
       content down too aggressively in narrow viewports. */
    .admin-page-tabs--sticky {
        position: static;
    }
}

/* Job List: Stacked Progress Bar */
.job-progress-bar {
    display: flex;
    height: 10px;
    border-radius: 5px;
    background: color-mix(in oklab, var(--mud-palette-text-primary) 8%, transparent);
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--mud-palette-text-primary) 18%, transparent);
}

.job-progress-success {
    height: 100%;
    background: var(--mud-palette-success);
    transition: width 0.3s ease;
}

.job-progress-warning {
    height: 100%;
    background: var(--mud-palette-warning);
    transition: width 0.3s ease;
}

.job-progress-error {
    height: 100%;
    background: var(--mud-palette-error);
    transition: width 0.3s ease;
}

/* Per-row models chip strip on the Jobs table. Tight spacing + monospace label
   for the model token names so the column reads like a tag list rather than free text. */
.job-model-chips {
    flex-wrap: wrap;
    row-gap: 4px;
}

.job-model-chip .mud-chip-content {
    font-family: var(--mud-typography-default-family-monospace, monospace);
    font-size: 0.72rem;
    letter-spacing: 0;
}

/* Job Detail Modal V2 */
.job-v2-fixed {
    flex-shrink: 0;
}

.job-v2-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    opacity: 0.6;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.job-v2-sep {
    opacity: 0.3;
}

.job-v2-error {
    margin-bottom: 10px;
    border-radius: 6px;
}

/* Stat Strip */
.job-v2-stat-strip {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-bottom: 10px;
}

.job-v2-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    border-radius: 6px;
    background: color-mix(in oklab, var(--mud-palette-text-primary) 4%, transparent);
    min-width: 80px;
}

.job-v2-stat--success .job-v2-stat-num { color: var(--mud-palette-success); }
.job-v2-stat--warning .job-v2-stat-num { color: var(--mud-palette-warning); }
.job-v2-stat--error .job-v2-stat-num { color: var(--mud-palette-error); }

.job-v2-stat-num {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.job-v2-stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.5;
    margin-top: 2px;
}

/* Pipeline with labels */
.job-v2-pipeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6px 0 4px;
    overflow-x: auto;
}

.job-v2-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 90px;
    position: relative;
    cursor: default;
}

.job-v2-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.job-v2-stage-name {
    font-size: 0.7rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
    opacity: 0.75;
}

.job-v2-stage-time {
    font-size: 0.65rem;
    opacity: 0.45;
    text-align: center;
}

.job-v2-conn {
    position: absolute;
    top: 13px;
    left: calc(50% + 16px);
    width: calc(100% - 32px);
    height: 2px;
    z-index: 0;
}

/* Actions */
.job-v2-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 2px;
}

/* Job Detail Modal V2: Tabs */
.job-v2-tabs {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    margin-top: 4px;
}

.job-v2-tabs .mud-tabpanel {
    padding: 0 !important;
}

.job-v2-tab-content {
    max-height: calc(90vh - 300px);
    overflow-y: auto;
    padding: 10px 2px 2px;
}

.job-v2-log-msg {
    font-size: 0.8rem;
    opacity: 0.8;
}

.job-v2-prompt {
    border-radius: 6px;
    background: color-mix(in oklab, var(--mud-palette-surface) 85%, var(--mud-palette-primary));
}

.job-v2-prompt pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: monospace;
    font-size: 0.82rem;
    margin: 0;
    padding: 12px 16px;
    color: var(--mud-palette-text-secondary);
}

/* ── Question Editor Modal (Design C) ───────────────────────── */

.qe-modal {
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    padding: 0 !important;
    border: none !important;
    box-shadow:
        0 0 80px rgba(110, 139, 255, 0.07),
        0 0 30px rgba(110, 139, 255, 0.04),
        0 25px 60px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

.qe-modal > .admin-modal-header {
    padding: 16px 20px;
    flex-shrink: 0;
}

.qe-body {
    display: flex;
    gap: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.qe-col-left {
    flex: 1 1 58%;
    padding: 0 20px 20px 20px;
    border-right: 1px solid var(--mud-palette-lines-default);
    overflow-y: auto;
}

.qe-col-right {
    flex: 0 0 42%;
    padding: 0 20px 20px 20px;
    overflow-y: auto;
}

.qe-section {
    margin-bottom: 20px;
}

.qe-label {
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.qe-metadata-bar {
    padding: 16px;
    border-radius: var(--admin-radius-sm);
    background: color-mix(in oklab, var(--mud-palette-surface) 60%, var(--mud-palette-background));
}

.qe-meta-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 12px;
}

.qe-meta-row:last-child {
    margin-bottom: 0;
}

.qe-meta-field {
    min-width: 0;
}

.qe-meta-field .mud-input-control {
    margin-bottom: 0 !important;
}

.qe-difficulty-group {
    flex: 1 1 auto;
}

.qe-difficulty-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.qe-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-primary);
    background: transparent;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.1s;
}

.qe-dot:hover {
    transform: scale(1.2);
}

.qe-dot-filled {
    background: var(--mud-palette-primary);
}

.qe-difficulty-label {
    margin-left: 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.qe-status-group {
    flex: 0 0 auto;
    text-align: right;
}

.qe-status-switch {
    margin-top: 0;
}

.qe-status-switch .mud-switch {
    margin: 0;
}

/* ── Answers ─────────────────────────────────────────── */

.qe-answer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 50%, transparent);
}

.qe-answer:last-of-type {
    border-bottom: none;
}

.qe-answer-correct {
    border-left: 3px solid var(--mud-palette-success);
    padding-left: 10px;
    border-radius: 2px;
    background: color-mix(in oklab, var(--mud-palette-success) 5%, transparent);
}

.qe-answer-incorrect {
    border-left: 3px solid color-mix(in oklab, var(--mud-palette-error) 40%, transparent);
    padding-left: 10px;
    border-radius: 2px;
}

.qe-answer-icon {
    flex-shrink: 0;
}

.qe-answer-field {
    flex: 1 1 auto;
}

.qe-answer-field .mud-input-control {
    margin-bottom: 0 !important;
}

.qe-answer-delete {
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity 0.15s;
}

.qe-answer:hover .qe-answer-delete {
    opacity: 1;
}

/* ── Collapsible sections ────────────────────────────── */

.qe-collapsible {
    border-radius: var(--admin-radius-sm);
}

.qe-collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 4px 0;
    list-style: none;
    user-select: none;
}

.qe-collapsible-header::-webkit-details-marker {
    display: none;
}

.qe-chevron {
    transition: transform 0.2s;
    opacity: 0.5;
}

details[open] > .qe-collapsible-header .qe-chevron {
    transform: rotate(180deg);
}

/* ── Visual asset (right panel) ──────────────────────── */

.qe-visual-asset {
    flex: 1 1 auto;
}

.qe-image-preview {
    position: relative;
    border-radius: var(--admin-radius-sm);
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-surface);
}

.qe-image-shimmer-underlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        color-mix(in oklab, var(--mud-palette-surface) 80%, transparent) 25%,
        color-mix(in oklab, var(--mud-palette-primary) 8%, var(--mud-palette-surface)) 50%,
        color-mix(in oklab, var(--mud-palette-surface) 80%, transparent) 75%
    );
    background-size: 200% 100%;
    animation: qe-shimmer 1.5s ease-in-out infinite;
}

.qe-image-preview .qe-image-loaded {
    position: relative;
    z-index: 1;
    width: 100%;
    opacity: 0;
    animation: qe-image-fadein 0.3s ease-out forwards;
    background: var(--mud-palette-surface);
}

.qe-image-preview .qe-image-loaded img {
    display: block;
    margin: 0 auto;
}

@keyframes qe-image-fadein {
    to { opacity: 1; }
}

.qe-image-preview:has(.qe-image-loaded) .qe-image-shimmer-underlay {
    animation: qe-shimmer-hide 0.4s ease-out 0.2s forwards;
}

@keyframes qe-shimmer-hide {
    to { opacity: 0; }
}

.qe-image-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 200px;
    padding: 24px;
    border-radius: var(--admin-radius-sm);
    border: 2px dashed color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
    background: color-mix(in oklab, var(--mud-palette-surface) 50%, var(--mud-palette-background));
}

.qe-image-empty .qe-generate-btn {
    margin-top: 8px;
}

/* ── Image skeleton shimmer ──────────────────────────── */

@keyframes qe-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.qe-image-skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 200px;
    border-radius: var(--admin-radius-sm);
    background: linear-gradient(
        90deg,
        color-mix(in oklab, var(--mud-palette-surface) 80%, transparent) 25%,
        color-mix(in oklab, var(--mud-palette-primary) 8%, var(--mud-palette-surface)) 50%,
        color-mix(in oklab, var(--mud-palette-surface) 80%, transparent) 75%
    );
    background-size: 200% 100%;
    animation: qe-shimmer 1.5s ease-in-out infinite;
}

.qe-image-skeleton-caption {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
}

/* ── Generic skeleton shapes ──────────────────────────────────
   One shimmer family across the app so loading states feel
   coherent. All inherit the qe-shimmer animation; only shape
   differs. Use these instead of MudProgressCircular for any
   content that's mid-load. */
.qe-skel {
    display: block;
    border-radius: var(--admin-radius-sm);
    background: linear-gradient(
        90deg,
        color-mix(in oklab, var(--mud-palette-surface) 80%, transparent) 25%,
        color-mix(in oklab, var(--mud-palette-primary) 8%, var(--mud-palette-surface)) 50%,
        color-mix(in oklab, var(--mud-palette-surface) 80%, transparent) 75%
    );
    background-size: 200% 100%;
    animation: qe-shimmer 1.5s ease-in-out infinite;
}

.qe-skel-line {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.qe-skel-line--short { width: 30%; }
.qe-skel-line--medium { width: 60%; }
.qe-skel-line--long { width: 92%; }

.qe-skel-row {
    height: 44px;
    margin-bottom: 6px;
    border-radius: 6px;
}

.qe-skel-block {
    height: 120px;
    border-radius: var(--admin-radius-md);
}

.qe-skel-tall {
    height: 240px;
    border-radius: var(--admin-radius-md);
}

.qe-skel-stat {
    height: 132px;
    border-radius: var(--admin-radius-xl);
}

.qe-skel-table {
    /* Stack of 6 row placeholders; lives inside admin-surface */
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
}

.qe-skel-table .qe-skel-row {
    margin-bottom: 0;
}

/* Dashboard / Home skeleton layout */
.dashboard-skeleton {
    display: grid;
    gap: var(--admin-page-gap);
}

.dashboard-skeleton-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.dashboard-skeleton-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}

@media (max-width: 959px) {
    .dashboard-skeleton-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Pulsing image-required warning ──────────────────── */

@keyframes qe-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.qe-image-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--admin-radius-sm);
    background: color-mix(in oklab, var(--mud-palette-warning) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--mud-palette-warning) 25%, transparent);
    margin-top: 12px;
}

.qe-pulse-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-radius: 50%;
    background: var(--mud-palette-warning);
    animation: qe-pulse 2s ease-in-out infinite;
}

.qe-warning-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-warning);
    margin-bottom: 2px;
}

.qe-warning-text {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

/* ── Generation prompt code block ────────────────────── */

.qe-gen-prompt {
    border-radius: var(--admin-radius-sm);
    background: color-mix(in oklab, var(--mud-palette-surface) 70%, var(--mud-palette-background));
    border: 1px solid var(--mud-palette-lines-default);
    overflow: auto;
    max-height: 200px;
}

.qe-gen-prompt pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: monospace;
    font-size: 0.8rem;
    margin: 0;
    padding: 12px 14px;
    color: var(--mud-palette-text-secondary);
}

/* ── Sticky action bar ───────────────────────────────── */

.qe-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in oklab, var(--mud-palette-surface) 93%, transparent);
    backdrop-filter: blur(4px);
}

.qe-actions-primary {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qe-actions-danger {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qe-save-btn {
    box-shadow: 0 0 12px color-mix(in oklab, var(--mud-palette-primary) 25%, transparent);
}

/* ── Responsive: single column below md ──────────────── */

@media (max-width: 959px) {
    .qe-body {
        flex-direction: column;
    }

    .qe-col-left {
        flex: none;
        border-right: none;
        border-bottom: 1px solid var(--mud-palette-lines-default);
    }

    .qe-col-right {
        flex: none;
    }

    .qe-meta-row {
        flex-wrap: wrap;
    }

    .qe-actions {
        flex-wrap: wrap;
    }
}

/* ============================================================
   Dashboard Grid & Widget System
   ============================================================ */

.dashboard-grid-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.dashboard-grid-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.dashboard-edit-btn {
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    border-color: var(--mud-palette-lines-default) !important;
    transition: all 0.2s ease !important;
}

.dashboard-edit-btn--active {
    border-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary) !important;
}

.dashboard-add-btn {
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    box-shadow: 0 0 12px color-mix(in oklab, var(--mud-palette-primary) 25%, transparent);
}

.dashboard-reset-btn {
    text-transform: none !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    opacity: 0.7;
}

/* GridStack overrides for Obsidian Core theme */
.grid-stack {
    min-height: 200px;
}

.grid-stack > .grid-stack-item > .grid-stack-item-content {
    border-radius: var(--admin-radius-xl);
    background: color-mix(in oklab, var(--mud-palette-surface) 92%, transparent);
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 85%, transparent);
    box-shadow: var(--admin-shadow-sm);
    overflow: hidden;
    backdrop-filter: blur(2px);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.grid-stack > .grid-stack-item:hover > .grid-stack-item-content {
    box-shadow: var(--admin-shadow-md);
}

.dashboard-edit-mode .grid-stack-item > .grid-stack-item-content {
    border-color: color-mix(in oklab, var(--mud-palette-primary) 30%, var(--mud-palette-lines-default));
}

/* GridStack placeholder during drag */
.grid-stack > .grid-stack-placeholder > .placeholder-content {
    border: 2px dashed color-mix(in oklab, var(--mud-palette-primary) 40%, transparent) !important;
    border-radius: var(--admin-radius-xl) !important;
    background: color-mix(in oklab, var(--mud-palette-primary) 5%, transparent) !important;
}

/* GridStack resize handle */
.grid-stack > .grid-stack-item > .ui-resizable-se {
    width: 20px !important;
    height: 20px !important;
    background: none !important;
    border-right: 3px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
    border-bottom: 3px solid color-mix(in oklab, var(--mud-palette-lines-default) 60%, transparent);
    border-radius: 0 0 var(--admin-radius-xl) 0;
    right: 4px !important;
    bottom: 4px !important;
}

/* Widget Host */
.widget-host {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Tightened from 12/4 → 10/2 to reclaim 4px for the body. KPI tiles are
       only 110px tall (GridStack cellHeight) and every pixel matters when
       fitting label + 2rem value + trend caption without clipping. */
    padding: 10px 16px 2px;
    min-height: 28px;
    flex-shrink: 0;
}

.widget-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
    opacity: 0.8;
}

.widget-controls {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.widget-host--editable .widget-controls {
    opacity: 0.5;
}

.widget-host--editable:hover .widget-controls {
    opacity: 1;
}

.widget-drag-handle {
    cursor: grab !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    color: var(--mud-palette-text-secondary);
    transition: background-color 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
}

.widget-drag-handle:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--mud-palette-text-primary);
}

.widget-drag-handle:active {
    cursor: grabbing !important;
}

.widget-remove-btn {
    color: var(--mud-palette-error) !important;
}

.widget-body {
    flex: 1;
    overflow: auto;
    padding: 0 16px 12px;
}

/* KPI tiles never need to scroll. Use a tighter bottom padding (8px instead
   of 12px) since the 110px GridStack tile leaves no headroom, and switch to
   `overflow: visible` so the value's line-box (which can extend a few px past
   the body box due to descender/font-metrics) is never clipped. The parent
   .grid-stack-item-content has its own border-radius and clips anything that
   would actually escape the tile. */
.widget-body:has(.widget-stat-card) {
    overflow: visible;
    padding: 0 16px 8px;
}

/* Stat card inside widget. We TOP-align (flex-start) instead of center so
   that, if the content marginally exceeds the GridStack tile height, the
   overflow happens at the BOTTOM rather than visually clipping the hero
   value at the top. */
.widget-stat-card {
    padding: 0 !important;
    gap: 4px !important;
    min-height: 0;
    height: 100%;
    justify-content: flex-start;
}

/* Widget tiles are vertically constrained (GridStack cellHeight=110, minus
   ~28px header → ~70px content area). Cap the hero value at 2rem and use a
   tight 1.05 line-height so a 110px tile fits label + value + trend with a
   visible bottom margin and no character clipping. */
.widget-stat-card .admin-stat-card-value {
    font-size: clamp(1.5rem, 1rem + 1.4vw, 2rem);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    /* Reserve a sliver below the baseline for any accidental descender
       metrics; cleaner than clipping. */
    padding-bottom: 2px;
}

.widget-stat-card .admin-stat-card-trend {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Trend row: caption + optional sparkline live side-by-side under the value
   so the sparkline never fights the hero number for vertical space. */
.widget-stat-card-trend-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.widget-stat-card-trend-row .admin-stat-card-trend {
    flex: 1 1 auto;
    min-width: 0;
}

.widget-stat-card-trend-row .sparkline {
    flex: 0 0 auto;
}

/* Chart container */
.widget-chart-container {
    height: 100%;
    min-height: 120px;
    display: flex;
}

/* MudChart legacy holder -- kept so any remaining MudChart-based widget
   tiles still fill their host. New widgets use ApexCharts (see
   .widget-online-chart-host below). */
.widget-chart-container .mud-chart {
    height: 100% !important;
}

/* ApexCharts inside a flex tile collapses to its content width on first
   paint. Force the wrapper, canvas, and SVG to stretch so the live
   "Online players" area chart fills the dashboard widget edge-to-edge. */
.widget-online-chart-host {
    flex: 1 1 auto;
    min-width: 0;
}
.widget-online-chart-host > div {
    width: 100% !important;
    height: 100% !important;
}
.widget-online-chart-host .apexcharts-canvas,
.widget-online-chart-host .apexcharts-canvas > svg {
    width: 100% !important;
}

/* Empty widget hint */
.widget-empty-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 80px;
    gap: 8px;
}

/* Section labels inside widgets */
.widget-section-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
    display: block;
}

/* Releases widget */
.widget-releases-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.widget-release-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
}

.widget-release-item:last-child {
    border-bottom: none;
}

.widget-release-version {
    font-weight: 600;
    font-size: 0.85rem;
    min-width: 60px;
}

.widget-release-clients {
    font-size: 1.4rem;
    font-weight: 700;
    flex: 1;
}

/* Topology widget */
.widget-topology-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.widget-topology-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
}

.widget-topology-item:last-child {
    border-bottom: none;
}

.widget-topology-id {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--mud-palette-primary);
    min-width: 100px;
}

.widget-topology-sessions {
    font-weight: 600;
    flex: 1;
}

.widget-topology-grpc {
    font-family: monospace;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* Login map widget */
.widget-login-map-shell {
    position: relative;
    height: 100%;
    min-height: 200px;
}

.widget-login-map {
    height: 100%;
    min-height: 200px;
    border-radius: var(--admin-radius-sm);
    background: color-mix(in oklab, var(--mud-palette-background) 85%, var(--mud-palette-primary));
    position: relative;
    z-index: 0;
}

/* Overlay sits ABOVE the map div's placeholder background so the user
   sees a friendly "waiting for first connection" hint until Leaflet has
   actually initialized the map. Once Leaflet adds .leaflet-container to
   the map div (init complete), we hide the overlay so it doesn't block
   the rendered tiles. */
.widget-login-map-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    pointer-events: none;
    color: var(--mud-palette-text-secondary);
}

.widget-login-map-shell:has(.widget-login-map.leaflet-container) .widget-login-map-overlay {
    display: none;
}

/* Locale coverage widget */
.widget-locale-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.widget-locale-section {
    display: flex;
    flex-direction: column;
}

.widget-locale-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 0.85rem;
}

.widget-locale-count {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* Pipeline health widget */
.widget-pipeline-health {
    padding: 4px 0;
}

.widget-pipeline-stats {
    display: flex;
    gap: 24px;
}

.widget-pipeline-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.widget-pipeline-label {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
}

.widget-pipeline-value {
    font-size: 1.5rem;
    font-weight: 700;
}

/* DAU/WAU/MAU widget */
.widget-dau-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

.widget-dau-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.widget-dau-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    min-width: 40px;
}

.widget-dau-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    flex: 1;
}

.widget-dau-trend {
    font-size: 0.75rem;
    font-weight: 600;
}

.widget-trend-up {
    color: var(--mud-palette-success);
}

.widget-trend-down {
    color: var(--mud-palette-error);
}

/* Retention widget legend */
.widget-retention-legend {
    display: flex;
    gap: 16px;
    padding: 4px 0 0;
    flex-wrap: wrap;
}

.widget-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.widget-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* Bar list (category popularity, geo) */
.widget-bar-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.widget-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.widget-bar-label {
    font-size: 0.8rem;
    min-width: 100px;
    color: var(--mud-palette-text-secondary);
}

.widget-bar-track {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
    overflow: hidden;
}

.widget-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--mud-palette-primary);
    transition: width 0.4s ease;
}

.widget-bar-value {
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 50px;
    text-align: right;
}

/* Session duration widget */
.widget-session-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 4px 0;
}

.widget-session-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.widget-session-label {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
}

.widget-session-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* Question accuracy widget */
.widget-accuracy-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.widget-accuracy-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.widget-accuracy-label {
    font-size: 0.8rem;
    min-width: 80px;
    color: var(--mud-palette-text-secondary);
}

.widget-accuracy-bar-track {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
    overflow: hidden;
}

.widget-accuracy-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}

.widget-accuracy-fill--success {
    background: var(--mud-palette-success);
}

.widget-accuracy-fill--warning {
    background: var(--mud-palette-warning);
}

.widget-accuracy-fill--error {
    background: var(--mud-palette-error);
}

.widget-accuracy-pct {
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 36px;
    text-align: right;
}

.widget-accuracy-summary {
    padding-top: 4px;
}

/* Geo distribution widget */
.widget-geo-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0;
}

.widget-geo-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.widget-geo-flag {
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 24px;
    color: var(--mud-palette-primary);
}

.widget-geo-name {
    font-size: 0.8rem;
    min-width: 100px;
    color: var(--mud-palette-text-secondary);
}

.widget-geo-bar {
    flex: 1;
}

.widget-geo-pct {
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 36px;
    text-align: right;
}

/* Revenue widget */
.widget-revenue-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 4px 0;
}

.widget-revenue-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.widget-revenue-label {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
}

.widget-revenue-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* Widget Palette (slide-out drawer) */
.widget-palette {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    max-width: 90vw;
    height: 100vh;
    background: var(--mud-palette-surface);
    border-left: 1px solid var(--mud-palette-lines-default);
    z-index: 1400;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
    animation: widget-palette-slide 0.2s ease-out;
}

@keyframes widget-palette-slide {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.widget-palette-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

.widget-palette-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.widget-palette-category {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
    margin: 16px 0 8px;
    opacity: 0.8;
}

.widget-palette-category:first-child {
    margin-top: 0;
}

.widget-palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--admin-radius-md);
    cursor: pointer;
    transition: background 0.15s ease;
}

.widget-palette-item:hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 8%, transparent);
}

.widget-palette-item--exists {
    opacity: 0.5;
}

.widget-palette-icon {
    color: var(--mud-palette-primary);
}

.widget-palette-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.widget-palette-name {
    font-size: 0.85rem;
    font-weight: 500;
}

.widget-palette-size {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

/* Edit mode pulsing border */
.dashboard-edit-mode {
    border: 1px dashed color-mix(in oklab, var(--mud-palette-primary) 30%, transparent);
    border-radius: var(--admin-radius-xl);
    padding: 8px;
    animation: dashboard-edit-pulse 3s ease-in-out infinite;
}

@keyframes dashboard-edit-pulse {
    0%, 100% { border-color: color-mix(in oklab, var(--mud-palette-primary) 20%, transparent); }
    50% { border-color: color-mix(in oklab, var(--mud-palette-primary) 50%, transparent); }
}

/* Widget shimmer loading state */
.widget-shimmer {
    position: relative;
    overflow: hidden;
}

.widget-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 25%,
        color-mix(in oklab, var(--mud-palette-primary) 4%, transparent) 50%,
        transparent 75%
    );
    background-size: 200% 100%;
    animation: qe-shimmer 1.5s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
}

/* Responsive: collapse to fewer columns on smaller screens */
@media (max-width: 959px) {
    .grid-stack {
        --gs-column-count: 6 !important;
    }

    .dashboard-grid-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .widget-locale-grid {
        grid-template-columns: 1fr;
    }

    .widget-session-stats {
        grid-template-columns: 1fr;
    }

    .widget-revenue-grid {
        grid-template-columns: 1fr;
    }

    .widget-pipeline-stats {
        flex-wrap: wrap;
    }
}

@media (max-width: 599px) {
    .grid-stack {
        --gs-column-count: 1 !important;
    }

    .widget-palette {
        width: 100vw;
    }

    .dashboard-grid-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Scrollbar styling for widget bodies */
.widget-body::-webkit-scrollbar {
    width: 4px;
}

.widget-body::-webkit-scrollbar-track {
    background: transparent;
}

.widget-body::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--mud-palette-lines-default) 50%, transparent);
    border-radius: 2px;
}

.widget-body::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-lines-default);
}

/* GridStack item transition during drag */
.grid-stack-item {
    transition: none;
}

.grid-stack > .grid-stack-item.ui-draggable-dragging > .grid-stack-item-content {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
                0 0 20px color-mix(in oklab, var(--mud-palette-primary) 15%, transparent) !important;
    border-color: var(--mud-palette-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
   Help Drawer — In-app docs library (skills, rules, AGENTS, docs/)
   ═══════════════════════════════════════════════════════════════ */

.help-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    z-index: 1500;
    animation: help-overlay-fade 0.18s ease-out;
}

@keyframes help-overlay-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.help-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 540px;
    min-width: 380px;
    max-width: 92vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 1501;
    background: color-mix(in oklab, var(--mud-palette-surface) 92%, transparent);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.45),
                0 0 80px rgba(0, 0, 0, 0.2);
    border-left: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 15%, transparent);
    animation: help-drawer-slide 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--mud-palette-text-primary);
}

/* Resize handle: thin strip on the LEFT edge of the drawer. Default state is
   nearly invisible; hover/focus/active reveal a primary-tinted bar so the
   affordance is discoverable without crowding the content. */
.help-drawer-resize-handle {
    position: absolute;
    top: 0;
    left: -3px;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 2;
    touch-action: none;
    transition: background-color 0.18s ease;
}

.help-drawer-resize-handle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 3px;
    width: 2px;
    height: 100%;
    background: transparent;
    transition: background-color 0.18s ease;
    pointer-events: none;
}

.help-drawer-resize-handle:hover::before,
.help-drawer-resize-handle:focus-visible::before,
.help-drawer-resize-handle.is-dragging::before {
    background: color-mix(in oklab, var(--mud-palette-primary) 70%, transparent);
}

.help-drawer-resize-handle:focus-visible {
    outline: none;
}

.help-drawer-resize-handle.is-dragging {
    /* Page-wide cursor lock is set by the JS; keep the bar visible while
       dragging even if the pointer briefly leaves the 8px hit area. */
}

@keyframes help-drawer-slide {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* Header */

.help-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px 14px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 20%, transparent);
    flex-shrink: 0;
    gap: 12px;
}

.help-drawer-title-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.help-drawer-title {
    font-family: 'Manrope', var(--mud-typography-default-family);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}

.help-drawer-subtitle {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
    opacity: 0.85;
    max-width: 360px;
}

/* Search */

.help-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    margin: 12px 16px 0;
    height: 36px;
    border-radius: var(--admin-radius-sm);
    background: color-mix(in oklab, var(--mud-palette-surface) 65%, var(--mud-palette-background));
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 18%, transparent);
    flex-shrink: 0;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.help-search:focus-within {
    border-color: color-mix(in oklab, var(--mud-palette-primary) 60%, transparent);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--mud-palette-primary) 14%, transparent);
}

.help-search-icon {
    color: var(--mud-palette-text-secondary);
    flex-shrink: 0;
}

.help-search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
}

.help-search-input::placeholder {
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
}

.help-search-clear {
    background: transparent;
    border: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    padding: 2px;
    line-height: 0;
    border-radius: 3px;
    transition: background 0.15s ease, color 0.15s ease;
}

.help-search-clear:hover {
    color: var(--mud-palette-text-primary);
    background: color-mix(in oklab, var(--mud-palette-text-primary) 10%, transparent);
}

/* Two-pane grid */

.help-drawer-pane-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 184px 1fr;
    min-height: 0;
    margin-top: 12px;
    border-top: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 14%, transparent);
}

/* Left nav */

.help-nav {
    overflow-y: auto;
    padding: 12px 8px 16px;
    border-right: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 14%, transparent);
    background: color-mix(in oklab, var(--mud-palette-background) 30%, transparent);
}

.help-nav::-webkit-scrollbar,
.help-content::-webkit-scrollbar {
    width: 6px;
}

.help-nav::-webkit-scrollbar-thumb,
.help-content::-webkit-scrollbar-thumb {
    background: color-mix(in oklab, var(--mud-palette-lines-default) 45%, transparent);
    border-radius: 3px;
}

.help-nav::-webkit-scrollbar-thumb:hover,
.help-content::-webkit-scrollbar-thumb:hover {
    background: color-mix(in oklab, var(--mud-palette-lines-default) 80%, transparent);
}

.help-nav-section-label {
    display: block;
    padding: 0 6px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
    opacity: 0.75;
}

.help-nav-pinned {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed color-mix(in oklab, var(--mud-palette-lines-default) 18%, transparent);
}

.help-nav-pinned .help-nav-doc--pinned {
    background: color-mix(in oklab, var(--mud-palette-primary) 6%, transparent);
}

.help-nav-pinned .help-nav-doc--pinned:hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 12%, transparent);
}

.help-nav-empty {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
}

.help-nav-cat {
    margin-bottom: 4px;
}

.help-nav-cat-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    border-radius: var(--admin-radius-sm);
    transition: background 0.12s ease;
    text-align: left;
}

.help-nav-cat-toggle:hover {
    background: color-mix(in oklab, var(--mud-palette-text-primary) 6%, transparent);
}

.help-nav-cat-icon {
    color: var(--mud-palette-primary);
    opacity: 0.85;
    flex-shrink: 0;
}

.help-nav-cat-title {
    flex: 1;
    font-size: 0.77rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.help-nav-cat-count {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--mud-palette-text-primary) 8%, transparent);
}

.help-nav-cat-chevron {
    color: var(--mud-palette-text-secondary);
    transition: transform 0.18s ease;
    opacity: 0.7;
}

.help-nav-cat--collapsed .help-nav-cat-chevron {
    transform: rotate(-90deg);
}

.help-nav-cat-body {
    margin: 4px 0 8px 4px;
    padding-left: 12px;
    border-left: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 18%, transparent);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.help-nav-doc {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
}

.help-nav-doc:hover {
    background: color-mix(in oklab, var(--mud-palette-text-primary) 8%, transparent);
}

.help-nav-doc--active {
    background: color-mix(in oklab, var(--mud-palette-primary) 14%, transparent);
    color: var(--mud-palette-primary-text);
}

.help-nav-doc--active:hover {
    background: color-mix(in oklab, var(--mud-palette-primary) 22%, transparent);
}

.help-nav-doc-title {
    font-size: 0.77rem;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    overflow-wrap: anywhere;
}

.help-nav-doc-summary {
    font-size: 0.68rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
    opacity: 0.85;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.help-nav-doc--active .help-nav-doc-summary {
    color: color-mix(in oklab, var(--mud-palette-primary-text) 80%, transparent);
}

/* Right pane: landing + doc */

.help-content {
    overflow-y: auto;
    padding: 18px 20px 20px;
}

/* Landing view */

.help-landing {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.help-landing-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.help-landing-tip {
    margin: 0;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
}

.help-landing-tip code {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.72rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in oklab, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary-text);
}

.help-landing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 4px;
}

.help-landing-card,
.help-landing-cat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: var(--admin-radius-sm);
    background: color-mix(in oklab, var(--mud-palette-surface) 60%, var(--mud-palette-background));
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 14%, transparent);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.help-landing-card:hover,
.help-landing-cat:hover {
    background: color-mix(in oklab, var(--mud-palette-surface) 80%, var(--mud-palette-background));
    border-color: color-mix(in oklab, var(--mud-palette-primary) 28%, transparent);
    transform: translateY(-1px);
}

.help-landing-card-title,
.help-landing-cat-title {
    font-family: 'Manrope', var(--mud-typography-default-family);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--mud-palette-text-primary);
}

.help-landing-cat {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.help-landing-cat-title {
    flex: 1 0 auto;
}

.help-landing-card-summary,
.help-landing-cat-summary {
    width: 100%;
    font-size: 0.74rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.45;
}

/* Doc view */

.help-doc {
    display: flex;
    flex-direction: column;
}

.help-doc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.help-doc-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px 4px 6px;
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 22%, transparent);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.help-doc-back:hover {
    background: color-mix(in oklab, var(--mud-palette-text-primary) 8%, transparent);
    color: var(--mud-palette-text-primary);
    border-color: color-mix(in oklab, var(--mud-palette-lines-default) 40%, transparent);
}

.help-doc-path {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px dashed color-mix(in oklab, var(--mud-palette-lines-default) 22%, transparent);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    font-size: 0.7rem;
    max-width: 100%;
    overflow: hidden;
}

.help-doc-path:hover {
    color: var(--mud-palette-text-primary);
    border-color: color-mix(in oklab, var(--mud-palette-primary) 35%, transparent);
}

.help-doc-path code {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.7rem;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.help-doc-path-copy {
    color: var(--mud-palette-text-secondary);
    opacity: 0.8;
}

.help-doc-title {
    font-family: 'Manrope', var(--mud-typography-default-family);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
    margin: 0 0 6px;
}

.help-doc-summary {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.55;
    margin: 0 0 18px;
}

.help-doc-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}

.help-doc-skeleton-line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--mud-palette-text-primary) 6%, transparent) 0%,
        color-mix(in oklab, var(--mud-palette-text-primary) 14%, transparent) 50%,
        color-mix(in oklab, var(--mud-palette-text-primary) 6%, transparent) 100%);
    background-size: 200% 100%;
    animation: help-skel-shimmer 1.6s linear infinite;
}

@keyframes help-skel-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Markdown body styles -- scoped to .help-doc-body so they don't leak */

.help-doc-body {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--mud-palette-text-secondary);
}

.help-doc-body h1,
.help-doc-body h2,
.help-doc-body h3,
.help-doc-body h4,
.help-doc-body h5,
.help-doc-body h6 {
    font-family: 'Manrope', var(--mud-typography-default-family);
    color: var(--mud-palette-text-primary);
    margin: 22px 0 8px;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.help-doc-body > h1:first-child,
.help-doc-body > h2:first-child,
.help-doc-body > h3:first-child {
    margin-top: 0;
}

.help-doc-body h1 { font-size: 1.05rem; font-weight: 700; }
.help-doc-body h2 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 18%, transparent);
    padding-bottom: 6px;
    margin-top: 26px;
}
.help-doc-body h3 { font-size: 0.86rem; font-weight: 600; }
.help-doc-body h4 { font-size: 0.78rem; font-weight: 600; color: var(--mud-palette-text-secondary); }

.help-doc-body p {
    margin: 0 0 12px;
}

.help-doc-body strong { color: var(--mud-palette-text-primary); font-weight: 600; }
.help-doc-body em { color: var(--mud-palette-text-primary); }

.help-doc-body ul,
.help-doc-body ol {
    margin: 0 0 12px;
    padding-left: 22px;
}

.help-doc-body li {
    margin-bottom: 4px;
}

.help-doc-body li > p:last-child {
    margin-bottom: 4px;
}

.help-doc-body a {
    color: var(--mud-palette-primary);
    text-decoration: none;
    border-bottom: 1px dashed color-mix(in oklab, var(--mud-palette-primary) 35%, transparent);
    transition: border-color 0.12s ease, color 0.12s ease;
}

.help-doc-body a:hover {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}

.help-doc-body code {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.74rem;
    padding: 1px 5px;
    border-radius: 3px;
    background: color-mix(in oklab, var(--mud-palette-surface) 70%, var(--mud-palette-background));
    color: var(--mud-palette-text-primary);
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 14%, transparent);
}

.help-doc-body pre {
    margin: 12px 0;
    padding: 12px 14px;
    background: color-mix(in oklab, var(--mud-palette-background) 70%, var(--mud-palette-surface));
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 18%, transparent);
    border-radius: var(--admin-radius-sm);
    overflow-x: auto;
    font-size: 0.74rem;
    line-height: 1.55;
}

.help-doc-body pre code {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-size: inherit;
}

.help-doc-body blockquote {
    margin: 12px 0;
    padding: 8px 14px;
    border-left: 3px solid color-mix(in oklab, var(--mud-palette-primary) 40%, transparent);
    background: color-mix(in oklab, var(--mud-palette-primary) 6%, transparent);
    border-radius: 0 var(--admin-radius-sm) var(--admin-radius-sm) 0;
    color: var(--mud-palette-text-secondary);
}

.help-doc-body blockquote p:last-child { margin-bottom: 0; }

.help-doc-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 0.76rem;
    font-variant-numeric: tabular-nums;
}

.help-doc-body th,
.help-doc-body td {
    padding: 6px 10px;
    border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 18%, transparent);
    text-align: left;
    vertical-align: top;
}

.help-doc-body th {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    background: color-mix(in oklab, var(--mud-palette-text-primary) 4%, transparent);
}

.help-doc-body hr {
    border: none;
    border-top: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 18%, transparent);
    margin: 22px 0;
}

.help-doc-body img {
    max-width: 100%;
    border-radius: var(--admin-radius-sm);
}

/* Footer */

.help-drawer-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 16%, transparent);
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in oklab, var(--mud-palette-background) 35%, transparent);
}

.help-drawer-footer-meta {
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.help-kbd {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: color-mix(in oklab, var(--mud-palette-text-primary) 10%, transparent);
    border: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 28%, transparent);
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1;
}

/* Mobile: full width, vertical stack */

@media (max-width: 720px) {
    .help-drawer {
        width: 100vw !important;
        min-width: 0;
        max-width: 100vw;
    }

    .help-drawer-resize-handle {
        display: none;
    }

    .help-drawer-pane-grid {
        grid-template-columns: 1fr;
    }

    .help-nav {
        max-height: 220px;
        border-right: none;
        border-bottom: 1px solid color-mix(in oklab, var(--mud-palette-lines-default) 14%, transparent);
    }
}

.release-notes-content {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
    padding: 8px 0;
}