@import url('https://fonts.googleapis.com');

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(160deg, #f8fafc 0%, #e0f2fe 100%);
    min-height: 100vh;
    color: #1e293b;
    margin: 0;
}

.glass {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 32px;
}

.input-field {
    width: 100%;
    padding: 1rem 1.4rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    outline: none;
    font-size: 0.95rem;
}

.btn-primary {
    background: #3b82f6;
    color: white;
    padding: 1.1rem;
    border-radius: 20px;
    font-weight: 800;
    border: none;
}

.nav-bar {
    position: fixed; bottom: 0; left: 0; right: 0; height: 5.5rem;
    background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(15px);
    display: flex; justify-content: space-around; align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.5); z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; color: #94a3b8; font-size: 0.65rem; gap: 6px; border: none; background: none; }
.tab-active { color: #3b82f6; }

.timer-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(240, 249, 255, 0.98); backdrop-filter: blur(30px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.debug-panel {
    position: fixed; bottom: 0; left: 0; right: 0; height: 180px;
    background: rgba(0, 0, 0, 0.9); color: #4ade80; font-family: monospace;
    font-size: 11px; padding: 15px; overflow-y: auto; z-index: 2000; pointer-events: auto;
}

.debug-toggle-btn {
    position: fixed; bottom: 20px; left: 20px; width: 42px; height: 42px;
    background: rgba(15, 23, 42, 0.6); color: white; border-radius: 50%;
    font-size: 10px; font-weight: bold; z-index: 2100; border: 1px solid rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px);
}

.no-scrollbar::-webkit-scrollbar { display: none; }