:root{
  --bg:#000000;
  --card:transparent;          /* cards are OUTLINED, not filled */
  --bd:#242426;                /* card / section border */
  --bd-soft:rgba(255,255,255,.07); /* hairline dividers between rows */
  --bd-num:#2c2c2f;            /* set-number ring, todo checkbox ring */
  --acc:#ccff00;               /* volt */
  --acc-ink:#0f1300;           /* text/icon ON volt fills */
  --txt:#fafafa;               /* primary text */
  --txt2:#8a8a90;              /* secondary */
  --txt3:#55555c;              /* muted / ghost numbers / hints */
  --pad:14px;
  --radius:12px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--font);-webkit-font-smoothing:antialiased}
button{font-family:inherit;color:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}

/* ---- app shell ---- */
.app{max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:16px 14px 88px} /* bottom pad clears nav */
.screen{flex:1}
.empty{color:var(--txt3);font-size:13px;padding:24px 4px}
.fatal{border:1px solid #e24b4a;border-radius:var(--radius);padding:16px;margin-top:20px}
.fatal h2{margin:0 0 6px;font-size:16px;color:#e24b4a}
.fatal p{color:var(--txt2);font-size:13px;margin:0 0 10px}
.fatal pre{color:var(--txt3);font-size:11px;white-space:pre-wrap;word-break:break-word;margin:0}

/* ---- weekday strip ---- */
.wd-strip{display:flex;gap:6px;margin-bottom:14px}
.wd-pill{flex:1;background:transparent;border:1px solid var(--bd-num);border-radius:8px;color:var(--txt2);font-size:13px;font-weight:600;padding:8px 0;position:relative}
.wd-pill.today{border-color:var(--txt3)}
.wd-pill.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}

/* ---- day header ---- */
.day-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.streak{display:flex;align-items:center;gap:5px;font-size:16px;font-weight:600}
.streak i{font-size:18px;color:var(--acc)}
.day-date{font-size:12px;color:var(--txt3)}
.day-title{font-size:24px;font-weight:700;line-height:1.05;margin:0}
.day-sub{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--acc);margin:4px 0 16px}
.pinned-note{font-size:12px;color:var(--txt);background:rgba(204,255,0,.08);border:1px solid rgba(204,255,0,.25);border-radius:8px;padding:8px 10px;margin:0 0 14px;display:flex;gap:8px;align-items:flex-start}
.pinned-note i{color:var(--acc);font-size:15px;margin-top:1px}

/* pre-session note */
.pre-note{width:100%;background:transparent;border:1px solid var(--bd-num);border-radius:8px;color:var(--txt);font-size:13px;padding:9px 10px;margin:0 0 14px;resize:none;overflow:hidden;min-height:38px}
.pre-note::placeholder{color:var(--txt3)}
.pre-note:focus{outline:none;border-color:var(--acc)}

/* ---- collapsible section ---- */
.sec{border:1px solid var(--bd);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.sec-head{display:flex;align-items:center;gap:9px;padding:12px;width:100%;background:transparent;border:0;text-align:left}
.sec-bar{width:3px;height:14px;background:var(--acc);border-radius:2px;flex:none}
.sec-label{font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--acc);flex:1}
.sec-count{font-size:11px;color:var(--txt2)}
.sec-chev{font-size:16px;color:var(--txt2);transition:transform .15s}
.sec.collapsed .sec-chev{transform:rotate(-90deg)} /* down → right */
.sec-body{padding:2px 12px 10px;border-top:1px solid var(--bd-soft)}
.sec.collapsed .sec-body{display:none}

/* ---- exercise block ---- */
.ex{padding:8px 0}
.ex + .ex{border-top:1px solid var(--bd-soft)}
.ex-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.ex-name{font-size:14px;font-weight:600}
.ex-tag{font-size:11px;color:var(--acc);white-space:nowrap}
.ex-note{font-size:12px;color:var(--txt2);margin-top:6px;width:100%;background:transparent;border:0;border-left:2px solid var(--bd-num);padding:2px 0 2px 8px;border-radius:0;resize:none;overflow:hidden}
.ex-note::placeholder{color:var(--txt3)}
.ex-note:focus{outline:none;border-left-color:var(--acc)}

