/* ================================================================
   SuperTuned Studio v2 — standardized shell mock
   paper / ink / signal(orange) / grove(green) — Mido-inspired
   Every app screen = left sidebar + topbar + content + Ask AI (3 modes)
   ================================================================ */
:root{
  --paper:#f2efe6; --card:#fbfaf5; --card2:#f7f5ec;
  --ink:#161511; --mut:#6d6a5e; --faint:#a09c8c;
  --line:#e4dfd0; --line2:#d5cfba;
  --signal:#ff5b2e; --signal-deep:#e04a1f; --signal-soft:#fde8df; --signal-faint:#fbf1ea;
  --grove:#2e7d4f; --grove-deep:#22603c; --grove-soft:#e0edda; --grove-faint:#eef3e6;
  --warn:#b26a08; --warn-soft:#f7ecd4;
  --info:#2b5fb8; --info-soft:#e2e9f5;
  --r:6px; --r-lg:10px;
  --shadow:0 1px 2px rgba(22,21,17,.05),0 8px 28px rgba(22,21,17,.07);
  --sans:'Inter',system-ui,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sbw:248px; --aiw:392px;
  /* game accent (overridden per game) */
  --gacc:#ff5b2e; --gacc-soft:#fde8df;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:13.5px;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font:inherit;color:inherit}
.mono{font-family:var(--mono)}
.serif{font-family:var(--serif)}
a{color:inherit}
.dots{background-image:radial-gradient(rgba(22,21,17,.14) 1px,transparent 1px);background-size:22px 22px}

/* ---------- screens ---------- */
.screen{display:none}
.screen.active{display:block}

/* ---------- app frame ---------- */
.app{display:grid;grid-template-columns:var(--sbw) 1fr;height:100vh;overflow:hidden}
body.ai-sidebar .app{grid-template-columns:var(--sbw) 1fr var(--aiw)}
.content{display:flex;flex-direction:column;min-width:0;height:100vh}
.topbar{height:46px;flex:none;display:flex;align-items:center;gap:10px;padding:0 20px;
  border-bottom:1px solid var(--line);background:rgba(251,250,245,.7);backdrop-filter:blur(6px)}
.crumbs{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mut);min-width:0}
.crumbs b{color:var(--ink);font-weight:600}
.crumbs .sep{color:var(--faint)}
.crumbs .lnk{cursor:pointer}
.crumbs .lnk:hover{color:var(--ink)}
.goalchip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;
  border:1px solid var(--line2);border-radius:99px;padding:3px 10px;background:var(--card);cursor:pointer}
.goalchip:hover{border-color:var(--ink)}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.iconbtn{width:30px;height:30px;border-radius:var(--r);display:grid;place-items:center;color:var(--mut)}
.iconbtn:hover{background:var(--card2);color:var(--ink)}
.iconbtn svg{width:16px;height:16px}
main.pagebody{flex:1;overflow-y:auto}
.pagein{max-width:1240px;margin:0 auto;padding:26px 30px 80px}

/* ---------- sidebar ---------- */
.sb{background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;
  height:100vh;overflow:hidden}
.sb-head{display:flex;align-items:center;gap:9px;padding:14px 14px 12px;border-bottom:1px solid var(--line)}
.brandmark{width:26px;height:26px;border-radius:6px;background:var(--ink);display:grid;place-items:center;flex:none}
.brandmark svg{width:16px;height:16px}
.brand{font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:-.01em}
.brand i{color:var(--signal);font-style:normal}
.sb-scroll{flex:1;overflow-y:auto;padding:12px 10px}
.sb-label{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:4px 8px 6px}
.nav-item{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:var(--r);
  border-left:2px solid transparent;color:var(--mut);font-size:13px;width:100%;text-align:left;margin-bottom:1px}
.nav-item svg{width:15px;height:15px;flex:none}
.nav-item:hover{background:var(--card2);color:var(--ink)}
.nav-item.on{border-left-color:var(--signal);background:var(--card2);color:var(--ink);font-weight:500}
.nav-count{margin-left:auto;min-width:17px;text-align:center;font-family:var(--mono);font-size:9.5px;
  font-weight:600;color:var(--signal);background:var(--signal-soft);border-radius:99px;padding:1px 5px}
.sb-proj{margin:14px 4px 4px;border-top:1px solid var(--line);padding-top:12px}
.sb-projhead{display:flex;align-items:center;gap:9px;padding:2px 8px 8px}
.sb-projhead .gm{width:26px;height:26px;border-radius:8px;background:var(--card2);border:1px solid var(--line);
  display:grid;place-items:center;flex:none}
.sb-projhead .gm svg{width:18px;height:18px}
.sb-projhead b{font-size:12.5px;display:block;line-height:1.2}
.sb-projhead span{font-family:var(--mono);font-size:9px;color:var(--faint)}
.sb-adv{margin-top:8px}
.sb-adv summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:6px 8px;
  border-radius:var(--r);color:var(--faint);font-size:12px}
.sb-adv summary::-webkit-details-marker{display:none}
.sb-adv summary:hover{color:var(--ink);background:var(--card2)}
.sb-adv svg{width:15px;height:15px}
.sb-foot{flex:none;padding:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.askai-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:var(--r);
  background:var(--signal-faint);border:1px solid #f3d5c4;color:var(--ink);font-weight:500;font-size:13px}
.askai-btn:hover{background:var(--signal-soft)}
.askai-btn svg{width:14px;height:14px;color:var(--signal)}
.askai-btn .kbd{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--mut);
  border:1px solid var(--line2);border-radius:4px;padding:1px 5px;background:var(--card)}
