/* style.css — Peptide Dose Lab */
*{ box-sizing:border-box; }
:root{
  --bg:#0b0f1a;
  --bg2:#0f1525;
  --card:#141c2e;
  --card2:#1a2438;
  --border:#233048;
  --text:#e7eef7;
  --muted:#8aa0b8;
  --accent:#34e0d3;
  --accent2:#5b8cff;
  --warn:#ff6b8b;
  --good:#7be88a;
  --liq:#34e0d3; --liq2:#34e0d3;
  --glass-edge:rgba(180,210,255,0.35);
  --cap:#3a4a66; --cap2:#6b7a96;
  --label-bg:rgba(255,255,255,0.06); --label-edge:rgba(255,255,255,0.12); --label-text:#cdd6e3;
  --tick:rgba(220,230,245,0.7);
  --flange:#8a99b8; --plunger:#5b6b8a; --hub:#44557a; --needle:#cdd6e3;
  --shadow:0 10px 30px -10px rgba(0,0,0,0.6);
}
[data-theme="light"]{
  --bg:#f3f6fb;
  --bg2:#ffffff;
  --card:#ffffff;
  --card2:#f4f7fc;
  --border:#dbe3ee;
  --text:#1a2438;
  --muted:#5a6b80;
  --accent:#0aa89c;
  --accent2:#3b6bff;
  --warn:#e0345c;
  --good:#1c9a52;
  --glass-edge:rgba(40,60,90,0.3);
  --cap:#6b7a96; --cap2:#3a4a66;
  --label-bg:rgba(0,0,0,0.03); --label-edge:rgba(0,0,0,0.1); --label-text:#1a2438;
  --tick:rgba(40,60,90,0.55);
  --flange:#5a6b80; --plunger:#3a4a66; --hub:#8a99b8; --needle:#3a4a66;
  --shadow:0 10px 24px -12px rgba(40,60,90,0.18);
}
html,body{ margin:0; padding:0; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Space Grotesk",Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg),var(--bg2) 40%);
  color:var(--text);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{ margin:0; }
button,input,select,textarea{ font-family:inherit; color:inherit; }

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; gap:12px;
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg, rgba(11,15,26,0.95), rgba(11,15,26,0.7));
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
[data-theme="light"] .topbar{ background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.7)); }
.brand{ display:flex; align-items:center; gap:12px; }
.logo{ width:36px; height:36px; }
h1{ font-family:"Space Grotesk",sans-serif; font-size:18px; font-weight:700; letter-spacing:-0.02em; }
.tag{ font-size:11px; color:var(--muted); letter-spacing:0.04em; }
.icon-btn{
  background:var(--card); border:1px solid var(--border); color:var(--text);
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; cursor:pointer;
  transition:transform .15s, border-color .15s;
}
.icon-btn:hover{ transform:translateY(-1px); border-color:var(--accent); }
.icon-btn svg{ width:20px; height:20px; }
.icon-btn .moon{ display:none; }
[data-theme="light"] .icon-btn .sun{ display:none; }
[data-theme="light"] .icon-btn .moon{ display:block; }

.tabs{
  display:flex; gap:4px; padding:8px 12px; overflow-x:auto;
  border-bottom:1px solid var(--border);
  position:sticky; top:65px; z-index:9;
  background:var(--bg);
}
.tab{
  background:transparent; border:none; color:var(--muted);
  padding:10px 14px; border-radius:10px 10px 0 0; cursor:pointer;
  font-size:13px; font-weight:600; white-space:nowrap;
  border-bottom:2px solid transparent;
  display:flex; align-items:center; gap:6px;
}
.tab:hover{ color:var(--text); }
.tab.active{ color:var(--accent); border-bottom-color:var(--accent); }
.badge{
  background:var(--accent); color:#06241f; font-size:10px; font-weight:700;
  padding:1px 7px; border-radius:999px; min-width:18px; text-align:center;
}
[data-theme="light"] .badge{ color:#fff; background:var(--accent); }

main{ max-width:1080px; margin:0 auto; padding:16px; }
.tab-panel{ display:none; animation:fade .25s ease; }
.tab-panel.active{ display:block; }
@keyframes fade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:18px; box-shadow:var(--shadow);
}
.card-title{ font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:12px; }
.card-title.mt{ margin-top:20px; }

