/* Mesmo esqueleto dos outros apps, com violeta no lugar da cor de cada um. */
:root {
  --paper:#EEEBF3; --surface:#FAF9FC; --ink:#1B1724; --mute:#625C70; --line:#DAD5E3;
  --accent:#6447C9; --on-accent:#fff; --track:#E2DCEE; --bad:#B4332A;
  --hero1:#6447C9; --hero2:#B44A8C;
  --c-blue:#2E62B8; --c-red:#C0392B; --c-purple:#7A4BC4; --c-green:#2E7D4F; --c-pink:#C2407E; --c-orange:#C0661A; --c-gray:#6B6577;
  --display:"Bricolage Grotesque", system-ui, sans-serif; --text:"Figtree", system-ui, sans-serif;
}
:root[data-theme=dark] {
  --paper:#15131C; --surface:#1F1C29; --ink:#EEEAF6; --mute:#A49DB3; --line:#2F2B3B;
  --accent:#A994F7; --on-accent:#15131C; --track:#2C2838; --bad:#F07A6E;
  --hero1:#3B2C82; --hero2:#7A2F63;
  --c-blue:#86B0F2; --c-red:#F08A7E; --c-purple:#B99AF2; --c-green:#6FD39A; --c-pink:#F290C0; --c-orange:#F2A866; --c-gray:#A49DB3;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { scrollbar-gutter:stable; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.45 var(--text); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
[hidden] { display:none !important; }
.num { font-variant-numeric:tabular-nums; }
.mute { color:var(--mute); }

.bar { max-width:760px; margin:auto; padding:24px 16px 8px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.bar h1 { font:800 34px/1 var(--display); font-stretch:80%; letter-spacing:-.01em; margin:0; }
.hello { margin:0 0 4px; color:var(--mute); font-weight:600; font-size:15px; }
.theme { display:flex; align-items:center; gap:6px; background:none; border:1px solid var(--line); border-radius:99px; padding:8px 10px; color:var(--ink); cursor:pointer; }
.theme svg { width:18px; height:18px; }
.theme:hover { background:var(--surface); }
:root[data-theme=dark] .i-sun, :root:not([data-theme=dark]) .i-moon { display:none; }

main { max-width:760px; margin:auto; padding:8px 16px 48px; display:grid; gap:28px; }
.sec { font:800 22px/1.1 var(--display); font-stretch:85%; margin:0 0 12px; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:12px; padding:10px 16px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font:700 15px var(--text); cursor:pointer; touch-action:manipulation; }
.btn:hover { border-color:var(--mute); }
.btn:disabled { opacity:.45; cursor:default; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn.ghost { background:none; }
.btn.sm { padding:6px 12px; font-size:14px; border-radius:99px; }
.btn.icon { width:42px; height:42px; padding:0; font-size:24px; line-height:1; }
.btn svg { width:18px; height:18px; }
.btn.busy svg { animation:spin .9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* contador */
.count { position:relative; overflow:hidden; border-radius:24px; padding:22px 20px 24px; color:#fff;
  background:radial-gradient(120% 140% at 0% 0%, var(--hero1), transparent 60%), radial-gradient(120% 140% at 100% 100%, var(--hero2), transparent 60%), #2A2140; }
.count::after { content:""; position:absolute; right:-60px; top:-60px; width:200px; height:200px; border-radius:50%; border:28px solid rgb(255 255 255 / .07); pointer-events:none; }
.count-top { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.kicker { text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:700; opacity:.8; }
.count .btn { color:#fff; border-color:rgb(255 255 255 / .35); position:relative; z-index:1; }
.count .btn:hover { background:rgb(255 255 255 / .12); }
.count h2 { font:800 30px/1.1 var(--display); font-stretch:82%; margin:14px 0 4px; overflow-wrap:anywhere; }
.when { margin:0; opacity:.82; font-size:15px; }
.when::first-letter { text-transform:uppercase; }
.clock { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:18px; }
.clock div { background:rgb(255 255 255 / .1); border:1px solid rgb(255 255 255 / .14); border-radius:16px; padding:12px 4px 10px; text-align:center; }
.clock b { display:block; font:800 clamp(28px, 8vw, 44px)/1 var(--display); font-stretch:80%; }
.clock span { font-size:12px; font-weight:600; opacity:.75; }
.done { font:800 26px var(--display); margin:18px 0 0; }

/* apps */
.apps { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap:10px; }
.app { display:flex; align-items:center; gap:14px; padding:12px 14px 12px 12px; background:var(--surface); border:1px solid var(--line); border-radius:18px;
  text-decoration:none; transition:transform .15s, border-color .15s, box-shadow .15s; }
.app:hover { transform:translateY(-2px); border-color:var(--c); box-shadow:0 6px 18px -10px var(--c); }
.app img { border-radius:13px; flex:none; }
.app span { flex:1; min-width:0; display:grid; }
.app b { font:800 19px/1.15 var(--display); font-stretch:85%; }
.app small { color:var(--mute); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app .go { width:18px; height:18px; color:var(--mute); flex:none; }

/* What I've done */
.wid-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.wid-head .sec { margin:0; }
.month { display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:8px; }
.month .mid { flex:1; text-align:center; }
.month h3 { margin:0; font:800 20px/1.2 var(--display); font-stretch:85%; }
.month .mute { font-size:14px; }
.msg { margin:14px 2px 0; color:var(--mute); }
.sync { margin:10px 2px 0; font-size:14px; }
.sync b { color:var(--ink); }
.cats { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap:10px; margin-top:12px; }
.cat { --k:var(--c-gray); background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--k); border-radius:16px; padding:12px 14px 10px; }
.cat[data-c=blue] { --k:var(--c-blue); } .cat[data-c=red] { --k:var(--c-red); } .cat[data-c=purple] { --k:var(--c-purple); }
.cat[data-c=green] { --k:var(--c-green); } .cat[data-c=pink] { --k:var(--c-pink); } .cat[data-c=orange] { --k:var(--c-orange); }
.cat header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.cat .dot { width:10px; height:10px; border-radius:50%; background:var(--k); }
.cat h4 { flex:1; margin:0; font:800 17px var(--display); font-stretch:88%; }
.cat header b { font:800 22px/1 var(--display); color:var(--k); }
.cat ul { list-style:none; margin:0; padding:0; }
.cat li { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid var(--line); font-size:15px; }
.cat li a { text-decoration:none; min-width:0; overflow-wrap:anywhere; }
.cat li a:hover { text-decoration:underline; }
.cat time { color:var(--mute); font-size:13px; white-space:nowrap; }
.foot { font-size:13px; margin:14px 2px 0; }

/* pop-up */
dialog { border:1px solid var(--line); border-radius:20px; background:var(--surface); color:var(--ink); padding:20px; width:min(420px, calc(100% - 32px)); }
dialog::backdrop { background:rgb(10 8 16 / .55); }
dialog h2 { margin:0 0 12px; font:800 22px var(--display); }
dialog label { display:grid; gap:5px; font-weight:600; font-size:14px; margin-bottom:12px; }
dialog input { font:16px var(--text); padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--paper); color:var(--ink); }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px; }
.grow { flex:1; }

@media (prefers-reduced-motion: reduce) { .app, .btn.busy svg { transition:none; animation:none; } }