@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=DM+Mono:wght@400;500&display=swap');
/* =====================================================================
   VarCentral shared design system  (/varcentral-ds.css)
   Linked by the marketing site AND the in-browser app editions.
   All names are prefixed vc- / --vc- so they never collide with page CSS.
   No global resets: nothing here styles bare elements except .vc-root.

   TOKENS (:root)
   Color:   --vc-bg --vc-bg-2 (page bg, nocturnal emerald) | --vc-panel / --vc-panel-2 (glass surface)
            --vc-panel-brd (hairline border) | --vc-fg (text) --vc-muted --vc-faint (secondary text; both AA 4.5:1 on every surface, light+dark)
            --vc-badge-bg / --vc-badge-fg (solid label pair, AA)
            --vc-accent (mint #36e2a0) --vc-accent-2 (emerald #12603f) --vc-gold (#e9c37a)
            --vc-emerald / --vc-mint (aliases of accent-2 / accent) | --vc-pos --vc-neg --vc-warn (status)
            --vc-on-accent (text on mint) | --vc-accent-soft --vc-accent-glow --vc-gold-soft (tints)
            --vc-grad-primary (button gradient) --vc-grad-brand (logo-mark gradient)
   Space:   --vc-space-1..6 (4,8,12,16,24,40px) --vc-space-7 --vc-space-8 (64,96px)
            --vc-gap (card stack/grid gap = space-4) --vc-card-pad (card inset = space-4)
   Radius:  --vc-radius (18) --vc-radius-sm (11) --vc-radius-md (14) --vc-radius-lg (28) --vc-radius-pill
   Border:  --vc-border (1px solid panel-brd) --vc-border-accent (1px solid mint-tint)
   Shadow:  --vc-shadow-sm --vc-shadow-md --vc-shadow-lg --vc-shadow-glow --vc-shadow-gold
   Fonts:   --vc-font-sans (Manrope) --vc-font-serif (Instrument Serif) --vc-font-mono (DM Mono)
   Sizes:   --vc-fs-xs .72 --vc-fs-sm .88 --vc-fs-base 1rem --vc-fs-md 1.12 --vc-fs-lg 1.4
            --vc-fs-xl 2 --vc-fs-2xl 3.2 --vc-fs-3xl 5 (rem; xl+ are clamp()ed)
   Motion:  --vc-ease --vc-dur-fast (.25s) --vc-dur (.3s) --vc-dur-slow (.4s)
            --vc-transition (common multi-property button/card transition)
   Layout:  --vc-maxw (1180px) --vc-focus (focus ring color)

   COMPONENTS
   .vc-root        opt-in base: bg, fg, sans font, color-scheme dark (put on <body> or app root)
   .vc-btn         pill button base (lifts on hover; 44px min touch target)
     .vc-btn-primary  mint gradient CTA     .vc-btn-ghost / .vc-btn-secondary  glass outline button
     .vc-btn-danger   destructive (red)     .vc-btn-sm  compact   .vc-btn-block  full width
   .vc-header      sticky glass site header (.vc-header .vc-wrap = flex row, 68px)
   .vc-brand       logo chip: <a class="vc-brand"><span class="vc-mark"><img></span><span class="vc-word">Var<span class="vc-c">Central</span></span></a>
   .vc-nav / .vc-nav-links / .vc-nav-auth   header navigation
   .vc-footer      site footer (.vc-footer-grid cols w/ h4 + links, .vc-footer-bottom)
   .vc-skip-link   accessible skip-to-content link
   FORM ELEMENTS: inside .vc-root (or .vc-forms) bare <button>, <input>, <select>,
     <textarea>, <label>, checkbox/radio pick up the DS automatically; the
     .vc-* classes work anywhere. .vc-check  = label wrapper for checkbox/radio.
     Also aliases .btn/.btn-primary/.btn-secondary/.btn-ghost/.btn-danger/.btn-sm/.btn-block
     inside .vc-root so the editions can keep their existing class names.
   .vc-card        glass panel; hover lift + border glow (.vc-card-flat disables lift)
   .vc-field       label + control wrapper (grid)   .vc-label  field label (mono)
   .vc-input       text input / select / textarea (also .vc-select, .vc-textarea)
   .vc-table       data table (wrap in .vc-table-wrap for scroll + rounded border)
     .vc-num       right-aligned mono numerals     .vc-pos/.vc-neg  green/red amounts
   .vc-badge       pill label (.vc-badge-gold, .vc-badge-pos, .vc-badge-neg, .vc-badge-muted)
   .vc-h1 .vc-h2 .vc-h3   serif display headings (h3 sans bold)
   .vc-eyebrow     mint mono uppercase kicker      .vc-mono  DM Mono text
   .vc-lead .vc-muted .vc-faint   text helpers     .vc-serif  display serif text
   .vc-wrap        centered max-width container    .vc-divider  hairline rule
   .vc-msg (+ .vc-msg-err/.vc-msg-ok)  inline form message
   ===================================================================== */

