:root{
  --bg:#f6f6f7; --card:#fff; --text:#111; --muted:#666;
  --brand:#6c5ce7; --brand2:#845ef7; --danger:#d62828; --ok:#2a9d8f;
  --accent:#f59f00;
  --shadow:0 6px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;background:var(--bg);color:var(--text)}

.banner{
  position:sticky;top:0;z-index:2;
  padding:16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:#fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.title{font-size:18px;font-weight:800;letter-spacing:.2px}
.chip{display:inline-block;margin-top:4px;background:rgba(255,255,255,.15);padding:3px 8px;border-radius:999px;font-size:12px}

main{padding:16px;display:grid;gap:12px;grid-template-columns:1fr;max-width:720px;margin:0 auto}
.timer{
  background:var(--card);border-radius:12px;padding:14px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr auto;gap:8px;transform-origin:top left;transition:transform .2s ease, outline-color .2s ease;
  outline:1px solid #eee;
}
.timer h3{margin:0;font-size:16px}
.meta{grid-column:1/-1;margin:0;color:var(--muted);font-size:13px}
.status{grid-column:1/-1;font-size:13px;margin:0;padding:6px 10px;border-radius:8px;display:flex;gap:8px;align-items:center;background:#f2f7ff}
.status .who{font-weight:700}
.remaining{font-variant-numeric:tabular-nums;font-weight:700}
.overdue{outline:2px solid var(--danger);animation:redGlow 1.6s ease-in-out infinite alternate}
.done{outline:2px solid var(--ok);background: #f2fbf9}
@keyframes redGlow{from{box-shadow:0 0 0 rgba(214,40,40,0)}to{box-shadow:0 0 24px rgba(214,40,40,.25)}}

.actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
button{appearance:none;border:0;border-radius:10px;padding:10px 12px;font-weight:700;background:var(--brand);color:#fff;box-shadow:var(--shadow);cursor:pointer;transition:transform .08s ease, filter .1s ease}
button:hover{filter:brightness(1.06)}
button:active{transform:scale(.98)}
button.ghost{background:#eee;color:#111}
button.small{padding:8px 10px;font-size:13px}
button.danger{background:var(--danger)}
button.ok{background:var(--ok)}
button.warn{background:var(--accent);color:#111}

#addBtn{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;font-size:28px;display:grid;place-items:center}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:grid;place-items:center;padding:16px}
.modal.hidden{display:none}
.card{background:var(--card);border-radius:12px;padding:16px;box-shadow:var(--shadow);width:100%;max-width:520px;display:grid;gap:10px}
label{display:grid;gap:6px;font-size:14px}
input,textarea{border:1px solid #ddd;border-radius:8px;padding:10px 12px;font:inherit}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* micro interactions */
.claim-pop{animation:pop .22s ease}
@keyframes pop{from{transform:scale(.98)}to{transform:scale(1)}}
.complete-flash{animation:flash .6s ease}
@keyframes flash{0%{background:#fff}50%{background:#e6fff6}100%{background:#fff}}
.chip.muted{background:rgba(255,255,255,.12); color:#f3f3f3}

.log{display:grid; gap:6px; padding:6px 0}
.log-item{background:#f7f8ff; border:1px solid #eef0ff; border-radius:8px; padding:8px 10px; font-size:13px}
.log-time{color:var(--muted); font-size:12px; margin-left:6px}
.log-empty{color:var(--muted); font-size:13px}

.history{display:grid; gap:10px}
.hist-item{background:#fff; border-radius:10px; padding:10px; box-shadow: var(--shadow)}
.hist-log .log-item{background:#fffdf6; border-color:#fff1c2}