/* PharmaSim shared design tokens and base components (play.html and index.html). */
:root{
  --bg:#EDEFF3; --panel:#FFFFFF; --panel2:#F5F6F9; --ink:#121826; --mut:#5A6376; --line:#E0E3EA; --line2:#CDD2DC;
  --accent:#3447D1; --accent-ink:#FFFFFF; --accent-soft:#E8EBFD;
  --up:#0E8A5E; --down:#D0405A; --warn:#C27400; --gold:#C8961A; --hl:#FFF5D4;
  --bar:#0B1220; --bar2:#131C2E; --bar-ink:#E8ECF4; --bar-mut:#8C97AD; --bar-line:#223049;
  --onc:#E0663F; --imm:#2F80D0; --cns:#8559D6; --cv:#D0405A; --endo:#D69A12; --inf:#1C9A7A; --vac:#5B9A33; --oth:#6E7891;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 4px 14px rgba(16,24,40,.05); --shadow-lg:0 30px 80px rgba(8,12,24,.35);
  --r:14px; --r-sm:9px;
  --ui:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace; --serif:"Fraunces",Georgia,serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#080C13; --panel:#111722; --panel2:#161D2A; --ink:#E6EAF2; --mut:#8B95AA; --line:#212A39; --line2:#2E394C;
  --accent:#7D8BFF; --accent-ink:#0A0F1E; --accent-soft:#1B2142; --up:#34C98B; --down:#FF6B81; --warn:#F2A93B; --gold:#E7B84A; --hl:#2A2615;
  --bar:#05080E; --bar2:#0D1320; --bar-line:#1A2335; --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#080C13; --panel:#111722; --panel2:#161D2A; --ink:#E6EAF2; --mut:#8B95AA; --line:#212A39; --line2:#2E394C;
  --accent:#7D8BFF; --accent-ink:#0A0F1E; --accent-soft:#1B2142; --up:#34C98B; --down:#FF6B81; --warn:#F2A93B; --gold:#E7B84A; --hl:#2A2615;
  --bar:#05080E; --bar2:#0D1320; --bar-line:#1A2335; --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 var(--ui);padding-inline:16px;padding-block:0 56px;-webkit-font-smoothing:antialiased}
button,select,input{font:inherit;color:inherit}
select,input[type=number]{background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:5px 8px}
input[type=range]{accent-color:var(--accent)}
a{color:var(--accent);text-underline-offset:2px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.up{color:var(--up)} .down{color:var(--down)} .mut{color:var(--mut)} .warn{color:var(--warn)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* buttons */
a.btn{text-decoration:none}
.btn{border:1px solid var(--line2);background:var(--panel);border-radius:10px;padding:8px 14px;cursor:pointer;font-weight:600;transition:transform .08s,border-color .15s,background .15s;display:inline-flex;align-items:center;gap:6px}
.btn:hover:not([aria-disabled="true"]):not([disabled]){border-color:var(--accent)}
.btn:active:not([aria-disabled="true"]){transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 30%,transparent)}
.btn.primary:hover:not([aria-disabled="true"]){background:color-mix(in srgb,var(--accent) 88%,#000)}
.btn.good{background:var(--up);border-color:var(--up);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--up) 28%,transparent)}
.btn.small{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn.ghost{background:transparent}
.btn[aria-disabled="true"],.btn[disabled]{opacity:.45;cursor:not-allowed}
/* cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-width:0}
.card>h2{font:600 11.5px var(--ui);letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin:0;padding:13px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.card>h2>span:first-child{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.card>h2>span:first-child::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--dot,var(--accent))}
.pad{padding:16px}
.note{font-size:12.5px;color:var(--mut);margin:0}
/* dark ticker bar */
.tbar{position:sticky;top:0;z-index:20;margin-inline:-16px;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:linear-gradient(180deg,var(--bar),var(--bar2));color:var(--bar-ink);border-bottom:1px solid var(--bar-line);box-shadow:0 8px 24px rgba(5,8,14,.18)}
.tbar a{color:#AFC0FF}
.logo{display:inline-flex;align-items:center;gap:9px;font:600 19px/1 var(--serif);letter-spacing:-.01em;color:var(--bar-ink);text-decoration:none}
.logo i{width:26px;height:26px;border-radius:8px;background:conic-gradient(from 210deg,#7D8BFF,#34C98B,#F2A93B,#FF6B81,#7D8BFF);display:grid;place-items:center;font:700 13px var(--ui);font-style:normal;color:#0B1220}
.tbar .btn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:var(--bar-ink)}
.tbar .btn:hover:not([aria-disabled="true"]){border-color:#AFC0FF;background:rgba(255,255,255,.1)}
.tbar .btn.primary{background:#7D8BFF;border-color:#7D8BFF;color:#0A0F1E;box-shadow:0 6px 18px rgba(125,139,255,.35)}
.tbar .btn.primary:hover:not([aria-disabled="true"]){background:#98A3FF}
.tbar .up{color:#4ADE9B}.tbar .down{color:#FF7D90}
/* tables */
table{border-collapse:collapse;width:100%}
td,th{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right}
th{font:600 10.5px var(--ui);letter-spacing:.07em;text-transform:uppercase;color:var(--mut);background:var(--panel2)}
td:first-child,th:first-child{text-align:left}
tbody tr:hover td{background:color-mix(in srgb,var(--accent) 4%,transparent)}
/* monogram */
.mono{--m:var(--accent);width:38px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font:700 10px/1 var(--ui);letter-spacing:-.01em;color:#fff;background:linear-gradient(135deg,var(--m),color-mix(in srgb,var(--m) 60%,#000))}
.mono.sm{width:30px;height:22px;border-radius:6px;font-size:8px}