@charset "UTF-8";
/* ############################################################################
   QLYNIC - ESSENTIALS.CSS   .   THE MOTHER STYLESHEET   ("Qlynic Bootstrap")
   ----------------------------------------------------------------------------
   THEME ............ AURORA NOIR  (ultra-premium, Apple-grade dark)
   FONT ............. Geist + Geist Mono  (loaded by Site.Master)
   PURPOSE .......... ONE shared design contract for EVERY dashboard page.
                      This file is the equivalent of Bootstrap for Qlynic, but
                      with the Qlynic theme baked in. It carries:
                        - the full design-token system (colours, type, radius,
                          motion, shadows, z-index)  on  :root + .theme-dark
                        - the reset + base typography
                        - every reusable UI ATOM and MOLECULE:
                            buttons (.qbtn), inputs / textarea / search,
                            native + custom select, radio, checkbox,
                            animated switch, segmented control,
                            panels / cards / sub-cards,
                            modals + message boxes, toasts,
                            menus / popovers, tooltips, tables,
                            pills / chips / badges, dividers, links,
                            scrollbars, skeletons, helper utilities.

   WHAT IT IS *NOT* .. It contains NO page STRUCTURE / layout. The skeleton of
                      a given page (its grid, its hero, its feed) lives in that
                      page's own stylesheet (e.g. upcoming-appointments.css).
                      Essentials only supplies the *vocabulary*; the page writes
                      the *sentences*.

   PREFIX ........... q-  /  qbtn  (no collision with master sb-/topbar-/rd-/
                      icon-btn, nor with page ua-/qpr- namespaces).

   LOAD ORDER ....... site.master.css  ->  essentials.css  ->  <page>.css
                      (page loads last so it can extend, never fights, the base)

   HOW TO EVOLVE .... Retheme by editing the TOKEN VALUES in section 2 only -
                      every component reads tokens, so the whole app reskins at
                      once. Add a NEW component here ONLY when a page genuinely
                      needs a primitive that does not exist yet; once added it is
                      shared by all. Avoid editing existing component RULES - that
                      can ripple into already-shipped pages. Tokens = safe to
                      tune; structural rules = touch sparingly.
   ############################################################################ */


/* ============================================================================
   1.  GLOBAL TOKENS   (theme-agnostic: type / radius / motion / z / aurora)
   ============================================================================ */
:root {
    /* --- Type ramp (rem-based; 1rem = 16px) --- */
    --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", monospace;
    --font-size-display: 2rem; /* 32px  hero numerals          */
    --font-size-xxl: 1.5rem; /* 24px  page titles            */
    --font-size-xl: 1.25rem; /* 20px  section titles         */
    --font-size-lg: 1rem; /* 16px  card titles            */
    --font-size-base: 0.875rem; /* 14px  body                   */
    --font-size-sm: 0.8125rem; /* 13px  secondary              */
    --font-size-xs: 0.75rem; /* 12px  labels                 */
    --font-size-xxs: 0.6875rem; /* 11px  micro / kicker         */
    --lh-tight: 1.2;
    --lh-snug: 1.4;
    --lh-base: 1.55;
    /* --- Radii --- */
    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius-md: 13px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --radius-2xl: 28px;
    --radius-pill: 999px;
    /* --- Motion (spring-forward easings for the premium "lift") --- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --timing-fast: .13s;
    --timing: .22s;
    --timing-slow: .36s;
    /* --- THE AURORA  (single signature gradient: teal -> sky -> indigo ->
       violet -> rose). Used ONLY on focal accents; restraint reads premium. */
    --aurora: linear-gradient(115deg, #34e3d4 0%, #5bc8ff 24%, #7c83ff 52%, #b08bff 76%, #ff8bc4 100%);
    --aurora-rev: linear-gradient(295deg, #34e3d4 0%, #5bc8ff 24%, #7c83ff 52%, #b08bff 76%, #ff8bc4 100%);
    --aurora-band: linear-gradient(90deg, #34e3d4, #5bc8ff, #7c83ff, #b08bff, #ff8bc4);
    /* --- Z-index ladder (shared by every overlay across the app) --- */
    --z-base: 1;
    --z-sticky: 100;
    --z-menu: 300;
    --z-drawer: 5000;
    --z-modal: 6000;
    --z-toast: 9000;
    /* --- Backdrop-blur strengths (overlays sit on solid sheets; a light blur
       on the SCRIM adds depth without the failed full-glass mud look) --- */
    --glass-blur: 10px;
    --glass-blur-strong: 16px;
    --glass-saturate: 1.2;
}


/* ============================================================================
   2.  AURORA NOIR THEME TOKENS    .    EDIT THIS BLOCK TO RETHEME EVERYTHING
   ----------------------------------------------------------------------------
   Physical model (why this beats translucent glass):
     * SOLID MATERIAL, NOT TRANSPARENCY. Surfaces are opaque, stepped gunmetal -
       each level a touch lighter than the one beneath - reading as machined
       material on a true-black canvas (matches the .ait reference: #000 ground,
       #1c232d panels).
     * LIGHT BEHAVES LIKE LIGHT. Every raised surface gets a 1px top edge-light
       hairline + a layered drop shadow, so it floats. Hover BRIGHTENS and LIFTS.
     * ONE SIGNATURE: the periwinkle-indigo accent (#7a7ff4, lifted straight
       from the reference) plus the aurora sweep on focal points only.
   ============================================================================ */
.theme-dark {
    /* ====================================================================
       2.1  CANVAS  -  true black ground (per .ait), with a faint aurora bloom
       drifting in from the top corners so panels pop off the dark.
       ==================================================================== */
    --bg-base: #000000;
    --bg-elevated: #06080d; /* app shell one notch off pure black */
    --bg-gradient: radial-gradient(1200px 760px at 12% -12%, rgba(122,127,244,.14) 0%, transparent 56%), radial-gradient(900px 620px at 92% -6%, rgba(52,227,212,.07) 0%, transparent 52%), radial-gradient(760px 520px at 78% 112%, rgba(255,139,196,.05) 0%, transparent 56%), radial-gradient(640px 460px at 4% 94%, rgba(176,139,255,.045) 0%, transparent 60%);
    /* ====================================================================
       2.2  SURFACES  -  OPAQUE stepped gunmetal. surface-3 (#1c232d) is the
       canonical PANEL material from the reference. Each level lighter = depth.
       ==================================================================== */
    --surface-0: #10141b; /* deepest inset: wells, recessed inputs   */
    --surface-1: #161b23; /* quiet bg: toolbars, side rails, rows     */
    --surface-2: #191f28; /* raised quiet: bars, footers              */
    --surface-3: #1c232d; /* >>> PANELS / CARDS  (reference colour)   */
    --surface-4: #232b37; /* raised: popovers, menus, HOVERED cards   */
    --surface-5: #2b3441; /* highest: modal / drawer / tooltip body   */
    --surface-tint: #1a2130; /* blue-violet tinted pane for focal cards  */
    /* ====================================================================
       2.2b  GLASS  -  translucent frosted surfaces (Apple-like). These power
       the dashboard's floating panels/cards/modals/menus. They refract the
       dark aurora canvas behind them, so the body MUST stay opaque + bloomed.
       Fields/inputs deliberately stay OPAQUE (see --field-bg) for readability.
       ==================================================================== */
    --glass-blur: 22px; /* backdrop blur radius                     */
    --glass-saturate: 150%; /* punch up colour behind the glass         */
    --glass-panel: color-mix(in srgb, var(--surface-3) 62%, transparent);
    --glass-panel-hover: color-mix(in srgb, var(--surface-4) 68%, transparent);
    --glass-card: color-mix(in srgb, var(--surface-3) 55%, transparent);
    --glass-raised: color-mix(in srgb, var(--surface-4) 72%, transparent); /* menus/popovers */
    --glass-modal: color-mix(in srgb, var(--surface-5) 80%, transparent);
    --glass-note: color-mix(in srgb, var(--surface-2) 60%, transparent);
    --glass-edge: rgba(255,255,255,.10); /* top edge-light hairline                  */
    --glass-edge-strong: rgba(255,255,255,.16);
    /* Pastel "spotlight" card fills (the mint / pink / lavender cards in the
       reference). Use for hero stat tiles, never for dense data. */
    --tile-mint: linear-gradient(160deg, #d6f1ec 0%, #c7e9e3 100%);
    --tile-pink: linear-gradient(160deg, #f3dcee 0%, #eccfe2 100%);
    --tile-lav: linear-gradient(160deg, #e7e1eb 0%, #dcd4e6 100%);
    --tile-ink: #14181f; /* dark text used on pastel tiles           */
    /* ====================================================================
       2.3  BORDERS  -  fine luminous hairlines (cool white, low alpha)
       ==================================================================== */
    --border-subtle: rgba(150,162,210,.09);
    --border-default: rgba(160,172,220,.15);
    --border-strong: rgba(170,182,230,.24);
    --border-interactive: rgba(122,127,244,.45);
    /* ====================================================================
       2.4  TEXT  -  crisp, cool-white scale
       ==================================================================== */
    --text-primary: #f2f4fb;
    --text-secondary: rgba(214,221,240,.90);
    --text-muted: rgba(160,170,200,.70);
    --text-faint: rgba(132,142,176,.50);
    --text-on-accent: #0a0b14; /* dark text on bright accent fills          */
    /* ====================================================================
       2.5  BRAND ACCENTS  -  periwinkle indigo lead (#7a7ff4 from the .ait),
       aurora teal + violet + rose support.
       ==================================================================== */
    --primary: #7a7ff4; /* periwinkle indigo - hero action           */
    --primary-bright: #9197ff; /* hover / active link                       */
    --primary-deep: #5f64e6; /* base / border                             */
    --primary-muted: rgba(122,127,244,.16);
    --primary-subtle: rgba(122,127,244,.09);
    --primary-glow: rgba(122,127,244,.42);
    --on-primary: #ffffff;
    --accent: #34e3d4; /* aurora teal - secondary brand / charts    */
    --accent-bright: #5af0e2;
    --accent-muted: rgba(52,227,212,.15);
    --accent-subtle: rgba(52,227,212,.08);
    --violet: #b08bff;
    --violet-muted: rgba(176,139,255,.16);
    --rose: #ff8bc4;
    --rose-muted: rgba(255,139,196,.15);
    /* ====================================================================
       2.6  SEMANTIC  -  each with .16 muted + .09 subtle tint companions
       ==================================================================== */
    --success: #3ddc97;
    --success-muted: rgba(61,220,151,.16);
    --success-subtle: rgba(61,220,151,.09);
    --warning: #ffb454;
    --warning-muted: rgba(255,180,84,.16);
    --warning-subtle: rgba(255,180,84,.09);
    --danger: #ff6b7a;
    --danger-muted: rgba(255,107,122,.16);
    --danger-subtle: rgba(255,107,122,.09);
    --info: #5bc8ff;
    --info-muted: rgba(91,200,255,.16);
    --info-subtle: rgba(91,200,255,.09);
    --coral: #ff8b6b;
    --mint: #7ef0d2;
    /* ====================================================================
       2.7  SHADOWS  -  layered + deep, with a faint cool ambient so panels
       float convincingly off the black.
       ==================================================================== */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.50);
    --shadow-sm: 0 2px 6px rgba(0,0,0,.45), 0 6px 16px rgba(0,0,0,.34);
    --shadow-md: 0 4px 12px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.42);
    --shadow-lg: 0 10px 24px rgba(0,0,0,.50), 0 28px 64px rgba(0,0,0,.52);
    --shadow-xl: 0 18px 40px rgba(0,0,0,.56), 0 44px 100px rgba(0,0,0,.62);
    --shadow-aurora: 0 10px 30px rgba(122,127,244,.20), 0 4px 12px rgba(52,227,212,.10);
    /* ====================================================================
       2.8  HIGHLIGHTS  -  top edge-light hairline (the key depth cue)
       ==================================================================== */
    --highlight-top: inset 0 1px 0 rgba(255,255,255,.06);
    --highlight-top-strong: inset 0 1px 0 rgba(255,255,255,.11);
    /* ====================================================================
       2.9  FOCUS RINGS  -  periwinkle
       ==================================================================== */
    --ring: 0 0 0 2px rgba(122,127,244,.55), 0 0 0 5px rgba(122,127,244,.16);
    --ring-danger: 0 0 0 2px rgba(255,107,122,.55), 0 0 0 5px rgba(255,107,122,.16);
    --ring-soft: 0 0 0 3px rgba(122,127,244,.18);
    /* ====================================================================
       2.10  INTERACTION STATES  -  BRIGHTEN on hover (cool, never gray mud)
       ==================================================================== */
    --hover-bg: rgba(140,152,255,.06);
    --hover-bg-strong: rgba(140,152,255,.11);
    --active-bg: rgba(140,152,255,.17);
    /* ====================================================================
       2.11  BUTTON TOKENS  (consumed by the .qbtn system below)
       Neutral = solid raised gunmetal. Primary = periwinkle gradient.
       ==================================================================== */
    --btn-neutral-top: #262d3a;
    --btn-neutral-bottom: #1c232d;
    --btn-neutral-top-hover: #2f3849;
    --btn-neutral-border: rgba(170,182,230,.17);
    --btn-invert-bg: #eef1fb;
    --btn-invert-bg-hover: #ffffff;
    --btn-invert-text: #0c0e18;
    --btn-primary-top: #888dff;
    --btn-primary-bottom: #6d72ef;
    --btn-primary-top-hover: #969bff;
    --btn-primary-bottom-hover: #7a7ff4;
    --btn-primary-border: #5f64e6;
    --btn-primary-border-hover: #7176ff;
    /* ====================================================================
       2.12  FIELDS  (inputs / textarea / search / native selects)
       ==================================================================== */
    --field-bg: #12161e;
    --field-bg-hover: #161b24;
    --field-bg-disabled: #14181f;
    --field-border: rgba(150,162,210,.14);
    --field-border-hover: rgba(160,172,220,.24);
    --field-border-focus: rgba(122,127,244,.55);
    --field-text: var(--text-primary);
    --field-placeholder: var(--text-faint);
    --field-radius: var(--radius-md);
    --field-h: 38px;
    --field-h-sm: 32px;
    --field-h-lg: 46px;
    --select-option-bg: #161b23; /* native <option> needs opaque solid */
    /* ====================================================================
       2.13  CONTAINERS  (panel / card / bar language)
       ==================================================================== */
    --panel-bg: var(--glass-panel); /* glass: refracts the aurora canvas    */
    --panel-bg-hover: var(--glass-panel-hover);
    --panel-border: var(--glass-edge);
    --panel-border-hover: var(--glass-edge-strong);
    --panel-radius: var(--radius-xl);
    --panel-shadow: var(--shadow-lg);
    --panel-head-divider: var(--glass-edge);
    --card-bg: var(--glass-card);
    --card-radius: var(--radius-lg);
    --bar-bg: var(--glass-panel);
    --bar-border: var(--glass-edge);
    --bar-radius: var(--radius-xl);
    /* ====================================================================
       2.14  MODAL  /  MESSAGE BOX
       ==================================================================== */
    --modal-overlay: rgba(2,3,7,.72);
    --modal-blur: 6px;
    --modal-bg: var(--glass-modal);
    --modal-bg-raised: var(--glass-raised);
    --modal-border: var(--glass-edge-strong);
    --modal-divider: var(--glass-edge);
    --modal-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,.10);
    --modal-radius: var(--radius-2xl);
    --modal-title: var(--text-primary);
    --modal-body-text: var(--text-secondary);
    --modal-sticky-bg: #1a212b; /* opaque - masks scroll behind sticky bars */
    /* ====================================================================
       2.15  DRAWER  (right-side panel)
       ==================================================================== */
    --drawer-overlay: rgba(2,3,7,.66);
    --drawer-blur: 5px;
    --drawer-bg: #161b23;
    --drawer-bg-raised: #1c232d;
    --drawer-border: var(--border-default);
    --drawer-divider: var(--border-subtle);
    --drawer-shadow: var(--shadow-xl);
    --drawer-width: min(92vw, 472px);
    --drawer-sticky-bg: #161b23;
    /* ====================================================================
       2.16  MENU  /  POPOVER
       ==================================================================== */
    --menu-bg: var(--glass-raised);
    --menu-border: var(--glass-edge-strong);
    --menu-shadow: var(--shadow-lg);
    --menu-radius: var(--radius-lg);
    --menu-item-hover: var(--hover-bg-strong);
    --menu-item-active: var(--primary-muted);
    /* ====================================================================
       2.17  TOAST  /  INLINE NOTE
       ==================================================================== */
    --toast-bg: var(--glass-raised);
    --toast-border: var(--glass-edge-strong);
    --toast-text: var(--text-primary);
    --toast-text-muted: var(--text-muted);
    --toast-shadow: var(--shadow-lg);
    --toast-radius: var(--radius-md);
    --toast-success: var(--success);
    --toast-success-bg: var(--success-subtle);
    --toast-error: var(--danger);
    --toast-error-bg: var(--danger-subtle);
    --toast-warning: var(--warning);
    --toast-warning-bg: var(--warning-subtle);
    --toast-info: var(--info);
    --toast-info-bg: var(--info-subtle);
    --note-bg: var(--glass-note);
    --note-border: var(--glass-edge);
    --note-radius: var(--radius-md);
    /* ====================================================================
       2.18  TOOLTIP
       ==================================================================== */
    --tooltip-bg: #2b3441;
    --tooltip-text: var(--text-primary);
    --tooltip-border: var(--border-strong);
    --tooltip-radius: var(--radius-sm);
    /* ====================================================================
       2.19  TABLE
       ==================================================================== */
    --table-head-bg: var(--surface-2);
    --table-head-text: var(--text-muted);
    --table-row-bg: transparent;
    --table-row-bg-alt: rgba(140,152,255,.03);
    --table-row-hover: var(--hover-bg);
    --table-border: var(--border-subtle);
    --table-cell-text: var(--text-secondary);
    /* ====================================================================
       2.20  PILL / CHIP / SEGMENTED
       ==================================================================== */
    --pill-bg: var(--surface-1);
    --pill-border: var(--border-subtle);
    --pill-text: var(--text-secondary);
    --chip-bg: var(--surface-1);
    --chip-border: var(--border-subtle);
    --seg-bg: var(--surface-1);
    --seg-border: var(--border-default);
    --seg-thumb-bg: var(--surface-4);
    --seg-text: var(--text-muted);
    --seg-text-active: var(--text-primary);
    /* ====================================================================
       2.21  SWITCH  (animated toggle)
       ==================================================================== */
    --switch-track-off: #2a323f;
    --switch-track-on: var(--primary);
    --switch-thumb: #f2f4fb;
    --switch-border-off: rgba(170,182,230,.18);
    /* ====================================================================
       2.22  SCROLLBAR
       ==================================================================== */
    --scroll-track: transparent;
    --scroll-thumb: rgba(150,162,210,.18);
    --scroll-thumb-hover: rgba(160,172,220,.32);
    /* ====================================================================
       2.23  CHART  (chart.js / canvas series read these)
       ==================================================================== */
    --chart-1: #7a7ff4; /* periwinkle */
    --chart-2: #34e3d4; /* teal       */
    --chart-3: #3ddc97; /* green      */
    --chart-4: #b08bff; /* violet     */
    --chart-5: #ffb454; /* amber      */
    --chart-6: #ff8bc4; /* rose       */
    --chart-7: #8b95a6; /* slate      */
    --chart-grid: rgba(150,162,210,.08);
    --chart-axis: rgba(160,170,200,.55);
    --chart-label: var(--text-muted);
    --chart-track: rgba(150,162,210,.12);
    --chart-tooltip-bg: #202733;
    --chart-tooltip-border: var(--border-default);
    --chart-area-from: rgba(122,127,244,.42);
    --chart-area-to: rgba(122,127,244,0);
}


/* ============================================================================
   3.  RESET  &  BASE
   ============================================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--bg-base);
}

body {
    font-family: var(--font);
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: var(--lh-base);
    color: var(--text-primary);
    background: transparent;
    position: relative;
    z-index: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* Aurora bloom: a fixed, dark, low-alpha gradient field behind everything so
   the glass panels above have rich colour + depth to refract. Painted on
   html::before -- the app shell uses body::before / body::after, so this never
   clashes with it. Pure decoration, behind all content, no interaction. */
html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--bg-gradient);
    filter: saturate(116%);
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: var(--font);
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
}

input, textarea, select {
    font-family: var(--font);
    color: inherit;
}

/* Numerals everywhere line up cleanly */
.q-num, .mono, .q-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Premium focus ring (keyboard only) */
.theme-dark :focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}

