/* index.css — extracted from inline <style> blocks. Generated by scripts/h1-extract.mjs */
:root{
    --bg:#1a1b26; --panel:#24283b; --ink:#c0caf5; --muted:#7982a9;
    --accent:#7aa2f7; --focus:#f7768e; --short:#9ece6a; --long:#bb9af7;
    --border:#2f334d;
  }
  *{box-sizing:border-box}
  body{
    margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg);color:var(--ink);min-height:100vh;
    display:flex;justify-content:center;padding:24px;
  }
  .app{width:100%;max-width:960px;display:grid;gap:20px;grid-template-columns:1fr;}
  @media(min-width:860px){.app{grid-template-columns:1.2fr 1fr}}
  h1{margin:0 0 4px;font-size:22px;letter-spacing:.5px}
  .sub{color:var(--muted);font-size:13px;margin-bottom:18px}
  .card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:22px}
  .timer{text-align:center}
  .modes{display:flex;gap:8px;justify-content:center;margin-bottom:18px;flex-wrap:wrap}
  .mode{
    background:transparent;border:1px solid var(--border);color:var(--ink);
    padding:8px 14px;border-radius:999px;cursor:pointer;font-size:13px;transition:.15s;
  }
  .mode.active{background:var(--accent);border-color:var(--accent);color:#1a1b26;font-weight:600}
  .mode[data-mode=focus].active{background:var(--focus);border-color:var(--focus)}
  .mode[data-mode=short].active{background:var(--short);border-color:var(--short)}
  .mode[data-mode=long].active{background:var(--long);border-color:var(--long)}
  .time{font-size:clamp(72px,14vw,128px);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-2px;line-height:1;margin:10px 0}
  .progress{height:6px;background:var(--border);border-radius:999px;overflow:hidden;margin:18px 0}
  .progress>div{height:100%;background:var(--focus);width:0;transition:width .3s}
  .controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:8px}
  button.btn{
    background:var(--accent);color:#1a1b26;border:none;padding:12px 28px;
    border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:.15s;
  }
  button.btn:hover{transform:translateY(-1px)}
  button.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--ink)}
  .session-label{color:var(--muted);font-size:13px;margin-top:4px}
  h2{font-size:15px;margin:0 0 14px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
  .settings-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
  .field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
  .field input,.field select{
    width:100%;background:var(--bg);border:1px solid var(--border);color:var(--ink);
    padding:8px 10px;border-radius:8px;font-size:14px;
  }
  .field.full{grid-column:1/-1}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
  .stat{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px;text-align:center}
  .stat .n{font-size:24px;font-weight:700;color:var(--accent)}
  .stat .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
  .history{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
  .hrow{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:var(--bg);border-radius:8px;font-size:13px;border:1px solid var(--border)}
  .hrow .tag{padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600}
  .tag.focus{background:rgba(247,118,142,.2);color:var(--focus)}
  .tag.short{background:rgba(158,206,106,.2);color:var(--short)}
  .tag.long{background:rgba(187,154,247,.2);color:var(--long)}
  .empty{color:var(--muted);font-size:13px;text-align:center;padding:16px 0}
  .row{display:flex;gap:8px;align-items:center}
  .row label{font-size:13px;color:var(--muted)}
  input[type=checkbox]{accent-color:var(--accent)}
  .clear{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:8px;padding:4px 10px;font-size:11px;cursor:pointer}
  .clear:hover{color:var(--ink)}
  @media (max-width:768px){
    body{padding:14px}
    .app{gap:14px}
    h1{font-size:18px;margin-bottom:2px}
    .sub{font-size:12px;margin-bottom:12px}
    .card{padding:16px;border-radius:12px}
    .time{font-size:64px;margin:6px 0;letter-spacing:-1px}
    .progress{margin:12px 0}
    .mode{min-height:44px;padding:8px 16px;font-size:13px}
    button.btn{min-height:44px;padding:10px 22px;font-size:14px}
    .field input,.field select{min-height:44px;font-size:14px}
    input[type=checkbox]{width:20px;height:20px}
    .stats{gap:8px}
    .stat{padding:10px}
    .stat .n{font-size:20px}
    .stat .l{font-size:10px}
    .hrow{min-height:44px;font-size:12px}
    .history{max-height:180px}
    .clear{min-height:32px;font-size:11px}
    h2{font-size:13px}
  }
  @media (max-width:480px){
    body{padding:10px}
    .card{padding:14px}
    .time{font-size:54px}
    .modes{gap:6px;margin-bottom:12px}
    .mode{padding:8px 12px;font-size:12px}
    button.btn{padding:10px 18px}
    .settings-grid{grid-template-columns:1fr}
    .stats{grid-template-columns:repeat(3,1fr);gap:6px}
    .stat{padding:8px}
    .stat .n{font-size:18px}
    .session-label{font-size:12px}
    h1{font-size:16px}
  }