/* ============================================================
   Jarvis — theme
   Tokens, chrome (sidebar / top bar / right rail / bottom bar),
   surfaces, controls, data bits, motion.
   Every board links this. Nothing here is page-specific.
   ============================================================ */

:root{
  --ink:#0E0B07;
  --ink-2:#120F0C;
  --panel:#171208;

  --amber:#F5B312;
  --amber-hi:#FFD04A;
  --amber-lo:#E8920C;
  --amber-pale:#FFE9A8;
  --cream:#FFF6E6;

  --text:#F7F2EA;
  --text-2:#E4D8C4;
  --dim:#AD9D86;
  --faint:#8A7C6A;

  --green:#86E0A8;
  --coral:#FF8A70;
  --violet:#9FB4FF;
  --rust:#FFB37A;

  --hair:rgba(255,238,210,.13);
  --hair-2:rgba(255,238,210,.08);
  --fill:rgba(255,240,215,.055);
  --fill-2:rgba(255,240,215,.085);

  --r-lg:30px;
  --r-md:22px;
  --r-sm:16px;
  --r-xs:12px;

  --ease:cubic-bezier(.32,.72,0,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --lift:inset 0 1px 0 rgba(255,248,232,.26), inset 0 -1px 0 rgba(0,0,0,.18),
         0 2px 6px rgba(0,0,0,.3), 0 28px 70px rgba(0,0,0,.52);
  --lift-sm:inset 0 1px 0 rgba(255,248,232,.16), 0 1px 3px rgba(0,0,0,.26), 0 10px 26px rgba(0,0,0,.34);
  --glow:0 0 28px rgba(245,179,18,.5);
}

*{box-sizing:border-box}
body{margin:0;background:var(--ink-2)}

/* ---------- type ---------- */
.mono{font-family:'JetBrains Mono',monospace}
.big{font-family:'Sora',sans-serif;letter-spacing:-.035em}
.lbl{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.26em;color:var(--dim);text-transform:uppercase}
.lbl-xs{font-size:8.5px;letter-spacing:.2em}
.num{font-family:'Sora',sans-serif;letter-spacing:-.04em;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- layout atoms ---------- */
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
.grow{flex:1;min-width:0;min-height:0}
.gap-xs{gap:6px}.gap-s{gap:10px}.gap{gap:14px}.gap-l{gap:18px}
.sep{height:1px;background:var(--hair-2);flex-shrink:0}
.v-sep{width:1px;align-self:stretch;background:var(--hair-2);flex-shrink:0}
.clip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- the page ---------- */
.jv{
  position:relative;overflow:hidden;background:var(--ink-2);
  font-family:'IBM Plex Sans',sans-serif;color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.jv-bloom{position:absolute;border-radius:50%;filter:blur(44px);pointer-events:none}
.jv-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 48% 24%, rgba(0,0,0,0) 30%, rgba(14,11,8,.88) 100%)}
.jv-grain{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,240,215,.055) .5px, transparent .5px);
  background-size:3px 3px}
.jv-shell{position:relative;display:flex;padding:18px;gap:16px;height:100%}

/* ---------- surfaces ---------- */
.glass{
  background:linear-gradient(165deg, rgba(255,240,215,.1), rgba(255,235,205,.035));
  backdrop-filter:blur(40px) saturate(1.3);-webkit-backdrop-filter:blur(40px) saturate(1.3);
  border:1px solid var(--hair);box-shadow:var(--lift);
}
.glass-amber{
  background:linear-gradient(165deg, rgba(245,179,18,.22), rgba(245,179,18,.05));
  backdrop-filter:blur(40px) saturate(1.3);-webkit-backdrop-filter:blur(40px) saturate(1.3);
  border:1px solid rgba(245,179,18,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 2px 6px rgba(0,0,0,.3), 0 28px 70px rgba(0,0,0,.5);
}
.glass-dark{
  background:rgba(18,15,12,.84);
  backdrop-filter:blur(30px) saturate(1.2);-webkit-backdrop-filter:blur(30px) saturate(1.2);
  border:1px solid rgba(255,238,210,.09);box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.card{border-radius:var(--r-lg);padding:18px 20px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.card-sm{border-radius:var(--r-md);padding:14px 16px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.inset{background:var(--fill);border:1px solid rgba(255,238,210,.1);
  box-shadow:inset 0 1px 0 rgba(255,248,232,.14);border-radius:var(--r-sm)}

/* a hairline of light that breathes across the top edge of a panel */
.topline{position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,230,180,.75), transparent);
  animation:edge 5s ease-in-out infinite}
/* a slow specular sweep for anything that is working */
.sheen{position:absolute;top:0;bottom:0;width:36%;pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,240,205,.13), transparent);
  animation:sweep 5s linear infinite}

