:root {
  --bg: var(--tg-theme-bg-color, #0f1115);
  --surface: var(--tg-theme-secondary-bg-color, #181b21);
  --text: var(--tg-theme-text-color, #f5f7fa);
  --hint: var(--tg-theme-hint-color, #8a9099);
  --accent: var(--tg-theme-button-color, #5b8cff);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --line: color-mix(in srgb, var(--hint) 22%, transparent);
  --danger: #ff5d68;
  --success: #4bd37b;
  --radius: 18px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; }
body { padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
button { font: inherit; }
.shell { max-width: 720px; min-height: 100vh; margin: 0 auto; padding: 0 16px 100px; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding: 18px 2px 10px; }
.eyebrow { font-size: 13px; color: var(--hint); font-weight: 600; }
h1 { margin: 3px 0 0; font-size: 30px; letter-spacing: -.8px; }
.avatar { width: 42px; height: 42px; border-radius: 14px; background: var(--surface); display:grid; place-items:center; font-weight:800; overflow:hidden; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.summary-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin: 12px 0 24px; }
.stat { background: var(--surface); border:1px solid var(--line); border-radius:16px; padding:13px 12px; }
.stat b { display:block; font-size:22px; margin-bottom:2px; }
.stat span { color:var(--hint); font-size:12px; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin: 23px 2px 10px; }
.section-head h2 { margin:0; font-size:19px; }
.text-btn { border:0; background:transparent; color:var(--accent); padding:6px 0; font-weight:650; }
.stack { display:grid; gap:9px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px; }
.task { display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center; }
.task-main { min-width:0; }
.task-title { font-weight:700; font-size:15px; line-height:1.25; overflow-wrap:anywhere; }
.meta { margin-top:5px; color:var(--hint); font-size:12px; display:flex; gap:7px; flex-wrap:wrap; }
.pill { padding:2px 7px; border-radius:999px; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); }
.task-actions { display:flex; gap:6px; }
.icon-btn { width:38px; height:38px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--text); }
.icon-btn.done { color:var(--success); }
.event { display:grid; grid-template-columns:58px 1fr; gap:10px; }
.event-time { color:var(--accent); font-weight:750; font-size:13px; padding-top:2px; }
.event-title { font-weight:680; line-height:1.25; }
.event summary { display:grid; grid-template-columns:58px 1fr; gap:10px; cursor:pointer; list-style:none; }
.event summary::-webkit-details-marker { display:none; }
.event summary .meta { display:block; line-height:1.4; }
.event-description { border-top:1px solid var(--line); margin-top:12px; padding-top:12px; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--hint); font-size:13px; line-height:1.45; }
.week-day { margin:16px 0 20px; }
.week-day h3 { font-size:15px; text-transform:capitalize; margin:0 2px 9px; }
.week-day .empty { padding:14px; }
.settings-note { color:var(--hint); font-size:13px; line-height:1.4; margin:8px 0; }
.create-panel { margin-bottom:12px; }
.create-panel summary { color:var(--accent); font-weight:650; cursor:pointer; }
.create-panel form { display:grid; gap:12px; padding-top:16px; }
.create-panel label { display:grid; gap:5px; color:var(--hint); font-size:12px; }
.create-panel input, .create-panel select, .create-panel textarea { width:100%; border-radius:11px; border:1px solid var(--line); background:var(--bg); color:var(--text); padding:10px; font:inherit; color-scheme:dark; }
.primary-btn { border:0; border-radius:12px; background:var(--accent); color:var(--accent-text); padding:12px; font-weight:700; }
.primary-btn:disabled { opacity:.5; }
.habit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.habit { padding:13px; min-height:112px; display:flex; flex-direction:column; justify-content:space-between; }
.habit .emoji { font-size:22px; }
.habit strong { font-size:20px; }
.habit small { color:var(--hint); line-height:1.2; }
.habit.failed { outline:1px solid color-mix(in srgb, var(--danger) 60%, transparent); }
.habit .fail-btn { border:0; background:transparent; color:var(--hint); text-align:left; padding:7px 0 0; font-size:11px; }
.page-title { margin: 18px 2px 17px; }
.page-title h1 { margin:0; }
.page-title p { color:var(--hint); margin:4px 0 0; font-size:13px; }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); background:var(--surface); padding:4px; border-radius:14px; margin-bottom:12px; }
.segmented button { border:0; border-radius:11px; background:transparent; color:var(--hint); padding:9px 7px; font-weight:650; }
.segmented button.active { background:var(--bg); color:var(--text); }
.screen { display:none; }
.screen.active { display:block; animation:appear .15s ease-out; }
@keyframes appear { from { opacity:.45; transform:translateY(3px); } }
.empty { color:var(--hint); text-align:center; padding:28px 16px; }
.info-card { display:flex; gap:12px; align-items:center; margin-bottom:9px; }
.info-card p { color:var(--hint); margin:3px 0 0; font-size:13px; }
.icon-bubble { width:42px; height:42px; border-radius:13px; background:var(--bg); display:grid; place-items:center; }
.version { text-align:center; color:var(--hint); font-size:12px; margin-top:24px; }
.bottom-nav { position:fixed; z-index:20; left:50%; transform:translateX(-50%); bottom:0; width:min(720px,100%); background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(18px); border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); padding:7px 8px calc(7px + env(safe-area-inset-bottom)); }
.bottom-nav button { border:0; background:transparent; color:var(--hint); display:grid; place-items:center; gap:2px; padding:5px 3px; }
.bottom-nav button span { font-size:20px; line-height:1; }
.bottom-nav button small { font-size:10px; }
.bottom-nav button.active { color:var(--accent); }
.toast { position:fixed; left:50%; bottom:88px; transform:translate(-50%,14px); max-width:calc(100% - 32px); background:var(--text); color:var(--bg); padding:10px 14px; border-radius:12px; opacity:0; pointer-events:none; transition:.18s; font-size:13px; z-index:30; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.skeleton { min-height:67px; opacity:.45; animation:pulse 1s infinite alternate; }
@keyframes pulse { to { opacity:.8; } }
@media (max-width:390px) { .habit-grid { grid-template-columns:1fr; } .habit { min-height:auto; flex-direction:row; align-items:center; } .habit .fail-btn { text-align:right; } }