:root{--bg:#f7f8fb;--surface:#fff;--surface-soft:#eef4ff;--surface-muted:#edf0f5;--text:#172033;--text-muted:#667085;--text-soft:#98a2b3;--line:#e4e8f0;--primary:#4f7cff;--primary-dark:#315fd6;--primary-soft:#e8efff;--green:#27b895;--green-soft:#e0f7ef;--pink:#ff6f91;--pink-soft:#ffe8ef;--yellow:#f5b84b;--yellow-soft:#fff3d5;--purple:#8b5cf6;--shadow-1:0 1px 2px #1018280d;--shadow-2:0 12px 32px #10182814;--radius:18px;--radius-sm:14px;--radius-pill:999px;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", "HarmonyOS Sans", "PingFang SC", "Microsoft YaHei", sans-serif}*,:before,:after{box-sizing:border-box}html{min-height:100%;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;background:#e9edf5;font-size:15px;line-height:1.45}body{background:#e9edf5;min-height:100dvh;margin:0}button,input{font:inherit}button{touch-action:manipulation}button,input{appearance:none}svg{display:block}#app{background:radial-gradient(circle at 14% 0%, #4f7cff1f, transparent 28%), linear-gradient(180deg, #fff 0, var(--bg) 220px), var(--bg);width:100%;max-width:430px;min-height:100dvh;margin:0 auto;padding:0 16px 100px;box-shadow:0 0 0 1px #1018280f,0 24px 80px #1018281f}.view-container{padding-top:12px}.header{z-index:20;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#f7f8fbd6;border-bottom:1px solid #e4e8f0b8;justify-content:space-between;align-items:center;margin:0 -16px;padding:14px 16px 10px;display:flex;position:sticky;top:0}.header h1{color:var(--text);letter-spacing:0;margin:0;font-size:21px;font-weight:900}.header p{color:var(--text-muted);margin:1px 0 0;font-size:12px;font-weight:700}.energy{border-radius:var(--radius-pill);background:var(--yellow-soft);color:#a66f00;min-height:38px;box-shadow:var(--shadow-1);border:1px solid #f5b84b57;align-items:center;gap:7px;padding:8px 13px;font-size:13px;font-weight:900;display:inline-flex}.energy svg{width:17px;height:17px}.page-hero{padding:14px 2px 16px}.page-hero .eyebrow{color:var(--primary-dark);margin:0 0 6px;font-size:12px;font-weight:900}.page-hero h2{color:var(--text);letter-spacing:0;margin:0;font-size:28px;font-weight:950}.page-hero p{max-width:330px;color:var(--text-muted);margin:7px 0 0;font-size:14px;font-weight:650}.card,.empty-state,.habit-card-inner,.profile-auth-card,.profile-group-card,.stat-card,.garden-card{border:1px solid var(--line);box-shadow:var(--shadow-1);background:#fffffff0}.card{border-radius:var(--radius);margin-bottom:12px;padding:16px}.card-title{color:var(--text);margin:0 0 13px;font-size:15px;font-weight:900}.bottom-nav{z-index:100;width:min(430px,100%);padding:8px 10px max(8px, env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fffffff0;border-top:1px solid #e4e8f0e6;grid-template-columns:repeat(5,1fr);margin:0 auto;display:grid;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -12px 30px #10182814}.nav-item{min-width:0;min-height:56px;color:var(--text-soft);cursor:pointer;background:0 0;border:0;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:4px;font-size:11px;font-weight:850;display:flex}.nav-item svg{width:23px;height:23px}.nav-item.active{background:var(--primary-soft);color:var(--primary-dark)}.nav-item:active{transform:scale(.96)}.auth-screen{flex-direction:column;justify-content:center;align-items:center;gap:13px;min-height:100dvh;padding:36px 6px 70px;display:flex}.auth-logo{border:1px solid var(--line);width:78px;height:78px;box-shadow:var(--shadow-2);background:#fff;border-radius:25px;place-items:center;font-size:40px;display:grid}.auth-title{margin:8px 0 0;font-size:29px;font-weight:950}.auth-subtitle{color:var(--text-muted);margin:0;font-size:14px;font-weight:650}.auth-tabs{border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--surface-muted);grid-template-columns:repeat(2,1fr);gap:4px;width:min(100%,330px);margin-top:10px;padding:4px;display:grid}.auth-tab{border-radius:var(--radius-pill);min-height:43px;color:var(--text-muted);cursor:pointer;background:0 0;border:0;font-weight:900}.auth-tab.active{color:var(--primary-dark);box-shadow:var(--shadow-1);background:#fff}.auth-form{flex-direction:column;gap:11px;width:min(100%,330px);display:flex}.auth-form.hidden{display:none}.auth-input,.todo-input-wrap input,.modal input,.mood-note{border:1px solid var(--line);border-radius:var(--radius-sm);width:100%;min-height:50px;color:var(--text);background:#fff;outline:0;padding:0 15px;transition:border-color .16s,box-shadow .16s}.auth-input::placeholder,.todo-input-wrap input::placeholder,.modal input::placeholder,.mood-note::placeholder{color:var(--text-soft)}.auth-input:focus,.todo-input-wrap input:focus,.modal input:focus,.mood-note:focus{border-color:var(--primary);box-shadow:0 0 0 4px #4f7cff1f}.auth-btn,.todo-input-wrap button,.modal-actions .confirm{border-radius:var(--radius-pill);background:var(--primary);color:#fff;cursor:pointer;border:0;min-height:50px;font-weight:900;box-shadow:0 12px 28px #4f7cff38}.auth-btn:active,.todo-input-wrap button:active,.modal-actions .confirm:active{background:var(--primary-dark);transform:translateY(1px)}.auth-skip{min-height:44px;color:var(--text-muted);cursor:pointer;background:0 0;border:0;font-size:13px;font-weight:800}.auth-error{color:#d92d53;text-align:center;margin:0;font-size:13px}.install-banner{border-radius:var(--radius);background:var(--primary-soft);color:var(--primary-dark);border:1px solid #4f7cff33;justify-content:space-between;align-items:center;gap:12px;margin:14px 0 8px;padding:12px 14px;font-size:13px;font-weight:850;display:flex}.install-banner button{border-radius:var(--radius-pill);background:var(--primary);color:#fff;border:0;min-height:36px;padding:0 16px;font-weight:900}.week-card{padding:13px 14px 14px}.week-nav{grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;margin-bottom:12px;display:grid}.week-nav button{border:1px solid var(--line);width:44px;height:44px;color:var(--text-muted);background:#fff;border-radius:15px;place-items:center;display:grid}.week-nav button svg{width:18px;height:18px}.week-label{color:var(--text);text-align:center;font-size:15px;font-weight:950}.week-days-header,.week-dots{grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;display:grid}.week-days-header{color:var(--text-muted);text-align:center;font-size:12px;font-weight:850}.empty-state{text-align:center;border-radius:24px;flex-direction:column;justify-content:center;align-items:center;min-height:190px;margin-bottom:12px;padding:28px 20px;display:flex}.empty-illustration{background:var(--green-soft);border-radius:22px;place-items:center;width:68px;height:68px;font-size:36px;display:grid}.empty-state h3{margin:14px 0 5px;font-size:18px;font-weight:950}.empty-state p,.empty-line{color:var(--text-muted);margin:0;font-size:13px;font-weight:700}.empty-line{text-align:center;padding:22px 0}.habit-card{background:var(--green);box-shadow:var(--shadow-2);border-radius:22px;margin-bottom:12px;position:relative;overflow:hidden}.habit-card-inner{z-index:1;border-radius:22px;padding:16px;transition:transform .16s;position:relative}.habit-card-header{align-items:center;gap:12px;margin-bottom:14px;display:flex}.habit-card-header .emoji{background:var(--surface-soft);border-radius:16px;flex:none;place-items:center;width:44px;height:44px;font-size:22px;display:grid}.habit-title{flex:1;min-width:0}.habit-title .name{color:var(--text);overflow-wrap:anywhere;font-size:16px;font-weight:950;display:block}.habit-title .meta{color:var(--text-muted);margin-top:2px;font-size:12px;font-weight:750;display:block}.streak-badge{border-radius:var(--radius-pill);background:var(--yellow-soft);color:#9a6400;align-items:center;gap:4px;min-height:32px;padding:6px 10px;font-size:12px;font-weight:950;display:inline-flex}.streak-badge svg{width:15px;height:15px}.habit-del,.todo-del{width:40px;height:40px;color:var(--text-soft);background:0 0;border:0;border-radius:14px;flex:none;place-items:center;display:grid}.habit-del svg,.todo-del svg{width:18px;height:18px}.habit-swipe-action{color:#fff;place-items:center;width:82px;display:grid;position:absolute;inset:0 0 0 auto}.habit-swipe-action svg{width:28px;height:28px}.week-dot{aspect-ratio:1;border:1px solid var(--line);background:var(--surface-muted);color:#fff;border-radius:14px;place-items:center;width:100%;min-height:39px;display:grid}.week-dot svg{width:17px;height:17px}.week-dot.done{background:var(--green);border-color:#27b8954d;box-shadow:0 8px 18px #27b89538}.week-dot.today-ring{border-color:#4f7cff80;box-shadow:0 0 0 4px #4f7cff1f}.add-habit-btn{width:100%;min-height:56px;color:var(--primary-dark);background:#4f7cff14;border:1px dashed #4f7cff6b;border-radius:20px;justify-content:center;align-items:center;gap:8px;margin:2px 0 12px;font-weight:950;display:flex}.add-habit-btn svg{width:20px;height:20px}.todo-input-wrap{grid-template-columns:1fr auto;gap:10px;margin-bottom:10px;display:grid}.todo-input-wrap input{min-width:0}.todo-input-wrap button{min-width:74px;padding:0 16px}.todo-item{border-bottom:1px solid var(--line);align-items:center;gap:11px;min-height:58px;display:flex}.todo-item:last-child{border-bottom:0}.todo-check{border:2px solid var(--line);color:#fff;background:#fff;border-radius:11px;flex:none;place-items:center;width:30px;height:30px;display:grid}.todo-check.done{border-color:var(--green);background:var(--green)}.todo-check svg{width:16px;height:16px}.todo-text{min-width:0;color:var(--text);overflow-wrap:anywhere;flex:1;font-size:15px;font-weight:750}.todo-text.done{color:var(--text-soft);text-decoration:line-through}.focus-card{flex-direction:column;align-items:center;padding:26px 16px 20px;display:flex}.timer-ring{aspect-ratio:1;background:conic-gradient(var(--primary) var(--progress,0%), var(--surface-muted) var(--progress,0%));border-radius:50%;place-items:center;width:min(68vw,230px);max-width:230px;display:grid;position:relative;box-shadow:0 18px 44px #4f7cff24}.timer-ring:after{border:1px solid var(--line);content:"";background:#fff;border-radius:50%;width:82%;height:82%;position:absolute}.timer-text{z-index:1;color:var(--text);font-variant-numeric:tabular-nums;font-size:clamp(38px,13vw,50px);font-weight:950;position:relative}.timer-text.stopped{color:var(--text-muted)}.timer-label{color:var(--text-muted);margin-top:16px;font-size:15px;font-weight:900}.pomodoro-controls{justify-content:center;align-items:center;gap:18px;margin:18px 0 14px;display:flex}.pomodoro-controls button{border:1px solid var(--line);width:54px;height:54px;color:var(--text-muted);box-shadow:var(--shadow-1);background:#fff;border-radius:18px;place-items:center;display:grid}.pomodoro-controls button.primary{background:var(--primary);color:#fff;border:0;border-radius:23px;width:66px;height:66px;box-shadow:0 14px 30px #4f7cff3d}.pomodoro-controls svg{width:24px;height:24px}.pomodoro-stats{color:var(--text-muted);font-size:14px;font-weight:800}.garden-card{background:linear-gradient(#e9fbff 0%,#e9fff7 48%,#fff 100%);border-color:#27b89533;border-radius:24px;overflow:hidden}.garden-sky{height:64px;color:var(--primary);opacity:.7;justify-content:space-around;align-items:center;display:flex}.garden-sky span:nth-child(3){color:var(--pink)}.garden-sky svg{width:32px;height:32px}.garden-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 14px 16px;display:grid}.garden-plot{background:#ffffffb3;border:1px solid #27b89524;border-radius:17px;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:10px 7px;display:flex}.garden-plot.blooming{background:#ffe8efb3;border-color:#ff6f913d}.plant-svg{aspect-ratio:1;width:54px;max-width:100%}.plant-svg svg{width:100%;height:100%}.growth-bar{border-radius:var(--radius-pill);background:#17203314;width:100%;height:5px;overflow:hidden}.growth-fill{border-radius:inherit;background:var(--green);height:100%;transition:width .5s}.garden-energy{text-align:center;background:#ffffffbd;border-top:1px solid #27b89524;padding:20px 16px 24px}.big-energy{color:var(--green);font-size:50px;font-weight:950;line-height:1}.energy-label{color:var(--text);justify-content:center;align-items:center;gap:5px;margin-top:8px;font-size:14px;font-weight:900;display:inline-flex}.energy-label svg{width:16px;height:16px}.energy-hint,.profile-note{color:var(--text-muted);margin-top:6px;font-size:12px;font-weight:700}.stats-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px;display:grid}.stat-card{border-radius:var(--radius);text-align:center;min-width:0;padding:15px 8px}.stat-value{font-size:22px;font-weight:950}.stat-value.green{color:var(--green)}.stat-value.orange{color:var(--yellow)}.stat-value.purple{color:var(--primary)}.stat-label{color:var(--text-muted);margin-top:4px;font-size:12px;font-weight:800}.week-chart{align-items:flex-end;gap:8px;height:112px;display:flex}.week-bar-wrap{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;min-width:0;height:100%;display:flex}.week-bar{border-radius:var(--radius-pill) var(--radius-pill) 6px 6px;background:var(--primary-soft);width:100%;max-width:28px;min-height:6px}.week-bar.today{background:var(--primary)}.week-bar-label{color:var(--text-muted);margin-top:7px;font-size:11px;font-weight:850}.profile-auth-card,.profile-group-card{border-radius:var(--radius);margin-bottom:12px;padding:16px}.profile-user-row{align-items:center;gap:12px;display:flex}.profile-avatar{background:var(--primary-soft);width:46px;height:46px;color:var(--primary-dark);border-radius:16px;flex:none;place-items:center;font-size:17px;font-weight:950;display:grid}.profile-user-info{min-width:0}.profile-user-info .name{color:var(--text);font-weight:900}.profile-user-info .email{color:var(--text-muted);overflow-wrap:anywhere;font-size:12px}.logout-btn{border:1px solid var(--line);border-radius:var(--radius-pill);width:100%;min-height:45px;color:var(--text-muted);background:#fff;margin-top:12px;font-weight:850}.invite-code{color:var(--text-muted);font-size:13px;font-weight:750}.invite-code .code{color:var(--primary-dark);letter-spacing:1px;font-weight:950}.profile-habit-item{border-bottom:1px solid var(--line);min-height:42px;color:var(--text);align-items:center;gap:9px;font-size:14px;font-weight:800;display:flex}.profile-habit-item:last-child{border-bottom:0}.profile-streak{color:var(--yellow);margin-left:auto;font-weight:950}.mood-picker{grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px;display:grid}.mood-btn{aspect-ratio:1;border:1px solid var(--line);background:#fff;border-radius:17px;place-items:center;width:100%;min-height:50px;display:grid}.mood-btn svg{width:34px;height:34px}.mood-btn.selected{border-color:var(--primary);box-shadow:0 0 0 4px #4f7cff1f}.overlay{z-index:200;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f172a52;justify-content:center;align-items:flex-end;padding:16px;display:flex;position:fixed;inset:0}.modal{border:1px solid var(--line);background:#fff;border-radius:24px;width:min(100%,382px);padding:18px;box-shadow:0 22px 60px #1018282e}.modal h3{margin:0 0 14px;font-size:18px;font-weight:950}.modal input{margin-bottom:12px}.emoji-grid,.color-grid{gap:8px;margin-bottom:12px;display:grid}.emoji-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.emoji-grid button{aspect-ratio:1;border:1px solid var(--line);background:var(--bg);border-radius:13px;place-items:center;min-height:37px;font-size:18px;display:grid}.emoji-grid button.selected{border-color:var(--primary);background:var(--primary-soft)}.color-grid{grid-template-columns:repeat(6,1fr)}.color-grid button{border-radius:var(--radius-pill);height:34px;box-shadow:0 0 0 1px var(--line);border:3px solid #fff}.color-grid button.selected{box-shadow:0 0 0 3px #4f7cff3d}.modal-actions{grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;display:grid}.modal-actions button{min-height:50px;font-weight:900}.modal-actions .cancel{border:1px solid var(--line);border-radius:var(--radius-pill);color:var(--text-muted);background:#fff}.toast{z-index:300;border-radius:var(--radius-pill);color:#fff;background:#172033f0;max-width:calc(100% - 40px);padding:11px 18px;font-size:13px;font-weight:850;animation:.18s toast-in;position:fixed;bottom:96px;left:50%;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%)translateY(8px)}to{opacity:1;transform:translate(-50%)translateY(0)}}::-webkit-scrollbar{width:0;height:0}@media (width<=360px){#app{padding-left:12px;padding-right:12px}.week-dots,.week-days-header{gap:5px}.page-hero h2{font-size:25px}}