/* GENERATED by tools/build_ui.py - edit tokens/qantara-design-tokens.json or ui/src/components.css */
/* QANTARA UI v1 - proposed design system, awaiting owner approval */
@font-face{font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations'),url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url('fonts/inter-latin-wght-normal.woff2') format('woff2-variations'),url('fonts/inter-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url('fonts/fraunces-latin-ext-wght-normal.woff2') format('woff2-variations'),url('fonts/fraunces-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fraunces Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url('fonts/fraunces-latin-wght-normal.woff2') format('woff2-variations'),url('fonts/fraunces-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono Variable';font-style:normal;font-display:swap;font-weight:100 800;src:url('fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2-variations'),url('fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'JetBrains Mono Variable';font-style:normal;font-display:swap;font-weight:100 800;src:url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations'),url('fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
:root {
  --font-sans: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Fraunces Variable', Fraunces, 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-display-size: clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);
  --t-display-line: 1.04;
  --t-display-weight: 500;
  --t-display-tracking: -0.025em;
  --t-display-font: var(--font-serif);
  --t-h1-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  --t-h1-line: 1.1;
  --t-h1-weight: 500;
  --t-h1-tracking: -0.02em;
  --t-h1-font: var(--font-serif);
  --t-h2-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --t-h2-line: 1.2;
  --t-h2-weight: 500;
  --t-h2-tracking: -0.015em;
  --t-h2-font: var(--font-serif);
  --t-h3-size: 1.25rem;
  --t-h3-line: 1.3;
  --t-h3-weight: 600;
  --t-h3-tracking: -0.01em;
  --t-h3-font: var(--font-sans);
  --t-body-large-size: 1.125rem;
  --t-body-large-line: 1.6;
  --t-body-large-weight: 400;
  --t-body-large-tracking: 0;
  --t-body-large-font: var(--font-sans);
  --t-body-size: 1rem;
  --t-body-line: 1.6;
  --t-body-weight: 400;
  --t-body-tracking: 0;
  --t-body-font: var(--font-sans);
  --t-body-small-size: 0.875rem;
  --t-body-small-line: 1.5;
  --t-body-small-weight: 400;
  --t-body-small-tracking: 0;
  --t-body-small-font: var(--font-sans);
  --t-caption-size: 0.8125rem;
  --t-caption-line: 1.4;
  --t-caption-weight: 400;
  --t-caption-tracking: 0.005em;
  --t-caption-font: var(--font-sans);
  --t-label-size: 0.875rem;
  --t-label-line: 1.3;
  --t-label-weight: 550;
  --t-label-tracking: 0;
  --t-label-font: var(--font-sans);
  --t-button-size: 0.9375rem;
  --t-button-line: 1;
  --t-button-weight: 550;
  --t-button-tracking: 0;
  --t-button-font: var(--font-sans);
  --t-code-size: 0.875rem;
  --t-code-line: 1.55;
  --t-code-weight: 400;
  --t-code-tracking: 0;
  --t-code-font: var(--font-mono);
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
  --dur-instant: 90ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
  --dur-ambient: 1800ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-spring-soft: cubic-bezier(0.34, 1.2, 0.5, 1);
  --layout-content-narrow: 40rem;
  --layout-content: 46rem;
  --layout-wide: 72rem;
  --layout-max: 88rem;
  --layout-gutter-mobile: 16px;
  --layout-gutter-tablet: 32px;
  --layout-gutter-desktop: 48px;
  --layout-rail: 72px;
  --layout-rail-expanded: 264px;
  --layout-touch-min: 44px;
  --layout-control-height: 44px;
  --layout-control-height-compact: 36px;
  --bp-xs: 360px;
  --bp-sm: 390px;
  --bp-md: 430px;
  --bp-tablet: 768px;
  --bp-laptop: 1024px;
  --bp-desktop: 1280px;
  --bp-wide: 1440px;
  --bp-ultra: 1920px;
  --z-base: 0;
  --z-sticky: 100;
  --z-nav: 200;
  --z-dropdown: 300;
  --z-popover: 350;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;
  --density: 1;
  --c-bg: #FAF8F4;
  --c-bg-subtle: #F3EFE8;
  --c-surface: #FFFFFF;
  --c-surface-raised: #FFFFFF;
  --c-surface-sunken: #F3EFE8;
  --c-border: #E6E0D5;
  --c-border-strong: #CFC7B8;
  --c-border-control: #8A8272;
  --c-text: #1C1A16;
  --c-text-muted: #55514A;
  --c-text-subtle: #6B665D;
  --c-text-inverse: #FAF8F4;
  --c-scrim: rgba(28,26,22,0.42);
  --c-inverse-surface: #24211C;
  --c-focus: #1F5FBF;
  --c-success: #2F6B3F;
  --c-success-soft: #E3F0E5;
  --c-success-soft-fg: #235232;
  --c-warning: #8A5A00;
  --c-warning-soft: #F8EBCB;
  --c-warning-soft-fg: #6B4500;
  --c-danger: #A8322B;
  --c-danger-soft: #F9E1DE;
  --c-danger-soft-fg: #8A2620;
  --c-info: #2B5A86;
  --c-info-soft: #E3ECF4;
  --c-info-soft-fg: #1F4467;
  --c-wave-idle: #B9B0A0;
  --shadow-1: 0 1px 2px rgba(48,36,18,0.06);
  --shadow-2: 0 4px 14px -2px rgba(48,36,18,0.08), 0 1px 2px rgba(48,36,18,0.05);
  --shadow-3: 0 12px 32px -8px rgba(48,36,18,0.16), 0 2px 6px rgba(48,36,18,0.05);
  --shadow-4: 0 24px 64px -12px rgba(48,36,18,0.28), 0 4px 12px rgba(48,36,18,0.06);
  color-scheme: light;
  --c-accent: #28505F;
  --c-accent-fg: #FFFFFF;
  --c-accent-text: #28505F;
  --c-accent-soft: #E4EDEF;
  --c-accent-soft-fg: #1E4150;
  --c-accent-hover: #1E4150;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  --c-bg: #141311;
  --c-bg-subtle: #0F0E0C;
  --c-surface: #1C1B18;
  --c-surface-raised: #24221F;
  --c-surface-sunken: #0F0E0C;
  --c-border: #2E2C28;
  --c-border-strong: #45423B;
  --c-border-control: #8A8375;
  --c-text: #F2EEE6;
  --c-text-muted: #B7B0A3;
  --c-text-subtle: #9A9386;
  --c-text-inverse: #141311;
  --c-scrim: rgba(0,0,0,0.6);
  --c-inverse-surface: #EDE8DE;
  --c-focus: #7FB0F5;
  --c-success: #8FCB9F;
  --c-success-soft: #1A2A1F;
  --c-success-soft-fg: #A9DBB6;
  --c-warning: #E3B65A;
  --c-warning-soft: #2E2514;
  --c-warning-soft-fg: #EBC983;
  --c-danger: #F0968E;
  --c-danger-soft: #301C1A;
  --c-danger-soft-fg: #F5B4AE;
  --c-info: #8DB5DE;
  --c-info-soft: #1A2735;
  --c-info-soft-fg: #B3D0EC;
  --c-wave-idle: #5A554B;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 14px -2px rgba(0,0,0,0.5);
  --shadow-3: 0 12px 32px -8px rgba(0,0,0,0.6);
  --shadow-4: 0 24px 64px -12px rgba(0,0,0,0.75);
  color-scheme: dark;
  --c-accent: #8FBBC9;
  --c-accent-fg: #0F1C22;
  --c-accent-text: #8FBBC9;
  --c-accent-soft: #1B2A30;
  --c-accent-soft-fg: #B5D6E0;
  --c-accent-hover: #A8CEDB;
}
}
:root[data-theme="dark"] {
  --c-bg: #141311;
  --c-bg-subtle: #0F0E0C;
  --c-surface: #1C1B18;
  --c-surface-raised: #24221F;
  --c-surface-sunken: #0F0E0C;
  --c-border: #2E2C28;
  --c-border-strong: #45423B;
  --c-border-control: #8A8375;
  --c-text: #F2EEE6;
  --c-text-muted: #B7B0A3;
  --c-text-subtle: #9A9386;
  --c-text-inverse: #141311;
  --c-scrim: rgba(0,0,0,0.6);
  --c-inverse-surface: #EDE8DE;
  --c-focus: #7FB0F5;
  --c-success: #8FCB9F;
  --c-success-soft: #1A2A1F;
  --c-success-soft-fg: #A9DBB6;
  --c-warning: #E3B65A;
  --c-warning-soft: #2E2514;
  --c-warning-soft-fg: #EBC983;
  --c-danger: #F0968E;
  --c-danger-soft: #301C1A;
  --c-danger-soft-fg: #F5B4AE;
  --c-info: #8DB5DE;
  --c-info-soft: #1A2735;
  --c-info-soft-fg: #B3D0EC;
  --c-wave-idle: #5A554B;
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 14px -2px rgba(0,0,0,0.5);
  --shadow-3: 0 12px 32px -8px rgba(0,0,0,0.6);
  --shadow-4: 0 24px 64px -12px rgba(0,0,0,0.75);
  color-scheme: dark;
  --c-accent: #8FBBC9;
  --c-accent-fg: #0F1C22;
  --c-accent-text: #8FBBC9;
  --c-accent-soft: #1B2A30;
  --c-accent-soft-fg: #B5D6E0;
  --c-accent-hover: #A8CEDB;
}
:root[data-theme="light"] {
  --c-bg: #FAF8F4;
  --c-bg-subtle: #F3EFE8;
  --c-surface: #FFFFFF;
  --c-surface-raised: #FFFFFF;
  --c-surface-sunken: #F3EFE8;
  --c-border: #E6E0D5;
  --c-border-strong: #CFC7B8;
  --c-border-control: #8A8272;
  --c-text: #1C1A16;
  --c-text-muted: #55514A;
  --c-text-subtle: #6B665D;
  --c-text-inverse: #FAF8F4;
  --c-scrim: rgba(28,26,22,0.42);
  --c-inverse-surface: #24211C;
  --c-focus: #1F5FBF;
  --c-success: #2F6B3F;
  --c-success-soft: #E3F0E5;
  --c-success-soft-fg: #235232;
  --c-warning: #8A5A00;
  --c-warning-soft: #F8EBCB;
  --c-warning-soft-fg: #6B4500;
  --c-danger: #A8322B;
  --c-danger-soft: #F9E1DE;
  --c-danger-soft-fg: #8A2620;
  --c-info: #2B5A86;
  --c-info-soft: #E3ECF4;
  --c-info-soft-fg: #1F4467;
  --c-wave-idle: #B9B0A0;
  --shadow-1: 0 1px 2px rgba(48,36,18,0.06);
  --shadow-2: 0 4px 14px -2px rgba(48,36,18,0.08), 0 1px 2px rgba(48,36,18,0.05);
  --shadow-3: 0 12px 32px -8px rgba(48,36,18,0.16), 0 2px 6px rgba(48,36,18,0.05);
  --shadow-4: 0 24px 64px -12px rgba(48,36,18,0.28), 0 4px 12px rgba(48,36,18,0.06);
  color-scheme: light;
  --c-accent: #28505F;
  --c-accent-fg: #FFFFFF;
  --c-accent-text: #28505F;
  --c-accent-soft: #E4EDEF;
  --c-accent-soft-fg: #1E4150;
  --c-accent-hover: #1E4150;
}
[data-product="site"] {
  --density: 1;
  --t-display-font: var(--font-serif);
  --t-h1-font: var(--t-display-font);
  --t-h2-font: var(--t-display-font);
  --c-accent: #28505F;
  --c-accent-fg: #FFFFFF;
  --c-accent-text: #28505F;
  --c-accent-soft: #E4EDEF;
  --c-accent-soft-fg: #1E4150;
  --c-accent-hover: #1E4150;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) [data-product="site"], :root:not([data-theme="light"])[data-product="site"] {
  --c-accent: #8FBBC9;
  --c-accent-fg: #0F1C22;
  --c-accent-text: #8FBBC9;
  --c-accent-soft: #1B2A30;
  --c-accent-soft-fg: #B5D6E0;
  --c-accent-hover: #A8CEDB;
}
}
:root[data-theme="dark"] [data-product="site"], :root[data-theme="dark"][data-product="site"] {
  --c-accent: #8FBBC9;
  --c-accent-fg: #0F1C22;
  --c-accent-text: #8FBBC9;
  --c-accent-soft: #1B2A30;
  --c-accent-soft-fg: #B5D6E0;
  --c-accent-hover: #A8CEDB;
}
:root[data-theme="light"] [data-product="site"], :root[data-theme="light"][data-product="site"] {
  --c-accent: #28505F;
  --c-accent-fg: #FFFFFF;
  --c-accent-text: #28505F;
  --c-accent-soft: #E4EDEF;
  --c-accent-soft-fg: #1E4150;
  --c-accent-hover: #1E4150;
}
[data-product="rafika"] {
  --density: 1;
  --t-display-font: var(--font-serif);
  --t-h1-font: var(--t-display-font);
  --t-h2-font: var(--t-display-font);
  --c-accent: #A64B27;
  --c-accent-fg: #FFFFFF;
  --c-accent-text: #A64B27;
  --c-accent-soft: #F6E6DC;
  --c-accent-soft-fg: #7C3519;
  --c-accent-hover: #8C3E1E;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) [data-product="rafika"], :root:not([data-theme="light"])[data-product="rafika"] {
  --c-accent: #E39A78;
  --c-accent-fg: #2A140A;
  --c-accent-text: #E39A78;
  --c-accent-soft: #33211A;
  --c-accent-soft-fg: #F0BFA5;
  --c-accent-hover: #EDAE90;
}
}
:root[data-theme="dark"] [data-product="rafika"], :root[data-theme="dark"][data-product="rafika"] {
  --c-accent: #E39A78;
  --c-accent-fg: #2A140A;
  --c-accent-text: #E39A78;
  --c-accent-soft: #33211A;
  --c-accent-soft-fg: #F0BFA5;
  --c-accent-hover: #EDAE90;
}
:root[data-theme="light"] [data-product="rafika"], :root[data-theme="light"][data-product="rafika"] {
  --c-accent: #A64B27;
  --c-accent-fg: #FFFFFF;
  --c-accent-text: #A64B27;
  --c-accent-soft: #F6E6DC;
  --c-accent-soft-fg: #7C3519;
  --c-accent-hover: #8C3E1E;
}
[data-product="max"] {
  --density: 0.875;
  --t-display-font: var(--font-sans);
  --t-h1-font: var(--t-display-font);
  --t-h2-font: var(--t-display-font);
  --t-display-weight: 600;
  --t-h1-weight: 600;
  --t-h2-weight: 600;
  --t-display-tracking:-0.03em;
  --c-accent: #2B5A86;
  --c-accent-fg: #FFFFFF;
  --c-accent-text: #2B5A86;
  --c-accent-soft: #E3ECF4;
  --c-accent-soft-fg: #1F4467;
  --c-accent-hover: #214A70;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) [data-product="max"], :root:not([data-theme="light"])[data-product="max"] {
  --c-accent: #8DB5DE;
  --c-accent-fg: #0C1B2B;
  --c-accent-text: #8DB5DE;
  --c-accent-soft: #1A2735;
  --c-accent-soft-fg: #B3D0EC;
  --c-accent-hover: #A6C6E8;
}
}
:root[data-theme="dark"] [data-product="max"], :root[data-theme="dark"][data-product="max"] {
  --c-accent: #8DB5DE;
  --c-accent-fg: #0C1B2B;
  --c-accent-text: #8DB5DE;
  --c-accent-soft: #1A2735;
  --c-accent-soft-fg: #B3D0EC;
  --c-accent-hover: #A6C6E8;
}
:root[data-theme="light"] [data-product="max"], :root[data-theme="light"][data-product="max"] {
  --c-accent: #2B5A86;
  --c-accent-fg: #FFFFFF;
  --c-accent-text: #2B5A86;
  --c-accent-soft: #E3ECF4;
  --c-accent-soft-fg: #1F4467;
  --c-accent-hover: #214A70;
}
/* ===================== BASE ===================== */
:root { --control-h: 44px; --control-h-sm: 36px; --focus-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-focus); }
@media (pointer: fine) and (min-width: 1024px) { [data-product="max"] { --control-h: 40px; --control-h-sm: 32px; } }
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); font-size: var(--t-body-size); line-height: var(--t-body-line);
  font-feature-settings: "cv11","ss03","calt"; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