.budget{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:8px 10px}
.budget .r1{display:flex;justify-content:space-between;font-family:var(--mono)}
.budget .r1 span{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.budget .r1 b{font-size:10.5px;font-weight:500}
.budget .bar{height:5px;border-radius:99px;background:var(--line);margin:6px 0 4px;overflow:hidden}
.budget .bar i{display:block;height:100%;width:53%;background:var(--signal);border-radius:99px}
.budget .r2{font-size:9.5px;color:var(--faint)}
.userrow{display:flex;align-items:center;gap:9px;padding:5px 6px;border-radius:var(--r);width:100%;position:relative;cursor:pointer}
.userrow:hover{background:var(--card2)}
.userrow .av{width:26px;height:26px;border-radius:99px;background:var(--signal-soft);color:var(--signal-deep);
  display:grid;place-items:center;font-size:10px;font-weight:700;flex:none}
.userrow b{font-size:12.5px;font-weight:500}
.userrow svg{width:14px;height:14px;margin-left:auto;color:var(--mut)}
.usermenu{position:absolute;bottom:44px;left:8px;width:236px;background:var(--card);border:1px solid var(--line2);
  border-radius:var(--r-lg);box-shadow:var(--shadow);padding:10px;display:none;z-index:60}
.usermenu.open{display:block}
.usermenu .who b{font-size:13.5px;display:block}
.usermenu .who span{font-size:11px;color:var(--mut)}
.usermenu .theme{display:flex;align-items:center;justify-content:space-between;margin:10px 0;
  padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12.5px}
.seg{display:flex;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden}
.seg button{padding:4px 10px;font-size:11.5px;color:var(--mut);display:flex;gap:5px;align-items:center}
.seg button.on{background:var(--card2);color:var(--ink);font-weight:500}
.seg svg{width:12px;height:12px}
.umr{display:flex;align-items:center;gap:9px;width:100%;padding:6px 6px;border-radius:var(--r);
  font-size:12.5px;color:var(--ink)}
.umr:hover{background:var(--card2)}
.umr svg{width:14px;height:14px;color:var(--mut)}

/* ---------- shared ui ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r);
  font-weight:500;font-size:12.5px;border:1px solid transparent;transition:.12s}
.btn svg{width:14px;height:14px}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#000}
.btn-sig{background:var(--signal);color:#fff}
.btn-sig:hover{background:var(--signal-deep)}
.btn-line{background:var(--card);border-color:var(--line2)}
.btn-line:hover{border-color:var(--ink)}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid var(--line2);
  background:var(--card);color:var(--mut);font-weight:500}
.pill .dot{width:6px;height:6px;border-radius:99px;background:var(--grove)}
.pill.live{color:var(--grove-deep);border-color:#bcd6b9;background:var(--grove-faint)}
.pill.hot{color:var(--signal-deep);border-color:#f3cdb9;background:var(--signal-faint)}
.pill.warn{color:var(--warn);border-color:#e6d3a8;background:var(--warn-soft)}
.eyebrow{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--signal)}
.eyebrow.g{color:var(--grove)}
.h-serif{font-family:var(--serif);font-weight:600;letter-spacing:-.01em}
.sub{color:var(--mut);line-height:1.6}
.secthead{display:flex;align-items:baseline;justify-content:space-between;margin:26px 0 12px}
.secthead h2{font-family:var(--serif);font-size:17px;font-weight:600}
.secthead .note{font-size:12px;color:var(--faint)}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--mut);
  background:var(--card);border:1px solid var(--line);padding:3px 8px;border-radius:5px}
.chip i{width:7px;height:7px;border-radius:2.5px;display:inline-block}

/* ---------- login ---------- */
#s-login{min-height:100vh;display:none;place-items:center;background:var(--paper);position:relative}
#s-login.active{display:grid}
.login-card{width:520px;max-width:92vw;background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow);padding:40px 42px;position:relative;z-index:2}
.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:34px}
.login-brand .brandmark{width:34px;height:34px}
.login-brand .brand{font-size:18px}
.login-card h1{font-family:var(--serif);font-size:29px;font-weight:600;line-height:1.25;margin:10px 0 14px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:26px;
  padding:13px;border:1px solid var(--line2);background:var(--card2);font-weight:500;font-size:14px}
.gbtn:hover{border-color:var(--ink)}
.login-foot{margin-top:14px;text-align:center;font-size:11.5px;color:var(--faint)}
.login-below{position:absolute;bottom:34px;left:0;right:0;text-align:center;font-family:var(--mono);
  font-size:10px;letter-spacing:.22em;color:var(--mut)}
.login-below b{color:var(--ink)}

