:root{--accent:#e8e4dc;--accent-hi:#fff;--accent-dark:#b0aa9f;--accent-rgb:232, 228, 220;--bg:#0d0905;--bg-body:#1a1208;--text:#f5edd6;--text-rgb:245, 237, 214;--brand-name:"Spotter"}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{background:var(--bg-body);color:var(--text);-webkit-font-smoothing:antialiased;justify-content:center;align-items:center;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,sans-serif;display:flex}#root{justify-content:center;align-items:center;display:flex}.app-shell{background:var(--bg);width:100%;height:100dvh;color:var(--text);flex-direction:column;display:flex;overflow:hidden}@media (width>=501px){body{background:#1a1208;align-items:center}.app-shell{border-radius:40px;width:390px;height:844px;max-height:92vh;overflow:hidden;box-shadow:0 30px 80px #0009,0 0 0 10px #1c1610,0 0 0 12px #f5edd614}}.screen{background:var(--bg);color:var(--text);flex-direction:column;flex:1;display:flex;overflow:hidden}.scrollable{-webkit-overflow-scrolling:touch;flex:1;min-height:0;overflow-y:auto}.scrollable::-webkit-scrollbar{display:none}.needs-nav-clearance{padding-bottom:88px!important}.bottom-nav{border-top:1px solid rgba(var(--text-rgb), .08);background:#0d0905f5;flex-shrink:0;height:80px;padding-bottom:16px;display:flex}.nav-btn{color:rgba(var(--text-rgb), .35);cursor:pointer;letter-spacing:.2px;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;padding-top:8px;font-size:10px;transition:color .2s;display:flex}.nav-btn.active{color:var(--accent)}.nav-btn svg{width:22px;height:22px}.btn-gold{background:var(--accent-hi);color:#1a0e00;cursor:pointer;letter-spacing:-.2px;border:none;border-radius:16px;font-weight:800;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 24px #0000002e,0 1px 4px #0000001a}.btn-gold:active{transform:scale(.97);box-shadow:0 2px 10px #0000001f}.btn-ghost{background:rgba(var(--text-rgb), .07);color:rgba(var(--text-rgb), .7);border:1.5px solid rgba(var(--text-rgb), .14);cursor:pointer;border-radius:16px;font-weight:700;transition:all .15s}.btn-ghost:active{background:rgba(var(--text-rgb), .12)}.badge-pill{background:rgba(var(--text-rgb), .08);border:1px solid rgba(var(--text-rgb), .25);border-radius:20px;padding:4px 12px;font-size:12px;font-weight:700}.toast{opacity:0;border:1px solid rgba(var(--text-rgb), .15);color:var(--text);z-index:999;pointer-events:none;white-space:nowrap;background:#140e06f2;border-radius:14px;padding:10px 18px;font-size:13px;font-weight:700;transition:transform .25s,opacity .25s;position:fixed;bottom:100px;left:50%;transform:translateY(20px)scale(.95)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)scale(1)}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.fade-in{animation:.4s cubic-bezier(.34,1.56,.64,1) forwards fadeIn}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.slide-up{animation:.4s forwards slideUp}