:root{--font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--primary: #4f46e5;--primary-soft: rgba(79, 70, 229, .12);--primary-contrast: #ffffff;--accent: #f59e0b;--accent-soft: rgba(245, 158, 11, .16);--success: #16a34a;--success-soft: rgba(22, 163, 74, .14);--danger: #dc2626;--danger-soft: rgba(220, 38, 38, .14);--bg: #f4f5fa;--surface: #ffffff;--surface-2: #eceef5;--text: #14161f;--text-muted: #61677a;--border: rgba(20, 22, 31, .1);--tg-bg-color: #ffffff;--tg-text-color: #14161f;--tg-hint-color: #61677a;--tg-link-color: #4f46e5;--tg-button-color: #4f46e5;--tg-button-text-color: #ffffff;--tg-secondary-bg-color: #eceef5;--tg-safe-top: 0px;--tg-safe-right: 0px;--tg-safe-bottom: 0px;--tg-safe-left: 0px;--tg-content-safe-bottom: 0px;--tg-viewport-height: 100dvh;--radius: 16px;--radius-sm: 12px;--tap: 48px;--dur: .24s;--ease: cubic-bezier(.2, .7, .3, 1);--nav-height: 60px}[data-theme=dark]{--primary: #6366f1;--primary-soft: rgba(99, 102, 241, .18);--accent: #fbbf24;--accent-soft: rgba(251, 191, 36, .16);--success: #22c55e;--success-soft: rgba(34, 197, 94, .16);--danger: #ef4444;--danger-soft: rgba(239, 68, 68, .16);--bg: #0e1016;--surface: #171a23;--surface-2: #202432;--text: #eceef5;--text-muted: #949aad;--border: rgba(236, 238, 245, .1);--tg-bg-color: #171a23;--tg-text-color: #eceef5;--tg-hint-color: #949aad;--tg-link-color: #818cf8;--tg-button-color: #6366f1;--tg-button-text-color: #ffffff;--tg-secondary-bg-color: #202432}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%}body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.5;overscroll-behavior-y:none;-webkit-font-smoothing:antialiased;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}#app{min-height:100dvh;min-height:var(--tg-viewport-height)}button{font-family:inherit;font-size:inherit;color:inherit}a{color:var(--tg-link-color)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);min-width:var(--tap);padding:12px 20px;border:none;border-radius:var(--radius-sm);background:var(--primary);color:var(--primary-contrast);font-weight:600;cursor:pointer;transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease),background-color var(--dur) var(--ease)}.btn:active{transform:scale(.97);opacity:.9}.btn--ghost{background:var(--surface-2);color:var(--text)}.btn--accent{background:var(--accent);color:#1c1400}.btn--block{width:100%}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px;transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}.muted{color:var(--text-muted)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.shell{display:flex;flex-direction:column;min-height:100dvh;min-height:var(--tg-viewport-height)}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(10px + var(--tg-safe-top)) calc(14px + var(--tg-safe-right)) 10px calc(14px + var(--tg-safe-left));background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}.topbar__brand{display:flex;align-items:center;gap:10px;min-width:0}.topbar__logo{width:34px;height:34px;flex:none;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:var(--primary-soft)}.topbar__logo svg{width:100%;height:100%}.topbar__title{font-size:17px;font-weight:700;margin:0;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);flex:none;border:none;border-radius:14px;background:transparent;color:var(--text-muted);cursor:pointer;transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),transform var(--dur) var(--ease)}.iconbtn:hover{background:var(--surface-2);color:var(--text)}.iconbtn:active{transform:scale(.94)}.iconbtn svg{width:22px;height:22px}.content{flex:1;width:100%;max-width:560px;margin:0 auto;padding:18px 16px calc(var(--nav-height) + var(--tg-content-safe-bottom) + 24px)}.page-title{font-size:22px;font-weight:700;margin:0 0 14px;letter-spacing:-.02em}.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--border);padding-bottom:var(--tg-content-safe-bottom);padding-bottom:max(var(--tg-content-safe-bottom),env(safe-area-inset-bottom))}.bottomnav__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:var(--nav-height);padding:6px 4px;border:none;background:transparent;color:var(--text-muted);font-size:11px;font-weight:600;cursor:pointer;transition:color var(--dur) var(--ease),transform var(--dur) var(--ease)}.bottomnav__item:active{transform:scale(.95)}.bottomnav__item svg{width:22px;height:22px}.bottomnav__item.is-active{color:var(--primary)}.bottomnav__item.is-active .bottomnav__dot{opacity:1;transform:scale(1)}.bottomnav__dot{width:5px;height:5px;border-radius:50%;background:var(--primary);opacity:0;transform:scale(.4);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}.hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 16px 22px}.hero__logo{width:84px;height:84px;border-radius:24px;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary-soft));box-shadow:0 10px 30px var(--primary-soft)}.hero__logo svg{width:100%;height:100%}.hero__name{font-size:28px;font-weight:800;margin:4px 0 0;letter-spacing:-.03em}.hero__tagline{margin:0;color:var(--text-muted);font-size:15px;max-width:34ch}.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:2px}.stat__value{font-size:22px;font-weight:800;letter-spacing:-.02em}.stat__label{font-size:12px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}.stat--xp .stat__value{color:var(--primary)}.stat--streak .stat__value{color:var(--accent)}.section{margin-top:22px}.section__title{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:0 0 10px}.empty{text-align:center;color:var(--text-muted);padding:40px 16px;display:flex;flex-direction:column;align-items:center;gap:10px}.empty__badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:13px;font-weight:700}.optionlist{display:flex;flex-direction:column;gap:8px}.option{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--tap);padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-weight:600;cursor:pointer;text-align:left;transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),transform var(--dur) var(--ease)}.option:active{transform:scale(.98)}.option.is-active{border-color:var(--primary);background:var(--primary-soft)}.option__check{width:20px;height:20px;flex:none;color:var(--primary);opacity:0;transition:opacity var(--dur) var(--ease)}.option.is-active .option__check{opacity:1}.list-rows{display:flex;flex-direction:column}.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}.row:last-child{border-bottom:none}.row__value{font-weight:700}.devbadge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700;vertical-align:middle}.fade-in{animation:fadeIn var(--dur) var(--ease) both}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