img,svg,video,canvas { display: block; max-width: 100%; }
button,input,select,textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol { margin: 0; }
:where(ul,ol)[role="list"] { list-style: none; padding: 0; }
::selection { background: var(--c-accent-soft); color: var(--c-accent-soft-fg); }
a { color: var(--c-accent-text); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { text-decoration-thickness: 2px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--radius-xs); }
[hidden] { display: none !important; }
.q-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.q-skip { position: absolute; left: var(--space-5); top: -100px; z-index: var(--z-toast); background: var(--c-inverse-surface); color: var(--c-text-inverse); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); }
.q-skip:focus { top: var(--space-5); }

/* ===================== TYPOGRAPHY ===================== */
.q-display,.q-h1,.q-h2,.q-h3,.q-body-large,.q-body,.q-body-small,.q-caption,.q-label,.q-code { margin: 0; }
.q-display { font: var(--t-display-weight) var(--t-display-size)/var(--t-display-line) var(--t-display-font); letter-spacing: var(--t-display-tracking); text-wrap: balance; }
.q-h1 { font: var(--t-h1-weight) var(--t-h1-size)/var(--t-h1-line) var(--t-h1-font); letter-spacing: var(--t-h1-tracking); text-wrap: balance; }
.q-h2 { font: var(--t-h2-weight) var(--t-h2-size)/var(--t-h2-line) var(--t-h2-font); letter-spacing: var(--t-h2-tracking); text-wrap: balance; }
.q-h3 { font: var(--t-h3-weight) var(--t-h3-size)/var(--t-h3-line) var(--t-h3-font); letter-spacing: var(--t-h3-tracking); }
.q-body-large { font-size: var(--t-body-large-size); line-height: var(--t-body-large-line); text-wrap: pretty; }
.q-body { font-size: var(--t-body-size); line-height: var(--t-body-line); text-wrap: pretty; }
.q-body-small { font-size: var(--t-body-small-size); line-height: var(--t-body-small-line); }
.q-caption { font-size: var(--t-caption-size); line-height: var(--t-caption-line); letter-spacing: var(--t-caption-tracking); color: var(--c-text-subtle); }
.q-label { font-size: var(--t-label-size); line-height: var(--t-label-line); font-weight: var(--t-label-weight); }
.q-muted { color: var(--c-text-muted); } .q-subtle { color: var(--c-text-subtle); }
.q-prose > * + * { margin-top: var(--space-5); } .q-prose { max-width: 38em; }
.q-prose h2 { margin-top: var(--space-9); } .q-prose h3 { margin-top: var(--space-7); }
code,kbd,samp,.q-code { font-family: var(--font-mono); font-size: 0.9em; }
code { background: var(--c-bg-subtle); border: 1px solid var(--c-border); padding: 0.1em 0.4em; border-radius: var(--radius-xs); }
pre.q-code { font-size: var(--t-code-size); line-height: var(--t-code-line); background: var(--c-surface-sunken); border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: var(--space-5); overflow: auto; }
pre.q-code code { background: none; border: 0; padding: 0; font-size: inherit; }
kbd { border: 1px solid var(--c-border-strong); border-bottom-width: 2px; border-radius: var(--radius-xs); padding: 0 0.4em; background: var(--c-surface); font-size: 0.8em; }
.q-num { font-variant-numeric: tabular-nums; }

