:root{
  --svg-barrel:#191A20;--svg-barrel2:#1E1F26;--svg-window:#131419;--svg-line:#5A5C68;
  --svg-text:#8E90A0;--svg-metal:#B4B6C2;--svg-hub:#4A4C57;--svg-groove:#3A3C47;--svg-marker:#FFE9C2;
  --void:#15161A;--scale:#1E1F25;--scale-2:#262831;--oxide:#3A3C47;
  --ash:#B4B6C2;--dim:#8E90A0;--bone:#F4F3F1;--read:#D8D9E0;
  --blaze:#F26419;--flare:#FFA62B;--ember:#C43A0E;--well:#101116;
  --display:'Archivo Black',Impact,sans-serif;--body:'Karla',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;--r:3px;--gut:clamp(16px,3vw,28px);
}
html[data-theme="light"]{
  --svg-barrel:#FFFFFF;--svg-barrel2:#F7F5F1;--svg-window:#F0EEE9;--svg-line:#A8A59D;
  --svg-text:#6A6C7C;--svg-metal:#9B9992;--svg-hub:#8A887F;--svg-groove:#D9D6CF;--svg-marker:#7A3F00;
  --void:#F5F3EF;--scale:#FFFFFF;--scale-2:#F0EEE9;--oxide:#DFDCD5;
  --ash:#5A5C68;--dim:#6A6C7C;--bone:#16171C;--read:#3D3F49;
  --blaze:#C2450C;--flare:#9A5500;--ember:#A8320B;--well:#FBFAF8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--void);color:var(--bone);font-family:var(--body);font-size:18px;
line-height:1.55;-webkit-font-smoothing:antialiased;padding:0 var(--gut) 64px}
.wrap{max-width:1180px;margin:0 auto}
.wrap--narrow{max-width:480px}
.wrap--medium{max-width:640px}

.topnav{display:flex;align-items:center;gap:14px;padding:18px 0;border-bottom:1px solid var(--oxide)}
.wordmark{font-family:var(--display);font-size:21px;color:var(--bone);text-decoration:none;display:flex;align-items:center;gap:9px}
.wordmark b{color:var(--blaze);font-weight:400}
.wordmark img{height:30px;width:auto;border-radius:3px}

.acctlink{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ash);text-decoration:none;padding:8px 4px}
.acctlink:hover{color:var(--bone)}

.acctsubnav{display:flex;gap:4px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--oxide)}
.acctsubnav a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ash);text-decoration:none;padding:8px 13px;border-radius:var(--r);border:1px solid transparent}
.acctsubnav a:hover{color:var(--bone);border-color:var(--oxide)}
.acctsubnav a.here{color:var(--blaze);border-color:var(--blaze);background:rgba(242,100,25,.08)}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.themebtn{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
border-radius:50%;cursor:pointer;background:none;border:1px solid var(--oxide);color:var(--ash);padding:0}
.themebtn:hover{border-color:var(--blaze);color:var(--bone)}
.themebtn svg{width:17px;height:17px;fill:currentColor}
.themebtn .i-sun{display:none}
html[data-theme="light"] .themebtn .i-sun{display:block}
html[data-theme="light"] .themebtn .i-moon{display:none}
.navlink{font-family:var(--mono);font-size:13px;color:var(--ash);text-decoration:none;margin-left:16px}
.navlink:hover{color:var(--blaze)}

.mark{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ash);margin:34px 0 14px}
h1{font-family:var(--display);font-weight:400;font-size:clamp(28px,5vw,42px);line-height:1;letter-spacing:-.02em;margin:0 0 10px}
h1 em{font-style:normal;color:var(--blaze)}
.lede{margin:0 0 8px;color:var(--read);font-size:16.5px}

