/* =====================================================================
   SIGNAL — theCUBE.net design system
   One file. No build, no network, no external font.

   Token layers
     1. Primitive   --p-*     raw scales, never used by components
     2. Semantic    --*       purpose-named roles, theme-switched
     3. Component   --btn-* --field-* --card-* ...  reference semantic only

   Selectors
     :root                        light (default)
     [data-theme="dark"]          dark
     [data-contrast="high"]       high-contrast overlay
     [data-density="compact"]     compact density
   ===================================================================== */

/* ---------- 1. PRIMITIVES --------------------------------------------- */
:root {
  --p-n-0:    #FFFFFF;
  --p-n-50:   #F6F8F9;
  --p-n-100:  #EEF2F4;
  --p-n-200:  #DDE4E8;
  --p-n-300:  #C3CED4;
  --p-n-400:  #9AAAB3;
  --p-n-500:  #6E8390;
  --p-n-600:  #4F6370;
  --p-n-700:  #34495A;
  --p-n-800:  #1E3242;
  --p-n-900:  #0F2B3C;
  --p-n-950:  #071C29;
  --p-n-1000: #00121D;

  --p-c-50:  #E6F8FC;
  --p-c-100: #C4EEF7;
  --p-c-200: #8EDFF0;
  --p-c-300: #52CBE8;
  --p-c-400: #14B6DB;
  --p-c-500: #0E9BBC;
  --p-c-600: #0B7F9B;
  --p-c-700: #0A6579;
  --p-c-800: #094E5E;
  --p-c-900: #073B47;

  --p-b-100: #DCEBF6;
  --p-b-300: #7FC0E2;
  --p-b-400: #339FCD;
  --p-b-600: #1D6FA0;
  --p-b-700: #17587F;

  --p-g-100: #DDF3E4;
  --p-g-300: #7FD1A0;
  --p-g-500: #2A9D5C;
  --p-g-600: #1F8A4C;
  --p-g-700: #166A3B;
  --p-g-900: #10301F;

  --p-a-100: #FDF0D5;
  --p-a-300: #F1C670;
  --p-a-500: #C9860B;
  --p-a-600: #9A6300;
  --p-a-700: #7A4F00;
  --p-a-900: #3A2A08;

  --p-r-100: #FBE3E3;
  --p-r-300: #F09B95;
  --p-r-500: #DC4A3C;
  --p-r-600: #C0392B;
  --p-r-700: #9E2B20;
  --p-r-900: #3F1512;

  --p-live-500: #D6273E;
  --p-live-300: #FF6B78;

  --p-v-400: #7C6CE0;
  --p-t-400: #1FA39A;
  --p-m-400: #C4519A;

  --p-space-0: 0; --p-space-1: 2px; --p-space-2: 4px; --p-space-3: 6px; --p-space-4: 8px;
  --p-space-5: 12px; --p-space-6: 16px; --p-space-7: 20px; --p-space-8: 24px;
  --p-space-9: 32px; --p-space-10: 40px; --p-space-11: 48px; --p-space-12: 64px;
  --p-space-13: 80px; --p-space-14: 96px; --p-space-15: 128px;

  --p-text-11: 11px; --p-text-12: 12px; --p-text-13: 13px; --p-text-14: 14px;
  --p-text-16: 16px; --p-text-18: 18px; --p-text-22: 22px; --p-text-28: 28px;
  --p-text-36: 36px;

  --p-radius-0: 0; --p-radius-2: 2px; --p-radius-4: 4px; --p-radius-6: 6px;
  --p-radius-10: 10px; --p-radius-14: 14px; --p-radius-999: 999px;

  --p-opacity-0: 0; --p-opacity-40: .4; --p-opacity-60: .6; --p-opacity-80: .8; --p-opacity-100: 1;
  --p-dur-80: 80ms; --p-dur-140: 140ms; --p-dur-220: 220ms; --p-dur-320: 320ms;
}

/* ---------- 2. SEMANTIC (light) --------------------------------------- */
:root {
  color-scheme: light;
  --bg-canvas:    var(--p-n-0);
  --bg-surface-1: var(--p-n-0);
  --bg-surface-2: var(--p-n-50);
  --bg-surface-3: var(--p-n-100);
  --bg-raised:    var(--p-n-0);
  --bg-overlay:   var(--p-n-0);
  --bg-inverse:   var(--p-n-900);
  --bg-scrim:     rgba(0, 18, 29, .56);
  --bg-skeleton:  var(--p-n-100);
  --bg-skeleton-2:var(--p-n-200);
  --bg-selected:  var(--p-c-50);
  --bg-hover:     var(--p-n-50);
  --bg-active:    var(--p-n-100);
  --bg-disabled:  var(--p-n-100);
  --bg-brand:     var(--p-c-400);
  --bg-brand-hover: var(--p-c-500);
  --bg-brand-subtle: var(--p-c-50);
  --bg-accent:    var(--p-n-900);
  --bg-accent-hover: var(--p-n-800);
  --bg-success-subtle: var(--p-g-100);
  --bg-warning-subtle: var(--p-a-100);
  --bg-danger-subtle:  var(--p-r-100);
  --bg-info-subtle:    var(--p-b-100);
  --bg-success: var(--p-g-600);
  --bg-warning: var(--p-a-600);
  --bg-danger:  var(--p-r-600);
  --bg-danger-hover: var(--p-r-700);
  --bg-info:    var(--p-b-600);
  --bg-live:    var(--p-live-500);
  --bg-code:    var(--p-n-950);
  /* on-media chrome: sits over video and dark posters in both themes */
  --media-scrim:        rgba(0, 18, 29, .82);
  --media-scrim-soft:   rgba(0, 18, 29, .3);
  --media-scrim-strong: rgba(0, 18, 29, .92);
  --media-chrome:       rgba(0, 18, 29, .9);
  --media-chapter:      rgba(0, 18, 29, .7);
  --on-media-fill:      rgba(255, 255, 255, .14);
  --on-media-hover:     rgba(255, 255, 255, .12);
  --on-media-border:    rgba(255, 255, 255, .35);
  --on-media-track:     rgba(255, 255, 255, .25);
  --on-media-muted:     rgba(255, 255, 255, .8);
  --on-media-dim:       rgba(255, 255, 255, .3);
  --on-media-kbd:       rgba(255, 255, 255, .2);
  --poster-rule:        rgba(20, 182, 219, .25);
  --bg-inverse-hover:   rgba(255, 255, 255, .12);
  --bg-inverse-hover-soft: rgba(255, 255, 255, .08);

  --text-primary:   var(--p-n-900);
  --text-secondary: var(--p-n-600);
  --text-tertiary:  var(--p-n-500);
  --text-disabled:  var(--p-n-400);
  --text-inverse:   var(--p-n-0);
  --text-link:      var(--p-c-700);
  --text-link-hover:var(--p-c-800);
  --text-brand:     var(--p-c-700);
  --text-on-brand:  var(--p-n-1000);
  --text-on-accent: var(--p-n-0);
  --text-on-live:   var(--p-n-0);
  --text-success:   var(--p-g-700);
  --text-warning:   var(--p-a-700);
  --text-danger:    var(--p-r-700);
  --text-info:      var(--p-b-700);
  --text-on-status: var(--p-n-0);
  --text-code:      var(--p-n-100);

  --icon-primary:   var(--p-n-700);
  --icon-secondary: var(--p-n-500);
  --icon-disabled:  var(--p-n-400);
  --icon-brand:     var(--p-c-500);

  --border-subtle:      var(--p-n-100);
  --border-default:     var(--p-n-200);
  --border-strong:      var(--p-n-400);
  --border-interactive: var(--p-n-500);
  --border-brand:       var(--p-c-400);
  --border-success:     var(--p-g-500);
  --border-warning:     var(--p-a-500);
  --border-danger:      var(--p-r-500);
  --border-info:        var(--p-b-400);
  --border-inverse:     var(--p-n-700);

  --focus-ring:        var(--p-c-400);
  --focus-ring-inner:  var(--bg-canvas);
  --focus-ring-width:  2px;
  --selection-bg:      var(--p-c-100);
  --selection-text:    var(--p-n-900);

  --chart-1: var(--p-c-400);
  --chart-2: var(--p-n-900);
  --chart-3: var(--p-b-400);
  --chart-4: var(--p-a-500);
  --chart-5: var(--p-v-400);
  --chart-6: var(--p-t-400);
  --chart-7: var(--p-m-400);
  --chart-8: var(--p-n-400);
  --chart-seq-1: var(--p-c-50);
  --chart-seq-2: var(--p-c-100);
  --chart-seq-3: var(--p-c-200);
  --chart-seq-4: var(--p-c-400);
  --chart-seq-5: var(--p-c-600);
  --chart-seq-6: var(--p-c-800);
  --chart-grid:  var(--p-n-100);
  --chart-axis:  var(--p-n-500);
  --chart-reference: var(--p-r-600);

  --syntax-bg:      var(--bg-code);
  --syntax-text:    var(--p-n-100);
  --syntax-comment: var(--p-n-400);
  --syntax-keyword: var(--p-c-300);
  --syntax-string:  var(--p-g-300);
  --syntax-number:  var(--p-a-300);
  --syntax-tag:     var(--p-b-300);
  --syntax-attr:    var(--p-c-200);
  --syntax-punct:   var(--p-n-300);

  --font-ui:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-ui);
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --text-2xs: var(--p-text-11);
  --text-xs:  var(--p-text-12);
  --text-sm:  var(--p-text-13);
  --text-md:  var(--p-text-14);
  --text-lg:  var(--p-text-16);
  --text-xl:  var(--p-text-18);
  --text-2xl: var(--p-text-22);
  --text-3xl: var(--p-text-28);
  --text-4xl: var(--p-text-36);
  --text-display: clamp(34px, 2.4vw + 22px, 56px);
  --text-display-lg: clamp(40px, 4vw + 20px, 72px);
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65;
  --tracking-tight: -0.022em; --tracking-snug: -0.012em; --tracking-normal: 0; --tracking-wide: 0.06em;
  --measure: 68ch;
  --measure-narrow: 48ch;

  --space-hairline: var(--p-space-1);
  --space-3xs: var(--p-space-2);
  --space-2xs: var(--p-space-3);
  --space-xs:  var(--p-space-4);
  --space-sm:  var(--p-space-5);
  --space-md:  var(--p-space-6);
  --space-lg:  var(--p-space-8);
  --space-xl:  var(--p-space-9);
  --space-2xl: var(--p-space-11);
  --space-3xl: var(--p-space-12);
  --space-4xl: var(--p-space-14);
  --space-inset-sm: var(--space-xs);
  --space-inset-md: var(--space-md);
  --space-inset-lg: var(--space-lg);
  --space-stack-sm: var(--space-xs);
  --space-stack-md: var(--space-md);
  --space-stack-lg: var(--space-xl);
  --space-section: var(--space-3xl);
  --gap-sm: var(--space-xs);
  --gap-md: var(--space-md);
  --gap-lg: var(--space-lg);

  --control-h-sm: 28px;
  --control-h-md: 36px;
  --control-h-lg: 44px;
  --touch-target: 44px;
  --icon-xs: 12px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; --icon-xl: 32px;
  --avatar-xs: 20px; --avatar-sm: 24px; --avatar-md: 32px; --avatar-lg: 40px; --avatar-xl: 56px; --avatar-2xl: 96px;
  --width-prose: 68ch;
  --width-content: 760px;
  --width-wide: 1120px;
  --width-container: 1280px;
  --width-sidebar: 264px;
  --width-rail: 56px;
  --grid-columns: 12;
  --grid-gutter: var(--space-lg);
  --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px;
  --border-w-1: 1px; --border-w-2: 2px; --border-w-3: 3px;
  --radius-none: var(--p-radius-0);
  --radius-xs: var(--p-radius-2);
  --radius-sm: var(--p-radius-4);
  --radius-md: var(--p-radius-6);
  --radius-lg: var(--p-radius-10);
  --radius-xl: var(--p-radius-14);
  --radius-full: var(--p-radius-999);
  --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300;
  --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --opacity-disabled: var(--p-opacity-40);
  --opacity-muted: var(--p-opacity-60);
  --opacity-hover: var(--p-opacity-80);

  --shadow-1: 0 1px 2px rgba(15,43,60,.06), 0 1px 1px rgba(15,43,60,.04);
  --shadow-2: 0 4px 12px rgba(15,43,60,.09), 0 1px 3px rgba(15,43,60,.05);
  --shadow-3: 0 16px 40px rgba(15,43,60,.16), 0 2px 6px rgba(15,43,60,.07);
  --shadow-focus: 0 0 0 var(--focus-ring-width) var(--focus-ring-inner), 0 0 0 calc(var(--focus-ring-width) * 2) var(--focus-ring);

  --dur-1: var(--p-dur-80);
  --dur-2: var(--p-dur-140);
  --dur-3: var(--p-dur-220);
  --dur-4: var(--p-dur-320);
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-enter:    cubic-bezier(0, 0, .2, 1);
  --ease-exit:     cubic-bezier(.4, 0, 1, 1);
  --ease-emphasis: cubic-bezier(.3, 0, 0, 1);

  /* ---------- 3. COMPONENT TOKENS ------------------------------------- */
  --btn-h: var(--control-h-md);
  --btn-px: var(--space-sm);
  --btn-radius: var(--radius-sm);
  --btn-text: var(--text-sm);
  --btn-weight: var(--weight-medium);
  --btn-primary-bg: var(--bg-accent);
  --btn-primary-bg-hover: var(--bg-accent-hover);
  --btn-primary-text: var(--text-on-accent);
  --btn-brand-bg: var(--bg-brand);
  --btn-brand-bg-hover: var(--bg-brand-hover);
  --btn-brand-text: var(--text-on-brand);
  --btn-secondary-bg: var(--bg-surface-1);
  --btn-secondary-border: var(--border-strong);
  --btn-secondary-text: var(--text-primary);
  --btn-danger-bg: var(--bg-danger);
  --btn-danger-bg-hover: var(--bg-danger-hover);
  --btn-danger-text: var(--text-on-status);

  --field-h: var(--control-h-md);
  --field-px: var(--space-sm);
  --field-bg: var(--bg-surface-1);
  --field-border: var(--border-strong);
  --field-border-hover: var(--border-interactive);
  --field-border-focus: var(--focus-ring);
  --field-radius: var(--radius-sm);
  --field-text: var(--text-primary);
  --field-placeholder: var(--text-tertiary);

  --card-bg: var(--bg-surface-1);
  --card-border: var(--border-default);
  --card-radius: var(--radius-md);
  --card-padding: var(--space-md);

  --menu-bg: var(--bg-raised);
  --menu-radius: var(--radius-md);
  --menu-item-h: 32px;
  --menu-shadow: var(--shadow-2);

  --dialog-bg: var(--bg-overlay);
  --dialog-radius: var(--radius-lg);
  --dialog-max-w: 560px;
  --dialog-shadow: var(--shadow-3);

  --table-row-h: 44px;
  --table-header-bg: var(--bg-surface-2);
  --table-border: var(--border-default);

  --tooltip-bg: var(--bg-inverse);
  --tooltip-text: var(--text-inverse);
  --toast-bg: var(--bg-inverse);
  --toast-text: var(--text-inverse);

  --badge-h: 20px;
  --tag-h: 24px;
  --nav-item-h: 32px;
  --header-h: 56px;
  --player-bg: var(--p-n-1000);
}

/* ---------- 2b. SEMANTIC (dark) --------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas:    var(--p-n-1000);
  --bg-surface-1: var(--p-n-950);
  --bg-surface-2: var(--p-n-900);
  --bg-surface-3: var(--p-n-800);
  --bg-raised:    var(--p-n-900);
  --bg-overlay:   var(--p-n-950);
  --bg-inverse:   var(--p-n-50);
  --bg-scrim:     rgba(0, 0, 0, .64);
  --bg-skeleton:  var(--p-n-900);
  --bg-skeleton-2:var(--p-n-800);
  --bg-selected:  #0E3A4C;
  --bg-hover:     var(--p-n-950);
  --bg-active:    var(--p-n-900);
  --bg-disabled:  var(--p-n-900);
  --bg-brand-subtle: #0B2F3C;
  --bg-accent:    var(--p-n-50);
  --bg-accent-hover: var(--p-n-0);
  --bg-success-subtle: var(--p-g-900);
  --bg-warning-subtle: var(--p-a-900);
  --bg-danger-subtle:  var(--p-r-900);
  --bg-info-subtle:    #0F2E45;
  --bg-success: var(--p-g-500);
  --bg-warning: var(--p-a-500);
  --bg-danger:  var(--p-r-500);
  --bg-danger-hover: var(--p-r-600);
  --bg-info:    var(--p-b-400);
  --bg-live:    var(--p-live-300);
  --bg-code:    var(--p-n-950);
  --bg-inverse-hover: rgba(0, 0, 0, .08);
  --bg-inverse-hover-soft: rgba(0, 0, 0, .06);
  --text-primary:   #E7F0F1;
  --text-secondary: #B6C6CC;
  --text-tertiary:  #8CA2AB;
  --text-disabled:  var(--p-n-600);
  --text-inverse:   var(--p-n-1000);
  --text-link:      var(--p-c-300);
  --text-link-hover:var(--p-c-200);
  --text-brand:     var(--p-c-300);
  --text-on-accent: var(--p-n-1000);
  --text-on-live:   var(--p-n-1000);
  --text-success:   var(--p-g-300);
  --text-warning:   var(--p-a-300);
  --text-danger:    var(--p-r-300);
  --text-info:      var(--p-b-300);
  --text-on-status: var(--p-n-1000);
  --icon-primary:   #B6C6CC;
  --icon-secondary: #8CA2AB;
  --icon-disabled:  var(--p-n-600);
  --icon-brand:     var(--p-c-300);
  --border-subtle:      #16303F;
  --border-default:     #27506A;
  --border-strong:      #4E6C7D;
  --border-interactive: #6E8390;
  --border-success:     var(--p-g-300);
  --border-warning:     var(--p-a-300);
  --border-danger:      var(--p-r-300);
  --border-info:        var(--p-b-300);
  --border-inverse:     var(--p-n-300);
  --selection-bg:  #2A5F79;
  --selection-text:var(--p-n-0);
  --chart-2: var(--p-n-100);
  --chart-8: var(--p-n-600);
  --chart-seq-1: #0B2F3C; --chart-seq-2: var(--p-c-900); --chart-seq-3: var(--p-c-700);
  --chart-seq-4: var(--p-c-500); --chart-seq-5: var(--p-c-300); --chart-seq-6: var(--p-c-100);
  --chart-grid:  var(--p-n-800);
  --chart-axis:  var(--p-n-400);
  --chart-reference: var(--p-r-300);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 14px rgba(0,0,0,.5), 0 0 0 1px var(--border-subtle);
  --shadow-3: 0 16px 40px rgba(0,0,0,.6), 0 0 0 1px var(--border-default);
  --btn-secondary-bg: var(--bg-surface-2);
  --field-bg: var(--bg-surface-2);
  --tooltip-text: var(--p-n-1000);
  --toast-text: var(--p-n-1000);
}

/* ---------- 2c. HIGH CONTRAST ----------------------------------------- */
[data-contrast="high"] {
  --text-secondary: var(--text-primary);
  --text-tertiary:  var(--p-n-700);
  --border-subtle:  var(--p-n-300);
  --border-default: var(--p-n-500);
  --border-strong:  var(--p-n-700);
  --focus-ring-width: 3px;
  --bg-hover: var(--p-n-100);
}
[data-theme="dark"][data-contrast="high"] {
  --text-tertiary: #C9D6DB;
  --border-subtle:  #4E6C7D;
  --border-default: #6E8390;
  --border-strong:  #9AAAB3;
  --bg-hover: var(--p-n-800);
}