:root{
  /* color — VarCentral brand: navy #0a1e32 + teal #058c99 (from the logo) */
  --vc-bg:#06121c; --vc-bg-2:#0a1e32;
  --vc-panel:rgba(255,255,255,.04); --vc-panel-2:rgba(255,255,255,.07);
  --vc-panel-brd:rgba(255,255,255,.10);
  --vc-fg:#eaf2f7; --vc-muted:#a9bccb; --vc-faint:#9aafbf;
  --vc-accent:#22c3d6; --vc-accent-2:#058c99; --vc-gold:#5fd3e0;
  --vc-mint:var(--vc-accent); --vc-emerald:var(--vc-accent-2);
  --vc-pos:#3ecf8e; --vc-neg:#ff8a8a; --vc-warn:#e9c37a;
  --vc-on-accent:#04161f; --vc-badge-bg:#067a87; --vc-badge-fg:#ffffff;
  --vc-accent-soft:rgba(34,195,214,.14); --vc-accent-glow:rgba(34,195,214,.35);
  --vc-gold-soft:rgba(95,211,224,.45);
  --vc-grad-primary:linear-gradient(180deg,#3ad6e6,#0a8fa0);
  --vc-grad-brand:linear-gradient(145deg,#22c3d6,#0a1e32);
  /* space */
  --vc-space-1:4px; --vc-space-2:8px; --vc-space-3:12px; --vc-space-4:16px;
  --vc-space-5:24px; --vc-space-6:40px; --vc-space-7:64px; --vc-space-8:96px;
  /* Layout rhythm: one gap between stacked/grid cards, one card inset (apps + site) */
  --vc-gap:var(--vc-space-4); --vc-card-pad:var(--vc-space-4);
  /* radius */
  --vc-radius:18px; --vc-radius-sm:11px; --vc-radius-md:14px; --vc-radius-lg:28px; --vc-radius-pill:999px;
  /* border */
  --vc-border:1px solid var(--vc-panel-brd);
  --vc-border-accent:1px solid rgba(34,195,214,.35);
  /* shadow */
  --vc-shadow-sm:0 10px 30px -10px rgba(34,195,214,.55);
  --vc-shadow-md:0 16px 40px -12px rgba(34,195,214,.7);
  --vc-shadow-lg:0 50px 100px -30px rgba(0,0,0,.8);
  --vc-shadow-glow:0 0 0 1px rgba(34,195,214,.2),0 0 48px rgba(34,195,214,.25);
  --vc-shadow-gold:0 30px 70px -40px rgba(95,211,224,.4);
  /* fonts */
  --vc-font-sans:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --vc-font-serif:"Instrument Serif",Georgia,serif;
  --vc-font-mono:"DM Mono",ui-monospace,Menlo,monospace;
  /* sizes */
  --vc-fs-xs:.72rem; --vc-fs-sm:.88rem; --vc-fs-base:1rem; --vc-fs-md:1.12rem; --vc-fs-lg:1.4rem;
  --vc-fs-xl:clamp(1.6rem,3vw,2rem); --vc-fs-2xl:clamp(2rem,4.4vw,3.2rem); --vc-fs-3xl:clamp(2.6rem,6.4vw,5rem);
  /* motion */
  --vc-ease:cubic-bezier(.22,.61,.36,1);
  --vc-dur-fast:.25s; --vc-dur:.3s; --vc-dur-slow:.4s;
  --vc-transition:transform var(--vc-dur) var(--vc-ease),box-shadow var(--vc-dur) var(--vc-ease),background var(--vc-dur) var(--vc-ease),border-color var(--vc-dur) var(--vc-ease);
  /* layout */
  --vc-maxw:1180px; --vc-focus:#22c3d6;
}

/* ---- base (opt-in) ---- */
.vc-root{
  background:linear-gradient(180deg,var(--vc-bg),var(--vc-bg-2));color:var(--vc-fg);
  font-family:var(--vc-font-sans);line-height:1.6;color-scheme:dark;-webkit-font-smoothing:antialiased;
}
.vc-wrap{width:100%;max-width:var(--vc-maxw);margin-inline:auto;padding-inline:20px}
.vc-divider{border:0;border-top:var(--vc-border);margin:var(--vc-space-5) 0}
:where([class*="vc-"]):focus-visible{outline:2px solid var(--vc-focus);outline-offset:3px;border-radius:6px}

/* ---- typography ---- */
.vc-serif{font-family:var(--vc-font-serif);font-weight:400;letter-spacing:0}
.vc-h1,.vc-h2{font-family:var(--vc-font-serif);font-weight:400;letter-spacing:-.01em;line-height:1.05;margin:0;text-wrap:balance}
.vc-h1{font-size:var(--vc-fs-3xl);line-height:1.02}
.vc-h2{font-size:var(--vc-fs-2xl)}
.vc-h3{font-family:var(--vc-font-sans);font-weight:700;font-size:var(--vc-fs-md);letter-spacing:-.02em;line-height:1.2;margin:0}
.vc-eyebrow{font-family:var(--vc-font-mono);font-size:var(--vc-fs-xs);letter-spacing:.22em;text-transform:uppercase;color:var(--vc-accent);display:inline-block}
.vc-mono{font-family:var(--vc-font-mono)}
.vc-lead{color:var(--vc-muted);font-size:clamp(1.02rem,1.7vw,1.22rem)}
.vc-muted{color:var(--vc-muted)} .vc-faint{color:var(--vc-faint)}

/* ---- buttons ---- */
.vc-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--vc-font-sans);font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:none;
  padding:.82em 1.5em;border-radius:var(--vc-radius-pill);border:1px solid transparent;
  background:transparent;color:var(--vc-fg);
  transition:var(--vc-transition);will-change:transform}
