/* =============================================================================
   MAX360 THEME SYSTEM
   Single source of truth for all theme color tokens.
   Each .theme-* block defines the full set of --max360-* and deck alias vars.
   Structural (non-color) variables live in :root and don't change per theme.
   ============================================================================= */

:root {
    /* the talk color's default, before a theme class lands; each theme sets its own */
    --max360-talk: #17513a;
    --max360-on-talk: #ffffff;
    /* Structural vars — shared across all themes */
    --max360-sidebar-width: 240px;
    --max360-rail-width: 96px;
    --max360-phonebar-height: 58px;
    --max360-panel-width: 200px;
    --max360-header-height: 56px;

    /* Default typography — system stack. Themes may override. */
    --max360-font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --max360-font-heading: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Monospace is structural, not thematic: no theme overrides it. Code blocks,
       IDs and fingerprints referenced a --mono that was never defined anywhere. */
    --max360-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* The label face: small uppercase tabs, filter chips and badges. Structural too. */
    --max360-font-label: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --max360-heading-weight: 600;
    --max360-heading-tracking: normal;

    /* Controls. The BUTTONS block in app.css draws every kind of control from these, so a
       change here reaches every control of that kind. */
    --max360-control-font-size: 0.875rem;
    --max360-control-font-weight: 600;
    --max360-control-hit: 44px;
    --max360-control-underline: 1px;
    --max360-control-underline-strong: 2px;
    --max360-chip-height: 32px;
    --max360-control-fill-height: 32px;   /* a filled button's visible height; its tap area stays --max360-control-hit */

    /* The one COLOR in :root, and it is here to stop `var(--max360-link)` computing to
       `unset` before the theme class lands on <html>. Every theme block below overrides it;
       this value is the default theme's (.theme-max-original). */
    --max360-link: #1A66CC;
}

.theme-max-deck {
    --max360-font-body: "Inter", system-ui, sans-serif;
    --max360-font-heading: "Fraunces", Georgia, serif;
    --max360-heading-weight: 500;
    --max360-heading-tracking: -0.015em;
}

/* =============================================================================
   THEME: Midnight Dark (navy + tan)  [class: .theme-max-deck]
   ============================================================================= */
.theme-max-deck {
    color-scheme: dark;

    /* Deck palette aliases */
    --bg:        #0B1220;
    --surface:   #121B30;
    --surface-2: #1A2540;
    --ink:       #ECE7DE;
    --ink-dim:   #A9B0C1;
    --rule:      #2A3654;
    --accent:    #C9986A;
    --accent-2:  #7FB3A8;

    /* Max360 tokens */
    --max360-primary:      #C9986A;
    --max360-primary-dark: #B5824F;
    --max360-link:         #7FB2F0;  /* blue, so a link never shares the tan of an action; 8.5:1 on --max360-bg, 7.8:1 on --max360-surface */
    /* actions are tan in every theme, so a link's color means only "this goes somewhere" */
    --max360-action-accent: #c9986a;
    --max360-action-ink:    #c9986a;
    --max360-on-action:     #0b1220;
    /* Brand/voice accent — Max's greeting, signature, and the Max•360 logo.
       Tan == accent (not a "link" signal), so no decoupling needed. */
    --max360-brand-accent: #C9986A;
    /* the Start talking button: a solid fill, the one besides danger-solid; dark themes lift it so the button stays visible */
    --max360-talk: #2f7d5b;
    --max360-on-talk: #ffffff;
    --max360-secondary:    #A9B0C1;
    --max360-bg:           #0B1220;
    --max360-surface:      #121B30;
    --max360-text:         #ECE7DE;
    --max360-text-muted:   #A9B0C1;
    --max360-border:       #2A3654;
    --max360-success:      #1fb457;
    --max360-warning:      #d97706;
    --max360-danger:       #E0705C;
    --max360-danger-soft:  rgba(224,112,92,0.15);
    --max360-search-hit-bg:   #78591C;
    --max360-search-hit-text: #FEF3C7;
    /* Soft/ink chip + callout pairs. A tinted fill needs its own legible label
       color: inheriting --max360-text over a hardcoded tint is what made expanded
       panels unreadable. Both halves are always set together. */
    --max360-info-soft:    #1B3558;
    --max360-info-ink:     #BFD9F2;
    --max360-warning-soft: #3A2E16;
    --max360-warning-ink:  #F0C888;
    --max360-success-soft: #17342A;
    --max360-success-ink:  #8FD9A8;
    /* Text ON a solid accent fill. Distinct from -ink, which is the accent made
       legible as text on the PAGE background; this is the inverse direction. White
       is used wherever it clears AA and a hue-preserving dark ink where it does not,
       because --max360-primary ranges from deep blue here to light tan elsewhere. */
    --max360-on-primary:  #34281C;
    --max360-on-danger:   #281411;
    --max360-on-success:  #041A0C;
    --max360-danger-ink:   #F0A99B;  /* danger lightened for legible label TEXT on navy */
}