/* ---------- 2d. DENSITY ----------------------------------------------- */
[data-density="compact"] {
  --control-h-sm: 24px;
  --control-h-md: 30px;
  --control-h-lg: 38px;
  --space-inset-sm: var(--space-2xs);
  --space-inset-md: var(--space-sm);
  --space-inset-lg: var(--space-md);
  --space-stack-sm: var(--space-2xs);
  --space-stack-md: var(--space-sm);
  --space-stack-lg: var(--space-lg);
  --space-section: var(--space-xl);
  --gap-md: var(--space-sm);
  --gap-lg: var(--space-md);
  --table-row-h: 34px;
  --menu-item-h: 28px;
  --nav-item-h: 28px;
  --card-padding: var(--space-sm);
  --header-h: 48px;
  --btn-text: var(--text-xs);
}


/* ===== part02.css ===== */

/* =====================================================================
   BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--space-md)); }
body {
  margin: 0; font-family: var(--font-ui); font-size: var(--text-md); line-height: var(--leading-normal);
  color: var(--text-primary); background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--text-link-hover); }
::selection { background: var(--selection-bg); color: var(--selection-text); }
hr { border: 0; border-top: 1px solid var(--border-default); margin: 0; }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.92em; }
:where(a, button, input, select, textarea, summary, [tabindex], [contenteditable]):focus-visible {
  outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm);
}
:where(input, select, textarea):focus-visible { border-radius: inherit; }
[data-focus="show"] :where(a, button, input, select, textarea, summary, [tabindex]):focus { outline: none; box-shadow: var(--shadow-focus); }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: var(--space-md); top: -100px; z-index: var(--z-tooltip); padding: var(--space-xs) var(--space-sm); background: var(--bg-accent); color: var(--text-on-accent); border-radius: var(--radius-sm); font-weight: var(--weight-medium); text-decoration: none; }
.skip-link:focus { top: var(--space-md); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
[data-motion="reduce"] *, [data-motion="reduce"] *::before, [data-motion="reduce"] *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
[data-motion="reduce"] html { scroll-behavior: auto; }

/* =====================================================================
   TYPOGRAPHY
   ===================================================================== */
.t-display-lg { font-family: var(--font-display); font-size: var(--text-display-lg); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.t-display    { font-family: var(--font-display); font-size: var(--text-display); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.t-h1 { font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); text-wrap: balance; }
.t-h2 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); text-wrap: balance; }
.t-h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
.t-h4 { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.t-title { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.t-body-lg { font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.t-body { font-size: var(--text-md); line-height: var(--leading-normal); }
.t-body-sm { font-size: var(--text-sm); line-height: var(--leading-normal); }
.t-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-secondary); }
.t-caption { font-size: var(--text-xs); color: var(--text-secondary); line-height: var(--leading-normal); }
.t-metric { font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: 1; font-variant-numeric: tabular-nums; }
.t-metric-lg { font-size: var(--text-4xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: 1; font-variant-numeric: tabular-nums; }
.t-mono { font-family: var(--font-mono); font-size: var(--text-xs); }
.t-secondary { color: var(--text-secondary); }
.t-tertiary { color: var(--text-tertiary); }
.t-inverse { color: var(--text-inverse); }
.t-danger { color: var(--text-danger); }
.t-success { color: var(--text-success); }
.t-warning { color: var(--text-warning); }
.t-brand { color: var(--text-brand); }
.tnum { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.measure { max-width: var(--measure); }
.break-anywhere { overflow-wrap: anywhere; }
.prose { max-width: var(--width-prose); font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.prose > * + * { margin-top: var(--space-md); }
.prose h2 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); margin-top: var(--space-xl); line-height: var(--leading-snug); }
.prose h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); margin-top: var(--space-lg); }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li + li { margin-top: var(--space-2xs); }
.prose blockquote { border-inline-start: 3px solid var(--border-brand); padding-inline-start: var(--space-md); color: var(--text-secondary); font-style: italic; }
.prose figcaption { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-xs); }
.prose .lede { font-size: var(--text-xl); color: var(--text-secondary); }
.inline-code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg-surface-3); padding: 1px var(--space-2xs); border-radius: var(--radius-xs); }
.code-block { background: var(--syntax-bg); color: var(--syntax-text); padding: var(--space-md); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; overflow-x: auto; margin: 0; tab-size: 2; }
.code-block .c { color: var(--syntax-comment); } .code-block .k { color: var(--syntax-keyword); } .code-block .s { color: var(--syntax-string); }
.code-block .n { color: var(--syntax-number); } .code-block .t { color: var(--syntax-tag); } .code-block .a { color: var(--syntax-attr); } .code-block .p { color: var(--syntax-punct); }
.code-block.lined { counter-reset: line; }
.code-block.lined > span { display: block; counter-increment: line; }
.code-block.lined > span::before { content: counter(line); display: inline-block; width: 2.4em; color: var(--syntax-comment); text-align: end; margin-inline-end: var(--space-md); user-select: none; }
.kbd { display: inline-block; min-width: 1.6em; padding: 0 var(--space-2xs); font-family: var(--font-mono); font-size: var(--text-2xs); line-height: 18px; text-align: center; color: var(--text-secondary); background: var(--bg-surface-2); border: 1px solid var(--border-default); border-bottom-width: 2px; border-radius: var(--radius-sm); }
.blockquote { border-inline-start: 3px solid var(--border-brand); padding-inline-start: var(--space-md); font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.blockquote cite { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--text-secondary); font-style: normal; }
.list { padding-inline-start: 1.3em; line-height: var(--leading-relaxed); }
.list li + li { margin-top: var(--space-3xs); }
.list-plain { list-style: none; }
.desc-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2xs) var(--space-lg); }
.desc-list dt { color: var(--text-secondary); font-size: var(--text-sm); }
.desc-list dd { font-size: var(--text-sm); }
.link { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.link-quiet { color: inherit; text-decoration: none; }
.link-quiet:hover { color: var(--text-link); text-decoration: underline; }
.link-external::after { content: "↗"; margin-inline-start: 0.2em; font-size: .85em; }
.mark { background: var(--selection-bg); color: var(--selection-text); padding: 0 1px; border-radius: var(--radius-xs); }
.expandable { position: relative; }
.expandable.is-collapsed .expandable-body { max-height: 4.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
time { font-variant-numeric: tabular-nums; }
.timestamp { font-size: var(--text-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.timecode { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* =====================================================================
   LAYOUT PRIMITIVES
   ===================================================================== */
.box { padding: var(--space-inset-md); }
.container { width: 100%; max-width: var(--width-container); margin-inline: auto; padding-inline: var(--space-md); }
.container-content { max-width: var(--width-content); }
.container-wide { max-width: var(--width-wide); }
@container (min-width: 768px) { .container { padding-inline: var(--space-lg); } }
.center { display: grid; place-items: center; text-align: center; }
.center-x { margin-inline: auto; max-width: max-content; }
.stack { display: flex; flex-direction: column; gap: var(--gap-md); }
.stack-sm { gap: var(--gap-sm); } .stack-lg { gap: var(--gap-lg); } .stack-xl { gap: var(--space-xl); } .stack-0 { gap: 0; }
.inline { display: flex; align-items: center; gap: var(--gap-sm); flex-wrap: nowrap; min-width: 0; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-sm); }
.cluster-md { gap: var(--gap-md); }
.flex { display: flex; gap: var(--gap-md); }
.flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; }
.grow { flex: 1 1 auto; min-width: 0; } .shrink-0 { flex-shrink: 0; } .ml-auto { margin-inline-start: auto; }
.grid { display: grid; gap: var(--gap-md); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.grid-auto-sm { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); }
.grid-12 { grid-template-columns: repeat(12, minmax(0,1fr)); gap: var(--grid-gutter); }
.col-4 { grid-column: span 4; } .col-6 { grid-column: span 6; } .col-8 { grid-column: span 8; } .col-12 { grid-column: span 12; }
@container (max-width: 700px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .col-4, .col-6, .col-8 { grid-column: span 12; } }
@container (min-width: 701px) and (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-lg); align-items: start; }
.split-narrow { grid-template-columns: minmax(0,1fr) 320px; }
@container (max-width: 760px) { .split, .split-narrow { grid-template-columns: 1fr; } }
.with-sidebar { display: grid; grid-template-columns: var(--width-sidebar) minmax(0,1fr); gap: var(--gap-lg); }
.with-sidebar-end { grid-template-columns: minmax(0,1fr) var(--width-sidebar); }
@container (max-width: 760px) { .with-sidebar, .with-sidebar-end { grid-template-columns: 1fr; } }
.app-shell { display: grid; grid-template-rows: auto minmax(0,1fr); grid-template-columns: var(--width-sidebar) minmax(0,1fr); min-height: 420px; background: var(--bg-canvas); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.app-shell > .app-header { grid-column: 1 / -1; }
.app-shell > .app-side { background: var(--bg-surface-2); border-inline-end: 1px solid var(--border-default); padding: var(--space-md); }
.app-shell > .app-main { padding: var(--space-lg); min-width: 0; }
@container (max-width: 760px) { .app-shell { grid-template-columns: 1fr; } .app-shell > .app-side { display: none; } }
.page { max-width: var(--width-wide); margin-inline: auto; padding: var(--space-lg) var(--space-md) var(--space-3xl); }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; padding-bottom: var(--space-md); border-bottom: 1px solid var(--border-default); margin-bottom: var(--space-lg); }
.page-header .eyebrow { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--text-secondary); margin-bottom: var(--space-3xs); }
.page-header .t-h1 { margin-bottom: var(--space-3xs); }
.page-header .desc { color: var(--text-secondary); font-size: var(--text-sm); max-width: var(--measure); }
.section { padding-block: var(--space-section); }
.section-header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-md); }
.panel { background: var(--bg-surface-2); border-radius: var(--radius-md); padding: var(--space-inset-md); }
.surface { background: var(--bg-surface-1); }
.surface-2 { background: var(--bg-surface-2); } .surface-3 { background: var(--bg-surface-3); }
.surface-raised { background: var(--bg-raised); box-shadow: var(--shadow-2); border-radius: var(--radius-md); }
.surface-inverse { background: var(--bg-inverse); color: var(--text-inverse); }
.card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: var(--card-padding); }
.card-flush { padding: 0; overflow: hidden; }
.card-quiet { border: 0; background: var(--bg-surface-2); }
.card-link { display: block; color: inherit; text-decoration: none; transition: border-color var(--dur-1) var(--ease-standard), box-shadow var(--dur-1) var(--ease-standard); }
.card-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); color: inherit; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.card-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-xs); margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--border-subtle); }
.divider { border: 0; border-top: 1px solid var(--border-default); }
.divider-subtle { border-top-color: var(--border-subtle); }
.divider-v { align-self: stretch; width: 1px; background: var(--border-default); }
.divider-label { display: flex; align-items: center; gap: var(--space-sm); color: var(--text-tertiary); font-size: var(--text-xs); }
.divider-label::before, .divider-label::after { content: ""; flex: 1; border-top: 1px solid var(--border-default); }
.spacer { flex: 1 1 auto; }
.spacer-md { height: var(--space-md); } .spacer-lg { height: var(--space-lg); } .spacer-xl { height: var(--space-xl); }
.bleed { margin-inline: calc(var(--space-inset-md) * -1); }
.ratio { position: relative; width: 100%; aspect-ratio: var(--ratio, 16 / 9); overflow: hidden; background: var(--bg-surface-3); border-radius: var(--radius-sm); }
.ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ratio-square { --ratio: 1; } .ratio-4-3 { --ratio: 4 / 3; } .ratio-21-9 { --ratio: 21 / 9; }
.scroll-area { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.scroll-area-x { overflow-x: auto; overflow-y: hidden; }
.scroll-y-320 { max-height: 320px; }
.resizable { resize: horizontal; overflow: auto; min-width: 200px; max-width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-md); }
.split-pane { display: grid; grid-template-columns: var(--pane-w, 1fr) 8px minmax(0,1fr); min-height: 160px; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.split-pane > .pane { padding: var(--space-md); min-width: 0; }
.split-pane > .gutter { background: var(--bg-surface-3); cursor: col-resize; border: 0; padding: 0; position: relative; }
.split-pane > .gutter::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 2px; height: 24px; background: var(--border-strong); border-radius: var(--radius-full); transform: translate(-50%,-50%); }
.split-pane > .gutter:hover, .split-pane > .gutter:focus-visible { background: var(--bg-brand-subtle); }
.sticky-top { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--bg-canvas); }
.sticky-demo { position: sticky; top: 0; z-index: var(--z-raised); background: var(--bg-surface-2); padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--border-default); }
.overlay-layer { position: fixed; inset: 0; z-index: var(--z-overlay); pointer-events: none; }
.overlay-layer > * { pointer-events: auto; }
.backdrop { position: fixed; inset: 0; background: var(--bg-scrim); z-index: var(--z-overlay); }
.backdrop-demo { position: relative; height: 96px; background: var(--bg-scrim); border-radius: var(--radius-md); display: grid; place-items: center; color: var(--p-n-0); }
.focus-ring-demo { box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }
.hide-sm { display: revert; } .show-sm { display: none; }
@container (max-width: 480px) { .hide-sm { display: none !important; } .show-sm { display: revert; } }
.hide-md { display: revert; } .show-md { display: none; }
@container (max-width: 768px) { .hide-md { display: none !important; } .show-md { display: revert; } }

/* =====================================================================
   EXPLORER SHELL (the documentation site itself)
   ===================================================================== */