.vc-btn:hover{transform:translateY(-2px)}
.vc-btn:disabled,.vc-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.vc-btn-primary{background:var(--vc-grad-primary);color:var(--vc-on-accent);box-shadow:var(--vc-shadow-sm)}
.vc-btn-primary:hover{box-shadow:var(--vc-shadow-md)}
.vc-btn-ghost{background:var(--vc-panel);border-color:var(--vc-panel-brd);color:var(--vc-fg);backdrop-filter:blur(8px)}
.vc-btn-ghost:hover{border-color:rgba(34,195,214,.5)}
.vc-btn-secondary{background:var(--vc-panel);border-color:var(--vc-panel-brd);color:var(--vc-fg);backdrop-filter:blur(8px)}
.vc-btn-secondary:hover{border-color:rgba(34,195,214,.5)}
.vc-btn-danger{background:rgba(255,138,138,.12);border-color:rgba(255,138,138,.35);color:var(--vc-neg)}
.vc-btn-danger:hover{background:rgba(255,138,138,.2);border-color:var(--vc-neg)}
.vc-btn-sm{padding:.6em 1.1em;font-size:.88rem}
.vc-btn-block{width:100%}
.vc-btn,:where(.vc-root) button,:where(.vc-forms) button,:where(.vc-root) .btn{min-height:44px;min-width:44px}

/* ---- header / brand / footer (shared chrome) ---- */
.vc-skip-link{position:absolute;left:-999px;top:0;background:var(--vc-accent);color:var(--vc-on-accent);padding:10px 16px;border-radius:0 0 10px 0;z-index:200}
.vc-skip-link:focus{left:0}
.vc-header{position:sticky;top:0;z-index:100;backdrop-filter:blur(14px);background:rgba(6,18,13,.55);
  border-bottom:1px solid transparent;transition:border-color var(--vc-dur-slow),background var(--vc-dur-slow)}