/* Selection: periwinkle wash */
.theme-dark ::selection {
    background: rgba(122,127,244,.34);
    color: #fff;
}

.theme-dark ::-moz-selection {
    background: rgba(122,127,244,.34);
    color: #fff;
}

/* Native <option> lists - opaque solid (browsers ignore transparency) */
.theme-dark select option {
    background-color: var(--select-option-bg);
    color: var(--text-primary);
}


/* ============================================================================
   4.  TYPOGRAPHY HELPERS   (atoms a page can drop in anywhere)
   ============================================================================ */
.q-display {
    font-size: var(--font-size-display);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: var(--lh-tight);
    color: var(--text-primary);
}

.q-title {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: var(--lh-tight);
    color: var(--text-primary);
}

.q-h2 {
    font-size: var(--font-size-xl);
    font-weight: 650;
    letter-spacing: -.015em;
    line-height: var(--lh-snug);
    color: var(--text-primary);
}

.q-h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: var(--lh-snug);
    color: var(--text-primary);
}

.q-body {
    font-size: var(--font-size-base);
    font-weight: 400;
    color: var(--text-secondary);
}

.q-small {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.q-micro {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Section kicker / eyebrow label */
.q-kicker {
    font-size: var(--font-size-xxs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-faint);
    line-height: 1;
}

.q-text-primary {
    color: var(--text-primary);
}

.q-text-secondary {
    color: var(--text-secondary);
}

.q-text-muted {
    color: var(--text-muted);
}

.q-text-faint {
    color: var(--text-faint);
}

.q-text-success {
    color: var(--success);
}

.q-text-danger {
    color: var(--danger);
}

.q-text-warning {
    color: var(--warning);
}

.q-text-info {
    color: var(--info);
}

.q-text-accent {
    color: var(--accent);
}

.q-text-primary-accent {
    color: var(--primary-bright);
}

/* Gradient aurora text (use sparingly, on hero numerals only) */
.q-text-aurora {
    background: var(--aurora);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


/* ============================================================================
   5.  BUTTON SYSTEM   (.qbtn)
   ----------------------------------------------------------------------------
   Signature: PRIMARY is a clean periwinkle gradient with a single elegant light
   sweep on hover (never a coloured halo). Neutral / semantic buttons are solid
   raised gunmetal so they read as real, pressable material on dark panels. No
   flat gray. Light MOVES (sheen), it never bleeds as glow.

   API
     Base ........ .qbtn
     Variants .... --primary --invert --secondary --ghost --subtle
                   --danger --success --warning --info --link
     Solid flag .. --solid              (fills a semantic variant)
     Sizes ....... --xs --sm --md(default) --lg
     Shapes ...... --pill --block --square --icon --collapse
     States ...... :hover :active :focus-visible [disabled] .is-active .is-loading
     Elements .... .qbtn__ico .qbtn__label .qbtn__badge
     Groups ...... .qbtn-group .qbtn-segmented
   ============================================================================ */

.qbtn {
    --qbtn-h: 38px;
    --qbtn-px: 16px;
    --qbtn-gap: 8px;
    --qbtn-fs: var(--font-size-base);
    --qbtn-fw: 600;
    --qbtn-radius: var(--radius-sm);
    --qbtn-ico: 16px;
    --qbtn-lift: -1.5px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--qbtn-gap);
    height: var(--qbtn-h);
    padding: 0 var(--qbtn-px);
    border: 1px solid transparent;
    border-radius: var(--qbtn-radius);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font);
    font-size: var(--qbtn-fs);
    font-weight: var(--qbtn-fw);
    letter-spacing: -.01em;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--timing-fast) var(--ease-out), background var(--timing-fast) var(--ease), border-color var(--timing-fast) var(--ease), box-shadow var(--timing-fast) var(--ease), color var(--timing-fast) var(--ease), opacity var(--timing-fast) var(--ease);
}

    .qbtn:focus-visible {
        outline: none;
        box-shadow: var(--ring);
    }

    .qbtn:active {
        transform: translateY(0);
    }

/* --- Elements --- */
.qbtn__ico {
    width: var(--qbtn-ico);
    height: var(--qbtn-ico);
    flex: 0 0 auto;
    pointer-events: none;
}

    .qbtn__ico svg, .qbtn__ico.ico {
        width: 100%;
        height: 100%;
        display: block;
    }

.qbtn__label {
    display: inline-block;
}

.qbtn__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: 2px;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    color: inherit;
    font-family: var(--font-mono);
    font-size: var(--font-size-xxs);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

/* --- Sizes --- */
.qbtn--xs {
    --qbtn-h: 28px;
    --qbtn-px: 11px;
    --qbtn-gap: 6px;
    --qbtn-fs: var(--font-size-xs);
    --qbtn-ico: 14px;
    --qbtn-radius: var(--radius-xs);
}

.qbtn--sm {
    --qbtn-h: 32px;
    --qbtn-px: 13px;
    --qbtn-gap: 7px;
    --qbtn-fs: var(--font-size-sm);
    --qbtn-ico: 15px;
}

.qbtn--lg {
    --qbtn-h: 46px;
    --qbtn-px: 22px;
    --qbtn-gap: 9px;
    --qbtn-fs: var(--font-size-base);
    --qbtn-ico: 18px;
    --qbtn-radius: var(--radius-md);
}

/* --- Shapes --- */
.qbtn--block {
    display: flex;
    width: 100%;
}