.ds-root { display: grid; grid-template-rows: var(--header-h) minmax(0,1fr); min-height: 100vh; }
.ds-header { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-sm); height: var(--header-h); padding-inline: var(--space-md); background: var(--bg-canvas); border-bottom: 1px solid var(--border-default); }
.ds-logo { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); color: var(--text-primary); text-decoration: none; white-space: nowrap; }
.ds-logo .mark { width: 22px; height: 22px; background: none; padding: 0; }
.ds-logo small { font-weight: var(--weight-regular); color: var(--text-tertiary); }
.ds-search { position: relative; flex: 1 1 320px; max-width: 480px; margin-inline: auto; }
.ds-search input { width: 100%; height: var(--control-h-md); padding-inline: var(--space-xl) var(--space-3xl); border: 1px solid var(--field-border); border-radius: var(--radius-full); background: var(--bg-surface-2); color: var(--field-text); }
.ds-search input:focus { border-color: var(--field-border-focus); }
.ds-search > svg { position: absolute; inset-inline-start: var(--space-sm); top: 50%; transform: translateY(-50%); color: var(--icon-secondary); pointer-events: none; }
.ds-search .kbd { position: absolute; inset-inline-end: var(--space-sm); top: 50%; transform: translateY(-50%); }
.ds-search-results { position: absolute; top: calc(100% + var(--space-2xs)); inset-inline: 0; max-height: 60vh; overflow: auto; background: var(--menu-bg); border: 1px solid var(--border-default); border-radius: var(--menu-radius); box-shadow: var(--menu-shadow); z-index: var(--z-dropdown); padding: var(--space-2xs); }
.ds-search-results a { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); color: inherit; text-decoration: none; font-size: var(--text-sm); }
.ds-search-results a:hover, .ds-search-results a.is-active { background: var(--bg-hover); }
.ds-search-results a small { color: var(--text-tertiary); margin-inline-start: auto; white-space: nowrap; }
.ds-controls { display: flex; align-items: center; gap: var(--space-2xs); }
.ds-body { display: grid; grid-template-columns: var(--width-sidebar) minmax(0,1fr); }
.ds-sidebar { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; border-inline-end: 1px solid var(--border-default); padding: var(--space-md) var(--space-sm) var(--space-3xl); background: var(--bg-canvas); scrollbar-width: thin; }
.ds-nav-group { margin-bottom: var(--space-2xs); }
.ds-nav-group > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; height: var(--nav-item-h); padding-inline: var(--space-xs); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-secondary); cursor: pointer; user-select: none; }
.ds-nav-group > summary::-webkit-details-marker { display: none; }
.ds-nav-group > summary:hover { background: var(--bg-hover); color: var(--text-primary); }
.ds-nav-group > summary svg { transition: transform var(--dur-2) var(--ease-standard); color: var(--icon-secondary); }
.ds-nav-group[open] > summary svg { transform: rotate(90deg); }
.ds-nav-group > summary .count { font-weight: var(--weight-regular); letter-spacing: 0; text-transform: none; color: var(--text-tertiary); margin-inline-start: auto; margin-inline-end: var(--space-xs); font-variant-numeric: tabular-nums; }
.ds-nav-list { list-style: none; padding: var(--space-3xs) 0 var(--space-xs); }
.ds-nav-list a { display: flex; align-items: center; gap: var(--space-xs); min-height: var(--nav-item-h); padding: var(--space-3xs) var(--space-xs) var(--space-3xs) var(--space-md); border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm); line-height: 1.3; border-inline-start: 2px solid transparent; }
.ds-nav-list a:hover { background: var(--bg-hover); color: var(--text-primary); }
.ds-nav-list a.is-current { color: var(--text-primary); font-weight: var(--weight-medium); background: var(--bg-selected); border-inline-start-color: var(--border-brand); }
.ds-nav-list a .status-dot { margin-inline-start: auto; }
.ds-main { min-width: 0; padding: var(--space-lg) var(--space-lg) var(--space-4xl); max-width: calc(var(--width-wide) + var(--space-lg) * 2); }
.ds-crumbs { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: var(--space-md); flex-wrap: wrap; }
.ds-crumbs a { color: var(--text-secondary); text-decoration: none; }
.ds-crumbs a:hover { color: var(--text-primary); text-decoration: underline; }
.ds-crumbs .sep { color: var(--text-disabled); }
.ds-section { scroll-margin-top: calc(var(--header-h) + var(--space-md)); padding-block: var(--space-xl) var(--space-2xl); border-bottom: 1px solid var(--border-subtle); }
.ds-section:first-child { padding-top: 0; }
.ds-section > header { margin-bottom: var(--space-lg); max-width: var(--measure); }
.ds-section > header .t-label { margin-bottom: var(--space-xs); }
.ds-section > header p { color: var(--text-secondary); margin-top: var(--space-xs); }
.ds-section > header .t-h1 { font-size: var(--text-4xl); }
.ds-entry { scroll-margin-top: calc(var(--header-h) + var(--space-md)); padding-block: var(--space-xl); border-top: 1px solid var(--border-subtle); }
.ds-entry:first-of-type { border-top: 0; }
.ds-entry-head { display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-2xs); }
.ds-entry-head h3 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.ds-entry-head a.anchor { color: var(--text-disabled); text-decoration: none; font-weight: var(--weight-regular); opacity: 0; transition: opacity var(--dur-1); }
.ds-entry-head:hover a.anchor, .ds-entry-head a.anchor:focus-visible { opacity: 1; }
.ds-entry-meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: var(--space-md); }
.ds-entry-meta b { font-weight: var(--weight-medium); color: var(--text-secondary); }
.ds-entry-desc { max-width: var(--measure); color: var(--text-secondary); margin-bottom: var(--space-md); }
.ds-doc { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-md) var(--space-xl); margin-top: var(--space-lg); }
.ds-doc > .full { grid-column: 1 / -1; }
@media (max-width: 860px) { .ds-doc { grid-template-columns: 1fr; } }
.ds-doc h4 { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--space-xs); }
.ds-doc ul { padding-inline-start: 1.2em; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-primary); }
.ds-doc p { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.ds-doc .chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.ds-doc .chips button, .ds-doc .chips span { font-family: var(--font-mono); font-size: var(--text-2xs); padding: 2px var(--space-xs); border: 1px solid var(--border-default); background: var(--bg-surface-2); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; }
.ds-doc .chips button:hover { border-color: var(--border-strong); color: var(--text-primary); }
.ds-preview { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.ds-preview-bar { display: flex; align-items: center; gap: var(--space-2xs); padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface-2); font-size: var(--text-xs); flex-wrap: wrap; }
.ds-preview-bar .spacer { flex: 1; }
.ds-preview-bar label { display: inline-flex; align-items: center; gap: var(--space-3xs); color: var(--text-secondary); }
.ds-preview-bar select, .ds-preview-bar button { height: 26px; font-size: var(--text-xs); }
.ds-stage-wrap { background: var(--bg-canvas); background-image: radial-gradient(var(--border-subtle) 1px, transparent 1px); background-size: 16px 16px; padding: var(--space-lg); overflow-x: auto; }
.ds-stage { container-type: inline-size; container-name: stage; margin-inline: auto; max-width: var(--stage-w, 100%); width: var(--stage-w, auto); transition: max-width var(--dur-4) var(--ease-standard); }
.ds-stage.is-framed { background: var(--bg-canvas); outline: 1px solid var(--border-default); min-height: 120px; box-shadow: var(--shadow-1); }
.ds-stage[data-theme] { color: var(--text-primary); background: var(--bg-canvas); padding: var(--space-lg); border-radius: var(--radius-md); }
.ds-stage-wrap[data-theme="dark"] { background-color: var(--bg-canvas); }
.ds-code { position: relative; border-top: 1px solid var(--border-subtle); }
.ds-code pre { border-radius: 0; max-height: 360px; }
.ds-code .copy-btn { position: absolute; top: var(--space-xs); inset-inline-end: var(--space-xs); }
.ds-state-matrix { display: grid; grid-template-columns: max-content repeat(var(--cols, 4), minmax(0, max-content)); gap: var(--space-sm) var(--space-lg); align-items: center; font-size: var(--text-xs); color: var(--text-secondary); }
.ds-state-matrix > .row-label { font-family: var(--font-mono); font-size: var(--text-2xs); }
.ds-state-matrix > .col-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-xs); }
.ds-swatch { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-surface-1); cursor: pointer; text-align: start; padding: 0; }
.ds-swatch .chip { height: 56px; }
.ds-swatch .meta { padding: var(--space-2xs) var(--space-xs); font-size: var(--text-2xs); line-height: 1.4; }
.ds-swatch .meta b { display: block; font-family: var(--font-mono); font-weight: var(--weight-regular); color: var(--text-primary); word-break: break-all; }
.ds-swatch .meta span { color: var(--text-tertiary); font-family: var(--font-mono); }
.ds-ramp { display: grid; grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); gap: 2px; }
.ds-ramp > div { height: 40px; border-radius: var(--radius-xs); position: relative; }
.ds-ramp > div span { position: absolute; bottom: 2px; left: 4px; font-size: 9px; font-family: var(--font-mono); color: var(--text-inverse); mix-blend-mode: difference; }
.ds-token-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ds-token-table th { text-align: start; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); padding: var(--space-xs); border-bottom: 1px solid var(--border-default); }
.ds-token-table td { padding: var(--space-xs); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.ds-token-table td:first-child { font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }
.ds-token-table .sample { display: inline-block; vertical-align: middle; }
.ds-type-specimen { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-sm) var(--space-lg); align-items: baseline; padding-block: var(--space-sm); border-bottom: 1px solid var(--border-subtle); }
.ds-type-specimen .spec { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-tertiary); line-height: 1.5; }
@media (max-width: 640px) { .ds-type-specimen { grid-template-columns: 1fr; } }
.ds-direction { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.ds-direction .spec { padding: var(--space-md); height: 190px; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-xs); }
.ds-direction .body { padding: var(--space-md); border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.ds-direction .body dl { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-3xs) var(--space-sm); font-size: var(--text-xs); }
.ds-direction .body dt { color: var(--text-tertiary); }
.ds-direction.is-selected { border-color: var(--border-brand); box-shadow: 0 0 0 1px var(--border-brand); }
.ds-score { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2xs) var(--space-md); align-items: center; font-size: var(--text-sm); }
.ds-score .bar { height: 6px; background: var(--bg-surface-3); border-radius: var(--radius-full); overflow: hidden; grid-column: 1 / -1; margin-bottom: var(--space-xs); }
.ds-score .bar i { display: block; height: 100%; background: var(--bg-brand); }
.ds-recent { display: flex; gap: var(--space-2xs); flex-wrap: wrap; padding: var(--space-xs); margin-bottom: var(--space-sm); }
.ds-recent:empty { display: none; }
.ds-backtop { position: fixed; bottom: var(--space-lg); inset-inline-end: var(--space-lg); z-index: var(--z-toast); opacity: 0; pointer-events: none; transition: opacity var(--dur-2); }
.ds-backtop.is-visible { opacity: 1; pointer-events: auto; }
.ds-cmdk { width: min(640px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border-default); border-radius: var(--dialog-radius); background: var(--dialog-bg); box-shadow: var(--dialog-shadow); color: inherit; }
.ds-cmdk::backdrop { background: var(--bg-scrim); }
.ds-cmdk .cmdk-input { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-default); }
.ds-cmdk .cmdk-input input { flex: 1; border: 0; background: transparent; font-size: var(--text-lg); outline: none; box-shadow: none; }
.ds-cmdk .cmdk-list { max-height: 50vh; overflow: auto; padding: var(--space-2xs); list-style: none; margin: 0; }
.ds-cmdk .cmdk-list li { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); }
.ds-cmdk .cmdk-list li[aria-selected="true"] { background: var(--bg-selected); }
.ds-cmdk .cmdk-list li small { margin-inline-start: auto; color: var(--text-tertiary); }
.ds-cmdk .cmdk-list .group { padding: var(--space-xs) var(--space-sm) var(--space-3xs); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-tertiary); cursor: default; }
.ds-cmdk .cmdk-foot { display: flex; gap: var(--space-md); padding: var(--space-xs) var(--space-md); border-top: 1px solid var(--border-subtle); font-size: var(--text-xs); color: var(--text-tertiary); }
.ds-menu-btn { display: none; }
.ds-audit-result { display: grid; grid-template-columns: 24px 1fr auto; gap: var(--space-sm); align-items: center; padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.ds-audit-result small { color: var(--text-tertiary); display: block; font-size: var(--text-xs); }
.ds-inline-note { font-size: var(--text-sm); color: var(--text-secondary); border-inline-start: 2px solid var(--border-brand); padding-inline-start: var(--space-sm); }
.ds-two { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-lg); }
.ds-three { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-lg); }
@media (max-width: 900px) { .ds-two, .ds-three { grid-template-columns: 1fr; } }
.ds-callout { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-md); background: var(--bg-surface-2); font-size: var(--text-sm); }
.ds-callout h4 { margin-bottom: var(--space-xs); font-size: var(--text-sm); }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ds-table th, .ds-table td { text-align: start; padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.ds-table th { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); border-bottom-color: var(--border-default); }
.ds-toc { position: sticky; top: calc(var(--header-h) + var(--space-md)); font-size: var(--text-xs); }
.ds-toc a { display: block; padding: var(--space-3xs) 0; color: var(--text-secondary); text-decoration: none; }
.ds-toc a:hover { color: var(--text-primary); }
@media (max-width: 1023px) {
  .ds-body { grid-template-columns: 1fr; }
  .ds-sidebar { position: fixed; inset: var(--header-h) auto 0 0; width: min(320px, 88vw); transform: translateX(-100%); transition: transform var(--dur-3) var(--ease-standard); z-index: var(--z-overlay); box-shadow: none; }
  [dir="rtl"] .ds-sidebar { inset: var(--header-h) 0 0 auto; transform: translateX(100%); }
  .ds-sidebar.is-open { transform: none; box-shadow: var(--shadow-3); }
  .ds-menu-btn { display: inline-flex; }
  .ds-main { padding: var(--space-md) var(--space-md) var(--space-3xl); }
  .ds-search { flex-basis: 160px; }
  .ds-search .kbd { display: none; }
  .ds-controls .hide-narrow { display: none; }
}
@media (max-width: 560px) {
  .ds-logo small { display: none; }
  .ds-stage-wrap { padding: var(--space-sm); }
}

/* ---------- routed pages, cards, preview cards ---------- */
.ds-main { max-width: calc(1040px + var(--space-lg) * 2); }
.ds-page-top { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-md); margin: calc(var(--space-md) * -1) 0 var(--space-sm); }
.ds-page-actions { display: flex; gap: var(--space-3xs); flex-shrink: 0; }
.ds-page-actions .is-disabled { opacity: var(--opacity-disabled); pointer-events: none; }
.ds-page-head { margin-bottom: var(--space-xl); max-width: 760px; }
.ds-page-head .t-h1 { font-size: var(--text-4xl); display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.ds-page-head .t-h1 .badge { font-size: var(--text-2xs); }
.ds-page-desc { color: var(--text-secondary); font-size: var(--text-lg); margin-top: var(--space-xs); line-height: var(--leading-relaxed); }
.ds-page-meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-sm); }
.ds-h2 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); margin: var(--space-2xl) 0 var(--space-md); }
.ds-inline-note.is-danger { border-color: var(--border-danger); margin-bottom: var(--space-md); max-width: var(--measure); }
.ds-pv { border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-canvas); margin-bottom: var(--space-lg); }
.ds-pv-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-md); border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.ds-pv-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.ds-pv-tools { display: flex; align-items: center; gap: 2px; }
.ds-pv-tools .toggle-group { margin-inline-start: var(--space-xs); }
.ds-pv-stage-wrap { padding: var(--space-3xl) var(--space-xl); display: grid; place-items: center; min-height: 300px; background: var(--bg-canvas); color: var(--text-primary); overflow-x: auto; }
.ds-pv-stage-wrap > .ds-stage { width: 100%; max-width: var(--stage-w, 100%); }
.ds-pv.is-wide .ds-pv-stage-wrap { padding: 0; display: block; min-height: 0; }
.ds-pv.is-wide .ds-stage { margin-inline: auto; }
.ds-pv-code pre { border-radius: 0; max-height: 520px; }
.ds-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--space-md); }
.ds-cards.is-wide { grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); }
.ds-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-canvas); transition: border-color var(--dur-1) var(--ease-standard), box-shadow var(--dur-1) var(--ease-standard); }
.ds-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); }
.ds-card:has(.ds-card-meta:focus-visible) { box-shadow: var(--shadow-focus); }
.ds-card-meta { color: inherit; text-decoration: none; }
.ds-card-meta:focus-visible { box-shadow: none; outline: none; }
.ds-card-meta::after { content: ""; position: absolute; inset: 0; }
.ds-card-meta:hover { color: inherit; }
.ds-thumb { height: 200px; overflow: hidden; position: relative; background: var(--bg-surface-2); border-bottom: 1px solid var(--border-subtle); }
.ds-thumb-inner { position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(.5); transform-origin: 0 0; padding: var(--space-xl); display: grid; place-items: center; pointer-events: none; container-type: inline-size; background: var(--bg-canvas); }
.ds-thumb-inner > * { max-width: 100%; }
.ds-thumb.is-wide .ds-thumb-inner { display: block; padding: 0; }
.ds-cards.is-wide .ds-thumb { height: 240px; }
.ds-card-meta { padding: var(--space-sm) var(--space-md); display: flex; flex-direction: column; gap: 2px; }
.ds-card-meta b { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.ds-card-meta span { font-size: var(--text-xs); color: var(--text-secondary); }
.ds-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-top: var(--space-2xl); }
.ds-pager a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-default); border-radius: var(--radius-md); text-decoration: none; color: inherit; font-size: var(--text-sm); }
.ds-pager a:hover { border-color: var(--border-strong); color: inherit; }
.ds-pager a small { color: var(--text-tertiary); font-size: var(--text-xs); }
.ds-pager a.next { text-align: end; align-items: flex-end; }
.ds-nav-list a .count { margin-inline-start: auto; color: var(--text-tertiary); font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.ds-nav-list a.is-parent { color: var(--text-primary); font-weight: var(--weight-medium); }
.ds-nav-sub { list-style: none; padding: 0 0 var(--space-xs) var(--space-sm); }
.ds-nav-sub a { min-height: 26px; font-size: var(--text-xs); padding-inline-start: var(--space-lg); }
.ds-home-group .section-header { margin-bottom: var(--space-md); }
@media (max-width: 640px) { .ds-pager { grid-template-columns: 1fr; } .ds-pv-stage-wrap { padding: var(--space-lg) var(--space-md); min-height: 200px; } }

/* =====================================================================
   PRINT
   ===================================================================== */
@media print {
  .ds-header, .ds-sidebar, .ds-backtop, .ds-preview-bar, .copy-btn, .ds-code, .ds-cmdk, .skip-link, .ds-controls, .toast-region { display: none !important; }
  .ds-body { display: block; }
  .ds-main { max-width: none; padding: 0; }
  .ds-section, .ds-entry, .ds-pv { break-inside: avoid-page; page-break-inside: avoid; border: 0; }
  .ds-section[hidden] { display: none; }
  .is-print-all .ds-section[hidden] { display: block; }
  .ds-pv-tools, .ds-page-actions, .ds-pager, .ds-pv-code { display: none !important; }
  .ds-entry { page-break-before: auto; }
  .ds-stage-wrap { background: none; padding: 0; overflow: visible; }
  .ds-stage { max-width: none !important; width: auto !important; }
  a { color: inherit; text-decoration: none; }
  body { font-size: 11pt; color: var(--p-n-1000); background: var(--p-n-0); }
  .ds-doc { grid-template-columns: 1fr 1fr; }
  .ds-nav-group { display: block; }
}


/* ===== part03.css ===== */

/* =====================================================================
   ICONS
   ===================================================================== */
.icon { width: var(--icon-sm); height: var(--icon-sm); flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon-xs { width: var(--icon-xs); height: var(--icon-xs); stroke-width: 2; }
.icon-md { width: var(--icon-md); height: var(--icon-md); stroke-width: 1.6; }
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); stroke-width: 1.5; }
.icon-xl { width: var(--icon-xl); height: var(--icon-xl); stroke-width: 1.25; }
.icon-fill { fill: currentColor; stroke: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* =====================================================================
   ACTIONS
   ===================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2xs); height: var(--btn-h); padding-inline: var(--btn-px); border: 1px solid transparent; border-radius: var(--btn-radius); font-size: var(--btn-text); font-weight: var(--btn-weight); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; position: relative; transition: background-color var(--dur-1) var(--ease-standard), border-color var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard), transform var(--dur-1) var(--ease-standard); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; opacity: var(--opacity-disabled); }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn-primary:hover:not(:disabled) { background: var(--btn-primary-bg-hover); color: var(--btn-primary-text); }
.btn-brand { background: var(--btn-brand-bg); color: var(--btn-brand-text); }
.btn-brand:hover:not(:disabled) { background: var(--btn-brand-bg-hover); color: var(--btn-brand-text); }
.btn-secondary { background: var(--btn-secondary-bg); border-color: var(--btn-secondary-border); color: var(--btn-secondary-text); }
.btn-secondary:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-interactive); color: var(--btn-secondary-text); }
.btn-outline { background: transparent; border-color: var(--border-default); color: var(--text-primary); }
.btn-outline:hover:not(:disabled) { border-color: var(--border-strong); background: var(--bg-hover); color: var(--text-primary); }
.btn-subtle { background: var(--bg-surface-3); color: var(--text-primary); }
.btn-subtle:hover:not(:disabled) { background: var(--bg-active); color: var(--text-primary); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.btn-danger { background: var(--btn-danger-bg); color: var(--btn-danger-text); }
.btn-danger:hover:not(:disabled) { background: var(--btn-danger-bg-hover); color: var(--btn-danger-text); }
.btn-danger-quiet { background: transparent; color: var(--text-danger); }
.btn-danger-quiet:hover:not(:disabled) { background: var(--bg-danger-subtle); color: var(--text-danger); }
.btn-link { background: none; padding-inline: 0; height: auto; color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.btn-link:hover:not(:disabled) { color: var(--text-link-hover); }
.btn-inverse { background: var(--bg-canvas); color: var(--text-primary); }
.btn-inverse:hover:not(:disabled) { background: var(--bg-surface-2); color: var(--text-primary); }
.btn-sm { --btn-h: var(--control-h-sm); --btn-px: var(--space-xs); --btn-text: var(--text-xs); }
.btn-lg { --btn-h: var(--control-h-lg); --btn-px: var(--space-md); --btn-text: var(--text-md); }
.btn-block { width: 100%; }
.btn-icon { padding-inline: 0; width: var(--btn-h); flex: 0 0 auto; }
.btn-icon.btn-sm { width: var(--control-h-sm); }
.btn-round { border-radius: var(--radius-full); }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; color: var(--btn-primary-text); }
.btn-secondary.is-loading::after, .btn-outline.is-loading::after, .btn-ghost.is-loading::after, .btn-subtle.is-loading::after { color: var(--text-primary); }
.btn.is-pressed, .btn[aria-pressed="true"] { background: var(--bg-selected); border-color: var(--border-brand); color: var(--text-brand); }
.btn .badge { margin-inline-start: var(--space-3xs); }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-group { display: inline-flex; }
.btn-group > .btn { border-radius: 0; margin-inline-start: -1px; }
.btn-group > .btn:first-child { border-start-start-radius: var(--btn-radius); border-end-start-radius: var(--btn-radius); margin-inline-start: 0; }
.btn-group > .btn:last-child { border-start-end-radius: var(--btn-radius); border-end-end-radius: var(--btn-radius); }
.btn-group > .btn:focus-visible { z-index: 1; }
.toggle-group { display: inline-flex; gap: var(--space-3xs); padding: var(--space-3xs); background: var(--bg-surface-3); border-radius: var(--radius-md); }
.toggle-group .btn { --btn-h: calc(var(--control-h-md) - 8px); background: transparent; color: var(--text-secondary); }
.toggle-group .btn[aria-pressed="true"], .toggle-group .btn[aria-checked="true"], .toggle-group .btn.is-active { background: var(--bg-surface-1); color: var(--text-primary); box-shadow: var(--shadow-1); border-color: transparent; }
.segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--btn-radius); overflow: hidden; }
.segmented > button, .segmented > label { height: calc(var(--control-h-md) - 2px); padding-inline: var(--space-sm); background: var(--bg-surface-1); border: 0; border-inline-start: 1px solid var(--border-strong); color: var(--text-secondary); font-size: var(--btn-text); font-weight: var(--btn-weight); display: inline-flex; align-items: center; gap: var(--space-3xs); cursor: pointer; }
.segmented > :first-child { border-inline-start: 0; }
.segmented > [aria-checked="true"], .segmented > [aria-pressed="true"], .segmented > .is-active, .segmented > label:has(input:checked) { background: var(--bg-accent); color: var(--text-on-accent); }
.segmented input { position: absolute; opacity: 0; width: 0; height: 0; }
.segmented > button:focus-visible, .segmented > label:focus-within { box-shadow: inset var(--shadow-focus); }
.split-btn { display: inline-flex; }
.split-btn > .btn:first-child { border-start-end-radius: 0; border-end-start-radius: 0; }
.split-btn > .btn:last-child { border-start-start-radius: 0; border-end-start-radius: 0; padding-inline: var(--space-2xs); margin-inline-start: 1px; }
.fab { position: absolute; bottom: var(--space-md); inset-inline-end: var(--space-md); width: 48px; height: 48px; border-radius: var(--radius-full); box-shadow: var(--shadow-2); }
.copy-btn.is-copied { color: var(--text-success); }
.fav-btn[aria-pressed="true"] { color: var(--text-danger); }
.fav-btn[aria-pressed="true"] .icon { fill: currentColor; }

/* =====================================================================
   FORMS
   ===================================================================== */
