/* Design nach DESIGN.md (Linear-Referenz): Void-Canvas, Hairline-Borders statt
   Schatten, Radii 6/12/9999, Gewichte 400–590, Acid-Lime nur für die Primäraktion. */

:root{
  --ground:#08090a;   /* Void – Canvas */
  --panel:#0f1011;    /* Carbon – Karten */
  --panel-2:#161718;  /* Obsidian – erhöhte Flächen */
  --line:#23252a;     /* Graphite – Hairline-Borders */
  --line-2:#383b3f;   /* Smoke – kontrastreichere Trenner */
  --dim:#62666d;      /* Ash */
  --muted:#8a8f98;    /* Fog */
  --body:#d0d6e0;     /* Mist */
  --bone:#e5e5e6;
  --text:#ffffff;     /* Paper */
  --accent:#e4f222;   /* Acid Lime – einzige chromatische Aktion */
  --green:#27a644;    /* Pulse Green */
  --red:#eb5757;      /* Coral Red */
  --teal:#02b8cc;     /* Signal Teal */
  --violet:#6366f1;   /* Iris Violet */
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--ground); color:var(--body);
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings:"cv01" on, "ss03" on, "zero" on;
  font-weight:400; line-height:1.5;
  padding:env(safe-area-inset-top) 0 calc(92px + env(safe-area-inset-bottom));
}
body.no-scroll{overflow:hidden;}
.wrap{max-width:620px; margin:0 auto; padding:0 14px;}

header{padding:20px 0 12px;}
.head-row{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
h1{margin:0; font-size:24px; font-weight:590; letter-spacing:-0.288px; color:var(--text); line-height:1.13;}
.sub{color:var(--muted); font-size:13px; margin-top:3px;}
.sync{
  background:var(--violet); color:#fff; font-weight:510; font-size:12px;
  border-radius:9999px; padding:4px 10px; margin-top:6px; white-space:nowrap;
}

/* ---------- Tab-Leiste unten ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2px;
  background:rgba(8,9,10,.92);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
}
.tabbtn{
  background:none; border:none; color:var(--muted); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  font-family:inherit; font-size:10.5px; font-weight:510; letter-spacing:.1px;
  padding:5px 0 3px; border-radius:6px; min-height:48px;
}
.tabbtn svg{width:23px; height:23px;}
.tabbtn.on{color:var(--accent);}
.tabbtn:active{transform:scale(.94);}

/* ---------- Karten ---------- */
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:14px; margin-bottom:8px;
}
.ex-name{font-size:15.5px; font-weight:510; letter-spacing:-0.16px; line-height:1.3; color:var(--body);}

/* Heute-Vorschlag */
.today-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.today-head .ex-name{color:var(--text);}
.today-head .ex-name::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--accent); margin-right:8px; vertical-align:1px;
}
.today-row{
  display:flex; align-items:center; gap:10px; padding:12px 0 11px;
  border-bottom:1px solid var(--line); cursor:pointer; user-select:none;
}
.today-row:last-child{border-bottom:none; padding-bottom:2px;}
.today-row:first-of-type{margin-top:6px;}
.today-row b{font-weight:510; color:var(--body); font-size:14.5px; letter-spacing:-0.15px;}
.today-row:active b{color:var(--text);}
.today-left{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap;}
.today-done{color:var(--green); font-size:13.5px; font-weight:510; padding-top:8px;}

