:root {
  --bg: #1a1a1c;
  --bg-elevated: #232326;
  --bg-card: #2a2a2d;
  --border: #3a3a3d;
  --text: #edeae4;
  --text-muted: #9a9a9e;
  --red: #c8102e;
  --red-dim: #4a1a22;
  --teal: #4f9d8d;
  --teal-dim: #1e3230;
  --amber: #d9a441;
  --amber-dim: #3a2f1a;
  --radius: 14px;
  --radius-sm: 8px;
  font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.stat-number {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: -0.01em;
}

button {
  font-family: inherit;
  cursor: pointer;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 76px;
}

/* Header */
.topbar {
  padding: 20px 20px 12px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.topbar .brand {
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand .bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}
.brand .bars span {
  width: 4px;
  border-radius: 2px;
  background: var(--teal);
}
.brand .bars span:nth-child(1) { height: 40%; }
.brand .bars span:nth-child(2) { height: 70%; }
.brand .bars span:nth-child(3) { height: 100%; background: var(--red); }

.topbar .date {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: capitalize;
}

/* Views */
.view { display: none; padding: 4px 20px 20px; flex: 1; }
.view.active { display: block; }

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}

.card-hero {
  background: linear-gradient(155deg, var(--bg-card), var(--bg-elevated));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px;
  margin-bottom: 16px;
}
.card-hero .label {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-bottom: 6px;
}
.card-hero h2 {
  font-size: 1.5rem;
  margin-bottom: 4px;
}
.card-hero .sub {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 16px;
}

.btn-primary {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 1rem;
  font-weight: 700;
  width: 100%;
}
.btn-primary:active { opacity: 0.85; }
.btn-primary:disabled { background: var(--border); color: var(--text-muted); }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.95rem;
  font-weight: 600;
  width: 100%;
}

.exercise-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.exercise-row:last-child { border-bottom: none; }
.exercise-row .name { font-weight: 600; font-size: 0.95rem; }
.exercise-row .variant { color: var(--text-muted); font-size: 0.8rem; margin-top: 2px; }
.exercise-row .target { color: var(--teal); font-size: 0.9rem; font-weight: 700; white-space: nowrap; }

.tag {
  display: inline-block;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

/* Alert / deload banner */
.banner {
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  background: var(--amber-dim);
  border: 1px solid var(--amber);
  font-size: 0.88rem;
}
.banner strong { color: var(--amber); }

/* Active workout */
.session-progress {
  display: flex;
  gap: 5px;
  margin-bottom: 18px;
}
.session-progress .dot {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
}
.session-progress .dot.done { background: var(--teal); }
.session-progress .dot.current { background: var(--red); }

.exercise-focus {
  text-align: center;
  padding: 10px 0 24px;
}
.exercise-focus .cat {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-bottom: 8px;
}
.exercise-focus h2 {
  font-size: 1.7rem;
  margin-bottom: 6px;
}
.exercise-focus .variant-name {
  color: var(--teal);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 22px;
}
.target-block {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 8px;
}
.target-block .metric { text-align: center; }
.target-block .metric .num { font-size: 2.4rem; display: block; }
.target-block .metric .lbl { color: var(--text-muted); font-size: 0.78rem; }

.set-tracker {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 18px 0;
}
.set-tracker .set-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.set-tracker .set-dot.done {
  background: var(--teal);
  border-color: var(--teal);
  color: #0d1a17;
}

.feedback-row {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.feedback-btn {
  flex: 1;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  padding: 14px 4px;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.feedback-btn .emoji { font-size: 1.3rem; }
.feedback-btn.facile:active, .feedback-btn.facile.chosen { background: var(--teal-dim); border-color: var(--teal); }
.feedback-btn.giusto:active, .feedback-btn.giusto.chosen { background: var(--amber-dim); border-color: var(--amber); }
.feedback-btn.difficile:active, .feedback-btn.difficile.chosen { background: var(--red-dim); border-color: var(--red); }

.rest-timer {
  text-align: center;
  padding: 30px 0;
}
.rest-timer .num {
  font-size: 3.2rem;
  display: block;
}
.rest-timer .lbl {
  color: var(--text-muted);
  margin-bottom: 20px;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}
.empty-state .big-check {
  font-size: 2.6rem;
  margin-bottom: 10px;
}

/* Progressi */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.stat-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.stat-box .num { font-size: 1.6rem; }
.stat-box .lbl { color: var(--text-muted); font-size: 0.78rem; }

.progress-bar-outer {
  height: 8px;
  border-radius: 4px;
  background: var(--bg-elevated);
  overflow: hidden;
  margin-top: 6px;
}
.progress-bar-inner {
  height: 100%;
  background: var(--teal);
}

.chain-track {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.chain-track .step {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
}
.chain-track .step.reached { background: var(--teal); }
.chain-track .step.active { background: var(--red); }

/* Bottom nav */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  display: flex;
  max-width: 480px;
  margin: 0 auto;
}
.tabbar button {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 10px 0 8px;
  font-size: 0.72rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}
.tabbar button .icon { font-size: 1.25rem; }
.tabbar button.active { color: var(--text); }
.tabbar button.active .icon { color: var(--red); }

/* Schede view */
.scheda-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.scheda-item:last-child { border-bottom: none; }
.scheda-item .info .name { font-weight: 700; }
.scheda-item .info .meta { color: var(--text-muted); font-size: 0.78rem; }
.scheda-item .badge {
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--teal-dim);
  color: var(--teal);
  font-weight: 700;
}

/* Test di ingresso / retest */
.stepper-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 10px 0;
}
.stepper-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 1.4rem;
  font-weight: 700;
}
.stepper-value {
  font-size: 2.6rem;
  min-width: 80px;
  text-align: center;
}

.path-badge {
  display: inline-block;
  background: var(--teal-dim);
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  margin-right: 4px;
}

.banner-priority {
  background: var(--red-dim);
  border-color: var(--red);
}
.banner-priority strong { color: var(--red); }
.link-btn {
  background: none;
  border: none;
  color: var(--amber);
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
  font-size: inherit;
}

.text-teal { color: var(--teal) !important; }
.text-red { color: var(--red) !important; }
.text-muted { color: var(--text-muted) !important; }

.section-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 22px 0 10px;
  font-weight: 700;
}