.form { display: flex; flex-direction: column; gap: var(--space-md); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-md); }
@container (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; }
.field-label { font-size: var(--text-sm); font-weight: var(--weight-medium); display: flex; align-items: baseline; gap: var(--space-2xs); }
.field-label .req { color: var(--text-danger); font-weight: var(--weight-regular); }
.field-label .opt { color: var(--text-tertiary); font-weight: var(--weight-regular); font-size: var(--text-xs); }
.field-hint { font-size: var(--text-xs); color: var(--text-secondary); }
.field-msg { font-size: var(--text-xs); display: flex; align-items: center; gap: var(--space-3xs); }
.field-msg.is-error { color: var(--text-danger); }
.field-msg.is-success { color: var(--text-success); }
.field-msg.is-warning { color: var(--text-warning); }
.input, .textarea, .select { width: 100%; min-height: var(--field-h); padding-inline: var(--field-px); background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--field-radius); color: var(--field-text); font-size: var(--text-md); line-height: 1.4; transition: border-color var(--dur-1) var(--ease-standard); }
.input::placeholder, .textarea::placeholder { color: var(--field-placeholder); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--field-border-hover); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--field-border-focus); outline: none; box-shadow: var(--shadow-focus); }
.input:disabled, .textarea:disabled, .select:disabled { background: var(--bg-disabled); color: var(--text-disabled); cursor: not-allowed; border-color: var(--border-default); }
.input:read-only:not(:disabled), .textarea:read-only:not(:disabled) { background: var(--bg-surface-2); border-style: dashed; }
.field.is-error .input, .field.is-error .textarea, .field.is-error .select, .input.is-error { border-color: var(--border-danger); }
.field.is-success .input, .input.is-success { border-color: var(--border-success); }
.field.is-warning .input { border-color: var(--border-warning); }
.input-sm { --field-h: var(--control-h-sm); font-size: var(--text-sm); }
.input-lg { --field-h: var(--control-h-lg); font-size: var(--text-lg); }
.textarea { padding-block: var(--space-xs); resize: vertical; min-height: 96px; }
.select { appearance: none; padding-inline-end: var(--space-xl); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
[dir="rtl"] .select { padding-inline-end: var(--space-xl); background-position: 11px 50%, 16px 50%; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > .input { padding-inline-start: calc(var(--field-px) + 22px); }
.input-wrap > .icon { position: absolute; inset-inline-start: var(--field-px); color: var(--icon-secondary); pointer-events: none; }
.input-wrap > .icon ~ .input { padding-inline-start: calc(var(--field-px) + 22px); }
.input-wrap .input-action { position: absolute; inset-inline-end: var(--space-3xs); }
.input-wrap .input-action ~ .input, .input-wrap:has(.input-action) > .input { padding-inline-end: calc(var(--field-px) + 28px); }
.input-group { display: flex; align-items: stretch; }
.input-group > .input { border-radius: 0; flex: 1; min-width: 0; }
.input-group > :first-child { border-start-start-radius: var(--field-radius); border-end-start-radius: var(--field-radius); }
.input-group > :last-child { border-start-end-radius: var(--field-radius); border-end-end-radius: var(--field-radius); }
.input-group > .affix { display: inline-flex; align-items: center; padding-inline: var(--space-sm); background: var(--bg-surface-2); border: 1px solid var(--field-border); color: var(--text-secondary); font-size: var(--text-sm); white-space: nowrap; }
.input-group > .affix + .input { border-inline-start: 0; }
.input-group > .input + .affix { border-inline-start: 0; }
.input-group > .btn { border-radius: 0; }
.input-group > .select { width: auto; }
.chk, .radio { display: inline-flex; align-items: flex-start; gap: var(--space-xs); cursor: pointer; font-size: var(--text-sm); line-height: 1.4; position: relative; min-height: 24px; }
.chk input, .radio input { appearance: none; margin: 0; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border: 1px solid var(--border-strong); background: var(--field-bg); border-radius: var(--radius-sm); display: grid; place-content: center; transition: background-color var(--dur-1), border-color var(--dur-1); cursor: pointer; }
.radio input { border-radius: var(--radius-full); }
.chk input:hover, .radio input:hover { border-color: var(--border-interactive); }
.chk input:checked, .chk input:indeterminate, .radio input:checked { background: var(--bg-accent); border-color: var(--bg-accent); }
.chk input::before { content: ""; width: 10px; height: 6px; border: 2px solid var(--text-on-accent); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px,-1px); opacity: 0; }
.chk input:checked::before { opacity: 1; }
.chk input:indeterminate::before { width: 10px; height: 0; border: 0; border-bottom: 2px solid var(--text-on-accent); transform: none; opacity: 1; }
.radio input::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-on-accent); transform: scale(0); transition: transform var(--dur-1); }
.radio input:checked::before { transform: scale(1); }
.chk input:disabled, .radio input:disabled { background: var(--bg-disabled); border-color: var(--border-default); cursor: not-allowed; }
.chk:has(input:disabled), .radio:has(input:disabled) { color: var(--text-disabled); cursor: not-allowed; }
.chk .hint, .radio .hint { display: block; color: var(--text-secondary); font-size: var(--text-xs); }
.chk-group, .radio-group { display: flex; flex-direction: column; gap: var(--space-xs); }
.chk-group.is-inline, .radio-group.is-inline { flex-direction: row; flex-wrap: wrap; gap: var(--space-md); }
fieldset.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.legend { font-size: var(--text-sm); font-weight: var(--weight-medium); padding: 0; margin-bottom: var(--space-2xs); }
.switch { display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; font-size: var(--text-sm); }
.switch input { appearance: none; margin: 0; width: 36px; height: 20px; border-radius: var(--radius-full); background: var(--border-strong); position: relative; transition: background-color var(--dur-2) var(--ease-standard); cursor: pointer; flex: 0 0 auto; }
.switch input::before { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--p-n-0); transition: transform var(--dur-2) var(--ease-standard); box-shadow: var(--shadow-1); }
.switch input:checked { background: var(--bg-accent); }
.switch input:checked::before { transform: translateX(16px); }
[dir="rtl"] .switch input:checked::before { transform: translateX(-16px); }
.switch input:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.switch-sm input { width: 28px; height: 16px; } .switch-sm input::before { width: 12px; height: 12px; } .switch-sm input:checked::before { transform: translateX(12px); }
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; margin: 0; }
.slider::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(to right, var(--bg-accent) var(--fill, 50%), var(--bg-surface-3) var(--fill, 50%)); border-radius: var(--radius-full); }
.slider::-moz-range-track { height: 4px; background: var(--bg-surface-3); border-radius: var(--radius-full); }
.slider::-moz-range-progress { height: 4px; background: var(--bg-accent); border-radius: var(--radius-full); }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--bg-surface-1); border: 2px solid var(--bg-accent); cursor: grab; }
.slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--bg-surface-1); border: 2px solid var(--bg-accent); cursor: grab; }
.slider:focus-visible { box-shadow: none; }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: var(--shadow-focus); }
.slider:disabled { opacity: var(--opacity-disabled); }
.range-dual { position: relative; height: 20px; }
.range-dual .slider { position: absolute; inset: 0; pointer-events: none; }
.range-dual .slider::-webkit-slider-thumb { pointer-events: auto; }
.range-dual .slider::-moz-range-thumb { pointer-events: auto; }
.range-dual .slider::-webkit-slider-runnable-track { background: transparent; }
.range-dual .track { position: absolute; top: 8px; left: 0; right: 0; height: 4px; background: var(--bg-surface-3); border-radius: var(--radius-full); }
.range-dual .track i { position: absolute; top: 0; bottom: 0; background: var(--bg-accent); border-radius: var(--radius-full); }
.rating { display: inline-flex; gap: 2px; }
.rating input { position: absolute; opacity: 0; width: 0; height: 0; }
.rating label { cursor: pointer; color: var(--border-strong); }
.rating label .icon { width: 22px; height: 22px; }
.rating.is-readonly label { cursor: default; }
.rating label.is-on, .rating:not(.is-readonly):hover label.is-hover { color: var(--p-a-500); }
.rating label.is-on .icon { fill: currentColor; }
.rating input:focus-visible + label { box-shadow: var(--shadow-focus); border-radius: var(--radius-xs); }
.qty { display: inline-flex; border: 1px solid var(--field-border); border-radius: var(--field-radius); overflow: hidden; }
.qty button { width: var(--control-h-md); height: calc(var(--control-h-md) - 2px); border: 0; background: var(--bg-surface-2); color: var(--text-primary); }
.qty button:hover:not(:disabled) { background: var(--bg-active); }
.qty button:disabled { color: var(--text-disabled); cursor: not-allowed; }
.qty input { width: 48px; text-align: center; border: 0; border-inline: 1px solid var(--field-border); background: var(--field-bg); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { display: none; }
.otp { display: inline-flex; gap: var(--space-xs); }
.otp input { width: 40px; height: var(--control-h-lg); text-align: center; font-family: var(--font-mono); font-size: var(--text-xl); border: 1px solid var(--field-border); border-radius: var(--field-radius); background: var(--field-bg); }
.otp input:focus { border-color: var(--field-border-focus); box-shadow: var(--shadow-focus); outline: none; }
.color-picker { display: inline-flex; align-items: center; gap: var(--space-xs); }
.color-picker input[type="color"] { width: var(--control-h-md); height: var(--control-h-md); padding: 2px; border: 1px solid var(--field-border); border-radius: var(--field-radius); background: var(--field-bg); cursor: pointer; }
.color-picker .swatches { display: inline-flex; gap: var(--space-3xs); }
.color-picker .swatches button { width: 24px; height: 24px; border-radius: var(--radius-sm); border: 1px solid var(--border-default); padding: 0; }
.color-picker .swatches button[aria-pressed="true"] { box-shadow: var(--shadow-focus); }
.file-input { display: inline-flex; align-items: center; gap: var(--space-xs); }
.file-input input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone { border: 1px dashed var(--border-strong); border-radius: var(--radius-md); padding: var(--space-xl) var(--space-md); text-align: center; color: var(--text-secondary); font-size: var(--text-sm); transition: border-color var(--dur-1), background-color var(--dur-1); cursor: pointer; }
.dropzone:hover, .dropzone.is-over { border-color: var(--border-brand); background: var(--bg-brand-subtle); color: var(--text-primary); }
.dropzone .icon { margin: 0 auto var(--space-xs); color: var(--icon-secondary); }
.dropzone b { color: var(--text-primary); }
.upload-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-sm); align-items: center; padding: var(--space-xs) 0; font-size: var(--text-sm); }
.upload-row .progress { grid-column: 2; }
.upload-row .meta { color: var(--text-tertiary); font-size: var(--text-xs); }
.tag-input { display: flex; flex-wrap: wrap; gap: var(--space-3xs); min-height: var(--field-h); padding: 4px var(--space-2xs); background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--field-radius); cursor: text; align-items: center; }
.tag-input:focus-within { border-color: var(--field-border-focus); box-shadow: var(--shadow-focus); }
.tag-input input { flex: 1 1 80px; min-width: 60px; border: 0; background: transparent; outline: none; box-shadow: none !important; height: 22px; font-size: var(--text-sm); }
.combo { position: relative; }
.combo .listbox { position: absolute; top: calc(100% + 4px); inset-inline: 0; max-height: 240px; overflow: auto; background: var(--menu-bg); border: 1px solid var(--border-default); border-radius: var(--menu-radius); box-shadow: var(--menu-shadow); z-index: var(--z-dropdown); padding: var(--space-3xs); list-style: none; margin: 0; }
.combo .listbox li, .listbox-static li { display: flex; align-items: center; gap: var(--space-xs); min-height: var(--menu-item-h); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); }
.combo .listbox li:hover, .combo .listbox li[aria-selected="true"], .listbox-static li[aria-selected="true"] { background: var(--bg-selected); }
.combo .listbox li .check { margin-inline-start: auto; color: var(--text-brand); opacity: 0; }
.combo .listbox li[data-checked="true"] .check { opacity: 1; }
.combo .listbox .empty { padding: var(--space-sm); color: var(--text-tertiary); font-size: var(--text-sm); text-align: center; }
.combo .listbox .group-label { padding: var(--space-xs) var(--space-xs) var(--space-3xs); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-tertiary); }
.listbox-static { list-style: none; margin: 0; padding: var(--space-3xs); border: 1px solid var(--border-default); border-radius: var(--menu-radius); }
.select-trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); width: 100%; min-height: var(--field-h); padding-inline: var(--field-px); background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--field-radius); text-align: start; font-size: var(--text-md); }
.select-trigger:hover { border-color: var(--field-border-hover); }
.select-trigger[aria-expanded="true"] { border-color: var(--field-border-focus); }
.select-trigger .placeholder { color: var(--field-placeholder); }
.select-trigger .icon { color: var(--icon-secondary); }
.inline-edit { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.inline-edit .value { padding: 2px var(--space-2xs); border-radius: var(--radius-sm); border: 1px solid transparent; cursor: text; }
.inline-edit .value:hover { background: var(--bg-hover); border-color: var(--border-default); }
.inline-edit .input { display: none; }
.inline-edit.is-editing .value { display: none; }
.inline-edit.is-editing .input { display: block; }
.calendar { width: 100%; max-width: 320px; font-size: var(--text-sm); }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-xs); }
.calendar-head b { font-weight: var(--weight-semibold); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.calendar-grid .dow { text-align: center; font-size: var(--text-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: var(--space-2xs) 0; }
.calendar-grid button { height: 36px; border: 0; background: transparent; border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; color: var(--text-primary); }
.calendar-grid button:hover:not(:disabled) { background: var(--bg-hover); }
.calendar-grid button.is-outside { color: var(--text-disabled); }
.calendar-grid button.is-today { font-weight: var(--weight-semibold); box-shadow: inset 0 0 0 1px var(--border-brand); }
.calendar-grid button[aria-selected="true"], .calendar-grid button.is-selected { background: var(--bg-accent); color: var(--text-on-accent); }
.calendar-grid button.in-range { background: var(--bg-selected); border-radius: 0; }
.calendar-grid button.range-start { border-start-end-radius: 0; border-end-end-radius: 0; }
.calendar-grid button.range-end { border-start-start-radius: 0; border-end-start-radius: 0; }
.calendar-grid button:disabled { color: var(--text-disabled); cursor: not-allowed; text-decoration: line-through; }
.calendar-grid button .dot { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--bg-live); margin: 1px auto 0; }
.calendar-mini { max-width: 240px; font-size: var(--text-xs); }
.calendar-mini .calendar-grid button { height: 28px; }
.date-picker { position: relative; }
.date-picker .popover-panel { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: var(--z-dropdown); padding: var(--space-sm); }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--border-subtle); }
.form-actions .status { margin-inline-end: auto; font-size: var(--text-xs); color: var(--text-secondary); display: inline-flex; align-items: center; gap: var(--space-2xs); }
.unsaved-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-warning); display: inline-block; }
.validation-summary { border: 1px solid var(--border-danger); border-inline-start-width: 3px; border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); background: var(--bg-danger-subtle); font-size: var(--text-sm); }
.validation-summary b { display: block; margin-bottom: var(--space-2xs); }
.validation-summary ul { padding-inline-start: 1.2em; }
.validation-summary a { color: var(--text-danger); }

/* =====================================================================
   NAVIGATION
   ===================================================================== */