/* ===================== LAYOUT PRIMITIVES ===================== */
.q-container { width: 100%; max-width: var(--layout-wide); margin-inline: auto; padding-inline: var(--layout-gutter-mobile); }
.q-container--narrow { max-width: var(--layout-content); } .q-container--max { max-width: var(--layout-max); }
@media (min-width: 768px) { .q-container { padding-inline: var(--layout-gutter-tablet); } }
@media (min-width: 1280px) { .q-container { padding-inline: var(--layout-gutter-desktop); } }
.q-section { padding-block: var(--space-11); } @media (min-width: 1024px) { .q-section { padding-block: var(--space-13); } }
.q-stack { display: flex; flex-direction: column; gap: var(--gap, var(--space-5)); }
.q-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-4)); }
.q-row { display: flex; align-items: center; gap: var(--gap, var(--space-4)); }
.q-grid { display: grid; gap: var(--gap, var(--space-7)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 16rem)), 1fr)); }
.q-grow { flex: 1 1 auto; min-width: 0; } .q-center { margin-inline: auto; }
.q-divider { border: 0; border-top: 1px solid var(--c-border); margin: 0; }
.q-gap-3 { --gap: var(--space-3); } .q-gap-4 { --gap: var(--space-4); } .q-gap-5 { --gap: var(--space-5); } .q-gap-7 { --gap: var(--space-7); } .q-gap-9 { --gap: var(--space-9); }

/* ===================== ICON ===================== */
.q-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.q-icon--sm { width: 16px; height: 16px; } .q-icon--lg { width: 24px; height: 24px; }