.qbtn--pill {
    --qbtn-radius: 999px;
}

.qbtn--square, .qbtn--icon {
    width: var(--qbtn-h);
    padding: 0;
    --qbtn-gap: 0;
}


/* === PRIMARY  -  periwinkle gradient, clean (no glow halo) ================= */
.qbtn--primary {
    position: relative;
    overflow: hidden;
    border-color: var(--btn-primary-border);
    background: linear-gradient(180deg, var(--btn-primary-top) 0%, var(--btn-primary-bottom) 100%);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.32);
}

    .qbtn--primary::before {
        content: "";
        position: absolute;
        top: -50%;
        left: 0;
        width: 55%;
        height: 200%;
        background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.20) 50%, transparent 100%);
        transform: translateX(-180%) skewX(-14deg);
        pointer-events: none;
        z-index: 0;
    }

    .qbtn--primary:hover {
        transform: translateY(var(--qbtn-lift));
        border-color: var(--btn-primary-border-hover);
        background: linear-gradient(180deg, var(--btn-primary-top-hover) 0%, var(--btn-primary-bottom-hover) 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 4px rgba(0,0,0,.32), 0 8px 18px rgba(0,0,0,.30);
    }

        .qbtn--primary:hover::before {
            animation: qbtn-sheen .62s var(--ease-out);
        }

    .qbtn--primary:active {
        transform: translateY(0);
        background: var(--btn-primary-bottom);
        box-shadow: inset 0 2px 5px rgba(0,0,0,.24);
    }

@keyframes qbtn-sheen {
    0% {
        transform: translateX(-180%) skewX(-14deg);
    }

    100% {
        transform: translateX(320%) skewX(-14deg);
    }
}

/* === INVERT  -  near-white solid, dark text - the definitive CTA ========== */
.qbtn--invert {
    border-color: rgba(255,255,255,.22);
    background: linear-gradient(180deg, #ffffff 0%, var(--btn-invert-bg) 100%);
    color: var(--btn-invert-text);
    font-weight: 650;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.35), 0 6px 16px rgba(0,0,0,.30);
}

    .qbtn--invert:hover {
        transform: translateY(var(--qbtn-lift));
        background: linear-gradient(180deg, #ffffff 0%, var(--btn-invert-bg-hover) 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 4px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.34);
    }

    .qbtn--invert:active {
        transform: translateY(0);
        box-shadow: inset 0 2px 4px rgba(0,0,0,.16), 0 1px 2px rgba(0,0,0,.30);
    }

/* === SECONDARY  -  solid raised gunmetal (default neutral) ================ */
.qbtn--secondary {
    border-color: var(--btn-neutral-border);
    background: linear-gradient(180deg, var(--btn-neutral-top) 0%, var(--btn-neutral-bottom) 100%);
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.35);
}

    .qbtn--secondary:hover {
        transform: translateY(var(--qbtn-lift));
        background: linear-gradient(180deg, var(--btn-neutral-top-hover) 0%, var(--btn-neutral-top) 100%);
        border-color: var(--border-strong);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 2px 4px rgba(0,0,0,.35), var(--shadow-sm);
    }

    .qbtn--secondary:active {
        transform: translateY(0);
        background: var(--btn-neutral-bottom);
        box-shadow: inset 0 2px 4px rgba(0,0,0,.28);
    }

/* === GHOST  -  no chrome at rest ========================================== */
.qbtn--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--text-secondary);
}

    .qbtn--ghost:hover {
        background: var(--hover-bg-strong);
        color: var(--text-primary);
    }

    .qbtn--ghost:active {
        background: var(--active-bg);
    }

/* === SUBTLE  -  tinted periwinkle ========================================= */
.qbtn--subtle {
    border-color: rgba(122,127,244,.26);
    background: var(--primary-muted);
    color: var(--primary-bright);
}

    .qbtn--subtle:hover {
        transform: translateY(var(--qbtn-lift));
        background: rgba(122,127,244,.24);
        border-color: rgba(122,127,244,.40);
        box-shadow: var(--shadow-sm);
    }

    .qbtn--subtle:active {
        transform: translateY(0);
        background: var(--primary-muted);
    }

/* === LINK ================================================================= */
.qbtn--link {
    height: auto;
    padding: 0;
    border: none;
    background: none;
    color: var(--primary-bright);
    box-shadow: none;
}

    .qbtn--link:hover {
        color: var(--accent-bright);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .qbtn--link:active {
        transform: none;
        opacity: .85;
    }


/* === SEMANTIC  (tinted by default; add .qbtn--solid for filled) =========== */
.qbtn--danger {
    border-color: rgba(255,107,122,.26);
    background: var(--danger-muted);
    color: var(--danger);
}

    .qbtn--danger:hover {
        transform: translateY(var(--qbtn-lift));
        background: rgba(255,107,122,.24);
        border-color: rgba(255,107,122,.40);
        box-shadow: var(--shadow-sm);
    }

    .qbtn--danger:active {
        transform: translateY(0);
        background: rgba(255,107,122,.18);
    }

    .qbtn--danger:focus-visible {
        box-shadow: var(--ring-danger);
    }

    .qbtn--danger.qbtn--solid {
        border-color: #e85565;
        background: linear-gradient(180deg, #ff7d8a 0%, #f5616f 100%);
        color: #2a0a0e;
        font-weight: 650;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 2px 6px rgba(0,0,0,.35), 0 6px 18px rgba(255,107,122,.28);
    }

        .qbtn--danger.qbtn--solid:hover {
            transform: translateY(var(--qbtn-lift));
            background: linear-gradient(180deg, #ff8b97 0%, #ff6f7d 100%);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 3px 8px rgba(0,0,0,.36), 0 12px 28px rgba(255,107,122,.40);
        }

.qbtn--success {
    border-color: rgba(61,220,151,.26);
    background: var(--success-muted);
    color: var(--success);
}

    .qbtn--success:hover {
        transform: translateY(var(--qbtn-lift));
        background: rgba(61,220,151,.24);
        border-color: rgba(61,220,151,.40);
        box-shadow: var(--shadow-sm);
    }

    .qbtn--success:active {
        transform: translateY(0);
        background: rgba(61,220,151,.18);
    }

    .qbtn--success.qbtn--solid {
        border-color: #2fc585;
        background: linear-gradient(180deg, #54e3a6 0%, #38d492 100%);
        color: #03241a;
        font-weight: 650;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 2px 6px rgba(0,0,0,.35), 0 6px 18px rgba(61,220,151,.26);
    }

        .qbtn--success.qbtn--solid:hover {
            transform: translateY(var(--qbtn-lift));
            background: linear-gradient(180deg, #62e8b0 0%, #45dc9b 100%);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 3px 8px rgba(0,0,0,.36), 0 12px 28px rgba(61,220,151,.38);
        }

.qbtn--warning {
    border-color: rgba(255,180,84,.26);
    background: var(--warning-muted);
    color: var(--warning);
}

    .qbtn--warning:hover {
        transform: translateY(var(--qbtn-lift));
        background: rgba(255,180,84,.24);
        border-color: rgba(255,180,84,.40);
        box-shadow: var(--shadow-sm);
    }

    .qbtn--warning:active {
        transform: translateY(0);
        background: rgba(255,180,84,.18);
    }

    .qbtn--warning.qbtn--solid {
        border-color: #e89c3c;
        background: linear-gradient(180deg, #ffc06f 0%, #f5a942 100%);
        color: #2a1a03;
        font-weight: 650;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 2px 6px rgba(0,0,0,.35), 0 6px 18px rgba(255,180,84,.26);
    }

.qbtn--info {
    border-color: rgba(91,200,255,.26);
    background: var(--info-muted);
    color: var(--info);
}

    .qbtn--info:hover {
        transform: translateY(var(--qbtn-lift));
        background: rgba(91,200,255,.24);
        border-color: rgba(91,200,255,.40);
        box-shadow: var(--shadow-sm);
    }

    .qbtn--info:active {
        transform: translateY(0);
        background: rgba(91,200,255,.18);
    }

    .qbtn--info.qbtn--solid {
        border-color: #3aa9e6;
        background: linear-gradient(180deg, #74d3ff 0%, #4fbdf5 100%);
        color: #03202a;
        font-weight: 650;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 2px 6px rgba(0,0,0,.35), 0 6px 18px rgba(91,200,255,.26);
    }


/* === ICON BUTTON  (square, icon-only; default = neutral) ================== */
.qbtn--icon .qbtn__ico {
    --qbtn-ico: 17px;
}

.qbtn--icon.qbtn--xs .qbtn__ico {
    --qbtn-ico: 14px;
}

.qbtn--icon.qbtn--sm .qbtn__ico {
    --qbtn-ico: 15px;
}

.qbtn--icon.qbtn--lg .qbtn__ico {
    --qbtn-ico: 19px;
}

.qbtn--icon:not(.qbtn--primary):not(.qbtn--invert):not(.qbtn--ghost):not(.qbtn--subtle):not(.qbtn--danger):not(.qbtn--success):not(.qbtn--warning):not(.qbtn--info) {
    border-color: var(--btn-neutral-border);
    background: linear-gradient(180deg, var(--btn-neutral-top) 0%, var(--btn-neutral-bottom) 100%);
    color: var(--text-secondary);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.32);
}

    .qbtn--icon:not(.qbtn--primary):not(.qbtn--invert):not(.qbtn--ghost):not(.qbtn--subtle):not(.qbtn--danger):not(.qbtn--success):not(.qbtn--warning):not(.qbtn--info):hover {
        transform: translateY(var(--qbtn-lift));
        background: linear-gradient(180deg, var(--btn-neutral-top-hover) 0%, var(--btn-neutral-top) 100%);
        border-color: var(--border-strong);
        color: var(--text-primary);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.10), var(--shadow-sm);
    }


/* === STATES =============================================================== */
.qbtn.is-active {
    border-color: rgba(122,127,244,.40);
    background: var(--primary-muted);
    color: var(--primary-bright);
    box-shadow: var(--highlight-top);
}

    .qbtn.is-active:hover {
        background: rgba(122,127,244,.24);
        color: var(--primary-bright);
    }

.qbtn:disabled, .qbtn[disabled], .qbtn.is-disabled {
    cursor: not-allowed;
    opacity: .42;
    box-shadow: none;
    pointer-events: none;
    transform: none;
    filter: grayscale(.2);
}

.qbtn.is-loading {
    cursor: progress;
    pointer-events: none;
    transform: none;
    overflow: hidden;
}

    .qbtn.is-loading::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.45) 50%, transparent 72%);
        background-size: 220% 100%;
        background-repeat: no-repeat;
        animation: qbtn-shimmer 1.15s var(--ease) infinite;
    }

.qbtn--invert.is-loading::after {
    background: linear-gradient(105deg, transparent 28%, rgba(110,122,158,.30) 50%, transparent 72%);
    background-size: 220% 100%;
    background-repeat: no-repeat;
}

@keyframes qbtn-shimmer {
    0% {
        background-position: 170% 0;
    }

    100% {
        background-position: -70% 0;
    }
}


/* === GROUPS =============================================================== */
.qbtn-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.qbtn-segmented {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--seg-border);
    border-radius: var(--radius-md);
    background: var(--seg-bg);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.30);
}

    .qbtn-segmented .qbtn {
        height: 30px;
        padding: 0 14px;
        border-color: transparent;
        background: transparent;
        color: var(--seg-text);
        font-size: var(--font-size-sm);
        box-shadow: none;
        --qbtn-radius: var(--radius-sm);
    }

        .qbtn-segmented .qbtn:hover {
            transform: none;
            background: var(--hover-bg);
            color: var(--text-secondary);
            box-shadow: none;
        }

        .qbtn-segmented .qbtn.is-active {
            background: linear-gradient(180deg, var(--surface-4), var(--surface-3));
            color: var(--seg-text-active);
            box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.07);
        }


