/* Minimal, calm UI. No external assets. */
:root{
  --bg:#0f1115;
  --card:#151923;
  --text:#e9ecf2;
  --muted:#a6b0c3;
  --line:#2a3242;
  --primary:#4c7dff;
  --danger:#ff4c6a;
  --secondary:#2d3547;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Apple SD Gothic Neo, Noto Sans KR, sans-serif;
  background: radial-gradient(1200px 800px at 30% 10%, #1a2140 0%, var(--bg) 45%);
  color:var(--text);
}

.app{min-height:100%; display:flex; flex-direction:column}
.topbar{
  padding:16px 16px 8px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:10px}
.dot{width:10px;height:10px;border-radius:999px;background:var(--primary); box-shadow:0 0 18px rgba(76,125,255,.55)}
.title{font-weight:700; letter-spacing:.2px}

.main{flex:1; display:flex; align-items:flex-start; justify-content:center; padding:8px 16px 16px}
.view{width:min(520px, 100%);}
.hidden{display:none !important;}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  border-radius:var(--radius);
  padding:18px;
  backdrop-filter: blur(10px);
}

.timer-card{padding-top:22px}

.ring{display:flex; justify-content:center; margin-top:6px}
.ring-svg{width:220px; height:220px}
.ring-track{
  fill:none;
  stroke: rgba(255,255,255,.08);
  stroke-width:10;
}
.ring-progress{
  fill:none;
  stroke: rgba(76,125,255,.95);
  stroke-width:10;
  stroke-linecap:round;
  transform: rotate(-90deg);
  transform-origin: 60px 60px;
  stroke-dasharray: 326.7256;
  stroke-dashoffset: 0;
}

.time{margin-top:-6px; text-align:center}
.time-text{font-size:56px; font-weight:800; letter-spacing:1px}
.sub-text{margin-top:6px; color:var(--muted); font-size:14px}

.controls{display:flex; gap:10px; margin-top:16px}
.btn{
  border:none;
  border-radius:14px;
  padding:12px 14px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  color:var(--text);
  background:var(--secondary);
  flex:1;
}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.primary{background:var(--primary)}
.btn.danger{background:var(--danger)}
.btn.secondary{background:#27314a}
.btn.ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  flex:0;
  padding:10px 12px;
  border-radius:12px;
}

.row{display:flex; gap:10px; margin-top:14px; align-items:center}
.row.space-between{justify-content:space-between}
.field{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
}
.field span{color:var(--muted); font-size:13px}
.field input{
  width:86px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.15);
  color:var(--text);
  font-size:15px;
  font-weight:700;
}

.status{
  margin-top:12px;
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.14);
  color:var(--muted);
  font-size:13px;
}

.headline{font-size:28px; font-weight:900; margin-bottom:12px}
.headline.small{font-size:20px; margin:0}

.result{display:flex; flex-direction:column; gap:10px; margin:12px 0 16px}
.result-line{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
}
.result-line span{color:var(--muted)}

.stats{display:flex; gap:10px; margin-top:12px}
.stat{
  flex:1;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
}
.stat-label{color:var(--muted); font-size:13px}
.stat-value{font-size:22px; font-weight:900; margin-top:4px}

.list{margin-top:12px; display:flex; flex-direction:column; gap:8px; max-height:420px; overflow:auto; padding-right:4px}
.item{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.item .left{display:flex; flex-direction:column; gap:2px}
.item .when{color:var(--muted); font-size:12px}
.item .main{font-weight:800}
.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);
}

.hint{margin-top:12px; color:var(--muted); font-size:12px; line-height:1.35}

.footer{
  padding:10px 16px 16px;
  display:flex; justify-content:center;
}
.footer-text{color:rgba(255,255,255,.55); font-size:12px}