:root{
  --bg:#0b0b0f; --card:#16161d; --card2:#1f1f29; --text:#f3f3f7; --muted:#9a9aa8;
  --accent:#ffd166; --busy:#ff6b6b; --free:#4ade80; --line:#2a2a36;
  --sun:#ffd166; --moon:#ffd166; --dark:#8b8bb0;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Inter,sans-serif;-webkit-font-smoothing:antialiased}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
main{max-width:560px;margin:0 auto;padding:0 16px 16px}
.top{max-width:560px;margin:0 auto;padding:12px 16px 4px}
body.on-countdown .top{display:none}
body.on-countdown main{padding:0}
.clocks{display:flex;gap:10px}
.clock{flex:1;background:var(--card);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column}
.clock-label{font-size:12px;color:var(--muted)}
.clock-time{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.now-status{margin-top:10px;font-size:14px;color:var(--muted);line-height:1.4}
.now-status b{color:var(--text)}
.now-status.busy b{color:var(--busy)}
.now-status.free b{color:var(--free)}

.tab{display:none;padding-top:12px}
.tab.active{display:block}

.card{background:var(--card);border-radius:18px;padding:16px;margin-top:14px}
.card-title{font-size:18px;font-weight:700;margin-bottom:10px}
.muted{color:var(--muted)}

/* countdown */
.big{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:12px 16px calc(76px + env(safe-area-inset-bottom));overflow:auto}
.bg{position:absolute;inset:0;background:url(us.jpg) center 40%/cover no-repeat;z-index:-1}
.bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.22)}
.big-label{font-size:14px;letter-spacing:3px;text-transform:uppercase;color:#fff;opacity:.9;margin-bottom:10px;text-shadow:0 1px 8px rgba(0,0,0,.7)}
/* колонка не шире промежутка между лицами на фото */
.count{display:flex;flex-direction:column;gap:10px;width:min(92vw,max(28vw,37vh))}
.tile{background:rgba(0,0,0,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:18px;padding:12px 8px 10px}
.tile>b{display:block;font-size:clamp(40px,8.5vh,72px);line-height:1;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-1px}
.tile>span,.mini span{display:block;margin-top:6px;font-size:12px;color:#fff;opacity:.85;text-transform:uppercase;letter-spacing:2px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
.mini b{display:block;font-size:clamp(30px,6vh,52px);line-height:1;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.count.done{width:min(92vw,520px)}
.count.done .tile>b{font-size:clamp(28px,5vh,48px);letter-spacing:0}
.big-when{margin-top:12px;font-size:13px;color:#fff;opacity:.9;line-height:1.5;text-shadow:0 1px 8px rgba(0,0,0,.8);max-width:min(92vw,max(28vw,37vh))}

/* calendar */
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;background:var(--card);border-radius:14px;padding:10px 14px;font-size:14px}
.legend span{white-space:nowrap}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.month-title{font-size:24px;font-weight:800}
.month-title small{font-weight:400;color:var(--muted)}
.nav{background:var(--card);color:var(--text);border:0;border-radius:12px;width:40px;height:40px;font-size:24px;line-height:1;cursor:pointer}
.tz-toggle{display:flex;align-items:center;gap:8px;margin:10px 0;font-size:13px;color:var(--muted)}
.tz{background:var(--card);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer}
.tz.active{background:var(--accent);color:#1a1200;border-color:var(--accent);font-weight:700}
.weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:12px;color:var(--muted);padding:6px 0}
.weekdays .we{color:#66667a}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.day{aspect-ratio:1/1.15;border-radius:12px;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;border:2px solid transparent;position:relative}
.day.empty{background:transparent;cursor:default}
.day .n{font-size:16px;font-weight:600}
.day.we .n{color:#8a8a9c}
.day .i{font-size:18px;line-height:1;min-height:20px}
.day.today{border-color:var(--accent)}
.day.sel{background:var(--card2);border-color:#fff}
.day.meet .n{color:var(--accent)}
.day.meet::after{content:"💛";position:absolute;top:2px;right:4px;font-size:10px}
.day.past{opacity:.45}
.detail-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.detail-row:last-child{border-bottom:0}
.detail-row b{font-variant-numeric:tabular-nums}

/* bottom tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;background:rgba(16,16,22,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
.tab-btn{background:none;border:0;color:var(--muted);font-size:20px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;min-width:90px}
.tab-btn span{font-size:11px}
.tab-btn.active{color:var(--accent)}