/* ===================== BUTTON ===================== */
.q-btn { --_bg: var(--c-accent); --_fg: var(--c-accent-fg); --_bd: transparent;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: var(--control-h); min-width: var(--control-h); padding: 0 var(--space-6); border: 1px solid var(--_bd); border-radius: var(--radius-sm);
  background: var(--_bg); color: var(--_fg); font-size: var(--t-button-size); font-weight: var(--t-button-weight); line-height: 1; text-decoration: none; white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.q-btn:hover { --_bg: var(--c-accent-hover); } .q-btn:active { transform: translateY(1px) scale(0.99); }
.q-btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.q-btn--secondary { --_bg: var(--c-surface); --_fg: var(--c-text); --_bd: var(--c-border-control); } .q-btn--secondary:hover { --_bg: var(--c-bg-subtle); }
.q-btn--ghost { --_bg: transparent; --_fg: var(--c-text); } .q-btn--ghost:hover { --_bg: var(--c-bg-subtle); } .q-btn--ghost:active { --_bg: var(--c-border); }
.q-btn--soft { --_bg: var(--c-accent-soft); --_fg: var(--c-accent-soft-fg); } .q-btn--soft:hover { --_bg: var(--c-accent-soft); filter: brightness(0.97); }
.q-btn--danger { --_bg: var(--c-danger); --_fg: var(--c-bg); } .q-btn--danger:hover { --_bg: var(--c-danger); filter: brightness(0.92); }
.q-btn--sm { min-height: var(--control-h-sm); padding: 0 var(--space-5); font-size: var(--t-body-small-size); }
.q-btn--block { width: 100%; }
.q-btn:disabled,.q-btn[aria-disabled="true"] { --_bg: var(--c-bg-subtle); --_fg: var(--c-text-subtle); --_bd: var(--c-border); cursor: not-allowed; transform: none; filter: none; }
.q-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.q-btn[aria-busy="true"]::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--_fg); border-right-color: transparent; animation: q-spin 0.8s linear infinite; }
.q-btn--secondary[aria-busy="true"]::after,.q-btn--ghost[aria-busy="true"]::after { border-color: var(--c-text); border-right-color: transparent; }
.q-btn.is-success { --_bg: var(--c-success-soft); --_fg: var(--c-success-soft-fg); --_bd: transparent; }
@keyframes q-spin { to { transform: rotate(360deg); } }
.q-iconbtn { display: inline-grid; place-items: center; width: var(--control-h); height: var(--control-h); border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--c-text-muted); transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-instant); }
.q-iconbtn:hover { background: var(--c-bg-subtle); color: var(--c-text); } .q-iconbtn:active { transform: scale(0.95); background: var(--c-border); }
.q-iconbtn[aria-pressed="true"] { background: var(--c-accent-soft); color: var(--c-accent-soft-fg); }
.q-iconbtn:disabled { color: var(--c-text-subtle); opacity: 0.55; cursor: not-allowed; }
.q-iconbtn--round { border-radius: var(--radius-full); } .q-iconbtn--filled { background: var(--c-accent); color: var(--c-accent-fg); } .q-iconbtn--filled:hover { background: var(--c-accent-hover); color: var(--c-accent-fg); }

/* ===================== FORM ===================== */
.q-field { display: flex; flex-direction: column; gap: var(--space-3); }
.q-field > label,.q-field > .q-label { color: var(--c-text); }
.q-hint { font-size: var(--t-caption-size); color: var(--c-text-muted); }
.q-error-text { font-size: var(--t-caption-size); color: var(--c-danger); display: flex; gap: var(--space-2); align-items: center; }
.q-input,.q-textarea,.q-select select { width: 100%; min-height: var(--control-h); padding: 0 var(--space-5); background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border-control); border-radius: var(--radius-sm); transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background-color var(--dur-fast); }
.q-input::placeholder,.q-textarea::placeholder { color: var(--c-text-subtle); opacity: 1; }
.q-input:hover,.q-textarea:hover,.q-select select:hover { border-color: var(--c-text-muted); }
.q-input:focus-visible,.q-textarea:focus-visible,.q-select select:focus-visible { outline: none; border-color: var(--c-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus) 28%, transparent); }
.q-input[aria-invalid="true"],.q-textarea[aria-invalid="true"],.q-select select[aria-invalid="true"] { border-color: var(--c-danger); background: color-mix(in srgb, var(--c-danger-soft) 40%, var(--c-surface)); }
.q-input.is-success { border-color: var(--c-success); }
.q-input:disabled,.q-textarea:disabled,.q-select select:disabled { background: var(--c-bg-subtle); color: var(--c-text-subtle); border-color: var(--c-border); cursor: not-allowed; }
.q-input[aria-busy="true"] { background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-accent) 14%, transparent), transparent); background-size: 200% 100%; animation: q-shimmer 1.4s linear infinite; }
.q-textarea { padding: var(--space-4) var(--space-5); line-height: 1.5; resize: vertical; min-height: 6.5rem; }
.q-select { position: relative; } .q-select select { appearance: none; -webkit-appearance: none; padding-right: var(--space-10); }
.q-select::after { content: ""; position: absolute; right: var(--space-5); top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--c-text-muted); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; }
.q-check { display: inline-flex; gap: var(--space-4); align-items: center; min-height: var(--control-h); cursor: pointer; }
.q-check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--c-border-control); border-radius: var(--radius-xs); background: var(--c-surface); display: grid; place-content: center; transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.q-check input[type="radio"] { border-radius: 50%; }
.q-check input::after { content: ""; width: 12px; height: 12px; transform: scale(0); transition: transform var(--dur-fast) var(--ease-spring-soft); background: var(--c-accent-fg);
  clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); }
.q-check input[type="radio"]::after { clip-path: circle(35%); width: 14px; height: 14px; }
.q-check input:checked { background: var(--c-accent); border-color: var(--c-accent); } .q-check input:checked::after { transform: scale(1); }
.q-check input:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } .q-check input:disabled { opacity: 0.5; } .q-check input:disabled ~ span { color: var(--c-text-subtle); }
/* toggle: <label class="q-toggle"><input type="checkbox" role="switch"><span class="q-toggle__track"></span><span>Label</span></label> */
.q-toggle { display: inline-flex; align-items: center; gap: var(--space-4); min-height: var(--control-h); cursor: pointer; }
.q-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.q-toggle__track { position: relative; width: 44px; height: 26px; flex: none; border-radius: var(--radius-full); background: var(--c-border-control); transition: background-color var(--dur-base) var(--ease-standard); }
.q-toggle__track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--c-surface); box-shadow: var(--shadow-1); transition: transform var(--dur-base) var(--ease-enter); }
.q-toggle:hover .q-toggle__track { filter: brightness(0.95); }
.q-toggle input:checked + .q-toggle__track { background: var(--c-accent); } .q-toggle input:checked + .q-toggle__track::after { transform: translateX(18px); background: var(--c-accent-fg); }
.q-toggle input:focus-visible + .q-toggle__track { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.q-toggle input:disabled + .q-toggle__track { opacity: 0.45; } .q-toggle input:disabled ~ span:last-child { color: var(--c-text-subtle); }
.q-slider { -webkit-appearance: none; appearance: none; width: 100%; height: var(--control-h); background: transparent; margin: 0; --_p: 50%; }
.q-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--c-accent) var(--_p), var(--c-border-strong) var(--_p)); }
.q-slider::-moz-range-track { height: 6px; border-radius: 3px; background: var(--c-border-strong); } .q-slider::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--c-accent); }
.q-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-accent); box-shadow: var(--shadow-2); transition: transform var(--dur-fast); }
.q-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--c-surface); border: 2px solid var(--c-accent); box-shadow: var(--shadow-2); }
.q-slider:hover::-webkit-slider-thumb { transform: scale(1.08); } .q-slider:active::-webkit-slider-thumb { transform: scale(0.96); }
.q-slider:focus-visible { outline: none; } .q-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--c-focus); outline-offset: 2px; } .q-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.q-slider:disabled { opacity: 0.45; }