.form{background:var(--scale);border:1px solid var(--oxide);border-radius:var(--r);padding:28px;margin-top:24px}
.fgrid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.f--wide{grid-column:1/-1}
.f{display:flex;flex-direction:column;gap:6px}
.f label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--read)}
.f label i{color:var(--blaze);font-style:normal}
.f input{font-family:var(--body);font-size:16px;background:var(--well);color:var(--bone);
border:1px solid var(--oxide);border-radius:var(--r);padding:12px;width:100%}
.f input:focus{outline:none;border-color:var(--blaze)}
.f small{color:var(--dim);font-size:12.5px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.check{display:flex;gap:12px;align-items:flex-start;background:var(--well);border:1px solid var(--oxide);border-radius:var(--r);padding:15px}
.check input{margin-top:3px;flex:0 0 auto;width:17px;height:17px;accent-color:var(--blaze)}
.check label{font-size:14px;color:var(--read);line-height:1.55}
.submitbtn{margin-top:6px;width:100%;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
background:var(--blaze);color:#fff;border:none;border-radius:var(--r);padding:14px;cursor:pointer;font-weight:500}
.submitbtn:hover{filter:brightness(1.1)}
.submitbtn:disabled{background:var(--oxide);color:var(--dim);cursor:not-allowed;filter:none}
.err{background:rgba(196,58,14,.12);border:1px solid var(--ember);border-radius:var(--r);padding:14px 16px;margin:20px 0;font-size:14.5px;color:var(--flare)}
.err ul{margin:8px 0 0;padding-left:20px}
.ok{background:rgba(58,125,58,.12);border:1px solid #3a7d3a;border-radius:var(--r);padding:14px 16px;margin:20px 0;font-size:14.5px;color:#7dc47d}
.formfoot{margin-top:18px;text-align:center;font-size:14.5px;color:var(--read)}
.formfoot a{color:var(--flare)}

/* ---- dashboard ---- */
.dgrid{display:grid;gap:18px;grid-template-columns:1fr;margin-top:26px}
@media(min-width:640px){.dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.dgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dcard{background:var(--scale);border:1px solid var(--oxide);border-radius:var(--r);padding:22px}
.dcard h2{font-family:var(--display);font-size:19px;margin:0 0 4px}
.dcard p{color:var(--dim);font-size:14px;margin:0 0 16px}
.dcard--wide{grid-column:1/-1}
.orow{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--oxide);font-size:14.5px}
.orow:last-child{border-bottom:none}
.orow b{color:var(--bone)}
.otag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:var(--scale-2);
color:var(--ash);padding:3px 9px;border-radius:var(--r)}
.empty{color:var(--dim);font-size:14.5px;padding:20px 0;text-align:center}
.soon{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
background:var(--scale-2);border:1px solid var(--oxide);color:var(--dim);padding:3px 9px;border-radius:var(--r);margin-bottom:10px}
.danger{margin-top:8px;background:none;border:1px solid var(--ember);color:var(--ember);border-radius:var(--r);
padding:9px 14px;font-family:var(--mono);font-size:12px;cursor:pointer}
.danger:hover{background:rgba(196,58,14,.1)}

.foot{margin-top:44px;padding-top:20px;border-top:1px solid var(--oxide);font-size:12.5px;color:var(--dim)}
.foot a{color:var(--flare)}
@media(min-width:900px){body{font-size:19px}}


/* ---------- protocols & tracker ---------- */
.addbtn{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
background:var(--blaze);color:#fff;border:none;border-radius:var(--r);padding:12px 20px;
cursor:pointer;text-decoration:none;display:inline-block;margin-bottom:24px}
.addbtn:hover{filter:brightness(1.1)}
.plist{display:grid;gap:14px}
.pcard{background:var(--scale);border:1px solid var(--oxide);border-radius:var(--r);padding:20px;
display:flex;align-items:center;gap:20px;flex-wrap:wrap;text-decoration:none;color:inherit;transition:border-color .15s}
.pcard:hover{border-color:var(--blaze)}
.pcard__main{flex:1;min-width:200px}
.pcard__label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--flare);margin-bottom:4px}
.pcard__n{font-family:var(--display);font-size:21px;margin-bottom:4px}
.pcard__d{color:var(--dim);font-size:14px}
.pcard__bar{flex:0 0 200px}
.barhead{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 14px;font-family:var(--mono);font-size:11px;color:var(--dim);margin-bottom:6px}
.barhead b{color:var(--bone)}
.bar{height:8px;background:var(--well);border-radius:4px;overflow:hidden}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--ember),var(--flare))}
.pcard__cta{font-family:var(--mono);font-size:12px;color:var(--blaze);white-space:nowrap}
.warn{display:inline-block;font-family:var(--mono);font-size:10px;background:rgba(196,58,14,.15);color:var(--flare);
border:1px solid var(--ember);padding:3px 8px;border-radius:var(--r);margin-top:6px}

.pbreadcrumb{font-family:var(--mono);font-size:12px;color:var(--dim);margin:0 0 18px}
.pbreadcrumb a{color:var(--dim);text-decoration:none}
.pbreadcrumb a:hover{color:var(--blaze)}

.vialcard{background:var(--scale);border:1px solid var(--ember);border-radius:var(--r);padding:26px;margin-bottom:20px}
.vialcard__label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--flare)}
.vialcard__big{font-family:var(--display);font-size:52px;color:var(--flare);line-height:1}
.vialcard__unit{font-family:var(--mono);font-size:14px;color:var(--dim)}
.vialcard__msg{font-size:16px;color:var(--read);max-width:60ch;margin:14px 0}
.barlabel{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 14px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--oxide);
border:1px solid var(--oxide);border-radius:var(--r);overflow:hidden;margin-top:20px}
.stat{background:var(--scale);padding:14px 16px}
.stat__k{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.stat__v{font-family:var(--mono);font-size:18px;font-weight:500;color:var(--bone)}

.section{margin-top:32px}
.section h2{font-family:var(--display);font-size:22px;margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid var(--oxide)}
.logrow{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--oxide);font-size:14.5px}
.logrow b{color:var(--bone)}
.logrow span{color:var(--dim);font-family:var(--mono);font-size:13px}