/* === RESPONSIVE / A11Y ==================================================== */
@media (max-width: 620px) {
    .qbtn--collapse .qbtn__label {
        display: none;
    }

    .qbtn--collapse {
        width: var(--qbtn-h);
        padding: 0;
        --qbtn-gap: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qbtn {
        transition: background var(--timing-fast) linear, border-color var(--timing-fast) linear, color var(--timing-fast) linear;
    }

        .qbtn:hover, .qbtn:active {
            transform: none;
        }

    .qbtn--primary {
        transition: none;
    }

    .qbtn.is-loading::after {
        animation: none;
    }
}


/* ============================================================================
   6.  FORM CONTROLS
   ----------------------------------------------------------------------------
   Field language: recessed gunmetal wells (--field-bg) on the panel, a fine
   hairline border that BRIGHTENS on hover, and a soft periwinkle focus ring.
   Classes:
     .q-field   wrapper (positioning for icons / affixes)
     .q-input   text inputs / number / email / etc.
     .q-textarea
     .q-search  + .q-search__ico / .q-search__clear
     .q-select  native <select> styled with custom chevron
     .q-label / .q-hint / .q-error
     .q-radio / .q-check   (custom radio + checkbox)
     .q-switch             (animated toggle)
   ============================================================================ */

/* --- Label / hint / error --- */
.q-label {
    display: inline-block;
    margin-bottom: 7px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -.005em;
}

    .q-label .q-req {
        color: var(--danger);
        margin-left: 2px;
    }

.q-hint {
    margin-top: 6px;
    font-size: var(--font-size-xs);
    color: var(--text-faint);
    line-height: var(--lh-snug);
}

.q-error {
    margin-top: 6px;
    font-size: var(--font-size-xs);
    color: var(--danger);
    line-height: var(--lh-snug);
}

/* --- Field wrapper --- */
.q-field {
    position: relative;
    display: block;
}

.q-field--inline {
    display: inline-block;
}

/* --- Text input / textarea base --- */
.q-input, .q-textarea {
    width: 100%;
    height: var(--field-h);
    padding: 0 14px;
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    color: var(--field-text);
    font-family: var(--font);
    font-size: var(--font-size-base);
    line-height: 1.4;
    outline: none;
    transition: background var(--timing) var(--ease), border-color var(--timing) var(--ease), box-shadow var(--timing) var(--ease);
}

.q-textarea {
    height: auto;
    min-height: 96px;
    padding: 11px 14px;
    resize: vertical;
    line-height: var(--lh-base);
}

    .q-input::placeholder, .q-textarea::placeholder {
        color: var(--field-placeholder);
    }

    .q-input:hover, .q-textarea:hover {
        background: var(--field-bg-hover);
        border-color: var(--field-border-hover);
    }

    .q-input:focus, .q-textarea:focus {
        border-color: var(--field-border-focus);
        box-shadow: var(--ring-soft);
        background: var(--field-bg-hover);
    }

    .q-input:disabled, .q-textarea:disabled {
        background: var(--field-bg-disabled);
        color: var(--text-faint);
        cursor: not-allowed;
        opacity: .7;
    }

    .q-input.is-error, .q-textarea.is-error {
        border-color: rgba(255,107,122,.55);
    }

        .q-input.is-error:focus, .q-textarea.is-error:focus {
            box-shadow: 0 0 0 3px rgba(255,107,122,.18);
        }

/* --- Sizes --- */
.q-input--sm {
    height: var(--field-h-sm);
    padding: 0 11px;
    font-size: var(--font-size-sm);
}

.q-input--lg {
    height: var(--field-h-lg);
    padding: 0 16px;
    font-size: var(--font-size-base);
}

/* --- Field with leading icon --- */
.q-field--ico .q-input {
    padding-left: 38px;
}

.q-field__ico {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-faint);
    pointer-events: none;
    transition: color var(--timing-fast) var(--ease);
}

.q-field--ico:focus-within .q-field__ico {
    color: var(--primary);
}

/* --- SEARCH --- */
.q-search {
    position: relative;
    flex: 1 1 200px;
    min-width: 160px;
    max-width: 320px;
}

.q-search__ico {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-faint);
    pointer-events: none;
    transition: color var(--timing-fast) var(--ease);
}

.q-search:focus-within .q-search__ico {
    color: var(--primary);
}

.q-search__input {
    width: 100%;
    height: 36px;
    padding: 0 34px 0 36px;
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    color: var(--field-text);
    font-family: var(--font);
    font-size: var(--font-size-sm);
    outline: none;
    transition: background var(--timing) var(--ease), border-color var(--timing) var(--ease), box-shadow var(--timing) var(--ease);
}

    .q-search__input::placeholder {
        color: var(--field-placeholder);
    }

    .q-search__input:hover {
        background: var(--field-bg-hover);
        border-color: var(--field-border-hover);
    }

    .q-search__input:focus {
        border-color: var(--field-border-focus);
        box-shadow: var(--ring-soft);
    }

.q-search__clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-faint);
    line-height: 0;
    background: none;
    border: none;
    transition: color var(--timing-fast) var(--ease);
}

    .q-search__clear:hover {
        color: var(--danger);
    }

    .q-search__clear svg {
        width: 14px;
        height: 14px;
    }

/* --- NATIVE SELECT (custom chevron) --- */
.q-select {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

    .q-select select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 100%;
        height: var(--field-h);
        padding: 0 36px 0 14px;
        background: var(--field-bg);
        border: 1px solid var(--field-border);
        border-radius: var(--field-radius);
        color: var(--text-secondary);
        font-family: var(--font);
        font-size: var(--font-size-base);
        outline: none;
        cursor: pointer;
        transition: background var(--timing) var(--ease), border-color var(--timing) var(--ease), box-shadow var(--timing) var(--ease);
    }

        .q-select select:hover {
            background: var(--field-bg-hover);
            border-color: var(--field-border-hover);
            color: var(--text-primary);
        }

        .q-select select:focus {
            border-color: var(--field-border-focus);
            box-shadow: var(--ring-soft);
            color: var(--text-primary);
        }

        .q-select select:disabled {
            color: var(--text-faint);
            cursor: not-allowed;
            opacity: .7;
        }

    /* Chevron: a CSS-border caret that is ALWAYS present. It NEVER fades in/out
       and NEVER moves on hover - only its colour transitions - so there is zero
       flicker or layout shift. The rotate(45deg) is a static shape transform,
       not an animation, and is deliberately excluded from the transition. */
    .q-select::after {
        content: "";
        position: absolute;
        right: 14px;
        top: 50%;
        width: 8px;
        height: 8px;
        margin-top: -3px;
        border-right: 1.7px solid var(--text-muted);
        border-bottom: 1.7px solid var(--text-muted);
        border-bottom-right-radius: 1.5px;
        transform: rotate(45deg);
        pointer-events: none;
        transition: border-color var(--timing-fast) var(--ease);
    }

    .q-select:hover::after {
        border-color: var(--text-secondary);
    }

    /* Open / keyboard-focused: caret picks up the periwinkle accent (colour
       only - it stays put). */
    .q-select:focus-within::after {
        border-color: var(--primary-bright);
    }

    /* Disabled: caret dims with the control, never disappears. */
    .q-select:has(select:disabled)::after {
        border-color: var(--text-faint);
        opacity: .7;
    }

.q-select--sm select {
    height: var(--field-h-sm);
    font-size: var(--font-size-sm);
    padding-right: 32px;
}

.q-select--sm::after {
    right: 12px;
}

.q-select--lg select {
    height: var(--field-h-lg);
    font-size: var(--font-size-base);
    padding: 0 40px 0 16px;
}

.q-select--lg::after {
    right: 16px;
    width: 9px;
    height: 9px;
}

/* Error parity with .q-input.is-error */
.q-select.is-error select {
    border-color: rgba(255,107,122,.55);
}

    .q-select.is-error select:focus {
        box-shadow: 0 0 0 3px rgba(255,107,122,.18);
    }

/* Block helper so a select can fill its grid cell like .q-input does */
.q-select--block, .q-select--block select {
    width: 100%;
}


/* === CUSTOM RADIO ========================================================= */
.q-radio {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

    .q-radio input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.q-radio__box {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--field-bg);
    border: 1.6px solid var(--border-strong);
    transition: border-color var(--timing) var(--ease), background var(--timing) var(--ease), box-shadow var(--timing) var(--ease);
}

    .q-radio__box::after {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #fff;
        transform: scale(0);
        transition: transform var(--timing) var(--ease-spring);
    }

.q-radio:hover .q-radio__box {
    border-color: var(--border-interactive);
}

.q-radio input:focus-visible + .q-radio__box {
    box-shadow: var(--ring-soft);
}

.q-radio input:checked + .q-radio__box {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 2px 8px var(--primary-glow);
}

    .q-radio input:checked + .q-radio__box::after {
        transform: scale(1);
    }

.q-radio input:disabled + .q-radio__box {
    opacity: .45;
}

.q-radio input:disabled ~ * {
    opacity: .55;
}


/* === CUSTOM CHECKBOX ====================================================== */
.q-check {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

    .q-check input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.q-check__box {
    position: relative;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: var(--field-bg);
    border: 1.6px solid var(--border-strong);
    transition: border-color var(--timing) var(--ease), background var(--timing) var(--ease), box-shadow var(--timing) var(--ease);
}

    .q-check__box::after {
        content: "";
        position: absolute;
        left: 5px;
        top: 2px;
        width: 5px;
        height: 9px;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg) scale(0);
        transform-origin: center;
        opacity: 0;
        transition: transform var(--timing) var(--ease-spring), opacity var(--timing-fast) var(--ease);
    }

.q-check:hover .q-check__box {
    border-color: var(--border-interactive);
}

.q-check input:focus-visible + .q-check__box {
    box-shadow: var(--ring-soft);
}

.q-check input:checked + .q-check__box {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 2px 8px var(--primary-glow);
}

    .q-check input:checked + .q-check__box::after {
        transform: rotate(45deg) scale(1);
        opacity: 1;
    }

.q-check input:indeterminate + .q-check__box {
    background: var(--primary);
    border-color: var(--primary);
}

    .q-check input:indeterminate + .q-check__box::after {
        left: 4px;
        top: 7px;
        width: 8px;
        height: 0;
        border-right: none;
        border-bottom: 2px solid #fff;
        transform: none;
        opacity: 1;
    }

.q-check input:disabled + .q-check__box {
    opacity: .45;
}

.q-check input:disabled ~ * {
    opacity: .55;
}


/* === ANIMATED SWITCH ====================================================== */
.q-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

    .q-switch input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.q-switch__track {
    position: relative;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: var(--switch-track-off);
    border: 1px solid var(--switch-border-off);
    transition: background var(--timing) var(--ease), border-color var(--timing) var(--ease), box-shadow var(--timing) var(--ease);
}

.q-switch__thumb {
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--switch-thumb);
    box-shadow: 0 1px 3px rgba(0,0,0,.45), 0 1px 1px rgba(0,0,0,.30);
    transition: transform var(--timing) var(--ease-spring), width var(--timing-fast) var(--ease);
}

.q-switch:hover .q-switch__track {
    border-color: var(--border-interactive);
}

.q-switch input:focus-visible + .q-switch__track {
    box-shadow: var(--ring-soft);
}

.q-switch:active .q-switch__thumb {
    width: 21px;
}

.q-switch input:checked + .q-switch__track {
    background: var(--switch-track-on);
    border-color: var(--switch-track-on);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.18), 0 2px 10px var(--primary-glow);
}

    .q-switch input:checked + .q-switch__track .q-switch__thumb {
        transform: translateY(-50%) translateX(18px);
    }

.q-switch input:disabled + .q-switch__track {
    opacity: .45;
}

.q-switch input:disabled ~ * {
    opacity: .55;
}

/* Switch sizes */
.q-switch--sm .q-switch__track {
    width: 34px;
    height: 20px;
}

.q-switch--sm .q-switch__thumb {
    width: 14px;
    height: 14px;
}

.q-switch--sm input:checked + .q-switch__track .q-switch__thumb {
    transform: translateY(-50%) translateX(14px);
}

.q-switch--lg .q-switch__track {
    width: 52px;
    height: 30px;
}

.q-switch--lg .q-switch__thumb {
    width: 24px;
    height: 24px;
}

.q-switch--lg input:checked + .q-switch__track .q-switch__thumb {
    transform: translateY(-50%) translateX(22px);
}


/* ============================================================================
   7.  CONTAINERS   .   PANELS / CARDS / BARS
   ----------------------------------------------------------------------------
   "Panel" = any content-holder box (the #1c232d boxes on the black ground in
   the reference). Solid stepped material, top edge-light hairline, layered
   shadow so it floats. Hover variant BRIGHTENS + lifts.
   Classes:
     .q-panel         the standard content container (charts, records, filters)
     .q-panel--hover  add lift+brighten interaction (for clickable panels)
     .q-panel--flush  no padding (panel manages its own inner spacing)
     .q-panel__head / __title / __sub / __actions / __body / __foot
     .q-card          lighter, smaller radius sub-container used INSIDE a panel
     .q-tile          pastel "spotlight" stat tile (mint/pink/lavender)
     .q-bar           horizontal toolbar / command bar surface
     .q-divider       hairline rule
   ============================================================================ */

.q-panel {
    position: relative;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--panel-radius);
    box-shadow: var(--highlight-top), var(--panel-shadow);
    padding: 22px 24px;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.q-panel--flush {
    padding: 0;
}

.q-panel--tight {
    padding: 16px 18px;
}

.q-panel--tint {
    background: color-mix(in srgb, var(--surface-tint) 64%, transparent);
}

.q-panel--solid {
    background: var(--surface-3);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.q-panel--hover {
    cursor: pointer;
    transition: transform var(--timing) var(--ease-out), background var(--timing) var(--ease), border-color var(--timing) var(--ease), box-shadow var(--timing) var(--ease);
}

    .q-panel--hover:hover {
        transform: translateY(-2px);
        background: var(--panel-bg-hover);
        border-color: var(--panel-border-hover);
        box-shadow: var(--highlight-top-strong), var(--shadow-md);
    }

/* Panel header */
.q-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.q-panel__head--divided {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--panel-head-divider);
}

