/* Fonts are loaded by the page (<link rel="preconnect"> + <link>), not imported here, so the request is not chained behind this stylesheet. */
:root {
  --background: #1a222c;
  --foreground: #eef3f8;
  --card: #222c38;
  --card-foreground: #eef3f8;
  --popover: #263140;
  --popover-foreground: #eef3f8;
  --primary: #5378A6;
  --primary-foreground: #f5f8fc;
  --secondary: #2a3544;
  --secondary-foreground: #c5d0dc;
  --muted: #243040;
  --muted-foreground: #9aabbd;
  --accent: #2f3f52;
  --accent-foreground: #eef3f8;
  --destructive: #c45c5c;
  --destructive-foreground: #fff5f5;
  --border: rgba(238, 243, 248, 0.16);
  --input: #1c2632;
  --ring: rgba(83, 120, 166, 0.55);
  --radius: 12px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.35);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.40);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 18px 48px rgba(0,0,0,.50);
  --shadow-xl: 0 28px 70px rgba(0,0,0,.55);
  --shadow-well: inset 0 1px 1px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.04);
  --shadow-well-deep: inset 0 1px 2px rgba(0,0,0,.55);
  /* Fill darkened so the #f5f8fc label clears 4.5:1 on the whole gradient (was 3.2 at the top stop). */
  --accent-fill: linear-gradient(180deg, #4b6e9d 0%, #3f5d86 100%);
  --accent-fill-hover: linear-gradient(180deg, #5378A6 0%, #456590 100%);
  --link: #8fb0d8;
  --shadow-accent: 0 0 0 0.5px rgba(130,170,210,.55), inset 0 1px 0 rgba(255,255,255,.18), 0 1px 3px rgba(0,0,0,.45), 0 0 16px rgba(83,120,166,.28);
  --shadow-accent-hover: 0 0 0 0.5px rgba(150,185,220,.7), inset 0 1px 0 rgba(255,255,255,.22), 0 2px 6px rgba(0,0,0,.5), 0 0 22px rgba(83,120,166,.38);
  --shadow-s: var(--shadow-sm);
  --shadow-m: var(--shadow-md);
  --shadow-l: var(--shadow-lg);
  --shadow-inset: var(--shadow-well);
  --shadow-inset-deep: var(--shadow-well-deep);
  --shadow-button: var(--shadow-accent);
  --shadow-button-hover: var(--shadow-accent-hover);
  --shadow-primary: var(--shadow-accent);
  --shadow-pill: var(--shadow-accent);
  --shadow-pill-hover: var(--shadow-accent-hover);
  --pill-gradient: var(--accent-fill);
  --pill-gradient-hover: var(--accent-fill-hover);
  --text-shadow-pressed: 0 1px 0 rgba(0,0,0,.35);
  --font-sans: "Figtree", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

.ds{color:var(--foreground,oklch(0.2 0 0));background:var(--background,oklch(1 0 0))}
.ds :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small):not(.ds-supporting):not(.ds-card-desc):not(.ds-muted):not(.kicker):not(.eyebrow):not(.fine):not(.wait-status){color:inherit!important}

*,*::before,*::after{box-sizing:border-box}
:where(.ds){font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif);color:var(--foreground,oklch(0.2 0 0));background:var(--background,oklch(1 0 0));line-height:1.5}
.ds :where(h1,h2,h3,h4,h5,h6,p,strong,label,legend,li,dt,dd,small){color:inherit}
.ds h1,.ds h2,.ds h3,.ds h4{font-family:inherit;font-weight:600;margin:0 0 .5em;color:var(--foreground,oklch(0.2 0 0))}
.ds .ds-display{font-family:inherit;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700;line-height:1.05;letter-spacing:-.03em;margin:0;color:var(--foreground,oklch(0.2 0 0))}
.ds .ds-section-title{font-family:inherit;font-size:1.25rem;font-weight:600;line-height:1.2;letter-spacing:-.01em;margin:0;color:var(--foreground,oklch(0.2 0 0))}
.ds .ds-supporting{font-size:.875rem;font-weight:400;line-height:1.5;color:var(--muted-foreground,oklch(0.55 0 0));margin:0}
.ds a{color:var(--link,var(--primary,oklch(0.45 0.15 264)));text-decoration:none}
/* A link styled as a button keeps the button's own label colour. The .ds a rule
   above is specificity (0,1,1) and beat .ds-btn-primary at (0,1,0), so every
   anchor call to action painted its label in the fill colour. [BD-449] */