.statrow{display:flex;flex-wrap:wrap;gap:1px;background:var(--oxide);border:1px solid var(--oxide);border-radius:var(--r);overflow:hidden;margin-bottom:24px}
.statrow .stat{flex:1;min-width:110px;text-align:center}
.statrow .stat__v{font-family:var(--display);font-size:22px;color:var(--flare)}
.chart{height:160px;display:flex;align-items:flex-end;gap:8px;padding:0 4px;margin:20px 0}
.chart .col{flex:1;height:140px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}
.chart .cbar{width:100%;background:linear-gradient(180deg,var(--flare),var(--ember));border-radius:3px 3px 0 0;min-height:3px}
.chart .lbl{font-family:var(--mono);font-size:10px;color:var(--dim)}

.inlineform{background:var(--well);border:1px solid var(--oxide);border-radius:var(--r);padding:20px;margin-top:16px}
.inlineform .fgrid{margin-bottom:14px}
.smallbtn{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
background:var(--blaze);color:#fff;border:none;border-radius:var(--r);padding:10px 16px;cursor:pointer}
.smallbtn:hover{filter:brightness(1.1)}
.ghostbtn{font-family:var(--mono);font-size:12px;background:none;border:1px solid var(--oxide);color:var(--ash);
border-radius:var(--r);padding:9px 14px;cursor:pointer;text-decoration:none;display:inline-block}
.ghostbtn:hover{border-color:var(--blaze);color:var(--bone)}
.empty2{color:var(--dim);font-size:14.5px;text-align:center;padding:50px 20px;background:var(--scale);
border:1px dashed var(--oxide);border-radius:var(--r)}

/* ---------- tracker sidebar ---------- */
.split2{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:960px){.split2{grid-template-columns:minmax(0,1fr) 320px;align-items:start}}
.sidecard{background:var(--scale);border:1px solid var(--oxide);border-radius:var(--r);padding:22px;margin-bottom:18px}
.sidecard h3{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--flare);margin:0 0 14px;font-weight:500}
.sidecard__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;padding:9px 0;border-bottom:1px solid var(--oxide);font-size:13.5px}
.sidecard__row:last-child{border-bottom:none}
.sidecard__row span:first-child{color:var(--dim);font-family:var(--mono);font-size:11px}
.sidecard__row span:last-child{color:var(--bone);font-family:var(--mono);font-weight:500}
.sidecard p{font-size:14px;color:var(--read);line-height:1.6;margin:0 0 12px}
.sidecard__link{display:block;text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;background:var(--blaze);color:#fff;text-decoration:none;border-radius:var(--r);
  padding:11px;margin-top:6px}
.sidecard__link:hover{filter:brightness(1.1)}
.sidecard__link--ghost{background:none;border:1px solid var(--oxide);color:var(--ash)}
.sidecard__link--ghost:hover{border-color:var(--blaze);color:var(--bone);filter:none}
.sidecard__tag{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--scale-2);color:var(--dim);padding:3px 8px;border-radius:var(--r);margin-bottom:10px}


/* ---------- dose device graphic in the sidebar ---------- */
.devicewrap{background:var(--well);border:1px solid var(--oxide);border-radius:var(--r);
  padding:14px 12px 8px;margin-bottom:14px}
.devicewrap svg{display:block;width:100%;height:auto}
.devicelabel{text-align:center;font-family:var(--mono);font-size:12px;color:var(--flare);
  margin:6px 0 2px}
.unitnote{font-size:12.5px;color:var(--dim);line-height:1.55;margin:10px 0 0;padding-top:10px;
  border-top:1px solid var(--oxide)}
.unitnote b{color:var(--read);font-weight:500}

/* ---------- pen/syringe toggle (device card) ---------- */
.variants{display:flex;flex-wrap:wrap;gap:6px}
.vbtn{font-family:var(--mono);font-size:12px;background:var(--scale-2);border:1px solid var(--oxide);
  color:var(--read);padding:7px 16px;border-radius:var(--r);cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.vbtn:hover{border-color:var(--blaze);color:var(--bone)}
.vbtn.on{background:var(--blaze);border-color:var(--blaze);color:#fff;font-weight:500}

/* ---------- free-for-now banner ---------- */
.freebanner{display:block;text-decoration:none;margin:24px 0;padding:22px 26px;border-radius:var(--r);
  background:linear-gradient(135deg,var(--ember),var(--blaze) 55%,var(--flare));
  box-shadow:0 8px 28px rgba(242,100,25,.3);transition:transform .15s,box-shadow .15s}
.freebanner:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(242,100,25,.42)}
.freebanner__tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;background:rgba(21,22,26,.28);color:#fff;padding:4px 11px;
  border-radius:var(--r);margin-bottom:10px}
.freebanner__h{display:block;font-family:var(--display);font-size:clamp(19px,3vw,24px);
  letter-spacing:-.01em;color:#15161A;line-height:1.2;margin-bottom:6px}
.freebanner__s{display:block;font-size:14.5px;color:rgba(21,22,26,.82);line-height:1.5;max-width:65ch}