.topbar { display: flex; align-items: center; gap: var(--space-md); height: var(--header-h); padding-inline: var(--space-md); border-bottom: 1px solid var(--border-default); background: var(--bg-canvas); }
.topbar .brand { display: inline-flex; align-items: center; min-height: 32px; gap: var(--space-xs); font-weight: var(--weight-semibold); text-decoration: none; color: inherit; letter-spacing: var(--tracking-snug); }
.topbar-nav { display: flex; align-items: center; gap: var(--space-3xs); list-style: none; margin: 0; padding: 0; }
.topbar-nav a { display: inline-flex; align-items: center; height: 32px; padding-inline: var(--space-xs); border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.topbar-nav a:hover { color: var(--text-primary); background: var(--bg-hover); }
.topbar-nav a[aria-current="page"] { color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--border-brand); border-radius: 0; }
.topbar .actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2xs); }
.topbar-inverse { background: var(--bg-inverse); color: var(--text-inverse); border-bottom-color: transparent; }
.topbar-inverse .topbar-nav a { color: inherit; opacity: .8; }
.topbar-inverse .topbar-nav a:hover { opacity: 1; background: var(--bg-inverse-hover-soft); }
.topbar-inverse .topbar-nav a[aria-current="page"] { opacity: 1; box-shadow: inset 0 -2px 0 var(--bg-brand); }
@container (max-width: 700px) { .topbar-nav { display: none; } .topbar .menu-btn { display: inline-flex; } }
.topbar .menu-btn { display: none; }
.sidenav { display: flex; flex-direction: column; gap: 1px; list-style: none; padding: 0; margin: 0; }
.sidenav a, .sidenav button { display: flex; align-items: center; gap: var(--space-xs); width: 100%; min-height: var(--nav-item-h); padding-inline: var(--space-xs); border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); text-align: start; }
.sidenav a:hover, .sidenav button:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidenav a[aria-current="page"], .sidenav .is-current { background: var(--bg-selected); color: var(--text-primary); }
.sidenav a .badge { margin-inline-start: auto; }
.sidenav .group-label { padding: var(--space-sm) var(--space-xs) var(--space-3xs); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-tertiary); }
.sidenav .sub { padding-inline-start: var(--space-lg); }
.nav-rail { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); width: var(--width-rail); padding: var(--space-xs) 0; background: var(--bg-surface-2); border-inline-end: 1px solid var(--border-default); }
.nav-rail a { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 48px; padding: var(--space-2xs) 0; border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; font-size: 10px; font-weight: var(--weight-medium); }
.nav-rail a:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-rail a[aria-current="page"] { color: var(--text-brand); background: var(--bg-brand-subtle); }
.bottom-nav { display: flex; justify-content: space-around; border-top: 1px solid var(--border-default); background: var(--bg-canvas); padding: var(--space-2xs) 0 env(safe-area-inset-bottom); }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; min-height: var(--touch-target); justify-content: center; color: var(--text-secondary); text-decoration: none; font-size: 10px; font-weight: var(--weight-medium); }
.bottom-nav a[aria-current="page"] { color: var(--text-brand); }
.nav-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.nav-list a { display: flex; align-items: center; gap: var(--space-sm); min-height: var(--touch-target); padding-inline: var(--space-md); color: inherit; text-decoration: none; font-size: var(--text-sm); border-bottom: 1px solid var(--border-subtle); }
.nav-list li:last-child a { border-bottom: 0; }
.nav-list a:hover { background: var(--bg-hover); }
.nav-list a .icon.chevron { margin-inline-start: auto; color: var(--icon-secondary); }
.tree { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.tree ul { list-style: none; margin: 0; padding-inline-start: var(--space-md); }
.tree [role="treeitem"] > .row { display: flex; align-items: center; gap: var(--space-2xs); min-height: 28px; padding-inline: var(--space-2xs); border-radius: var(--radius-sm); cursor: pointer; }
.tree [role="treeitem"] > .row:hover { background: var(--bg-hover); }
.tree [role="treeitem"][aria-selected="true"] > .row { background: var(--bg-selected); }
.tree [role="treeitem"] > .row .icon.tw { transition: transform var(--dur-2); color: var(--icon-secondary); }
.tree [role="treeitem"][aria-expanded="true"] > .row .icon.tw { transform: rotate(90deg); }
.tree [role="treeitem"][aria-expanded="false"] > ul { display: none; }
.tree .leaf > .row .icon.tw { visibility: hidden; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2xs); list-style: none; padding: 0; margin: 0; font-size: var(--text-sm); }
.breadcrumbs a { color: var(--text-secondary); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text-primary); text-decoration: underline; }
.breadcrumbs li[aria-current="page"] { color: var(--text-primary); font-weight: var(--weight-medium); }
.breadcrumbs .sep { color: var(--text-disabled); }
.tabs { display: flex; gap: var(--space-2xs); border-bottom: 1px solid var(--border-default); overflow-x: auto; scrollbar-width: none; }
.tabs [role="tab"] { display: inline-flex; align-items: center; gap: var(--space-2xs); height: 40px; padding-inline: var(--space-sm); border: 0; background: transparent; color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; margin-bottom: -1px; border-bottom: 2px solid transparent; border-radius: 0; }
.tabs [role="tab"]:hover { color: var(--text-primary); }
.tabs [role="tab"][aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--border-brand); }
.tabs [role="tab"]:disabled { color: var(--text-disabled); cursor: not-allowed; }
.tabs [role="tab"]:focus-visible { box-shadow: inset var(--shadow-focus); border-radius: var(--radius-sm); }
.tabs [role="tab"] .badge { margin-inline-start: 2px; }
[role="tabpanel"] { padding-top: var(--space-md); }
[role="tabpanel"][hidden] { display: none; }
.tabs-pill { border-bottom: 0; gap: var(--space-3xs); }
.tabs-pill [role="tab"] { height: 32px; border-radius: var(--radius-full); border-bottom: 0; margin-bottom: 0; }
.tabs-pill [role="tab"][aria-selected="true"] { background: var(--bg-accent); color: var(--text-on-accent); }
.tabs-vertical { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: var(--space-lg); }
.tabs-vertical .tabs { flex-direction: column; border-bottom: 0; border-inline-end: 1px solid var(--border-default); gap: 2px; }
.tabs-vertical .tabs [role="tab"] { height: 36px; justify-content: flex-start; border-bottom: 0; border-inline-end: 2px solid transparent; margin: 0 -1px 0 0; text-align: start; }
.tabs-vertical .tabs [role="tab"][aria-selected="true"] { border-inline-end-color: var(--border-brand); background: var(--bg-selected); }
.tabs-vertical [role="tabpanel"] { padding-top: 0; }
@container (max-width: 560px) { .tabs-vertical { grid-template-columns: 1fr; } .tabs-vertical .tabs { flex-direction: row; border-inline-end: 0; border-bottom: 1px solid var(--border-default); } }
.pagination { display: flex; align-items: center; gap: var(--space-3xs); list-style: none; margin: 0; padding: 0; }
.pagination a, .pagination button, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding-inline: var(--space-2xs); border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.pagination a:hover, .pagination button:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.pagination [aria-current="page"] { background: var(--bg-accent); color: var(--text-on-accent); font-weight: var(--weight-medium); }
.pagination button:disabled { color: var(--text-disabled); cursor: not-allowed; }
.pagination .ellipsis { color: var(--text-disabled); }
.pagination-summary { font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.menubar { display: flex; gap: var(--space-3xs); list-style: none; margin: 0; padding: var(--space-3xs); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface-1); }
.menubar > li > button { height: 28px; padding-inline: var(--space-xs); border: 0; background: transparent; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-primary); }
.menubar > li > button:hover, .menubar > li > button[aria-expanded="true"] { background: var(--bg-hover); }
.menubar > li { position: relative; }
.menu { min-width: 200px; padding: var(--space-3xs); background: var(--menu-bg); border: 1px solid var(--border-default); border-radius: var(--menu-radius); box-shadow: var(--menu-shadow); list-style: none; margin: 0; z-index: var(--z-dropdown); }
.menu-item, .menu [role="menuitem"], .menu [role="menuitemcheckbox"], .menu [role="menuitemradio"] { display: flex; align-items: center; gap: var(--space-xs); width: 100%; min-height: var(--menu-item-h); padding-inline: var(--space-xs); border: 0; background: transparent; border-radius: var(--radius-sm); color: var(--text-primary); font-size: var(--text-sm); text-align: start; text-decoration: none; cursor: pointer; }
.menu-item:hover, .menu [role^="menuitem"]:hover, .menu [role^="menuitem"]:focus-visible, .menu-item.is-active { background: var(--bg-hover); box-shadow: none; }
.menu-item .icon { color: var(--icon-secondary); }
.menu-item .kbd { margin-inline-start: auto; }
.menu-item .kbd, .menu-item .hint { margin-inline-start: auto; color: var(--text-tertiary); font-size: var(--text-2xs); }
.menu-item.is-danger { color: var(--text-danger); }
.menu-item[aria-disabled="true"] { color: var(--text-disabled); cursor: not-allowed; }
.menu-item[aria-checked="true"]::before { content: "✓"; font-size: var(--text-xs); width: 12px; }
.menu-item[aria-checked="false"]::before { content: ""; width: 12px; }
.menu .menu-sep { border-top: 1px solid var(--border-subtle); margin: var(--space-3xs) 0; }
.menu .menu-label { padding: var(--space-2xs) var(--space-xs) var(--space-3xs); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-tertiary); }
.menu .submenu-arrow { margin-inline-start: auto; color: var(--icon-secondary); }
.dropdown { position: relative; display: inline-block; }
.dropdown > .menu { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; }
.dropdown > .menu.align-end { inset-inline-start: auto; inset-inline-end: 0; }
.dropdown > .menu[hidden] { display: none; }
.mega { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-lg); padding: var(--space-lg); background: var(--menu-bg); border: 1px solid var(--border-default); border-radius: var(--menu-radius); box-shadow: var(--menu-shadow); }
.mega h4 { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-tertiary); margin-bottom: var(--space-xs); }
.mega a { display: block; padding: var(--space-2xs) 0; color: var(--text-primary); text-decoration: none; font-size: var(--text-sm); }
.mega a small { display: block; color: var(--text-tertiary); font-size: var(--text-xs); }
.mega a:hover { color: var(--text-link); }
@container (max-width: 640px) { .mega { grid-template-columns: 1fr; } }
.toc { font-size: var(--text-sm); }
.toc ol { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--border-default); }
.toc a { display: block; padding: var(--space-3xs) var(--space-sm); color: var(--text-secondary); text-decoration: none; border-inline-start: 2px solid transparent; margin-inline-start: -1px; }
.toc a:hover { color: var(--text-primary); }
.toc a.is-active { color: var(--text-primary); border-inline-start-color: var(--border-brand); font-weight: var(--weight-medium); }
.toc ol ol a { padding-inline-start: var(--space-lg); font-size: var(--text-xs); }
.anchor-nav { display: flex; gap: var(--space-2xs); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border-default); }
.anchor-nav a { padding: var(--space-xs) var(--space-sm); white-space: nowrap; color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.anchor-nav a.is-active { color: var(--text-primary); border-bottom-color: var(--border-brand); }
.back-link { display: inline-flex; align-items: center; min-height: 24px; gap: var(--space-3xs); color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm); }
.back-link:hover { color: var(--text-primary); }
.stepper { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--space-md); counter-reset: step; }
.stepper li { display: flex; align-items: center; gap: var(--space-xs); flex: 1; font-size: var(--text-sm); color: var(--text-tertiary); position: relative; }
.stepper li::before { counter-increment: step; content: counter(step); width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; font-size: var(--text-xs); font-weight: var(--weight-medium); flex: 0 0 auto; }
.stepper li:not(:last-child)::after { content: ""; flex: 1; height: 1px; background: var(--border-default); margin-inline-start: var(--space-xs); }
.stepper li.is-complete { color: var(--text-secondary); }
.stepper li.is-complete::before { content: "✓"; background: var(--bg-accent); color: var(--text-on-accent); border-color: var(--bg-accent); }
.stepper li.is-complete:not(:last-child)::after { background: var(--bg-accent); }
.stepper li[aria-current="step"] { color: var(--text-primary); font-weight: var(--weight-medium); }
.stepper li[aria-current="step"]::before { border-color: var(--bg-accent); border-width: 2px; }
.stepper li.is-error::before { content: "!"; border-color: var(--border-danger); color: var(--text-danger); }
@container (max-width: 560px) { .stepper li span { display: none; } .stepper li[aria-current="step"] span { display: inline; } }
.stepper-vertical { flex-direction: column; gap: 0; }
.stepper-vertical li { flex: none; align-items: flex-start; padding-bottom: var(--space-md); }
.stepper-vertical li:not(:last-child)::after { position: absolute; top: 28px; bottom: 4px; inset-inline-start: 12px; width: 1px; height: auto; flex: none; margin: 0; }
.stepper-vertical li .body { display: flex; flex-direction: column; gap: 2px; }
.stepper-vertical li .body small { color: var(--text-tertiary); font-weight: var(--weight-regular); }
.progress-tracker { display: flex; gap: var(--space-2xs); }
.progress-tracker span { flex: 1; height: 4px; border-radius: var(--radius-full); background: var(--bg-surface-3); }
.progress-tracker span.is-done { background: var(--bg-accent); }
.progress-tracker span.is-current { background: var(--bg-brand); }
.wizard-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--border-subtle); }
.wizard-nav .step-count { font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }


/* ===== part04.css ===== */

/* =====================================================================
   DATA DISPLAY
   ===================================================================== */
.avatar { --sz: var(--avatar-md); width: var(--sz); height: var(--sz); border-radius: 50%; background: var(--bg-surface-3); color: var(--text-secondary); display: inline-grid; place-items: center; font-size: calc(var(--sz) * .38); font-weight: var(--weight-semibold); overflow: hidden; flex: 0 0 auto; position: relative; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-xs { --sz: var(--avatar-xs); } .avatar-sm { --sz: var(--avatar-sm); } .avatar-lg { --sz: var(--avatar-lg); } .avatar-xl { --sz: var(--avatar-xl); } .avatar-2xl { --sz: var(--avatar-2xl); }
.avatar-square { border-radius: var(--radius-sm); }
.avatar-brand { background: var(--bg-accent); color: var(--text-on-accent); }
.avatar .presence { position: absolute; bottom: 0; inset-inline-end: 0; width: 28%; height: 28%; border-radius: 50%; border: 2px solid var(--bg-canvas); background: var(--bg-success); }
.avatar .presence.is-away { background: var(--bg-warning); } .avatar .presence.is-offline { background: var(--border-strong); } .avatar .presence.is-live { background: var(--bg-live); }
.avatar-group { display: inline-flex; }
.avatar-group .avatar { border: 2px solid var(--bg-canvas); margin-inline-start: -8px; }
.avatar-group .avatar:first-child { margin-inline-start: 0; }
.avatar-group .avatar.more { background: var(--bg-surface-2); font-size: var(--text-2xs); }
.badge { display: inline-flex; align-items: center; gap: 4px; height: var(--badge-h); padding-inline: var(--space-2xs); border-radius: var(--radius-sm); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: .02em; white-space: nowrap; background: var(--bg-surface-3); color: var(--text-secondary); line-height: 1; }
.badge-brand { background: var(--bg-brand-subtle); color: var(--text-brand); }
.badge-success { background: var(--bg-success-subtle); color: var(--text-success); }
.badge-warning { background: var(--bg-warning-subtle); color: var(--text-warning); }
.badge-danger { background: var(--bg-danger-subtle); color: var(--text-danger); }
.badge-info { background: var(--bg-info-subtle); color: var(--text-info); }
.badge-solid { background: var(--bg-accent); color: var(--text-on-accent); }
.badge-live { background: var(--bg-live); color: var(--text-on-live); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.badge-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-default); }
.count-badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: var(--radius-full); background: var(--bg-danger); color: var(--text-on-status); font-size: 10px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; line-height: 1; }
.count-badge.is-neutral { background: var(--bg-surface-3); color: var(--text-secondary); }
.count-badge.is-brand { background: var(--bg-brand); color: var(--text-on-brand); }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex: 0 0 auto; }
.status-dot.is-success { background: var(--bg-success); } .status-dot.is-warning { background: var(--bg-warning); } .status-dot.is-danger { background: var(--bg-danger); } .status-dot.is-info { background: var(--bg-info); } .status-dot.is-live { background: var(--bg-live); } .status-dot.is-brand { background: var(--bg-brand); }
.status { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); }
.lozenge { display: inline-flex; align-items: center; height: 18px; padding-inline: 6px; border-radius: var(--radius-xs); font-size: 10px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; background: var(--bg-surface-3); color: var(--text-secondary); line-height: 1; }
.lozenge-brand { background: var(--bg-brand); color: var(--text-on-brand); } .lozenge-success { background: var(--bg-success); color: var(--text-on-status); } .lozenge-warning { background: var(--bg-warning); color: var(--text-on-status); } .lozenge-danger { background: var(--bg-danger); color: var(--text-on-status); } .lozenge-info { background: var(--bg-info); color: var(--text-on-status); } .lozenge-inverse { background: var(--bg-inverse); color: var(--text-inverse); }
.tag { display: inline-flex; align-items: center; gap: var(--space-3xs); height: var(--tag-h); padding-inline: var(--space-xs); border-radius: var(--radius-sm); background: var(--bg-surface-2); border: 1px solid var(--border-default); color: var(--text-primary); font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; }
.tag button { border: 0; background: transparent; padding: 0; margin-inline-end: -4px; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--text-tertiary); }
.tag button:hover { background: var(--bg-active); color: var(--text-primary); }
.tag-brand { background: var(--bg-brand-subtle); border-color: transparent; color: var(--text-brand); }
.tag-interactive { cursor: pointer; }
.tag-interactive:hover { border-color: var(--border-strong); }
.tag[aria-pressed="true"], .tag.is-selected { background: var(--bg-accent); border-color: var(--bg-accent); color: var(--text-on-accent); }
.kv { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: var(--space-xs) var(--space-lg); font-size: var(--text-sm); }
.kv dt { color: var(--text-secondary); }
.kv dd { color: var(--text-primary); }
.kv-stacked { grid-template-columns: 1fr; gap: var(--space-2xs); }
.kv-stacked dt { font-size: var(--text-xs); }
.kv-stacked dd { margin-bottom: var(--space-xs); }
.stat { display: flex; flex-direction: column; gap: var(--space-2xs); }
.stat .label { font-size: var(--text-xs); color: var(--text-secondary); font-weight: var(--weight-medium); }
.stat .value { font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: 1; font-variant-numeric: tabular-nums; }
.stat .delta { font-size: var(--text-xs); display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.stat .delta.is-up { color: var(--text-success); } .stat .delta.is-down { color: var(--text-danger); }
.stat .delta .icon { width: 12px; height: 12px; }
.kpi-card { display: grid; grid-template-columns: 1fr auto; gap: var(--space-sm); align-items: end; }
.kpi-card svg.spark { width: 96px; height: 32px; }
.metric-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.metric-group > .stat { padding: var(--space-md); border-inline-start: 1px solid var(--border-subtle); }
.metric-group > .stat:first-child { border-inline-start: 0; }
@container (max-width: 560px) { .metric-group > .stat { border-inline-start: 0; border-top: 1px solid var(--border-subtle); } .metric-group > .stat:first-child { border-top: 0; } }
.meter { height: 8px; background: var(--bg-surface-3); border-radius: var(--radius-full); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--bg-accent); border-radius: inherit; transition: width var(--dur-4) var(--ease-standard); }
.meter.is-brand > i { background: var(--bg-brand); } .meter.is-warning > i { background: var(--bg-warning); } .meter.is-danger > i { background: var(--bg-danger); } .meter.is-success > i { background: var(--bg-success); }
.meter-sm { height: 4px; }
.meter-row { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); align-items: center; }
.meter-row .meter { grid-column: 1 / -1; }
.ring { --v: 0; --sz: 64px; --w: 6px; width: var(--sz); height: var(--sz); border-radius: 50%; background: conic-gradient(var(--bg-accent) calc(var(--v) * 1%), var(--bg-surface-3) 0); display: grid; place-items: center; position: relative; }
.ring::before { content: ""; position: absolute; inset: var(--w); border-radius: 50%; background: var(--bg-canvas); }
.ring > span { position: relative; font-size: var(--text-sm); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.ring.is-brand { background: conic-gradient(var(--bg-brand) calc(var(--v) * 1%), var(--bg-surface-3) 0); }
.rating-display { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); }
.rating-display .stars { display: inline-flex; gap: 1px; color: var(--p-a-500); }
.rating-display .stars .icon { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.rating-display .stars .icon.is-empty { fill: none; stroke: currentColor; }
.list-rows { list-style: none; margin: 0; padding: 0; }
.list-row { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-subtle); min-height: 56px; }
.list-row:last-child { border-bottom: 0; }
.list-row .body { flex: 1; min-width: 0; }
.list-row .body b { display: block; font-weight: var(--weight-medium); font-size: var(--text-sm); }
.list-row .body small { color: var(--text-secondary); font-size: var(--text-xs); display: block; }
.list-row .end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-xs); flex: 0 0 auto; }
.list-row-link { text-decoration: none; color: inherit; }
.list-row-link:hover { background: var(--bg-hover); margin-inline: calc(var(--space-sm) * -1); padding-inline: var(--space-sm); border-radius: var(--radius-sm); }
.desc-card { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: start; }
.desc-card .icon-box { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--bg-brand-subtle); color: var(--text-brand); display: grid; place-items: center; }
.desc-card h4 { font-size: var(--text-md); font-weight: var(--weight-semibold); margin-bottom: 2px; }
.desc-card p { font-size: var(--text-sm); color: var(--text-secondary); }
.accordion { border-top: 1px solid var(--border-default); }
.accordion > details { border-bottom: 1px solid var(--border-default); }
.accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) 0; cursor: pointer; font-weight: var(--weight-medium); font-size: var(--text-md); list-style: none; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .icon { color: var(--icon-secondary); transition: transform var(--dur-2) var(--ease-standard); flex: 0 0 auto; }
.accordion details[open] summary .icon { transform: rotate(180deg); }
.accordion .body { padding-bottom: var(--space-md); color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); max-width: var(--measure); }
.collapsible > summary { display: inline-flex; align-items: center; gap: var(--space-2xs); cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-link); list-style: none; }
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary .icon { transition: transform var(--dur-2); }
.collapsible[open] > summary .icon { transform: rotate(90deg); }
.collapsible .body { padding-top: var(--space-xs); font-size: var(--text-sm); }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; top: 8px; bottom: 8px; inset-inline-start: 7px; width: 1px; background: var(--border-default); }
.timeline li { position: relative; padding-inline-start: var(--space-lg); padding-bottom: var(--space-md); font-size: var(--text-sm); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: 4px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); box-shadow: 0 0 0 3px var(--bg-canvas); }
.timeline li.is-brand::before { background: var(--bg-brand); } .timeline li.is-success::before { background: var(--bg-success); } .timeline li.is-danger::before { background: var(--bg-danger); } .timeline li.is-live::before { background: var(--bg-live); }
.timeline li time, .timeline li .when { display: block; font-size: var(--text-xs); color: var(--text-tertiary); }
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.feed li:last-child { border-bottom: 0; }
.feed .what { line-height: 1.45; }
.feed .what b { font-weight: var(--weight-medium); }
.feed .when { font-size: var(--text-xs); color: var(--text-tertiary); }
.comment { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); }
.comment .head { display: flex; align-items: baseline; gap: var(--space-xs); font-size: var(--text-sm); }
.comment .head b { font-weight: var(--weight-semibold); }
.comment .head time { color: var(--text-tertiary); font-size: var(--text-xs); }
.comment .text { font-size: var(--text-sm); line-height: var(--leading-relaxed); margin-top: 2px; }
.comment .actions { display: flex; gap: var(--space-xs); margin-top: var(--space-2xs); }
.comment-thread { display: flex; flex-direction: column; gap: var(--space-md); }
.comment-thread .replies { padding-inline-start: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); border-inline-start: 1px solid var(--border-subtle); margin-inline-start: 16px; }
.audit-log { font-family: var(--font-mono); font-size: var(--text-xs); }
.audit-log li { display: grid; grid-template-columns: 150px 120px 1fr; gap: var(--space-sm); padding: var(--space-2xs) 0; border-bottom: 1px solid var(--border-subtle); }
.audit-log time { color: var(--text-tertiary); }
.audit-log .actor { color: var(--text-secondary); }
@container (max-width: 560px) { .audit-log li { grid-template-columns: 1fr; gap: 0; } }
.table-wrap { overflow-x: auto; border: 1px solid var(--table-border); border-radius: var(--radius-md); }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th, .table td { text-align: start; padding: 0 var(--space-sm); height: var(--table-row-h); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; white-space: nowrap; }
.table th { background: var(--table-header-bg); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-secondary); position: sticky; top: 0; z-index: 1; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--bg-hover); }
.table tr[aria-selected="true"] td, .table tr.is-selected td { background: var(--bg-selected); }
.table td.num, .table th.num { text-align: end; font-variant-numeric: tabular-nums; }
.table .cell-primary { font-weight: var(--weight-medium); color: var(--text-primary); }
.table .cell-secondary { color: var(--text-secondary); font-size: var(--text-xs); }
.table .cell-wrap { white-space: normal; min-width: 240px; }
.table .th-sort { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.table .th-sort .icon { width: 12px; height: 12px; opacity: .4; }
.table th[aria-sort] .th-sort .icon { opacity: 1; color: var(--text-brand); }
.table th[aria-sort="descending"] .th-sort .icon { transform: rotate(180deg); }
.table .chk { min-height: 0; }
.table .row-actions { opacity: 0; transition: opacity var(--dur-1); }
.table tr:hover .row-actions, .table tr:focus-within .row-actions { opacity: 1; }
.table .expand-row td { background: var(--bg-surface-2); white-space: normal; height: auto; padding-block: var(--space-sm); }
.table .tree-cell { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.table .tree-cell .tw { width: 16px; height: 16px; border: 0; background: transparent; padding: 0; display: inline-grid; place-items: center; color: var(--icon-secondary); }
.table .depth-1 .tree-cell { padding-inline-start: 20px; } .table .depth-2 .tree-cell { padding-inline-start: 40px; }
.table td[contenteditable="true"], .table td.is-editable { cursor: text; }
.table td[contenteditable="true"]:focus { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); background: var(--bg-canvas); }
.table-compact th, .table-compact td { height: 32px; }
.table-striped tbody tr:nth-child(even) td { background: var(--bg-surface-2); }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border-top: 1px solid var(--border-subtle); background: var(--bg-surface-2); font-size: var(--text-xs); color: var(--text-secondary); flex-wrap: wrap; }
.data-grid { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: auto; max-height: 320px; font-family: var(--font-mono); font-size: var(--text-xs); }
.data-grid table { border-collapse: collapse; min-width: 100%; }
.data-grid th, .data-grid td { border: 1px solid var(--border-subtle); padding: 4px var(--space-xs); white-space: nowrap; height: 28px; }
.data-grid th { background: var(--bg-surface-2); position: sticky; top: 0; font-weight: var(--weight-medium); text-align: start; }
.data-grid th:first-child, .data-grid td:first-child { position: sticky; left: 0; background: var(--bg-surface-2); color: var(--text-tertiary); text-align: end; z-index: 1; }
.data-grid th:first-child { z-index: 2; }
.data-grid td.is-active { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.carousel { position: relative; }
.carousel .track { display: flex; gap: var(--space-sm); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.carousel .track > * { flex: 0 0 min(280px, 80cqw); scroll-snap-align: start; }
.carousel .ctl { position: absolute; top: 40%; transform: translateY(-50%); z-index: 1; }
.carousel .ctl.prev { inset-inline-start: -8px; } .carousel .ctl.next { inset-inline-end: -8px; }
.carousel .dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--space-xs); }
.carousel .dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--border-default); }
.carousel .dots button[aria-current="true"] { background: var(--bg-accent); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: var(--space-xs); }
.gallery button { padding: 0; border: 0; background: transparent; border-radius: var(--radius-sm); overflow: hidden; }
.gallery .ratio { border-radius: var(--radius-sm); }
.diff { font-family: var(--font-mono); font-size: var(--text-xs); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: auto; }
.diff .line { display: grid; grid-template-columns: 40px 40px 1fr; }
.diff .line span:first-child, .diff .line span:nth-child(2) { color: var(--text-tertiary); text-align: end; padding-inline: 6px; user-select: none; border-inline-end: 1px solid var(--border-subtle); }
.diff .line span:last-child { padding-inline: var(--space-xs); white-space: pre; }
.diff .add { background: var(--bg-success-subtle); } .diff .del { background: var(--bg-danger-subtle); }
.diff .add span:last-child::before { content: "+ "; color: var(--text-success); } .diff .del span:last-child::before { content: "- "; color: var(--text-danger); }
.diff .file { padding: var(--space-2xs) var(--space-xs); background: var(--bg-surface-2); border-bottom: 1px solid var(--border-subtle); font-weight: var(--weight-medium); }
.diff-split { display: grid; grid-template-columns: 1fr 1fr; }
.diff-split > div { min-width: 0; }
.diff-split > div + div { border-inline-start: 1px solid var(--border-subtle); }
.json { font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; }
.json details { padding-inline-start: 14px; position: relative; }
.json summary { list-style: none; cursor: pointer; margin-inline-start: -14px; }
.json summary::-webkit-details-marker { display: none; }
.json summary::before { content: "▸"; display: inline-block; width: 14px; color: var(--text-tertiary); }
.json details[open] > summary::before { content: "▾"; }
.json .k { color: var(--text-brand); } .json .s { color: var(--text-success); } .json .n { color: var(--text-warning); } .json .b { color: var(--p-v-400); } .json .p { color: var(--text-tertiary); }
.file-row { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.file-row .ext { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--bg-surface-3); display: grid; place-items: center; font-size: 9px; font-weight: var(--weight-bold); text-transform: uppercase; color: var(--text-secondary); font-family: var(--font-mono); }
.file-row .name { flex: 1; min-width: 0; }
.file-row .name small { display: block; color: var(--text-tertiary); font-size: var(--text-xs); }
.cal-view { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; font-size: var(--text-xs); }
.cal-view .cal-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--bg-surface-2); border-bottom: 1px solid var(--border-default); }
.cal-view .cal-head span { padding: var(--space-2xs); text-align: center; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-tertiary); font-size: 10px; }
.cal-view .cal-body { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-view .day { min-height: 76px; padding: var(--space-3xs); border-inline-end: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.cal-view .day:nth-child(7n) { border-inline-end: 0; }
.cal-view .day .n { font-variant-numeric: tabular-nums; color: var(--text-secondary); display: block; margin-bottom: 2px; }
.cal-view .day.is-today .n { color: var(--text-brand); font-weight: var(--weight-semibold); }
.cal-view .day.is-outside { background: var(--bg-surface-2); color: var(--text-disabled); }
.cal-view .ev { display: block; min-height: 24px; line-height: 22px; padding: 0 4px; border-radius: 2px; background: var(--bg-brand-subtle); color: var(--text-brand); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; text-decoration: none; }
.cal-view .ev.is-live { background: var(--bg-live); color: var(--text-on-live); }
.cal-view .ev.is-neutral { background: var(--bg-surface-3); color: var(--text-secondary); }
@container (max-width: 560px) { .cal-view .day { min-height: 44px; } .cal-view .ev { font-size: 0; height: 6px; border-radius: var(--radius-full); } }
.thumb { position: relative; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-surface-3); aspect-ratio: 16 / 9; }
.thumb .duration { position: absolute; bottom: 6px; inset-inline-end: 6px; padding: 1px 5px; border-radius: var(--radius-xs); background: var(--media-scrim); color: var(--p-n-0); font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums; }
.thumb .badge-live { position: absolute; top: 6px; inset-inline-start: 6px; }
.thumb .progress-line { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--bg-brand); }
.thumb .play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--p-n-0); opacity: 0; transition: opacity var(--dur-2); background: var(--media-scrim-soft); }
.thumb:hover .play, .thumb:focus-within .play { opacity: 1; }
.thumb .play .icon { width: 40px; height: 40px; fill: currentColor; stroke: none; }
.thumb-sm { width: 120px; }
.poster { background: linear-gradient(135deg, var(--p-n-900), var(--p-n-1000)); position: relative; overflow: hidden; }
.poster::after { content: ""; position: absolute; inset: auto -20% -50% auto; width: 70%; aspect-ratio: 1; border: 1px solid var(--poster-rule); transform: rotate(35deg); }
.poster .cube-mark { position: absolute; bottom: 10px; inset-inline-start: 10px; width: 22px; height: 22px; color: var(--p-c-400); }
.img { border-radius: var(--radius-sm); }
.img-missing { display: grid; place-items: center; background: var(--bg-surface-3); color: var(--text-tertiary); font-size: var(--text-xs); aspect-ratio: 16 / 9; border-radius: var(--radius-sm); border: 1px dashed var(--border-default); }
.figure figcaption { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-xs); }