.ds a.ds-btn{color:inherit}
.ds a.ds-btn:hover{text-decoration:none}
.ds p{margin:0 0 1em}
.ds-muted{color:var(--muted-foreground,oklch(0.55 0 0))}

/* Button */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;font-size:.875rem;font-weight:500;line-height:1;padding:.6rem 1rem;border-radius:var(--radius-md,calc(var(--radius,0.5rem) - 2px));border:1px solid transparent;cursor:pointer;touch-action:manipulation;transition:opacity .15s,background .15s;text-decoration:none}
.ds-btn:focus-visible{outline:2px solid var(--ring,var(--primary,oklch(0.45 0.15 264)));outline-offset:2px}
.ds-btn:disabled{background:var(--muted,oklch(0.94 0 0));color:var(--foreground,oklch(0.2 0 0));border-color:var(--border,oklch(0.85 0 0));opacity:1;cursor:not-allowed}
.ds-btn-primary{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0));box-shadow:var(--shadow-sm,var(--shadow-xs,none))}
.ds-btn-secondary{background:var(--secondary,oklch(0.96 0 0));color:var(--secondary-foreground,oklch(0.25 0 0));box-shadow:var(--shadow-xs,none)}
.ds-btn-outline{background:transparent;color:var(--foreground,oklch(0.2 0 0));border-color:var(--border,oklch(0.85 0 0))}
.ds-btn-ghost{background:transparent;color:var(--foreground,oklch(0.2 0 0))}
.ds .ds-btn[aria-pressed="true"],.ds .ds-btn[aria-pressed="true"]:hover{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0));border-color:var(--primary,oklch(0.45 0.15 264));opacity:1}
.ds-btn-sm{padding:.4rem .7rem;font-size:.8125rem}
.ds-btn-lg{padding:.75rem 1.4rem;font-size:1rem}

/* Form fields */
.ds-label{display:block;font-size:.8125rem;font-weight:500;margin-bottom:.4rem;color:var(--foreground,oklch(0.2 0 0))}
.ds-input,.ds-textarea,.ds-select{width:100%;font:inherit;font-size:.875rem;padding:.55rem .75rem;border-radius:var(--radius-lg,var(--radius,0.5rem));border:1px solid var(--border,oklch(0.85 0 0));background:var(--input,var(--background,oklch(1 0 0)));color:var(--foreground,oklch(0.2 0 0));box-shadow:var(--shadow-inset,var(--shadow-2xs,none));transition:border-color .15s,box-shadow .15s}
.ds-input::placeholder,.ds-textarea::placeholder{color:var(--muted-foreground,oklch(0.6 0 0))}
.ds-input:focus,.ds-textarea:focus,.ds-select:focus{outline:none;border-color:var(--ring,var(--primary,oklch(0.45 0.15 264)));box-shadow:var(--shadow-inset,0 0 0 0 transparent),0 0 0 2px color-mix(in oklab,var(--ring,var(--primary,oklch(0.45 0.15 264))) 35%,transparent)}
.ds-textarea{min-height:5rem;resize:vertical}

/* Card */
.ds-card{display:flex;flex-direction:column;background:var(--card,var(--background,oklch(1 0 0)));color:var(--card-foreground,var(--foreground,oklch(0.2 0 0)));border:1px solid var(--border,oklch(0.9 0 0));border-radius:var(--radius-xl,calc(var(--radius,0.5rem) + 4px));box-shadow:var(--shadow-glass,var(--shadow-md,var(--shadow-sm,none)));overflow:hidden}
.ds-card-header{padding:1.1rem 1.25rem .5rem}
.ds-card-body{padding:.5rem 1.25rem 1.1rem}
.ds-card-footer{margin-top:auto;padding:.9rem 1.25rem;border-top:1px solid var(--border,oklch(0.92 0 0));display:flex;gap:.5rem;align-items:center}
.ds-card-title{font-size:1.05rem;margin:0 0 .25rem}
.ds-card-desc{font-size:.875rem;color:var(--muted-foreground,oklch(0.55 0 0));margin:0}