/* ---------- home ---------- */
.welcome{padding:26px 28px;position:relative;overflow:hidden}
.welcome:after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(22,21,17,.07) 1px,transparent 1px);
  background-size:20px 20px;mask-image:linear-gradient(100deg,transparent 55%,#000);pointer-events:none}
.welcome .hi{font-size:12px;color:var(--mut)}
.welcome h1{font-family:var(--serif);font-size:26px;font-weight:600;margin:4px 0 8px}
.welcome p{max-width:640px}
.welcome .acts{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.askband{margin-top:16px;display:flex;align-items:center;gap:11px;background:var(--card);
  border:1px solid var(--line2);border-radius:var(--r-lg);padding:9px 9px 9px 14px;box-shadow:var(--shadow)}
.askband svg{width:16px;height:16px;color:var(--signal)}
.askband input{flex:1;border:none;outline:none;background:none;font-size:13.5px}
.waiting{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.waitcard{display:flex;gap:12px;align-items:center;padding:13px 16px;cursor:pointer}
.waitcard:hover{border-color:var(--line2)}
.waitcard .wi{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;flex:none}
.waitcard .wi svg{width:16px;height:16px}
.waitcard b{font-size:13px;display:block}
.waitcard span{font-size:11.5px;color:var(--mut)}
.waitcard .go{margin-left:auto;color:var(--faint)}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.gamecard{border-radius:var(--r-lg);overflow:hidden;background:var(--card);border:1px solid var(--line);
  box-shadow:var(--shadow);cursor:pointer;text-align:left;transition:.15s}
.gamecard:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:0 12px 34px rgba(22,21,17,.12)}
.cover{height:104px;position:relative;overflow:hidden}
.cover svg{position:absolute;inset:0;width:100%;height:100%}
.gamecard .gbody{padding:12px 14px 13px;display:flex;gap:11px}
.gamecard .gm{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--card);border:1px solid var(--line);margin-top:-28px;position:relative;box-shadow:0 3px 8px rgba(22,21,17,.14)}
.gamecard .gm svg{width:23px;height:23px}
.gamecard h3{font-size:13.5px;font-weight:600}
.gamecard h3 span{color:var(--mut);font-weight:500}
.gamecard .meta{font-size:11px;color:var(--mut);margin-top:3px;line-height:1.45}
.newcard{border:1.5px dashed var(--line2);border-radius:var(--r-lg);display:grid;place-items:center;
  min-height:170px;color:var(--mut);font-weight:500;font-size:13px;cursor:pointer;background:transparent}
.newcard:hover{border-color:var(--signal);color:var(--signal)}
.recent-goal{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer}
.recent-goal .tg{width:30px;height:30px;border-radius:7px;background:var(--card2);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--mut)}
.recent-goal .tg svg{width:15px;height:15px}
.recent-goal b{display:block;font-size:13px}
.recent-goal span{font-size:11px;color:var(--mut)}
.recent-goal .arr{margin-left:auto;color:var(--faint)}

/* ---------- new project ---------- */
.steps{display:flex;gap:8px;margin-bottom:16px}
.step{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  padding:5px 11px;border-radius:99px;border:1px solid var(--line2);color:var(--faint);background:var(--card)}
.step.done{color:var(--grove-deep);border-color:#bcd6b9;background:var(--grove-faint)}
.step.now{color:var(--ink);border-color:var(--ink)}
.np-input{display:flex;align-items:center;border:1.5px solid var(--ink);border-radius:var(--r-lg);
  padding:12px 15px;font-size:15px;font-weight:500;background:var(--card);margin-top:14px}
.caret{width:2px;height:19px;background:var(--signal);animation:blink 1s steps(1) infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}
.found{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-lg);padding:15px;background:var(--card2)}
.found .row1{display:flex;align-items:center;gap:11px}
.appicon{width:40px;height:40px;border-radius:9px;background:linear-gradient(180deg,#9ed7f0,#c9ecdc);
  display:grid;place-items:center;box-shadow:0 2px 6px rgba(22,21,17,.15)}
.swatches{display:flex;gap:6px;margin-top:11px;align-items:center}
.sw{width:19px;height:19px;border-radius:5px;border:1px solid rgba(22,21,17,.12)}
.preview{margin-top:14px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.preview .bar{height:22px;background:var(--card);border-bottom:1px solid var(--line);display:flex;
  align-items:center;gap:4px;padding:0 9px}
.preview .bar i{width:7px;height:7px;border-radius:99px;background:var(--line2)}
.preview .bar span{font-family:var(--mono);font-size:8.5px;color:var(--faint);margin-left:6px;letter-spacing:.06em}
.goalpick{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:11px 13px;background:var(--card);cursor:pointer;width:100%;text-align:left;margin-top:8px}
.goalpick:hover{border-color:var(--ink)}
.goalpick .ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none;font-size:15px}
.goalpick b{font-size:12.5px;display:block}
.goalpick span{font-size:11px;color:var(--mut)}
.rec{margin-left:auto;flex:none;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;font-weight:600;
  color:var(--signal-deep);background:var(--signal-soft);padding:3px 8px;border-radius:99px}

/* ---------- project overview ---------- */
.banner{border-radius:var(--r-lg);overflow:hidden;position:relative;border:1px solid var(--line);
  box-shadow:var(--shadow);min-height:148px}
.banner svg.art{position:absolute;inset:0;width:100%;height:100%}
.banner .inner{position:relative;z-index:2;padding:22px 24px;display:flex;align-items:flex-end;
  justify-content:space-between;min-height:148px}
.banner h1{font-family:var(--serif);font-size:26px;font-weight:600;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.banner .pills{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
.banner .pill{background:rgba(251,250,245,.94);border-color:transparent;color:var(--ink)}
.gsel{position:relative}
.gsel select{appearance:none;background:rgba(251,250,245,.96);border:none;border-radius:var(--r);
  font:500 12px var(--sans);padding:8px 30px 8px 12px;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.2)}
.gsel:after{content:"▾";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:10px;pointer-events:none}
.goals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.goalcard{padding:16px;cursor:pointer;transition:.15s}
.goalcard:hover{transform:translateY(-2px);border-color:var(--line2)}
.goalcard .top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.goalcard .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex:none}
.goalcard h3{font-size:13.5px;font-weight:600}
.goalcard .kpi{font-family:var(--serif);font-size:24px;font-weight:600;margin:4px 0 2px}
.goalcard .kpi small{font-family:var(--sans);font-size:11px;font-weight:500;color:var(--mut)}
.goalcard .foot{font-size:11px;color:var(--mut);margin-top:8px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.newgoal{border:1.5px dashed var(--line2);border-radius:var(--r-lg);display:grid;place-items:center;
  min-height:132px;color:var(--mut);font-weight:500;cursor:pointer}
.newgoal:hover{border-color:var(--signal);color:var(--signal)}
.weekstrip{padding:16px 18px;margin-top:14px}
.weekstrip .row{display:flex;gap:11px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line)}
.weekstrip .row:last-child{border:none}
.miniface{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:12px;flex:none;
  background:var(--card2);border:1px solid var(--line)}
.weekstrip p{font-size:12.5px;color:var(--mut);line-height:1.55}
.weekstrip p b{color:var(--ink)}

/* ---------- goal detail ---------- */
.goalhead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:6px}
.goalhead h1{font-family:var(--serif);font-size:24px;font-weight:600}
.northstar{display:inline-flex;align-items:center;gap:7px;margin-top:7px;font-family:var(--mono);
  font-size:10px;letter-spacing:.05em;border:1px solid var(--line2);padding:4px 11px;border-radius:99px;
  color:var(--mut);background:var(--card)}