.theme-max-deck-light {
    --max360-font-body: "Inter", system-ui, sans-serif;
    --max360-font-heading: "Fraunces", Georgia, serif;
    --max360-heading-weight: 500;
    --max360-heading-tracking: -0.015em;
}

/* =============================================================================
   THEME: Sandy Light (cream + tan, deck typography)  [class: .theme-max-deck-light]
   ============================================================================= */
.theme-max-deck-light {
    color-scheme: light;

    /* Deck palette aliases — light variant.
       --bg diluted ~30% toward white vs. the original #F5F1E8: same warm
       cream, but the old value's saturation read as a pink/peach cast on
       some displays instead of a neutral paper tone. */
    --bg:        #F8F5EF;
    --surface:   #FFFFFF;
    /* --surface-2 (rail/menu-bar background, hover states) darkened a bit
       and shifted a few degrees toward yellow — the old value's lightness
       + hue combo read as a pinkish/rose tint instead of a warm brown/taupe. */
    --surface-2: #E5DECC;
    --ink:       #0B1220;
    --ink-dim:   #4A5568;
    --rule:      #D4CFC2;
    --accent:    #7E5A30;
    --accent-2:  #36665A;

    /* Max360 tokens */
    --max360-primary:      #7E5A30;
    --max360-primary-dark: #6A4A26;
    /* NOT --max360-primary. Measured on this theme's cream: primary #B5824F is 3.08:1 and
       primary-dark #9A6E40 is 4.13:1, both under AA's 4.5:1 for text. This is the same
       darkened tan as --max360-primary-ink, which exists for exactly this reason.
       5.69:1 on --max360-bg, 6.19:1 on --max360-surface. */
    --max360-link:         #1A66CC;  /* blue, so a link never shares the tan of an action; 5.1:1 on --max360-bg, 5.5:1 on --max360-surface */
    /* actions are tan in every theme, so a link's color means only "this goes somewhere" */
    --max360-action-accent: #a8824a;
    --max360-action-ink:    #7e5a30;
    --max360-on-action:     #ffffff;
    /* Brand/voice accent (see Midnight note). Tan == accent; no link clash. */
    --max360-brand-accent: #7E5A30;
    /* the Start talking button: a solid fill, the one besides danger-solid; dark themes lift it so the button stays visible */
    --max360-talk: #17513a;
    --max360-on-talk: #ffffff;
    --max360-secondary:    #4A5568;
    --max360-bg:           #F8F5EF;
    --max360-surface:      #FFFFFF;
    --max360-text:         #0B1220;
    --max360-text-muted:   #4A5568;
    --max360-border:       #D4CFC2;
    /* green-700, not green-600: #16a34a is only 3.0:1 on this theme's cream/white
       and --max360-success is used as label TEXT ("Connected", "Available"). */
    --max360-success:      #166534;
    --max360-warning:      #9a4506;
    --max360-danger:       #B04A33;
    --max360-danger-soft:  rgba(192,86,62,0.12);
    --max360-search-hit-bg:   #FEF08A;
    --max360-search-hit-text: #1F2937;
    --max360-primary-ink:  #7E5A30;  /* accent darkened for legible label TEXT on light bg (fill accent stays --max360-primary) */
    --max360-danger-ink:   #A0442E;  /* danger darkened for legible label TEXT on light bg */
    --max360-info-soft:    #E0F2FE;
    --max360-info-ink:     #0C4A6E;
    --max360-warning-soft: #FDF3D8;
    --max360-warning-ink:  #7A5312;
    --max360-success-soft: #DFF0E2;
    --max360-success-ink:  #1B5E2A;
    /* Text ON a solid accent fill. Distinct from -ink, which is the accent made
       legible as text on the PAGE background; this is the inverse direction. White
       is used wherever it clears AA and a hue-preserving dark ink where it does not,
       because --max360-primary ranges from deep blue here to light tan elsewhere. */
    --max360-on-primary:  #FFFFFF;
    --max360-on-danger:   #FFFFFF;
    --max360-on-success:  #FFFFFF;
}