/* Badge */
.ds-badge{display:inline-flex;align-items:center;font-size:.6875rem;font-weight:600;padding:.15rem .55rem;border-radius:999px;background:var(--secondary,oklch(0.96 0 0));color:var(--secondary-foreground,oklch(0.25 0 0));line-height:1.4}
.ds-badge-primary{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0))}
.ds-badge-outline{background:transparent;border:1px solid var(--border,oklch(0.85 0 0));color:var(--foreground,oklch(0.2 0 0))}
.ds-badge-safe{background:var(--pop-green,oklch(0.92 0.06 150));color:var(--pop-green-foreground,oklch(0.42 0.11 152))}
.ds-badge-warn{background:var(--pop-orange,oklch(0.93 0.05 40));color:var(--pop-orange-foreground,oklch(0.52 0.18 35))}
.ds-badge-danger{background:var(--destructive,oklch(0.58 0.22 32));color:var(--destructive-foreground,oklch(0.99 0 0))}
.ds-badge-unknown{background:var(--pop-yellow,oklch(0.95 0.06 92));color:var(--pop-yellow-foreground,oklch(0.5 0.1 75))}
.ds-badge-verified{background:var(--pop-blue,oklch(0.92 0.045 245));color:var(--pop-blue-foreground,oklch(0.48 0.14 252))}

/* Alert */
.ds-alert{border:1px solid var(--border,oklch(0.9 0 0));border-radius:var(--radius-lg,var(--radius,0.5rem));padding:.9rem 1rem;background:var(--card,var(--background,oklch(1 0 0)));color:var(--card-foreground,var(--foreground,oklch(0.2 0 0)));font-size:.875rem}
.ds-alert-title{font-weight:600;margin:0 0 .2rem}

/* Avatar + misc */
.ds-avatar{width:2.25rem;height:2.25rem;border-radius:999px;background:var(--muted,oklch(0.95 0 0));color:var(--muted-foreground,oklch(0.45 0 0));display:inline-flex;align-items:center;justify-content:center;font-size:.8125rem;font-weight:600}
.ds-divider{height:1px;background:var(--border,oklch(0.9 0 0));border:0;margin:1rem 0}
.ds-row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.ds-field{margin-bottom:1rem}
.ds-control-row{display:grid;grid-template-columns:minmax(8rem,14rem) auto;gap:.75rem;align-items:end;justify-content:start}
.ds-control-row>.ds-field{margin:0}
.ds-control-row>.ds-btn,.ds-control-row .ds-input,.ds-control-row .ds-select{min-height:2.75rem}
.ds-container{max-width:42rem;margin:0 auto;padding:1.5rem}

/* Switch */
.ds-switch{display:inline-flex;align-items:center;gap:.6rem;font-size:.875rem;cursor:pointer}
.ds-switch-track{width:2.25rem;height:1.25rem;border-radius:999px;background:var(--muted,oklch(0.9 0 0));position:relative;transition:background .15s;flex:none}
.ds-switch-track.on{background:var(--primary,oklch(0.45 0.15 264))}
.ds-switch-thumb{position:absolute;top:2px;left:2px;width:calc(1.25rem - 4px);height:calc(1.25rem - 4px);border-radius:999px;background:var(--background,oklch(1 0 0));box-shadow:var(--shadow-sm,0 1px 2px oklch(0 0 0 / 0.2));transition:transform .15s}
.ds-switch-track.on .ds-switch-thumb{transform:translateX(1rem)}

/* Tabs */
.ds-tabs{display:inline-flex;gap:.15rem;padding:.25rem;border-radius:var(--radius-lg,var(--radius,0.5rem));background:var(--muted,oklch(0.96 0 0))}
.ds-tab{font:inherit;font-size:.8125rem;font-weight:500;padding:.4rem .8rem;border:0;border-radius:var(--radius-md,calc(var(--radius,0.5rem) - 2px));background:transparent;color:var(--muted-foreground,oklch(0.5 0 0));cursor:pointer;touch-action:manipulation}
.ds-tab.active{background:var(--background,oklch(1 0 0));color:var(--foreground,oklch(0.2 0 0));box-shadow:var(--shadow-sm,var(--shadow-xs,none))}

/* Progress */
.ds-progress{height:.5rem;border-radius:999px;background:var(--muted,oklch(0.92 0 0));overflow:hidden}
.ds-progress-bar{height:100%;border-radius:999px;background:var(--primary,oklch(0.45 0.15 264))}