.q-panel__title {
    font-size: var(--font-size-lg);
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--text-primary);
}

.q-panel__sub {
    margin-top: 4px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: var(--lh-snug);
}

.q-panel__actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.q-panel__body {
    color: var(--text-secondary);
}

.q-panel__foot {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--panel-head-divider);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* Card = lighter sub-container inside a panel (translucent; sits on panel glass) */
.q-card {
    background: var(--card-bg);
    border: 1px solid var(--glass-edge);
    border-radius: var(--card-radius);
    padding: 16px 18px;
    box-shadow: var(--highlight-top);
}

.q-card--inset {
    background: var(--surface-0);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.30);
}

/* Pastel spotlight tile (hero stats only) */
.q-tile {
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    color: var(--tile-ink);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.5);
    position: relative;
    overflow: hidden;
}

.q-tile--mint {
    background: var(--tile-mint);
}

.q-tile--pink {
    background: var(--tile-pink);
}

.q-tile--lav {
    background: var(--tile-lav);
}

.q-tile__label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    opacity: .68;
    letter-spacing: -.005em;
}

.q-tile__value {
    font-size: var(--font-size-display);
    font-weight: 700;
    letter-spacing: -.03em;
    margin-top: 6px;
    line-height: 1;
}

.q-tile__foot {
    font-size: var(--font-size-xs);
    opacity: .6;
    margin-top: 8px;
}

/* Horizontal bar / command surface */
.q-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--bar-bg);
    border: 1px solid var(--bar-border);
    border-radius: var(--bar-radius);
    box-shadow: var(--highlight-top), var(--shadow-sm);
    padding: 12px 14px;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* Divider */
.q-divider {
    height: 1px;
    border: none;
    background: var(--border-subtle);
    margin: 18px 0;
}

.q-divider--strong {
    background: var(--border-default);
}

.q-divider--vert {
    width: 1px;
    height: auto;
    align-self: stretch;
    margin: 0 4px;
}


/* ============================================================================
   8.  PILLS / CHIPS / BADGES / STATUS DOTS
   ----------------------------------------------------------------------------
   .q-pill    rounded label, semantic colour variants
   .q-chip    interactive filter / tag chip (can be removable / selectable)
   .q-badge   micro uppercase tag (e.g. plan tier, "AI")
   .q-dot     status dot (+ pulsing variant)
   ============================================================================ */

.q-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--pill-bg);
    border: 1px solid var(--pill-border);
    color: var(--pill-text);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1;
}

    .q-pill .ico, .q-pill svg {
        width: 13px;
        height: 13px;
    }

.q-pill--success {
    background: var(--success-subtle);
    border-color: rgba(61,220,151,.25);
    color: var(--success);
}

.q-pill--danger {
    background: var(--danger-subtle);
    border-color: rgba(255,107,122,.25);
    color: var(--danger);
}

.q-pill--warning {
    background: var(--warning-subtle);
    border-color: rgba(255,180,84,.25);
    color: var(--warning);
}

.q-pill--info {
    background: var(--info-subtle);
    border-color: rgba(91,200,255,.25);
    color: var(--info);
}

.q-pill--primary {
    background: var(--primary-subtle);
    border-color: rgba(122,127,244,.25);
    color: var(--primary-bright);
}

.q-pill--accent {
    background: var(--accent-subtle);
    border-color: rgba(52,227,212,.25);
    color: var(--accent);
}

.q-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--chip-bg);
    border: 1px solid var(--chip-border);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: background var(--timing-fast) var(--ease), border-color var(--timing-fast) var(--ease), color var(--timing-fast) var(--ease), transform var(--timing-fast) var(--ease-out);
}

    .q-chip:hover {
        background: var(--hover-bg-strong);
        border-color: var(--border-strong);
        color: var(--text-primary);
    }

    .q-chip.is-active {
        background: var(--primary-muted);
        border-color: rgba(122,127,244,.40);
        color: var(--primary-bright);
    }

.q-chip__x {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-right: -4px;
    border-radius: 50%;
    color: var(--text-faint);
}

    .q-chip__x:hover {
        color: var(--danger);
        background: var(--danger-subtle);
    }

    .q-chip__x svg {
        width: 10px;
        height: 10px;
    }

.q-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: var(--font-size-xxs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    color: var(--text-muted);
    line-height: 1.3;
}

.q-badge--primary {
    background: var(--primary-subtle);
    border-color: rgba(122,127,244,.30);
    color: var(--primary-bright);
}

.q-badge--accent {
    background: var(--accent-subtle);
    border-color: rgba(52,227,212,.30);
    color: var(--accent);
}

.q-badge--success {
    background: var(--success-subtle);
    border-color: rgba(61,220,151,.30);
    color: var(--success);
}

.q-badge--danger {
    background: var(--danger-subtle);
    border-color: rgba(255,107,122,.30);
    color: var(--danger);
}

.q-badge--warning {
    background: var(--warning-subtle);
    border-color: rgba(255,180,84,.30);
    color: var(--warning);
}

/* Notification count badge (small filled dot with number) */
.q-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-family: var(--font-mono);
    font-size: var(--font-size-xxs);
    font-weight: 700;
    line-height: 1;
}

/* Status dot */
.q-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-faint);
    flex-shrink: 0;
}

.q-dot--success {
    background: var(--success);
    box-shadow: 0 0 0 3px var(--success-subtle);
}

.q-dot--danger {
    background: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-subtle);
}

.q-dot--warning {
    background: var(--warning);
    box-shadow: 0 0 0 3px var(--warning-subtle);
}

.q-dot--info {
    background: var(--info);
    box-shadow: 0 0 0 3px var(--info-subtle);
}

.q-dot--pulse {
    animation: q-dot-pulse 1.8s var(--ease) infinite;
}

@keyframes q-dot-pulse {
    0%,100% {
        opacity: 1;
    }

    50% {
        opacity: .35;
    }
}


/* ============================================================================
   9.  MODAL  /  MESSAGE BOX
   ----------------------------------------------------------------------------
   .q-modal-overlay        full-screen scrim (blurred). Add .open to show.
   .q-modal                the dialog surface (size with --sm/--lg or width)
   .q-modal__head / __title / __desc / __close
   .q-modal__body / __field / __foot
   .q-modal--message       compact confirm / message box (icon + copy + actions)
     +.q-modal--danger / --success / --warning / --info  (icon accent)
   ============================================================================ */

.q-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--modal-overlay);
    -webkit-backdrop-filter: blur(var(--modal-blur));
    backdrop-filter: blur(var(--modal-blur));
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--timing-slow) var(--ease-out);
}

    .q-modal-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

.q-modal {
    width: min(480px, 100%);
    background: var(--modal-bg);
    border: 1px solid var(--modal-border);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    overflow: hidden;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    transform: translateY(12px) scale(.97);
    transition: transform var(--timing-slow) var(--ease-spring), opacity var(--timing) var(--ease);
}

.q-modal-overlay.open .q-modal {
    transform: none;
}

.q-modal--sm {
    width: min(400px, 100%);
}

.q-modal--lg {
    width: min(720px, 100%);
}

.q-modal--xl {
    width: min(960px, 100%);
}

/* --mid (form/metadata dialogs) and --wide (editor/builder dialogs) fill out the
   size ladder: sm 400 / mid 620 / lg 720 / wide 860 / xl 960. The 24px overlay
   padding keeps margins on small screens, so width:min(Npx,100%) is correct. */
.q-modal--mid {
    width: min(620px, 100%);
}

.q-modal--wide {
    width: min(860px, 100%);
}

.q-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--modal-divider);
}

.q-modal__title {
    font-size: var(--font-size-lg);
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--modal-title);
}

.q-modal__desc {
    margin-top: 5px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: var(--lh-base);
}

.q-modal__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    color: var(--text-faint);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background var(--timing-fast) var(--ease), color var(--timing-fast) var(--ease);
}

    .q-modal__close:hover {
        background: var(--hover-bg-strong);
        color: var(--text-primary);
    }

    .q-modal__close svg {
        width: 16px;
        height: 16px;
    }

.q-modal__body {
    padding: 20px 24px;
    color: var(--modal-body-text);
    font-size: var(--font-size-sm);
    line-height: var(--lh-base);
}

.q-modal__body--scroll {
    max-height: min(56vh, 520px);
    overflow-y: auto;
}

.q-modal__field {
    background: var(--modal-bg-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .q-modal__field + .q-modal__field {
        margin-top: 10px;
    }

    .q-modal__field .mono, .q-modal__field .q-num {
        color: var(--text-primary);
    }

.q-modal__foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 22px;
    border-top: 1px solid var(--modal-divider);
}

/* Message-box variant (icon + copy, like a confirm dialog) */
.q-modal--message .q-modal__body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-top: 24px;
}

.q-modal__msg-ico {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--primary-subtle);
    color: var(--primary-bright);
}

    .q-modal__msg-ico svg {
        width: 22px;
        height: 22px;
    }

.q-modal--danger .q-modal__msg-ico {
    background: var(--danger-subtle);
    color: var(--danger);
}

.q-modal--success .q-modal__msg-ico {
    background: var(--success-subtle);
    color: var(--success);
}

.q-modal--warning .q-modal__msg-ico {
    background: var(--warning-subtle);
    color: var(--warning);
}

.q-modal--info .q-modal__msg-ico {
    background: var(--info-subtle);
    color: var(--info);
}

.q-modal__msg-body {
    flex: 1;
    min-width: 0;
}

.q-modal__msg-title {
    font-size: var(--font-size-lg);
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--text-primary);
}

.q-modal__msg-text {
    margin-top: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: var(--lh-base);
}


/* ============================================================================
   10.  TOAST  NOTIFICATIONS
   ----------------------------------------------------------------------------
   .q-toast-stack  fixed container (top-right by default)
   .q-toast        single toast (+ --success/--error/--warning/--info)
   .q-toast__ico / __body / __title / __msg / __close
   ============================================================================ */

.q-toast-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 360px;
    max-width: calc(100vw - 40px);
}

.q-toast {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 14px 14px 16px;
    background: var(--toast-bg);
    border: 1px solid var(--toast-border);
    border-radius: var(--toast-radius);
    box-shadow: var(--highlight-top), var(--toast-shadow);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    animation: q-toast-in var(--timing-slow) var(--ease-out) both;
}

    .q-toast::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
    }

.q-toast__ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
}

    .q-toast__ico svg {
        width: 18px;
        height: 18px;
    }

.q-toast__body {
    flex: 1;
    min-width: 0;
    padding-top: 1px;
}

.q-toast__title {
    font-size: var(--font-size-sm);
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--toast-text);
}

.q-toast__msg {
    margin-top: 3px;
    font-size: var(--font-size-xs);
    color: var(--toast-text-muted);
    line-height: var(--lh-base);
}

.q-toast__close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    color: var(--text-faint);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background var(--timing-fast) var(--ease), color var(--timing-fast) var(--ease);
}

    .q-toast__close:hover {
        background: var(--hover-bg-strong);
        color: var(--text-secondary);
    }

    .q-toast__close svg {
        width: 14px;
        height: 14px;
    }

.q-toast--success::before {
    background: var(--toast-success);
}

.q-toast--success .q-toast__ico {
    background: var(--toast-success-bg);
    color: var(--toast-success);
}

.q-toast--error::before {
    background: var(--toast-error);
}

.q-toast--error .q-toast__ico {
    background: var(--toast-error-bg);
    color: var(--toast-error);
}

.q-toast--warning::before {
    background: var(--toast-warning);
}

.q-toast--warning .q-toast__ico {
    background: var(--toast-warning-bg);
    color: var(--toast-warning);
}

.q-toast--info::before {
    background: var(--toast-info);
}

.q-toast--info .q-toast__ico {
    background: var(--toast-info-bg);
    color: var(--toast-info);
}

.q-toast.is-leaving {
    animation: q-toast-out var(--timing) var(--ease) forwards;
}