.vc-header.scrolled{border-bottom-color:var(--vc-panel-brd);background:rgba(6,18,13,.82)}
.vc-header>.vc-wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.vc-brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;letter-spacing:-.01em;color:var(--vc-fg);text-decoration:none}
.vc-brand .vc-mark{display:block;width:34px;height:34px;border-radius:9px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.vc-brand .vc-mark img{width:100%;height:100%;display:block;object-fit:cover}
.vc-brand .vc-word .vc-c{color:var(--vc-accent)}
.vc-nav{display:flex;align-items:center;gap:1.6rem}
.vc-nav-links{display:flex;gap:1.5rem}
.vc-nav-links a{color:var(--vc-muted);font-size:.92rem;font-weight:500;position:relative;text-decoration:none;transition:color var(--vc-dur-fast);display:inline-flex;align-items:center;min-height:44px}
.vc-nav-links a:hover{color:var(--vc-fg)}
.vc-nav-links a::after{content:"";position:absolute;left:0;bottom:6px;width:0;height:2px;background:var(--vc-accent);transition:width var(--vc-dur) var(--vc-ease)}
.vc-nav-links a:hover::after{width:100%}
.vc-nav-auth{display:flex;gap:.6rem;align-items:center}
@media(max-width:860px){.vc-nav-links{display:none}.vc-nav-auth .vc-btn-ghost{display:none}}
.vc-footer{border-top:var(--vc-border);padding-block:3rem 2rem;background:rgba(0,0,0,.25);color:var(--vc-fg)}
.vc-footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem}
@media(max-width:720px){.vc-footer-grid{grid-template-columns:1fr 1fr}}
.vc-footer-grid .vc-col h4{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--vc-faint);font-family:var(--vc-font-mono);margin:0 0 .9rem;font-weight:700}
.vc-footer-grid .vc-col a{display:block;color:var(--vc-muted);font-size:.9rem;margin-bottom:.5rem;text-decoration:none;transition:color var(--vc-dur-fast)}
.vc-footer-grid .vc-col a:hover{color:var(--vc-accent)}
.vc-footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem;padding-top:1.4rem;border-top:var(--vc-border);color:var(--vc-faint);font-size:.82rem}

/* ---- card ---- */
.vc-card{position:relative;padding:1.5rem;border-radius:var(--vc-radius);
  background:var(--vc-panel);border:var(--vc-border);overflow:hidden;color:var(--vc-fg);
  transition:transform var(--vc-dur-slow) var(--vc-ease),border-color var(--vc-dur-slow),background var(--vc-dur-slow)}
.vc-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(400px 200px at var(--mx,50%) var(--my,0%),var(--vc-accent-soft),transparent 60%);
  opacity:0;transition:opacity var(--vc-dur-slow)}
.vc-card:hover{transform:translateY(-4px);border-color:var(--vc-accent-glow)}
.vc-card:hover::before{opacity:1}
.vc-card-flat:hover{transform:none}

/* ---- forms ---- */
.vc-field{display:grid;gap:.35rem;margin-bottom:.9rem}
.vc-label,.vc-field>label{font-size:.78rem;color:var(--vc-muted);font-family:var(--vc-font-mono);letter-spacing:.04em}
.vc-input,.vc-select,.vc-textarea,.vc-field input,.vc-field select,.vc-field textarea{
  width:100%;padding:.8rem .9rem;border-radius:var(--vc-radius-sm);border:var(--vc-border);
  background:rgba(0,0,0,.3);color:var(--vc-fg);font-size:1rem;font-family:var(--vc-font-sans);
  transition:border-color var(--vc-dur-fast),box-shadow var(--vc-dur-fast)}
.vc-input::placeholder,.vc-textarea::placeholder{color:var(--vc-faint)}
.vc-input:focus,.vc-select:focus,.vc-textarea:focus,.vc-field input:focus,.vc-field select:focus,.vc-field textarea:focus{
  outline:none;border-color:var(--vc-accent);box-shadow:0 0 0 3px var(--vc-accent-soft)}
.vc-textarea{resize:vertical;min-height:90px}
.vc-input:disabled,.vc-select:disabled,.vc-textarea:disabled,.vc-field input:disabled,.vc-field select:disabled,.vc-field textarea:disabled{opacity:.5;cursor:not-allowed}
.vc-input[aria-invalid="true"],.vc-field input[aria-invalid="true"]{border-color:var(--vc-neg)}
.vc-input,.vc-select,.vc-field input:not([type=checkbox]):not([type=radio]),.vc-field select{min-height:44px}
.vc-select,.vc-field select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239fb3c2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center}
.vc-select option,.vc-field select option{background:var(--vc-bg-2);color:var(--vc-fg)}
.vc-check{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;cursor:pointer;font-family:var(--vc-font-sans);font-size:.95rem;color:var(--vc-fg);letter-spacing:0}
.vc-check input,:where(.vc-root) input[type=checkbox],:where(.vc-root) input[type=radio],:where(.vc-forms) input[type=checkbox],:where(.vc-forms) input[type=radio]{
  width:20px;height:20px;margin:0;accent-color:var(--vc-accent);cursor:pointer;flex:none}
