/* JARVIS V4 — Design System "Obsidian & Gold" */
:root{
  --ink:#07090F; --panel:#0D1220; --panel2:#111830; --line:#1C2436;
  --gold:#C9A227; --goldsoft:#E7C766; --txt:#E5E9F2; --mut:#8B94A7;
}
*{-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{background:
  radial-gradient(1200px 600px at 80% -10%, rgba(201,162,39,.07), transparent 60%),
  radial-gradient(900px 500px at -10% 110%, rgba(79,142,247,.06), transparent 60%),
  var(--ink);
  min-height:100dvh}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#232c44;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

.glass{background:linear-gradient(160deg, rgba(17,24,48,.85), rgba(13,18,32,.92));
  border:1px solid var(--line); backdrop-filter:blur(14px)}
.card{background:linear-gradient(160deg,#101830,#0C1120);border:1px solid var(--line);
  border-radius:1.1rem; transition:transform .22s cubic-bezier(.2,.8,.2,1), border-color .22s, box-shadow .22s}
.card:hover{transform:translateY(-2px);border-color:#2A3654;box-shadow:0 12px 40px -18px rgba(0,0,0,.8)}
.card:active{transform:scale(.985)}
.gold-ring{box-shadow:0 0 0 1px rgba(201,162,39,.35), 0 8px 30px -12px rgba(201,162,39,.25)}
.gold-text{background:linear-gradient(100deg,#E7C766,#C9A227 60%,#9A7B1B);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.btn-gold{background:linear-gradient(120deg,#E7C766,#C9A227);color:#12100A;font-weight:600;
  transition:filter .2s, transform .15s}
.btn-gold:hover{filter:brightness(1.08)} .btn-gold:active{transform:scale(.97)}
.btn-ghost{border:1px solid var(--line);color:var(--txt);transition:background .2s,border-color .2s}
.btn-ghost:hover{background:#141C33;border-color:#2A3654}

.pill{border:1px solid var(--line);border-radius:9999px;padding:.25rem .7rem;font-size:.72rem;color:var(--mut)}
.dot{width:.5rem;height:.5rem;border-radius:9999px;display:inline-block}
.dot.ok{background:#2ECC8F;box-shadow:0 0 8px #2ECC8F88}
.dot.warn{background:#F5B84D;box-shadow:0 0 8px #F5B84D88}
.dot.off{background:#586074}

.fade-in{animation:fadeIn .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.stagger>*{animation:fadeIn .4s cubic-bezier(.2,.8,.2,1) both}
.stagger>*:nth-child(2){animation-delay:.05s}.stagger>*:nth-child(3){animation-delay:.1s}
.stagger>*:nth-child(4){animation-delay:.15s}.stagger>*:nth-child(5){animation-delay:.2s}
.stagger>*:nth-child(6){animation-delay:.25s}.stagger>*:nth-child(7){animation-delay:.3s}
.stagger>*:nth-child(8){animation-delay:.35s}

.pulse-gold{animation:pulseG 2.4s ease-in-out infinite}
@keyframes pulseG{0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.35)}50%{box-shadow:0 0 0 12px rgba(201,162,39,0)}}
.listening{animation:listen 1.1s ease-in-out infinite}
@keyframes listen{0%,100%{box-shadow:0 0 0 0 rgba(46,204,143,.5)}50%{box-shadow:0 0 0 14px rgba(46,204,143,0)}}

.typing span{width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block;
  animation:tp 1.2s infinite ease-in-out}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:1}}

.md h1,.md h2,.md h3{font-family:'Space Grotesk',sans-serif;color:#F1F4FA;margin:.8em 0 .35em;font-weight:600}
.md h1{font-size:1.15rem}.md h2{font-size:1.05rem}.md h3{font-size:.95rem}
.md p{margin:.45em 0;line-height:1.6}
.md ul,.md ol{margin:.45em 0 .45em 1.2em;line-height:1.55}
.md ul{list-style:disc}.md ol{list-style:decimal}
.md strong{color:#F1F4FA}
.md code{background:#161F38;border:1px solid var(--line);border-radius:.35rem;padding:.08em .35em;font-size:.85em}
.md pre{background:#0A0F1D;border:1px solid var(--line);border-radius:.7rem;padding:.8rem;overflow-x:auto;margin:.6em 0}
.md pre code{background:none;border:none;padding:0}
.md table{border-collapse:collapse;margin:.6em 0;width:100%;font-size:.85em}
.md th,.md td{border:1px solid var(--line);padding:.4em .6em;text-align:left}
.md th{background:#141C33}
.md blockquote{border-left:3px solid var(--gold);padding-left:.8em;color:var(--mut);margin:.6em 0}

.navtab{color:var(--mut);transition:color .2s}
.navtab.active{color:var(--goldsoft)}
.navtab.active i{filter:drop-shadow(0 0 6px rgba(201,162,39,.5))}

.grain::after{content:'';position:fixed;inset:0;pointer-events:none;opacity:.03;z-index:99;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}

.director-btn{min-height:5.5rem;font-size:1.15rem}
.safe-b{padding-bottom:calc(env(safe-area-inset-bottom) + 4.6rem)}
input,textarea,select{outline:none}
input:focus,textarea:focus,select:focus{border-color:#3A4A75 !important}
.toggle{width:2.9rem;height:1.6rem;border-radius:9999px;background:#232C44;position:relative;cursor:pointer;transition:background .25s;flex-shrink:0}
.toggle::after{content:'';position:absolute;top:.2rem;left:.2rem;width:1.2rem;height:1.2rem;border-radius:50%;background:#8B94A7;transition:all .25s}
.toggle.on{background:linear-gradient(120deg,#E7C766,#C9A227)}
.toggle.on::after{left:1.5rem;background:#12100A}