/* ===================== TABS ===================== */
.q-tablist { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--c-border); overflow-x: auto; scrollbar-width: none; }
.q-tab { position: relative; min-height: var(--control-h); padding: 0 var(--space-5); background: none; border: 0; color: var(--c-text-muted); font-weight: 550; white-space: nowrap; transition: color var(--dur-fast); }
.q-tab::after { content: ""; position: absolute; left: var(--space-5); right: var(--space-5); bottom: -1px; height: 2px; border-radius: 2px; background: var(--c-accent); transform: scaleX(0); transition: transform var(--dur-base) var(--ease-standard); }
.q-tab:hover { color: var(--c-text); } .q-tab[aria-selected="true"] { color: var(--c-text); } .q-tab[aria-selected="true"]::after { transform: scaleX(1); }
.q-tab:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; border-radius: var(--radius-sm); } .q-tab:disabled { color: var(--c-text-subtle); opacity: .6; cursor: not-allowed; }
.q-tabpanel { padding-top: var(--space-6); } .q-tabpanel[hidden] { display: none; }
.q-segmented { display: inline-flex; flex-wrap: wrap; max-width: 100%; padding: 3px; gap: 2px; background: var(--c-bg-subtle); border: 1px solid var(--c-border); border-radius: var(--radius-sm); }
.q-segmented button { min-height: calc(var(--control-h) - 8px); padding: 0 var(--space-5); border: 0; border-radius: calc(var(--radius-sm) - 2px); background: transparent; color: var(--c-text-muted); font-weight: 550; transition: background-color var(--dur-fast), color var(--dur-fast); }
.q-segmented button[aria-pressed="true"],.q-segmented button[aria-selected="true"] { background: var(--c-surface-raised); color: var(--c-text); box-shadow: var(--shadow-1); }

/* ===================== TOOLTIP / POPOVER / DROPDOWN ===================== */
.q-tooltip-wrap { position: relative; display: inline-flex; }
.q-tooltip { position: absolute; z-index: var(--z-tooltip); bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--c-inverse-surface); color: var(--c-text-inverse); font-size: var(--t-caption-size); line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); box-shadow: var(--shadow-2); }
.q-tooltip-wrap:hover > .q-tooltip,.q-tooltip-wrap:focus-within > .q-tooltip,.q-tooltip.is-open { opacity: 1; transform: translate(-50%, 0); }
.q-popover,.q-menu { position: absolute; z-index: var(--z-popover); min-width: 12rem; background: var(--c-surface-raised); border: 1px solid var(--c-border); border-radius: var(--radius-md); box-shadow: var(--shadow-3); padding: var(--space-3); transform-origin: top left; animation: q-pop var(--dur-base) var(--ease-enter); }
.q-popover { padding: var(--space-6); width: 18rem; max-width: calc(100vw - 32px); }
.q-popover[hidden],.q-menu[hidden] { display: none; }
@keyframes q-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
.q-anchor { position: relative; display: inline-block; } .q-anchor > .q-menu,.q-anchor > .q-popover { top: calc(100% + 6px); left: 0; } .q-anchor--end > .q-menu { left: auto; right: 0; }
.q-menu__item { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: var(--control-h); padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--c-text); text-align: left; transition: background-color var(--dur-fast); }
.q-menu__item:hover,.q-menu__item:focus-visible,.q-menu__item.is-active { background: var(--c-bg-subtle); outline: none; }
.q-menu__item:focus-visible { box-shadow: inset 0 0 0 2px var(--c-focus); }
.q-menu__item[aria-checked="true"] { color: var(--c-accent-text); font-weight: 550; } .q-menu__item[aria-disabled="true"] { color: var(--c-text-subtle); cursor: not-allowed; }
.q-menu__item--danger { color: var(--c-danger); } .q-menu__sep { height: 1px; background: var(--c-border); margin: var(--space-3) calc(var(--space-3) * -1); }

/* ===================== MODAL / SHEET ===================== */
.q-scrim { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--c-scrim); animation: q-fade var(--dur-base) var(--ease-standard); }
@supports (backdrop-filter: blur(4px)) { .q-scrim { backdrop-filter: blur(6px); } }
@keyframes q-fade { from { opacity: 0; } to { opacity: 1; } }
.q-modal,.q-sheet { position: fixed; z-index: var(--z-modal); background: var(--c-surface-raised); color: var(--c-text); box-shadow: var(--shadow-4); border: 1px solid var(--c-border); padding: 0; max-height: 100dvh; }
.q-modal { inset: 0; margin: auto; height: fit-content; width: min(32rem, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; border-radius: var(--radius-lg); animation: q-modal-in var(--dur-slow) var(--ease-enter); }
dialog.q-modal:not([open]),dialog.q-sheet:not([open]) { display: none; }
dialog.q-modal::backdrop,dialog.q-sheet::backdrop { background: var(--c-scrim); }
@keyframes q-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.q-modal__head,.q-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); padding: var(--space-7) var(--space-7) var(--space-4); }
.q-modal__body,.q-sheet__body { padding: 0 var(--space-7) var(--space-6); color: var(--c-text-muted); } .q-modal__foot,.q-sheet__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-5) var(--space-7) var(--space-7); }
.q-sheet { left: 0; right: 0; bottom: 0; margin: 0; width: 100%; max-width: 40rem; margin-inline: auto; border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: 0; overflow: auto; max-height: 88dvh; padding-bottom: env(safe-area-inset-bottom); animation: q-sheet-in var(--dur-slow) var(--ease-enter); }
.q-sheet::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--c-border-strong); margin: var(--space-4) auto 0; }
@keyframes q-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 1024px) { .q-sheet--side { inset: 0 0 0 auto; width: 26rem; max-width: 100vw; margin: 0; border-radius: 0; border: 0; border-left: 1px solid var(--c-border); max-height: none; height: 100dvh; animation-name: q-side-in; } .q-sheet--side::before { display: none; } }
@keyframes q-side-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
body.q-locked { overflow: hidden; }

/* ===================== TOAST ===================== */
.q-toasts { position: fixed; z-index: var(--z-toast); left: var(--space-5); right: var(--space-5); bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); pointer-events: none; }
@media (min-width: 768px) { .q-toasts { left: auto; right: var(--space-7); bottom: var(--space-7); align-items: flex-end; } }
.q-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--space-4); width: min(24rem, 100%); padding: var(--space-4) var(--space-5); background: var(--c-inverse-surface); color: var(--c-text-inverse); border-radius: var(--radius-md); box-shadow: var(--shadow-3); animation: q-toast-in var(--dur-slow) var(--ease-enter); font-size: var(--t-body-small-size); }
.q-toast.is-leaving { animation: q-toast-out var(--dur-base) var(--ease-exit) forwards; }
.q-toast__msg { flex: 1; padding-block: var(--space-2); } .q-toast .q-icon { margin-top: 3px; } .q-toast button { background: none; border: 0; color: inherit; text-decoration: underline; padding: var(--space-3); min-height: 32px; border-radius: var(--radius-xs); }
@keyframes q-toast-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes q-toast-out { to { opacity: 0; transform: translateY(8px) scale(0.97); } }

