* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #0a0e17; color: #e0e6ed; }
#app { display: flex; flex-direction: column; height: 100vh; padding-bottom: env(safe-area-inset-bottom); }
.screen { display: none; padding: 16px; flex: 1; overflow-y: auto; }
.screen.active { display: block; }
.btn-primary, .btn-secondary, .btn-danger {
    width: 100%; padding: 12px; margin: 8px 0; border: none; border-radius: 8px;
    font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.2s;
}
.btn-primary { background: #0077ff; color: white; }
.btn-secondary { background: #1a2332; color: #e0e6ed; border: 1px solid #2d3748; }
.btn-danger { background: #dc3545; color: white; }
.btn-primary:active, .btn-secondary:active { opacity: 0.8; }
.navbar {
    display: flex; justify-content: space-around; padding: 8px;
    background: #1a2332; border-top: 1px solid #2d3748;
    position: fixed; bottom: 0; left: 0; right: 0; padding-bottom: env(safe-area-inset-bottom);
}
.nav-btn {
    background: none; border: none; font-size: 20px; padding: 8px;
    color: #718096; transition: color 0.2s;
}
.nav-btn.active { color: #0077ff; }
.auth-container { text-align: center; padding: 40px 20px; }
.auth-container h1 { margin-bottom: 16px; font-size: 24px; }
.auth-container p { color: #718096; margin-bottom: 32px; }
.loading-spinner {
    width: 40px; height: 40px; border: 4px solid #2d3748;
    border-top-color: #0077ff; border-radius: 50%;
    animation: spin 1s linear infinite; margin: 60px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }