:root { color-scheme: dark; --bg:#080a12; --panel:rgba(255,255,255,.045); --line:rgba(255,255,255,.11); --text:#f5f6fa; --muted:#8d93a7; --accent:#88f7cf; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:Manrope,system-ui,sans-serif; background:radial-gradient(circle at 50% -10%,#1d2942 0,transparent 38%),var(--bg); color:var(--text); overflow-x:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px); background-size:52px 52px; mask-image:linear-gradient(to bottom,black,transparent 78%); }
.noise { position:fixed; inset:0; opacity:.028; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
main { width:min(1160px,calc(100% - 32px)); margin:auto; padding:28px 0 44px; position:relative; }
.topbar { display:flex; justify-content:space-between; align-items:center; }
.brand,.label,.eyebrow { font-size:.72rem; letter-spacing:.18em; color:var(--muted); font-weight:700; }
.brand { color:#c9ceda; display:flex; gap:10px; align-items:center; }
.pulse { width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(136,247,207,.1); animation:pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 10px rgba(136,247,207,0); } }
.icon-btn { width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.03);color:#fff;font-size:1.2rem;cursor:pointer; }
.hero { text-align:center; padding:11vh 0 6vh; }
.eyebrow { color:var(--accent); margin:0 0 20px; }
h1 { font-size:clamp(3.4rem,9vw,8rem);line-height:.9;letter-spacing:-.07em;margin:0;font-weight:800; }
.subtitle { color:var(--muted);font-size:clamp(1rem,2vw,1.35rem);margin:24px 0 0; }
.clock { display:grid;grid-template-columns:1.25fr auto repeat(4,1fr auto);grid-template-columns:1.3fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:end;padding:30px 22px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));backdrop-filter:blur(14px); }
.unit { text-align:center;min-width:0; }
.unit strong { display:block;font:500 clamp(2.1rem,5.8vw,5.2rem)/1 DM Mono,monospace;letter-spacing:-.08em;font-variant-numeric:tabular-nums; }
.unit span { display:block;margin-top:12px;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.16em; }
.featured strong,.seconds strong { color:var(--accent); }
.separator { color:#4c5263;font:300 clamp(1.8rem,4vw,4rem)/1 DM Mono;margin-bottom:25px; }
.stats { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px; }
.stats article,.birthday-card { border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:22px; }
.stats strong { display:block;font:500 clamp(1.25rem,2.6vw,2rem)/1.2 DM Mono;margin-top:12px; }
.birthday-card { display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:30px;margin-top:14px; }
.birthday-card strong { display:block;font-size:1.25rem;margin-top:9px; }
.progress { height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden; }
.progress span { display:block;height:100%;width:0;background:var(--accent);border-radius:inherit;transition:width .5s ease; }
.progress-wrap small { display:block;text-align:right;color:var(--muted);margin-top:9px; }
dialog { border:1px solid var(--line);border-radius:24px;background:#10131f;color:#fff;padding:0;width:min(460px,calc(100% - 28px));box-shadow:0 30px 90px rgba(0,0,0,.55); }
dialog::backdrop { background:rgba(3,5,10,.72);backdrop-filter:blur(8px); }
form { padding:24px; }
.dialog-head { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px; }
.dialog-head h2 { margin:7px 0 0;font-size:1.5rem; }
form label { display:block;color:#cbd0dc;font-size:.85rem;margin:14px 0; }
input,select { display:block;width:100%;margin-top:8px;padding:13px 14px;border:1px solid var(--line);border-radius:12px;background:#080b14;color:#fff;font:inherit; }
.hint { color:var(--muted);font-size:.78rem;line-height:1.5; }
.save-btn { width:100%;padding:14px;border:0;border-radius:12px;background:var(--accent);color:#07110d;font-weight:800;cursor:pointer;margin-top:8px; }
@media(max-width:760px){ .hero{padding:10vh 0 5vh}.clock{grid-template-columns:repeat(5,1fr);gap:10px;padding:24px 10px}.separator{display:none}.unit strong{font-size:clamp(1.65rem,9vw,3rem)}.unit span{font-size:.55rem;letter-spacing:.08em}.stats{grid-template-columns:1fr}.birthday-card{grid-template-columns:1fr}.stats strong{font-size:1.45rem} }
@media(max-width:430px){ main{width:min(100% - 20px,1160px)} h1{font-size:3.6rem}.clock{border-radius:18px}.unit span{font-size:.48rem}.stats article,.birthday-card{padding:18px} }