/* =============================================================================
   THEME: Light (bright blue) — DEFAULT  [class: .theme-max-original]
   ============================================================================= */
/* the second selector gives a page that lost its theme class the default theme's colors rather than none: a phone
   whose connection dropped mid theme swap was left with see-through panels and no blues */
.theme-max-original,
:root:not([class*="theme-"]) {
    color-scheme: light;
    /* Deck alias mappings for light mode */
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --ink: #1e293b;
    --ink-dim: #566579;
    --rule: #e2e8f0;
    --accent: #1A66CC;
    --accent-2: #1657AD;
    /* Max360 tokens */
    --max360-primary: #1A66CC;
    --max360-primary-dark: #1657AD;
    /* Link color, unified with the primary accent: buttons, left-menu highlights,
       focus rings, and content/inline links all render in the same Claude-style
       azure (#1A66CC — a deeper blue that comfortably clears WCAG AA 4.5:1 for
       white-on-blue and blue-text-on-white), with --max360-primary-dark (#1657AD)
       for hover/pressed. 5.50:1 on this theme's white. */
    --max360-link: #1A66CC;
    /* actions are tan in every theme, so a link's color means only "this goes somewhere" */
    --max360-action-accent: #a8824a;
    --max360-action-ink:    #84612f;
    --max360-on-action:     #ffffff;
    /* Brand/voice accent — Max's greeting, signature, the Max•360 logo, and the
       Recent Touchpoints / Max Briefs section headings. Distinct from the link
       color (#1A66CC) but a clean azure blue, not the purple/indigo it leaned to. */
    --max360-brand-accent: #517EA1;
    /* the Start talking button: a solid fill, the one besides danger-solid; dark themes lift it so the button stays visible */
    --max360-talk: #17513a;
    --max360-on-talk: #ffffff;
    --max360-secondary: #566579;
    --max360-bg: #ffffff;
    --max360-surface: #ffffff;
    --max360-text: #1e293b;
    --max360-text-muted: #566579;
    --max360-border: #e2e8f0;
    /* green-700, not green-600: see the Sandy Light note — same white-bg AA issue. */
    --max360-success: #166534;
    --max360-warning: #9a4506;
    --max360-danger: #dc2626;
    --max360-danger-soft: rgba(220,38,38,0.10);
    --max360-search-hit-bg: #FEF08A;
    --max360-search-hit-text: #1F2937;
    --max360-info-soft:    #E0F2FE;
    --max360-info-ink:     #0C4A6E;
    --max360-warning-soft: #FEF3C7;
    --max360-warning-ink:  #92400E;
    --max360-success-soft: #DCFCE7;
    --max360-success-ink:  #166534;
    /* Text ON a solid accent fill. Distinct from -ink, which is the accent made
       legible as text on the PAGE background; this is the inverse direction. White
       is used wherever it clears AA and a hue-preserving dark ink where it does not,
       because --max360-primary ranges from deep blue here to light tan elsewhere. */
    --max360-on-primary:  #FFFFFF;
    --max360-on-danger:   #FFFFFF;
    --max360-on-success:  #FFFFFF;
    --max360-danger-ink:   #991B1B;  /* danger darkened for legible label TEXT on white */
}

/* =============================================================================
   THEME: Gray Light (muted blue-gray, clean)  [class: .theme-uv360-light]
   Maps UV360 :root values → --max360-* tokens
   ============================================================================= */
