:root{--primary:#2f80ed;--primary-light:#e8f1fe;--teal:#16a39b;--teal-light:#e2f6f4;--red:#eb5757;--red-light:#fdeaea;--yellow:#f2a30f;--yellow-light:#fdf3df;--green:#27ae60;--green-light:#e7f7ee;--ink:#1f2d3d;--muted:#6b7a90;--line:#eaecf0;--bg:#f7f8fa;--white:#fff}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Kanit,sans-serif}.phone,body{background:#f7f8fa;min-height:100vh}.phone{width:100%;position:relative}.notch{display:none}.scroll-content{padding:60px 20px 100px}.scroll-content::-webkit-scrollbar{display:none}.scroll-content.no-nav{padding:60px 20px 40px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:72px;background:#fff;border-top:1px solid var(--line);justify-content:space-around;padding:0 4px;z-index:50}.bottom-nav,.nav-item{display:flex;align-items:center}.nav-item{flex-direction:column;gap:3px;text-decoration:none;color:var(--muted);font-size:.65rem;font-weight:500;padding:4px 12px;border-radius:10px;transition:color .15s;font-family:Kanit,sans-serif}.nav-item i{font-size:1.2rem}.nav-item.active{color:var(--primary)}.nav-fab{width:58px;height:58px;border-radius:50%;background:#2f80ed;position:relative;top:-20px;border:4px solid #f0f0f0;box-shadow:0 1px 4px rgba(0,0,0,.07);color:#fff;font-size:1.3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s;text-decoration:none}.nav-fab:hover{transform:scale(1.05)}.nav-fab i{font-size:1rem}.nav-fab span{font-size:.52rem;font-family:Kanit,sans-serif;font-weight:600;line-height:1;margin-top:2px;display:block;color:#fff}.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:8px;font-size:.75rem;font-weight:500}.badge-gray{background:#f0f0f2;color:#6b7a90}.badge-blue{background:#e8f1fe;color:#2f80ed}.badge-green{background:#e7f7ee;color:#27ae60}.badge-yellow{background:#fdf3df;color:#b07a00}.badge-red{background:#fdeaea;color:#c0392b}.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);background:#1f2d3d;color:#fff;padding:12px 20px;border-radius:12px;font-size:.9rem;font-family:Kanit,sans-serif;z-index:999;opacity:0;transition:.3s;white-space:nowrap;max-width:320px;text-align:center;pointer-events:none}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}