:root{
  --stone:#E4E2D8; --paper:#FBFAF6; --ink:#17241F; --slate:#626C66;
  --signal:#2B44F0; --olive:#7E9139; --line:#CFCCC0; --error:#B3261E;
}
*{box-sizing:border-box; margin:0; padding:0}
[hidden]{display:none!important}
html,body{background:var(--stone)}
body{
  font-family:'Archivo',-apple-system,system-ui,sans-serif;
  color:var(--ink);
  padding:calc(18px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
  max-width:520px; margin:0 auto;
  -webkit-font-smoothing:antialiased;
}
button:focus-visible{outline:3px solid var(--signal); outline-offset:2px}

.topbar{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px}
.topbar h1{font-size:15px; font-weight:600; letter-spacing:-.01em}
.tally{font-size:13px; color:var(--slate); font-variant-numeric:tabular-nums}
.tally b{color:var(--ink); font-weight:800}

.card{background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:20px 18px}
.muscle{font-size:13px; color:var(--signal); font-weight:600; margin-bottom:6px}
.move{font-size:34px; line-height:1.02; font-weight:800; letter-spacing:-.035em}
.cue{font-size:14px; color:var(--slate); margin-top:10px; line-height:1.45; max-width:44ch}
.prev{font-size:13px; color:var(--slate); margin-top:12px; font-variant-numeric:tabular-nums}
.prev i{font-style:italic}

.sets{display:flex; gap:10px; margin-top:18px}
.set{flex:1; border:1px solid var(--line); border-radius:11px; padding:9px 8px; text-align:center; background:#fff}
.set span{display:block; font-size:12px; color:var(--slate); margin-bottom:5px}
.stepper{display:flex; align-items:center; justify-content:center; gap:8px}
.stepper button{
  width:32px; height:32px; border-radius:9px; border:1px solid var(--line);
  background:var(--stone); color:var(--ink); font-size:18px; font-weight:600; cursor:pointer;
  font-family:inherit; line-height:1; -webkit-tap-highlight-color:transparent;
}
.stepper button:active{background:var(--line)}
.stepper b{font-size:24px; font-weight:800; min-width:38px; font-variant-numeric:tabular-nums}

.actions{display:flex; gap:10px; margin-top:16px}
.btn{
  font-family:inherit; font-size:15px; font-weight:600; border-radius:11px;
  padding:13px 16px; cursor:pointer; border:1px solid transparent; flex:1;
}
.btn-main{background:var(--signal); color:#fff}
.btn-ghost{background:transparent; color:var(--slate); border-color:var(--line); flex:0 0 auto}
.btn:disabled{opacity:.6; cursor:progress}

.bell{margin-top:14px; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:14px 16px}
.bell-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.bell-txt{font-size:14px; color:var(--slate); line-height:1.4}
.bell-txt b{color:var(--ink); font-variant-numeric:tabular-nums; font-weight:800; font-size:17px}
.bell button{
  font-family:inherit; font-size:14px; font-weight:600; padding:10px 14px; border-radius:10px;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper); cursor:pointer; white-space:nowrap;
}
.bell button.off{background:transparent; color:var(--ink)}
.fire{background:var(--signal); border-color:var(--signal)}
.fire .bell-txt, .fire .bell-txt b{color:#fff}
.fire button{background:#fff; color:var(--signal); border-color:#fff}

h2{font-size:13px; font-weight:600; color:var(--slate); margin:22px 0 9px}
.bar{display:flex; align-items:center; gap:9px; margin-bottom:7px; font-size:13px}
.bar-name{width:88px; color:var(--slate)}
.bar-track{flex:1; height:7px; background:var(--line); border-radius:4px; overflow:hidden}
.bar-fill{height:100%; background:var(--olive); border-radius:4px; transition:width .35s ease}
.bar-n{width:20px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600}

.log{font-size:13px; color:var(--slate); line-height:1.7; font-variant-numeric:tabular-nums}
.log div{display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:3px 0}
.log b{color:var(--ink); font-weight:600}
.empty{font-size:13px; color:var(--slate); line-height:1.5}
.note{font-size:12px; color:var(--slate); line-height:1.5; margin-top:18px; max-width:46ch}
.data{display:flex; gap:10px; margin-top:14px}
.data button, .account button{
  flex:1; font-family:inherit; font-size:13px; font-weight:600; color:var(--slate);
  background:transparent; border:1px solid var(--line); border-radius:10px; padding:10px; cursor:pointer;
}

/* Compte */
.auth{padding-top:6vh}
.auth-title{font-size:34px; line-height:1.02; font-weight:800; letter-spacing:-.035em}
.auth-lead{font-size:14px; color:var(--slate); margin:10px 0 18px; line-height:1.45; max-width:40ch}
.auth-heading{font-size:15px; font-weight:600; margin-bottom:14px}
.auth .btn{width:100%}
.field{display:block; margin-bottom:12px}
.field span{display:block; font-size:13px; color:var(--slate); margin-bottom:5px}
.field input{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:#fff;
}
.field input:focus-visible{outline:3px solid var(--signal); outline-offset:1px; border-color:var(--signal)}
.hint{font-size:12px; color:var(--slate); margin:-4px 0 12px}
.form-error{font-size:13px; color:var(--error); line-height:1.4; margin-bottom:10px}
.form-error:empty{display:none}
.link{
  display:block; margin:14px auto 0; padding:6px 4px; background:none; border:0;
  font-family:inherit; font-size:13px; color:var(--signal); text-decoration:underline; cursor:pointer;
}
.account{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:22px; font-size:12px; color:var(--slate)}
.account b{color:var(--ink); font-weight:600; word-break:break-all}
.account button{flex:0 0 auto}
#accountError{margin-top:8px}

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