/* Diego apps — shared design tokens v2. Copied into each app; set --ac per app on :root[data-app]. */
:root{
  color-scheme:dark light;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",system-ui,"Segoe UI",Roboto,sans-serif;
  --bg:#08090b;--bg2:#0f1114;--card:#16181c;--card2:#1e2126;--card3:#272b31;
  --tx:#f4f5f7;--tx2:#b4bac4;--mu:#8a919c;--bd:rgba(255,255,255,.08);--bd2:rgba(255,255,255,.14);
  --ok:#34d399;--warn:#fbbf24;--bad:#f87171;--info:#60a5fa;
  --glass:rgba(18,20,24,.72);--shadow:0 1px 0 rgba(255,255,255,.04) inset,0 8px 24px rgba(0,0,0,.35);
  --r-s:12px;--r:16px;--r-l:20px;--r-xl:28px;
  --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:20px;--sp6:24px;--sp8:32px;
  --t-xs:12px;--t-s:13px;--t-m:15px;--t-b:17px;--t-l:22px;--t-xl:28px;--t-xxl:40px;--t-hero:56px;
  --ease:cubic-bezier(.2,.8,.2,1);--dur:.22s;
  --tab-h:64px;--sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom);
  --ac:#ff6a3d;--ac-ink:#1a0a04;--ac-soft:color-mix(in srgb,var(--ac) 16%,transparent);
}
@media (prefers-color-scheme:light){:root{
  --bg:#f2f2f7;--bg2:#e9e9ef;--card:#ffffff;--card2:#f2f3f6;--card3:#e6e8ec;
  --tx:#0b0c0f;--tx2:#3c4049;--mu:#6b7280;--bd:rgba(0,0,0,.07);--bd2:rgba(0,0,0,.13);
  --ok:#059669;--warn:#b45309;--bad:#dc2626;--info:#2563eb;
  --glass:rgba(255,255,255,.78);--shadow:0 1px 2px rgba(0,0,0,.05),0 6px 20px rgba(0,0,0,.06);
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:var(--t-m)/1.4 var(--font);-webkit-font-smoothing:antialiased;
  padding:var(--sat) 0 calc(var(--tab-h) + var(--sab) + 12px);overscroll-behavior-y:none}
.num,.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
h1,h2,h3{margin:0;letter-spacing:-.02em}
.mu{color:var(--mu);font-size:var(--t-s)}.tx2{color:var(--tx2)}
.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}.ac{color:var(--ac)}
.row{display:flex;gap:var(--sp2);align-items:center}.sp{flex:1;min-width:0}
/* app bar */
.appbar{position:sticky;top:0;z-index:6;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
  padding:calc(var(--sp3)) var(--sp5) var(--sp2);background:linear-gradient(var(--bg) 60%,transparent)}
.appbar h1{font-size:var(--t-xl);font-weight:800}
.eyebrow{font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
/* cards */
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r-l);padding:var(--sp4);margin:var(--sp3) 0;box-shadow:var(--shadow)}
.card h2{font-size:var(--t-b);font-weight:700;margin-bottom:6px}.card h3{font-size:var(--t-m);font-weight:650}
.sec{margin:var(--sp6) 4px var(--sp2);font-size:var(--t-s);font-weight:650;color:var(--mu);text-transform:uppercase;letter-spacing:.05em}
/* buttons */
button{font:inherit;color:inherit;background:var(--card2);border:1px solid var(--bd);border-radius:var(--r-s);padding:10px 14px;min-height:44px;cursor:pointer;
  transition:transform .12s var(--ease),background var(--dur),opacity var(--dur)}
button:active{transform:scale(.97)}
button.pri{background:var(--ac);border-color:transparent;color:var(--ac-ink);font-weight:700}
button.big{width:100%;min-height:56px;font-size:var(--t-b);border-radius:var(--r)}
button.ghost{background:transparent;border-color:transparent;color:var(--ac)}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-xs);font-weight:600;padding:4px 10px;border-radius:99px;background:var(--card2);color:var(--mu);white-space:nowrap}
.pill.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.pill.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.pill.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}
.pill.ac{color:var(--ac);background:var(--ac-soft)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:36px;padding:6px 14px;border-radius:99px;font-size:var(--t-s);font-weight:600;background:var(--card2);border:1px solid var(--bd)}
.chip.on{background:var(--tx);color:var(--bg);border-color:transparent}
.seg{display:flex;gap:2px;padding:3px;background:var(--card2);border-radius:var(--r-s);margin:8px 0}
.seg button{flex:1;min-height:36px;padding:6px 0;border:0;background:transparent;border-radius:9px;font-size:var(--t-s);font-weight:600;color:var(--tx2)}
.seg button.on{background:var(--card3);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.25)}
/* form */
input,select,textarea{font:inherit;color:var(--tx);background:var(--card2);border:1px solid var(--bd);border-radius:var(--r-s);padding:12px;width:100%;min-height:48px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ac);outline-offset:-1px}
label{display:block;margin:12px 0 6px;font-size:var(--t-s);color:var(--mu);font-weight:550}
/* tab bar */
.tabbar{position:fixed;z-index:7;left:0;right:0;bottom:0;display:flex;padding:6px 8px calc(6px + var(--sab));background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-top:1px solid var(--bd)}
.tabbar button{flex:1;border:0;background:none;border-radius:12px;min-height:52px;padding:4px 0;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--mu)}
.tabbar svg{width:26px;height:26px}.tabbar span{font-size:11px;font-weight:600}
.tabbar button.on{color:var(--ac)}
.tabbar[hidden]{display:none}
/* bottom sheet */
.scrim{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;animation:scrimin var(--dur) var(--ease)}
@keyframes scrimin{from{background:transparent}}
.scrim[hidden]{display:none}
.sheet{width:100%;max-height:88vh;overflow:auto;background:var(--bg2);border-radius:var(--r-xl) var(--r-xl) 0 0;padding:10px var(--sp5) calc(var(--sp5) + var(--sab));
  animation:up .32s var(--ease);box-shadow:0 -10px 40px rgba(0,0,0,.4)}
.sheet::before{content:"";display:block;width:38px;height:5px;border-radius:3px;background:var(--bd2);margin:0 auto 14px}
.sheet h2{font-size:var(--t-l);margin-bottom:8px}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rise{animation:rise .35s var(--ease) both}
.empty{text-align:center;padding:40px 20px;color:var(--mu)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}