/* ---- set row ---- */
.set{display:flex;align-items:center;gap:9px;padding:6px 0}
.set-num{width:20px;height:20px;border-radius:50%;border:1px solid var(--bd-num);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--txt2);flex:none}
.set-fields{flex:1;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:500}
.set-fields .x{color:var(--txt3)}
.set-input{width:54px;background:transparent;border:1px solid var(--bd-num);border-radius:8px;color:var(--txt);font-size:14px;font-weight:500;padding:5px 6px;text-align:center}
.set-input:focus{outline:none;border-color:var(--acc)}
.set-input.ghost{color:var(--txt3);border-color:transparent}
.set-unit{font-size:12px;color:var(--txt3)}
/* hide number spinners */
.set-input[type=number]::-webkit-inner-spin-button,.set-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.set-input[type=number]{-moz-appearance:textfield}

/* the done toggle */
.chk{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;border:1.5px solid var(--bd-num);background:transparent;padding:0;color:transparent}
.chk.done{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.chk i{font-size:14px}

/* check-type row */
.check-row{display:flex;align-items:center;gap:11px;padding:8px 0}
.check-row + .check-row{border-top:1px solid var(--bd-soft)}
.check-row .name{flex:1;font-size:14px}
.check-row.done .name{color:var(--txt2)}

/* ---- sliding rest bar ---- */
.restbar{margin:8px 0 4px 29px}
.restbar-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:500;color:var(--acc);margin-bottom:4px}
.restbar-top i{font-size:13px;margin-right:4px}
.restbar-top .lbl{display:inline-flex;align-items:center}
.restbar-actions{display:flex;gap:10px}
.restbar-actions button{background:transparent;border:0;color:var(--txt2);font-size:11px}
.restbar-track{height:4px;background:rgba(255,255,255,.10);border-radius:999px;overflow:hidden}
.restbar-fill{height:100%;background:var(--acc);border-radius:999px;transition:width 1s linear}

/* sets-progress mini bar */
.prog{height:4px;background:rgba(255,255,255,.10);border-radius:999px;overflow:hidden;margin-top:8px}
.prog-fill{height:100%;background:var(--acc);border-radius:999px;transition:width .2s}

/* ---- bottom nav ---- */
.nav{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;align-items:center;
     background:#000;border-top:1px solid #1c1c1e;padding:10px 0 14px;max-width:520px;margin:0 auto}
.nav button{background:transparent;border:0;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--txt3);font-size:10px}
.nav button i{font-size:22px}
.nav button.on{color:var(--acc)}

/* ---- buttons / pills ---- */
.btn{background:transparent;border:1px solid var(--bd-num);border-radius:8px;color:var(--txt);font-size:13px;padding:8px 12px;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:var(--txt2)}
.btn-volt{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:600}
.btn-danger{border-color:#e24b4a;color:#e24b4a}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px}

/* ---- metric cards ---- */
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
.metric{border:1px solid var(--bd);border-radius:var(--radius);padding:12px}
.metric .label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt2)}
.metric .value{font-size:26px;font-weight:700;margin-top:4px}
.metric .value .unit{font-size:13px;color:var(--txt2);font-weight:500;margin-left:3px}

/* ---- stats: charts / lists ---- */
/* native selects — themed closed box + readable dark option list */
select{
  background-color:#0a0a0b;
  color:var(--txt);
  border:1px solid var(--bd-num);
  border-radius:8px;
  font-size:13px;
  padding:8px 34px 8px 10px;          /* room for the caret */
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a8a90' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
}
select:focus{outline:none;border-color:var(--acc)}
select option{background:#0a0a0b;color:var(--txt)}
.sel{width:100%;margin-bottom:10px}
.chart-cap{font-size:11px;color:var(--txt2);text-transform:uppercase;letter-spacing:.06em;margin:10px 0 4px}
canvas{max-width:100%}
.pr-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--bd-soft);font-size:13px}
.pr-row:first-child{border-top:0}
.pr-row i{color:var(--acc);font-size:15px}
.pr-name{flex:1}
.pr-val{color:var(--acc);font-weight:600}
.pr-date{color:var(--txt3);font-size:11px}
.otd-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--bd-soft);font-size:13px}
.otd-row:first-child{border-top:0}
.otd-when{color:var(--txt2)}
.otd-what{color:var(--txt);text-align:right}