.theme-uv360-light {
    color-scheme: light;

    /* Deck alias mappings */
    --bg:        #F8F7F2;
    --surface:   #FFFFFF;
    --surface-2: #f1f3f5;
    --ink:       #37474F;
    --ink-dim:   #566579;
    --rule:      #CFD8DC;
    --accent:    #546E7A;
    --accent-2:  #4A58A8;

    /* Max360 tokens — mapped from UV360 :root */
    --max360-primary:      #546E7A;  /* --uv360-primary */
    --max360-primary-dark: #455A64;  /* --uv360-primary-hover */
    --max360-link:         #1A66CC;  /* blue, so a link never shares the tan of an action; 5.1:1 on --max360-bg, 5.5:1 on --max360-surface */
    /* actions are tan in every theme, so a link's color means only "this goes somewhere" */
    --max360-action-accent: #a8824a;
    --max360-action-ink:    #84612f;
    --max360-on-action:     #ffffff;
    /* Brand/voice accent. Slate == accent; give it a distinct value here if the
       brand marks read as links in this theme. */
    --max360-brand-accent: #546E7A;
    /* the Start talking button: a solid fill, the one besides danger-solid; dark themes lift it so the button stays visible */
    --max360-talk: #17513a;
    --max360-on-talk: #ffffff;
    --max360-secondary:    #78909C;  /* --uv360-secondary */
    --max360-bg:           #F8F7F2;  /* --uv360-surface-alt */
    --max360-surface:      #FFFFFF;  /* --uv360-surface */
    --max360-text:         #37474F;  /* --uv360-text */
    --max360-text-muted:   #566579;  /* --uv360-text-muted */
    --max360-border:       #CFD8DC;  /* --uv360-border */
    --max360-success:      #3F6B2F;  /* --uv360-success */
    --max360-warning:      #8F560A;  /* --uv360-warning */
    --max360-danger:       #B84C38;  /* --uv360-danger */
    --max360-danger-soft:  rgba(184,76,56,0.12);
    --max360-search-hit-bg:   #FDE68A;
    --max360-search-hit-text: #1F2937;
    --max360-info-soft:    #E1EDF2;
    --max360-info-ink:     #1F4B5C;
    --max360-warning-soft: #FBF0DA;
    --max360-warning-ink:  #7A5A1E;
    --max360-success-soft: #E2EFE4;
    --max360-success-ink:  #2C5B33;
    /* Text ON a solid accent fill. Distinct from -ink, which is the accent made
       legible as text on the PAGE background; this is the inverse direction. White
       is used wherever it clears AA and a hue-preserving dark ink where it does not,
       because --max360-primary ranges from deep blue here to light tan elsewhere. */
    --max360-on-primary:  #FFFFFF;
    --max360-on-danger:   #FFFFFF;
    --max360-on-success:  #FFFFFF;
    --max360-danger-ink:   #8F3B2A;  /* danger darkened for legible label TEXT on light slate */
}

/* =============================================================================
   THEME: Earthy Dark (warm forest charcoal)  [class: .theme-uv360-earthy-dark]
   Maps .theme-earthy-grounded-dark values → --max360-* tokens
   ============================================================================= */
.theme-uv360-earthy-dark {
    color-scheme: dark;

    /* Deck alias mappings */
    --bg:        #1F2320;
    --surface:   #1F2320;  /* --uv360-surface */
    --surface-2: #2B302C;  /* --uv360-surface-elevated / sidebar-bg */
    --ink:       #d4cbb5;  /* --uv360-text */
    --ink-dim:   #B8AE9F;  /* --uv360-text-muted */
    --rule:      #3A3E3B;  /* --uv360-border */
    --accent:    #7DA783;  /* --uv360-primary (moss green) */
    --accent-2:  #D97A4F;  /* --uv360-accent (terracotta) */

    /* Max360 tokens — mapped from .theme-earthy-grounded-dark */
    --max360-primary:      #7DA783;  /* --uv360-primary */
    --max360-primary-dark: #91B995;  /* --uv360-primary-hover */
    --max360-link:         #7FB2F0;  /* blue, so a link never shares the green of an action; 7.2:1 on --max360-bg, 6.6:1 on --max360-surface */
    /* actions are tan in every theme, so a link's color means only "this goes somewhere" */
    --max360-action-accent: #c9a36b;
    --max360-action-ink:    #c9a36b;
    --max360-on-action:     #1f2320;
    --max360-primary-ink:  #8FBA95;  /* the moss accent as legible label TEXT; the fill stays --max360-primary */
    /* Brand/voice accent. Moss == accent; not a link signal, so left equal. */
    --max360-brand-accent: #7DA783;
    /* the Start talking button: a solid fill, the one besides danger-solid; dark themes lift it so the button stays visible */
    --max360-talk: #2f7d5b;
    --max360-on-talk: #ffffff;
    --max360-secondary:    #A77C61;  /* --uv360-secondary */
    --max360-bg:           #1F2320;  /* --uv360-surface (deep forest charcoal) */
    --max360-surface:      #262A27;  /* --uv360-card-bg */
    --max360-text:         #d4cbb5;  /* --uv360-text */
    --max360-text-muted:   #B8AE9F;  /* --uv360-text-muted */
    --max360-border:       #3A3E3B;  /* --uv360-border */
    --max360-success:      #6FAF74;  /* --uv360-success */
    --max360-warning:      #D18B45;  /* --uv360-warning */
    --max360-danger:       #D9796B;  /* --uv360-danger */
    --max360-danger-soft:  rgba(217,121,107,0.15);
    --max360-search-hit-bg:   #5C532A;
    --max360-search-hit-text: #F0E7C8;
    --max360-danger-ink:   #E0A094;  /* danger lightened for legible label TEXT on dark earthy bg */
    --max360-info-soft:    #2A3B33;
    --max360-info-ink:     #A8D0AE;
    --max360-warning-soft: #3A2E1C;
    --max360-warning-ink:  #E0B87A;
    --max360-success-soft: #22331F;
    --max360-success-ink:  #93CE9C;
    /* Text ON a solid accent fill. Distinct from -ink, which is the accent made
       legible as text on the PAGE background; this is the inverse direction. White
       is used wherever it clears AA and a hue-preserving dark ink where it does not,
       because --max360-primary ranges from deep blue here to light tan elsewhere. */
    --max360-on-primary:  #1E281F;
    --max360-on-danger:   #1F1411;
    --max360-on-success:  #1D2E1E;
}

