*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--purple: #534AB7;--purple-light: #EEEDFE;--purple-mid: #7B72D4;--purple-dark: #3C3489;--teal: #0F6E56;--teal-light: #E1F5EE;--coral: #993C1D;--coral-light: #FAECE7;--amber: #BA7517;--amber-light: #FAEEDA;--bg: #FFFFFF;--bg2: #F7F7F5;--bg3: #EFEFED;--t1: #111111;--t2: #5A5A57;--t3: #A0A09C;--border: rgba(0,0,0,.07);--shadow-sm: 0 1px 4px rgba(0,0,0,.07);--shadow-md: 0 4px 16px rgba(0,0,0,.09);--shadow-purple: 0 6px 20px rgba(83,74,183,.28);--r-sm: 6px;--r-md: 10px;--r-lg: 14px;--r-xl: 20px;--r-full: 999px;--transition: .16s cubic-bezier(.4,0,.2,1)}html,body,#root{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,sans-serif;background:#eeedf0;color:var(--t1);-webkit-font-smoothing:antialiased}.shell{max-width:480px;margin:0 auto;min-height:100%;background:var(--bg);display:flex;flex-direction:column;box-shadow:0 0 40px #0000001a}.page{flex:1;overflow-y:auto;padding-bottom:80px;-webkit-overflow-scrolling:touch}.page-pad{padding:16px}.page-transition{animation:pageIn .2s cubic-bezier(.4,0,.2,1)}@keyframes pageIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.auth-page{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:28px 24px;background:var(--bg);max-width:480px;margin:0 auto}.auth-logo{font-size:60px;text-align:center;margin-bottom:6px;cursor:pointer;-webkit-user-select:none;user-select:none}.auth-title{font-size:34px;font-weight:800;text-align:center;color:var(--t1);letter-spacing:-.5px}.auth-sub{font-size:15px;color:var(--t2);text-align:center;margin-bottom:40px;margin-top:4px}.auth-label{font-size:12px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px}.input{width:100%;background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--r-md);padding:14px 16px;font-size:15px;color:var(--t1);outline:none;margin-bottom:10px;transition:border-color var(--transition),box-shadow var(--transition),background var(--transition)}.input:focus{border-color:var(--purple);background:var(--bg);box-shadow:0 0 0 3px #534ab71a}.input::placeholder{color:var(--t3)}.pw-bar{height:4px;border-radius:var(--r-full);margin:-6px 0 10px;background:var(--bg3);overflow:hidden}.pw-bar-fill{height:100%;border-radius:var(--r-full);transition:width var(--transition),background var(--transition)}.btn{width:100%;border:none;border-radius:var(--r-md);padding:15px;font-size:15px;font-weight:700;cursor:pointer;margin-top:6px;background:linear-gradient(135deg,#534ab7,#6b62d4);color:#fff;box-shadow:var(--shadow-purple);transition:opacity var(--transition),transform var(--transition),box-shadow var(--transition)}.btn:active:not(:disabled){transform:scale(.98);box-shadow:0 2px 8px #534ab733}.btn:disabled{opacity:.5;cursor:default;box-shadow:none}.btn-outline{background:none;border:1.5px solid var(--purple);color:var(--purple);border-radius:var(--r-md);padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;transition:background var(--transition)}.btn-outline:hover,.btn-outline:active{background:var(--purple-light)}.btn-ghost{background:var(--bg2);border:none;color:var(--t2);border-radius:var(--r-md);padding:12px;font-size:14px;font-weight:600;cursor:pointer;width:100%;margin-top:6px;transition:background var(--transition)}.btn-ghost:hover{background:var(--bg3)}.btn-danger{background:var(--coral-light);color:var(--coral);border:none;border-radius:var(--r-md);padding:12px;font-size:14px;font-weight:600;cursor:pointer;width:100%;margin-top:6px;transition:background var(--transition)}.btn-danger:hover{background:#f5ddd6}.btn-sm{background:linear-gradient(135deg,#534ab7,#6b62d4);color:#fff;border:none;border-radius:var(--r-md);padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 3px 10px #534ab740;transition:opacity var(--transition),transform var(--transition)}.btn-sm:active{transform:scale(.97)}.btn-sm:disabled{opacity:.5}.err{color:var(--coral);font-size:13px;margin-bottom:8px}.muted{color:var(--t2);font-size:13px}.link-row{text-align:center;margin-top:24px;color:var(--t2);font-size:14px}.link-row a{color:var(--purple);font-weight:700;text-decoration:none}.link-row a:hover{text-decoration:underline}.card{background:var(--bg2);border-radius:var(--r-lg);padding:16px;margin-bottom:12px}.card-elevated{background:var(--bg);border-radius:var(--r-lg);padding:16px;margin-bottom:12px;box-shadow:var(--shadow-md);border:1px solid var(--border)}.section-head{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1px;margin:20px 16px 8px}.streak-card{background:linear-gradient(145deg,#eae8fc,#d9d6f5 60%,#ccc8f0);border-radius:var(--r-xl);padding:32px 20px 28px;text-align:center;margin:16px;position:relative;overflow:hidden;box-shadow:0 8px 24px #534ab72e}.streak-card:before{content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;background:#534ab714}.streak-card:after{content:"";position:absolute;bottom:-60px;left:-30px;width:160px;height:160px;border-radius:50%;background:#534ab70f}.streak-emoji{font-size:52px;position:relative;z-index:1}.streak-num{font-size:80px;font-weight:900;color:var(--purple);line-height:1.05;letter-spacing:-2px;position:relative;z-index:1}.streak-label{font-size:16px;font-weight:600;color:var(--purple-dark);position:relative;z-index:1}.streak-group{font-size:13px;color:var(--t2);margin-top:6px;position:relative;z-index:1}.streak-meta{display:flex;justify-content:center;gap:24px;margin-top:14px;position:relative;z-index:1}.streak-stat{text-align:center}.streak-stat-val{font-size:18px;font-weight:800;color:var(--purple-dark)}.streak-stat-label{font-size:11px;color:var(--t2);font-weight:500}.streak-motivation{font-size:13px;font-weight:600;color:var(--purple-mid);margin-top:10px;position:relative;z-index:1;animation:fadeInUp .4s ease .2s both}.steps-card{margin:0 16px 12px;background:var(--bg2);border-radius:var(--r-lg);padding:14px 16px}.steps-title{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:8px}.steps-placeholder{font-size:13px;color:var(--t3);font-style:italic}.bar-bg{height:6px;background:var(--bg3);border-radius:var(--r-full);overflow:hidden;margin-bottom:6px}.bar-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--purple-mid));border-radius:var(--r-full);transition:width .4s ease}.log-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 32px);margin:0 16px 12px;background:linear-gradient(135deg,#534ab7,#6b62d4);color:#fff;border:none;border-radius:var(--r-lg);padding:17px;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;box-shadow:var(--shadow-purple);transition:transform var(--transition),box-shadow var(--transition)}.log-btn:active{transform:scale(.98);box-shadow:0 2px 8px #534ab733}.group-setup{margin:0 16px;background:var(--bg2);border-radius:var(--r-lg);padding:16px}.group-setup-title{font-size:15px;font-weight:700;color:var(--t1);margin-bottom:12px}.member-row{display:flex;align-items:center;padding:11px 16px;border-bottom:1px solid var(--border);gap:12px;transition:background var(--transition)}.member-row:last-child{border-bottom:none}.member-row:active{background:var(--bg2)}.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 2px 6px #00000026}.avatar-sm{width:32px;height:32px;font-size:11px}.avatar-lg{width:64px;height:64px;font-size:22px}.pill{background:var(--purple-light);color:var(--purple);border-radius:var(--r-full);padding:4px 12px;font-size:12px;font-weight:700;white-space:nowrap}.invite-row{display:flex;gap:8px;align-items:center;margin-top:8px}.invite-row .input{margin-bottom:0;flex:1}.copy-link-row{display:flex;align-items:center;gap:10px;margin-top:10px;background:var(--bg);border-radius:var(--r-md);padding:10px 14px;border:1.5px dashed var(--border)}.copy-link-text{flex:1;font-size:12px;color:var(--t3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:monospace}.copy-btn{background:var(--purple-light);color:var(--purple);border:none;border-radius:var(--r-sm);padding:5px 10px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:background var(--transition)}.copy-btn:hover{background:#dddcf8}.copy-btn.copied{background:var(--teal-light);color:var(--teal)}.lw-section{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.7px;margin:20px 0 10px}.ex-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px}.ex-chip{background:var(--bg2);border:2px solid transparent;border-radius:var(--r-lg);padding:16px 12px;text-align:center;cursor:pointer;transition:border-color var(--transition),background var(--transition),box-shadow var(--transition)}.ex-chip:active{transform:scale(.97)}.ex-chip.active{border-color:var(--purple);background:var(--purple-light);box-shadow:0 0 0 3px #534ab71a}.ex-chip-icon{font-size:30px}.ex-chip-label{font-size:13px;font-weight:600;color:var(--t2);margin-top:6px}.ex-chip.active .ex-chip-label{color:var(--purple)}.stepper{display:flex;align-items:center;justify-content:center;gap:28px;background:var(--bg2);border-radius:var(--r-lg);padding:16px}.step-btn{width:46px;height:46px;border-radius:50%;background:var(--purple-light);border:none;font-size:22px;color:var(--purple);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--transition),transform var(--transition);box-shadow:0 2px 8px #534ab726}.step-btn:active{transform:scale(.92);background:#dddcf8}.step-val{font-size:48px;font-weight:900;color:var(--t1);min-width:80px;text-align:center;letter-spacing:-1px}.seg{display:flex;background:var(--bg2);border-radius:var(--r-md);padding:4px;gap:4px}.seg-btn{flex:1;padding:10px;border:none;border-radius:8px;font-size:15px;font-weight:500;color:var(--t2);background:none;cursor:pointer;transition:background var(--transition),color var(--transition),box-shadow var(--transition)}.seg-btn.active{background:var(--bg);color:var(--purple);font-weight:700;box-shadow:0 2px 8px #0000001a}.preview-card{background:linear-gradient(145deg,#eae8fc,#d9d6f5);border-radius:var(--r-xl);padding:28px 20px;text-align:center;margin:12px 0;box-shadow:0 4px 16px #534ab726}.preview-label{font-size:14px;color:var(--purple-dark);font-weight:500;margin-bottom:4px}.preview-pts{font-size:72px;font-weight:900;color:var(--purple);line-height:1;letter-spacing:-2px}.preview-unit{font-size:16px;color:var(--purple-dark);margin-top:4px;font-weight:600}.honor-note{display:flex;align-items:center;gap:10px;background:var(--bg2);border-radius:var(--r-md);padding:12px 14px;margin:10px 0;color:var(--t3);font-size:13px;border:1px solid var(--border)}.success-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fffffff2;animation:fadeIn .2s ease}.success-check{width:80px;height:80px;border-radius:50%;background:var(--teal-light);display:flex;align-items:center;justify-content:center;font-size:40px;animation:successPop .4s cubic-bezier(.17,.89,.32,1.28)}.success-label{font-size:20px;font-weight:800;color:var(--t1);margin-top:16px;animation:fadeInUp .3s ease .15s both}.success-pts{font-size:48px;font-weight:900;color:var(--purple);margin-top:4px;animation:fadeInUp .3s ease .25s both}.success-sub{font-size:14px;color:var(--t2);margin-top:8px;animation:fadeInUp .3s ease .35s both}.confetti-piece{position:fixed;width:8px;height:8px;border-radius:2px;animation:confettiFall 1.2s cubic-bezier(.4,0,.2,1) forwards}@keyframes successPop{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes confettiFall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}.post{padding:16px;border-bottom:1px solid var(--border);transition:background var(--transition)}.post-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}.post-meta{flex:1}.post-name{font-size:15px;font-weight:700;color:var(--t1)}.post-time{font-size:12px;color:var(--t3);margin-top:1px}.pts-pill{background:linear-gradient(135deg,var(--purple-light),#dddcf8);color:var(--purple);border-radius:var(--r-full);padding:4px 12px;font-size:12px;font-weight:700}.post-body{font-size:15px;color:var(--t2);margin-bottom:8px;line-height:1.45}.post-body strong{color:var(--t1);font-weight:700}.tag{display:inline-block;border-radius:var(--r-full);padding:3px 10px;font-size:11px;font-weight:700;margin-bottom:10px}.tag-verified{background:var(--teal-light);color:var(--teal)}.tag-self{background:var(--bg2);color:var(--t3);border:1px solid var(--border)}.reactions{display:flex;gap:6px;flex-wrap:wrap}.react-chip{display:flex;align-items:center;gap:4px;border:1.5px solid var(--border);border-radius:var(--r-full);padding:5px 11px;font-size:14px;background:var(--bg);cursor:pointer;transition:background var(--transition),border-color var(--transition),transform var(--transition)}.react-chip:active{transform:scale(.95)}.react-chip.active{background:var(--purple-light);border-color:var(--purple)}.react-chip span{font-size:12px;color:var(--t2);font-weight:600}.react-chip.active span{color:var(--purple)}.period-row{display:flex;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}.period-row::-webkit-scrollbar{display:none}.period-chip{padding:8px 20px;border-radius:var(--r-full);border:none;background:var(--bg2);font-size:14px;font-weight:600;color:var(--t2);cursor:pointer;white-space:nowrap;transition:background var(--transition),color var(--transition),box-shadow var(--transition)}.period-chip:hover{background:var(--bg3)}.period-chip.active{background:var(--purple);color:#fff;box-shadow:0 3px 12px #534ab74d}.lb-row{display:flex;align-items:center;padding:13px 16px;border-bottom:1px solid var(--border);gap:12px;transition:background var(--transition)}.lb-row.me{background:var(--purple-light)}.rank{font-size:18px;font-weight:900;width:30px;text-align:center}.lb-name{flex:1;font-size:15px;color:var(--t1)}.lb-name.me{font-weight:700}.lb-pts{font-size:15px;font-weight:800;color:var(--purple)}.lb-you-pill{position:sticky;bottom:80px;z-index:50;margin:0 16px;padding:10px 16px;background:var(--bg);border-radius:var(--r-lg);box-shadow:var(--shadow-md);border:1px solid var(--border);display:flex;align-items:center;gap:12px;animation:slideUp .2s ease}.matrix{margin:16px;background:var(--bg2);border-radius:var(--r-lg);padding:16px}.matrix-title{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:12px}.matrix table{width:100%;border-collapse:collapse;font-size:13px}.matrix th{color:var(--t2);font-weight:700;padding:4px 6px;text-align:right;font-size:12px}.matrix th:first-child{text-align:left}.matrix td{padding:7px 6px;border-top:1px solid var(--border);text-align:right}.matrix td:first-child{text-align:left;color:var(--t1);font-size:12px}.matrix td:not(:first-child){color:var(--purple);font-weight:700}.badge-grid{display:flex;flex-wrap:wrap;justify-content:space-around;padding:4px 8px 16px}.badge-item{width:30%;display:flex;flex-direction:column;align-items:center;padding:14px 6px;text-align:center;transition:opacity var(--transition),transform var(--transition)}.badge-item:not(.locked):active{transform:scale(.95)}.badge-item.locked{opacity:.3;filter:grayscale(.3)}.badge-emoji{font-size:38px;margin-bottom:6px}.badge-name{font-size:11px;font-weight:700;color:var(--t1)}.badge-req{font-size:10px;color:var(--t3);margin-top:2px;line-height:1.3}.badge-earned{font-size:10px;color:var(--teal);font-weight:700;margin-top:3px}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;background:#fffffff2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border);display:flex;z-index:100;padding-bottom:env(safe-area-inset-bottom)}.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 0 8px;text-decoration:none;color:var(--t3);font-size:20px;gap:3px;transition:color var(--transition),transform var(--transition)}.nav-item:active{transform:scale(.9)}.nav-item.active{color:var(--purple)}.nav-label{font-size:10px;font-weight:600}.home-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 4px}.home-greeting{font-size:22px;font-weight:800;color:var(--t1);letter-spacing:-.3px}.home-sub{font-size:13px;color:var(--t2)}.home-settings-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:8px;border-radius:var(--r-full);transition:background var(--transition)}.home-settings-btn:active{background:var(--bg2)}.top-bar{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10}.top-bar-title{font-size:17px;font-weight:700}.back-btn{background:none;border:none;font-size:15px;color:var(--purple);font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;padding:0}.page-title{font-size:20px;font-weight:800;letter-spacing:-.3px;padding:18px 16px 14px;border-bottom:1px solid var(--border)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;padding:24px;z-index:999;animation:fadeIn .15s ease}.modal-sheet{background:var(--bg);border-radius:var(--r-xl);padding:24px;width:100%;max-width:420px;box-shadow:0 20px 60px #0003;animation:slideUp .2s cubic-bezier(.4,0,.2,1)}.modal-title{font-size:18px;font-weight:800;margin-bottom:18px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}.spinner{display:flex;justify-content:center;align-items:center;padding:48px;color:var(--t3);font-size:14px}.empty{text-align:center;color:var(--t3);font-size:15px;padding:48px 24px;line-height:1.6}.empty-icon{font-size:40px;margin-bottom:12px}.empty-action{margin-top:16px}.join-page{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;background:var(--bg);max-width:480px;margin:0 auto}.join-icon{font-size:56px;margin-bottom:16px}.join-title{font-size:26px;font-weight:800;color:var(--t1);margin-bottom:8px;text-align:center}.join-sub{font-size:15px;color:var(--t2);text-align:center;margin-bottom:32px;line-height:1.5}.toast-container{position:fixed;bottom:88px;left:50%;transform:translate(-50%);z-index:200;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}.toast{background:var(--t1);color:#fff;border-radius:var(--r-full);padding:10px 20px;font-size:14px;font-weight:600;white-space:nowrap;animation:toastIn .2s ease,toastOut .2s ease 1.6s forwards}.toast-success{background:var(--teal)}.toast-error{background:var(--coral)}@keyframes toastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes toastOut{to{opacity:0;transform:translateY(-4px)}}.skeleton-card,.skeleton-post,.skeleton-streak{background:var(--bg2);border-radius:var(--r-lg);padding:16px;margin:16px}.skeleton-streak{border-radius:var(--r-xl);padding:32px 20px}.skeleton-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}.skeleton-avatar{width:40px;height:40px;border-radius:50%;background:var(--bg3);animation:shimmer 1.2s ease-in-out infinite}.skeleton-line{height:12px;border-radius:var(--r-sm);background:var(--bg3);animation:shimmer 1.2s ease-in-out infinite}.skeleton-line-sm{width:40%}.skeleton-line-md{width:65%}.skeleton-line-lg{width:85%}.skeleton-circle{border-radius:50%;background:var(--bg3);animation:shimmer 1.2s ease-in-out infinite}@keyframes shimmer{0%,to{opacity:.6}50%{opacity:.3}}.ptr-indicator{display:flex;align-items:center;justify-content:center;padding:12px;color:var(--t3);font-size:13px;transition:opacity .2s ease}.settings-profile{display:flex;flex-direction:column;align-items:center;padding:24px 16px 20px;border-bottom:1px solid var(--border)}.settings-name{font-size:20px;font-weight:800;color:var(--t1);margin-top:12px}.settings-username{font-size:14px;color:var(--t3);margin-top:2px}.settings-username-display{font-size:14px;color:var(--t3);margin-bottom:12px;padding:8px 0;border-top:1px solid var(--border)}.settings-section{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.8px;margin:20px 0 8px;padding:0 0 4px}.settings-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--t1);transition:background var(--transition)}.settings-row-btn{width:100%;background:none;border:none;cursor:pointer;text-align:left}.settings-row-btn:active{background:var(--bg2)}.settings-row-icon{font-size:18px;width:24px;text-align:center}.settings-row-label{flex:1;font-size:15px;font-weight:500}.settings-row-value{font-size:14px;color:var(--t3)}.settings-row-arrow{font-size:20px;color:var(--t3)}