/* Table */
.ds-table{width:100%;border-collapse:collapse;font-size:.8125rem}
.ds-table th,.ds-table td{text-align:left;padding:.5rem .75rem;border-bottom:1px solid var(--border,oklch(0.92 0 0))}
.ds-table th{font-weight:600;color:var(--muted-foreground,oklch(0.5 0 0));font-size:.6875rem;text-transform:uppercase;letter-spacing:.04em}

/* Chip / keyboard key */
.ds-chip{display:inline-flex;align-items:center;gap:.35rem;font:inherit;font-size:.8125rem;padding:.3rem .7rem;border-radius:999px;border:1px solid var(--border,oklch(0.88 0 0));background:var(--background,oklch(1 0 0));color:var(--foreground,oklch(0.2 0 0));cursor:pointer;touch-action:manipulation;transition:background-color .12s ease,border-color .12s ease,color .12s ease}
.ds-chip:focus-visible{outline:2px solid var(--ring,var(--primary,oklch(0.45 0.15 264)));outline-offset:2px}
.ds .ds-chip[aria-pressed="true"],.ds .ds-chip[aria-pressed="true"]:hover{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0));border-color:var(--primary,oklch(0.45 0.15 264))}
.ds-kbd{font-family:var(--font-mono,ui-monospace,monospace);font-size:.75rem;padding:.1rem .4rem;border-radius:var(--radius-sm,4px);border:1px solid var(--border,oklch(0.85 0 0));background:var(--muted,oklch(0.97 0 0));color:var(--foreground,oklch(0.2 0 0))}

/* Touch canvases need finger-sized hit areas and inputs that do not trigger mobile zoom. */
@media (pointer:coarse){
.ds-btn,.ds-tab,.ds-chip{min-height:44px}
.ds-input,.ds-select{min-height:44px;font-size:1rem}
}
@media (max-width:40rem){
.ds-control-row{grid-template-columns:1fr}
.ds-control-row>.ds-btn{width:100%}
}

/* Hover is a neutral fine-pointer cue, never a second selection color. */
@media (hover:hover) and (pointer:fine){
.ds a:hover{text-decoration:underline}
.ds-btn:hover:not(:disabled):not([aria-pressed="true"]){opacity:.9}
.ds-btn-ghost:hover:not(:disabled):not([aria-pressed="true"]){background:var(--accent,oklch(0.96 0 0));opacity:1}
.ds-input:hover:not(:disabled),.ds-textarea:hover:not(:disabled),.ds-select:hover:not(:disabled){border-color:color-mix(in oklab,var(--foreground,oklch(0.2 0 0)) 20%,transparent)}
.ds .ds-chip:hover:not([aria-pressed="true"]){background:color-mix(in oklab,var(--foreground,oklch(0.2 0 0)) 4%,var(--background,oklch(1 0 0)));color:var(--foreground,oklch(0.2 0 0));border-color:color-mix(in oklab,var(--foreground,oklch(0.2 0 0)) 28%,var(--border,oklch(0.88 0 0)))}
}

/* Selection adopts the accent, matching the real systems */
.ds ::selection{background:var(--primary,oklch(0.45 0.15 264));color:var(--primary-foreground,oklch(1 0 0))}

