:root {
    --primary-blue: #0277bd;
    --light-blue: #e3f2fd;
    --primary-green: #2e7d32;
    --light-green: #e8f5e9;
    --primary-saffron: #ef6c00;
    --light-saffron: #fff3e0;
    --primary-violet: #6a1b9a;
    --light-violet: #f3e5f5;
    --light-red: #ffebee;
    --text-color: #212121;
    --bg-color: #f5f5f5;
    --border-radius: 8px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
}

header {
    background: var(--primary-blue);
    color: white;
    padding: 20px 10%;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.header-container h1 { margin-bottom: 10px; }

nav {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.nav-btn {
    background-color: white;
    color: var(--primary-blue);
    border: none;
    padding: 8px 16px;
    font-weight: bold;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.nav-btn:hover { background-color: var(--light-saffron); }

main { padding: 30px 10%; max-width: 1400px; margin: auto; }

h2, h3, h4 { color: var(--primary-blue); margin-bottom: 15px; margin-top: 25px; }

.disclaimer {
    background: var(--light-red);
    padding: 10px;
    border-left: 4px solid red;
    margin-bottom: 25px;
    font-weight: 600;
}

/* Visual Aids: Roadmap, Mindmap, Flowchart */
.visual-aids { margin-bottom: 40px; }

.roadmap-container, .mindmap-container, .flowchart-container {
    background: white;
    padding: 20px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.roadmap-step {
    background: var(--light-blue);
    padding: 10px;
    border: 2px solid var(--primary-blue);
    border-radius: var(--border-radius);
    text-align: center;
    font-weight: bold;
}

.roadmap-arrow { text-align: center; font-size: 24px; color: var(--primary-blue); margin: 5px 0; }

.fc-box {
    background: var(--light-saffron);
    padding: 15px;
    border: 2px solid var(--primary-saffron);
    border-radius: var(--border-radius);
    text-align: center;
    font-weight: bold;
    margin: 0 auto;
    width: 60%;
}
.fc-split { display: flex; justify-content: space-evenly; text-align: center; margin-top: 10px;}
.fc-col { display: flex; flex-direction: column; align-items: center; width: 45%; }
.fc-red { background: var(--light-red); border-color: red; }
.fc-green { background: var(--light-green); border-color: var(--primary-green); }
.fc-arrow, .fc-arrow-down { text-align: center; font-size: 24px; color: var(--text-color); margin: 5px 0; }
.fc-arrow::after { content: "↓"; }
.fc-note { text-align: center; font-size: 0.9em; margin-top: 15px; color: gray; font-style: italic; }

.mindmap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.mm-node { padding: 12px 20px; font-weight: bold; border-radius: 20px; text-align: center;}
.mm-center { background: var(--primary-blue); color: white; }
.mm-branches { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; }
.mm-child { border: 2px solid; }
.mm-blue { background: var(--light-blue); border-color: var(--primary-blue); }
.mm-green { background: var(--light-green); border-color: var(--primary-green); }
.mm-saffron { background: var(--light-saffron); border-color: var(--primary-saffron); }
.mm-violet { background: var(--light-violet); border-color: var(--primary-violet); }
.mm-red { background: var(--light-red); border-color: red; }

/* Tabs */
.tabs-section { background: white; padding: 20px; border-radius: var(--border-radius); box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.tab-buttons { display: flex; gap: 5px; border-bottom: 2px solid var(--primary-blue); flex-wrap: wrap; }
.tab-link {
    background: var(--light-blue);
    border: 1px solid transparent;
    border-bottom: none;
    padding: 10px 15px;
    cursor: pointer;
    font-weight: 600;
    border-radius: 8px 8px 0 0;
    transition: 0.3s;
}
.tab-link.active { background: var(--primary-blue); color: white; }
.tab-content { display: none; padding: 20px 0; animation: fadeIn 0.4s; }

.example-box {
    background: var(--light-green);
    border-left: 4px solid var(--primary-green);
    padding: 15px;
    margin: 15px 0;
    font-style: italic;
}

/* Tables */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}
.data-table th, .data-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
}
.data-table th { background: var(--primary-violet); color: white; }
.data-table tr:nth-child(even) { background: var(--light-violet); }

/* Questions Section */
.questions-section { background: white; padding: 20px; border-radius: var(--border-radius); margin-top: 30px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.question-list { padding-left: 20px; }
.q-item { margin-bottom: 15px; font-weight: 500; background: #fafafa; padding: 10px; border: 1px solid #eee; border-radius: 4px; }
.answer-key { background: var(--light-blue); padding: 20px; border-radius: var(--border-radius); margin-top: 20px; }

.controls-section { margin-top: 20px; text-align: center; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Print Media Query */
@media print {
    body { background: white; color: black; }
    header { position: static; box-shadow: none; color: black; background: none; border-bottom: 2px solid black; }
    nav, .controls-section { display: none; }
    .tab-content { display: block !important; }
    .tab-buttons { display: none; }
    .answer-key { display: block !important; }
}