.northstar i{color:var(--signal);font-style:normal}
.stepper{display:flex;margin:18px 0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.stage{flex:1;padding:11px 14px;border-right:1px solid var(--line);position:relative}
.stage:last-child{border-right:none}
.stage .nm{font-size:12px;font-weight:600;display:flex;align-items:center;gap:6px}
.stage .fl{font-family:var(--mono);font-size:8px;letter-spacing:.08em;color:var(--faint);margin-left:4px}
.stage .ds{font-size:10.5px;color:var(--mut);margin-top:3px;line-height:1.4}
.stage.done .nm{color:var(--grove-deep)}
.stage.now{background:linear-gradient(180deg,var(--signal-faint),var(--card))}
.stage.now .pulse{width:7px;height:7px;border-radius:99px;background:var(--signal);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,91,46,.4)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.stage.lock{opacity:.62}
.goal-grid{display:grid;grid-template-columns:1fr 320px;gap:14px;align-items:start}
body.ai-sidebar .goal-grid{grid-template-columns:1fr}
.report{padding:20px 22px}
.report .rh{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.report .rh .m{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:var(--card2);border:1px solid var(--line)}
.report .rh .m svg{width:26px;height:26px}
.report .rh b{display:block;font-size:13.5px}
.report .rh span{font-size:11px;color:var(--mut)}
.report p{font-size:13.5px;line-height:1.7;color:#3b3930;margin-bottom:10px}
.report p b{color:var(--ink)}
.hl{background:var(--signal-soft);border-radius:3px;padding:0 3px}
.honest{border-left:3px solid var(--warn);background:var(--warn-soft);border-radius:0 var(--r) var(--r) 0;
  padding:10px 13px;font-size:12.5px;line-height:1.6;color:#6d5413;margin:12px 0}
.kr-row{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:14px}
.kr{padding:13px 15px}
.kr .lb{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.kr .v{font-family:var(--serif);font-size:21px;font-weight:600;margin-top:5px}
.kr .v small{font-family:var(--sans);font-size:11px;color:var(--mut);font-weight:500}
.kr .t{font-size:10.5px;color:var(--mut);margin-top:3px}
.chartcard{padding:18px 20px;margin-top:14px}
.legend{display:flex;gap:14px;font-size:11px;color:var(--mut);font-weight:500;margin:8px 0 2px}
.legend i{width:14px;height:3px;border-radius:2px;display:inline-block;vertical-align:middle;margin-right:5px}
.journey{padding:18px 20px;margin-top:14px}
.jtrack{display:flex;margin:16px 2px 4px;position:relative}
.jtrack:before{content:"";position:absolute;top:8px;left:4%;right:4%;height:2px;background:var(--line2)}
.jnode{flex:1;text-align:center;position:relative}
.jnode .d{width:16px;height:16px;border-radius:99px;background:var(--card);border:2.5px solid var(--line2);
  margin:0 auto;position:relative;z-index:2}
.jnode.done .d{border-color:var(--grove);background:var(--grove)}
.jnode.push .d{border-color:var(--signal);background:var(--signal);box-shadow:0 0 0 4px rgba(255,91,46,.2)}
.jnode b{display:block;font-size:10.5px;margin-top:7px}
.jnode span{display:block;font-size:9.5px;color:var(--mut);margin-top:2px;line-height:1.35}
.jsummary{font-size:12px;color:var(--mut);margin-top:14px;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:10px}
.sidecard{padding:16px 17px;margin-bottom:13px}
.sidecard h4{font-size:12px;font-weight:600;margin-bottom:11px;display:flex;align-items:center;gap:7px}
.sidecard h4 svg{width:14px;height:14px;color:var(--mut)}
.approval{border-color:#f3cdb9;box-shadow:0 6px 22px rgba(255,91,46,.13)}
.approval .what{font-size:12.5px;line-height:1.6;color:#3b3930;margin-bottom:12px}
.agentrow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.agentrow:last-child{border:none}
.agentrow .af{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:13px;
  flex:none;background:var(--card2);border:1px solid var(--line)}
.agentrow b{font-size:12px;display:block}
.agentrow span{font-size:10.5px;color:var(--mut)}
.st{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;font-weight:600;
  padding:2px 7px;border-radius:99px;text-transform:uppercase}
.st.live{background:var(--grove-soft);color:var(--grove-deep)}
.st.done{background:var(--card2);color:var(--mut)}
.st.watch{background:var(--info-soft);color:var(--info)}
.connitem{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:12px;font-weight:500}
.connitem i{width:7px;height:7px;border-radius:99px;background:var(--grove)}
.connitem i.off{background:var(--line2)}
.connitem span{margin-left:auto;font-family:var(--mono);font-size:9px;color:var(--faint)}
.guard{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut);padding:5px 0}
.guard b{color:var(--ink)}

/* ---------- journeys ---------- */
.jfilters{display:flex;gap:10px;align-items:center;margin:14px 0;flex-wrap:wrap}
.jfilters select,.jfilters input{border:1px solid var(--line2);border-radius:var(--r);background:var(--card);
  padding:7px 10px;font-size:12.5px}
.jsum{display:flex;gap:14px;align-items:center;padding:10px 16px;margin-bottom:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;color:var(--mut)}
.jsum b{color:var(--ink);font-weight:600}
.jsum .d{width:7px;height:7px;border-radius:99px;display:inline-block;margin-right:4px}
.stream{padding:16px 18px;margin-bottom:12px}
.stream .shead{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.stream .pid{font-family:var(--mono);font-size:12px;font-weight:600}
.tag{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;font-weight:600;padding:2px 7px;
  border-radius:4px;text-transform:uppercase}
.tag.t1{background:var(--signal-soft);color:var(--signal-deep)}
.tag.t2{background:var(--card2);color:var(--mut);border:1px solid var(--line)}
.tag.stall{background:var(--warn-soft);color:var(--warn);margin-left:auto}
.stream .sline{font-size:12px;color:var(--mut);margin:7px 0 2px}
.stream .sline b{color:var(--ink)}
.lever{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:9px;color:var(--signal-deep);
  border:1px solid #f3cdb9;background:var(--signal-faint);border-radius:4px;padding:2px 7px;margin-top:6px}

/* ---------- library ---------- */
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(295px,1fr));gap:13px}
.tpl{padding:16px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:9px;transition:.15s}
.tpl:hover{transform:translateY(-2px);border-color:var(--line2)}
.tpl .t{display:flex;gap:10px;align-items:center}
.tpl .ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex:none}
.tpl h3{font-size:13px;font-weight:600}
.tpl p{font-size:12px;color:var(--mut);line-height:1.55}
.tpl .chips{display:flex;gap:5px;flex-wrap:wrap}
.tpl .flow{font-family:var(--mono);font-size:9px;color:var(--faint)}
.tpl .flow b{color:var(--mut)}
.grouptag{font-family:var(--mono);font-size:9px;letter-spacing:.14em;font-weight:600;padding:4px 10px;border-radius:99px}

/* ---------- connections ---------- */
.conn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:13px}
.conncard{padding:16px 18px}
.conncard .t{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.conncard .ci{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none;color:#fff;font-weight:700;font-size:13px}
.conncard h3{font-size:13.5px;font-weight:600}
.conncard p{font-size:11.5px;color:var(--mut);line-height:1.5;margin-bottom:11px}
.conncard input{width:100%;border:1px solid var(--line2);border-radius:var(--r);padding:7px 10px;
  font-family:var(--mono);font-size:11px;background:var(--paper);margin-bottom:9px}

/* ---------- dashboards ---------- */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.confmix{padding:16px 18px;margin-bottom:14px}
.mixbar{display:flex;height:14px;border-radius:99px;overflow:hidden;margin:10px 0 8px}
.mixlegend{display:flex;gap:16px;font-size:11px;color:var(--mut)}
.pgoal{display:flex;align-items:center;gap:12px;padding:13px 16px;margin-bottom:9px;cursor:pointer}
.pgoal:hover{border-color:var(--line2)}
.pgoal .gm{width:30px;height:30px;border-radius:8px;background:var(--card2);border:1px solid var(--line);
  display:grid;place-items:center}
.pgoal .gm svg{width:20px;height:20px}
.pgoal b{font-size:13px;display:block}
.pgoal span{font-family:var(--mono);font-size:9.5px;color:var(--mut)}
.pgoal .lift{margin-left:auto;font-family:var(--serif);font-size:17px;font-weight:600}

/* ---------- Ask AI panel (sidebar + floating) ---------- */
.ai{display:none;flex-direction:column;background:var(--card);z-index:70}
body.ai-sidebar .ai{display:flex;border-left:1px solid var(--line);height:100vh}
body.ai-floating .ai{display:flex;position:fixed;right:22px;bottom:22px;width:380px;height:560px;
  border:1px solid var(--line2);border-radius:12px;box-shadow:0 18px 60px rgba(22,21,17,.28);overflow:hidden}
.ai-head{display:flex;align-items:center;gap:8px;padding:11px 13px;border-bottom:1px solid var(--line);flex:none}
.ai-head .ttl{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13.5px;flex:1;min-width:0}
.ai-head .ttl svg{width:15px;height:15px;color:var(--signal)}
.ai-head .hb{width:26px;height:26px;border-radius:5px;display:grid;place-items:center;color:var(--mut);position:relative;cursor:pointer}
.ai-head .hb:hover{background:var(--card2);color:var(--ink)}
.ai-head .hb svg{width:14px;height:14px}
.ai-head .newb{font-size:11.5px;color:var(--mut);display:flex;align-items:center;gap:4px;padding:3px 7px;border-radius:5px}
.ai-head .newb:hover{background:var(--card2);color:var(--ink)}
.laymenu{position:absolute;top:32px;right:0;width:150px;background:var(--card);border:1px solid var(--line2);
  border-radius:var(--r-lg);box-shadow:var(--shadow);padding:5px;display:none;z-index:80}
.laymenu.open{display:block}
.laymenu button{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border-radius:5px;font-size:12px;color:var(--ink)}
.laymenu button:hover{background:var(--card2)}
.laymenu button svg{width:13px;height:13px;color:var(--mut)}
.laymenu button .ck{margin-left:auto;color:var(--signal);display:none}
.laymenu button.on .ck{display:block}
.ai-scope{padding:9px 13px;border-bottom:1px solid var(--line);flex:none}
.scopechip{display:inline-flex;align-items:center;gap:6px;font-size:11px;border:1px solid var(--line2);
  border-radius:99px;padding:4px 11px;background:var(--card2);color:var(--mut);max-width:100%}
.scopechip svg{width:12px;height:12px;flex:none}
.scopechip b{color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scopechip .wid{color:var(--signal);cursor:pointer;flex:none}
.ai-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.ai-empty{margin:auto;text-align:center;padding:0 18px}
.ai-empty .m{width:46px;height:46px;margin:0 auto 12px;border-radius:12px;background:var(--card2);
  border:1px solid var(--line);display:grid;place-items:center}
.ai-empty .m svg{width:30px;height:30px}
.ai-empty p{font-size:12.5px;color:var(--mut);line-height:1.65}
.ai-empty p b{color:var(--ink)}
.aimsg{max-width:94%;font-size:12.5px;line-height:1.6}
.aimsg.you{align-self:flex-end;background:var(--ink);color:var(--paper);padding:9px 12px;border-radius:10px 10px 3px 10px}
.aimsg.bot{align-self:flex-start;background:var(--card2);border:1px solid var(--line);padding:10px 13px;
  border-radius:10px 10px 10px 3px}
.aimsg.bot b{color:var(--ink)}
.receipts{margin-top:8px;border-top:1px dashed var(--line2);padding-top:7px;font-family:var(--mono);
  font-size:9.5px;color:var(--mut);line-height:1.7}
.receipts summary{cursor:pointer;color:var(--signal-deep);font-family:var(--sans);font-size:11px;font-weight:500;list-style:none}
.ai-foot{border-top:1px solid var(--line);padding:10px 13px;flex:none}
.ai-foot .r1{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.usedata{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--signal-deep);
  border:1px solid #f3cdb9;background:var(--signal-faint);border-radius:99px;padding:4px 11px;cursor:pointer}
.usedata i{width:7px;height:7px;border-radius:99px;background:var(--signal)}
.tok{font-family:var(--mono);font-size:9.5px;color:var(--faint)}
.ai-input{display:flex;gap:8px}
.ai-input input{flex:1;border:1px solid var(--line2);border-radius:var(--r);background:var(--paper);
  padding:9px 11px;font-size:12.5px;outline:none}
.ai-input input:focus{border-color:var(--signal)}

/* ---------- assistant full page ---------- */
.as-grid{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start;height:calc(100vh - 46px - 52px)}
.as-list{display:flex;flex-direction:column;height:100%;overflow:hidden}
.as-new{margin:12px;border:1.5px dashed var(--line2);border-radius:var(--r-lg);padding:10px;text-align:center;
  color:var(--mut);font-weight:500;font-size:12.5px;cursor:pointer}
.as-new:hover{border-color:var(--signal);color:var(--signal)}
.as-scroll{flex:1;overflow-y:auto;padding:0 8px 12px}
.as-item{padding:10px 10px;border-radius:var(--r);cursor:pointer}
.as-item:hover{background:var(--card2)}
.as-item b{font-size:12px;font-weight:500;display:block;line-height:1.45}
.as-item span{font-size:10px;color:var(--faint)}
.as-thread{display:flex;flex-direction:column;height:100%;overflow:hidden}
.as-thread .ai-body{padding:22px}
.as-thread .ai-empty p{font-size:13px}

/* ---------- equalizer loader (breathing, Mac-light tempo) ---------- */
.eq{display:inline-flex;gap:3px;align-items:center;height:18px}
.eq i{width:4px;border-radius:2px;background:var(--signal);height:6px;
  animation:eqb 2.4s ease-in-out infinite}
.eq i:nth-child(1){animation-delay:0s}.eq i:nth-child(2){animation-delay:.3s}
.eq i:nth-child(3){animation-delay:.6s}.eq i:nth-child(4){animation-delay:.9s}
.eq i:nth-child(5){animation-delay:1.2s}
.eq.g i{background:var(--grove)}
.eq.lg{height:30px}.eq.lg i{width:6px;border-radius:3px}
@keyframes eqb{0%,100%{height:5px;opacity:.45}50%{height:100%;opacity:1}}
.loadingline{display:inline-flex;align-items:center;gap:9px;font-size:12px;color:var(--mut)}

/* ---------- agents / team ---------- */
.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.agentcard{padding:16px 17px;cursor:pointer;transition:.15s;display:flex;flex-direction:column;gap:10px}
.agentcard:hover{transform:translateY(-2px);border-color:var(--line2)}
.agentcard .t{display:flex;align-items:center;gap:11px}
.agentcard .av{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:17px;
  flex:none;background:var(--card2);border:1px solid var(--line)}
.agentcard h3{font-size:13.5px;font-weight:600}
.agentcard .role{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.agentcard p{font-size:12px;color:var(--mut);line-height:1.55}
.agentcard p b{color:var(--ink)}
.stagechip{margin-left:auto;flex:none}
.ministage{display:flex;gap:3px}
.ministage i{height:4px;flex:1;border-radius:2px;background:var(--line)}
.ministage i.on{background:var(--grove)}
.ministage i.now{background:var(--signal)}
.agentcard .foot{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--mut)}
.diagdots{display:inline-flex;gap:3px;margin-left:auto}
.diagdots i{width:7px;height:7px;border-radius:99px;background:var(--grove)}
.diagdots i.warn{background:var(--warn)}

/* ---------- agent detail ---------- */
.queueitem{padding:15px 17px;margin-bottom:11px}
.queueitem .qh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.stars{color:var(--warn);font-size:12px;letter-spacing:1px}
.qtext{font-size:13px;line-height:1.6;color:#3b3930}
.qreply{margin-top:10px;border-left:3px solid var(--grove);background:var(--grove-faint);
  border-radius:0 var(--r) var(--r) 0;padding:10px 13px;font-size:12.5px;line-height:1.6}
.qreply.pending{border-left-color:var(--warn);background:var(--warn-soft)}
.qmeta{font-family:var(--mono);font-size:9px;color:var(--faint);margin-top:8px;display:flex;gap:12px;flex-wrap:wrap}
.qactions{display:flex;gap:8px;margin-top:10px}
.sigtable{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
.sigtable th{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);text-align:left;padding:5px 8px;border-bottom:1px solid var(--line)}
.sigtable td{padding:6px 8px;border-bottom:1px solid var(--line)}
.sigtable td.num{font-family:var(--mono);font-size:11px;text-align:right}
.sigtable tr:last-child td{border-bottom:none}
.scorebig{font-family:var(--serif);font-size:40px;font-weight:600;line-height:1}
.tierchip{font-family:var(--mono);font-size:10px;letter-spacing:.08em;font-weight:600;padding:4px 11px;
  border-radius:5px;background:#f6dcd2;color:#a33912;border:1px solid #eec2b0}
.meter{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin:7px 0 5px}
.meter i{display:block;height:100%;background:var(--grove);border-radius:99px}
.snippet{font-family:var(--mono);font-size:11px;background:#26241e;color:#e8e4d4;border-radius:var(--r);
  padding:11px 13px;line-height:1.8;overflow-x:auto}
.snippet b{color:#ffb08e;font-weight:500}

/* ---------- config ---------- */
.vartable{width:100%;border-collapse:collapse;font-size:12px}
.vartable th{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);text-align:left;padding:7px 10px;border-bottom:1px solid var(--line)}
.vartable td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.vartable td.vn{font-family:var(--mono);font-size:11px;font-weight:500}
.vartable tr:last-child td{border-bottom:none}
.claim{display:inline-block;font-family:var(--mono);font-size:8.5px;padding:2px 7px;border-radius:99px;
  background:var(--card2);border:1px solid var(--line);color:var(--mut);margin:1px 2px 1px 0}
.vok{color:var(--grove-deep);font-weight:600}.vwarn{color:var(--warn);font-weight:600}

/* ---------- dashboard board ---------- */
.stageboard{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin:14px 0}
.stagecol{background:var(--card2);border:1px solid var(--line);border-radius:var(--r-lg);padding:11px}
.stagecol h5{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin-bottom:9px;display:flex;justify-content:space-between}
.stagecol .ac{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;
  font-size:12px;font-weight:500;margin-bottom:7px;display:flex;align-items:center;gap:7px;cursor:pointer}
.stagecol .ac:hover{border-color:var(--line2)}
.stagecol .ac .em{font-size:13px}
.projlink{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;margin-top:10px}
.projlink:hover{border-color:var(--line2)}
.projlink b{font-size:13px}
.projlink .sub2{font-size:11.5px;color:var(--mut)}

/* ---------- library phases (collapsed) ---------- */
details.phase{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
details.phase summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
  padding:14px 18px}
details.phase summary::-webkit-details-marker{display:none}
details.phase summary:hover{background:var(--card2)}
details.phase .ph-note{font-size:12.5px;color:var(--mut)}
details.phase .ph-count{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--faint);
  display:flex;align-items:center;gap:10px}
details.phase .chev{transition:.15s;color:var(--faint)}
details.phase[open] .chev{transform:rotate(90deg)}
.librows{border-top:1px solid var(--line)}
.librow{display:grid;grid-template-columns:34px 210px 1fr auto;gap:12px;align-items:center;
  padding:11px 18px;border-bottom:1px solid var(--line);cursor:pointer}
.librow:last-child{border-bottom:none}
.librow:hover{background:var(--card2)}
.librow .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:14px}
.librow b{font-size:13px;display:block}
.librow .train{font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.librow p{font-size:12px;color:var(--mut);line-height:1.5}
.librow .chips{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:280px}

/* ---------- workboard ---------- */
.worktable{width:100%;border-collapse:collapse;font-size:12.5px}
.worktable th{font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);text-align:left;padding:9px 12px;border-bottom:1px solid var(--line2)}
.worktable td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.worktable tr:last-child td{border-bottom:none}
.worktable tr:hover td{background:var(--card2)}
.worktable .g{font-family:var(--mono);font-size:9.5px;color:var(--mut);white-space:nowrap}
.worktable .a{white-space:nowrap;font-weight:500}
.worktable .a .em{margin-right:5px}
.worktable .d b{display:block;font-size:12.5px;margin-bottom:2px}
.worktable .d span{font-size:11.5px;color:var(--mut);line-height:1.5}
.worktable .i{font-size:11px;color:var(--mut);max-width:220px;line-height:1.5}
.worktable td:last-child{text-align:right;white-space:nowrap}

/* ---------- player journeys (multi-agent lanes) ---------- */
.pj-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.pj-head .pid{font-family:var(--mono);font-size:13px;font-weight:600}
.lanes{padding:6px 18px 14px}
.lane{display:grid;grid-template-columns:190px 1fr;align-items:center;min-height:46px;border-bottom:1px dashed var(--line)}
.lane:last-child{border-bottom:none}
.lane .lname{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500}
.lane .lname .em{width:26px;height:26px;border-radius:7px;background:var(--card2);border:1px solid var(--line);
  display:grid;place-items:center;font-size:13px}
.lane .lname span{font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:var(--faint);display:block}
.ltrack{position:relative;height:30px;background:linear-gradient(to right,transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px)) no-repeat;background-size:0}
.ltrack:before{content:"";position:absolute;top:50%;left:0;right:0;height:2px;background:var(--line)}
.lev{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:99px;
  background:var(--grove);border:2px solid var(--card);box-shadow:0 0 0 1px var(--line2);cursor:default}
.lev.sig{background:var(--signal)}
.lev.mut{background:var(--line2)}
.levlab{position:absolute;top:100%;transform:translateX(-50%);font-size:9px;color:var(--mut);
  white-space:nowrap;margin-top:1px}
.axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:8.5px;color:var(--faint);
  padding:8px 18px 0;margin-left:190px}

/* ---------- the two loops: recipe instrument, loop gauge, odometer ---------- */
.recipe{padding:18px 22px;position:relative}
.recipe svg{width:100%}
.recipe .flowrail{stroke-dasharray:6 5;animation:railflow 1.6s linear infinite}
@keyframes railflow{to{stroke-dashoffset:-22}}
.odometer{display:flex;gap:0;align-items:stretch;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card);box-shadow:var(--shadow);overflow:hidden;margin:14px 0}
.odometer .od{flex:1;padding:12px 16px;border-right:1px solid var(--line)}
.odometer .od:last-child{border-right:none}
.odometer .od .lb{font-family:var(--mono);font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.odometer .od .v{font-family:var(--serif);font-size:20px;font-weight:600;margin-top:3px}
.odometer .od .v small{font-family:var(--sans);font-size:10.5px;color:var(--mut);font-weight:500}
.loopgauge{display:flex;align-items:center;gap:10px}
.loopgauge svg{width:64px;height:64px;flex:none}
.loopgauge .lg-legend{font-size:10px;color:var(--mut);line-height:1.6}
.loopgauge .lg-legend i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:4px}

/* phase tags — LAUNCH green · GROW indigo · EARN gold · SUPPORT signal · OPERATE violet */
.phtag{display:inline-block;font-family:var(--mono);font-size:8px;letter-spacing:.08em;font-weight:600;
  padding:2px 7px;border-radius:4px;text-transform:uppercase}
.ph-launch{background:#e0edda;color:#2e7d4f}
.ph-grow{background:#e2e9f5;color:#2b5fb8}
.ph-earn{background:#f6ecd0;color:#a16207}
.ph-support{background:#fde8df;color:#e04a1f}
.ph-operate{background:#eae3f8;color:#6d4fc0}

/* misc */
.tabsrow{display:flex;gap:2px;border:1px solid var(--line);background:var(--card);border-radius:var(--r);
  padding:3px;width:max-content;margin-bottom:16px}
.tabsrow button{padding:6px 13px;border-radius:4px;font-size:12px;color:var(--mut);font-weight:500}
.tabsrow button.on{background:var(--card2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;border:3px solid var(--paper)}
@media(max-width:1100px){.app{grid-template-columns:1fr}.sb{display:none}body.ai-sidebar .app{grid-template-columns:1fr}}