@keyframes q-toast-in {
    from {
        opacity: 0;
        transform: translateX(24px) scale(.96);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes q-toast-out {
    to {
        opacity: 0;
        transform: translateX(24px) scale(.96);
    }
}


/* ============================================================================
   11.  INLINE NOTE / BANNER
   ----------------------------------------------------------------------------
   .q-note   (+ --success/--danger/--warning/--info)
   ============================================================================ */
.q-note {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border-radius: var(--note-radius);
    background: var(--note-bg);
    border: 1px solid var(--note-border);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--lh-base);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.q-note__ico {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    margin-top: 1px;
}

.q-note--success {
    background: var(--success-subtle);
    border-color: rgba(61,220,151,.22);
}

    .q-note--success .q-note__ico {
        color: var(--success);
    }

.q-note--danger {
    background: var(--danger-subtle);
    border-color: rgba(255,107,122,.22);
}

    .q-note--danger .q-note__ico {
        color: var(--danger);
    }

.q-note--warning {
    background: var(--warning-subtle);
    border-color: rgba(255,180,84,.22);
}

    .q-note--warning .q-note__ico {
        color: var(--warning);
    }

.q-note--info {
    background: var(--info-subtle);
    border-color: rgba(91,200,255,.22);
}

    .q-note--info .q-note__ico {
        color: var(--info);
    }

.q-note--primary {
    background: var(--primary-subtle);
    border-color: rgba(122,127,244,.22);
}

    .q-note--primary .q-note__ico {
        color: var(--primary);
    }

.q-note--accent {
    background: var(--accent-subtle);
    border-color: rgba(52,227,212,.22);
}

    .q-note--accent .q-note__ico {
        color: var(--accent);
    }


/* ============================================================================
   12.  MENU  /  POPOVER
   ----------------------------------------------------------------------------
   .q-menu        floating surface. Add .show to reveal.
   .q-menu__item  row (+ .is-active, .q-menu__item--danger)
   .q-menu__sep   divider .  .q-menu__head  group label
   ============================================================================ */
.q-menu {
    position: absolute;
    z-index: var(--z-menu);
    min-width: 200px;
    background: var(--menu-bg);
    border: 1px solid var(--menu-border);
    border-radius: var(--menu-radius);
    box-shadow: var(--highlight-top), var(--menu-shadow);
    padding: 6px;
    overflow: hidden;
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    opacity: 0;
    transform: translateY(-4px) scale(.97);
    pointer-events: none;
    transition: opacity var(--timing) var(--ease-out), transform var(--timing) var(--ease-out);
}

    .q-menu.show {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

.q-menu__head {
    padding: 8px 10px 4px;
    font-size: var(--font-size-xxs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.q-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    transition: background var(--timing-fast) var(--ease), color var(--timing-fast) var(--ease);
}

    .q-menu__item:hover {
        background: var(--menu-item-hover);
        color: var(--text-primary);
    }

    .q-menu__item.is-active {
        background: var(--menu-item-active);
        color: var(--primary-bright);
    }

    .q-menu__item svg, .q-menu__item .ico {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
        opacity: .8;
    }

.q-menu__item--danger {
    color: var(--danger);
}

    .q-menu__item--danger:hover {
        background: var(--danger-subtle);
        color: var(--danger);
    }

.q-menu__sep {
    height: 1px;
    background: var(--border-subtle);
    margin: 6px 4px;
}


/* ============================================================================
   13.  TOOLTIP   (CSS-only; add .q-tip with data-tip to any element)
   ============================================================================ */
.q-tip {
    position: relative;
}

    .q-tip::after {
        content: attr(data-tip);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%) translateY(4px);
        white-space: nowrap;
        padding: 6px 10px;
        border-radius: var(--tooltip-radius);
        background: var(--tooltip-bg);
        color: var(--tooltip-text);
        border: 1px solid var(--tooltip-border);
        font-size: var(--font-size-xs);
        font-weight: 500;
        box-shadow: var(--shadow-md);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--timing-fast) var(--ease), transform var(--timing-fast) var(--ease-out);
        z-index: var(--z-toast);
    }

    .q-tip:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }


/* ============================================================================
   14.  TABLE
   ----------------------------------------------------------------------------
   .q-table  base; wrap in .q-table-wrap for rounded border + overflow.
   ============================================================================ */
.q-table-wrap {
    background: var(--glass-panel);
    border: 1px solid var(--glass-edge);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--highlight-top), var(--shadow-lg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

.q-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

    .q-table thead th {
        background: var(--table-head-bg);
        color: var(--table-head-text);
        font-weight: 600;
        font-size: var(--font-size-xs);
        letter-spacing: .04em;
        text-transform: uppercase;
        text-align: left;
        padding: 11px 16px;
        border-bottom: 1px solid var(--table-border);
        white-space: nowrap;
    }

    .q-table tbody td {
        padding: 12px 16px;
        color: var(--table-cell-text);
        border-bottom: 1px solid var(--table-border);
    }

    .q-table tbody tr:last-child td {
        border-bottom: none;
    }

    .q-table tbody tr {
        background: var(--table-row-bg);
        transition: background var(--timing-fast) var(--ease);
    }

        .q-table tbody tr:hover {
            background: var(--table-row-hover);
        }

.q-table--striped tbody tr:nth-child(even) {
    background: var(--table-row-bg-alt);
}

.q-table .q-num, .q-table td[data-num] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}


/* ============================================================================
   15.  LINKS
   ============================================================================ */
.q-link {
    color: var(--primary-bright);
    text-decoration: none;
    transition: color var(--timing-fast) var(--ease);
}

    .q-link:hover {
        color: var(--accent-bright);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

.q-link--muted {
    color: var(--text-muted);
}

    .q-link--muted:hover {
        color: var(--text-primary);
        text-decoration: none;
    }

.q-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--primary-bright);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

    .q-link-arrow svg {
        width: 14px;
        height: 14px;
        transition: transform var(--timing-fast) var(--ease-out);
    }

    .q-link-arrow:hover svg {
        transform: translateX(3px);
    }


/* ============================================================================
   16.  SCROLLBARS   (opt-in: add .q-scroll to a scroll container)
   ============================================================================ */
.q-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) transparent;
}

    .q-scroll::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .q-scroll::-webkit-scrollbar-track {
        background: var(--scroll-track);
    }

    .q-scroll::-webkit-scrollbar-thumb {
        background: var(--scroll-thumb);
        border-radius: 999px;
    }

        .q-scroll::-webkit-scrollbar-thumb:hover {
            background: var(--scroll-thumb-hover);
        }


/* ============================================================================
   17.  SKELETON  (loading placeholder)
   ============================================================================ */
.q-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--surface-1);
}

    .q-skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.05) 50%, transparent 80%);
        background-size: 200% 100%;
        animation: q-skeleton 1.4s var(--ease) infinite;
    }

.q-skeleton--text {
    height: .8em;
    margin: .25em 0;
}

.q-skeleton--line {
    height: 12px;
}

@keyframes q-skeleton {
    0% {
        background-position: 180% 0;
    }

    100% {
        background-position: -80% 0;
    }
}


/* ============================================================================
   18.  PROGRESS  (linear track + aurora fill)
   ============================================================================ */
.q-progress {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--chart-track);
    overflow: hidden;
}

.q-progress__bar {
    height: 100%;
    border-radius: 999px;
    background: var(--primary);
    transition: width var(--timing-slow) var(--ease-out);
}

.q-progress--aurora .q-progress__bar {
    background: var(--aurora-band);
}

.q-progress--success .q-progress__bar {
    background: var(--success);
}

.q-progress--warning .q-progress__bar {
    background: var(--warning);
}

.q-progress--danger .q-progress__bar {
    background: var(--danger);
}


/* ============================================================================
   19.  AVATAR
   ============================================================================ */
.q-avatar {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: linear-gradient(145deg, var(--primary), var(--accent));
    color: #fff;
    font-weight: 700;
    font-size: var(--font-size-xs);
    letter-spacing: .02em;
    box-shadow: 0 2px 10px var(--primary-glow);
}

.q-avatar--sm {
    width: 28px;
    height: 28px;
    font-size: var(--font-size-xxs);
}

.q-avatar--lg {
    width: 44px;
    height: 44px;
    font-size: var(--font-size-base);
}

.q-avatar--circle {
    border-radius: 50%;
}


/* ============================================================================
   20.  UTILITIES   (minimal, namespaced - layout helpers only)
   ============================================================================ */
.q-hidden {
    display: none !important;
}

.q-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.q-flex {
    display: flex;
}

.q-flex-col {
    display: flex;
    flex-direction: column;
}

.q-items-center {
    align-items: center;
}

.q-justify-between {
    justify-content: space-between;
}

.q-gap-xs {
    gap: 6px;
}

.q-gap-sm {
    gap: 10px;
}

.q-gap-md {
    gap: 16px;
}

.q-gap-lg {
    gap: 24px;
}

.q-grow {
    flex: 1 1 auto;
    min-width: 0;
}

.q-mt-sm {
    margin-top: 10px;
}

.q-mt-md {
    margin-top: 18px;
}

.q-mt-lg {
    margin-top: 28px;
}

.q-no-scroll {
    overflow: hidden;
}


/* ============================================================================
   21.  FIELD EXTRAS  -  autofill, number spinner, affixes, textarea variants
   ----------------------------------------------------------------------------
   Polish for the section-6 form atoms. Nothing here overrides a base control;
   it only adds optional modifiers + the critical autofill fix so browser-filled
   fields keep the Aurora Noir look.
   ============================================================================ */

/* Autofill: Chrome/Safari paint a pale well on autofilled fields. Mask it with
   an inset shadow the size of the field + keep the text cool-white. */
.theme-dark .q-input:-webkit-autofill,
.theme-dark .q-input:-webkit-autofill:hover,
.theme-dark .q-input:-webkit-autofill:focus,
.theme-dark .q-search__input:-webkit-autofill,
.theme-dark .q-select select:-webkit-autofill {
    -webkit-text-fill-color: var(--field-text);
    caret-color: var(--field-text);
    -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset;
    box-shadow: 0 0 0 1000px var(--field-bg) inset;
    transition: background-color 9999s ease 0s;
}

/* Number inputs: hide native steppers (use .q-stepper below, or none). Opt the
   native arrows back in with .q-input--spin. */
.q-input[type="number"]::-webkit-outer-spin-button,
.q-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.q-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.q-input--spin[type="number"]::-webkit-outer-spin-button,
.q-input--spin[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: auto;
}

/* Affix: a static unit/symbol fused to a field ($, %, min, /mo). */
.q-field--affix {
    display: flex;
    align-items: stretch;
}

.q-field__affix {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background: var(--surface-1);
    border: 1px solid var(--field-border);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
}

.q-field--affix .q-field__affix:first-child {
    border-right: none;
    border-radius: var(--field-radius) 0 0 var(--field-radius);
}

.q-field--affix .q-field__affix:last-child {
    border-left: none;
    border-radius: 0 var(--field-radius) var(--field-radius) 0;
}

.q-field--affix .q-input {
    border-radius: 0;
}

    .q-field--affix .q-input:first-child {
        border-radius: var(--field-radius) 0 0 var(--field-radius);
    }

    .q-field--affix .q-input:last-child {
        border-radius: 0 var(--field-radius) var(--field-radius) 0;
    }

/* Trailing control inside a field (reveal password, clear, inline action). */
.q-field--trail {
    position: relative;
}

    .q-field--trail .q-input {
        padding-right: 40px;
    }

.q-field__trail {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-xs);
    color: var(--text-faint);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background var(--timing-fast) var(--ease), color var(--timing-fast) var(--ease);
}

    .q-field__trail:hover {
        background: var(--hover-bg-strong);
        color: var(--text-secondary);
    }

    .q-field__trail svg {
        width: 16px;
        height: 16px;
    }

/* Textarea variants + a small character counter row. */
.q-textarea--fixed {
    resize: none;
}

.q-textarea--code {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.q-field__count {
    margin-top: 6px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--font-size-xxs);
    color: var(--text-faint);
}

    .q-field__count.is-over {
        color: var(--danger);
    }


/* ============================================================================
   22.  NUMBER STEPPER  -  minus [ value ] plus   (custom, themed)
   ============================================================================ */
.q-stepper {
    display: inline-flex;
    align-items: stretch;
    height: var(--field-h);
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    background: var(--field-bg);
    overflow: hidden;
    transition: border-color var(--timing) var(--ease), box-shadow var(--timing) var(--ease);
}

    .q-stepper:focus-within {
        border-color: var(--field-border-focus);
        box-shadow: var(--ring-soft);
    }

.q-stepper__btn {
    flex: 0 0 auto;
    width: 38px;
    display: grid;
    place-items: center;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: background var(--timing-fast) var(--ease), color var(--timing-fast) var(--ease);
}

    .q-stepper__btn:hover {
        background: var(--hover-bg-strong);
        color: var(--text-primary);
    }

    .q-stepper__btn:active {
        background: var(--active-bg);
    }

    .q-stepper__btn:disabled {
        color: var(--text-faint);
        cursor: not-allowed;
        background: transparent;
    }

    .q-stepper__btn svg {
        width: 15px;
        height: 15px;
    }

.q-stepper__input {
    width: 56px;
    border: none;
    border-left: 1px solid var(--field-border);
    border-right: 1px solid var(--field-border);
    background: transparent;
    color: var(--field-text);
    text-align: center;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-base);
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

    .q-stepper__input::-webkit-outer-spin-button,
    .q-stepper__input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.q-stepper--sm {
    height: var(--field-h-sm);
}

    .q-stepper--sm .q-stepper__btn {
        width: 32px;
    }

    .q-stepper--sm .q-stepper__input {
        width: 46px;
        font-size: var(--font-size-sm);
    }


/* ============================================================================
   23.  SELECTABLE CARDS  -  radio / checkbox rendered as a pickable tile
   ----------------------------------------------------------------------------
   Wrap a hidden native input in .q-option-card. The card highlights when its
   input is checked (via :has, with an .is-checked class hook for JS-driven
   pages). For plan pickers, appointment-type pickers, settings.
   ============================================================================ */