/* =============================================================================
   BOOTSTRAP COLOR VARIABLES ON THE DARK THEMES
   Bootstrap's defaults are ink for a light page. On a dark theme that put near-black
   .text-muted, .form-text, <code> and links on navy (1.1:1), and light themed text on
   white .card and .modal-content surfaces. Mapping the variables makes every Bootstrap
   component follow the theme. Form controls keep Bootstrap's light look (dark text on
   white), so they re-pin the variables the page just changed.
   ============================================================================= */
.theme-max-deck,
.theme-uv360-earthy-dark {
    --bs-body-color:       var(--max360-text);
    --bs-emphasis-color:   var(--max360-text);
    --bs-secondary-color:  var(--max360-text-muted);
    --bs-tertiary-color:   var(--max360-text-muted);
    --bs-body-bg:          var(--max360-surface);
    --bs-secondary-bg:     var(--surface-2);
    --bs-tertiary-bg:      var(--max360-bg);
    --bs-border-color:     var(--max360-border);
    --bs-code-color:       var(--max360-primary-ink, var(--max360-primary));
    --bs-link-color:       var(--max360-link);
    --bs-link-hover-color: var(--max360-text);
}

/* Bootstrap's pink <code>, blue links and gray .text-secondary sit under 4.5:1 on the cream and tinted
   callouts of the light themes. */
.theme-max-original,
.theme-max-deck-light,
.theme-uv360-light {
    --bs-code-color: #b02a6b;
    --bs-link-color: var(--max360-link);
}

.theme-max-deck-light .text-secondary,
.theme-uv360-light .text-secondary {
    color: var(--max360-text-muted) !important;
}

.theme-max-deck .text-secondary,
.theme-uv360-earthy-dark .text-secondary {
    color: var(--max360-text-muted) !important;
}

/* Bootstrap's pale table-row variants keep their pale fill, so the row's content needs dark ink. */
.theme-max-deck :is(.table-success, .table-danger, .table-warning, .table-info),
.theme-uv360-earthy-dark :is(.table-success, .table-danger, .table-warning, .table-info) {
    --max360-text:        #1f2937;
    --max360-text-muted:  #4b5563;
    --max360-link:        #1d4ed8;
    --max360-primary:     #1d4ed8;
    --max360-primary-ink: #1d4ed8;
    --max360-action-accent: #a8824a;
    --max360-action-ink:    #84612f;
    --max360-on-action:     #ffffff;
}