.calc-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media (max-width:880px){ .calc-grid{ grid-template-columns:1fr; } }

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.field > span{ font-size:12px; color:var(--muted); font-weight:500; }
.field > span small{ color:var(--muted); opacity:0.7; font-weight:400; }
.field.grow{ flex:1; }
.row{ display:flex; gap:10px; }
.row .field{ flex:1; }
.input-unit{
  display:flex; align-items:stretch; border:1px solid var(--border); border-radius:10px; overflow:hidden;
  background:var(--card2); transition:border-color .15s;
}
.input-unit:focus-within{ border-color:var(--accent); }
.input-unit input{
  background:transparent; border:none; outline:none; padding:11px 12px; width:100%;
  font-size:15px; font-weight:600;
}
.input-unit .unit, .mini-select{
  background:var(--bg); border:none; border-left:1px solid var(--border);
  padding:0 10px; font-size:12px; color:var(--muted); font-weight:600;
}
select{ background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:11px 12px; font-size:14px; cursor:pointer; outline:none; }
select:focus{ border-color:var(--accent); }

.vial-pair{ display:flex; gap:14px; justify-content:center; margin:8px 0 4px; }
.vial-wrap{ text-align:center; }
.vial-svg{ width:96px; height:148px; display:flex; justify-content:center; }
.vial-cap{ font-size:11px; color:var(--muted); margin-top:2px; }
.vial-img{ width:100%; height:100%; }
.hint{ font-size:12px; color:var(--muted); text-align:center; margin-top:8px; font-family:"JetBrains Mono",monospace; }

.quick-doses{ margin-bottom:6px; }
.qd-info{ display:flex; flex-wrap:wrap; gap:8px; font-size:12px; margin-bottom:6px; }
.qd-cat{ background:rgba(52,224,211,0.12); color:var(--accent); padding:2px 8px; border-radius:999px; font-weight:600; }
.qd-range{ color:var(--text); font-weight:600; }
.qd-freq{ color:var(--muted); }
.qd-note{ font-size:12px; color:var(--muted); line-height:1.5; }

.result-card{ display:flex; flex-direction:column; }
.result-big{ text-align:center; padding:8px 0 14px; border-bottom:1px dashed var(--border); margin-bottom:14px; }
.big-num{ font-family:"JetBrains Mono",monospace; font-size:42px; font-weight:700; color:var(--accent); letter-spacing:-0.02em; line-height:1; }
.big-num.warn-text{ color:var(--warn); }
.big-lbl{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.1em; margin-top:6px; }
.result-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:14px; }
.metric{ background:var(--card2); border-radius:10px; padding:10px 8px; text-align:center; }
.metric span{ display:block; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; }
.metric strong{ display:block; font-family:"JetBrains Mono",monospace; font-size:14px; margin-top:4px; }
.syringe-wrap{ margin:6px 0 14px; }
.syringe-img{ width:100%; height:auto; max-height:90px; }
.warning{
  font-size:12.5px; line-height:1.5; padding:12px 14px; border-radius:10px;
  background:rgba(255,107,139,0.1); border:1px solid rgba(255,107,139,0.3); color:var(--text);
}
.warning.info{ background:rgba(91,140,255,0.08); border-color:rgba(91,140,255,0.25); }
.warning strong{ color:var(--warn); }
.warning.info strong{ color:var(--accent2); }
.result-actions{ display:flex; gap:8px; margin-top:auto; }

