:root{--bg:#060c17;--bg-glow:#0e2036;--card:#0f1b2c;--card-2:#16243a;--card-3:#1b2c45;--line:#7ea8d624;--line-soft:#7ea8d614;--text:#e9f1fb;--dim:#7f93ad;--dim-2:#5d7290;--cyan:#22d3ee;--mint:#2ee6a8;--green:#4ade80;--red:#f87171;--orange:#fb923c;--amber:#fbbf24;--violet:#a78bfa;--grad:linear-gradient(118deg, #22d3ee 0%, #2ee6a8 55%, #6ee787 100%);--grad-soft:linear-gradient(118deg, #22d3ee29, #2ee6a829);--r:26px;--r-sm:16px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html{font-size:16px}body{background:radial-gradient(130% 62% at 50% -12%, var(--bg-glow) 0%, #060c1700 62%), var(--bg);color:var(--text);font-family:var(--font-thai), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;overscroll-behavior-y:contain;-webkit-font-smoothing:antialiased;letter-spacing:-.005em;background-attachment:fixed;min-height:100dvh}button{color:inherit;cursor:pointer;background:0 0;border:none;font-family:inherit}input,select,textarea{color:var(--text);background:var(--card-2);border:1px solid var(--line);border-radius:14px;outline:none;width:100%;padding:12px 14px;font-family:inherit;font-size:1rem;transition:border-color .15s}input:focus,textarea:focus,select:focus{border-color:#2ee6a88c}input::placeholder,textarea::placeholder{color:var(--dim-2)}.page{max-width:480px;margin:0 auto;padding:16px 16px 112px}.card{background:linear-gradient(168deg, var(--card-2) 0%, var(--card) 62%);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;padding:18px;box-shadow:0 14px 34px #00000052}.card-head{align-items:center;gap:10px;margin-bottom:12px;display:flex}.card-head h2{margin:0}.card-head .grow{flex:1}.row{align-items:center;gap:10px;display:flex}.grow{flex:1}.dim{color:var(--dim)}.small{font-size:.82rem}.big{letter-spacing:-.02em;font-size:1.7rem;font-weight:800}.lime{color:var(--mint)}.center{text-align:center}h1{letter-spacing:-.02em;font-size:1.42rem;font-weight:800}h2{letter-spacing:-.01em;font-size:1.02rem;font-weight:700}h3{font-size:.94rem;font-weight:600}.greet{align-items:flex-start;gap:12px;margin:4px 2px 16px;display:flex}.greet .sub{color:var(--dim);margin-top:3px;font-size:.85rem}.bell{background:var(--card-2);border:1px solid var(--line);border-radius:16px;flex-shrink:0;justify-content:center;align-items:center;width:46px;height:46px;display:flex;position:relative}.bell .dot{background:var(--red);color:#fff;border:2.5px solid var(--bg);border-radius:10px;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 5px;font-size:.7rem;font-weight:700;display:flex;position:absolute;top:-5px;right:-5px}.btn{background:var(--grad);color:#062015;border-radius:16px;justify-content:center;align-items:center;gap:8px;width:100%;padding:14px 18px;font-size:1rem;font-weight:800;transition:transform 90ms,opacity .15s;display:inline-flex}.btn:active{transform:scale(.975)}.btn[disabled]{opacity:.45}.btn.ghost{background:var(--card-3);color:var(--text);border:1px solid var(--line);font-weight:700}.btn.mini{border-radius:13px;width:auto;padding:10px 16px;font-size:.88rem}.btn.danger{color:var(--red);background:#f871711f;border:1px solid #f871714d}.chip{background:var(--card-3);border:1px solid var(--line);color:var(--text);border-radius:999px;align-items:center;gap:5px;padding:6px 12px;font-size:.8rem;font-weight:600;transition:transform 90ms;display:inline-flex}.chip:active{transform:scale(.95)}.chip.on{color:var(--mint);background:#2ee6a81a;border-color:#2ee6a880}.chip.ghost{color:var(--dim);background:0 0}.hero{grid-template-columns:158px minmax(0,1fr);align-items:center;gap:14px;display:grid}@media (max-width:380px){.hero{grid-template-columns:136px minmax(0,1fr);gap:10px}}.ring-wrap{justify-content:center;align-items:center;display:flex;position:relative}.ring-mid{flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.ring-mid .lbl{color:var(--dim);font-size:.72rem}.ring-mid .num{letter-spacing:-.035em;font-size:2.15rem;font-weight:800;line-height:1.05}.ring-mid .unit{color:var(--dim);margin-top:-1px;font-size:.76rem}.mrow{align-items:center;gap:10px;margin-bottom:13px;display:flex}.mrow:last-child{margin-bottom:0}.mico{border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.15rem;display:flex}.mbody{flex:1;min-width:0}.mtop{justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:6px;display:flex}.mtop b{font-size:.88rem;font-weight:600}.mtop span{color:var(--dim);white-space:nowrap;font-size:.78rem}.mbar{background:#7ea8d621;border-radius:4px;height:6px;overflow:hidden}.mfill{border-radius:4px;height:100%;transition:width .55s cubic-bezier(.4,0,.2,1)}.note{border-radius:var(--r-sm);color:var(--dim);background:#fbbf2412;border:1px solid #fbbf2433;gap:8px;padding:11px 13px;font-size:.78rem;line-height:1.55;display:flex}.note.ok{background:#2ee6a812;border-color:#2ee6a838}.burn{color:var(--mint);background:#2ee6a81a;border:1px solid #2ee6a842;border-radius:999px;align-items:center;gap:6px;margin-top:10px;padding:7px 15px;font-size:.84rem;font-weight:700;display:inline-flex}.item{border-bottom:1px solid var(--line-soft);align-items:center;gap:11px;padding:11px 0;display:flex}.item:last-of-type{border-bottom:none}.item .ico{background:var(--card-3);border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;font-size:1.25rem;display:flex}.item .ttl{font-size:.93rem;font-weight:600}.item .sub{color:var(--dim);margin-top:2px;font-size:.78rem}.empty{text-align:center;padding:22px 8px 6px}.empty .art{margin-bottom:10px;font-size:3rem;line-height:1}.empty .txt{color:var(--dim);font-size:.88rem;line-height:1.6}.tabbar{z-index:40;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--line);max-width:480px;padding:8px 6px calc(10px + env(safe-area-inset-bottom));background:#0a121eed;justify-content:space-around;align-items:flex-end;margin:0 auto;display:flex;position:fixed;bottom:0;left:0;right:0}.tabbar button{color:var(--dim-2);flex-direction:column;flex:1;align-items:center;gap:3px;padding:3px 0;font-size:.68rem;font-weight:600;transition:color .15s;display:flex}.tabbar button.on{color:var(--mint)}.tabbar svg{width:23px;height:23px}.fab{background:var(--grad);color:#062015;border-radius:50%;justify-content:center;align-items:center;width:62px;height:62px;margin:-30px 4px 0;transition:transform .1s;display:flex;box-shadow:0 6px 22px #2ee6a861;flex:none!important}.fab:active{transform:scale(.92)}.fab svg{width:28px;height:28px}.sheet-wrap{z-index:60;background:#02060eb8;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{background:linear-gradient(168deg, var(--card-2), var(--card) 60%);border:1px solid var(--line);width:100%;max-width:480px;max-height:92dvh;padding:10px 16px calc(20px + env(safe-area-inset-bottom));border-bottom:none;border-radius:28px 28px 0 0;margin:0 auto;animation:.24s cubic-bezier(.32,.72,0,1) up;overflow-y:auto}.sheet:before{content:"";background:var(--line);border-radius:3px;width:40px;height:4px;margin:4px auto 14px;display:block}@keyframes up{0%{opacity:.35;transform:translateY(42%)}to{opacity:1;transform:none}}.exanim{background:radial-gradient(78% 62% at 50% 24%, #22d3ee14, #060c1700 72%), var(--card);border:1px solid var(--line);border-radius:20px;padding:10px 8px 12px}.exanim-views{flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px;display:flex}.exanim-views .chip{padding:5px 11px;font-size:.76rem}.exanim-legend{flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px;display:flex}.mchip{background:#ffc93c14;border:1px solid #ffc93c38;border-radius:999px;align-items:center;gap:5px;padding:4px 11px;font-size:.76rem;font-weight:600;display:inline-flex}.mchip.primary{border-color:#ff963c7a}.mchip i{border-radius:50%;width:8px;height:8px;display:block}.resttimer{z-index:50;background:var(--card-2);border:1px solid #2ee6a873;border-radius:999px;align-items:center;gap:12px;padding:11px 20px;display:flex;position:fixed;bottom:96px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #0000008c}@keyframes pop{0%{opacity:0;transform:scale(.72)}62%{transform:scale(1.04)}to{opacity:1;transform:scale(1)}}.pr-banner{background:linear-gradient(135deg, #2ee6a829, var(--card-2));border-color:#2ee6a88c;animation:.42s cubic-bezier(.32,.72,0,1) pop}.toast{z-index:80;background:var(--card-3);color:var(--text);border:1px solid #2ee6a866;border-radius:16px;max-width:90vw;padding:13px 20px;font-size:.9rem;animation:.22s up;position:fixed;bottom:108px;left:50%;transform:translate(-50%);box-shadow:0 12px 34px #0000008c}.btn.oauth{justify-content:flex-start;gap:12px;margin-bottom:9px;padding:12px 16px;font-size:.95rem;text-decoration:none}.or{color:var(--dim-2);align-items:center;gap:10px;margin:14px 0 12px;font-size:.8rem;display:flex}.or:before,.or:after{content:"";background:var(--line);flex:1;height:1px}.cookiebar{z-index:90;background:linear-gradient(168deg, var(--card-3), var(--card));border:1px solid var(--line);max-width:456px;padding:15px 16px calc(15px + env(safe-area-inset-bottom));border-radius:20px;margin:0 auto;animation:.3s cubic-bezier(.32,.72,0,1) up;position:fixed;bottom:12px;left:12px;right:12px;box-shadow:0 16px 40px #0009}.spin{border:2.5px solid #7ea8d640;border-top-color:var(--mint);border-radius:50%;width:19px;height:19px;animation:.85s linear infinite sp;display:inline-block}@keyframes sp{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:0;height:0}