/* =====================================================================
   OVERLAYS
   ===================================================================== */
.tooltip { position: absolute; z-index: var(--z-tooltip); max-width: 260px; padding: var(--space-2xs) var(--space-xs); background: var(--tooltip-bg); color: var(--tooltip-text); font-size: var(--text-xs); line-height: 1.4; border-radius: var(--radius-sm); pointer-events: none; opacity: 0; transform: translateY(2px); transition: opacity var(--dur-2) var(--ease-enter), transform var(--dur-2) var(--ease-enter); white-space: normal; }
.tooltip.is-open { opacity: 1; transform: none; }
.tooltip.is-rich { padding: var(--space-xs) var(--space-sm); max-width: 320px; }
.tooltip.is-rich b { display: block; font-weight: var(--weight-semibold); margin-bottom: 2px; }
.tooltip .kbd { background: var(--on-media-hover); border-color: var(--on-media-kbd); color: inherit; }
.popover-panel { background: var(--bg-raised); border: 1px solid var(--border-default); border-radius: var(--menu-radius); box-shadow: var(--menu-shadow); padding: var(--space-md); max-width: 320px; }
.popover-panel h4 { font-size: var(--text-md); font-weight: var(--weight-semibold); margin-bottom: var(--space-2xs); }
.popover-panel p { font-size: var(--text-sm); color: var(--text-secondary); }
.popover { position: relative; display: inline-block; }
.popover > .popover-panel { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: var(--z-dropdown); width: max-content; }
.popover > .popover-panel[hidden] { display: none; }
.hover-card { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); }
.hover-card .name { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.hover-card .role { font-size: var(--text-xs); color: var(--text-secondary); }
.hover-card .stats { display: flex; gap: var(--space-md); margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--text-secondary); }
.hover-card .stats b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
dialog.dialog { padding: 0; border: 0; border-radius: var(--dialog-radius); background: var(--dialog-bg); color: var(--text-primary); box-shadow: var(--dialog-shadow); width: min(var(--dialog-max-w), calc(100vw - 32px)); max-height: calc(100vh - 64px); }
dialog.dialog::backdrop { background: var(--bg-scrim); }
dialog.dialog[open] { animation: dlg-in var(--dur-3) var(--ease-enter); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.dialog-head { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-lg) var(--space-lg) 0; }
.dialog-head h2 { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); flex: 1; }
.dialog-head .close { margin: -6px -8px 0 0; }
.dialog-body { padding: var(--space-sm) var(--space-lg) var(--space-lg); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); }
.dialog-body .form { color: var(--text-primary); }
.dialog-foot { display: flex; justify-content: flex-end; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--border-subtle); }
.dialog-foot .start { margin-inline-end: auto; }
.dialog-sm { --dialog-max-w: 420px; }
.dialog-lg { --dialog-max-w: 840px; }
.alert-dialog .dialog-head .icon-box { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-danger-subtle); color: var(--text-danger); display: grid; place-items: center; flex: 0 0 auto; }
dialog.drawer { padding: 0; border: 0; margin: 0; inset: 0 0 0 auto; width: min(420px, 100vw); max-width: 100vw; height: 100vh; max-height: 100vh; background: var(--dialog-bg); color: var(--text-primary); box-shadow: var(--dialog-shadow); display: none; flex-direction: column; }
dialog.drawer[open] { display: flex; animation: drawer-in var(--dur-3) var(--ease-enter); }
dialog.drawer.from-start { inset: 0 auto 0 0; }
[dir="rtl"] dialog.drawer { inset: 0 auto 0 0; } [dir="rtl"] dialog.drawer.from-start { inset: 0 0 0 auto; }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }
dialog.drawer::backdrop { background: var(--bg-scrim); }
.drawer .dialog-body { flex: 1; overflow: auto; }
dialog.sheet { padding: 0; border: 0; margin: 0; inset: auto 0 0 0; width: 100vw; max-width: 100vw; max-height: 85vh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--dialog-bg); color: var(--text-primary); box-shadow: var(--dialog-shadow); }
dialog.sheet[open] { animation: sheet-in var(--dur-3) var(--ease-enter); }
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0; } }
dialog.sheet::backdrop { background: var(--bg-scrim); }
.sheet .grab { width: 36px; height: 4px; border-radius: var(--radius-full); background: var(--border-strong); margin: var(--space-xs) auto 0; }
.sheet-demo { position: relative; border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; height: 240px; background: var(--bg-surface-2); }
.sheet-demo .sheet-panel { position: absolute; inset: auto 0 0 0; background: var(--bg-raised); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-3); padding: 0 var(--space-md) var(--space-md); }
dialog.lightbox { padding: 0; border: 0; background: transparent; max-width: min(1100px, 96vw); }
dialog.lightbox::backdrop { background: var(--media-scrim-strong); }
.lightbox figure { position: relative; }
.lightbox figcaption { color: var(--p-n-0); font-size: var(--text-sm); padding: var(--space-sm) 0; display: flex; justify-content: space-between; }
.lightbox .close { position: absolute; top: var(--space-sm); inset-inline-end: var(--space-sm); }
.disclosure > summary { display: flex; align-items: center; gap: var(--space-2xs); cursor: pointer; list-style: none; font-size: var(--text-sm); font-weight: var(--weight-medium); padding: var(--space-xs) 0; }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary .icon { transition: transform var(--dur-2); color: var(--icon-secondary); }
.disclosure[open] > summary .icon { transform: rotate(90deg); }
.context-panel { border-inline-start: 1px solid var(--border-default); padding-inline-start: var(--space-md); font-size: var(--text-sm); }
.context-panel h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); margin-bottom: var(--space-xs); }
.inline-dialog { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-md); background: var(--bg-raised); box-shadow: var(--shadow-2); max-width: 360px; }
.inline-dialog p { font-size: var(--text-sm); margin-bottom: var(--space-sm); }
.spotlight-demo { position: relative; padding: var(--space-lg); background: var(--bg-scrim); border-radius: var(--radius-md); color: var(--p-n-0); }
.spotlight-demo .target { position: relative; display: inline-block; border-radius: var(--radius-sm); box-shadow: 0 0 0 4px var(--bg-canvas), 0 0 0 9999px rgba(0,18,29,.55); }
.coach { position: relative; background: var(--bg-inverse); color: var(--text-inverse); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); max-width: 300px; font-size: var(--text-sm); }
.coach::before { content: ""; position: absolute; top: -6px; inset-inline-start: 20px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--bg-inverse); }
.coach b { display: block; margin-bottom: 2px; }
.coach .foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-xs); font-size: var(--text-xs); opacity: .85; }
.coach .foot .btn { --btn-h: 26px; }
.tour-progress { display: flex; gap: 4px; }
.tour-progress i { width: 6px; height: 6px; border-radius: 50%; background: var(--on-media-dim); }
.tour-progress i.is-on { background: var(--bg-brand); }

/* =====================================================================
   FEEDBACK
   ===================================================================== */
.alert { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--bg-surface-2); font-size: var(--text-sm); align-items: start; }
.alert .icon { margin-top: 2px; }
.alert b { font-weight: var(--weight-semibold); display: block; }
.alert p { color: var(--text-secondary); }
.alert .actions { display: flex; gap: var(--space-xs); margin-top: var(--space-xs); }
.alert-info { background: var(--bg-info-subtle); border-color: transparent; } .alert-info .icon { color: var(--text-info); }
.alert-success { background: var(--bg-success-subtle); border-color: transparent; } .alert-success .icon { color: var(--text-success); }
.alert-warning { background: var(--bg-warning-subtle); border-color: transparent; } .alert-warning .icon { color: var(--text-warning); }
.alert-danger { background: var(--bg-danger-subtle); border-color: transparent; } .alert-danger .icon { color: var(--text-danger); }
.alert-inline { padding: var(--space-xs) var(--space-sm); grid-template-columns: auto 1fr; }
.section-msg { border-inline-start: 3px solid var(--border-info); padding: var(--space-xs) var(--space-sm); background: var(--bg-surface-2); font-size: var(--text-sm); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.section-msg.is-warning { border-color: var(--border-warning); } .section-msg.is-danger { border-color: var(--border-danger); } .section-msg.is-success { border-color: var(--border-success); }
.banner { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); background: var(--bg-inverse); color: var(--text-inverse); font-size: var(--text-sm); }
.banner .btn { --btn-h: 28px; }
.banner .close { margin-inline-start: auto; color: inherit; }
.banner-brand { background: var(--bg-brand); color: var(--text-on-brand); }
.banner-warning { background: var(--bg-warning-subtle); color: var(--text-warning); }
.banner-danger { background: var(--bg-danger); color: var(--text-on-status); }
.banner-live { background: var(--bg-live); color: var(--text-on-live); }
.toast-region { position: fixed; bottom: var(--space-lg); inset-inline-end: var(--space-lg); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-xs); width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-xs); align-items: start; padding: var(--space-sm) var(--space-md); background: var(--toast-bg); color: var(--toast-text); border-radius: var(--radius-md); box-shadow: var(--shadow-3); font-size: var(--text-sm); pointer-events: auto; animation: toast-in var(--dur-3) var(--ease-enter); }
.toast.is-leaving { animation: toast-out var(--dur-2) var(--ease-exit) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
.toast b { display: block; font-weight: var(--weight-semibold); }
.toast .icon { margin-top: 2px; }
.toast-success .icon { color: var(--p-g-300); } .toast-danger .icon { color: var(--p-r-300); } .toast-warning .icon { color: var(--p-a-300); } .toast-info .icon { color: var(--p-c-300); }
.toast .btn { --btn-h: 26px; color: inherit; margin-top: -2px; }
.toast .btn-ghost:hover { background: var(--bg-inverse-hover); color: inherit; }
.toast .undo { text-decoration: underline; color: inherit; background: none; border: 0; padding: 0; font: inherit; font-weight: var(--weight-medium); }
.snackbar { display: inline-flex; align-items: center; gap: var(--space-md); padding: var(--space-xs) var(--space-md); background: var(--toast-bg); color: var(--toast-text); border-radius: var(--radius-md); box-shadow: var(--shadow-3); font-size: var(--text-sm); }
.notification { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.notification.is-unread { background: var(--bg-brand-subtle); }
.notification .when { font-size: var(--text-xs); color: var(--text-tertiary); }
.notification .text { line-height: 1.45; }
.notification .unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-brand); margin-top: 6px; }
.notif-center { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.notif-center .head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xs) var(--space-md); background: var(--bg-surface-2); border-bottom: 1px solid var(--border-default); font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-xs); padding: var(--space-2xl) var(--space-md); max-width: 420px; margin-inline: auto; }
.state .icon-box { width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--bg-surface-3); color: var(--text-secondary); display: grid; place-items: center; margin-bottom: var(--space-2xs); }
.state .icon-box.is-danger { background: var(--bg-danger-subtle); color: var(--text-danger); }
.state .icon-box.is-warning { background: var(--bg-warning-subtle); color: var(--text-warning); }
.state .icon-box.is-brand { background: var(--bg-brand-subtle); color: var(--text-brand); }
.state .icon-box.is-success { background: var(--bg-success-subtle); color: var(--text-success); }
.state h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.state p { font-size: var(--text-sm); color: var(--text-secondary); }
.state .actions { display: flex; gap: var(--space-xs); margin-top: var(--space-xs); flex-wrap: wrap; justify-content: center; }
.state-compact { padding: var(--space-md); flex-direction: row; text-align: start; max-width: none; align-items: center; }
.state-compact .icon-box { margin: 0; width: 36px; height: 36px; }
.spinner { width: 20px; height: 20px; border: 2px solid var(--border-default); border-top-color: var(--text-primary); border-radius: 50%; animation: spin .8s linear infinite; flex: 0 0 auto; }
.spinner-sm { width: 14px; height: 14px; } .spinner-lg { width: 32px; height: 32px; border-width: 3px; }
.spinner-brand { border-top-color: var(--bg-brand); }
.skeleton { background: linear-gradient(90deg, var(--bg-skeleton) 0%, var(--bg-skeleton-2) 50%, var(--bg-skeleton) 100%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skeleton-line { height: 10px; margin-bottom: var(--space-xs); } .skeleton-line:last-child { margin-bottom: 0; }
.skeleton-line.w-60 { width: 60%; } .skeleton-line.w-40 { width: 40%; } .skeleton-line.w-80 { width: 80%; }
.skeleton-circle { width: 32px; height: 32px; border-radius: 50%; }
.skeleton-thumb { aspect-ratio: 16 / 9; }
.skeleton-text { height: 14px; }
.progress { height: 6px; background: var(--bg-surface-3); border-radius: var(--radius-full); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--bg-accent); border-radius: inherit; transition: width var(--dur-4) var(--ease-standard); }
.progress.is-brand > i { background: var(--bg-brand); }
.progress.is-indeterminate > i { width: 40%; animation: indet 1.4s var(--ease-standard) infinite; }
@keyframes indet { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
[dir="rtl"] .progress.is-indeterminate > i { animation-name: indet-rtl; }
@keyframes indet-rtl { from { transform: translateX(100%); } to { transform: translateX(-260%); } }
.progress-labeled { display: grid; gap: var(--space-2xs); font-size: var(--text-xs); }
.progress-labeled .row { display: flex; justify-content: space-between; }
.progress-labeled .row b { font-weight: var(--weight-medium); }
.progress-labeled .row span { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.loading-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--bg-canvas) 70%, transparent); z-index: var(--z-raised); border-radius: inherit; }
.loading-overlay .inner { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); }
.live-region-demo { font-size: var(--text-sm); color: var(--text-secondary); min-height: 20px; }
.system-state { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-md); font-size: var(--text-sm); border: 1px solid var(--border-default); }
.system-state.is-offline { background: var(--bg-surface-3); }
.system-state.is-reconnecting { background: var(--bg-warning-subtle); border-color: transparent; color: var(--text-warning); }
.system-state.is-maintenance { background: var(--bg-info-subtle); border-color: transparent; color: var(--text-info); }
.system-state .spinner { border-top-color: currentColor; border-color: color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; }

