* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  html, body { font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; background: #FAFAFA; color: #1E293B; overflow-x: hidden; }
  button { font-family: inherit; }

  /* ── Header ── */
  .header { background: #111827; padding: 16px 5%; display: flex; align-items: center; gap: 10px; }
  .logo { width: 32px; height: 32px; border-radius: 8px; background: #FB923C; display: flex; align-items: center; justify-content: center; font-size: 16px; }
  .header-title { font-weight: 800; font-size: 18px; color: #fff; }
  .header-tag { font-size: 11px; color: rgba(255,255,255,0.4); letter-spacing: 1px; }

  /* ── Setup screen ── */
  .setup { max-width: 640px; margin: 0 auto; padding: 32px 5% 60px; }
  .title { font-weight: 800; font-size: clamp(26px,5vw,38px); color: #111827; text-align: center; margin-bottom: 6px; }
  .subtitle { font-size: 14px; color: #64748B; text-align: center; margin-bottom: 28px; }

  .section-label { font-size: 12px; font-weight: 700; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }

  .presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
  .preset-btn { display: flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 24px; border: 1.5px solid #E2E8F0; background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; color: #374151; }
  .preset-btn .muted { color: #94A3B8; font-weight: 400; }
  .preset-btn.active { border-color: #FB923C; background: #FB923C15; color: #EA580C; }

  .selected-info { font-size: 12px; color: #94A3B8; text-align: center; margin: 12px 0 24px; }
  .selected-info strong { color: #111827; }

  .collapsible { padding: 0; overflow: hidden; }
  .collapse-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; background: none; border: none; cursor: pointer; text-align: left; }
  .collapse-toggle .chevron { font-size: 14px; color: #94A3B8; transition: transform 0.2s; }
  .collapse-toggle.open .chevron { transform: rotate(180deg); }
  .collapse-body { padding: 0 24px 24px; }

  .card { background: #fff; border-radius: 20px; border: 1px solid #E2E8F0; padding: 24px; margin-bottom: 20px; }

  .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 18px; margin-bottom: 18px; }
  .setting-label { font-size: 12px; font-weight: 600; color: #64748B; margin-bottom: 8px; }
  .setting-control { display: flex; align-items: center; gap: 8px; }
  .step-btn { width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid #E2E8F0; background: #fff; cursor: pointer; font-size: 16px; font-weight: 700; color: #64748B; }
  .setting-value { flex: 1; text-align: center; font-weight: 800; font-size: 20px; }
  .setting-unit { font-size: 12px; color: #94A3B8; font-weight: 600; }

  .total-box { background: #F3F4F6; border-radius: 10px; padding: 10px 14px; font-size: 13px; color: #64748B; text-align: center; }
  .total-box strong { color: #111827; }

  .sound-options { display: flex; gap: 8px; flex-wrap: wrap; }
  .sound-btn { padding: 8px 16px; border-radius: 20px; border: 1.5px solid #E2E8F0; background: #fff; color: #64748B; font-size: 13px; font-weight: 600; cursor: pointer; }
  .sound-btn.active { border-color: #FB923C; background: #FB923C15; color: #EA580C; }

  .start-btn { width: 100%; padding: 18px; border-radius: 16px; background: #111827; color: #fff; border: none; font-size: 18px; font-weight: 800; cursor: pointer; }
  .start-btn:active { background: #1F2937; }

  .offline-note { margin-top: 20px; text-align: center; font-size: 12px; color: #94A3B8; line-height: 1.6; }

  /* ── Active workout screen ── */
  .workout-screen { position: fixed; inset: 0; top: 56px; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; color: #fff; }
  .workout-screen.show { display: flex; }
  .workout-screen.phase-work { background: linear-gradient(160deg, #1F2937, #111827); }
  .workout-screen.phase-rest { background: linear-gradient(160deg, #064E3B, #022C22); }
  .workout-screen.phase-done { background: linear-gradient(160deg, #1F2937, #0B0F19); }

  .round-label { font-size: 14px; font-weight: 700; letter-spacing: 2px; color: rgba(255,255,255,0.6); margin-bottom: 12px; text-transform: uppercase; }
  .phase-label { font-size: clamp(18px,4vw,28px); font-weight: 800; letter-spacing: 4px; margin-bottom: 24px; }
  .phase-label.work { color: #FB923C; }
  .phase-label.rest { color: #6EE7B7; }

  .countdown { font-weight: 900; line-height: 1; margin-bottom: 32px; font-size: clamp(90px,25vw,180px); text-shadow: 0 4px 30px rgba(0,0,0,0.4); transition: font-size 0.15s ease, color 0.15s ease; }
  .countdown.big { font-size: clamp(140px,40vw,260px); }
  .countdown.work-color { color: #FB923C; }
  .countdown.rest-color { color: #6EE7B7; }

  .progress-track { width: min(80vw,400px); height: 8px; border-radius: 4px; background: rgba(255,255,255,0.2); overflow: hidden; margin-bottom: 40px; }
  .progress-fill { height: 100%; border-radius: 4px; transition: width 1s linear; }
  .progress-fill.work { background: #FB923C; }
  .progress-fill.rest { background: #6EE7B7; }

  .controls { display: flex; gap: 12px; }
  .ctrl-btn { padding: 14px 28px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; border: none; }
  .ctrl-pause { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
  .ctrl-stop { background: rgba(220,38,38,0.85); color: #fff; }
  .ctrl-done { background: #FB923C; color: #111827; padding: 14px 32px; font-size: 15px; font-weight: 700; border: none; border-radius: 12px; cursor: pointer; }

  .paused-label { margin-top: 20px; font-size: 14px; color: rgba(255,255,255,0.6); letter-spacing: 2px; font-weight: 700; }

  .done-emoji { font-size: 80px; margin-bottom: 8px; }
  .done-title { font-weight: 800; font-size: clamp(32px,8vw,56px); margin-bottom: 8px; }
  .done-sub { font-size: 16px; color: rgba(255,255,255,0.8); margin-bottom: 32px; }