.q-option-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    cursor: pointer;
    transition: border-color var(--timing) var(--ease), background var(--timing) var(--ease), box-shadow var(--timing) var(--ease), transform var(--timing-fast) var(--ease-out);
}

    .q-option-card:hover {
        border-color: var(--border-interactive);
        background: var(--hover-bg);
    }

    .q-option-card > input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.q-option-card__body {
    flex: 1;
    min-width: 0;
}

.q-option-card__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.q-option-card__desc {
    margin-top: 3px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    line-height: var(--lh-snug);
}

.q-option-card__mark {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.6px solid var(--border-strong);
    background: var(--field-bg);
    display: grid;
    place-items: center;
    transition: border-color var(--timing) var(--ease), background var(--timing) var(--ease), box-shadow var(--timing) var(--ease);
}

.q-option-card--check .q-option-card__mark {
    border-radius: 6px;
}

.q-option-card__mark svg {
    width: 11px;
    height: 11px;
    color: #fff;
    opacity: 0;
    transform: scale(.4);
    transition: opacity var(--timing-fast) var(--ease), transform var(--timing) var(--ease-spring);
}

.q-option-card:has(> input:checked),
.q-option-card.is-checked {
    border-color: var(--primary);
    background: var(--primary-muted);
    box-shadow: var(--ring-soft);
}

    .q-option-card:has(> input:checked) .q-option-card__mark,
    .q-option-card.is-checked .q-option-card__mark {
        border-color: var(--primary);
        background: var(--primary);
        box-shadow: 0 2px 8px var(--primary-glow);
    }

        .q-option-card:has(> input:checked) .q-option-card__mark svg,
        .q-option-card.is-checked .q-option-card__mark svg {
            opacity: 1;
            transform: scale(1);
        }

.q-option-card:has(> input:focus-visible),
.q-option-card.is-focus {
    box-shadow: var(--ring);
}

.q-option-card:has(> input:disabled),
.q-option-card.is-disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}


/* ============================================================================
   24.  KBD  -  keyboard key cap
   ============================================================================ */
.q-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border-default);
    box-shadow: 0 1px 0 var(--border-strong), inset 0 1px 0 rgba(255,255,255,.05);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--font-size-xxs);
    font-weight: 600;
    line-height: 1;
}


/* ============================================================================
   25.  LABELLED DIVIDER  -  hairline -- text -- hairline  (e.g. "OR")
   ============================================================================ */
.q-divider-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0;
    color: var(--text-faint);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

    .q-divider-label::before,
    .q-divider-label::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--border-subtle);
    }


/* ============================================================================
   26.  TAG INPUT  -  inline removable chips + a borderless entry field
   ----------------------------------------------------------------------------
   A wrapper that reads as one field. Drop .q-chip items inside, then a bare
   input. The whole wrapper takes the focus ring.
   ============================================================================ */
.q-chips-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: var(--field-h);
    padding: 5px 8px;
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--field-radius);
    cursor: text;
    transition: border-color var(--timing) var(--ease), box-shadow var(--timing) var(--ease);
}

    .q-chips-input:focus-within {
        border-color: var(--field-border-focus);
        box-shadow: var(--ring-soft);
    }

    .q-chips-input .q-chip {
        height: 24px;
        font-size: var(--font-size-xs);
        cursor: default;
    }

.q-chips-input__field {
    flex: 1 1 80px;
    min-width: 80px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--field-text);
    font-family: var(--font);
    font-size: var(--font-size-sm);
    outline: none;
}

    .q-chips-input__field::placeholder {
        color: var(--field-placeholder);
    }


/* ============================================================================
   27.  DRAWER  -  side panel (right by default; --left variant)
   ----------------------------------------------------------------------------
   Consumes the --drawer-* tokens from section 2.15. The scrim blurs lightly;
   the panel is SOLID (#161b23) so dense content stays crisp. Add .open to the
   overlay to reveal. Open/close behaviour is wired per-page (each page composes
   its own close + submit + multi-overlay logic).
   .q-drawer-overlay > .q-drawer
     .q-drawer__head / __title / __desc / __close
     .q-drawer__body (scrolls)  .q-drawer__foot (sticky)
   ============================================================================ */
.q-drawer-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-drawer);
    display: flex;
    justify-content: flex-end;
    background: var(--drawer-overlay);
    -webkit-backdrop-filter: blur(var(--drawer-blur));
    backdrop-filter: blur(var(--drawer-blur));
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--timing-slow) var(--ease-out);
}

    .q-drawer-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

.q-drawer-overlay--left {
    justify-content: flex-start;
}

.q-drawer {
    position: relative;
    display: flex;
    flex-direction: column;
    width: var(--drawer-width);
    max-width: 100%;
    height: 100%;
    background: var(--drawer-bg);
    border-left: 1px solid var(--drawer-border);
    box-shadow: var(--drawer-shadow);
    transform: translateX(24px);
    transition: transform var(--timing-slow) var(--ease-out);
}

.q-drawer-overlay.open .q-drawer {
    transform: none;
}

.q-drawer-overlay--left .q-drawer {
    border-left: none;
    border-right: 1px solid var(--drawer-border);
    transform: translateX(-24px);
}

.q-drawer--sm {
    --drawer-width: min(92vw, 380px);
}

.q-drawer--lg {
    --drawer-width: min(94vw, 600px);
}

.q-drawer--xl {
    --drawer-width: min(96vw, 760px);
}

.q-drawer__head {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px 15px;
    background: var(--drawer-sticky-bg);
    border-bottom: 1px solid var(--drawer-divider);
}

.q-drawer__title {
    font-size: var(--font-size-lg);
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--text-primary);
}

.q-drawer__desc {
    margin-top: 4px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: var(--lh-snug);
}

.q-drawer__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    color: var(--text-faint);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background var(--timing-fast) var(--ease), color var(--timing-fast) var(--ease);
}

    .q-drawer__close:hover {
        background: var(--hover-bg-strong);
        color: var(--text-primary);
    }

    .q-drawer__close svg {
        width: 17px;
        height: 17px;
    }

.q-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px 20px;
    color: var(--text-secondary);
}

.q-drawer__foot {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    background: var(--drawer-sticky-bg);
    border-top: 1px solid var(--drawer-divider);
}


/* ============================================================================
   28.  TABS  -  underline (default) + --pill variant
   ----------------------------------------------------------------------------
   .q-tabs > .q-tab (button/a) [+ .is-active]
   Overflow scrolls horizontally; the active marker is colour, never layout, so
   switching tabs never shifts the row.
   ============================================================================ */
.q-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    border-bottom: 1px solid var(--border-subtle);
    overflow-x: auto;
    scrollbar-width: none;
}

    .q-tabs::-webkit-scrollbar {
        display: none;
    }

.q-tab {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    margin-bottom: -1px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--timing-fast) var(--ease), border-color var(--timing-fast) var(--ease), background var(--timing-fast) var(--ease);
}

    .q-tab:hover {
        color: var(--text-secondary);
    }

    .q-tab.is-active {
        color: var(--text-primary);
        border-bottom-color: var(--primary);
    }

    .q-tab svg, .q-tab .ico {
        width: 15px;
        height: 15px;
    }

    .q-tab .q-count, .q-tab .q-badge {
        margin-left: 2px;
    }

/* Pill tabs - a self-contained segmented-style group (no bottom rule). */
.q-tabs--pill {
    gap: 4px;
    border-bottom: none;
    padding: 4px;
    background: var(--surface-1);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    display: inline-flex;
}

    .q-tabs--pill .q-tab {
        padding: 7px 14px;
        margin-bottom: 0;
        border-bottom: none;
        border-radius: var(--radius-sm);
    }

        .q-tabs--pill .q-tab:hover {
            background: var(--hover-bg);
        }

        .q-tabs--pill .q-tab.is-active {
            background: var(--primary-muted);
            color: var(--primary-bright);
        }


/* ============================================================================
   29.  BREADCRUMB
   ----------------------------------------------------------------------------
   .q-breadcrumb > a.q-breadcrumb__link ... <span class="q-breadcrumb__sep">/</span>
   ... <span class="q-breadcrumb__current">Page</span>
   ============================================================================ */
.q-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.q-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    transition: color var(--timing-fast) var(--ease);
}

    .q-breadcrumb__link:hover {
        color: var(--text-primary);
    }

    .q-breadcrumb__link svg {
        width: 13px;
        height: 13px;
    }

.q-breadcrumb__sep {
    color: var(--text-faint);
    user-select: none;
}

.q-breadcrumb__current {
    color: var(--text-primary);
    font-weight: 600;
}


/* ============================================================================
   30.  PAGINATION
   ----------------------------------------------------------------------------
   .q-pagination > .q-page (button/a) [+ .is-active] [+ disabled]
   .q-page--gap for the "..." ellipsis cell.
   ============================================================================ */
.q-pagination {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.q-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--timing-fast) var(--ease), border-color var(--timing-fast) var(--ease), color var(--timing-fast) var(--ease), transform var(--timing-fast) var(--ease-out);
}

    .q-page:hover {
        background: var(--hover-bg-strong);
        border-color: var(--border-strong);
        color: var(--text-primary);
    }

    .q-page:active {
        transform: translateY(1px);
    }

    .q-page.is-active {
        background: var(--primary-muted);
        border-color: rgba(122,127,244,.40);
        color: var(--primary-bright);
        cursor: default;
    }

    .q-page:disabled, .q-page.is-disabled {
        opacity: .4;
        cursor: not-allowed;
        pointer-events: none;
    }

    .q-page svg {
        width: 16px;
        height: 16px;
    }

.q-page--gap {
    border-color: transparent;
    background: transparent;
    color: var(--text-faint);
    cursor: default;
    pointer-events: none;
}


/* ============================================================================
   31.  EMPTY STATE  -  for empty tables / feeds / search results
   ----------------------------------------------------------------------------
   .q-empty > .q-empty__ico / __title / __text / __actions
   Copy is directive ("Add your first ..."), never an apology - an empty screen
   is an invitation to act.
   ============================================================================ */
.q-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 48px 24px;
}

.q-empty__ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border: 1px solid var(--border-default);
    color: var(--text-faint);
    margin-bottom: 6px;
}

    .q-empty__ico svg {
        width: 26px;
        height: 26px;
    }

.q-empty__title {
    font-size: var(--font-size-lg);
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--text-primary);
}

.q-empty__text {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    max-width: 42ch;
    line-height: var(--lh-base);
}

.q-empty__actions {
    margin-top: 14px;
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}


/* ============================================================================
   32.  SPINNER  -  indeterminate ring (sizes + colour variants)
   ============================================================================ */
.q-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2.5px solid var(--border-strong);
    border-top-color: var(--primary);
    animation: q-spin .7s linear infinite;
    flex-shrink: 0;
}

.q-spinner--sm {
    width: 15px;
    height: 15px;
    border-width: 2px;
}

.q-spinner--lg {
    width: 30px;
    height: 30px;
    border-width: 3px;
}

.q-spinner--accent {
    border-top-color: var(--accent);
}

.q-spinner--on-accent {
    border-color: rgba(255,255,255,.35);
    border-top-color: #fff;
}

@keyframes q-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .q-spinner {
        animation-duration: 1.6s;
    }
}


/* ============================================================================
   33.  PROGRESS RING  -  circular % dial with a centre label
   ----------------------------------------------------------------------------
   Set the value with the --val custom property (0-100). Recolour with
   --ring-color; match the centre to its container with --ring-bg.
     <div class="q-ring" style="--val:78"><span class="q-ring__label">78</span></div>
   ============================================================================ */
.q-ring {
    --val: 0;
    --size: 44px;
    --thick: 4px;
    --ring-color: var(--primary);
    --ring-bg: var(--surface-3);
    position: relative;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: conic-gradient(var(--ring-color) calc(var(--val) * 1%), var(--chart-track) 0);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: background var(--timing-slow) var(--ease-out);
}

    .q-ring::before {
        content: "";
        position: absolute;
        width: calc(var(--size) - var(--thick) * 2);
        height: calc(var(--size) - var(--thick) * 2);
        border-radius: 50%;
        background: var(--ring-bg);
    }

.q-ring__label {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.q-ring--sm {
    --size: 32px;
    --thick: 3px;
}

    .q-ring--sm .q-ring__label {
        font-size: var(--font-size-xxs);
    }

.q-ring--lg {
    --size: 64px;
    --thick: 5px;
}

    .q-ring--lg .q-ring__label {
        font-size: var(--font-size-base);
    }

.q-ring--success {
    --ring-color: var(--success);
}

.q-ring--warning {
    --ring-color: var(--warning);
}

.q-ring--danger {
    --ring-color: var(--danger);
}

.q-ring--aurora {
    background: conic-gradient(from 0deg, #34e3d4, #5bc8ff, #7c83ff, #b08bff, #ff8bc4, #34e3d4);
}


/* ============================================================================
   34.  STEPPER / WIZARD  -  horizontal progress through a multi-step flow
   ----------------------------------------------------------------------------
   .q-steps > .q-step [+ .is-active | .is-done]
     .q-step__dot (number or check)  .q-step__label
   The connector between dots is colour-driven, so advancing never reflows.
   ============================================================================ */
.q-steps {
    display: flex;
    align-items: flex-start;
}

.q-step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    min-width: 0;
}

    .q-step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 15px;
        left: 50%;
        width: 100%;
        height: 2px;
        background: var(--border-default);
        z-index: 0;
        transition: background var(--timing) var(--ease);
    }

    .q-step.is-done::after {
        background: var(--primary);
    }