.bd-btn, .bd-view, .ds-btn { border-radius: var(--radius-md, calc(var(--radius, 0.5rem) - 2px)); }
.bd-card, .ds-card { border-radius: var(--radius-lg, var(--radius, 0.5rem)); }
.bd-btn-primary, .bd-view, .ds-btn-primary { box-shadow: var(--shadow-accent); }
.bd-btn-primary, .bd-view, .ds-btn-primary { background: var(--accent-fill); }
.ds-card { box-shadow: var(--shadow-md); }
.ds-switch-track.on { background: var(--accent-fill); }
.ds-switch-track.on { box-shadow: var(--shadow-accent); }
.ds-badge, .ds-badge-primary { border-radius: 9999px; }
.ds-input, .ds-textarea, .ds-select { border-radius: var(--radius-md, calc(var(--radius, 0.5rem) - 2px)); }
.ds-input, .ds-textarea, .ds-select { box-shadow: var(--shadow-well); }
*,::before,::after,::backdrop{--tw-ring-color:currentcolor;--tw-ring-shadow:0 0 0 transparent;--tw-ring-offset-shadow:0 0 0 transparent;--tw-ring-offset-width:0px;--tw-ring-offset-color:oklch(1 0 0);--tw-ring-inset:;--tw-shadow:0 0 0 transparent;--tw-inset-shadow:0 0 0 transparent;--tw-inset-ring-shadow:0 0 0 transparent;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:;--tw-rotate-y:;--tw-rotate-z:;--tw-skew-x:;--tw-skew-y:;--tw-gradient-from:transparent;--tw-gradient-to:transparent;--tw-gradient-stops:;--tw-blur:;--tw-brightness:;--tw-contrast:;--tw-saturate:;--tw-content:''}
.ds-badge { display:inline-flex; align-items:center; gap:0.25rem; border-radius:calc(infinity * 1px); padding-left:0.625rem;padding-right:0.625rem; padding-top:0.125rem;padding-bottom:0.125rem; font-size:11px; font-weight:500; letter-spacing:0.02em; --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-inset:inset; transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms; animation-duration:0.15s;--tw-animation-duration:0.15s; background-color:var(--secondary); color:var(--foreground); --tw-ring-color:var(--border) }
.ds-btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; white-space:nowrap; font-size:0.875rem;line-height:1.25rem; font-weight:500; line-height:1; letter-spacing:-0.005em; border-radius:var(--radius-md, calc(var(--radius) - 2px)); cursor:pointer; user-select:none; transition-property:background,box-shadow,transform,color,border-color;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms; animation-duration:0.15s;--tw-animation-duration:0.15s }
.ds-btn:focus-visible { outline:2px solid transparent;outline-offset:2px; --tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); --tw-ring-color:var(--ring); --tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-offset-color:var(--background) }
.ds-btn:disabled { pointer-events:none; opacity:0.5 }
.ds-btn:active { --tw-translate-y:1px;translate:var(--tw-translate-x) var(--tw-translate-y) }
.ds .ds-btn-primary { background:var(--accent-fill); color:var(--primary-foreground); box-shadow:var(--shadow-accent) }
.ds .ds-btn-primary:hover { background:var(--accent-fill-hover); box-shadow:var(--shadow-accent-hover) }
.ds .ds-btn-primary:active { box-shadow:var(--shadow-sm) }
.ds .ds-btn-secondary { background-color:var(--secondary); color:var(--secondary-foreground); border-width:1px; border-color:var(--border); box-shadow:var(--shadow-xs) }
.ds .ds-btn-secondary:hover { background-color:var(--accent); color:var(--foreground); box-shadow:var(--shadow-sm) }
.ds .ds-btn-outline { background-color:transparent; color:var(--foreground); border-width:1px; border-color:var(--border) }
.ds .ds-btn-outline:hover { background-color:var(--accent); border-color:color-mix(in oklab, var(--border) 80%, transparent) }
.ds .ds-btn-ghost { background-color:transparent; color:var(--muted-foreground) }
.ds .ds-btn-ghost:hover { background-color:var(--accent); color:var(--foreground) }
.ds-input, .ds-textarea, .ds-select { width:100%; border-radius:var(--radius-md, calc(var(--radius) - 2px)); padding-left:0.75rem;padding-right:0.75rem; font-size:0.875rem;line-height:1.25rem; background-color:var(--input); color:var(--foreground); border-width:1px; border-color:var(--border); transition-property:color,box-shadow,border-color;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms; animation-duration:0.15s;--tw-animation-duration:0.15s; box-shadow:var(--shadow-well) }
.ds-input::placeholder, .ds-textarea::placeholder, .ds-select::placeholder { color:var(--muted-foreground) }
.ds-input:hover, .ds-textarea:hover, .ds-select:hover { border-color:color-mix(in oklab, var(--border) 80%, transparent) }
.ds-input:focus-visible, .ds-textarea:focus-visible, .ds-select:focus-visible { outline:2px solid transparent;outline-offset:2px; border-color:transparent; box-shadow:var(--shadow-well),0 0 0 2px var(--ring) }
.ds-input:disabled, .ds-textarea:disabled, .ds-select:disabled { cursor:not-allowed; opacity:0.5 }
.ds-card { border-radius:var(--radius-lg, var(--radius)); background-color:var(--card); color:var(--card-foreground) }

.ds .ds-display{font-family:var(--font-display);letter-spacing:-.04em}
