:root{
  --bg:#0e0e0f;
  --surface:#1a1b1d;
  --surface-2:#242528;
  --line:#34363a;
  --text:#f4f4f5;
  --muted:#9b9ca1;
  --accent:#ffe000;      /* Technogym-Gelb */
  --accent-ink:#1a1a00;
  --danger:#ff5a5a;
  --ok:#46d18a;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--text);
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:inherit;text-decoration:none}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  background:rgba(14,14,15,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar h1{flex:1;margin:0;font-size:18px;font-weight:700;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .back,.topbar .logout{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  font-size:24px;color:var(--muted);border-radius:10px}
.topbar .back:active,.topbar .logout:active{background:var(--surface-2)}
.topbar .placeholder{visibility:hidden}

.container{max-width:560px;margin:0 auto;padding:16px 14px 40px}

/* Geräte-Raster */
.grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
}
@media (min-width:440px){.grid{grid-template-columns:repeat(3,1fr)}}
.tile{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px;min-height:118px;display:flex;flex-direction:column;
  position:relative;transition:transform .05s ease, border-color .15s}
.tile:active{transform:scale(.97);border-color:var(--accent)}
.tile-num{
  font-size:34px;font-weight:800;line-height:1;color:var(--accent);
  letter-spacing:-1px}
.tile-name{margin-top:auto;font-size:14px;font-weight:600;line-height:1.2}
.tile-last{position:absolute;top:14px;right:14px;font-size:12px;color:var(--muted);
  background:var(--surface-2);padding:3px 8px;border-radius:999px}
.tile-add{align-items:center;justify-content:center;border-style:dashed;color:var(--muted)}
.tile-add .tile-name{margin-top:8px;color:var(--muted)}
.tile-add-plus{font-size:40px;font-weight:300;line-height:1;color:var(--accent)}

/* Karten / Formular */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;margin:0 0 14px}
.subhead{margin:4px 0 14px;font-size:16px;color:var(--muted);font-weight:600}

.field{display:block;margin:0 0 14px}
.field > span{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:600}
.field em{font-style:normal;opacity:.7;font-weight:400}
.field.big > span{font-size:14px}
.row{display:flex;gap:12px}
.row .field{flex:1}

input[type=text],input[type=number],input[type=date],input[type=time],input[type=password]{
  width:100%;background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  font-size:17px;padding:13px 12px;border-radius:12px;appearance:none;-webkit-appearance:none}
input:focus{outline:none;border-color:var(--accent)}

/* Stepper Gewicht */
.stepper{display:flex;align-items:stretch;gap:10px}
.stepper input{text-align:center;font-size:26px;font-weight:700}
.stepper .step{
  flex:0 0 56px;background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  font-size:28px;border-radius:12px;font-weight:600}
.stepper .step:active{background:var(--accent);color:var(--accent-ink)}

/* Buttons */
.btn-primary,.btn-secondary{
  display:block;width:100%;text-align:center;font-size:17px;font-weight:700;
  padding:15px;border-radius:14px;border:1px solid transparent;margin:6px 0;cursor:pointer}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:active{filter:brightness(.92)}
.btn-secondary{background:transparent;border-color:var(--line);color:var(--text)}
button.btn-primary{appearance:none;-webkit-appearance:none}

/* Login */
.login{max-width:320px;margin:8vh auto 0;text-align:center}
.login .lead{margin:0 0 14px;color:var(--muted)}
.pin-input{text-align:center;letter-spacing:8px;font-size:24px;margin-bottom:14px}

/* Flash / Hinweise */
.flash{background:var(--surface-2);border:1px solid var(--ok);color:var(--ok);
  padding:11px 14px;border-radius:12px;margin-bottom:14px;font-weight:600}
.flash.error{border-color:var(--danger);color:var(--danger)}
.error{color:var(--danger)}
.last-hint{background:var(--surface);border:1px dashed var(--line);border-radius:12px;
  padding:11px 14px;margin-bottom:14px;font-size:15px}
.last-hint strong{color:var(--accent)}
.muted{color:var(--muted)}

/* Steigerungs-Kennzahl */
.progress-head{display:flex;flex-direction:column;gap:2px;padding:4px 6px 12px;
  margin:0 0 6px;border-bottom:1px solid var(--line)}
.prog-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700}
.prog-value{font-size:26px;font-weight:800;letter-spacing:-.5px}
.prog-value small{font-size:15px;font-weight:600;opacity:.8}
.progress-head.prog-up .prog-value{color:var(--ok)}
.progress-head.prog-down .prog-value{color:var(--danger)}
.progress-head.prog-flat .prog-value{color:var(--text)}

/* Diagramm */
.chart-card{padding:14px 10px}
.chart{width:100%;height:auto;display:block}
.chart .series{fill:none;stroke:var(--accent);stroke-width:2.5;
  stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--accent)}
.chart .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.chart .axis{fill:var(--muted);font-size:10px}

/* "Letzte Male" auf der Eingabemaske */
.card-title{margin:0 0 10px;font-size:13px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em}
.recent{padding:14px 16px}
.mini-log{list-style:none;margin:0;padding:0}
.mini-log li{border-bottom:1px solid var(--line)}
.mini-log li:last-child{border-bottom:none}
.mini-link{display:flex;align-items:baseline;gap:10px;padding:9px 4px;color:inherit;
  border-radius:8px}
.mini-link:active{background:var(--surface-2)}
.mini-link::after{content:"›";margin-left:auto;color:var(--muted);font-size:18px}
.mini-date{flex:0 0 88px;font-size:13px;color:var(--muted)}
.mini-weight{font-weight:700;font-size:16px}
.mini-detail{font-size:13px;color:var(--muted)}

.edit-link{display:block;text-align:center;color:var(--muted);font-size:14px;
  padding:12px;margin-top:2px}
.edit-link:active{color:var(--text)}

/* Gefahr-Zone: Gerät löschen */
.danger-form{margin-top:18px}
.btn-danger{display:block;width:100%;text-align:center;font-size:15px;font-weight:600;
  padding:13px;border-radius:14px;background:transparent;border:1px solid var(--danger);
  color:var(--danger);cursor:pointer}
.btn-danger:active{background:rgba(255,90,90,.12)}

/* Log-Liste */
.list-hint{font-size:13px;margin:0 0 8px 2px}
.log{list-style:none;margin:0 0 16px;padding:0}
.log li{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;margin-bottom:10px}
.log-link{display:block;color:inherit;padding:12px 78px 12px 14px}
.log li:active{border-color:var(--accent)}
.log-main{display:flex;align-items:baseline;gap:10px}
.log-main strong{font-size:18px}
.log-detail{color:var(--muted);font-size:14px}
.log-meta{font-size:13px;color:var(--muted);margin-top:3px}
.log-note{color:var(--muted)}
.log-link::after{content:"›";position:absolute;top:50%;right:46px;transform:translateY(-50%);
  color:var(--muted);font-size:22px;line-height:1}
.log-del{position:absolute;top:50%;right:8px;transform:translateY(-50%);margin:0;z-index:2}
.log-del button{background:transparent;border:none;color:var(--muted);font-size:18px;
  width:34px;height:34px;border-radius:8px;cursor:pointer}
.log-del button:active{background:var(--surface-2);color:var(--danger)}