/* =====================================================================
   MEDIA
   ===================================================================== */
.player { background: var(--player-bg); color: var(--p-n-0); border-radius: var(--radius-lg); overflow: hidden; position: relative; aspect-ratio: 16 / 9; display: grid; grid-template-rows: 1fr auto; }
.player .stage { position: relative; display: grid; place-items: center; background: linear-gradient(160deg, var(--p-n-900), var(--p-n-1000)); }
.player .stage .big-play { width: 64px; height: 64px; border-radius: 50%; background: var(--on-media-fill); border: 1px solid var(--on-media-border); color: var(--p-n-0); display: grid; place-items: center; backdrop-filter: none; }
.player .stage .big-play .icon { width: 28px; height: 28px; fill: currentColor; stroke: none; margin-inline-start: 3px; }
.player .lower-third { position: absolute; bottom: 12px; inset-inline-start: 12px; display: grid; grid-template-columns: auto 1fr; gap: 0; background: var(--p-n-0); color: var(--p-n-900); border-inline-start: 4px solid var(--p-c-400); padding: 6px 12px; font-size: var(--text-xs); line-height: 1.3; max-width: 70%; }
.player .lower-third b { display: block; font-size: var(--text-sm); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .02em; }
.player .lower-third small { color: var(--p-n-600); }
.player .live-tag { position: absolute; top: 12px; inset-inline-start: 12px; }
.player .controls { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); background: var(--media-chrome); font-size: var(--text-xs); }
.player .controls .btn { color: var(--p-n-0); --btn-h: 32px; }
.player .controls .btn-ghost:hover { background: var(--on-media-hover); color: var(--p-n-0); }
.player .controls .scrub { flex: 1; height: 4px; background: var(--on-media-track); border-radius: var(--radius-full); position: relative; cursor: pointer; }
.player .controls .scrub > i { position: absolute; inset: 0 auto 0 0; background: var(--p-c-400); border-radius: inherit; }
.player .controls .scrub > i::after { content: ""; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--p-n-0); }
.player .controls .scrub .chapter { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--media-chapter); }
.player .controls .time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--on-media-muted); white-space: nowrap; }
.player .controls .live-dot { display: inline-flex; align-items: center; gap: 4px; color: var(--p-live-300); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); }
.player .controls .live-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.player-sm { aspect-ratio: auto; }
.audio { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: center; padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface-1); }
.audio .art { width: 56px; height: 56px; border-radius: var(--radius-sm); }
.audio .title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.audio .sub { font-size: var(--text-xs); color: var(--text-secondary); }
.audio .bar { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-2xs); font-size: var(--text-2xs); font-family: var(--font-mono); color: var(--text-tertiary); }
.audio .bar .progress { flex: 1; }
.audio .waveform { display: flex; align-items: center; gap: 2px; height: 24px; flex: 1; }
.audio .waveform i { flex: 1; background: var(--border-strong); border-radius: 1px; }
.audio .waveform i.is-played { background: var(--bg-brand); }
.attachment { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-xs); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: var(--text-xs); background: var(--bg-surface-1); max-width: 100%; }
.attachment .icon { color: var(--icon-secondary); }
.attachment .size { color: var(--text-tertiary); }
.file-preview { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.file-preview .head { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); background: var(--bg-surface-2); border-bottom: 1px solid var(--border-default); font-size: var(--text-xs); }
.file-preview .body { padding: var(--space-md); min-height: 120px; display: grid; place-items: center; color: var(--text-tertiary); font-size: var(--text-sm); }
.cropper { position: relative; aspect-ratio: 4 / 3; background: var(--bg-surface-3); border-radius: var(--radius-md); overflow: hidden; }
.cropper .frame { position: absolute; inset: 15% 20%; border: 2px solid var(--p-n-0); box-shadow: 0 0 0 9999px rgba(0,18,29,.5); }
.cropper .frame::before, .cropper .frame::after { content: ""; position: absolute; background: var(--on-media-border); }
.cropper .frame::before { top: 33.3%; bottom: 33.3%; left: 0; right: 0; border-top: 1px solid var(--on-media-border); border-bottom: 1px solid var(--on-media-border); background: none; }
.cropper .frame::after { left: 33.3%; right: 33.3%; top: 0; bottom: 0; border-left: 1px solid var(--on-media-border); border-right: 1px solid var(--on-media-border); background: none; }
.cropper .frame i { position: absolute; width: 10px; height: 10px; background: var(--p-n-0); }
.cropper .frame i:nth-child(1) { top: -5px; left: -5px; } .cropper .frame i:nth-child(2) { top: -5px; right: -5px; } .cropper .frame i:nth-child(3) { bottom: -5px; left: -5px; } .cropper .frame i:nth-child(4) { bottom: -5px; right: -5px; }
.cropper.is-round .frame { inset: 10% 25%; border-radius: 50%; }
.recording { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-full); background: var(--bg-danger-subtle); color: var(--text-danger); font-size: var(--text-xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.recording::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bg-live); animation: pulse 1.2s ease-in-out infinite; }
.recording .levels { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.recording .levels i { width: 3px; background: currentColor; border-radius: 1px; animation: level .9s ease-in-out infinite; }
.recording .levels i:nth-child(2) { animation-delay: .15s; } .recording .levels i:nth-child(3) { animation-delay: .3s; } .recording .levels i:nth-child(4) { animation-delay: .45s; }
@keyframes level { 0%, 100% { height: 4px; } 50% { height: 14px; } }

/* =====================================================================
   PRODUCTIVITY
   ===================================================================== */
.filter-bar { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }
.filter-bar .search { flex: 1 1 200px; }
.filter-chip { display: inline-flex; align-items: center; gap: var(--space-3xs); height: 28px; padding-inline: var(--space-xs); border: 1px dashed var(--border-strong); border-radius: var(--radius-full); background: transparent; font-size: var(--text-xs); color: var(--text-secondary); }
.filter-chip.is-active { border-style: solid; border-color: var(--border-brand); background: var(--bg-brand-subtle); color: var(--text-brand); }
.filter-chip b { font-weight: var(--weight-semibold); }
.filter-chip button { border: 0; background: transparent; padding: 0; color: inherit; display: grid; place-items: center; }
.filter-builder { display: flex; flex-direction: column; gap: var(--space-xs); }
.filter-builder .rule { display: grid; grid-template-columns: 60px 1fr 1fr 1fr auto; gap: var(--space-xs); align-items: center; }
.filter-builder .rule .conj { font-size: var(--text-xs); color: var(--text-tertiary); text-align: center; font-family: var(--font-mono); }
.filter-builder .group { border-inline-start: 2px solid var(--border-default); padding-inline-start: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); }
@container (max-width: 640px) { .filter-builder .rule { grid-template-columns: 1fr 1fr; } .filter-builder .rule .conj { grid-column: 1 / -1; text-align: start; } }
.query-builder { font-family: var(--font-mono); font-size: var(--text-xs); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-sm); display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; }
.query-builder .tok { padding: 2px 6px; border-radius: var(--radius-xs); background: var(--bg-surface-3); }
.query-builder .tok.k { background: var(--bg-brand-subtle); color: var(--text-brand); } .query-builder .tok.v { background: var(--bg-success-subtle); color: var(--text-success); } .query-builder .tok.op { color: var(--text-tertiary); background: none; }
.bulk-bar { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); background: var(--bg-inverse); color: var(--text-inverse); border-radius: var(--radius-md); font-size: var(--text-sm); box-shadow: var(--shadow-2); }
.bulk-bar .count { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.bulk-bar .btn { color: inherit; --btn-h: 28px; }
.bulk-bar .btn-ghost:hover { background: var(--bg-inverse-hover); color: inherit; }
.bulk-bar .close { margin-inline-start: auto; }
.selection-toolbar { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm); background: var(--bg-selected); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.drag-handle { display: inline-grid; place-items: center; width: 20px; height: 24px; color: var(--icon-secondary); cursor: grab; border-radius: var(--radius-xs); border: 0; background: transparent; }
.drag-handle:hover { background: var(--bg-hover); color: var(--icon-primary); }
.drag-handle:active { cursor: grabbing; }
.sortable { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }
.sortable li { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-surface-1); font-size: var(--text-sm); }
.sortable li.is-dragging { opacity: .5; border-style: dashed; }
.sortable li.is-over { border-color: var(--border-brand); box-shadow: 0 -2px 0 var(--border-brand); }
.sortable .move { margin-inline-start: auto; display: inline-flex; gap: 2px; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: var(--space-sm); overflow-x: auto; padding-bottom: var(--space-xs); }
.kanban .col { background: var(--bg-surface-2); border-radius: var(--radius-md); padding: var(--space-xs); display: flex; flex-direction: column; gap: var(--space-xs); min-height: 200px; }
.kanban .col-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2xs) var(--space-xs); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); }
.kanban .col.is-over { outline: 2px dashed var(--border-brand); outline-offset: -2px; }
.kanban .kcard { background: var(--bg-surface-1); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm); cursor: grab; display: flex; flex-direction: column; gap: var(--space-2xs); }
.kanban .kcard:hover { border-color: var(--border-strong); }
.kanban .kcard.is-dragging { opacity: .5; }
.kanban .kcard .meta { display: flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--text-tertiary); }
.kanban .kcard .meta .avatar { margin-inline-start: auto; }
.sched { display: grid; grid-template-columns: 56px repeat(var(--cols, 3), minmax(140px, 1fr)); border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: auto; font-size: var(--text-xs); }
.sched .hdr { position: sticky; top: 0; background: var(--bg-surface-2); padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--border-default); font-weight: var(--weight-semibold); }
.sched .time { color: var(--text-tertiary); padding: var(--space-2xs); border-inline-end: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 10px; height: 48px; }
.sched .slot { border-bottom: 1px solid var(--border-subtle); border-inline-end: 1px solid var(--border-subtle); padding: 2px; height: 48px; }
.sched .slot .ev { height: 100%; border-radius: var(--radius-xs); padding: 2px 6px; background: var(--bg-brand-subtle); color: var(--text-brand); border-inline-start: 2px solid var(--border-brand); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sched .slot .ev.is-live { background: var(--bg-live); color: var(--text-on-live); border-color: transparent; }
.sched .slot .ev.is-neutral { background: var(--bg-surface-3); color: var(--text-secondary); border-color: var(--border-strong); }
.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); align-items: center; }
.agenda .t { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.agenda .who { font-size: var(--text-xs); color: var(--text-tertiary); }
.agenda .day { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); padding: var(--space-sm) 0 var(--space-2xs); }
.gantt { display: grid; grid-template-columns: 160px 1fr; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; font-size: var(--text-xs); }
.gantt .label { padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--border-subtle); border-inline-end: 1px solid var(--border-default); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 32px; display: flex; align-items: center; }
.gantt .lane { position: relative; border-bottom: 1px solid var(--border-subtle); height: 32px; background-image: linear-gradient(to right, var(--border-subtle) 1px, transparent 1px); background-size: 12.5% 100%; }
.gantt .bar { position: absolute; top: 7px; height: 18px; border-radius: var(--radius-xs); background: var(--bg-accent); color: var(--text-on-accent); padding-inline: 6px; line-height: 18px; white-space: nowrap; overflow: hidden; }
.gantt .bar.is-brand { background: var(--bg-brand); color: var(--text-on-brand); } .gantt .bar.is-muted { background: var(--bg-surface-3); color: var(--text-secondary); }
.gantt .today { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--chart-reference); }
.gantt .hdr { grid-column: 1 / -1; display: grid; grid-template-columns: 160px repeat(8, 1fr); background: var(--bg-surface-2); border-bottom: 1px solid var(--border-default); }
.gantt .hdr span { padding: var(--space-2xs) var(--space-xs); color: var(--text-tertiary); border-inline-start: 1px solid var(--border-subtle); }
.editor-toolbar { display: flex; align-items: center; gap: 2px; padding: var(--space-3xs); border: 1px solid var(--border-default); border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--bg-surface-2); flex-wrap: wrap; }
.editor-toolbar .sep { width: 1px; height: 20px; background: var(--border-default); margin-inline: var(--space-3xs); }
.editor-toolbar .btn { --btn-h: 28px; }
.editor-body { border: 1px solid var(--border-default); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); padding: var(--space-md); min-height: 120px; font-size: var(--text-md); line-height: var(--leading-relaxed); outline: none; }
.editor-body:focus { box-shadow: inset 0 0 0 2px var(--focus-ring); }
.md-editor { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; min-height: 160px; }
.md-editor textarea { border: 0; border-radius: 0; font-family: var(--font-mono); font-size: var(--text-xs); resize: none; padding: var(--space-sm); background: var(--bg-surface-2); min-height: 0; }
.md-editor .preview { padding: var(--space-sm); font-size: var(--text-sm); border-inline-start: 1px solid var(--border-default); overflow: auto; }
.md-editor .preview h3 { font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
@container (max-width: 560px) { .md-editor { grid-template-columns: 1fr; } .md-editor .preview { border-inline-start: 0; border-top: 1px solid var(--border-default); } }
.code-editor { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.code-editor .tabsbar { display: flex; background: var(--bg-surface-2); border-bottom: 1px solid var(--border-default); font-family: var(--font-mono); font-size: var(--text-2xs); }
.code-editor .tabsbar span { padding: var(--space-2xs) var(--space-sm); border-inline-end: 1px solid var(--border-subtle); color: var(--text-secondary); }
.code-editor .tabsbar span.is-active { background: var(--syntax-bg); color: var(--syntax-text); }
.code-editor .code-block { border-radius: 0; }
.code-editor .statusbar { display: flex; gap: var(--space-md); padding: 2px var(--space-sm); background: var(--bg-surface-2); border-top: 1px solid var(--border-default); font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.picker { width: 280px; }
.picker .picker-search { padding: var(--space-2xs); border-bottom: 1px solid var(--border-subtle); }
.picker .picker-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: var(--space-2xs); }
.picker .picker-grid button { aspect-ratio: 1; border: 0; background: transparent; border-radius: var(--radius-sm); font-size: 18px; }
.picker .picker-grid button:hover { background: var(--bg-hover); }
.mention-list li .handle { color: var(--text-tertiary); font-size: var(--text-xs); margin-inline-start: auto; }
.shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-lg); font-size: var(--text-sm); }
.shortcuts h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); margin-bottom: var(--space-xs); }
.shortcuts dl { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2xs) var(--space-md); }
.shortcuts dd { display: inline-flex; gap: 2px; }
@container (max-width: 520px) { .shortcuts { grid-template-columns: 1fr; } }
.version-list { list-style: none; margin: 0; padding: 0; }
.version-list li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-sm); align-items: center; padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.version-list li.is-current { background: var(--bg-selected); margin-inline: calc(var(--space-sm) * -1); padding-inline: var(--space-sm); border-radius: var(--radius-sm); }
.version-list small { display: block; color: var(--text-tertiary); font-size: var(--text-xs); }
.presence { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--text-secondary); }
.cursor-demo { position: relative; height: 96px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface-2); overflow: hidden; }
.cursor-demo .cur { position: absolute; display: flex; align-items: flex-start; gap: 2px; }
.cursor-demo .cur .icon { width: 14px; height: 14px; fill: var(--c); stroke: var(--p-n-0); stroke-width: 1; }
.cursor-demo .cur span { background: var(--c); color: var(--p-n-0); font-size: 10px; padding: 1px 5px; border-radius: 3px; margin-top: 10px; white-space: nowrap; }
.conflict { border: 1px solid var(--border-warning); border-radius: var(--radius-md); overflow: hidden; }
.conflict .head { padding: var(--space-xs) var(--space-md); background: var(--bg-warning-subtle); color: var(--text-warning); font-size: var(--text-sm); font-weight: var(--weight-medium); display: flex; align-items: center; gap: var(--space-xs); }
.conflict .versions { display: grid; grid-template-columns: 1fr 1fr; }
.conflict .versions > div { padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); }
.conflict .versions > div + div { border-inline-start: 1px solid var(--border-subtle); }
.conflict .versions h5 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-tertiary); margin-bottom: var(--space-2xs); }
@container (max-width: 520px) { .conflict .versions { grid-template-columns: 1fr; } .conflict .versions > div + div { border-inline-start: 0; border-top: 1px solid var(--border-subtle); } }
.import-wizard .map-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-sm); align-items: center; font-size: var(--text-sm); padding: var(--space-2xs) 0; }
.import-wizard .map-row .arrow { color: var(--text-tertiary); }
.upload-manager { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; }
.upload-manager .head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xs) var(--space-md); background: var(--bg-surface-2); border-bottom: 1px solid var(--border-default); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.upload-manager .upload-row { padding: var(--space-xs) var(--space-md); border-bottom: 1px solid var(--border-subtle); }
.upload-manager .upload-row:last-child { border-bottom: 0; }

/* =====================================================================
   AUTH · ACCOUNT · SECURITY
   ===================================================================== */
.auth-card { max-width: 400px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-md); }
.auth-card .brand { display: flex; align-items: center; gap: var(--space-xs); font-weight: var(--weight-semibold); }
.auth-card h2 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); }
.auth-card .sub { font-size: var(--text-sm); color: var(--text-secondary); margin-top: -8px; }
.auth-card .foot { font-size: var(--text-sm); color: var(--text-secondary); text-align: center; }
.sso-list { display: flex; flex-direction: column; gap: var(--space-xs); }
.sso-list .btn { justify-content: flex-start; gap: var(--space-sm); }
.sso-list .btn .logo { width: 18px; height: 18px; border-radius: 3px; background: var(--bg-surface-3); display: inline-grid; place-items: center; font-size: 10px; font-weight: var(--weight-bold); }
.passkey { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); text-align: center; padding: var(--space-lg); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.passkey .icon-box { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-brand-subtle); color: var(--text-brand); display: grid; place-items: center; }
.session-row, .device-row, .apikey-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-sm); align-items: center; padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.session-row .icon-box, .device-row .icon-box { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--bg-surface-3); display: grid; place-items: center; color: var(--icon-primary); }
.session-row small, .device-row small, .apikey-row small { display: block; color: var(--text-tertiary); font-size: var(--text-xs); }
.apikey-row code { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--bg-surface-3); padding: 1px 6px; border-radius: var(--radius-xs); }
.recovery-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xs) var(--space-md); font-family: var(--font-mono); font-size: var(--text-sm); padding: var(--space-md); background: var(--bg-surface-2); border-radius: var(--radius-md); }
.recovery-codes li { list-style: none; }
.recovery-codes li.is-used { color: var(--text-disabled); text-decoration: line-through; }
.perm-matrix { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.perm-matrix th, .perm-matrix td { padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--border-subtle); text-align: center; }
.perm-matrix th:first-child, .perm-matrix td:first-child { text-align: start; }
.perm-matrix thead th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); }
.perm-matrix .chk { justify-content: center; min-height: 0; }
.role-option { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-default); border-radius: var(--radius-md); cursor: pointer; }
.role-option:has(input:checked) { border-color: var(--border-brand); background: var(--bg-brand-subtle); }
.role-option b { display: block; font-size: var(--text-sm); }
.role-option small { color: var(--text-secondary); font-size: var(--text-xs); }
.account-switcher .menu-item .avatar { --sz: 24px; }
.account-switcher .menu-item small { display: block; color: var(--text-tertiary); font-size: var(--text-2xs); }
.user-menu-head { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs); padding: var(--space-xs); font-size: var(--text-sm); }
.user-menu-head small { display: block; color: var(--text-tertiary); font-size: var(--text-xs); }

