:root{
    --bg: #0a0a0a;
    --panel: #131313;
    --line: #262626;
    --text: #ededed;
    --muted: #8a8a8a;
    --accent: #d1ff4d;
    --rest: #4dc9ff;
    --ready: #ff8f4d;
    --done: #b98cff;
  }
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
  html,body{ height:100%; }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:28px 18px 40px;
    max-width:420px;
    margin:0 auto;
    min-height:100%;
  }
  .eyebrow{
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--accent);
    font-weight:600;
    margin-bottom:6px;
    align-self:flex-start;
  }
  h1{
    font-family:'Bebas Neue',sans-serif;
    font-size:34px;
    letter-spacing:0.02em;
    align-self:flex-start;
    margin-bottom:18px;
  }

  /* SETUP SCREEN */
  .setup-screen{ width:100%; }
  .setup-fields{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    padding:18px;
  }
  .field{ margin-bottom:14px; }
  .field:last-child{ margin-bottom:0; }
  .field label{
    display:block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--muted);
    margin-bottom:8px;
  }
  .field-row{ display:flex; gap:12px; margin-bottom:14px; }
  .field-row .field{ flex:1; margin-bottom:0; }
  input[type="number"]{
    width:100%;
    background:#0f0f0f;
    color:var(--text);
    border:1px solid var(--line);
    border-radius:8px;
    padding:12px 14px;
    font-size:16px;
    font-family:'Inter',sans-serif;
  }
  input[type="number"]:focus{ outline:none; border-color:var(--accent); }

  .setup-preview{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--line);
    font-size:12.5px;
    color:var(--muted);
    text-align:center;
    line-height:1.6;
  }
  .setup-preview b{ color:var(--accent); }

  .start-btn{
    width:100%;
    margin-top:16px;
    padding:15px;
    border-radius:10px;
    border:none;
    background:var(--accent);
    color:#0a0a0a;
    font-weight:700;
    font-size:15px;
    letter-spacing:0.02em;
    cursor:pointer;
  }

  /* TIMER SCREEN */
  .timer-screen{
    display:none;
    width:100%;
    flex-direction:column;
    align-items:center;
    flex:1;
  }
  .timer-screen.active{ display:flex; }
  .setup-screen.hidden, header.hidden{ display:none; }

  .round-tag{
    font-size:12px;
    color:var(--muted);
    letter-spacing:0.06em;
    text-transform:uppercase;
    margin-top:10px;
  }
  .phase-tag{
    font-family:'Bebas Neue',sans-serif;
    font-size:26px;
    letter-spacing:0.05em;
    margin-top:6px;
  }
  .phase-tag.work{ color:var(--accent); }
  .phase-tag.rest{ color:var(--rest); }
  .phase-tag.ready{ color:var(--ready); }
  .phase-tag.done{ color:var(--done); }

  .ring-wrap{ position:relative; width:250px; height:250px; margin:26px 0; }
  svg.ring{ transform:rotate(-90deg); }
  .ring-track{ stroke:#1c1c1c; }
  .ring-progress{ stroke:var(--accent); stroke-linecap:round; transition:stroke 0.2s ease; }
  .ring-progress.rest{ stroke:var(--rest); }
  .ring-progress.ready{ stroke:var(--ready); }
  .ring-center{
    position:absolute; inset:0;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
  }
  .time-num{ font-family:'Bebas Neue',sans-serif; font-size:76px; line-height:1; }

  .next-up{ font-size:12.5px; color:var(--muted); margin-top:10px; text-align:center; }
  .next-up b{ color:var(--text); font-weight:600; }

  .controls{ display:flex; gap:10px; width:100%; margin-top:auto; padding-top:24px; }
  .ctrl-btn{
    flex:1; padding:14px; border-radius:10px;
    border:1px solid var(--line); background:#0f0f0f;
    color:var(--text); font-size:14px; font-weight:600; cursor:pointer;
    font-family:'Inter',sans-serif;
  }
  .ctrl-btn.primary{ background:var(--accent); color:#0a0a0a; border:none; }
  .ctrl-btn.exit{ flex:0 0 auto; padding:14px 16px; color:var(--muted); }

  .progress-dots{
    display:flex; gap:5px; margin-top:16px;
    flex-wrap:wrap; justify-content:center; max-width:260px;
  }
  .pdot{ width:7px; height:7px; border-radius:50%; background:#2a2a2a; }
  .pdot.filled{ background:var(--accent); }
  .pdot.current{ background:var(--rest); }