:root{--bg: #0A0A0F;--bg-card: #12121A;--bg-elevated: #1A1A24;--color-primary: #C5A55A;--color-primary-light: #D4B86A;--text-primary: #F5F5F7;--text-secondary: #A8A8AC;--text-muted: #5A5A60;--green: #22C55E;--blue: #3B82F6;--orange: #F59E0B;--red: #FF453A;--purple: #A855F7;--radius: 14px;--radius-sm: 10px;--radius-full: 100px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{margin:0;padding:0;box-sizing:border-box}*::-webkit-scrollbar{width:0px;height:0px}*{scrollbar-width:none;-ms-overflow-style:none}body{font-family:Inter,-apple-system,sans-serif;background:var(--bg);color:var(--text-primary);min-height:100dvh;-webkit-font-smoothing:antialiased;overflow-x:hidden;user-select:none;-webkit-user-select:none}.app-container{display:flex;flex-direction:column;min-height:100dvh;padding-top:var(--safe-top);padding-bottom:calc(72px + var(--safe-bottom))}.page{flex:1;padding:20px 16px;overflow-y:auto;animation:fadeIn .25s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.page-header{margin-bottom:20px}.page-header h1{font-size:22px;font-weight:900;letter-spacing:-.5px}.page-header .subtitle{font-size:12px;color:var(--text-muted);margin-top:2px}.card{background:var(--bg-card);border-radius:var(--radius);border:1px solid rgba(255,255,255,.04);padding:16px;margin-bottom:12px}.card-highlight{background:linear-gradient(135deg,#c5a55a14,#c5a55a05);border:1px solid rgba(197,165,90,.12)}.stats-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}.stat-mini{background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.04);padding:14px;text-align:center}.stat-mini .value{font-size:20px;font-weight:900}.stat-mini .label{font-size:9px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:calc(72px + var(--safe-bottom));padding-bottom:var(--safe-bottom);background:linear-gradient(180deg,#0a0a0ff2,#0a0a0f 30%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.04);display:flex;align-items:center;justify-content:space-around;z-index:100}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 16px;border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease;background:none;border:none;color:var(--text-muted);font-family:inherit}.nav-item.active{color:var(--color-primary)}.nav-item .nav-label{font-size:10px;font-weight:700}.timeline-item{display:flex;align-items:center;gap:12px;padding:14px;background:var(--bg-card);border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.04);margin-bottom:8px;cursor:pointer;transition:all .15s ease}.timeline-item:active{transform:scale(.98);opacity:.9}.timeline-item.current{background:linear-gradient(135deg,#a855f714,#a855f705);border:1px solid rgba(168,85,247,.15)}.timeline-item.completed{opacity:.5}.badge{font-size:9px;font-weight:700;padding:3px 8px;border-radius:var(--radius-full);display:inline-flex;align-items:center;gap:3px}.btn{width:100%;padding:14px;border-radius:var(--radius-sm);border:none;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s ease}.btn:active{transform:scale(.97)}.btn-primary{background:var(--color-primary);color:#0a0a0f}.btn-green{background:#22c55e1a;color:var(--green);border:1px solid rgba(34,197,94,.15)}.btn-purple{background:#a855f71a;color:var(--purple);border:1px solid rgba(168,85,247,.15)}.btn-red{background:#ff453a0f;color:var(--red);border:1px solid rgba(255,69,58,.1)}.btn-outline{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid rgba(255,255,255,.06)}.pin-container{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--bg)}.pin-dots{display:flex;gap:16px;margin:30px 0}.pin-dot{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.15);transition:all .15s ease}.pin-dot.filled{background:var(--color-primary);border-color:var(--color-primary);transform:scale(1.1)}.pin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:280px}.pin-key{width:72px;height:72px;border-radius:50%;background:var(--bg-card);border:1px solid rgba(255,255,255,.06);color:var(--text-primary);font-size:24px;font-weight:700;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .1s ease}.pin-key:active{background:var(--color-primary);color:#0a0a0f;transform:scale(.95)}.pin-key.empty{visibility:hidden}.pin-key.delete{font-size:16px;background:transparent;border:none}.modal-overlay{position:fixed;inset:0;background:#000000b3;z-index:200;display:flex;align-items:flex-end;animation:fadeIn .15s ease}.modal-sheet{background:var(--bg-card);border-radius:20px 20px 0 0;width:100%;max-height:85dvh;overflow-y:auto;padding:20px;padding-bottom:calc(20px + var(--safe-bottom));animation:slideUp .25s ease}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-handle{width:40px;height:4px;background:#ffffff26;border-radius:2px;margin:0 auto 16px}.earning-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.03)}.progress-bar{height:6px;background:var(--bg-elevated);border-radius:3px;overflow:hidden}.progress-fill{height:100%;border-radius:3px;transition:width .3s ease}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}