:root{
  --bg: #0c1020;
  --panel: #121733;
  --text: #e6ecff;
  --muted: #9aa3c1;
  --card: #0e1430;
  --ring: #1b2147;
  --accent: #fb7185; /* red default */
  --accent-weak: rgba(251,113,133,.25);
  --shadow: 0 20px 40px rgba(2,6,23,.35);
  --font: "Kumbh Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

:root.purple{ --accent:#a78bfa; --accent-weak: rgba(167,139,250,.25); }
:root.cyan  { --accent:#22d3ee; --accent-weak: rgba(34,211,238,.25); }
:root.green { --accent:#34d399; --accent-weak: rgba(52,211,153,.25); }
:root.font-slab{ --font: "Roboto Slab", Georgia, serif; }
:root.font-mono{ --font: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  background: radial-gradient(1200px 700px at 70% -10%, #1b2150 0%, transparent 60%),
              radial-gradient(900px 500px at -10% 110%, #121944 0%, transparent 60%),
              var(--bg);
  color: var(--text);
}

.topbar{
  position: sticky; top:0; z-index: 10;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; backdrop-filter: blur(6px);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .dot{ width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow: 0 0 20px var(--accent); }
.brand h1{ font-size:1.2rem; letter-spacing:.6px; margin:0; }

.actions .icon-btn{
  background: transparent; border:1px solid #28305f; color:var(--text); border-radius:12px; padding:10px; cursor:pointer;
}
.icon-btn:hover{ border-color: var(--accent); }

.container{
  max-width: 900px; margin: 20px auto; padding: 0 18px;
  display:grid; gap:18px;
}

.modes{
  display:flex; gap:10px; background: rgba(255,255,255,.03); padding:8px; border-radius:999px; border:1px solid #293162;
  align-self:center;
}
.mode-btn{
  appearance:none; border:none; background:transparent; color:var(--muted); padding:10px 14px; border-radius:999px; cursor:pointer; font-weight:700;
}
.mode-btn.active{ background: var(--accent-weak); color:var(--text); }

.timer-card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid #263060; border-radius:22px; padding:20px; box-shadow: var(--shadow);
}

.ring{
  position: relative; width: min(420px, 88vw); margin: 24px auto; aspect-ratio: 1/1;
  display:grid; place-items:center;
}
.progress{
  width:100%; height:100%;
}
circle.track{
  fill: none; stroke: var(--ring); stroke-width: 12; opacity:.9;
}
circle.indicator{
  fill: none; stroke: var(--accent); stroke-width: 12;
  stroke-linecap: round; transform-origin: 50% 50%;
  transform: rotate(-90deg);
  stroke-dasharray: 339.292; /* 2πr, r=54 */
  stroke-dashoffset: 339.292;
  filter: drop-shadow(0 0 10px var(--accent));
}

.time{
  position: absolute; inset:0; display:grid; place-items:center; gap:10px;
}
#timeText{
  font-size: clamp(2.6rem, 7vw, 4.5rem);
  font-weight: 800;
  letter-spacing: 2px;
}
.controls{ display:flex; gap:10px; margin-top:6px; }
.primary-btn, .ghost-btn{
  border:none; padding:12px 16px; border-radius:12px; font-weight:800; cursor:pointer;
}
.primary-btn{ background: var(--accent); color:#0a0f24; }
.ghost-btn{ background: transparent; color: var(--muted); border:1px solid #2a356b; }
.ghost-btn:hover{ border-color: var(--accent); color: var(--text); }

.meta{
  display:flex; gap:16px; justify-content:center; margin-top:14px;
}
.meta .label{ color: var(--muted); font-size:.85rem; }
.meta strong{ font-size:1.2rem; }

.tips{
  text-align:center; color: var(--muted);
}

.footer{
  text-align:center; color:var(--muted); padding:24px;
}

/* Modal */
dialog{
  border:none; padding:0; border-radius:18px; max-width: 760px; width: 94%;
  background: var(--panel); color: var(--text); box-shadow: var(--shadow);
}
.modal{ padding:16px; }
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.modal-body{ margin-top:8px; }
.grid{ display:grid; gap:14px; grid-template-columns: 1fr 1fr; }
.card{ background: rgba(255,255,255,.03); border:1px solid #2a356b; border-radius:14px; padding:14px; }
.card h3{ margin:4px 0 12px 0; font-size:1rem; }
.row{ display:grid; gap:10px; grid-template-columns: 1fr 1fr; }
label{ display:grid; gap:6px; font-size:.95rem; color: var(--text); }
input[type="number"]{ background:#0d1330; color:var(--text); border:1px solid #2a356b; border-radius:10px; padding:10px 12px; }
.check{ display:flex; gap:10px; align-items:center; }
input[type="checkbox"]{ transform: translateY(1px); }

.swatches{ display:flex; gap:10px; }
.swatch{ width:34px; height:34px; border-radius:50%; display:inline-grid; place-items:center; border:2px solid transparent; cursor:pointer; }
.swatch input{ display:none; }
.swatch.red{ background:#fb7185; }
.swatch.purple{ background:#a78bfa; }
.swatch.cyan{ background:#22d3ee; }
.swatch.green{ background:#34d399; }
.swatch:has(input:checked){ outline:3px solid white; border-color: #0b1133; }

.fonts{ display:flex; gap:10px; flex-wrap:wrap; }
.pill{ border:1px solid #2a356b; padding:8px 12px; border-radius:999px; cursor:pointer; }
.pill input{ margin-right:6px; }

.modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }

/* Responsive */
@media (max-width: 880px){
  .grid{ grid-template-columns: 1fr; }
  .row{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px){
  .row{ grid-template-columns: 1fr; }
}