.q-step__dot {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    border: 2px solid var(--border-strong);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: 700;
    transition: border-color var(--timing) var(--ease), background var(--timing) var(--ease), color var(--timing) var(--ease), box-shadow var(--timing) var(--ease);
}

    .q-step__dot svg {
        width: 15px;
        height: 15px;
    }

.q-step.is-active .q-step__dot {
    border-color: var(--primary);
    background: var(--surface-3);
    color: var(--primary-bright);
    box-shadow: var(--ring-soft);
}

.q-step.is-done .q-step__dot {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.q-step__label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-muted);
    padding: 0 4px;
}

.q-step.is-active .q-step__label {
    color: var(--text-primary);
}

.q-step.is-done .q-step__label {
    color: var(--text-secondary);
}


/* ============================================================================
   35.  ACCORDION  -  collapsible sections
   ----------------------------------------------------------------------------
   .q-accordion > .q-acc [+ .is-open]
     .q-acc__head (button) > text + .q-acc__chev
     .q-acc__panel > .q-acc__inner > .q-acc__body
   Height animates via the grid 0fr -> 1fr technique (the inner wrapper hides
   overflow). Toggle .is-open from page JS.
   ============================================================================ */
.q-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.q-acc {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    overflow: hidden;
}

.q-acc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background var(--timing-fast) var(--ease);
}

    .q-acc__head:hover {
        background: var(--hover-bg);
    }

.q-acc__chev {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: transform var(--timing) var(--ease);
}

.q-acc.is-open .q-acc__chev {
    transform: rotate(180deg);
}

.q-acc__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--timing-slow) var(--ease-out);
}

.q-acc.is-open .q-acc__panel {
    grid-template-rows: 1fr;
}

.q-acc__panel > * {
    overflow: hidden;
    min-height: 0;
}

.q-acc__body {
    padding: 0 16px 16px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--lh-base);
}

@media (prefers-reduced-motion: reduce) {
    .q-acc__panel {
        transition: none;
    }

    .q-acc__chev {
        transition: none;
    }
}


/* ============================================================================
   36.  STAT CARD  -  crisp dark KPI tile (dense dashboards)
   ----------------------------------------------------------------------------
   Distinct from the pastel .q-tile (which is for a few hero numbers). This is a
   solid raised tile you can grid many of. __label / __value / __delta / __ico.
   Delta colour: add --up (success) or --down (danger).
   ============================================================================ */
.q-stat {
    position: relative;
    background: var(--surface-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--highlight-top), var(--shadow-sm);
    padding: 16px 18px;
}

.q-stat--hover {
    cursor: pointer;
    transition: transform var(--timing) var(--ease-out), border-color var(--timing) var(--ease), box-shadow var(--timing) var(--ease);
}

    .q-stat--hover:hover {
        transform: translateY(-2px);
        border-color: var(--border-default);
        box-shadow: var(--highlight-top-strong), var(--shadow-md);
    }

.q-stat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.q-stat__label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: -.005em;
}

.q-stat__ico {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: var(--primary-subtle);
    color: var(--primary-bright);
    flex-shrink: 0;
}

    .q-stat__ico svg {
        width: 16px;
        height: 16px;
    }

.q-stat__value {
    margin-top: 10px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-display);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--text-primary);
}

.q-stat__delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-muted);
}

    .q-stat__delta svg {
        width: 13px;
        height: 13px;
    }

.q-stat__delta--up {
    color: var(--success);
}

.q-stat__delta--down {
    color: var(--danger);
}


/* ============================================================================
   37.  DROPZONE  -  drag-and-drop / click-to-upload target
   ----------------------------------------------------------------------------
   .q-dropzone [+ .is-dragover]  >  __ico / __title / __hint
   ============================================================================ */
.q-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 30px 24px;
    border: 1.5px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: var(--surface-0);
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color var(--timing) var(--ease), background var(--timing) var(--ease), color var(--timing) var(--ease);
}

    .q-dropzone:hover {
        border-color: var(--border-interactive);
        background: var(--hover-bg);
        color: var(--text-secondary);
    }

    .q-dropzone.is-dragover {
        border-color: var(--primary);
        background: var(--primary-muted);
        color: var(--primary-bright);
    }

.q-dropzone__ico {
    width: 40px;
    height: 40px;
    color: var(--text-faint);
    transition: color var(--timing) var(--ease);
}

.q-dropzone.is-dragover .q-dropzone__ico {
    color: var(--primary-bright);
}

.q-dropzone__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

    .q-dropzone__title .q-link {
        font-weight: 600;
    }

.q-dropzone__hint {
    font-size: var(--font-size-xs);
    color: var(--text-faint);
}


/* ============================================================================
   38.  KEY-VALUE ROWS  -  label : value pairs (detail drawers, summaries)
   ----------------------------------------------------------------------------
   .q-kv > .q-kv__row > .q-kv__k + .q-kv__v
   ============================================================================ */
.q-kv {
    display: flex;
    flex-direction: column;
}

.q-kv__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
}

    .q-kv__row:last-child {
        border-bottom: none;
    }

.q-kv__k {
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.q-kv__v {
    text-align: right;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-weight: 500;
    min-width: 0;
    word-break: break-word;
}

    .q-kv__v.q-num {
        font-family: var(--font-mono);
    }


/* ============================================================================
   39.  TOOLTIP DIRECTIONS  -  extends .q-tip (section 13; default = top)
   ============================================================================ */
.q-tip--bottom::after {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}

.q-tip--bottom:hover::after {
    transform: translateX(-50%) translateY(0);
}

.q-tip--left::after {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(100% + 8px);
    transform: translateY(-50%) translateX(4px);
}

.q-tip--left:hover::after {
    transform: translateY(-50%) translateX(0);
}

.q-tip--right::after {
    bottom: auto;
    top: 50%;
    left: calc(100% + 8px);
    transform: translateY(-50%) translateX(-4px);
}

.q-tip--right:hover::after {
    transform: translateY(-50%) translateX(0);
}


/* ============================================================================
   40.  SKELETON EXTRAS  -  circle + button placeholders (extends section 17)
   ============================================================================ */
.q-skeleton--circle {
    border-radius: 50%;
    width: 34px;
    height: 34px;
}

.q-skeleton--btn {
    height: 38px;
    border-radius: var(--radius-sm);
}

.q-skeleton--title {
    height: 1.25em;
    width: 45%;
    margin: .2em 0;
}


/* ============================================================================
   41.  PAGE HEADER  -  OPTIONAL light hero row (eyebrow + title + actions)
   ----------------------------------------------------------------------------
   Deliberately unopinionated so it never dictates a page's layout - a page is
   free to hand-build its own hero. Use it for quick, consistent page tops.
   .q-pagehead > .q-pagehead__main (> .q-kicker? + .q-pagehead__title + __sub)
                 + .q-pagehead__actions
   ============================================================================ */
.q-pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.q-pagehead__main {
    min-width: 0;
}

.q-pagehead__title {
    font-size: var(--font-size-xxl);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: var(--lh-tight);
    color: var(--text-primary);
    margin-top: 6px;
}

.q-pagehead__sub {
    margin-top: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: var(--lh-snug);
    max-width: 70ch;
}

.q-pagehead__actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .q-pagehead__title {
        font-size: var(--font-size-xl);
    }
}


/* ============================================================================
   42.  LITEPICKER  -  Aurora Noir skin (CENTRALISED)
   ----------------------------------------------------------------------------
   Qlynic standardises on Litepicker for every date / date-range field. Include
   the library's own ~/Litepicker/litepicker.css + litepicker.js on a page and
   it inherits this dark skin automatically - pages no longer repeat a calendar
   theme block. Litepicker's base sheet stays UNTOUCHED; this only restyles its
   DOM via tokens. The popup is a floating menu surface, so it reads identically
   to .q-menu / .q-modal.
   ============================================================================ */
.litepicker {
    font-family: var(--font) !important;
    font-size: var(--font-size-sm);
}

    .litepicker .container__main {
        background: var(--menu-bg);
        border: 1px solid var(--menu-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--highlight-top), var(--menu-shadow);
        color: var(--text-secondary);
        padding: 6px;
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    }

    .litepicker .container__months {
        box-shadow: none;
        background: transparent;
    }

        .litepicker .container__months .month-item {
            padding: 8px 10px 4px;
        }

        .litepicker .container__months .month-item-header {
            color: var(--text-primary);
            font-weight: 650;
            padding: 4px 2px 10px;
        }

            .litepicker .container__months .month-item-header div > .month-item-name,
            .litepicker .container__months .month-item-header div > .month-item-year {
                color: var(--text-primary);
                font-weight: 650;
            }

            .litepicker .container__months .month-item-header .button-previous-month,
            .litepicker .container__months .month-item-header .button-next-month {
                width: 30px;
                height: 30px;
                border-radius: var(--radius-sm);
                display: inline-grid;
                place-items: center;
                transition: background var(--timing-fast) var(--ease);
            }

                .litepicker .container__months .month-item-header .button-previous-month:hover,
                .litepicker .container__months .month-item-header .button-next-month:hover {
                    background: var(--hover-bg-strong);
                }

                .litepicker .container__months .month-item-header .button-previous-month svg,
                .litepicker .container__months .month-item-header .button-next-month svg {
                    fill: var(--text-muted);
                    transition: fill var(--timing-fast) var(--ease);
                }

                .litepicker .container__months .month-item-header .button-previous-month:hover svg,
                .litepicker .container__months .month-item-header .button-next-month:hover svg {
                    fill: var(--primary-bright);
                }

        .litepicker .container__months .month-item-weekdays-row > div {
            color: var(--text-faint);
            font-size: var(--font-size-xxs);
            font-weight: 700;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

    .litepicker .container__days .day-item {
        color: var(--text-secondary);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-sm);
        transition: background var(--timing-fast) var(--ease), color var(--timing-fast) var(--ease), box-shadow var(--timing-fast) var(--ease);
    }

        .litepicker .container__days .day-item:hover {
            color: var(--text-primary);
            background: var(--hover-bg-strong);
            box-shadow: none;
        }

        .litepicker .container__days .day-item.is-today {
            color: var(--accent);
            font-weight: 700;
        }

        .litepicker .container__days .day-item.is-locked {
            color: var(--text-faint);
            text-decoration: line-through;
            opacity: .6;
        }

        .litepicker .container__days .day-item.is-in-range {
            background: var(--primary-subtle);
            color: var(--text-primary);
            border-radius: 0;
        }

        .litepicker .container__days .day-item.is-start-date,
        .litepicker .container__days .day-item.is-end-date {
            background: var(--primary);
            color: #fff;
            font-weight: 600;
            box-shadow: 0 2px 8px var(--primary-glow);
        }

        .litepicker .container__days .day-item.is-start-date {
            border-radius: var(--radius-sm) 0 0 var(--radius-sm);
        }

        .litepicker .container__days .day-item.is-end-date {
            border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        }

        .litepicker .container__days .day-item.is-start-date.is-end-date {
            border-radius: var(--radius-sm);
        }

    .litepicker .container__footer {
        background: transparent;
        border-top: 1px solid var(--border-subtle);
        box-shadow: none;
        margin: 6px 4px 2px;
        padding-top: 10px;
    }

    .litepicker select {
        background: var(--field-bg);
        border: 1px solid var(--field-border);
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        padding: 4px 8px;
    }

        .litepicker select option {
            background: var(--select-option-bg);
            color: var(--text-primary);
        }

    .litepicker .container__tooltip {
        background: var(--tooltip-bg);
        color: var(--tooltip-text);
        border: 1px solid var(--tooltip-border);
        border-radius: var(--tooltip-radius);
        box-shadow: var(--shadow-md);
        font-size: var(--font-size-xs);
    }

        .litepicker .container__tooltip:before,
        .litepicker .container__tooltip:after {
            display: none;
        }


/* ============================================================================
   GLASS FALLBACK  -  engines without backdrop-filter get opaque surfaces so
   nothing turns unreadable (Firefox older than 103, etc).
   ============================================================================ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .q-panel {
        background: var(--surface-3);
    }

    .q-card {
        background: var(--surface-2);
    }

    .q-bar {
        background: var(--surface-2);
    }

    .q-modal {
        background: var(--surface-5);
    }

    .q-menu {
        background: var(--surface-4);
    }

    .q-toast {
        background: var(--surface-3);
    }

    .q-note {
        background: var(--surface-2);
    }

    .q-table-wrap {
        background: var(--surface-3);
    }
}


/* ============================================================================
   END OF ESSENTIALS.CSS
   ============================================================================ */