/* ---- edit affordances ---- */
.edit-toggle{font-size:12px;color:var(--txt2);background:transparent;border:1px solid var(--bd-num);border-radius:8px;padding:6px 10px;display:flex;align-items:center;gap:6px}
.edit-toggle.on{border-color:var(--acc);color:var(--acc)}
.editing .ex, .editing .check-row{position:relative}
.drag-handle{color:var(--txt3);font-size:16px}
.icon-btn{background:transparent;border:0;color:var(--txt2);font-size:16px;padding:4px;display:inline-flex;align-items:center}
.icon-btn.danger{color:#e24b4a}
.icon-btn.disabled{opacity:.3}

.edit-banner{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--acc);background:rgba(204,255,0,.08);border:1px solid rgba(204,255,0,.25);border-radius:8px;padding:8px 10px;margin-bottom:12px}
.edit-card{border:1px solid var(--bd);border-radius:var(--radius);padding:12px;margin-bottom:12px}
.edit-sec-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.edit-sec-head .sec-bar{height:18px}
.edit-actions{display:flex;align-items:center;gap:2px}
.edit-ex{border-top:1px solid var(--bd-soft);padding:10px 0}
.edit-ex-head{display:flex;align-items:center;gap:8px}
.edit-ex-body{margin-top:8px}
.edit-defaults{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.edit-input{background:transparent;border:1px solid var(--bd-num);border-radius:8px;color:var(--txt);font-size:13px;padding:7px 9px;width:100%;resize:none}
.edit-input.num{width:70px;text-align:center}
.edit-input:focus{outline:none;border-color:var(--acc)}
.edit-ex-head .edit-input{flex:1}
.add-ex{margin-top:10px;width:100%;justify-content:center}
.field{display:block;margin-bottom:10px}
.field-label{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--txt2);margin-bottom:4px}
.small-field{display:flex;flex-direction:column;gap:3px}
.small-field.wide{width:100%}
.small-field .field-label{margin-bottom:2px}

/* ---- heatmap ---- */
.heat-wrap{overflow-x:auto;padding:6px 0 10px}
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:3px;width:max-content}
.heat-cell{width:12px;height:12px;border-radius:2px;background:#161616;border:0;padding:0}
.heat-cell.l1{background:#3a4d00}
.heat-cell.l2{background:#7aa300}
.heat-cell.l3{background:var(--acc)}
.heat-legend{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--txt3);margin-top:6px}
.heat-legend .heat-cell{cursor:default}

/* ---- plate calculator ---- */
.plate-target{display:flex;flex-direction:column;gap:6px}
.plate-result{margin-top:18px}
.plate-viz{display:flex;align-items:center;justify-content:center;gap:4px;min-height:120px;margin-bottom:14px}
.plate-bar{min-width:60px;height:8px;background:var(--txt3);border-radius:4px;display:flex;align-items:center;justify-content:center;position:relative}
.plate-bar span{position:absolute;top:-22px;font-size:11px;color:var(--txt3)}
.plate-stack{display:flex;align-items:center;gap:3px}
.plate-stack.left{flex-direction:row}
.plate-stack.right{flex-direction:row}
.plate-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px solid var(--acc);border-radius:6px;color:var(--acc);font-size:12px;font-weight:600;width:34px;height:74px}
.plate-chip i{font-size:13px;opacity:.6}
.plate-summary{font-size:14px;color:var(--txt);text-align:center;margin:4px 0}
.plate-note{font-size:12px;color:var(--txt2);text-align:center}
.plate-note.ok{color:var(--acc)}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(20px);
  background:var(--acc);color:var(--acc-ink);font-size:13px;font-weight:600;padding:10px 16px;border-radius:999px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60;max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- modal ---- */
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;
  opacity:0;transition:opacity .2s;z-index:70}
.modal-back.show{opacity:1}
.modal-sheet{background:#0c0c0d;border:1px solid var(--bd);border-bottom:0;border-radius:16px 16px 0 0;
  width:100%;max-width:520px;max-height:85dvh;overflow-y:auto;padding:20px 16px 28px;position:relative}
.modal-close{position:absolute;top:12px;right:10px;font-size:20px}
.confirm-msg{font-size:14px;color:var(--txt);margin:4px 0 16px;line-height:1.4}

/* read-only session view */
.session-view .sv-title{font-size:18px;margin:0}
.session-view .sv-date{font-size:12px;color:var(--txt3);margin:2px 0 14px}
.sv-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--bd-soft);font-size:13px}
.sv-name{color:var(--txt)}
.sv-sets{color:var(--acc);font-weight:500;text-align:right}
.sv-sets.done i{color:var(--acc)}
.sv-note{font-size:12px;color:var(--txt2);border-left:2px solid var(--bd-num);padding-left:8px;margin:2px 0 6px}