/* ===================== BADGE / STATUS / AVATAR ===================== */
.q-badge { display: inline-flex; align-items: center; gap: var(--space-2); height: 24px; padding: 0 var(--space-4); border-radius: var(--radius-full); background: var(--c-bg-subtle); color: var(--c-text-muted); border: 1px solid var(--c-border); font-size: var(--t-caption-size); font-weight: 550; line-height: 1; white-space: nowrap; }
.q-badge--accent { background: var(--c-accent-soft); color: var(--c-accent-soft-fg); border-color: transparent; }
.q-badge--success { background: var(--c-success-soft); color: var(--c-success-soft-fg); border-color: transparent; } .q-badge--warning { background: var(--c-warning-soft); color: var(--c-warning-soft-fg); border-color: transparent; }
.q-badge--danger { background: var(--c-danger-soft); color: var(--c-danger-soft-fg); border-color: transparent; } .q-badge--info { background: var(--c-info-soft); color: var(--c-info-soft-fg); border-color: transparent; }
.q-status { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--t-body-small-size); color: var(--c-text-muted); }
.q-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--_c, var(--c-text-subtle)); flex: none; }
.q-status--ok { --_c: var(--c-success); } .q-status--warn { --_c: var(--c-warning); } .q-status--error { --_c: var(--c-danger); }
.q-status--live { --_c: var(--c-accent); } .q-status--live::before { animation: q-pulse 1.8s var(--ease-standard) infinite; }
@keyframes q-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 45%, transparent); } 60% { box-shadow: 0 0 0 6px transparent; } }
.q-avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-accent-soft); color: var(--c-accent-soft-fg); font-weight: 600; font-size: 0.875rem; overflow: hidden; flex: none; }
.q-avatar img { width: 100%; height: 100%; object-fit: cover; } .q-avatar--sm { width: 28px; height: 28px; font-size: 0.75rem; } .q-avatar--lg { width: 48px; height: 48px; font-size: 1rem; }
.q-avatar--mark { background: var(--c-accent); color: var(--c-accent-fg); border-radius: var(--radius-sm); }

/* ===================== CARD / LIST / TABLE ===================== */
.q-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); padding: calc(var(--space-7) * var(--density)); box-shadow: var(--shadow-1); }
.q-card--flat { box-shadow: none; background: transparent; } .q-card--sunken { background: var(--c-surface-sunken); box-shadow: none; }
a.q-card,.q-card--interactive { display: block; color: inherit; text-decoration: none; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
a.q-card:hover,.q-card--interactive:hover { border-color: var(--c-border-strong); box-shadow: var(--shadow-2); transform: translateY(-1px); } a.q-card:active { transform: none; box-shadow: var(--shadow-1); }
.q-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-border); }
.q-list__item { display: flex; align-items: center; gap: var(--space-5); min-height: 56px; padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--c-border); color: inherit; text-decoration: none; background: transparent; width: 100%; text-align: left; border-inline: 0; border-top: 0; transition: background-color var(--dur-fast); }
a.q-list__item:hover,button.q-list__item:hover { background: var(--c-bg-subtle); } .q-list__item[aria-current="true"] { background: var(--c-accent-soft); }
.q-list__main { flex: 1; min-width: 0; } .q-list__title { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-list__meta { font-size: var(--t-caption-size); color: var(--c-text-subtle); }
.q-table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface); }
.q-table { width: 100%; border-collapse: collapse; font-size: var(--t-body-small-size); }
.q-table caption { text-align: left; padding: var(--space-5); font-weight: 600; }
.q-table th { text-align: left; font-weight: 550; color: var(--c-text-muted); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--c-border); background: var(--c-bg-subtle); white-space: nowrap; }
.q-table td { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--c-border); vertical-align: middle; } .q-table tr:last-child td { border-bottom: 0; }
.q-table tbody tr:hover td { background: color-mix(in srgb, var(--c-bg-subtle) 60%, transparent); } .q-table td.q-num,.q-table th.q-num { text-align: right; }

/* ===================== SKELETON / PROGRESS ===================== */
.q-skeleton { display: block; height: 1em; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--c-bg-subtle) 0%, var(--c-border) 50%, var(--c-bg-subtle) 100%); background-size: 200% 100%; animation: q-shimmer 1.6s linear infinite; }
.q-skeleton--block { height: 120px; border-radius: var(--radius-md); } .q-skeleton--circle { width: 36px; height: 36px; border-radius: 50%; } .q-skeleton--line { height: 0.9em; margin-top: var(--space-3); } .q-skeleton--short { width: 60%; }
@keyframes q-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.q-progress { position: relative; height: 6px; border-radius: 3px; background: var(--c-border); overflow: hidden; }
.q-progress > span { display: block; height: 100%; width: var(--value, 0%); border-radius: inherit; background: var(--c-accent); transition: width var(--dur-slow) var(--ease-standard); }
.q-progress--indeterminate > span { width: 40%; animation: q-indet 1.4s var(--ease-standard) infinite; } @keyframes q-indet { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.q-progress--success > span { background: var(--c-success); } .q-progress--error > span { background: var(--c-danger); }
.q-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--c-border-strong); border-top-color: var(--c-accent); animation: q-spin 0.8s linear infinite; }

/* ===================== NAVIGATION ===================== */
.q-shell { display: grid; min-height: 100dvh; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
.q-shell__main { min-width: 0; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.q-topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-4); min-height: 56px; padding: 0 var(--space-4); background: var(--c-bg); border-bottom: 1px solid var(--c-border); }
@supports (backdrop-filter: blur(8px)) { .q-topbar { background: color-mix(in srgb, var(--c-bg) 84%, transparent); backdrop-filter: saturate(1.4) blur(14px); } }
.q-nav-item { position: relative; display: flex; align-items: center; gap: var(--space-4); min-height: var(--control-h); padding: 0 var(--space-4); border-radius: var(--radius-sm); color: var(--c-text-muted); text-decoration: none; font-weight: 550; transition: background-color var(--dur-fast), color var(--dur-fast); }
.q-nav-item:hover { background: var(--c-bg-subtle); color: var(--c-text); } .q-nav-item:active { background: var(--c-border); }
.q-nav-item[aria-current="page"] { background: var(--c-accent-soft); color: var(--c-accent-soft-fg); }
.q-nav-item:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; } .q-nav-item .q-badge { margin-left: auto; }
.q-rail { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-3); background: var(--c-bg); border-right: 1px solid var(--c-border); }
.q-shell > .q-rail { display: none; }
.q-rail .q-nav-item { flex-direction: column; justify-content: center; width: 56px; min-height: 52px; padding: var(--space-2); gap: 2px; font-size: 0.6875rem; text-align: center; }
.q-rail__spacer { flex: 1; }
.q-bottomnav { position: fixed; z-index: var(--z-nav); left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom)); background: var(--c-surface); border-top: 1px solid var(--c-border); }
@supports (backdrop-filter: blur(8px)) { .q-bottomnav { background: color-mix(in srgb, var(--c-surface) 86%, transparent); backdrop-filter: saturate(1.4) blur(16px); } }
.q-bottomnav .q-nav-item { flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: var(--space-2); font-size: 0.75rem; text-align: center; } .q-bottomnav .q-nav-item[aria-current="page"] { background: transparent; color: var(--c-accent-text); }
.q-bottomnav .q-nav-item[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 20px; height: 3px; border-radius: 0 0 3px 3px; background: var(--c-accent); }
.q-drawer { position: fixed; z-index: var(--z-modal); inset: 0 auto 0 0; width: min(20rem, 86vw); background: var(--c-surface-raised); border-right: 1px solid var(--c-border); box-shadow: var(--shadow-4); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); animation: q-drawer-in var(--dur-slow) var(--ease-enter); overflow: auto; }
.q-drawer[hidden] { display: none; } @keyframes q-drawer-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 1024px) {
  .q-shell--rail { grid-template-columns: var(--layout-rail) 1fr; grid-template-rows: 1fr; }
  .q-shell--rail .q-shell__main { padding-bottom: 0; } .q-shell--rail .q-topbar,.q-shell--rail .q-bottomnav,.q-shell--rail .q-menu-btn { display: none; }
  .q-shell > .q-rail { display: flex; position: sticky; top: 0; height: 100dvh; }
  .q-shell--rail-expanded { grid-template-columns: var(--layout-rail-expanded) 1fr; } .q-shell--rail-expanded .q-rail { align-items: stretch; padding-inline: var(--space-4); } .q-shell--rail-expanded .q-rail .q-nav-item { flex-direction: row; width: auto; font-size: var(--t-body-size); justify-content: flex-start; gap: var(--space-4); text-align: left; padding: 0 var(--space-4); }
}
.q-sitenav { display: flex; align-items: center; gap: var(--space-8); } .q-sitenav a { color: var(--c-text-muted); text-decoration: none; font-weight: 500; padding: var(--space-3) 0; border-bottom: 2px solid transparent; } .q-sitenav a:hover { color: var(--c-text); } .q-sitenav a[aria-current="page"] { color: var(--c-text); border-color: var(--c-accent); }
@media (max-width: 767px) { .q-sitenav--collapse { display: none; } }

