:root{
  --bg:#0f1216; --card:#181d24; --card2:#1f2630; --txt:#e8edf2; --muted:#8a97a6;
  --accent:#3da9fc; --accent2:#2b8a3e; --danger:#e5484d; --line:#2a313b;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--txt);
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:env(safe-area-inset-bottom);
}
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; background:#0b0e12; position:sticky; top:0; z-index:10;
  border-bottom:1px solid var(--line);
}
.brand{font-weight:700; font-size:1.15rem; color:var(--txt); text-decoration:none}
.topbar nav a{color:var(--muted); text-decoration:none; margin-left:14px; font-size:.95rem}
.topbar nav a:hover{color:var(--txt)}
.wrap{max-width:620px; margin:0 auto; padding:16px}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:16px}
.card.center{text-align:center}
.muted{color:var(--muted)}
.tiny{font-size:.75rem}
.section{margin:22px 4px 10px; font-size:1.05rem}
h1{font-size:1.4rem; margin:.2em 0} h2{font-size:1.15rem} h3{font-size:1.02rem; margin:.4em 0}

/* Pasek zdrowia */
.healthbar{display:flex; gap:6px; background:var(--card2); border:1px solid var(--line);
  border-radius:var(--radius); padding:10px 6px; margin-bottom:16px; overflow-x:auto}
.hb-item{flex:1 0 auto; min-width:62px; text-align:center}
.hb-icon{display:block; font-size:1.1rem}
.hb-val{display:block; font-weight:700; font-size:1rem; margin-top:2px}
.hb-label{display:block; color:var(--muted); font-size:.68rem; margin-top:1px}

/* Przyciski */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--card2); color:var(--txt); border:1px solid var(--line);
  border-radius:12px; padding:12px 16px; font-size:1rem; text-decoration:none;
  cursor:pointer; font-weight:600}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#04121f}
.btn.danger{background:var(--danger); border-color:var(--danger); color:#fff}
.btn.danger.ghost{background:transparent; color:var(--danger)}
.btn.ghost{background:transparent}
.btn.big{width:100%; padding:16px; font-size:1.1rem; margin-top:10px}
.btn.small{padding:8px 12px; font-size:.85rem}
.btn.tiny{padding:4px 8px; font-size:.8rem}

/* Kafelki startu */
.start-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:8px}
.start-grid form{display:flex}
.btn.tile{flex-direction:column; width:100%; aspect-ratio:1/1; gap:10px; font-size:1.2rem; border-radius:var(--radius)}
.btn.tile.cardio{background:linear-gradient(160deg,#0b3d2e,#114b39); border-color:#176b50}
.btn.tile.strength{background:linear-gradient(160deg,#1d2a52,#26346b); border-color:#33459a}
.tile-icon{font-size:2.4rem}

/* Timery */
.big-timer{font-size:1.8rem; font-weight:800; font-variant-numeric:tabular-nums}
.huge-timer{font-size:3.4rem; font-weight:800; font-variant-numeric:tabular-nums; margin:14px 0}
.active-banner{display:flex; justify-content:space-between; align-items:center; gap:12px}

/* HR na zywo */
.hr-live{margin:18px 0}
.hr-live #hrVal{font-size:2rem; font-weight:800}
.hr-live .unit{color:var(--muted)}

/* Listy */
.list{list-style:none; padding:0; margin:0}
.list li{margin-bottom:8px}
.list li a{display:flex; align-items:center; gap:10px; background:var(--card);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  color:var(--txt); text-decoration:none}
.li-main{font-weight:600} .li-sub{margin-left:auto; color:var(--muted); font-size:.85rem; text-align:right}
.tag{font-size:.7rem; padding:3px 8px; border-radius:999px; font-weight:700}
.tag.cardio{background:#0b3d2e; color:#7be0b6} .tag.silownia{background:#1d2a52; color:#9db4ff}

/* Tabele serii */
table.sets{width:100%; border-collapse:collapse; margin:8px 0}
table.sets th, table.sets td{text-align:left; padding:7px 6px; border-bottom:1px solid var(--line); font-size:.95rem}
table.sets th{color:var(--muted); font-weight:600; font-size:.78rem}
.set-form{display:flex; gap:8px; margin-top:8px}
.set-form input{flex:1; min-width:0}
.add-ex{display:flex; flex-direction:column; gap:10px}

/* Formularze */
input,textarea,select{width:100%; background:var(--card2); border:1px solid var(--line);
  color:var(--txt); border-radius:10px; padding:12px; font-size:1rem; font-family:inherit}
input:focus,textarea:focus{outline:none; border-color:var(--accent)}
label{display:block; margin:10px 0; color:var(--muted); font-size:.9rem}
label input,label textarea{margin-top:6px}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:10px}

.row-between{display:flex; justify-content:space-between; align-items:center; gap:12px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 16px; margin:8px 0}
.kv dt{color:var(--muted)} .kv dd{margin:0; font-weight:600; text-align:right}
.record{color:#ffd166; font-weight:700}
.exercise-view{padding:8px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:10px}

.flash{padding:12px 14px; border-radius:10px; margin-bottom:14px}
.flash.error{background:#3a1416; border:1px solid var(--danger); color:#ffb3b5}
.flash.ok{background:#0f2e1c; border:1px solid var(--accent2); color:#9be3b4}

.login-card{max-width:360px; margin:8vh auto; text-align:center}
.login-card form{margin-top:16px; display:flex; flex-direction:column; gap:12px}