.btn{
  flex:1; border:none; padding:13px 14px; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer;
  transition:transform .12s, opacity .15s; min-height:44px;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn.primary{ background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#06241f; }
[data-theme="light"] .btn.primary{ color:#fff; }
.btn.ghost{ background:transparent; border:1px solid var(--border); color:var(--text); }
.btn.ghost:hover{ border-color:var(--accent); color:var(--accent); }

.stacks-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.stacks-head h2{ font-family:"Space Grotesk",sans-serif; font-size:20px; }
.stack-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.stack-actions .btn{ flex:0; min-height:40px; padding:10px 14px; }
.search-input{
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:10px 14px; font-size:14px; outline:none; min-width:200px;
}
.search-input:focus{ border-color:var(--accent); }

.stacks-list{ display:grid; grid-template-columns:1fr; gap:12px; }
.stack-card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; }
.stack-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.stack-head h3{ font-size:16px; font-family:"Space Grotesk",sans-serif; }
.stack-head p{ font-size:12.5px; color:var(--muted); margin-top:4px; }
.stack-btns{ display:flex; gap:6px; }
.mini-btn{
  background:var(--card2); border:1px solid var(--border); color:var(--text);
  padding:7px 11px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer;
  min-height:34px;
}
.mini-btn:hover{ border-color:var(--accent); color:var(--accent); }
.mini-btn.danger:hover{ border-color:var(--warn); color:var(--warn); }
.stack-entries{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.stack-entries li{
  display:grid; grid-template-columns:1.4fr 1fr 1.2fr 1fr; gap:10px; align-items:center;
  background:var(--card2); padding:8px 12px; border-radius:8px; font-size:13px;
}
.e-name{ font-weight:600; }
.e-dose{ color:var(--accent); font-family:"JetBrains Mono",monospace; }
.e-draw{ color:var(--text); font-family:"JetBrains Mono",monospace; font-size:12px; }
.e-vial{ color:var(--muted); font-size:12px; }
@media (max-width:560px){ .stack-entries li{ grid-template-columns:1fr 1fr; gap:4px; } }

.chart-card{ margin-bottom:16px; }
.chart-card h3{ font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:10px; }
#logChart{ width:100%; }
.log-list{ display:flex; flex-direction:column; gap:6px; }
.log-row{
  display:grid; grid-template-columns:1.5fr 1.3fr 1fr 1fr auto; gap:10px; align-items:center;
  background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 14px; font-size:13px;
}
.log-time{ color:var(--muted); font-size:12px; }
.log-pep{ font-weight:600; }
.log-dose{ color:var(--accent); font-family:"JetBrains Mono",monospace; }
.log-draw{ font-family:"JetBrains Mono",monospace; }
@media (max-width:640px){ .log-row{ grid-template-columns:1fr 1fr; gap:4px; } .log-row .mini-btn{ grid-column:span 2; } }

.ref-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; margin-bottom:24px; }
.ref-card{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:16px; }
.ref-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:10px; }
.ref-top h3{ font-size:16px; font-family:"Space Grotesk",sans-serif; }
.ref-cat{ font-size:11px; background:rgba(91,140,255,0.12); color:var(--accent2); padding:2px 8px; border-radius:999px; white-space:nowrap; }
.ref-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:12px; color:var(--muted); margin-bottom:8px; }
.ref-note{ font-size:13px; color:var(--text); opacity:0.85; line-height:1.5; margin-bottom:10px; }
.disclaimer{
  background:rgba(255,107,139,0.06); border:1px solid rgba(255,107,139,0.2); border-radius:12px;
  padding:14px 16px; font-size:12.5px; color:var(--muted); line-height:1.6;
}
.disclaimer strong{ color:var(--warn); }

.empty{
  background:var(--card); border:1px dashed var(--border); border-radius:14px;
  padding:32px 20px; text-align:center; color:var(--muted); font-size:14px; line-height:1.6;
}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  background:var(--card); border:1px solid var(--accent); color:var(--text);
  padding:12px 20px; border-radius:10px; font-size:13px; font-weight:600;
  box-shadow:var(--shadow); z-index:100;
}

/* Modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px);
  z-index:50; display:flex; align-items:center; justify-content:center; padding:16px;
}
.modal{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:22px; max-width:560px; width:100%; max-height:90vh; overflow:auto; box-shadow:var(--shadow);
}
.modal h3{ font-family:"Space Grotesk",sans-serif; font-size:18px; margin-bottom:14px; }
.modal .field{ margin-bottom:10px; }
.modal textarea{ background:var(--card2); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:13px; resize:vertical; outline:none; }
.modal textarea:focus{ border-color:var(--accent); }
.modal-entries{ display:flex; flex-direction:column; gap:8px; max-height:40vh; overflow:auto; margin-bottom:10px; }
.entry-row{ display:grid; grid-template-columns:1.6fr 0.7fr 0.7fr 0.8fr auto; gap:6px; align-items:center; }
.entry-row select, .entry-row input{
  background:var(--card2); border:1px solid var(--border); border-radius:8px; padding:8px; font-size:12px; outline:none;
}
.entry-row input{ font-family:"JetBrains Mono",monospace; }
.entry-row select:focus, .entry-row input:focus{ border-color:var(--accent); }
.add-entry{ margin-bottom:14px; }
.modal-actions{ display:flex; gap:8px; justify-content:flex-end; }
.modal-actions .btn{ flex:0; padding:10px 18px; }

@media (max-width:420px){
  .topbar{ padding:12px; }
  h1{ font-size:16px; }
  .tabs{ padding:6px 8px; }
  .tab{ padding:9px 10px; font-size:12px; }
  main{ padding:12px; }
  .big-num{ font-size:34px; }
}