/* Design Tokens */

:root {

  color-scheme:light;

  --background-hsl:34 28% 97%;

  --foreground-hsl:222 30% 14%;

  --card-hsl:0 0% 100%;

  --card-foreground-hsl:0 0% 9%;

  --secondary-hsl:34 22% 94%;

  --secondary-foreground-hsl:0 0% 9%;

  --muted-surface-hsl:34 16% 90%;

  --muted-foreground-hsl:220 10% 42%;

  --primary-hsl:220 72% 46%;

  --primary-foreground-hsl:0 0% 100%;

  --destructive-hsl:0 72% 56%;

  --destructive-foreground-hsl:0 0% 98%;

  --success-hsl:150 48% 34%;

  --border-hsl:34 10% 86%;

  --ring-hsl:220 72% 46%;

  --radius:16px;

  --btn-compact-size:36px;

  --btn-compact-size-lg:32px;

  --btn-compact-radius:14px;

  --bg:hsl(var(--background-hsl));

  --panel:hsl(var(--card-hsl));

  --fg:hsl(var(--foreground-hsl));

  --muted:hsl(var(--muted-foreground-hsl));

  --border:hsl(var(--border-hsl));

  --accent:hsl(var(--primary-hsl));

  --bad:hsl(var(--destructive-hsl));

  --ok:hsl(var(--success-hsl));

  --radius-sm:14px;

  --radius-md:var(--radius);

  --radius-lg:20px;

  --space-1:4px;

  --space-2:6px;

  --space-3:10px;

  --space-4:12px;

  --space-5:18px;

  --space-6:24px;

  --space-7:48px;

  --space-8:96px;

  --shadow-rgb:15 23 42;

  --shadow-sm:0 8px 20px rgba(15,23,42,.08);

  --shadow-lg:0 24px 56px rgba(15,23,42,.12);

  --font-overpass:"Overpass","IBM Plex Sans",sans-serif;

  --font-ui:"Inter",var(--font-overpass);

  --font-sans:var(--font-overpass);

  --font-mono:var(--font-sans);

  --font-ocr:"OCR-B",ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  --mrz-font-scale:.9;

  --mrz-gutter-width:22px;

  --mrz-gutter-width-md:19px;

  --mrz-gutter-width-sm:17px;

  --mrz-editor-max-ch:56;

  --layout-max:1340px;

  --shell-rail-collapsed:84px;

  --shell-rail-expanded:230px;

  --guide-width:320px;

  --guide-gap:12px;

  --app-width:980px;

  --shell-main-max:1280px;

  --nav-hover-bg:hsl(var(--secondary-hsl));

  --preview-bg:color-mix(in srgb,var(--panel) 95%,hsl(var(--secondary-hsl)));

  --action-bg:color-mix(in srgb,var(--panel) 92%,transparent);

  --menu-bg:color-mix(in srgb,var(--panel) 96%,transparent);

  --modal-border:color-mix(in srgb,var(--border) 75%,transparent);

  --modal-header-bg:color-mix(in srgb,var(--bg) 94%,transparent);

  --modal-close-hover-bg:hsl(var(--secondary-hsl));

  --btn-border:color-mix(in srgb,var(--border) 82%,transparent);

  --btn-bg:color-mix(in srgb,var(--panel) 92%,transparent);

  --btn-fg:var(--fg);

  --btn-hover-border:color-mix(in srgb,var(--border) 74%,transparent);

  --btn-hover-bg:hsl(var(--secondary-hsl));

  --btn-hover-fg:var(--fg);

  --btn-active-ring:hsl(var(--ring-hsl)/.2);

  --focus-ring:hsl(var(--ring-hsl)/.35);

  --focus-ring-strong:hsl(var(--ring-hsl)/.45);

  --ui-overlay:hsl(var(--foreground-hsl)/.24);

  --ui-overlay-strong:hsl(var(--foreground-hsl)/.56);

  --ui-soft-line:hsl(var(--border-hsl)/.62);

  --ui-info-bg:hsl(var(--ring-hsl)/.1);

  --ui-info-line:hsl(var(--ring-hsl)/.26);

  --ui-ok-bg:hsl(var(--success-hsl)/.12);

  --ui-ok-line:hsl(var(--success-hsl)/.24);

  --ui-bad-bg:hsl(var(--destructive-hsl)/.12);

  --ui-bad-line:hsl(var(--destructive-hsl)/.24);

  --status-ok-fg:var(--btn-primary-fg);

  --status-ok-bg:color-mix(in srgb,var(--btn-primary-bg) 88%,hsl(var(--secondary-hsl)));

  --status-ok-line:var(--btn-primary-border);

  --status-bad-fg:var(--bad);

  --status-bad-bg:var(--ui-bad-bg);

  --status-bad-line:var(--ui-bad-line);

  --progress-track:color-mix(in srgb,var(--accent) 18%,var(--panel));

  --progress-fill-start:var(--btn-primary-bg);

  --progress-fill-end:color-mix(in srgb,var(--btn-primary-bg) 70%,white);

  --selection-line:hsl(0 0% 100% / .95);

  --selection-fill:hsl(0 0% 100% / .08);

  --selection-scrim:hsl(var(--foreground-hsl)/.48);

  --selection-soft:hsl(0 0% 100% / .04);

  --selection-pill-bg:hsl(var(--foreground-hsl)/.78);

  --selection-pill-fg:hsl(var(--primary-foreground-hsl));

  --selection-pill-line:hsl(0 0% 100% / .42);

  --selection-overlay-shadow:0 0 0 9999px rgba(8, 9, 12, 0.52), inset 0 0 0 1px rgba(255, 255, 255, 0.28);

  --selection-overlay-soft-filter:brightness(1.18) saturate(1.5) contrast(1.18);

  --selection-detected-fill:rgba(255, 255, 255, 0.06);

  --selection-detected-soft:rgba(255, 255, 255, 0.025);

  --selection-detected-soft-filter:brightness(1.22) saturate(1.72) contrast(1.24);

  --selection-badge-offset:10px;

  --selection-badge-border:rgba(255, 255, 255, 0.8);

  --selection-badge-bg:rgba(255, 255, 255, 0.84);

  --selection-badge-fg:#111111;

  --selection-badge-shadow:0 6px 14px rgba(0, 0, 0, 0.14);

  --upload-cta-width:260px;

  --upload-cta-height:50px;

  --upload-cta-padding-x:21px;

  --upload-cta-gap:10px;

  --upload-cta-font-size:0.85rem;

  --upload-cta-icon-size:21px;

  --btn-primary-bg:hsl(var(--primary-hsl));

  --btn-primary-border:hsl(var(--primary-hsl));

  --btn-primary-fg:hsl(0 0% 100%);

  --btn-primary-hover-bg:color-mix(in srgb,hsl(var(--primary-hsl)) 84%,var(--btn-bg));

  --btn-primary-hover-border:color-mix(in srgb,hsl(var(--primary-hsl)) 84%,var(--btn-border));

  --btn-primary-hover-fg:hsl(0 0% 100%);

  --canvas-bg-top:#f6f1ea;

  --canvas-bg-mid:#f4f0ea;

  --canvas-bg-bottom:#f4efe7;

  --canvas-glow-primary:rgba(33,79,202,.12);

  --canvas-glow-secondary:rgba(125,139,156,.12);

  --app-canvas-bg:
    radial-gradient(circle at top left,var(--canvas-glow-primary),transparent 30%),
    radial-gradient(circle at 100% 4%,var(--canvas-glow-secondary),transparent 22%),
    linear-gradient(180deg,var(--canvas-bg-top) 0%,var(--canvas-bg-mid) 42%,var(--canvas-bg-bottom) 100%);

  --field-bg:color-mix(in srgb,var(--panel) 96%,transparent);

  --table-border:color-mix(in srgb,var(--border) 66%,transparent);

  --detail-row-bg:color-mix(in srgb,hsl(var(--secondary-hsl)) 100%,var(--panel));

  --detail-row-bg-open:hsl(var(--primary-hsl)/.08);

  --detail-border:color-mix(in srgb,var(--border) 72%,transparent);

  --bulk-caret:hsl(var(--muted-foreground-hsl));

  --icon-filter:none;

  --icon-filter-hover:invert(1) brightness(1.25);

  --mrz-legend-stroke:rgba(15,23,42,.28)

}