.theme-max-deck :is(.form-control, .form-select, .input-group-text, .form-check-input),
.theme-uv360-earthy-dark :is(.form-control, .form-select, .input-group-text, .form-check-input) {
    --bs-body-color:      #212529;
    --bs-body-bg:         #fff;
    --bs-secondary-color: rgba(33, 37, 41, 0.75);
    --bs-secondary-bg:    #e9ecef;
    --bs-tertiary-bg:     #f8f9fa;
    --bs-border-color:    #dee2e6;
}

/* =============================================================================
   GRAPH CANVAS TOKENS
   relationship-graph.js reads these with getComputedStyle, so the canvas follows
   the theme and a color change is a token edit rather than a JS edit. Two blocks
   rather than five: the light default, overridden once for both dark themes.
   Entity-type hues are leveled to roughly one lightness and one chroma so the
   canvas reads as one family and node SIZE (connection count) is what varies, and
   biased warm: the two frequent types lead on terracotta and bronze, the greens are
   moss and olive rather than teal, and the grays carry yellow rather than blue.
   The names are the seeded EntityType rows; anything else falls to
   --graph-type-unknown, the only desaturated hue, so an unknown type looks like
   an absence instead of a color.
   ============================================================================= */
:root {
    --graph-type-person:       #B06437;
    --graph-type-company:      #8B6A30;
    --graph-type-organization: #7E6A55;
    --graph-type-product:      #417F5E;
    --graph-type-topic:        #8E4F72;
    --graph-type-meeting:      #55708F;
    --graph-type-competitor:   #9C3535;
    --graph-type-deal:         #6F7A2E;
    --graph-type-commitment:   #96538F;
    --graph-type-unknown:      #847A6E;

    --graph-edge:        #CFC8BE;
    --graph-edge-label:  #6F675E;
    --graph-node-stroke: rgba(58, 40, 26, 0.28);
    --graph-dim:         0.10;
}

.theme-max-deck,
.theme-uv360-earthy-dark {
    --graph-type-person:       #D99A6E;
    --graph-type-company:      #CBA968;
    --graph-type-organization: #BCAB93;
    --graph-type-product:      #79C39C;
    --graph-type-topic:        #CE8FB4;
    --graph-type-meeting:      #93B0D1;
    --graph-type-competitor:   #DE7B74;
    --graph-type-deal:         #B4C177;
    --graph-type-commitment:   #C692C6;
    --graph-type-unknown:      #B0A698;

    --graph-edge:        #544C43;
    --graph-edge-label:  #A89D91;
    --graph-node-stroke: rgba(0, 0, 0, 0.45);
    --graph-dim:         0.12;
}

.theme-uv360-earthy-dark {
    --graph-edge:        #4A504B;
    --graph-edge-label:  #A59B8D;
}

.max360-admin-hub-search { max-width: 520px; margin-bottom: .5rem; }
.max360-admin-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.max360-admin-hub-card { background: var(--max360-surface); border: 1px solid var(--max360-border); border-radius: 10px; padding: .9rem 1rem; }
.max360-admin-hub-card h2 { font-size: 1rem; margin: 0 0 .5rem; }
.max360-admin-hub-card ul { list-style: none; margin: 0; padding: 0; }
.max360-admin-hub-card li { padding: .15rem 0; }
/* Match the site's link-list convention (sidebar/panel nav): no persistent
   underline, ink-colored text with an accent hover — not the global gold+
   underlined <a> fallback. */
.max360-admin-hub-card a { color: var(--ink); text-decoration: none; transition: color .15s; }
.max360-admin-hub-card a:hover { color: var(--accent); text-decoration: underline; }
.max360-admin-hub-card a i { color: var(--accent); margin-right: .4rem; font-size: .9em; }
.max360-admin-hub-empty { color: var(--max360-text-muted); padding: 1rem 0; }

.admin-hub-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 1.25rem; align-items: start; }
.admin-hub-main { min-width: 0; }
.admin-hub-advisor { position: sticky; top: 1rem; height: calc(100vh - 2rem); display: flex; flex-direction: column;
    border: 1px solid var(--rule); border-radius: 6px; background: var(--bg); overflow: hidden; }
/* Panel-internal .admin-advisor* styles live co-located in AdminAdvisorPanel.razor's <style> block
   (matches the SurfaceChatCompact pattern). themes.css owns only the host-side hub layout above. */
@media (max-width: 1100px) { .admin-hub-layout { grid-template-columns: 1fr; } .admin-hub-advisor { position: static; height: 520px; } }