/* ===================== COMMAND SURFACE ===================== */
.q-command { width: min(40rem, calc(100vw - 32px)); background: var(--c-surface-raised); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-4); overflow: hidden; }
@supports (backdrop-filter: blur(8px)) { .q-command--glass { background: color-mix(in srgb, var(--c-surface-raised) 88%, transparent); backdrop-filter: blur(20px) saturate(1.3); } }
.q-command__input { display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-5); border-bottom: 1px solid var(--c-border); } .q-command__input input { flex: 1; min-height: 56px; border: 0; background: transparent; outline: none; font-size: var(--t-body-large-size); }
.q-command__input:focus-within { box-shadow: inset 0 -2px 0 var(--c-accent); }
.q-command__group { padding: var(--space-3); } .q-command__title { padding: var(--space-3) var(--space-4); font-size: var(--t-caption-size); font-weight: 550; color: var(--c-text-subtle); }
.q-command__item { display: flex; align-items: center; gap: var(--space-4); min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-sm); cursor: pointer; } .q-command__item[aria-selected="true"] { background: var(--c-accent-soft); color: var(--c-accent-soft-fg); } .q-command__item kbd { margin-left: auto; }

/* ===================== FILE / ARTIFACT / AUDIO ===================== */
.q-file { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); min-width: 0; }
.q-file__thumb { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm); background: var(--c-bg-subtle); color: var(--c-text-muted); overflow: hidden; } .q-file__thumb img { width: 100%; height: 100%; object-fit: cover; }
.q-file__name { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .q-file__meta { font-size: var(--t-caption-size); color: var(--c-text-subtle); } .q-file[data-state="uploading"] { border-color: var(--c-accent); } .q-file[data-state="error"] { border-color: var(--c-danger); background: var(--c-danger-soft); }
.q-artifact { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-1); transition: box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base); }
.q-artifact:hover { box-shadow: var(--shadow-2); border-color: var(--c-border-strong); }
.q-artifact__preview { position: relative; aspect-ratio: 16 / 9; background: var(--c-surface-sunken); display: grid; place-items: center; color: var(--c-text-subtle); border-bottom: 1px solid var(--c-border); overflow: hidden; } .q-artifact__preview img { width: 100%; height: 100%; object-fit: cover; }
.q-artifact__body { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); } .q-artifact__title { font-weight: 600; } .q-artifact__actions { display: flex; gap: var(--space-2); margin-left: auto; }
.q-audio { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-full); max-width: 26rem; }
.q-audio__bar { flex: 1; min-width: 0; } .q-audio__time { font-size: var(--t-caption-size); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.q-audio .q-slider { height: 28px; }

/* ===================== WAVEFORM ===================== */
/* JS sets --h (0..1) on each .q-wave__bar and data-state on .q-wave. CSS handles state colour + non-amplitude animations. */
.q-wave { --_c: var(--c-accent); display: flex; align-items: center; justify-content: center; gap: 4px; height: 96px; width: 100%; max-width: 22rem; margin-inline: auto; color: var(--_c); }
.q-wave--sm { height: 32px; gap: 3px; max-width: 8rem; margin: 0; }
.q-wave__bar { flex: 1; max-width: 6px; min-width: 2px; height: 100%; border-radius: 3px; background: currentColor; transform: scaleY(var(--h, 0.06)); transform-origin: center; transition: transform 70ms linear, background-color var(--dur-base) var(--ease-standard), opacity var(--dur-base); will-change: transform; }
.q-wave[data-state="idle"] { --_c: var(--c-wave-idle); } .q-wave[data-state="idle"] .q-wave__bar { --h: 0.06; opacity: 0.8; }
.q-wave[data-state="listening"] { --_c: var(--c-accent); } .q-wave[data-state="speaking"] { --_c: var(--c-accent-text); } .q-wave[data-state="speaking"] .q-wave__bar { opacity: 0.85; }
.q-wave[data-state="thinking"] { --_c: var(--c-text-muted); } .q-wave[data-state="thinking"] .q-wave__bar { transition: none; animation: q-think 1.6s var(--ease-standard) infinite; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes q-think { 0%,100% { transform: scaleY(0.08); opacity: 0.5; } 40% { transform: scaleY(0.34); opacity: 1; } }
.q-wave[data-state="interrupted"] { --_c: var(--c-warning); } .q-wave[data-state="interrupted"] .q-wave__bar { transition: transform 160ms var(--ease-exit); --h: 0.06; }
.q-wave[data-state="reconnecting"] { --_c: var(--c-text-subtle); } .q-wave[data-state="reconnecting"] .q-wave__bar { --h: 0.1; transition: none; animation: q-reconnect 1.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes q-reconnect { 0%,100% { opacity: 0.2; } 50% { opacity: 0.8; } }
.q-wave[data-state="error"] { --_c: var(--c-danger); } .q-wave[data-state="error"] .q-wave__bar { --h: 0.06; }
.q-wave[data-reduced="true"] .q-wave__bar { transition: none; animation: none !important; }
/* voice surface */
.q-voice { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; flex-direction: column; background: var(--c-bg); padding: var(--space-5) var(--space-5) calc(var(--space-7) + env(safe-area-inset-bottom)); animation: q-fade var(--dur-slow) var(--ease-standard); }
.q-voice[hidden] { display: none; } .q-voice--inline { position: relative; inset: auto; z-index: 0; border: 1px solid var(--c-border); border-radius: var(--radius-lg); min-height: 34rem; animation: none; }
.q-voice__stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-7); text-align: center; min-height: 0; }
.q-voice__state { font: 500 var(--t-h2-size)/1.2 var(--t-h2-font); letter-spacing: var(--t-h2-tracking); }
.q-voice__caption { color: var(--c-text-muted); min-height: 3em; max-width: 28rem; text-wrap: balance; }
.q-voice__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-8); padding-top: var(--space-5); } /* thumb zone: bottom, centered */
.q-voice__mic { width: 72px; height: 72px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--c-accent); color: var(--c-accent-fg); box-shadow: var(--shadow-3); transition: transform var(--dur-fast) var(--ease-standard), background-color var(--dur-fast); }
.q-voice__mic:hover { background: var(--c-accent-hover); } .q-voice__mic:active { transform: scale(0.94); } .q-voice__mic[aria-pressed="true"] { background: var(--c-danger); color: var(--c-bg); } .q-voice__mic .q-icon { width: 28px; height: 28px; }
.q-voice__mic:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.q-voice__side { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--c-border-control); background: var(--c-surface); color: var(--c-text); display: grid; place-items: center; } .q-voice__side:hover { background: var(--c-bg-subtle); }
.q-voice__banner { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--c-warning-soft); color: var(--c-warning-soft-fg); font-size: var(--t-body-small-size); }
.q-voice__banner[data-tone="error"] { background: var(--c-danger-soft); color: var(--c-danger-soft-fg); }