/* =====================================================================
   COMMERCE · BILLING · PLANS
   ===================================================================== */
.price { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
.price .cur { font-size: .7em; vertical-align: top; margin-inline-end: 1px; font-weight: var(--weight-medium); }
.price .per { font-size: var(--text-xs); color: var(--text-secondary); font-weight: var(--weight-regular); }
.price .was { color: var(--text-tertiary); text-decoration: line-through; font-weight: var(--weight-regular); margin-inline-start: var(--space-2xs); }
.price-lg { font-size: var(--text-4xl); letter-spacing: var(--tracking-tight); }
.product-card { display: flex; flex-direction: column; gap: var(--space-xs); }
.product-card .thumb { aspect-ratio: 4 / 3; }
.product-card .name { font-weight: var(--weight-medium); font-size: var(--text-sm); }
.product-card .meta { font-size: var(--text-xs); color: var(--text-secondary); }
.product-row { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--space-sm); align-items: center; padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.product-row .thumb { aspect-ratio: 1; }
.product-row small { display: block; color: var(--text-tertiary); font-size: var(--text-xs); }
.cart-item { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-sm); align-items: start; padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.cart-item .thumb { aspect-ratio: 1; }
.cart-item .qty { margin-top: var(--space-2xs); --control-h-md: 28px; }
.summary-lines { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.summary-lines .line { display: flex; justify-content: space-between; }
.summary-lines .line span:last-child { font-variant-numeric: tabular-nums; }
.summary-lines .line.total { border-top: 1px solid var(--border-default); padding-top: var(--space-xs); margin-top: var(--space-2xs); font-weight: var(--weight-semibold); font-size: var(--text-md); }
.summary-lines .line.muted { color: var(--text-secondary); }
.payment-card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-sm); align-items: center; padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: var(--text-sm); }
.payment-card .brand-mark { width: 40px; height: 26px; border-radius: 4px; background: var(--bg-inverse); color: var(--text-inverse); display: grid; place-items: center; font-size: 9px; font-weight: var(--weight-bold); letter-spacing: .05em; }
.payment-card small { display: block; color: var(--text-tertiary); font-size: var(--text-xs); }
.payment-card.is-default { border-color: var(--border-brand); }
.pricing-card { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-lg); border: 1px solid var(--border-default); border-radius: var(--radius-lg); height: 100%; }
.pricing-card .plan { font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); }
.pricing-card .desc { font-size: var(--text-sm); color: var(--text-secondary); }
.pricing-card ul { list-style: none; padding: 0; margin: var(--space-xs) 0; display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.pricing-card ul li { display: flex; gap: var(--space-xs); align-items: flex-start; }
.pricing-card ul li .icon { color: var(--text-success); margin-top: 2px; }
.pricing-card .btn { margin-top: auto; }
.pricing-card.is-featured { border-color: var(--bg-accent); box-shadow: 0 0 0 1px var(--bg-accent); position: relative; }
.pricing-card.is-featured .plan { color: var(--text-brand); }
.pricing-card .ribbon { position: absolute; top: -10px; inset-inline-start: var(--space-lg); }
.pricing-compare { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.pricing-compare th, .pricing-compare td { padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--border-subtle); text-align: center; }
.pricing-compare th:first-child, .pricing-compare td:first-child { text-align: start; }
.pricing-compare thead th { font-weight: var(--weight-semibold); border-bottom-color: var(--border-default); }
.pricing-compare .yes { color: var(--text-success); } .pricing-compare .no { color: var(--text-disabled); }
.plan-selector { display: grid; gap: var(--space-xs); }
.plan-selector .role-option b { display: flex; justify-content: space-between; }
.usage-meter { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.usage-meter .row { display: flex; justify-content: space-between; }
.usage-meter .row span { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.invoice-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: var(--space-md); align-items: center; padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.invoice-row small { display: block; color: var(--text-tertiary); font-size: var(--text-xs); }
.invoice-row .amt { font-variant-numeric: tabular-nums; font-weight: var(--weight-medium); }
@container (max-width: 520px) { .invoice-row { grid-template-columns: 1fr auto; } }
.sub-status { display: grid; grid-template-columns: 1fr auto; gap: var(--space-xs); align-items: center; padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: var(--text-sm); }
.sub-status small { display: block; color: var(--text-secondary); font-size: var(--text-xs); }
.address-form .form-row-3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-md); }
@container (max-width: 520px) { .address-form .form-row-3 { grid-template-columns: 1fr; } }
.checkout-step { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-sm); align-items: center; padding: var(--space-sm) 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.checkout-step .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); border: 1px solid var(--border-strong); }
.checkout-step.is-done .n { background: var(--bg-accent); color: var(--text-on-accent); border-color: transparent; }
.checkout-step.is-active .n { border-color: var(--bg-accent); border-width: 2px; }
.checkout-step small { display: block; color: var(--text-secondary); font-size: var(--text-xs); }

/* =====================================================================
   COMMUNICATION · AI
   ===================================================================== */
.conv-list { list-style: none; margin: 0; padding: 0; }
.conv-list li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); align-items: center; }
.conv-list li:hover { background: var(--bg-hover); }
.conv-list li.is-active { background: var(--bg-selected); }
.conv-list li b { display: block; font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-list li small { display: block; color: var(--text-tertiary); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-list li .when { font-size: var(--text-2xs); color: var(--text-tertiary); }
.conv-head { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-md); border-bottom: 1px solid var(--border-default); font-size: var(--text-sm); }
.conv-head b { font-weight: var(--weight-semibold); }
.conv-head .actions { margin-inline-start: auto; display: flex; gap: var(--space-3xs); }
.chat { display: flex; flex-direction: column; gap: var(--space-md); }
.msg { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--space-xs); max-width: 720px; font-size: var(--text-md); line-height: var(--leading-relaxed); }
.msg .who { font-size: var(--text-xs); font-weight: var(--weight-semibold); margin-bottom: 2px; display: flex; align-items: center; gap: var(--space-2xs); }
.msg .who time { color: var(--text-tertiary); font-weight: var(--weight-regular); }
.msg .bubble { color: var(--text-primary); }
.msg .bubble p + p { margin-top: var(--space-xs); }
.msg-user { grid-template-columns: minmax(0,1fr); justify-items: end; margin-inline-start: auto; }
.msg-user .bubble { background: var(--bg-surface-3); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-lg); border-end-end-radius: var(--radius-xs); max-width: 520px; }
.msg-system { grid-template-columns: 1fr; text-align: center; font-size: var(--text-xs); color: var(--text-tertiary); max-width: none; }
.msg-actions { display: flex; gap: 2px; margin-top: var(--space-2xs); opacity: 0; transition: opacity var(--dur-1); }
.msg:hover .msg-actions, .msg:focus-within .msg-actions { opacity: 1; }
.msg-actions .btn { --btn-h: 26px; --btn-px: var(--space-2xs); }
.msg-status { font-size: var(--text-2xs); color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 3px; }
.msg-status.is-failed { color: var(--text-danger); }
.typing { display: inline-flex; gap: 3px; align-items: center; height: 20px; padding-inline: var(--space-xs); }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-tertiary); animation: typing 1.2s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } }
.composer { border: 1px solid var(--field-border); border-radius: var(--radius-lg); background: var(--field-bg); display: grid; }
.composer:focus-within { border-color: var(--field-border-focus); box-shadow: var(--shadow-focus); }
.composer textarea { border: 0; background: transparent; resize: none; min-height: 44px; padding: var(--space-sm) var(--space-md); font-size: var(--text-md); box-shadow: none !important; }
.composer .bar { display: flex; align-items: center; gap: 2px; padding: var(--space-2xs) var(--space-xs) var(--space-xs); }
.composer .bar .send { margin-inline-start: auto; }
.composer .attachments { display: flex; gap: var(--space-2xs); padding: var(--space-xs) var(--space-sm) 0; flex-wrap: wrap; }
.composer .ctx { font-size: var(--text-2xs); color: var(--text-tertiary); padding: 0 var(--space-sm); display: flex; gap: var(--space-xs); align-items: center; }
.composer.is-voice textarea { display: none; }
.composer .voice { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
.model-select { display: inline-flex; align-items: center; gap: var(--space-2xs); height: 28px; padding-inline: var(--space-xs); border-radius: var(--radius-sm); border: 1px solid var(--border-default); background: var(--bg-surface-1); font-size: var(--text-xs); font-weight: var(--weight-medium); }
.tool-call { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-xs); align-items: center; padding: var(--space-2xs) var(--space-sm); border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: var(--text-xs); background: var(--bg-surface-2); font-family: var(--font-mono); }
.tool-call.is-running .icon { color: var(--text-brand); animation: spin 1s linear infinite; }
.tool-call.is-done .icon { color: var(--text-success); } .tool-call.is-error .icon { color: var(--text-danger); }
.tool-call .dur { color: var(--text-tertiary); }
.artifact-card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-sm); align-items: center; padding: var(--space-sm) var(--space-md); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: var(--text-sm); background: var(--bg-surface-1); cursor: pointer; max-width: 420px; }
.artifact-card:hover { border-color: var(--border-strong); }
.artifact-card .icon-box { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--bg-brand-subtle); color: var(--text-brand); display: grid; place-items: center; }
.artifact-card small { display: block; color: var(--text-tertiary); font-size: var(--text-xs); }
.cite { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding-inline: 4px; margin-inline-start: 2px; border-radius: var(--radius-xs); background: var(--bg-surface-3); color: var(--text-secondary); font-size: 10px; font-weight: var(--weight-semibold); text-decoration: none; vertical-align: 2px; }
.cite:hover { background: var(--bg-brand-subtle); color: var(--text-brand); }
.sources { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.source-chip { display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 3px var(--space-xs) 3px 4px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); font-size: var(--text-xs); text-decoration: none; color: var(--text-primary); max-width: 240px; }
.source-chip .n { width: 16px; height: 16px; border-radius: 3px; background: var(--bg-surface-3); display: grid; place-items: center; font-size: 9px; font-weight: var(--weight-semibold); flex: 0 0 auto; }
.source-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source-chip .timecode { flex: 0 0 auto; }
.streaming::after { content: ""; display: inline-block; width: 8px; height: 14px; background: var(--text-primary); margin-inline-start: 2px; vertical-align: -2px; animation: pulse .9s steps(2) infinite; }
.feedback-row { display: inline-flex; gap: 2px; align-items: center; font-size: var(--text-xs); color: var(--text-tertiary); }
.usage-chip { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-2xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.usage-chip .meter { width: 60px; height: 4px; }
.context-chip { display: inline-flex; align-items: center; gap: var(--space-3xs); padding: 2px var(--space-xs); border-radius: var(--radius-sm); background: var(--bg-surface-3); font-size: var(--text-2xs); color: var(--text-secondary); }
.approval { border: 1px solid var(--border-warning); border-radius: var(--radius-md); overflow: hidden; max-width: 520px; }
.approval .head { padding: var(--space-xs) var(--space-md); background: var(--bg-warning-subtle); color: var(--text-warning); font-size: var(--text-sm); font-weight: var(--weight-medium); display: flex; align-items: center; gap: var(--space-xs); }
.approval .body { padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); }
.approval .foot { display: flex; gap: var(--space-xs); justify-content: flex-end; padding: var(--space-xs) var(--space-md) var(--space-sm); }
.handoff { display: grid; grid-template-columns: auto 1fr; gap: var(--space-sm); align-items: center; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-md); background: var(--bg-info-subtle); color: var(--text-info); font-size: var(--text-sm); }
.safety { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); background: var(--bg-danger-subtle); color: var(--text-danger); font-size: var(--text-xs); }

/* =====================================================================
   CHARTS
   ===================================================================== */
.chart { width: 100%; font-family: var(--font-ui); }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart text { font-size: 11px; fill: var(--chart-axis); font-variant-numeric: tabular-nums; }
.chart .grid line { stroke: var(--chart-grid); stroke-width: 1; }
.chart .axis line, .chart .axis path { stroke: var(--chart-grid); }
.chart .ref line { stroke: var(--chart-reference); stroke-dasharray: 4 3; }
.chart .ref text { fill: var(--chart-reference); font-weight: 600; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { stroke: var(--bg-canvas); stroke-width: 2; }
.chart .bar { transition: opacity var(--dur-1); }
.chart .bar:hover { opacity: .8; }
.chart .area { opacity: .16; }
.chart-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-3xs); }
.chart-sub { font-size: var(--text-xs); color: var(--text-secondary); margin-bottom: var(--space-sm); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-xs); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.legend button { border: 0; background: transparent; padding: 0; display: inline-flex; align-items: center; gap: 6px; color: inherit; font: inherit; cursor: pointer; }
.legend button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.chart-tip { position: absolute; pointer-events: none; padding: var(--space-2xs) var(--space-xs); background: var(--tooltip-bg); color: var(--tooltip-text); font-size: var(--text-xs); border-radius: var(--radius-sm); white-space: nowrap; transform: translate(-50%, calc(-100% - 8px)); z-index: var(--z-tooltip); opacity: 0; transition: opacity var(--dur-1); }
.chart-tip.is-open { opacity: 1; }
.chart-tip b { font-variant-numeric: tabular-nums; }
.chart-wrap { position: relative; }
.chart-empty { display: grid; place-items: center; height: 160px; border: 1px dashed var(--border-default); border-radius: var(--radius-md); color: var(--text-tertiary); font-size: var(--text-sm); }
.chart-table { font-size: var(--text-xs); }
.chart-table caption { text-align: start; color: var(--text-secondary); padding-bottom: var(--space-2xs); }
.heatmap { display: grid; grid-template-columns: auto repeat(var(--cols, 7), 1fr); gap: 3px; font-size: 10px; color: var(--text-tertiary); }
.heatmap .cell { aspect-ratio: 1; border-radius: 2px; background: var(--chart-seq-1); }
.heatmap .cell[data-l="2"] { background: var(--chart-seq-2); } .heatmap .cell[data-l="3"] { background: var(--chart-seq-3); } .heatmap .cell[data-l="4"] { background: var(--chart-seq-4); } .heatmap .cell[data-l="5"] { background: var(--chart-seq-5); } .heatmap .cell[data-l="6"] { background: var(--chart-seq-6); }
.heatmap .lbl { display: flex; align-items: center; justify-content: end; padding-inline-end: 4px; }
.heatmap .lbl-top { text-align: center; }
.funnel { display: grid; gap: var(--space-2xs); }
.funnel .step { display: grid; grid-template-columns: 120px 1fr 60px; gap: var(--space-xs); align-items: center; font-size: var(--text-xs); }
.funnel .step .bar { height: 26px; background: var(--chart-1); border-radius: var(--radius-xs); }
.funnel .step .val { text-align: end; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.funnel .step .lbl { color: var(--text-secondary); }
.gauge { width: 160px; }
.gauge text { fill: var(--text-primary); }

/* =====================================================================
   PRODUCT-SPECIFIC: theCUBE
   ===================================================================== */
.episode-card { display: flex; flex-direction: column; gap: var(--space-xs); text-decoration: none; color: inherit; }
.episode-card .title { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.episode-card .meta { font-size: var(--text-xs); color: var(--text-secondary); display: flex; gap: var(--space-2xs); flex-wrap: wrap; align-items: center; }
.episode-card .guests { font-size: var(--text-xs); color: var(--text-secondary); }
.episode-card:hover .title { color: var(--text-link); }
.episode-row { display: grid; grid-template-columns: 120px 1fr auto; gap: var(--space-sm); align-items: center; padding: var(--space-xs) 0; border-bottom: 1px solid var(--border-subtle); text-decoration: none; color: inherit; }
.episode-row .title { font-size: var(--text-sm); font-weight: var(--weight-medium); }
.episode-row .meta { font-size: var(--text-xs); color: var(--text-secondary); }
@container (max-width: 480px) { .episode-row { grid-template-columns: 88px 1fr; } .episode-row .end { display: none; } }
.event-card { border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; display: grid; grid-template-columns: 96px 1fr; text-decoration: none; color: inherit; }
.event-card .date { background: var(--bg-inverse); color: var(--text-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-sm); text-align: center; }
.event-card .date b { font-size: var(--text-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.event-card .date span { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); opacity: .8; }
.event-card .body { padding: var(--space-sm) var(--space-md); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.event-card .body .name { font-weight: var(--weight-semibold); font-size: var(--text-md); }
.event-card .body .where { font-size: var(--text-xs); color: var(--text-secondary); }
.event-card .body .foot { margin-top: auto; display: flex; align-items: center; gap: var(--space-xs); padding-top: var(--space-xs); font-size: var(--text-xs); }
.event-card.is-live .date { background: var(--bg-live); color: var(--text-on-live); }
.person-card { display: flex; gap: var(--space-sm); align-items: center; text-decoration: none; color: inherit; }
.person-card .name { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.person-card .role { font-size: var(--text-xs); color: var(--text-secondary); }
.person-card.is-stacked { flex-direction: column; text-align: center; }
.sponsor-line { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-2xs); color: var(--text-tertiary); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.sponsor-line .logo { height: 16px; padding-inline: 6px; border: 1px solid var(--border-default); border-radius: 3px; font-size: 9px; font-weight: var(--weight-bold); display: inline-grid; place-items: center; color: var(--text-secondary); letter-spacing: 0; text-transform: none; }
.program-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--space-xs) 0 4px; border-radius: var(--radius-sm); background: var(--bg-surface-2); border: 1px solid var(--border-default); font-size: var(--text-xs); font-weight: var(--weight-medium); text-decoration: none; color: inherit; }
.program-pill .sq { width: 16px; height: 16px; border-radius: 3px; background: var(--bg-accent); }
.chapters { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.chapters li { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-xs); padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-sm); cursor: pointer; }
.chapters li:hover { background: var(--bg-hover); }
.chapters li.is-active { background: var(--bg-selected); }
.chapters li .timecode { color: var(--text-brand); }
.transcript { font-size: var(--text-sm); line-height: var(--leading-relaxed); display: grid; gap: var(--space-xs); }
.transcript p { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-xs); }
.transcript p .timecode { padding-top: 2px; }
.transcript p b { font-weight: var(--weight-semibold); }
.transcript p.is-active { background: var(--bg-selected); margin-inline: calc(var(--space-xs) * -1); padding: var(--space-3xs) var(--space-xs); border-radius: var(--radius-sm); }
.live-now { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-sm); align-items: center; padding: var(--space-xs) var(--space-md); background: var(--bg-inverse); color: var(--text-inverse); border-radius: var(--radius-md); font-size: var(--text-sm); }
.live-now .name { font-weight: var(--weight-semibold); }
.live-now .where { font-size: var(--text-xs); opacity: .75; }
.live-now .btn { --btn-h: 30px; }