*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}:root{--bg: #0A0A0A;--surface: #141414;--surface-2: #1A1A1A;--border: #1F1F1F;--border-strong: #2A2A2A;--text: #F5F5F5;--text-muted: #9CA3AF;--text-dim: #6B7280;--red: #FF4444;--red-dim: #C93232;--green: #00C48C;--green-dim: #00A077;--radius-card: 20px;--radius-input: 14px;--radius-pill: 999px;--shadow-card: 0 1px 0 rgba(255, 255, 255, .02) inset, 0 8px 24px rgba(0, 0, 0, .4)}html,body,#root{height:100%;margin:0;padding:0}body{background:#050505;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Inter,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.4;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none}button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}input{font-family:inherit;font-size:inherit;color:inherit}.desktop-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 30% 20%,rgba(255,68,68,.06),transparent 40%),radial-gradient(circle at 70% 80%,rgba(0,196,140,.04),transparent 40%),#050505}.phone-frame{width:100%;max-width:420px;height:min(900px,calc(100vh - 48px));background:var(--bg);border-radius:40px;border:1px solid #1a1a1a;box-shadow:0 0 0 8px #0d0d0d,0 30px 80px #0009,0 0 0 1px #2a2a2a inset;position:relative;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 480px){.desktop-shell{padding:0;background:var(--bg)}.phone-frame{max-width:100%;height:100vh;height:100dvh;border-radius:0;border:none;box-shadow:none}}.status-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 24px 6px;font-size:13px;font-weight:600;color:var(--text);flex-shrink:0}.status-bar .right{display:flex;align-items:center;gap:6px;color:var(--text-muted)}.app-header{padding:8px 20px 12px;flex-shrink:0}.app-header h1{margin:0;font-size:28px;font-weight:700;letter-spacing:-.02em}.app-header .subtitle{margin:4px 0 0;font-size:13px;color:var(--text-muted)}.page{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 20px 100px;-webkit-overflow-scrolling:touch}.page::-webkit-scrollbar{width:0;display:none}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:16px;box-shadow:var(--shadow-card)}.card+.card{margin-top:12px}.card-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin:0 0 8px}.field{display:block;margin-bottom:14px}.field-label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:6px;padding-left:4px}.text-input{width:100%;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-input);padding:14px 16px;font-size:15px;outline:none;transition:border-color .15s ease}.text-input::placeholder{color:var(--text-dim)}.text-input:focus{border-color:var(--red)}.textarea{width:100%;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-input);padding:14px 16px;font-size:15px;outline:none;resize:none;font-family:inherit;transition:border-color .15s ease}.textarea:focus{border-color:var(--red)}.stepper{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--border-strong);border-radius:var(--radius-input);padding:6px}.stepper button{width:40px;height:40px;border-radius:10px;background:var(--surface);color:var(--text);font-size:18px;font-weight:600;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-strong);transition:background .15s ease}.stepper button:hover{background:var(--border)}.stepper button:active{background:var(--red);color:#fff}.stepper .value{flex:1;text-align:center;font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}.stepper .unit{font-size:12px;font-weight:500;color:var(--text-muted);margin-left:4px}.btn{width:100%;padding:16px 20px;border-radius:var(--radius-pill);font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s ease,opacity .15s ease,background .15s ease;border:1px solid transparent}.btn:active{transform:scale(.98)}.btn-primary{background:var(--red);color:#fff;box-shadow:0 6px 20px #ff444440}.btn-primary:hover{background:var(--red-dim)}.btn-success{background:var(--green);color:#0a0a0a;box-shadow:0 6px 20px #00c48c40}.btn-success:hover{background:var(--green-dim)}.btn-ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border-strong)}.btn-ghost:hover{background:var(--border)}.btn-link{background:transparent;color:var(--text-muted);font-weight:500;font-size:14px;padding:8px}.btn-link:hover{color:var(--text)}.banner{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;font-size:14px;font-weight:500;margin-bottom:14px;animation:slide-down .25s ease}.banner-success{background:#00c48c1f;color:var(--green);border:1px solid rgba(0,196,140,.3)}.banner-info{background:#ff44441f;color:var(--red);border:1px solid rgba(255,68,68,.3)}@keyframes slide-down{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.bottom-nav{position:absolute;bottom:0;left:0;right:0;background:#0a0a0aeb;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);display:flex;padding:8px 8px calc(8px + env(safe-area-inset-bottom));z-index:10}.nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;border-radius:14px;color:var(--text-dim);font-size:11px;font-weight:500;position:relative;transition:color .15s ease}.nav-tab.active{color:var(--red)}.nav-tab.active:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:24px;height:3px;background:var(--red);border-radius:0 0 3px 3px}.timer-wrap{display:flex;flex-direction:column;align-items:center;padding:24px 0}.timer-ring{position:relative;width:280px;height:280px;display:flex;align-items:center;justify-content:center}.timer-ring svg{position:absolute;top:0;right:0;bottom:0;left:0;transform:rotate(-90deg)}.timer-ring .track{fill:none;stroke:var(--surface-2);stroke-width:12}.timer-ring .progress{fill:none;stroke:var(--red);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .4s linear}.timer-center{text-align:center;z-index:1}.timer-center .label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:4px}.timer-center .time{font-size:48px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}.timer-center .time.threshold{color:var(--red)}.timer-hint{margin-top:16px;font-size:13px;color:var(--text-muted);text-align:center}.alert-card{background:linear-gradient(180deg,#ff444426,#ff44440d);border:1px solid rgba(255,68,68,.4);border-radius:var(--radius-card);padding:20px;animation:slide-up .3s ease}.alert-card .alert-header{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin-bottom:10px}.alert-card .alert-body{font-size:16px;line-height:1.5;color:var(--text);margin:0 0 16px}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.button-row{display:flex;gap:10px;margin-top:16px}.button-row .btn{flex:1}.success-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px;animation:fade-in .4s ease}.success-icon{width:96px;height:96px;border-radius:50%;background:#00c48c26;border:2px solid var(--green);display:flex;align-items:center;justify-content:center;color:var(--green);margin-bottom:20px;animation:pop .5s ease}.success-screen h2{margin:0 0 8px;font-size:24px;font-weight:700;color:var(--green)}.success-screen p{margin:0 0 24px;color:var(--text-muted);font-size:15px;max-width:280px}.success-streak{display:inline-flex;align-items:center;gap:8px;background:#00c48c1a;border:1px solid rgba(0,196,140,.3);color:var(--green);padding:8px 16px;border-radius:var(--radius-pill);font-size:14px;font-weight:600}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:16px}.stat-card .label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin-bottom:8px;display:flex;align-items:center;gap:6px}.stat-card .value{font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}.stat-card .unit{font-size:13px;color:var(--text-muted);font-weight:500;margin-top:4px}.stat-card .delta{margin-top:8px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-pill)}.stat-card .delta.up{background:#00c48c1f;color:var(--green)}.stat-card .delta.down{background:#ff44441f;color:var(--red)}.streak-card .value{color:var(--text);display:flex;align-items:baseline;gap:6px}.streak-card .value .icon{color:var(--red)}.streak-card .unit{color:var(--text-muted)}.chart-card{padding:20px 12px 12px}.chart-title{font-size:14px;font-weight:600;color:var(--text);margin:0 0 4px;padding:0 8px}.chart-sub{font-size:12px;color:var(--text-muted);margin:0 0 12px;padding:0 8px}.chart-legend{display:flex;gap:16px;padding:0 8px 8px;font-size:12px;color:var(--text-muted)}.chart-legend .swatch{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:middle}.chart-legend .swatch.red{background:var(--red)}.chart-legend .swatch.green{background:var(--green)}.goal-progress{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:16px}.goal-progress+.goal-progress{margin-top:12px}.goal-progress .goal-text{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;margin-bottom:10px;color:var(--text)}.goal-progress .goal-text .num{width:22px;height:22px;border-radius:50%;background:var(--surface-2);border:1px solid var(--border-strong);font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;color:var(--text-muted);flex-shrink:0}.progress-bar{height:8px;background:var(--surface-2);border-radius:var(--radius-pill);overflow:hidden;position:relative}.progress-bar .fill{height:100%;background:var(--red);border-radius:var(--radius-pill);transition:width .4s ease}.progress-bar .fill.under{background:var(--green)}.progress-meta{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--text-muted)}.empty-state{text-align:center;padding:32px 16px;color:var(--text-muted);font-size:14px}