:root[data-theme="dark"] {

  color-scheme:dark;

  --background-hsl:224 24% 9%;

  --foreground-hsl:34 24% 95%;

  --card-hsl:224 20% 11%;

  --card-foreground-hsl:0 0% 95%;

  --secondary-hsl:224 16% 15%;

  --secondary-foreground-hsl:0 0% 95%;

  --muted-surface-hsl:224 14% 18%;

  --muted-foreground-hsl:220 8% 66%;

  --primary-hsl:218 80% 62%;

  --primary-foreground-hsl:0 0% 100%;

  --destructive-hsl:0 72% 60%;

  --destructive-foreground-hsl:0 0% 98%;

  --success-hsl:150 42% 50%;

  --border-hsl:224 14% 20%;

  --ring-hsl:218 80% 62%;

  --bg:hsl(var(--background-hsl));

  --panel:hsl(var(--card-hsl));

  --fg:hsl(var(--foreground-hsl));

  --muted:hsl(var(--muted-foreground-hsl));

  --border:hsl(var(--border-hsl));

  --accent:hsl(var(--primary-hsl));

  --bad:hsl(var(--destructive-hsl));

  --ok:hsl(var(--success-hsl));

  --shadow-rgb:0 0 0;

  --shadow-sm:0 8px 24px rgba(0,0,0,.34);

  --shadow-lg:0 26px 80px rgba(0,0,0,.5);

  --nav-hover-bg:hsl(var(--secondary-hsl));

  --preview-bg:color-mix(in srgb,var(--panel) 94%,transparent);

  --action-bg:color-mix(in srgb,var(--panel) 86%,transparent);

  --menu-bg:color-mix(in srgb,var(--panel) 92%,transparent);

  --modal-border:color-mix(in srgb,var(--border) 72%,transparent);

  --modal-header-bg:color-mix(in srgb,hsl(var(--secondary-hsl)) 74%,transparent);

  --modal-close-hover-bg:hsl(var(--secondary-hsl));

  --btn-border:color-mix(in srgb,var(--border) 76%,transparent);

  --btn-bg:color-mix(in srgb,var(--panel) 88%,transparent);

  --btn-fg:var(--fg);

  --btn-hover-border:color-mix(in srgb,var(--border) 64%,transparent);

  --btn-hover-bg:hsl(var(--secondary-hsl));

  --btn-hover-fg:hsl(var(--foreground-hsl));

  --btn-active-ring:hsl(var(--ring-hsl)/.24);

  --focus-ring:hsl(var(--ring-hsl)/.35);

  --focus-ring-strong:hsl(var(--ring-hsl)/.45);

  --ui-overlay:hsl(var(--foreground-hsl)/.32);

  --ui-overlay-strong:hsl(var(--foreground-hsl)/.72);

  --ui-soft-line:hsl(var(--border-hsl)/.66);

  --ui-info-bg:hsl(var(--ring-hsl)/.16);

  --ui-info-line:hsl(var(--ring-hsl)/.34);

  --ui-ok-bg:hsl(var(--success-hsl)/.18);

  --ui-ok-line:hsl(var(--success-hsl)/.3);

  --ui-bad-bg:hsl(var(--destructive-hsl)/.2);

  --ui-bad-line:hsl(var(--destructive-hsl)/.32);

  --status-ok-fg:var(--btn-primary-fg);

  --status-ok-bg:color-mix(in srgb,var(--btn-primary-bg) 88%,hsl(var(--secondary-hsl)));

  --status-ok-line:var(--btn-primary-border);

  --status-bad-fg:var(--bad);

  --status-bad-bg:var(--ui-bad-bg);

  --status-bad-line:var(--ui-bad-line);

  --progress-track:color-mix(in srgb,var(--accent) 24%,hsl(var(--secondary-hsl)));

  --progress-fill-start:hsl(var(--primary-hsl));

  --progress-fill-end:color-mix(in srgb,hsl(var(--primary-hsl)) 78%,white);

  --selection-line:hsl(0 0% 100% / .98);

  --selection-fill:hsl(0 0% 100% / .1);

  --selection-scrim:hsl(var(--foreground-hsl)/.58);

  --selection-soft:hsl(0 0% 100% / .05);

  --selection-pill-bg:hsl(var(--foreground-hsl)/.86);

  --selection-pill-fg:hsl(var(--primary-foreground-hsl));

  --selection-pill-line:hsl(0 0% 100% / .5);

  --selection-overlay-shadow:0 0 0 9999px rgba(8, 9, 12, 0.52), inset 0 0 0 1px rgba(255, 255, 255, 0.28);

  --selection-overlay-soft-filter:brightness(1.18) saturate(1.5) contrast(1.18);

  --selection-detected-fill:rgba(255, 255, 255, 0.06);

  --selection-detected-soft:rgba(255, 255, 255, 0.025);

  --selection-detected-soft-filter:brightness(1.22) saturate(1.72) contrast(1.24);

  --selection-badge-offset:10px;

  --selection-badge-border:rgba(255, 255, 255, 0.84);

  --selection-badge-bg:rgba(255, 255, 255, 0.88);

  --selection-badge-fg:#111111;

  --selection-badge-shadow:0 6px 14px rgba(0, 0, 0, 0.14);

  --upload-cta-width:260px;

  --upload-cta-height:50px;

  --upload-cta-padding-x:21px;

  --upload-cta-gap:10px;

  --upload-cta-font-size:0.85rem;

  --upload-cta-icon-size:21px;

  --btn-primary-bg:hsl(var(--primary-hsl));

  --btn-primary-border:hsl(var(--primary-hsl));

  --btn-primary-fg:hsl(0 0% 100%);

  --btn-primary-hover-bg:color-mix(in srgb,hsl(var(--primary-hsl)) 84%,var(--btn-bg));

  --btn-primary-hover-border:color-mix(in srgb,hsl(var(--primary-hsl)) 84%,var(--btn-border));

  --btn-primary-hover-fg:hsl(0 0% 100%);

  --canvas-bg-top:#0c1120;

  --canvas-bg-mid:#101625;

  --canvas-bg-bottom:#141b2c;

  --canvas-glow-primary:rgba(33,79,202,.16);

  --canvas-glow-secondary:rgba(125,139,156,.12);

  --app-canvas-bg:
    radial-gradient(circle at top left,var(--canvas-glow-primary),transparent 30%),
    radial-gradient(circle at 100% 4%,var(--canvas-glow-secondary),transparent 22%),
    linear-gradient(180deg,var(--canvas-bg-top) 0%,var(--canvas-bg-mid) 42%,var(--canvas-bg-bottom) 100%);

  --field-bg:hsl(var(--secondary-hsl)/.45);

  --table-border:color-mix(in srgb,var(--border) 60%,transparent);

  --detail-row-bg:hsl(var(--secondary-hsl)/.58);

  --detail-row-bg-open:hsl(var(--primary-hsl)/.12);

  --detail-border:color-mix(in srgb,var(--border) 72%,transparent);

  --bulk-caret:hsl(var(--muted-foreground-hsl));

  --icon-filter:invert(1) brightness(1.15);

  --icon-filter-hover:invert(1) brightness(1.35);

  --font-sans:var(--font-overpass);

  --font-mono:var(--font-sans);

  --mrz-legend-stroke:rgba(226,232,240,.28)

}