/* Kompakte Übungszeile */
.exrow{display:flex; align-items:center; gap:12px; padding:11px 12px; cursor:pointer; user-select:none;}
.exrow:active{background:var(--panel-2);}
.thumb{
  width:94px; height:51px; border-radius:6px; background:var(--panel-2);
  object-fit:cover; flex:none; border:1px solid var(--line);
}
.exmeta{flex:1; min-width:0;}
.exrow-head{display:flex; justify-content:space-between; gap:8px; align-items:baseline;}
.exrow .ex-name{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tag{
  font-size:11px; font-weight:400; padding:2px 9px; border-radius:9999px;
  background:rgba(255,255,255,.05); color:var(--muted); white-space:nowrap; flex:none;
}
.ex-last{
  font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:3px;
  display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden;
  min-width:0; letter-spacing:-0.013em;
}
.ex-last .txt{overflow:hidden; text-overflow:ellipsis;}
.dot{width:7px; height:7px; border-radius:50%; flex:none; background:var(--dim);}
.dot.go{background:var(--green);}
.dot.warn{background:var(--red);}
.dot.half{background:var(--teal);}
.ex-week{display:flex; align-items:center; gap:8px; margin-top:7px;}
.minibar{flex:1; height:3px; border-radius:2px; background:var(--panel-2); overflow:hidden;}
.minibar span{display:block; height:100%; background:var(--body); border-radius:2px; transition:width .3s;}
.minibar.full span{background:var(--green);}
.ex-week-lbl{font-size:11px; color:var(--muted); font-family:var(--mono); white-space:nowrap;}
.chev{color:var(--dim); font-size:22px; font-weight:300; flex:none; line-height:1;}

.ex-hint{color:var(--muted); font-size:12.5px; margin-top:3px;}

/* ---------- Big 3 ---------- */
.big3-head{display:flex; align-items:center; gap:12px; cursor:pointer;}
.big3-head .thumb{width:80px; height:44px;}
.big3-head .ex-name{color:var(--body);}
.big3{display:flex; gap:6px; margin-top:12px;}
.day{
  flex:1; text-align:center; padding:12px 0; border-radius:6px; font-size:12.5px; font-weight:510;
  background:rgba(255,255,255,.03); color:var(--muted); border:1px solid var(--line); cursor:pointer;
  min-height:44px; user-select:none;
}
.day:active{transform:scale(.92);}
.day.on{background:rgba(39,166,68,.14); color:var(--green); border-color:rgba(39,166,68,.55);}
.day.today{border-color:rgba(228,242,34,.55);}
.day.on.today{border-color:rgba(39,166,68,.55);}

/* ---------- Eingaben ---------- */
input[type=number], input[type=date], input[type=password]{
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08);
  color:var(--body); font-family:var(--mono); font-size:17px; font-weight:400;
  padding:10px 8px; border-radius:6px; min-height:48px;
}
input[type=number]{text-align:center;}
input:focus{outline:none; border-color:var(--body);}
.unit{font-size:13px; color:var(--muted);}

button{
  font-family:inherit; font-size:14px; font-weight:510; cursor:pointer;
  border:none; border-radius:6px; padding:11px 14px; letter-spacing:-0.011em;
}
.save{background:var(--accent); color:#08090a; width:100%; min-height:50px; font-size:15px;}
.save:active{transform:translateY(1px);}
.ghost{
  background:transparent; color:var(--body); border:1px solid var(--line);
  font-weight:400; min-height:44px;
}
.ghost:active{background:rgba(255,255,255,.04);}

/* Stepper: grosse +/- Tasten. Grid statt Flex – Number-Inputs erzwingen sonst
   ihre intrinsische Breite. Letzte Spalte: Einheit bzw. ✓-Taste. */
.stepper-row{
  display:grid; grid-template-columns:52px 50px minmax(0,1fr) 50px 46px;
  gap:8px; align-items:center; margin-top:8px;
}
.stepper-lbl{font-size:13px; font-weight:400; color:var(--muted);}
.step-btn{
  width:50px; height:50px; border-radius:6px;
  background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--body);
  font-size:22px; font-weight:400; line-height:1; padding:0;
}
.step-btn:active{background:var(--line); transform:scale(.93);}
.stepper-row input{width:100%; height:50px; font-size:18px;}

.set-ok{
  width:46px; height:50px; border-radius:6px; padding:0;
  background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--muted);
  font-size:18px; line-height:1;
}
.set-ok:active{transform:scale(.93);}
.set-row.done input{border-color:rgba(39,166,68,.5); color:var(--body);}
.set-row.done .set-ok{background:rgba(39,166,68,.16); border-color:rgba(39,166,68,.6); color:var(--green);}