/* ---------- sidebar ---------- */
.jv-side{width:72px;flex-shrink:0;border-radius:var(--r-lg);
  display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:4px}
.jv-mark{position:relative;width:40px;height:40px;flex-shrink:0;margin-bottom:10px}
.jv-side-btn{width:48px;height:48px;border-radius:16px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;background:transparent;color:var(--dim);
  position:relative;transition:background .28s var(--ease-soft), color .28s var(--ease-soft)}
.jv-side-btn.is-on{background:linear-gradient(145deg, var(--amber-hi), var(--amber-lo));color:#2A1A02;
  box-shadow:0 0 26px rgba(245,179,18,.55), inset 0 1px 0 rgba(255,255,255,.5)}
.jv-side-btn.is-on::after{content:"";position:absolute;left:-16px;top:50%;width:3px;height:18px;
  margin-top:-9px;border-radius:3px;background:var(--amber-hi);box-shadow:0 0 12px var(--amber)}
.jv-stop{width:48px;height:48px;border-radius:16px;cursor:pointer;
  border:1px solid rgba(255,138,112,.38);background:rgba(255,138,112,.14);color:#FFAE98;
  display:flex;align-items:center;justify-content:center}

/* ---------- top bar ---------- */
.jv-top{height:60px;border-radius:var(--r-md);flex-shrink:0;
  display:flex;align-items:center;gap:14px;padding:0 8px 0 18px;position:relative;overflow:hidden}
.jv-crumb{font-size:13.5px;font-weight:500}
.jv-crumb-dim{font-size:13.5px;color:var(--faint)}
.jv-search{height:38px;flex:1;max-width:330px;border-radius:99px;display:flex;align-items:center;gap:10px;
  padding:0 16px;background:var(--fill);border:1px solid var(--hair);
  box-shadow:inset 0 1px 0 rgba(255,248,232,.12);color:var(--faint);font-size:12.5px}
.jv-kbd{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--faint);
  border:1px solid var(--hair);border-radius:5px;padding:2px 5px}
.jv-meter{display:flex;flex-direction:column;gap:5px;width:120px;flex-shrink:0}
.jv-meter-bar{height:5px;border-radius:3px;background:rgba(255,240,215,.08);overflow:hidden}
.jv-meter-fill{height:100%;border-radius:3px;transform-origin:left;
  background:linear-gradient(90deg, var(--amber-lo), var(--amber-hi));
  box-shadow:0 0 14px rgba(245,179,18,.6);animation:growX 1.2s .5s var(--ease) both}
.jv-icon-btn{width:38px;height:38px;border-radius:13px;border:1px solid var(--hair);cursor:pointer;
  background:var(--fill);color:var(--dim);display:flex;align-items:center;justify-content:center;
  position:relative;flex-shrink:0}
.jv-dot{position:absolute;top:8px;right:9px;width:6px;height:6px;border-radius:50%;
  background:var(--coral);box-shadow:0 0 9px var(--coral);animation:blink 2.4s ease-in-out infinite}
.jv-avatar{width:38px;height:38px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;font-family:'Sora',sans-serif;font-size:13px;font-weight:600;color:#2A1A02;
  background:linear-gradient(145deg, var(--amber-hi), var(--amber-lo));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 0 22px rgba(245,179,18,.35)}

