:root{
  --bg:#000;
  --text:#fff;
  --muted:#b7b7b7;
  --border:#2a2a2a;
  --ring-track:rgba(255,255,255,.18);
  --ring:#16A149;
  --blue:#19A8FF;
  --shadow:0 10px 30px rgba(0,0,0,.6);
  --task-bg:#0b0b0b;
  --task-border:#242424;
  --task-check:#16A149;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  text-rendering: optimizeLegibility;
}

*,body,html{
      font-family: "Inter Tight", sans-serif;
}

.stage{ max-width:760px; margin:0 auto; min-height:100%; padding:24px; display:flex; flex-direction:column; }
.top-right{ margin-left:auto; font-size:18px; }
.muted{color:var(--muted)}
.main{ flex:1; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:20px; }
.today-line{ font-size:18px; color:#fff; margin-bottom:8px;  text-align:center; }

.circle{ position:relative; width:260px; height:260px; display:grid; place-items:center; cursor:pointer; user-select:none; }
.svg{width:100%; height:100%; transform:rotate(-90deg)}
.track{stroke:var(--ring-track)}
.arc{ stroke:var(--ring); width:10px; filter: drop-shadow(0 0 10px rgba(22,161,73,.25)); }

.time{ position:absolute; font-variant-numeric: tabular-nums; font-weight:200; font-size:50px; letter-spacing:-1px; }

.controls{display:flex; gap:10px; margin-top:6px}
.btn{
  background:#0c0c0c; color:var(--text); border:2px solid #282828;
  padding:10px 16px; border-radius:8px; font-weight:600; font-size:14px; letter-spacing:.2px; cursor:pointer;
  transition:opacity .15s ease,   color .15s ease, border-color .15s ease;
}
.btn:hover{opacity:.88}
.btn:active{opacity:.72}
.btn.btn--ghost{border-color:var(--border); color:#e8e8e8}
.btn.btn--solid{ border-color:transparent; background:var(--blue); color:#001016; }
.btn.wide{width:100%}

dialog.dialog{ border:none; border-radius:12px; padding:0; background:#0c0c0c; color:var(--text); box-shadow:var(--shadow); }
.dialog::backdrop{background:rgba(0,0,0,.6)}
.dialog__body{padding:18px; min-width:340px}
.dialog__body h3{margin:0 0 8px 0; font-size:18px}
.field{display:flex; flex-direction:column; gap:6px; margin:14px 0 8px}
.field input{ background:#050505; border:1px solid var(--border); color:var(--text); padding:10px 12px; border-radius:8px; font-size:14px; }
.dialog__menu{display:flex; justify-content:flex-end; gap:8px; margin-top:10px}
.row{display:flex; gap:10px; margin-top:8px}

/* ---------- Minimal task UI (improved) ---------- */
.taskbox{ width:100%; max-width:520px; margin-top:6px; }
.task-form{ display:flex; gap:8px; }
.task-form input{
  flex:1; background:#050505; border:1px solid var(--task-border); color:var(--text);
  padding:10px 12px; border-radius:10px; font-size:14px;
}
.task-view{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--task-bg); border:1px solid var(--task-border);
  border-radius:12px; padding:10px 12px; margin-top:8px;
  transition:opacity .2s ease, transform .2s ease;
}
.task-view.vanish{ opacity:0; transform:translateY(-4px) scale(.98); }

.task-label{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.task-text{ line-height:1.2; }

.task-label input{
  /* visually hide native checkbox but keep it accessible */
  position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip:rect(0 0 0 0);
}
.custom-checkbox{
  width:20px; height:20px; border:1px solid var(--task-border);
  border-radius:6px; display:inline-grid; place-items:center;
  color:#fff; background:#0a0a0a;
  transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.custom-checkbox .tick{ opacity:0; transform:scale(.7); transition:opacity .12s ease, transform .12s ease; }
.task-label input:focus + .custom-checkbox{ box-shadow:0 0 0 3px rgba(25,168,255,.25); }
.task-label input:checked + .custom-checkbox{
  background:var(--task-check); border-color:var(--task-check);
}
.task-label input:checked + .custom-checkbox .tick{ opacity:1; transform:scale(1); }
.task-label.done .task-text{ color:var(--muted); text-decoration:line-through; }

/* Clear (×) button */
.iconbtn{
  background:transparent; color:#cfcfcf;
  border:1px solid var(--task-border); width:34px; height:34px;
  border-radius:10px; cursor:pointer; display:grid; place-items:center;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.iconbtn:hover{ background:#0f0f0f; color:#fff; border-color:#2e2e2e; }
.iconbtn:active{ transform:scale(.98); }
.icon{ display:block }