:root { --bg:#12141a; --fg:#f2f4f8; --accent:#4ea1ff; --line:#2a2e39; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
       font: 17px/1.4 -apple-system, system-ui, sans-serif; }
main { padding: 1.25rem; max-width: 34rem; margin: 0 auto; }
#topbar { display:flex; align-items:center; justify-content:space-between;
          padding: .75rem 1.25rem; border-bottom: 1px solid var(--line);
          font-size: .95rem; color: var(--fg); }
#screen { padding: 1.25rem; max-width: 34rem; margin: 0 auto; }
label { display:block; margin: 0 0 1rem; }
input { width:100%; padding:.85rem; font-size:1.05rem; border:1px solid var(--line);
        border-radius:.6rem; background:#1b1e26; color:var(--fg); }
button { width:100%; padding:1rem; font-size:1.05rem; border:0; border-radius:.6rem;
         background:var(--accent); color:#06121f; font-weight:600; }
.error { color:#ff9d9d; }

#topbar { display:flex; justify-content:space-between; padding:.75rem 1.25rem;
          border-bottom:1px solid var(--line); font-size:.9rem; opacity:.75; }
h1 { font-size:1.5rem; margin:.25rem 0 1rem; }
h2 { font-size:1rem; opacity:.7; margin:1.5rem 0 .5rem; }
.hint { opacity:.65; font-size:.95rem; margin-top:-.5rem; }
.machines { list-style:none; padding:0; margin:0; }
.machine { display:flex; align-items:center; gap:.9rem; padding:.9rem;
           border:1px solid var(--line); border-radius:.7rem; margin-bottom:.6rem; }
.machine img, .thumb { width:56px; height:56px; border-radius:.5rem; object-fit:cover;
           background:#232733; display:grid; place-items:center; font-weight:700; }
.row { display:flex; gap:.5rem; }
.row input { flex:1; }
button.secondary { background:transparent; color:var(--accent);
                   border:1px solid var(--line); }
button.back { background:transparent; color:var(--accent); border:0; width:auto;
              padding:.25rem 0; text-align:left; }
.positions { display:flex; gap:.75rem; margin:.5rem 0 1.25rem; }
.pos { flex:1; text-align:center; padding:.7rem; border:1px solid var(--line);
       border-radius:.6rem; }
.pos b { display:block; font-size:1.6rem; }
.pos span { font-size:.8rem; opacity:.7; }
.stepper { display:flex; align-items:center; gap:1rem; margin:1rem 0; }
.stepper button { width:4rem; height:4rem; font-size:2rem; }
.weight { flex:1; text-align:center; font-size:2.6rem; font-weight:700; }
.sets { list-style:none; padding:0; margin:1rem 0 0; }
.sets li { padding:.6rem .9rem; border-bottom:1px solid var(--line); }

/* A save failure is a hiccup, not an alarm -- muted like .hint, never red,
   and sits below the button it belongs to rather than pulled up under a
   heading (.hint's default margin-top is negative for that reason). Empty
   by default; save() fills it in only on failure. */
.save-error { margin-top:.75rem; min-height:0; }
.save-error:empty { margin-top:0; }