/* ============================================================
   QAZAQ BIO LAB — жалпы стильдер (2–5 зертханаларға ортақ база)
   Бұрын әр бетте қайталанатын код осында біріктірілді.
   ============================================================ */

:root {
    --bg-deep: #022c22;
    --sidebar-bg: rgba(6, 78, 59, 0.95);
    --accent-green: #34d399;
    --accent-cyan: #22d3ee;
    --glass-border: 1px solid rgba(52, 211, 153, 0.2);
    --danger: #ef4444;
}

body {
    margin: 0; padding: 0;
    background: var(--bg-deep); color: #ecfdf5;
    font-family: 'Segoe UI', sans-serif;
    height: 100vh; display: flex; overflow: hidden; user-select: none;
}

/* --- SIDEBAR --- */
.sidebar {
    width: 260px; background: var(--sidebar-bg);
    display: flex; flex-direction: column;
    border-right: var(--glass-border); z-index: 20;
}
.back-link {
    padding: 20px; color: #a7f3d0; text-decoration: none; font-weight: bold;
    border-bottom: var(--glass-border);
    display: flex; align-items: center; gap: 10px;
}
.nav-item {
    padding: 15px 20px; cursor: pointer; color: #d1fae5;
    display: flex; gap: 10px; align-items: center; transition: 0.2s;
}
.nav-item.active {
    background: rgba(52, 211, 153, 0.2);
    border-left: 3px solid var(--accent-green); color: white;
}

/* --- CONTENT / PAGES --- */
.content { flex: 1; position: relative; display: flex; flex-direction: column; }
.page {
    padding: 40px; display: none; animation: fadeIn 0.5s;
    max-width: 800px; margin: auto; overflow-y: auto; height: 100%;
}
.page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.card {
    background: rgba(0, 0, 0, 0.3); padding: 20px;
    border-radius: 15px; margin-bottom: 20px; border: var(--glass-border);
}
h1 { color: var(--accent-green); margin-top: 0; }

.start-btn {
    width: 150px; background: var(--accent-green); height: 40px;
    border: none; border-radius: 8px; cursor: pointer;
    color: #064e3b; font-weight: bold; display: block; margin-top: 20px;
}