@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--bg-dark:#e6ede4;--bg-card:#fff;--bg-card-hover:#f6faf4;--border-subtle:#e2e8df;--border-active:#bcc8b6;--primary:#2e5a36;--primary-hover:#1e3f24;--accent:#e4ebdc;--accent-hover:#d4e2c6;--success:#2e7d32;--danger:#c62828;--warning:#f59e0b;--text-primary:#1c2e21;--text-secondary:#586b5d;--text-muted:#8a9d8e;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--shadow-sm:0 2px 4px #2e5a360a;--shadow-md:0 8px 24px #2e5a360f;--color-forest:#2e5a36;--color-gold:#d4af37}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg-dark);color:var(--text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;justify-content:center;align-items:center;min-height:100dvh;font-size:14px;line-height:1.6;display:flex;overflow-x:hidden}.app-container{border:1px solid var(--border-subtle);width:100%;max-width:480px;height:92vh;min-height:720px;box-shadow:var(--shadow-md);background-color:#fafaf8;border-radius:20px;flex-direction:column;display:flex;position:relative;overflow:hidden}.glass-card{background:var(--bg-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);border-radius:12px;padding:20px;transition:border-color .2s,background-color .2s,box-shadow .2s}.glass-card:hover{background-color:var(--bg-card-hover);border-color:var(--border-active);box-shadow:0 4px 12px #2e5a360d}.glass-card.active-glow{border-color:var(--primary);background-color:var(--bg-card-hover)}.app-header{border-bottom:1px solid var(--border-subtle);z-index:10;background:#fafaf8;justify-content:space-between;align-items:center;padding:18px 24px;display:flex}.app-title-group{align-items:center;gap:8px;display:flex}.app-logo{font-family:var(--font-sans);letter-spacing:-.5px;color:var(--primary);align-items:center;gap:6px;font-size:18px;font-weight:700;display:flex}.user-status-badge{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);border-radius:8px;flex-shrink:0;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:600;display:flex}.user-status-badge.points{border-color:var(--border-subtle);background:var(--bg-card)}.app-content{scrollbar-width:none;flex-direction:column;flex:1;gap:20px;padding:24px;display:flex;overflow-y:auto}.app-content::-webkit-scrollbar{display:none}.bottom-nav{border-top:1px solid var(--border-subtle);z-index:10;background:#fafaf8;height:64px;justify-content:space-around!important;align-items:center!important;padding:10px 0!important;display:flex!important}.nav-item{color:var(--text-secondary);font-family:var(--font-sans);cursor:pointer;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;height:100%;font-size:11px;font-weight:500;transition:all .15s;display:flex;position:relative}.nav-item:hover,.nav-item.active{color:var(--primary)!important}.nav-item.active:after{content:"";border-radius:2.5px;width:14px;height:3px;position:absolute;bottom:-6px;background:var(--primary)!important}h1,h2,h3,h4{font-family:var(--font-sans);color:var(--primary);letter-spacing:-.3px;font-weight:600}.gradient-text{color:var(--primary)}.btn{font-family:var(--font-sans);border:1px solid var(--border-subtle);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:8px;width:100%;padding:12px 18px;font-size:13.5px;font-weight:600;transition:all .15s;display:inline-flex}.btn-primary{background:var(--primary);color:#fff;border:1px solid #ffffff1a;box-shadow:0 4px 12px #2e5a3626}.btn-primary:hover{background:var(--primary-hover);box-shadow:0 6px 16px #2e5a3640}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm)}.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--border-active)}.btn-accent{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-subtle)}.btn-accent:hover{background:var(--bg-card-hover);border-color:var(--border-active)}.btn-danger{color:var(--danger);background:#ef44441a;border:1px solid #ef444433}.btn-danger:hover{border-color:var(--danger);background:#ef444426}.btn-disabled{background:var(--bg-dark);color:var(--text-muted);border:1px solid var(--border-subtle);cursor:not-allowed}.waveform-canvas{background:var(--bg-card-hover);border:1px solid var(--border-subtle);border-radius:8px;width:100%;height:50px}.recording-pulse{color:var(--danger)!important;border:1px solid var(--danger)!important;background:#ef44441a!important}.onboarding-screen{flex-direction:column;justify-content:center;gap:24px;min-height:100%;padding-bottom:20px;display:flex}.onboarding-logo{text-align:center;margin-bottom:10px}.onboarding-logo .logo-main{font-family:var(--font-sans);letter-spacing:-.8px;font-size:32px;font-weight:700}.form-group{flex-direction:column;gap:6px;display:flex}.form-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;font-size:11px;font-weight:500}.select-input,.text-input{background:var(--bg-card);border:1px solid var(--border-subtle);width:100%;color:var(--text-primary);font-family:var(--font-sans);cursor:pointer;border-radius:8px;outline:none;padding:12px;font-size:14px;transition:border-color .15s}.select-input:focus,.text-input:focus{border-color:var(--border-active)}.dialect-grid{border:1px solid var(--border-subtle);background:var(--bg-dark);border-radius:8px;grid-template-columns:repeat(2,1fr);gap:8px;max-height:180px;padding:2px;display:grid;overflow-y:auto}.dialect-card{background:var(--bg-card);border:1px solid var(--border-subtle);text-align:center;cursor:pointer;border-radius:8px;padding:10px;font-size:13px;font-weight:500;transition:all .15s}.dialect-card:hover{border-color:var(--border-active)}.dialect-card.selected{background:var(--bg-card-hover);border-color:var(--primary);color:var(--primary)}.stimulus-display{flex-direction:column;gap:14px;display:flex}.image-container{aspect-ratio:16/10;border:1px solid var(--border-subtle);border-radius:8px;width:100%;position:relative;overflow:hidden}.stimulus-image{object-fit:cover;width:100%;height:100%}.category-tag{letter-spacing:.5px;text-transform:uppercase;border:1px solid var(--border-subtle);background:#0b0c0ed9;border-radius:4px;padding:4px 8px;font-size:10px;font-weight:500;position:absolute;top:10px;left:10px}.recorder-console{flex-direction:column;gap:14px;display:flex}.recording-status{color:var(--text-secondary);font-size:12px;font-weight:500}.recording-time{font-family:var(--font-sans);font-size:20px;font-weight:600}.peers-grid{flex-direction:column;gap:8px;display:flex}.peer-row{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:8px;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.peer-name-group{align-items:center;gap:8px;display:flex}.peer-avatar{background:var(--accent);width:28px;height:28px;color:var(--primary);border-radius:50%;justify-content:center;align-items:center;font-size:11px;font-weight:600;display:flex}.peer-dialect{color:var(--text-secondary);background:var(--bg-dark);border:1px solid var(--border-subtle);border-radius:4px;padding:2px 6px;font-size:10.5px}.peer-status{font-size:12px;font-weight:500}.peer-status.ready{color:var(--success)}.peer-status.speaking{color:var(--warning)}.voting-section{flex-direction:column;gap:10px;display:flex}.vote-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:8px;flex-direction:column;gap:8px;padding:14px;display:flex}.vote-buttons{gap:8px;display:flex}.vote-btn{border:1px solid var(--border-subtle);cursor:pointer;background:var(--bg-dark);color:var(--text-secondary);border-radius:4px;flex:1;padding:7px;font-size:12px;font-weight:500;transition:all .15s}.vote-btn.yes:hover{color:var(--success);border-color:var(--success);background:#10b9811a}.vote-btn.no:hover{color:var(--danger);border-color:var(--danger);background:#ef44441a}.wallet-card{background:var(--bg-card);border:1px solid var(--border-subtle)}.wallet-balance{font-family:var(--font-sans);color:var(--primary);margin-top:2px;font-size:28px;font-weight:700}.wallet-subtext{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:11px}.redeem-card{background:var(--bg-card);border:1px solid var(--border-subtle);text-align:center;cursor:pointer;border-radius:6px;padding:12px;transition:all .15s}.redeem-card:hover{border-color:var(--primary);background:var(--bg-card-hover)}.bridge-box{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:8px;flex-direction:column;gap:6px;padding:14px;display:flex}.bridge-arrow{color:var(--text-secondary);justify-content:center;display:flex}.leaderboard-list{flex-direction:column;gap:6px;display:flex}.leaderboard-row{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:6px;justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.leaderboard-rank{font-family:var(--font-sans);width:20px;color:var(--text-secondary);font-size:13px;font-weight:600}.rank-gold{color:var(--warning)}.rank-silver{color:#e5e7eb}.rank-bronze{color:#b45309}.image-placeholder-fallback{background:var(--bg-card);border:1px dashed var(--border-subtle);text-align:center;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:10px;display:flex}.btn-skip{border:1px solid var(--border-subtle);color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:4px;padding:4px 12px;font-size:11px;font-weight:500;transition:all .15s}.btn-skip:hover{color:var(--primary);border-color:var(--border-active);background:var(--bg-card-hover)}.form-input{background:var(--bg-card);border:1px solid var(--border-subtle);width:100%;color:var(--text-primary);font-family:var(--font-sans);border-radius:8px;outline:none;padding:10px 14px;font-size:13.5px;transition:all .15s}.form-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2e5a361a}.carousel-arrow{color:#fafaf8;cursor:pointer;z-index:10;background:#2e5a36bf;border:1px solid #fafaf833;border-radius:50%;outline:none;justify-content:center;align-items:center;width:38px;height:38px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 2px 8px #0003}.carousel-arrow:hover{background:#2e5a36f2;transform:translateY(-50%)scale(1.08)}.carousel-arrow:active{transform:translateY(-50%)scale(.95)}.carousel-arrow.left{left:12px}.carousel-arrow.right{right:12px}@media (width<=768px){.carousel-arrow{background:#2e5a368c;width:32px;height:32px}.carousel-arrow.left{left:8px}.carousel-arrow.right{right:8px}body{background-color:#fafaf8!important;padding:0!important}.app-container{border:none!important;border-radius:0!important;max-width:none!important;height:100dvh!important;min-height:100dvh!important}.app-header{padding:12px 16px!important}.app-content{gap:12px!important;padding:12px 14px!important}.glass-card{padding:12px 14px!important}.image-container{aspect-ratio:16/9!important}}