/* ---------- right rail ---------- */
.jv-rail{width:62px;flex-shrink:0;border-radius:var(--r-lg);
  display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:6px}
.jv-rail-btn{width:44px;height:44px;border-radius:15px;border:1px solid var(--hair);cursor:pointer;
  background:var(--fill);display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,248,232,.14)}
.jv-rail-lbl{font-family:'JetBrains Mono',monospace;font-size:7.5px;letter-spacing:.14em;color:var(--faint);
  writing-mode:vertical-rl;margin:6px 0}
.jv-rail-gauge{width:6px;flex:1;min-height:0;border-radius:4px;background:rgba(255,240,215,.07);
  position:relative;overflow:hidden;margin:8px 0}
.jv-rail-gauge span{position:absolute;left:0;right:0;bottom:0;border-radius:4px;
  background:linear-gradient(180deg, var(--amber-hi), var(--amber-lo));
  box-shadow:0 0 14px rgba(245,179,18,.6);transform-origin:bottom;
  animation:growY 1.3s .6s var(--ease) both}

/* ---------- bottom bar ---------- */
.jv-bottom{height:38px;flex-shrink:0;border-radius:99px;position:relative;overflow:hidden;
  background:var(--fill);border:1px solid var(--hair-2);display:flex;align-items:center}