/* Equipment-Badge + Warum-Block im Detail-Sheet */
.equip-row{margin-top:9px;}
.tag.equip{background:rgba(99,102,241,.18); color:#b9bdf7; font-weight:510; padding:4px 11px;}
.why{font-size:13px; color:var(--muted); line-height:1.6; margin-top:10px;}
.why b{color:var(--body); font-weight:510;}

/* Big-3-Schema */
.big3-plan{margin-top:12px; border-top:1px solid var(--line);}
.plan-item{padding:12px 0 11px; border-bottom:1px solid var(--line);}
.plan-item:last-of-type{border-bottom:none;}
.plan-head{display:flex; justify-content:space-between; gap:8px; align-items:baseline; flex-wrap:wrap;}
.plan-head b{font-weight:510; color:var(--body); font-size:14px;}
.plan-scheme{font-family:var(--mono); font-size:12px; color:var(--teal); white-space:nowrap; letter-spacing:-0.013em;}
.plan-cues{font-size:12.5px; color:var(--muted); margin-top:4px; line-height:1.55;}
.plan-note{font-size:12px; color:var(--dim); margin-top:12px; line-height:1.55;}

/* Körpermaße bearbeiten */
.body-hist tr.editable{cursor:pointer;}
.body-hist tr.editing td{color:var(--text);}
.edit-actions{display:flex; gap:8px; margin-top:8px;}
.edit-actions .ghost{flex:1;}
.ghost.danger{color:var(--red); border-color:rgba(235,87,87,.35);}

.start-hint{
  background:rgba(2,184,204,.07); border-left:2px solid var(--teal); border-radius:6px;
  padding:10px 12px; font-size:13px; color:var(--body); margin:10px 0 4px; line-height:1.55;
}
.start-hint b{color:var(--teal); font-weight:510;}

.warmup{
  font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:-0.013em;
  margin:8px 0 2px; padding-left:2px;
}
.goal-hint{font-size:12px; color:var(--dim); margin-top:12px; text-align:center; line-height:1.55;}

/* Pausen-Timer im Sheet */
.rest-box{
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  padding:14px; margin-top:12px; text-align:center;
}
.rest-time{
  font-family:var(--mono); font-size:40px; font-weight:400; color:var(--text);
  letter-spacing:-0.013em; line-height:1.1;
}
.rest-lbl{font-size:12px; color:var(--muted); margin-top:2px;}
.rest-btns{display:flex; gap:8px; justify-content:center; margin-top:12px;}
.rest-btns .ghost{min-height:40px; padding:8px 14px; font-size:13px;}

/* Pausen-Timer als schwebende Pille über der Tab-Leiste */
#rest-pill{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(96px + env(safe-area-inset-bottom)); z-index:35;
  background:var(--panel-2); border:1px solid var(--line-2); border-radius:9999px;
  padding:10px 18px; font-family:var(--mono); font-size:14px; color:var(--text);
  box-shadow:rgba(0,0,0,.4) 0 2px 4px; cursor:pointer; white-space:nowrap;
}
#rest-pill:active{transform:translateX(-50%) scale(.96);}

/* ---------- Status ---------- */
.status{margin-top:12px; font-size:13px; font-weight:510; display:flex; align-items:center; gap:8px; line-height:1.4;}
.status .dot{width:7px; height:7px;}
.s-go{color:var(--green);}
.s-hold{color:var(--muted);}
.s-half{color:var(--teal);}
.s-warn{color:var(--red);}

/* ---------- Woche ---------- */
.week{display:flex; justify-content:space-between; align-items:center; font-size:13.5px; color:var(--muted); padding:2px 0;}
.week b{font-family:var(--mono); color:var(--body); font-weight:400;}
.wbar{height:3px; background:var(--panel-2); border-radius:2px; margin:6px 0 13px; overflow:hidden;}
.wbar span{display:block; height:100%; background:var(--body); border-radius:2px;}
.wbar.full span{background:var(--green);}
.last{
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted); display:flex; justify-content:space-between; gap:8px;
}
.last b{font-family:var(--mono); color:var(--body); font-weight:400;}
.last b.trend-down{color:var(--green);}

/* ---------- Verlauf ---------- */
.hist{
  font-family:var(--mono); font-size:13px; color:var(--muted); padding:10px 0;
  border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:8px; align-items:center;
  letter-spacing:-0.013em;
}
.hist:last-child{border:none;}
.hist b{color:var(--body); font-weight:400;}
.hist .del{
  background:none; border:none; color:var(--dim); font-size:17px; padding:6px 10px; cursor:pointer;
  min-width:40px; min-height:40px;
}
.hist .del:active{color:var(--red);}

.note{font-size:13px; color:var(--muted); line-height:1.6;}
.note b{color:var(--body); font-weight:510;}
.hidden{display:none !important;}

.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(104px + env(safe-area-inset-bottom));
  background:var(--bone); color:#08090a; font-weight:510; font-size:14px;
  padding:11px 18px; border-radius:9999px; opacity:0; transition:opacity .25s;
  pointer-events:none; z-index:60; max-width:90vw; text-align:center;
  box-shadow:rgba(0,0,0,.4) 0 2px 4px;
}
.toast.on{opacity:1;}
.toast.err{background:var(--red); color:#fff;}

/* Undo-Leiste */
.undo-toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(96px + env(safe-area-inset-bottom)); z-index:55;
  background:var(--panel-2); border:1px solid var(--line-2); border-radius:9999px;
  display:flex; align-items:center; gap:12px; padding:7px 7px 7px 18px;
  font-size:13.5px; color:var(--body); white-space:nowrap;
  box-shadow:rgba(0,0,0,.4) 0 2px 4px;
}
#undo-btn{
  background:var(--bone); color:#08090a; border-radius:9999px;
  padding:8px 15px; font-size:13px; font-weight:510; min-height:36px;
}