.vc-check input:disabled{opacity:.5;cursor:not-allowed}
.vc-msg{min-height:20px;font-size:.85rem}
.vc-msg-err{color:var(--vc-neg)} .vc-msg-ok{color:var(--vc-accent)}

/* ---- bare form elements (opt-in via .vc-root or .vc-forms) + .btn aliases ---- */
:where(.vc-root) button,:where(.vc-forms) button,:where(.vc-root) .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--vc-font-sans);font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:none;
  padding:.82em 1.5em;border-radius:var(--vc-radius-pill);border:1px solid transparent;
  background:var(--vc-panel);color:var(--vc-fg);border-color:var(--vc-panel-brd);transition:var(--vc-transition)}
:where(.vc-root) button:hover,:where(.vc-forms) button:hover,:where(.vc-root) .btn:hover{transform:translateY(-2px)}
:where(.vc-root) button:disabled,:where(.vc-forms) button:disabled,:where(.vc-root) .btn:disabled,:where(.vc-root) .btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
:where(.vc-root) .btn-primary,:where(.vc-root) button.primary{background:var(--vc-grad-primary);color:var(--vc-on-accent);border-color:transparent;box-shadow:var(--vc-shadow-sm)}
:where(.vc-root) .btn-primary:hover,:where(.vc-root) button.primary:hover{box-shadow:var(--vc-shadow-md)}
:where(.vc-root) .btn-ghost,:where(.vc-root) .btn-secondary{background:var(--vc-panel);border-color:var(--vc-panel-brd);color:var(--vc-fg);backdrop-filter:blur(8px)}
:where(.vc-root) .btn-ghost:hover,:where(.vc-root) .btn-secondary:hover{border-color:rgba(34,195,214,.5)}
:where(.vc-root) .btn-danger,:where(.vc-root) button.danger{background:rgba(255,138,138,.12);border-color:rgba(255,138,138,.35);color:var(--vc-neg)}
:where(.vc-root) .btn-danger:hover,:where(.vc-root) button.danger:hover{background:rgba(255,138,138,.2);border-color:var(--vc-neg)}
:where(.vc-root) .btn-sm{padding:.6em 1.1em;font-size:.88rem}
:where(.vc-root) .btn-block{width:100%}
:where(.vc-root) label,:where(.vc-forms) label{font-size:.78rem;color:var(--vc-muted);font-family:var(--vc-font-mono);letter-spacing:.04em}
:where(.vc-root) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),:where(.vc-root) select,:where(.vc-root) textarea,
:where(.vc-forms) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),:where(.vc-forms) select,:where(.vc-forms) textarea{
  width:100%;min-height:44px;padding:.8rem .9rem;border-radius:var(--vc-radius-sm);border:var(--vc-border);
  background:rgba(0,0,0,.3);color:var(--vc-fg);font-size:1rem;font-family:var(--vc-font-sans);
  transition:border-color var(--vc-dur-fast),box-shadow var(--vc-dur-fast)}
:where(.vc-root) input::placeholder,:where(.vc-root) textarea::placeholder,:where(.vc-forms) input::placeholder,:where(.vc-forms) textarea::placeholder{color:var(--vc-faint)}
:where(.vc-root) input:focus,:where(.vc-root) select:focus,:where(.vc-root) textarea:focus,:where(.vc-forms) input:focus,:where(.vc-forms) select:focus,:where(.vc-forms) textarea:focus{
  outline:none;border-color:var(--vc-accent);box-shadow:0 0 0 3px var(--vc-accent-soft)}