/* ===================== CONVERSATION ===================== */
.q-thread { display: flex; flex-direction: column; gap: var(--space-8); width: 100%; max-width: var(--layout-content); margin-inline: auto; overflow-anchor: auto; }
.q-msg { display: flex; gap: var(--space-5); min-width: 0; } .q-msg--user { flex-direction: row-reverse; }
.q-bubble { min-width: 0; max-width: min(100%, 38rem); font-size: var(--t-body-size); line-height: 1.65; overflow-wrap: anywhere; white-space: pre-wrap; }
.q-bubble--user { background: var(--c-bg-subtle); border: 1px solid var(--c-border); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg); }
.q-bubble--assistant { padding-top: 3px; flex: 1; }
.q-bubble--assistant > * + * { margin-top: var(--space-4); } .q-bubble p { white-space: normal; }
/* streaming: container min-height reserved by JS/prop, text appended in place; caret does not shift layout */
.q-stream { contain: layout style; min-height: calc(1.65em * var(--lines, 1)); }
.q-stream[data-streaming="true"]:not(:has(> *))::after,.q-stream[data-streaming="true"] > :last-child::after { content: ""; display: inline-block; width: 0.5em; height: 1.05em; margin-left: 2px; vertical-align: text-bottom; border-radius: 2px; background: var(--c-accent); animation: q-caret 1s steps(2, jump-none) infinite; }
@keyframes q-caret { 0% { opacity: 1; } 100% { opacity: 0.15; } }
.q-msg__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); opacity: 0; transition: opacity var(--dur-fast); } .q-msg:hover .q-msg__actions,.q-msg:focus-within .q-msg__actions { opacity: 1; } @media (hover: none) { .q-msg__actions { opacity: 1; } }
.q-thinking { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--c-text-muted); font-size: var(--t-body-small-size); } .q-thinking i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: q-dot 1.2s ease-in-out infinite; } .q-thinking i:nth-child(2) { animation-delay: .15s; } .q-thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes q-dot { 0%,80%,100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.q-composer { display: flex; align-items: flex-end; gap: var(--space-2); padding: var(--space-3); background: var(--c-surface); border: 1px solid var(--c-border-control); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.q-composer:focus-within { border-color: var(--c-focus); box-shadow: var(--shadow-2), 0 0 0 3px color-mix(in srgb, var(--c-focus) 25%, transparent); }
.q-composer textarea { flex: 1; min-width: 0; border: 0; background: transparent; resize: none; padding: 10px var(--space-3); min-height: var(--control-h); max-height: 10rem; line-height: 1.5; outline: none; field-sizing: content; }
.q-composer textarea::placeholder { color: var(--c-text-subtle); }

/* ===================== TASK STATE ===================== */
.q-task { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-md); }
.q-task__head { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--c-border); } .q-task__title { font-weight: 600; flex: 1; min-width: 0; }
.q-steps { list-style: none; margin: 0; padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; }
.q-step { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: var(--space-5); padding-bottom: var(--space-6); }
.q-step:last-child { padding-bottom: 0; } .q-step:not(:last-child)::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 2px; background: var(--c-border); border-radius: 1px; }
.q-step[data-status="done"]:not(:last-child)::before { background: var(--c-accent); opacity: 0.45; }
.q-step__dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--c-border-control); background: var(--c-surface); color: var(--c-accent-fg); margin-top: 1px; } .q-step__dot .q-icon { width: 14px; height: 14px; stroke-width: 2.5; display: none; }
.q-step[data-status="done"] .q-step__dot { background: var(--c-accent); border-color: var(--c-accent); } .q-step[data-status="done"] .q-icon--done { display: block; }
.q-step[data-status="active"] .q-step__dot { border-color: var(--c-accent); border-top-color: transparent; animation: q-spin 1s linear infinite; }
.q-step[data-status="error"] .q-step__dot { background: var(--c-danger); border-color: var(--c-danger); color: var(--c-bg); } .q-step[data-status="error"] .q-icon--fail { display: block; }
.q-step[data-status="pending"] { color: var(--c-text-subtle); } .q-step__title { font-weight: 550; line-height: 1.5; } .q-step__text { color: var(--c-text-muted); font-size: var(--t-body-small-size); margin-top: var(--space-2); } .q-step[data-status="pending"] .q-step__text { color: var(--c-text-subtle); }
.q-step[data-status="error"] .q-step__title { color: var(--c-danger); }

/* ===================== ERROR / EMPTY ===================== */
.q-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-5); padding: var(--space-11) var(--space-6); max-width: 28rem; margin-inline: auto; }
.q-state__art { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-lg); background: var(--c-accent-soft); color: var(--c-accent-soft-fg); } .q-state__art .q-icon { width: 28px; height: 28px; }
.q-state--error .q-state__art { background: var(--c-danger-soft); color: var(--c-danger-soft-fg); } .q-state__title { font: var(--t-h3-weight) var(--t-h3-size)/var(--t-h3-line) var(--t-h3-font); } .q-state__text { color: var(--c-text-muted); text-wrap: balance; }
.q-alert { display: flex; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-md); background: var(--c-info-soft); color: var(--c-info-soft-fg); }
.q-alert--error { background: var(--c-danger-soft); color: var(--c-danger-soft-fg); } .q-alert--success { background: var(--c-success-soft); color: var(--c-success-soft-fg); } .q-alert--warning { background: var(--c-warning-soft); color: var(--c-warning-soft-fg); } .q-alert .q-icon { margin-top: 2px; }

/* ===================== DATA VIZ ===================== */
.q-viz { --viz-1: var(--c-accent); --viz-2: var(--c-text-muted); --viz-grid: var(--c-border); }
.q-viz text { fill: var(--c-text-muted); font-size: 12px; font-family: var(--font-sans); } .q-viz .grid { stroke: var(--viz-grid); stroke-width: 1; }

/* ===================== UTIL / MOTION ===================== */
.q-enter { animation: q-enter var(--dur-slow) var(--ease-enter) both; } @keyframes q-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .q-skeleton { animation: none; } .q-progress--indeterminate > span { animation: none; width: 100%; opacity: .5; } .q-btn[aria-busy="true"]::after,.q-spinner { animation-duration: 2s !important; animation-iteration-count: infinite !important; }
  .q-wave[data-state="thinking"] .q-wave__bar { --h: 0.2; opacity: .7; } .q-status--live::before { animation: none; }
}
@media (forced-colors: active) { .q-btn,.q-input,.q-card { border: 1px solid CanvasText; } .q-toggle__track { border: 1px solid CanvasText; } }