.jv-bottom-fade{position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.jv-bottom-fade.l{left:0;background:linear-gradient(90deg, var(--ink-2), transparent)}
.jv-bottom-fade.r{right:0;background:linear-gradient(270deg, var(--ink-2), transparent)}
.jv-track{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;width:200%;
  animation:tick 44s linear infinite}
.jv-tick{display:flex;align-items:center;gap:9px;padding:0 22px;flex-shrink:0}
.jv-tick span.d{width:4px;height:4px;border-radius:50%;flex-shrink:0}
.jv-tick span.t{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#C2B29C;white-space:nowrap}

/* ---------- reconnect toast ----------
   Shown when the connection drops or a cached page wakes up
   stale. It never sends anyone back to a login screen: it
   refreshes the session behind the toast and puts the person
   back on the screen they were already on.                    */
.jv-toast{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:30;
  display:flex;align-items:center;gap:11px;height:42px;padding:0 8px 0 18px;border-radius:99px;
  background:rgba(22,18,12,.94);backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);
  border:1px solid rgba(255,238,210,.16);
  box-shadow:inset 0 1px 0 rgba(255,248,232,.2), 0 18px 44px rgba(0,0,0,.6);
  animation:toastIn .7s var(--ease) both;white-space:nowrap}
.jv-toast .spin{width:15px;height:15px;border-radius:50%;flex-shrink:0;
  border:1.8px solid rgba(245,179,18,.28);border-top-color:var(--amber-hi);
  animation:spin .85s linear infinite}
.jv-toast .msg{font-size:12.5px;color:var(--text-2)}
.jv-toast .sub{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;color:var(--faint)}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,16px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

/* ---------- controls ---------- */
.btn-cream{height:44px;padding:0 8px 0 20px;border-radius:99px;border:none;cursor:pointer;
  background:var(--cream);color:#231803;font-family:'IBM Plex Sans',sans-serif;font-size:13.5px;font-weight:500;
  display:flex;align-items:center;gap:12px;flex-shrink:0;
  box-shadow:0 2px 4px rgba(0,0,0,.3), 0 16px 40px rgba(255,214,120,.24), inset 0 1px 0 #fff}
.btn-cream .knob{width:30px;height:30px;border-radius:50%;background:#231803;color:var(--amber-hi);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.btn-amber{height:40px;padding:0 20px;border-radius:14px;border:none;cursor:pointer;
  background:linear-gradient(145deg, var(--amber-hi), var(--amber-lo));color:#2A1A02;
  font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.5)}
.btn-ghost{height:40px;padding:0 18px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(255,238,210,.18);background:var(--fill-2);color:var(--text);
  font-family:'IBM Plex Sans',sans-serif;font-size:13px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:inset 0 1px 0 rgba(255,248,232,.18)}
.seg{display:flex;align-items:center;gap:4px;padding:4px;border-radius:99px;
  background:var(--fill);border:1px solid var(--hair);box-shadow:inset 0 1px 0 rgba(255,248,232,.12)}
.seg button{height:28px;padding:0 15px;border-radius:99px;border:none;cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  background:transparent;color:var(--dim);transition:all .3s var(--ease-soft)}
.seg button.is-on{background:linear-gradient(145deg, var(--amber-hi), var(--amber-lo));color:#2A1A02;
  box-shadow:0 0 22px rgba(245,179,18,.5), inset 0 1px 0 rgba(255,255,255,.5)}
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:99px;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;white-space:nowrap}
.chip .d{width:4px;height:4px;border-radius:50%;flex-shrink:0}
.chip-green{background:rgba(134,224,168,.14);border:1px solid rgba(134,224,168,.3);color:#9FD9B6}
.chip-amber{background:rgba(245,179,18,.16);border:1px solid rgba(245,179,18,.36);color:var(--amber-hi)}
.chip-coral{background:rgba(255,138,112,.16);border:1px solid rgba(255,138,112,.32);color:#FFAE98}
.chip-violet{background:rgba(159,180,255,.14);border:1px solid rgba(159,180,255,.3);color:var(--violet)}
.chip-ghost{background:var(--fill);border:1px solid var(--hair);color:var(--dim)}

/* ---------- data ---------- */
.kpi{flex:1;min-width:0;border-radius:var(--r-md);padding:0 16px;display:flex;flex-direction:column;
  justify-content:center;gap:5px;background:var(--fill);border:1px solid rgba(255,238,210,.1);
  box-shadow:inset 0 1px 0 rgba(255,248,232,.14);transition:all .35s var(--ease-soft)}
.kpi.is-on{background:linear-gradient(160deg, rgba(245,179,18,.3), rgba(245,179,18,.1));
  border-color:rgba(245,179,18,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 0 36px rgba(245,179,18,.34)}
.kpi-v{font-family:'Sora',sans-serif;font-size:22px;font-weight:600;letter-spacing:-.04em}
.kpi-d{font-size:11.5px;font-weight:400;margin-left:6px;letter-spacing:normal}
.listrow{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-sm);
  background:var(--fill);border:1px solid rgba(255,238,210,.1);
  box-shadow:inset 0 1px 0 rgba(255,248,232,.13)}
.tile{width:30px;height:30px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;
  justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.tile-lg{width:34px;height:34px;border-radius:12px}
.bar-track{height:6px;border-radius:4px;background:rgba(255,240,215,.08);overflow:hidden;flex:1}
.bar-fill{height:100%;border-radius:4px;transform-origin:left;animation:growX 1.1s var(--ease) both}
.th{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.22em;color:var(--faint);
  text-transform:uppercase}

/* ---------- motion ---------- */
@keyframes bloom{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(44px,-30px) scale(1.12)}66%{transform:translate(-30px,26px) scale(.93)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinR{to{transform:rotate(-360deg)}}
@keyframes core{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.045);filter:brightness(1.22)}}
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.975)}to{opacity:1;transform:none}}
@keyframes slideL{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes draw{from{stroke-dashoffset:2600}to{stroke-dashoffset:0}}
@keyframes blink{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes caret{50%{opacity:0}}
@keyframes sweep{0%{transform:translateX(-120%) skewX(-14deg)}100%{transform:translateX(420%) skewX(-14deg)}}
@keyframes edge{0%,100%{opacity:.28}50%{opacity:.9}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(2.6);opacity:0}}
@keyframes dots{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
@keyframes bars{0%,100%{transform:scaleY(.16)}50%{transform:scaleY(1)}}
@keyframes dashmove{to{stroke-dashoffset:-60}}
@keyframes crawl{to{offset-distance:100%}}