:where(.vc-root) input:disabled,:where(.vc-root) select:disabled,:where(.vc-root) textarea:disabled,:where(.vc-forms) input:disabled,:where(.vc-forms) select:disabled,:where(.vc-forms) textarea:disabled{opacity:.5;cursor:not-allowed}
:where(.vc-root) textarea,:where(.vc-forms) textarea{resize:vertical;min-height:90px}
:where(.vc-root) select,:where(.vc-forms) select{appearance:none;-webkit-appearance:none;padding-right:2.4rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239fb3c2' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center}
:where(.vc-root) select option,:where(.vc-forms) select option{background:var(--vc-bg-2);color:var(--vc-fg)}
:where(.vc-root) :focus-visible,:where(.vc-forms) :focus-visible{outline:2px solid var(--vc-focus);outline-offset:3px;border-radius:6px}
:where(.vc-root) a{color:inherit}

/* ---- table ---- */
.vc-table-wrap{overflow-x:auto;border:var(--vc-border);border-radius:var(--vc-radius)}
.vc-table{width:100%;border-collapse:collapse;font-size:.92rem;color:var(--vc-fg)}
.vc-table caption{text-align:left;padding:1rem 1.2rem;color:var(--vc-faint);font-family:var(--vc-font-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.vc-table th,.vc-table td{padding:.8rem 1.2rem;text-align:left;border-top:var(--vc-border)}
.vc-table thead th{color:var(--vc-muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;border-top:0}
.vc-table tbody tr{transition:background var(--vc-dur-fast)}
.vc-table tbody tr:hover{background:var(--vc-panel)}
.vc-table tbody th{font-weight:500}
.vc-num{text-align:right;font-family:var(--vc-font-mono);font-variant-numeric:tabular-nums}
.vc-pos{color:var(--vc-pos)} .vc-neg{color:var(--vc-neg)}

/* ---- badge ---- */
.vc-badge{display:inline-flex;align-items:center;gap:.35em;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  padding:.35em .9em;border-radius:var(--vc-radius-pill);background:var(--vc-accent-soft);color:var(--vc-accent);border:1px solid rgba(34,195,214,.3)}
.vc-badge-gold{background:linear-gradient(180deg,var(--vc-gold),#c79a4d);color:#241803;border-color:transparent}
.vc-badge-pos{background:var(--vc-accent-soft);color:var(--vc-pos)}
.vc-badge-neg{background:rgba(255,138,138,.12);color:var(--vc-neg);border-color:rgba(255,138,138,.3)}
.vc-badge-muted{background:var(--vc-panel);color:var(--vc-muted);border-color:var(--vc-panel-brd)}

@media (prefers-reduced-motion:reduce){
  .vc-btn,.vc-card,:where(.vc-root) button,:where(.vc-root) .btn{transition:none}
  .vc-btn:hover,.vc-card:hover,:where(.vc-root) button:hover,:where(.vc-root) .btn:hover{transform:none}
}

/* =====================================================================
   THEME — Light / Dark / System
   Dark is the base (:root above). Light overrides tokens when the app
   resolves to light: either an explicit choice (html[data-theme="light"])
   or, with no stored choice and no JS, the OS preference (media fallback).
   The pre-paint script sets html[data-theme] before first paint.
   ===================================================================== */
html[data-theme="light"]{
  color-scheme:light;
  --vc-bg:#eef3f6; --vc-bg-2:#dce7ec;
  --vc-panel:rgba(10,30,50,.045); --vc-panel-2:rgba(10,30,50,.075);
  --vc-panel-brd:rgba(10,30,50,.12);
  --vc-fg:#0a1e32; --vc-muted:#3b505f; --vc-faint:#425767;
  --vc-accent:#055663; --vc-accent-2:#066b78; --vc-gold:#6a4c09;
  --vc-mint:var(--vc-accent); --vc-emerald:var(--vc-accent-2);
  --vc-pos:#0a5c3b; --vc-neg:#9c2020; --vc-warn:#6a4c09;
  --vc-on-accent:#ffffff; --vc-badge-bg:#066b78; --vc-badge-fg:#ffffff;
  --vc-accent-soft:rgba(5,86,99,.12); --vc-accent-glow:rgba(10,143,160,.28);
  --vc-gold-soft:rgba(183,137,47,.32);
  --vc-grad-primary:linear-gradient(180deg,#08808f,#066b78);
  --vc-grad-brand:linear-gradient(145deg,#08808f,#0a1e32);
  --vc-border-accent:1px solid rgba(10,143,160,.35);
  --vc-shadow-sm:0 10px 30px -14px rgba(10,30,50,.28);
  --vc-shadow-md:0 16px 40px -16px rgba(10,30,50,.32);
  --vc-shadow-lg:0 50px 100px -34px rgba(10,30,50,.26);
  --vc-shadow-glow:0 0 0 1px rgba(10,143,160,.18),0 0 40px rgba(10,143,160,.16);
  --vc-shadow-gold:0 30px 70px -40px rgba(183,137,47,.3);
  --vc-focus:#055663;
}
/* No-JS / no stored choice: follow the OS when it asks for light. */
@media (prefers-color-scheme:light){
  html:not([data-theme]){
    color-scheme:light;
    --vc-bg:#eef3f6; --vc-bg-2:#dce7ec;
    --vc-panel:rgba(10,30,50,.045); --vc-panel-2:rgba(10,30,50,.075);
    --vc-panel-brd:rgba(10,30,50,.12);
    --vc-fg:#0a1e32; --vc-muted:#3b505f; --vc-faint:#425767;
    --vc-accent:#055663; --vc-accent-2:#066b78; --vc-gold:#6a4c09;
    --vc-mint:var(--vc-accent); --vc-emerald:var(--vc-accent-2);
    --vc-pos:#0a5c3b; --vc-neg:#9c2020; --vc-warn:#6a4c09;
    --vc-on-accent:#ffffff; --vc-badge-bg:#066b78; --vc-badge-fg:#ffffff;
    --vc-accent-soft:rgba(5,86,99,.12); --vc-accent-glow:rgba(10,143,160,.28);
    --vc-gold-soft:rgba(183,137,47,.32);
    --vc-grad-primary:linear-gradient(180deg,#08808f,#066b78);
    --vc-grad-brand:linear-gradient(145deg,#08808f,#0a1e32);
    --vc-border-accent:1px solid rgba(10,143,160,.35);
    --vc-shadow-sm:0 10px 30px -14px rgba(10,30,50,.28);
    --vc-shadow-md:0 16px 40px -16px rgba(10,30,50,.32);
    --vc-shadow-lg:0 50px 100px -34px rgba(10,30,50,.26);
    --vc-shadow-glow:0 0 0 1px rgba(10,143,160,.18),0 0 40px rgba(10,143,160,.16);
    --vc-shadow-gold:0 30px 70px -40px rgba(183,137,47,.3);
    --vc-focus:#055663;
  }
}

/* ---- segmented Light / System / Dark control ---- */
.vc-theme-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;
  border-radius:var(--vc-radius-pill);background:var(--vc-panel);border:1px solid var(--vc-panel-brd)}
.vc-theme-switch button{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:0;
  border-radius:var(--vc-radius-pill);background:transparent;color:var(--vc-muted);cursor:pointer;line-height:0;
  transition:background var(--vc-dur-fast) var(--vc-ease),color var(--vc-dur-fast) var(--vc-ease)}
.vc-theme-switch button svg{width:16px;height:16px;display:block}
.vc-theme-switch button:hover{color:var(--vc-fg)}
.vc-theme-switch button[aria-pressed="true"]{background:var(--vc-accent-soft);color:var(--vc-accent)}
.vc-theme-switch button:focus-visible{outline:2px solid var(--vc-focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.vc-theme-switch button{transition:none}}

/* ---- entrance reveal + lazy skeleton (DS motion tokens only; transform/opacity) ---- */
body.vc-anim-ready .vc-reveal{opacity:0;transform:translateY(12px);will-change:opacity,transform;
  transition:opacity var(--vc-dur-slow,.4s) var(--vc-ease,ease),transform var(--vc-dur-slow,.4s) var(--vc-ease,ease);
  transition-delay:calc(var(--vc-stagger-i,0) * 55ms)}
body.vc-anim-ready .vc-reveal.vc-in{opacity:1;transform:none}
.vc-skeleton{position:relative;overflow:hidden}
.vc-skeleton::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--vc-panel-2,rgba(255,255,255,.07)),transparent);
  animation:vc-shimmer 1.25s var(--vc-ease,ease) infinite}
@keyframes vc-shimmer{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  body.vc-anim-ready .vc-reveal{opacity:1 !important;transform:none !important;transition:none !important;transition-delay:0s !important}
  .vc-skeleton::after{animation:none;background:none}
}