/* ---------- Overlay + Bottom-Sheet ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:40;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity .22s;
}
.overlay.open{opacity:1;}
.overlay.center{align-items:center; opacity:1;}
.sheet{
  background:var(--panel); border:1px solid var(--line-2); border-bottom:none;
  border-radius:12px 12px 0 0;
  padding:8px 16px calc(18px + env(safe-area-inset-bottom));
  width:100%; max-width:620px; max-height:90dvh; overflow-y:auto; position:relative;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  transform:translateY(100%); transition:transform .26s cubic-bezier(.32,.72,.35,1);
}
.overlay.open .sheet{transform:translateY(0);}
.overlay.center .sheet{transform:none; border-radius:12px; border-bottom:1px solid var(--line-2);}
.grabber{width:36px; height:4px; border-radius:2px; background:var(--line-2); margin:4px auto 6px;}
.close{
  position:absolute; top:12px; right:12px; z-index:2;
  background:rgba(255,255,255,.03); color:var(--muted);
  border:1px solid var(--line); border-radius:9999px; width:38px; height:38px;
  font-size:18px; line-height:1; padding:0;
}
.sheet-title{font-size:19px; font-weight:590; letter-spacing:-0.24px; line-height:1.3; padding-right:44px; margin-top:4px; color:var(--text);}
.sheet-img{width:100%; border-radius:6px; margin:12px 0 10px; display:block; background:var(--panel-2); border:1px solid var(--line);}
.safety{
  background:rgba(39,166,68,.07); border-left:2px solid var(--green); border-radius:6px;
  padding:10px 12px; font-size:13px; color:var(--body); margin-top:10px; line-height:1.55;
}
.safety b{color:var(--green); font-weight:510;}
.meta-row{display:flex; gap:6px; margin-top:12px; flex-wrap:wrap;}
.sheet-form{margin-top:14px; padding-top:6px; border-top:1px solid var(--line);}
.sheet-actions{position:sticky; bottom:-1px; background:var(--panel); padding-top:12px; margin-top:12px;}

.login-sheet{max-width:340px; margin:0 16px;}
.login-title{font-size:18px; font-weight:590; letter-spacing:-0.2px; margin:6px 0 0; color:var(--text);}
#login-pw{width:100%; margin-top:14px;}
#login-btn{margin-top:12px;}
.login-error{color:var(--red); font-size:13px; font-weight:510; margin-top:10px; min-height:18px;}

/* ---------- Körperdaten: Verlaufskurve ---------- */
.chart-top{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;}
.range-seg{
  display:flex; gap:2px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:9999px; padding:2px;
}
.seg{
  background:none; border:none; color:var(--muted); cursor:pointer;
  font-size:11.5px; font-weight:510; padding:6px 10px; border-radius:9999px; min-height:30px;
  letter-spacing:0;
}
.seg.on{background:var(--bone); color:#08090a;}
.seg:active{transform:scale(.95);}

.chips{
  display:flex; gap:6px; overflow-x:auto; margin-top:10px; padding-bottom:2px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none;}
.chip{
  flex:none; background:rgba(255,255,255,.05); color:var(--body); border:none;
  border-radius:9999px; padding:8px 13px; font-size:12.5px; font-weight:400; min-height:38px;
}
.chip.on{background:var(--bone); color:#08090a; font-weight:510;}
.chip:active{transform:scale(.95);}
.chart-head{display:flex; align-items:baseline; gap:10px; margin-top:14px; flex-wrap:wrap;}
.chart-val{font-family:var(--mono); font-size:25px; font-weight:400; letter-spacing:-0.013em; color:var(--text);}
.chart-delta{font-family:var(--mono); font-size:12.5px; color:var(--muted); letter-spacing:-0.013em;}
.chart-delta.down{color:var(--green);}
.chart{width:100%; height:auto; display:block; margin-top:8px;}

/* ---------- Körperdaten ---------- */
.body-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin-top:12px;}
@media (min-width: 480px){.body-grid{grid-template-columns:repeat(3, 1fr);}}
.body-field{display:flex; flex-direction:column; gap:4px;}
.body-field .lbl{font-size:12px; color:var(--muted); font-weight:400;}
.body-field input{width:100%;}
.body-date{margin-top:12px; display:flex; align-items:center; gap:10px;}
.body-date .lbl{font-size:12px; color:var(--muted); font-weight:400;}
.body-hist{overflow-x:auto; margin-top:4px;}
.body-hist table{width:100%; border-collapse:collapse; font-family:var(--mono); font-size:12.5px; letter-spacing:-0.013em;}
.body-hist th{color:var(--dim); font-weight:400; text-align:right; padding:8px 6px; border-bottom:1px solid var(--line);}
.body-hist td{text-align:right; padding:8px 6px; border-bottom:1px solid var(--line); color:var(--body); white-space:nowrap;}
.body-hist th:first-child, .body-hist td:first-child{text-align:left;}
.body-hist tr:last-child td{border:none;}

@media (prefers-reduced-motion: reduce){*{transition:none !important;}}