/* Reset dan Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --accent-color: #e74c3c;
    --light-color: #ecf0f1;
    --dark-color: #2c3e50;
    --text-color: #333;
    --text-light: #7f8c8d;
    --border-radius: 8px;
    --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

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

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header dan Navigasi */
.navbar {
    background-color: white;
    box-shadow: var(--box-shadow);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-logo img {
    height: 40px;
}

.logo-text h1 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin: 0;
}

.logo-text p {
    font-size: 0.8rem;
    color: var(--text-light);
    margin: 0;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-link {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-link:hover {
    color: var(--secondary-color);
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 200px;
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition);
    list-style: none;
    padding: 10px 0;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: var(--text-color);
    transition: var(--transition);
}

.dropdown-menu li a:hover {
    background-color: var(--light-color);
    color: var(--secondary-color);
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 120px 0 80px;
    margin-top: 70px;
}

.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.hero-buttons {
    display: flex;
    gap: 15px;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--accent-color);
    color: white;
}

.btn-primary:hover {
    background-color: #c0392b;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background-color: white;
    color: var(--primary-color);
}

.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

/* Silabus Section */
.silabus {
    padding: 80px 0;
    background-color: white;
}

.silabus h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: var(--primary-color);
}

.silabus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.silabus-card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    transition: var(--transition);
}

.silabus-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.card-header {
    background-color: var(--primary-color);
    color: white;
    padding: 20px;
}

.card-header h3 {
    margin: 0;
    font-size: 1.3rem;
}

.card-body {
    padding: 20px;
}

.card-body ul {
    list-style: none;
}

.card-body li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.card-body li:last-child {
    border-bottom: none;
}

.card-body strong {
    color: var(--primary-color);
}

/* Materi Section */
.materi {
    padding: 80px 0;
    background-color: var(--light-color);
}

.materi h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: var(--primary-color);
}

.materi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

.materi-card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 30px;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.materi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
}

.materi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.card-icon {
    font-size: 3rem;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

.materi-card h3 {
    font-size: 1.3rem;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.materi-card p {
    color: var(--text-light);
    margin-bottom: 20px;
}

.btn-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: var(--secondary-color);
    color: white;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: var(--transition);
}

.btn-card:hover {
    background-color: var(--primary-color);
    transform: translateX(5px);
}

/* Footer */
footer {
    background-color: var(--dark-color);
    color: white;
    padding: 50px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 30px;
}

.footer-section h3 {
    margin-bottom: 20px;
    color: var(--light-color);
}

.footer-section p, .footer-section li {
    margin-bottom: 10px;
    opacity: 0.8;
}

.footer-section ul {
    list-style: none;
}

.footer-section a {
    color: white;
    text-decoration: none;
    transition: var(--transition);
}

.footer-section a:hover {
    color: var(--secondary-color);
}

.footer-section i {
    margin-right: 10px;
    color: var(--secondary-color);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.7;
}

/* Hamburger Menu (Mobile) */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: var(--primary-color);
    margin: 3px 0;
    transition: var(--transition);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: var(--transition);
        box-shadow: var(--box-shadow);
        padding: 20px 0;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .hero h1 {
        font-size: 2.2rem;
    }
    
    .hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .silabus-grid,
    .materi-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
    }
}

/* Materi Page Styles */
.materi-page {
    margin-top: 70px;
    padding: 40px 0;
}

.materi-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.materi-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 40px;
    border-radius: var(--border-radius);
    margin-bottom: 40px;
    text-align: center;
}

.materi-header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.materi-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 15px;
    border-radius: 20px;
}

.materi-content {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 40px;
    margin-bottom: 40px;
}

.content-section {
    margin-bottom: 40px;
}

.content-section:last-child {
    margin-bottom: 0;
}

.content-section h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--light-color);
}

.content-section h3 {
    color: var(--secondary-color);
    margin: 25px 0 15px;
}

.content-section p {
    margin-bottom: 15px;
    line-height: 1.8;
}

.content-section ul, .content-section ol {
    margin: 15px 0;
    padding-left: 20px;
}

.content-section li {
    margin-bottom: 8px;
}

.code-block {
    background: #2d3748;
    color: #e2e8f0;
    padding: 20px;
    border-radius: var(--border-radius);
    margin: 20px 0;
    overflow-x: auto;
    font-family: 'Courier New', monospace;
}

.info-box {
    background: #e3f2fd;
    border-left: 4px solid var(--secondary-color);
    padding: 20px;
    margin: 20px 0;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.warning-box {
    background: #fff3e0;
    border-left: 4px solid var(--accent-color);
    padding: 20px;
    margin: 20px 0;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.table-container {
    overflow-x: auto;
    margin: 20px 0;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.comparison-table th,
.comparison-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.comparison-table th {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
}

.comparison-table tr:nth-child(even) {
    background-color: #f8f9fa;
}

.comparison-table tr:hover {
    background-color: #e9ecef;
}

.navigation-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    background-color: var(--secondary-color);
    color: white;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 600;
    transition: var(--transition);
}

.nav-btn:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
}

.nav-btn.prev {
    background-color: var(--light-color);
    color: var(--text-color);
}

.nav-btn.prev:hover {
    background-color: #dde4e6;
}

/* Animasi */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.materi-card, .silabus-card {
    animation: fadeIn 0.6s ease-out;
}

/* Additional styles for STP specific elements */
.stp-diagram {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 20px 0;
    box-shadow: var(--box-shadow);
    text-align: center;
}

.stp-diagram img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

.step-by-step {
    background: #f8f9fa;
    border-left: 4px solid var(--secondary-color);
    padding: 20px;
    margin: 20px 0;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.step {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #dee2e6;
}

.step:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.step-number {
    display: inline-block;
    background: var(--secondary-color);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    margin-right: 10px;
    font-weight: bold;
}

.quiz-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 20px 0;
}

.quiz-question {
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.quiz-options {
    list-style: none;
}

.quiz-options li {
    padding: 10px 15px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
}

.quiz-options li:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateX(5px);
}

/* Animation for step-by-step guides */
@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.step {
    animation: slideInFromLeft 0.5s ease-out;
}

/* Enhanced code block styling */
.code-block {
    position: relative;
    background: #1a1a1a;
    color: #f8f8f2;
    padding: 25px;
    border-radius: var(--border-radius);
    margin: 25px 0;
    overflow-x: auto;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    border-left: 4px solid var(--secondary-color);
}

.code-block h4 {
    color: #50fa7b;
    margin-bottom: 15px;
    font-size: 1rem;
}

.code-block code {
    background: none;
    padding: 0;
    color: inherit;
}

/* Copy button styling */
.copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: var(--transition);
}

.copy-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

/* Table of contents styling */
.table-of-contents {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: var(--border-radius);
    padding: 25px;
    margin-bottom: 30px;
    border-left: 4px solid var(--secondary-color);
}

.toc-header {
    margin-bottom: 15px;
}

.toc-header h3 {
    color: var(--primary-color);
    margin: 0;
    font-size: 1.3rem;
}

.toc-list {
    list-style: none;
    padding: 0;
}

.toc-list li {
    margin-bottom: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #dee2e6;
}

.toc-list li:last-child {
    border-bottom: none;
}

.toc-list a {
    color: var(--text-color);
    text-decoration: none;
    transition: var(--transition);
    display: flex;
    align-items: center;
}

.toc-list a:hover {
    color: var(--secondary-color);
    transform: translateX(5px);
}

.toc-list a::before {
    content: '▸';
    margin-right: 10px;
    color: var(--secondary-color);
}

/* Responsive improvements */
@media (max-width: 768px) {
    .materi-header {
        padding: 30px 20px;
    }
    
    .materi-header h1 {
        font-size: 2rem;
    }
    
    .materi-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .meta-item {
        justify-content: center;
    }
    
    .navigation-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .nav-btn {
        text-align: center;
        justify-content: center;
    }
    
    .table-container {
        margin: 15px -20px;
    }
    
    .comparison-table {
        font-size: 0.9rem;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 8px 10px;
    }
}

/* MSTP Specific Styles */
.mstp-region {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 25px;
    border-radius: var(--border-radius);
    margin: 20px 0;
}

.mstp-instance {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 20px;
    margin: 15px 0;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.instance-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.instance-badge {
    background: #2196f3;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: bold;
    margin-right: 15px;
}

.vlan-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.vlan-tag {
    background: rgba(33, 150, 243, 0.1);
    border: 1px solid #2196f3;
    color: #2196f3;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Load Balancing Visualization */
.load-balance-demo {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 25px 0;
    box-shadow: var(--box-shadow);
    border: 2px solid #e0e0e0;
}

.network-topology {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
}

.network-node {
    text-align: center;
    padding: 15px;
    background: #f5f5f5;
    border-radius: var(--border-radius);
    min-width: 120px;
}

.network-link {
    flex-grow: 1;
    height: 3px;
    background: #4caf50;
    margin: 0 10px;
    position: relative;
}

.network-link::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    height: 11px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 5px;
}

.link-primary {
    background: #4caf50;
}

.link-backup {
    background: #ff9800;
}

.traffic-flow {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.flow-item {
    text-align: center;
    padding: 10px;
    background: #e8f5e8;
    border-radius: var(--border-radius);
    flex: 1;
    margin: 0 5px;
}

/* Protocol Comparison Enhancements */
.protocol-matrix {
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    margin: 25px 0;
}

.matrix-header {
    background: var(--primary-color);
    color: white;
    padding: 20px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 1px;
    font-weight: bold;
}

.matrix-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 1px;
    border-bottom: 1px solid #eee;
}

.matrix-row:last-child {
    border-bottom: none;
}

.matrix-cell {
    padding: 15px;
    background: #fafafa;
}

.matrix-cell:first-child {
    font-weight: 600;
    background: #f0f0f0;
}

/* Interactive MSTP Configuration Guide */
.config-wizard {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 25px 0;
    border-left: 4px solid var(--secondary-color);
}

.wizard-step {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #dee2e6;
}

.wizard-step:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.wizard-title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.wizard-icon {
    background: var(--secondary-color);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-weight: bold;
}

/* Animation for MSTP instances */
@keyframes instanceHighlight {
    0% { background-color: #e3f2fd; }
    50% { background-color: #bbdefb; }
    100% { background-color: #e3f2fd; }
}

.mstp-instance.highlight {
    animation: instanceHighlight 2s ease-in-out;
}

/* Responsive improvements for MSTP */
@media (max-width: 768px) {
    .network-topology {
        flex-direction: column;
        gap: 20px;
    }
    
    .network-link {
        width: 3px;
        height: 40px;
        margin: 10px 0;
    }
    
    .traffic-flow {
        flex-direction: column;
        gap: 10px;
    }
    
    .matrix-header,
    .matrix-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .matrix-cell {
        border-bottom: 1px solid #eee;
    }
    
    .vlan-list {
        justify-content: center;
    }
}

/* Print styles for assignments */
@media print {
    .materi-card,
    .navigation-buttons,
    footer {
        display: none;
    }
    
    .materi-content {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .code-block {
        background: #f5f5f5 !important;
        color: #333 !important;
        border: 1px solid #ddd;
    }
}

/* Routing Protocol Specific Styles */
.protocol-classification {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.classification-item {
    background: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--secondary-color);
}

.classification-item h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

/* Routing Process Visualization */
.routing-process {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.process-step {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.process-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.process-icon {
    background: var(--secondary-color);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.process-content h4 {
    margin: 0 0 8px 0;
    color: var(--primary-color);
}

.process-content p {
    margin: 0;
    color: var(--text-light);
    line-height: 1.5;
}

/* Comparison Matrix */
.comparison-matrix {
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    margin: 25px 0;
}

.matrix-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    background: var(--primary-color);
    color: white;
    font-weight: bold;
}

.matrix-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    border-bottom: 1px solid #eee;
}

.matrix-row:nth-child(even) {
    background: #f8f9fa;
}

.matrix-category,
.matrix-dv,
.matrix-ls {
    padding: 15px;
    display: flex;
    align-items: center;
}

.matrix-category {
    font-weight: 600;
    background: #f0f0f0;
}

.matrix-dv {
    background: #e3f2fd;
    border-left: 1px solid #ddd;
}

.matrix-ls {
    background: #f3e5f5;
    border-left: 1px solid #ddd;
}

/* Case Study Styles */
.case-study {
    background: white;
    border-radius: var(--border-radius);
    margin: 20px 0;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.case-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
}

.case-header h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.case-body {
    padding: 25px;
}

.case-body ul {
    margin-bottom: 20px;
}

.case-body li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.case-body li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
}

.recommendation {
    background: #e8f5e8;
    border: 1px solid #4caf50;
    border-radius: var(--border-radius);
    padding: 15px;
    font-weight: 600;
    color: #2e7d32;
}

/* Skill Grid */
.skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.skill-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.skill-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.skill-icon {
    background: var(--secondary-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.skill-content h4 {
    margin: 0 0 8px 0;
    color: var(--primary-color);
}

.skill-content p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Network Diagram */
.network-diagram {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 25px 0;
    box-shadow: var(--box-shadow);
    text-align: center;
}

.topology-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 10px;
}

.router {
    background: #2196f3;
    color: white;
    padding: 15px 20px;
    border-radius: var(--border-radius);
    font-weight: 600;
    min-width: 120px;
}

.link {
    color: var(--text-light);
    font-weight: 600;
    padding: 0 15px;
}

.networks {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.network {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    padding: 10px 15px;
    border-radius: var(--border-radius);
    font-size: 0.9rem;
}

/* Exercise Questions */
.exercise-questions {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 25px 0;
}

.question {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #dee2e6;
}

.question:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.question h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.answer-hint {
    margin-top: 15px;
}

.hint-btn {
    background: var(--secondary-color);
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--transition);
}

.hint-btn:hover {
    background: var(--primary-color);
}

.hint-content {
    display: none;
    margin-top: 10px;
    padding: 15px;
    background: white;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--accent-color);
}

.hint-content.show {
    display: block;
}

/* Preview Box */
.preview-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 25px 0;
}

.preview-box h3 {
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.preview-box ul {
    margin: 0;
}

.preview-box li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.preview-box li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #4caf50;
}

/* Protocol Animation */
@keyframes routePropagation {
    0% { background-color: #e3f2fd; }
    50% { background-color: #bbdefb; }
    100% { background-color: #e3f2fd; }
}

.route-animation {
    animation: routePropagation 2s ease-in-out;
}

/* Responsive Design for Routing */
@media (max-width: 768px) {
    .protocol-classification {
        grid-template-columns: 1fr;
    }
    
    .routing-process {
        grid-template-columns: 1fr;
    }
    
    .process-step {
        flex-direction: column;
        text-align: center;
    }
    
    .matrix-header,
    .matrix-row {
        grid-template-columns: 1fr;
    }
    
    .matrix-category,
    .matrix-dv,
    .matrix-ls {
        border-left: none;
        border-bottom: 1px solid #eee;
    }
    
    .topology-visual {
        flex-direction: column;
    }
    
    .link {
        padding: 10px 0;
        transform: rotate(90deg);
    }
    
    .skill-grid {
        grid-template-columns: 1fr;
    }
    
    .skill-card {
        flex-direction: column;
        text-align: center;
    }
}

/* Print Styles */
@media print {
    .network-diagram,
    .exercise-questions,
    .quiz-box {
        break-inside: avoid;
    }
    
    .skill-card {
        border: 1px solid #ddd;
        margin-bottom: 10px;
    }
}

/* OSPF Specific Styles */
.ospf-areas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.area-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.area-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.area-badge {
    padding: 8px 15px;
    border-radius: 20px;
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.area-badge.backbone {
    background: #e74c3c;
}

.area-badge.normal {
    background: #3498db;
}

.area-badge.stub {
    background: #9b59b6;
}

.area-content h4 {
    margin: 0 0 8px 0;
    color: var(--primary-color);
}

.area-content p {
    margin: 0;
    color: var(--text-light);
    line-height: 1.5;
}

/* OSPF State Machine */
.ospf-states {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 25px 0;
    box-shadow: var(--box-shadow);
}

.state-track {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.state-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: var(--border-radius);
    flex: 1;
    min-width: 200px;
}

.state-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    flex-shrink: 0;
}

.state-icon.down { background: #e74c3c; }
.state-icon.init { background: #e67e22; }
.state-icon.twoway { background: #f39c12; }
.state-icon.exstart { background: #3498db; }
.state-icon.exchange { background: #2ecc71; }
.state-icon.loading { background: #27ae60; }
.state-icon.full { background: #16a085; }

.state-content h4 {
    margin: 0 0 5px 0;
    color: var(--primary-color);
    font-size: 1rem;
}

.state-content p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.4;
}

.state-arrow {
    color: var(--text-light);
    font-weight: bold;
    padding: 0 10px;
}

/* LSA Types */
.lsa-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.lsa-item {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    transition: var(--transition);
}

.lsa-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.lsa-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.lsa-type {
    background: rgba(255,255,255,0.2);
    padding: 5px 12px;
    border-radius: 15px;
    font-weight: bold;
    font-size: 0.9rem;
}

.lsa-name {
    font-weight: 600;
    font-size: 1.1rem;
}

.lsa-content {
    padding: 20px;
}

.lsa-content p {
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.lsa-content p:last-child {
    margin-bottom: 0;
}

/* LSA Flow */
.lsa-flow {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 25px 0;
}

.flow-step {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.flow-step:last-child {
    margin-bottom: 0;
}

.flow-node {
    background: #3498db;
    color: white;
    padding: 12px 20px;
    border-radius: var(--border-radius);
    font-weight: 600;
    min-width: 100px;
    text-align: center;
}

.flow-arrow {
    color: var(--text-light);
    font-weight: bold;
    font-size: 1.2rem;
}

.flow-description {
    text-align: center;
    padding: 10px 15px;
    background: white;
    border-radius: var(--border-radius);
    border: 1px solid #e0e0e0;
}

/* SPF Demo */
.spf-demo {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 25px 0;
    box-shadow: var(--box-shadow);
    text-align: center;
}

.ospf-router {
    background: #3498db;
    color: white;
    padding: 15px 20px;
    border-radius: var(--border-radius);
    font-weight: 600;
    min-width: 120px;
    display: inline-block;
    margin: 0 10px;
    transition: var(--transition);
}

.ospf-router.active {
    background: #e74c3c;
    transform: scale(1.05);
}

.ospf-link {
    color: var(--text-light);
    font-weight: 600;
    padding: 0 15px;
    display: inline-block;
}

.spf-result {
    margin-top: 20px;
    padding: 15px;
    background: #e8f5e8;
    border-radius: var(--border-radius);
    border: 1px solid #4caf50;
}

/* Best Practices */
.best-practices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.practice-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.practice-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}

.practice-icon {
    background: var(--secondary-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.practice-content h4 {
    margin: 0 0 8px 0;
    color: var(--primary-color);
}

.practice-content p {
    margin: 0;
    color: var(--text-light);
    line-height: 1.5;
}

/* OSPF Network Types */
.ospf-network-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.network-type {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
}

.network-type h4 {
    margin: 0 0 15px 0;
    color: var(--primary-color);
}

.network-type ul {
    text-align: left;
    margin: 0;
}

.network-type li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.network-type li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
}

/* Animation for OSPF states */
@keyframes stateTransition {
    0% { background-color: #f8f9fa; }
    50% { background-color: #e3f2fd; }
    100% { background-color: #f8f9fa; }
}

.state-item.active {
    animation: stateTransition 2s ease-in-out;
}

/* Responsive Design for OSPF */
@media (max-width: 768px) {
    .ospf-areas {
        grid-template-columns: 1fr;
    }
    
    .state-track {
        flex-direction: column;
    }
    
    .state-arrow {
        transform: rotate(90deg);
        padding: 10px 0;
    }
    
    .lsa-types {
        grid-template-columns: 1fr;
    }
    
    .flow-step {
        flex-direction: column;
    }
    
    .flow-arrow {
        transform: rotate(90deg);
        padding: 10px 0;
    }
    
    .best-practices {
        grid-template-columns: 1fr;
    }
    
    .network-topology {
        flex-direction: column;
    }
    
    .ospf-link {
        padding: 10px 0;
        transform: rotate(90deg);
    }
}

/* Print Styles */
@media print {
    .ospf-states,
    .lsa-types,
    .spf-demo {
        break-inside: avoid;
    }
    
    .state-item {
        border: 1px solid #ddd;
        margin-bottom: 10px;
    }
}

/* EIGRP Specific Styles */
.eigrp-terminology {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.term-item {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    transition: var(--transition);
}

.term-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.term-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    font-weight: 600;
    font-size: 1.1rem;
}

.term-content {
    padding: 20px;
}

.term-content p {
    margin: 0;
    line-height: 1.5;
    color: var(--text-light);
}

/* DUAL Algorithm Styles */
.dual-condition {
    background: #e8f5e8;
    border: 2px solid #4caf50;
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 25px 0;
    text-align: center;
}

.condition-formula {
    font-size: 1.3rem;
    font-weight: bold;
    color: #2e7d32;
    margin-bottom: 15px;
}

.condition-explanation {
    font-size: 1rem;
    line-height: 1.5;
}

.dual-states {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 25px 0;
    box-shadow: var(--box-shadow);
}

.state-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.state-active,
.state-passive {
    padding: 25px;
    border-radius: var(--border-radius);
    border: 2px solid #e0e0e0;
}

.state-active {
    border-color: #e74c3c;
    background: #fdedec;
}

.state-passive {
    border-color: #27ae60;
    background: #e8f6f3;
}

.state-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.state-icon.active {
    background: #e74c3c;
}

.state-icon.passive {
    background: #27ae60;
}

.state-content h4 {
    margin: 0 0 15px 0;
    color: var(--primary-color);
}

.state-content ul {
    margin: 0;
    padding-left: 20px;
}

.state-content li {
    margin-bottom: 8px;
    line-height: 1.4;
}

/* EIGRP Neighbor Process */
.eigrp-neighbor-process {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.neighbor-step {
    text-align: center;
    padding: 20px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.step-icon {
    background: var(--secondary-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin: 0 auto 15px auto;
}

.neighbor-step h4 {
    margin: 0 0 10px 0;
    color: var(--primary-color);
}

.neighbor-step p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Topology Demo */
.topology-demo {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 25px 0;
    box-shadow: var(--box-shadow);
    text-align: center;
}

.eigrp-router {
    background: #3498db;
    color: white;
    padding: 15px 20px;
    border-radius: var(--border-radius);
    font-weight: 600;
    min-width: 120px;
    display: inline-block;
    margin: 0 10px;
}

.eigrp-link {
    color: var(--text-light);
    font-weight: 600;
    padding: 0 15px;
    display: inline-block;
    border-top: 2px solid #3498db;
    margin: 0 10px;
}

.network-info {
    margin-top: 20px;
    padding: 15px;
    background: #e3f2fd;
    border-radius: var(--border-radius);
    font-weight: 600;
}

/* Metric Calculation */
.metric-calculation {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 25px 0;
}

.calc-step {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid #dee2e6;
}

.calc-step:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.calc-step h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.calc-content {
    background: white;
    padding: 20px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--secondary-color);
}

.calc-content p {
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.calc-content p:last-child {
    margin-bottom: 0;
}

/* Complex Topology */
.complex-topology {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 25px 0;
    box-shadow: var(--box-shadow);
}

.topology-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 20px;
    align-items: center;
    justify-items: center;
}

.router-node {
    background: #3498db;
    color: white;
    padding: 15px;
    border-radius: var(--border-radius);
    text-align: center;
    font-weight: 600;
    min-width: 100px;
}

.link-primary {
    color: #27ae60;
    font-weight: bold;
    padding: 10px;
    text-align: center;
}

.link-alternate {
    color: #e67e22;
    font-weight: bold;
    padding: 10px;
    text-align: center;
}

/* Successor Analysis */
.successor-analysis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.analysis-item {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.analysis-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
}

.analysis-header h4 {
    margin: 0;
}

.analysis-content {
    padding: 20px;
}

.analysis-content p {
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.status-successor {
    background: #27ae60;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
}

.status-notfeasible {
    background: #e74c3c;
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Protocol Comparison */
.protocol-comparison {
    background: white;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    margin: 25px 0;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

.comp-header {
    display: contents;
}

.comp-category,
.comp-eigrp,
.comp-ospf {
    padding: 20px;
    font-weight: bold;
    background: var(--primary-color);
    color: black;
    display: flex;
    align-items: center;
}

.comp-eigrp {
    background: #3498db;
}

.comp-ospf {
    background: #e74c3c;
}

.comp-row {
    display: contents;
}

.comp-row:nth-child(even) .comp-category,
.comp-row:nth-child(even) .comp-eigrp,
.comp-row:nth-child(even) .comp-ospf {
    background: #f8f9fa;
}

.comp-row:nth-child(odd) .comp-category,
.comp-row:nth-child(odd) .comp-eigrp,
.comp-row:nth-child(odd) .comp-ospf {
    background: white;
}

.comp-category {
    font-weight: 600;
    border-right: 1px solid #e0e0e0;
}

.comp-eigrp {
    border-right: 1px solid #e0e0e0;
}

/* Best Practices List */
.best-practices-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin: 25px 0;
}

.practice-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.practice-icon {
    background: var(--secondary-color);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.practice-content h4 {
    margin: 0 0 15px 0;
    color: var(--primary-color);
}

.practice-content p {
    margin: 0 0 15px 0;
    line-height: 1.5;
    color: var(--text-light);
}

/* Answer Guide */
.answer-guide {
    background: #618097;
    border-radius: var(--border-radius);
    padding: 25px;
    margin-top: 20px;
}

.answer-guide h4 {
    margin: 0 0 15px 0;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.answer-guide ol {
    margin: 0;
    padding-left: 20px;
}

.answer-guide li {
    margin-bottom: 10px;
    line-height: 1.5;
}

.answer-guide strong {
    color: var(--primary-color);
}

/* Animation for EIGRP */
@keyframes metricCalculation {
    0% { background-color: #f8f9fa; }
    50% { background-color: #e3f2fd; }
    100% { background-color: #f8f9fa; }
}

.calc-step.active {
    animation: metricCalculation 2s ease-in-out;
}

/* Responsive Design for EIGRP */
@media (max-width: 768px) {
    .eigrp-terminology {
        grid-template-columns: 1fr;
    }
    
    .state-pair {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .eigrp-neighbor-process {
        grid-template-columns: 1fr;
    }
    
    .topology-grid {
        grid-template-columns: 1fr;
    }
    
    .eigrp-link {
        padding: 10px 0;
        transform: rotate(90deg);
        margin: 10px 0;
    }
    
    .successor-analysis {
        grid-template-columns: 1fr;
    }
    
    .comparison-grid {
        grid-template-columns: 1fr;
    }
    
    .comp-header {
        display: none;
    }
    
    .comp-row {
        display: grid;
        grid-template-columns: 1fr;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .comp-category::before {
        content: "Kategori: ";
        font-weight: bold;
    }
    
    .comp-eigrp::before {
        content: "EIGRP: ";
        font-weight: bold;
    }
    
    .comp-ospf::before {
        content: "OSPF: ";
        font-weight: bold;
    }
    
    .practice-item {
        flex-direction: column;
        text-align: center;
    }
}

/* Print Styles */
@media print {
    .eigrp-terminology,
    .dual-states,
    .metric-calculation {
        break-inside: avoid;
    }
    
    .term-item {
        border: 1px solid #ddd;
        margin-bottom: 15px;
    }
}

/* Review Page Specific Styles */
.concept-map {
    text-align: center;
    margin: 30px 0;
}

.map-level {
    margin: 20px 0;
}

.map-node {
    display: inline-block;
    padding: 20px 30px;
    border-radius: var(--border-radius);
    color: white;
    font-weight: 600;
    box-shadow: var(--box-shadow);
    min-width: 300px;
}

.map-node.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.map-node.secondary {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.map-node.tertiary {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.map-node h3 {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
}

.map-node p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

.map-connector {
    font-size: 1.5rem;
    color: var(--text-light);
    margin: 10px 0;
}

/* Review Accordion */
.review-accordion {
    margin: 30px 0;
}

.accordion-item {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 15px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.accordion-header {
    padding: 20px 25px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: var(--transition);
}

.accordion-header:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.accordion-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.1rem;
}

.accordion-icon {
    font-size: 1.2rem;
    font-weight: bold;
    transition: var(--transition);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.accordion-content.active {
    max-height: 1000px;
}

.review-summary {
    padding: 30px;
}

.review-summary h4 {
    color: var(--primary-color);
    margin: 20px 0 15px 0;
}

.review-summary h4:first-child {
    margin-top: 0;
}

.mastery-checklist {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    padding: 20px;
    margin: 15px 0;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.checklist-item:last-child {
    margin-bottom: 0;
}

.checklist-item i {
    color: #27ae60;
    flex-shrink: 0;
}

.formula-box {
    background: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 20px;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    margin: 15px 0;
}

.quick-quiz {
    background: #e8f5e8;
    border: 1px solid #4caf50;
    border-radius: var(--border-radius);
    padding: 20px;
    margin: 15px 0;
}

.quick-quiz h4 {
    margin: 0 0 15px 0;
    color: #2e7d32;
}

.quick-quiz p {
    margin: 0 0 10px 0;
}

.quick-quiz p:last-child {
    margin-bottom: 0;
}

/* Integration Scenario */
.integration-scenario {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 30px 0;
    box-shadow: var(--box-shadow);
}

.scenario-visual {
    text-align: center;
    margin: 25px 0;
}

.network-layer {
    display: inline-block;
    text-align: center;
    margin: 0 20px;
    vertical-align: top;
}

.layer-icon {
    background: var(--secondary-color);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 15px auto;
}

.layer-content h4 {
    margin: 0 0 8px 0;
    color: var(--primary-color);
}

.layer-content p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.9rem;
}

.layer-connector {
    display: inline-block;
    font-size: 1.5rem;
    color: var(--text-light);
    margin: 0 10px;
    vertical-align: middle;
}

.troubleshooting-flow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0;
}

.flow-step {
    text-align: center;
    flex: 1;
    min-width: 150px;
}

.step-number {
    background: var(--secondary-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin: 0 auto 15px auto;
}

.step-content h4 {
    margin: 0 0 8px 0;
    color: var(--primary-color);
    font-size: 1rem;
}

.step-content p {
    margin: 0;
    color: var(--text-light);
    font-size: 0.85rem;
    line-height: 1.3;
}

.flow-arrow {
    color: var(--text-light);
    font-weight: bold;
    font-size: 1.2rem;
}

/* UTS Focus */
.uts-focus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.focus-item {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--box-shadow);
    text-align: center;
}

.focus-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 20px auto;
}

.focus-content h3 {
    margin: 0 0 15px 0;
    color: var(--primary-color);
}

.focus-content ul {
    text-align: left;
    margin: 0;
}

.focus-content li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.focus-content li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
}

/* Question Types */
.question-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.type-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--box-shadow);
    text-align: center;
    border-top: 4px solid var(--secondary-color);
}

.type-card h4 {
    margin: 0 0 15px 0;
    color: var(--primary-color);
}

.type-card p {
    margin: 0 0 15px 0;
    color: var(--text-light);
    line-height: 1.4;
}

.type-weight {
    background: var(--secondary-color);
    color: white;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Practice Exercises */
.practice-exercises {
    margin: 30px 0;
}

.exercise-item {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 30px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.exercise-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.exercise-header h3 {
    margin: 0;
}

.exercise-points {
    background: rgba(255,255,255,0.2);
    padding: 5px 12px;
    border-radius: 15px;
    font-weight: bold;
    font-size: 0.9rem;
}

.exercise-content {
    padding: 30px;
}

.topology-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}

.diagram-node {
    background: #3498db;
    color: white;
    padding: 12px 20px;
    border-radius: var(--border-radius);
    font-weight: 600;
    text-align: center;
    min-width: 120px;
}

.diagram-node.core { background: #e74c3c; }
.diagram-node.distribution { background: #3498db; }
.diagram-node.access { background: #2ecc71; }
.diagram-node.router { background: #9b59b6; }
.diagram-node.user { background: #f39c12; }

.diagram-connector {
    color: var(--text-light);
    font-weight: bold;
}

.exercise-questions {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    padding: 25px;
}

.question {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #dee2e6;
}

.question:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.question p {
    margin: 0 0 15px 0;
    line-height: 1.5;
}

/* Exam Tips */
.exam-tips {
    margin: 30px 0;
}

.tip-category {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: var(--box-shadow);
}

.tip-category h3 {
    margin: 0 0 20px 0;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 12px;
}

.tip-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.tip-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.tip-icon {
    background: var(--secondary-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tip-text p {
    margin: 0;
    line-height: 1.5;
}

.tip-text strong {
    color: var(--primary-color);
}

/* Learning Resources */
.learning-resources {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 30px 0;
}

.resource-category {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--box-shadow);
}

.resource-category h3 {
    margin: 0 0 15px 0;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.resource-category ul {
    margin: 0;
}

.resource-category li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}

.resource-category li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
}

/* Study Schedule */
.study-schedule {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 30px 0;
    box-shadow: var(--box-shadow);
}

.schedule-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.schedule-day {
    text-align: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--secondary-color);
}

.schedule-day h4 {
    margin: 0 0 15px 0;
    color: var(--primary-color);
}

.schedule-day ul {
    margin: 0;
    text-align: left;
}

.schedule-day li {
    margin-bottom: 8px;
    font-size: 0.9rem;
    line-height: 1.3;
}

/* Responsive Design for Review */
@media (max-width: 768px) {
    .map-node {
        min-width: auto;
        width: 90%;
    }
    
    .accordion-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .troubleshooting-flow {
        flex-direction: column;
    }
    
    .flow-arrow {
        transform: rotate(90deg);
        padding: 10px 0;
    }
    
    .uts-focus {
        grid-template-columns: 1fr;
    }
    
    .question-types {
        grid-template-columns: 1fr;
    }
    
    .exercise-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .tip-content {
        grid-template-columns: 1fr;
    }
    
    .learning-resources {
        grid-template-columns: 1fr;
    }
    
    .schedule-grid {
        grid-template-columns: 1fr;
    }
}

/* Animation for Review */
@keyframes highlight {
    0% { background-color: #f8f9fa; }
    50% { background-color: #e3f2fd; }
    100% { background-color: #f8f9fa; }
}

.accordion-item.active {
    animation: highlight 2s ease-in-out;
}

/* UTS Specific Styles */
.exam-notice {
    background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: var(--box-shadow);
}

.notice-icon {
    font-size: 3rem;
    color: #e74c3c;
}

.notice-content h2 {
    color: #2d3436;
    margin-bottom: 10px;
}

.notice-content p {
    color: #636e72;
    font-size: 1.1rem;
}

/* Coverage Grid */
.coverage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.coverage-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 20px;
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    border-top: 4px solid var(--secondary-color);
}

.coverage-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.coverage-icon {
    font-size: 2rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.coverage-card h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.coverage-card p {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Exam Format */
.exam-format {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 25px 0;
}

.format-card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    transition: var(--transition);
}

.format-card:hover {
    transform: translateY(-5px);
}

.format-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 20px;
    text-align: center;
}

.format-header i {
    font-size: 2rem;
    margin-bottom: 10px;
}

.format-header h3 {
    margin: 0;
    font-size: 1.2rem;
}

.format-body {
    padding: 20px;
}

.format-body strong {
    color: var(--accent-color);
    font-size: 1.1rem;
}

/* Syllabus */
.exam-syllabus {
    margin: 25px 0;
}

.syllabus-topic {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.syllabus-topic h3 {
    background: var(--light-color);
    padding: 15px 20px;
    margin: 0;
    color: var(--primary-color);
    border-left: 4px solid var(--secondary-color);
}

.topic-details {
    padding: 20px;
}

.topic-details h4 {
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.topic-details ul {
    list-style: none;
    padding: 0;
}

.topic-details li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 20px;
}

.topic-details li:before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
}

.topic-details li:last-child {
    border-bottom: none;
}

/* Sample Questions */
.sample-questions {
    margin: 25px 0;
}

.question-card {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 25px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    border-left: 4px solid var(--accent-color);
}

.question-header {
    background: var(--light-color);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.question-number {
    background: var(--accent-color);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
}

.question-weight {
    color: var(--text-light);
    font-weight: 600;
}

.question-body {
    padding: 25px;
}

.question-body h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    text-align: center;
}

.scenario {
    background: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    border-left: 4px solid var(--secondary-color);
}

.scenario h4 {
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.questions ol {
    padding-left: 20px;
}

.questions li {
    margin-bottom: 15px;
    line-height: 1.6;
}

/* Strategy Guide */
.strategy-guide {
    margin: 25px 0;
}

.timeline {
    position: relative;
    margin: 30px 0;
}

.timeline:before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--secondary-color);
}

.timeline-item {
    display: flex;
    margin-bottom: 25px;
    position: relative;
}

.timeline-time {
    background: var(--secondary-color);
    color: white;
    padding: 10px 15px;
    border-radius: var(--border-radius);
    font-weight: bold;
    min-width: 80px;
    text-align: center;
    margin-right: 20px;
    position: relative;
    z-index: 2;
}

.timeline-content {
    background: white;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    flex: 1;
}

.timeline-content h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.tip-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.tip-card:hover {
    transform: translateY(-5px);
}

.tip-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.tip-card h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

/* Grading Criteria */
.grading-criteria {
    margin: 25px 0;
}

.grading-examples {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 25px;
}

.example-card {
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.good-example {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-left: 4px solid #28a745;
}

.poor-example {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    border-left: 4px solid #dc3545;
}

.example-card h4 {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.good-example h4 {
    color: #155724;
}

.poor-example h4 {
    color: #721c24;
}

/* Exam Rules */
.exam-rules {
    margin: 25px 0;
}

.rules-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 30px;
}

.rule-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--box-shadow);
}

.rule-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    text-align: center;
}

.forbidden {
    color: #e74c3c;
}

.allowed {
    color: #27ae60;
}

.rule-card h4 {
    text-align: center;
    margin-bottom: 15px;
    color: var(--primary-color);
}

.rule-card ul {
    list-style: none;
    padding: 0;
}

.rule-card li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 25px;
}

.rule-card li:before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.forbidden li:before {
    content: '❌';
}

.allowed li:before {
    content: '✅';
}

.identification-requirements {
    background: #e3f2fd;
    padding: 25px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--secondary-color);
}

.id-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.id-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.id-item i {
    color: var(--secondary-color);
    font-size: 1.2rem;
}

/* Preparation Guide */
.preparation-guide {
    margin: 25px 0;
}

.preparation-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.prep-phase {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--box-shadow);
    border-top: 4px solid var(--secondary-color);
}

.prep-phase h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--light-color);
}

.prep-phase ul {
    list-style: none;
    padding: 0;
}

.prep-phase li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 20px;
}

.prep-phase li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: bold;
}

.prep-phase li:last-child {
    border-bottom: none;
}

.checklist-section {
    background: #f8f9fa;
    padding: 25px;
    border-radius: var(--border-radius);
}

.checklist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: var(--transition);
}

.checklist-item:hover {
    transform: translateX(5px);
}

.checklist-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--secondary-color);
}

.checklist-item label {
    cursor: pointer;
    flex: 1;
}

/* Study Resources */
.study-resources {
    margin: 25px 0;
}

.resource-category {
    margin-bottom: 30px;
}

.resource-category h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--light-color);
}

.resource-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.resource-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.resource-item:hover {
    transform: translateY(-3px);
}

.resource-item i {
    font-size: 2rem;
    color: var(--secondary-color);
}

.resource-info h4 {
    color: var(--primary-color);
    margin-bottom: 5px;
}

.resource-info p {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Motivational Section */
.motivational-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: var(--border-radius);
    padding: 40px;
    text-align: center;
    margin: 25px 0;
}

.motivation-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.motivation-content h2 {
    margin-bottom: 30px;
    font-size: 2rem;
}

.motivation-tips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.motivation-tip {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: var(--border-radius);
    backdrop-filter: blur(10px);
}

.motivation-tip i {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #ffeaa7;
}

.motivation-tip strong {
    color: #ffeaa7;
    display: block;
    margin-bottom: 5px;
}

/* Responsive Design for UTS Page */
@media (max-width: 768px) {
    .exam-notice {
        flex-direction: column;
        text-align: center;
    }
    
    .coverage-grid {
        grid-template-columns: 1fr;
    }
    
    .exam-format {
        grid-template-columns: 1fr;
    }
    
    .rules-grid {
        grid-template-columns: 1fr;
    }
    
    .grading-examples {
        grid-template-columns: 1fr;
    }
    
    .preparation-timeline {
        grid-template-columns: 1fr;
    }
    
    .resource-list {
        grid-template-columns: 1fr;
    }
    
    .motivation-tips {
        grid-template-columns: 1fr;
    }
    
    .timeline:before {
        left: 20px;
    }
    
    .timeline-time {
        min-width: 60px;
        font-size: 0.9rem;
    }
}

/* Animation for checklist */
@keyframes checkmark {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.checklist-item input[type="checkbox"]:checked + label {
    color: var(--secondary-color);
    text-decoration: line-through;
}

.checklist-item input[type="checkbox"]:checked {
    animation: checkmark 0.3s ease-in-out;
}

/* WAN Technologies Specific Styles */
.analogy-box {
    background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
    color: white;
    padding: 25px;
    border-radius: var(--border-radius);
    margin: 20px 0;
    box-shadow: var(--box-shadow);
}

.analogy-box h3 {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.analogy-box ul {
    list-style: none;
    padding: 0;
}

.analogy-box li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    padding-left: 25px;
}

.analogy-box li:before {
    content: '➤';
    position: absolute;
    left: 0;
    color: #ffeaa7;
}

.analogy-box li:last-child {
    border-bottom: none;
}

/* Importance Grid */
.importance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.importance-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    border-top: 4px solid var(--secondary-color);
}

.importance-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.importance-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.importance-card h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

/* Classification Diagram */
.classification-diagram {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 25px 0;
    box-shadow: var(--box-shadow);
}

.wan-classification {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.classification-category h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--light-color);
}

.sub-categories {
    display: grid;
    gap: 20px;
}

.sub-category {
    background: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--secondary-color);
}

.sub-category h4 {
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.sub-category ul {
    list-style: none;
    padding: 0;
}

.sub-category li {
    padding: 5px 0;
    border-bottom: 1px solid #dee2e6;
    position: relative;
    padding-left: 20px;
}

.sub-category li:before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: bold;
}

.sub-category li:last-child {
    border-bottom: none;
}

/* Technology Comparison */
.technology-comparison {
    margin: 25px 0;
}

.tech-category {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 25px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.tech-category h3 {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 20px;
    margin: 0;
}

.tech-details {
    padding: 25px;
}

.tech-characteristics, .tech-applications {
    margin-bottom: 20px;
}

.tech-characteristics h4, .tech-applications h4 {
    color: var(--secondary-color);
    margin-bottom: 10px;
}

/* MPLS Architecture */
.mpls-architecture {
    margin: 20px 0;
}

.architecture-diagram {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.mpls-node {
    background: var(--light-color);
    padding: 15px;
    border-radius: var(--border-radius);
    text-align: center;
    min-width: 120px;
    border: 2px solid var(--secondary-color);
}

.mpls-node span {
    font-weight: bold;
    color: var(--primary-color);
}

.connection {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* VPN Types */
.vpn-types {
    margin: 20px 0;
}

.vpn-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.vpn-type {
    background: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--accent-color);
}

.vpn-type h5 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

/* SD-WAN Benefits */
.sdwan-benefits {
    margin: 20px 0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.benefit-item {
    background: var(--light-color);
    padding: 15px;
    border-radius: var(--border-radius);
    text-align: center;
    transition: var(--transition);
}

.benefit-item:hover {
    background: var(--secondary-color);
    color: white;
    transform: translateY(-3px);
}

.benefit-item i {
    font-size: 1.5rem;
    margin-bottom: 8px;
    display: block;
}

/* SD-WAN Architecture */
.sdwan-architecture {
    margin: 20px 0;
}

.architecture-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.flow-step {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--secondary-color);
}

.step-number {
    background: var(--secondary-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
}

.step-content h5 {
    color: var(--primary-color);
    margin-bottom: 5px;
}

/* WAN Concepts */
.wan-concepts {
    margin: 25px 0;
}

.concept-category {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 25px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.concept-category h3 {
    background: var(--light-color);
    padding: 20px;
    margin: 0;
    color: var(--primary-color);
    border-left: 4px solid var(--secondary-color);
}

.concept-details {
    padding: 25px;
}

/* SLA Metrics */
.sla-metrics {
    margin: 20px 0;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.metric-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: var(--border-radius);
}

.metric-icon {
    font-size: 1.5rem;
    color: var(--secondary-color);
}

.metric-info h5 {
    color: var(--primary-color);
    margin-bottom: 5px;
}

/* SLA Tiers */
.sla-tiers {
    margin: 20px 0;
}

.tiers-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.tier-card {
    padding: 20px;
    border-radius: var(--border-radius);
    text-align: center;
    color: white;
}

.tier-card.platinum {
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
}

.tier-card.gold {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}

.tier-card.silver {
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
}

.tier-card h5 {
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.tier-card ul {
    list-style: none;
    padding: 0;
}

.tier-card li {
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.tier-card li:last-child {
    border-bottom: none;
}

/* QoS Classification */
.qos-classification {
    margin: 20px 0;
}

.traffic-classes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.traffic-class {
    padding: 20px;
    border-radius: var(--border-radius);
    text-align: center;
    color: white;
}

.traffic-class.realtime {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
}

.traffic-class.critical {
    background: linear-gradient(135deg, #feca57 0%, #ff9ff3 100%);
}

.traffic-class.besteffort {
    background: linear-gradient(135deg, #48dbfb 0%, #1dd1a1 100%);
}

.traffic-class.scavenger {
    background: linear-gradient(135deg, #8395a7 0%, #576574 100%);
}

.priority-level {
    display: block;
    margin-top: 10px;
    font-size: 0.8rem;
    opacity: 0.9;
}

/* QoS Techniques */
.qos-techniques {
    margin: 20px 0;
}

.techniques-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.technique-item {
    background: #f8f9fa;
    padding: 15px;
    border-radius: var(--border-radius);
    text-align: center;
}

.technique-item h5 {
    color: var(--primary-color);
    margin-bottom: 8px;
}

/* Redundancy Strategies */
.redundancy-strategies {
    margin: 20px 0;
}

.strategies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.strategy-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: var(--border-radius);
}

.strategy-icon {
    font-size: 1.5rem;
    color: var(--secondary-color);
}

.strategy-content h5 {
    color: var(--primary-color);
    margin-bottom: 5px;
}

/* Redundancy Design */
.redundancy-design {
    margin: 20px 0;
}

.design-example {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.network-node {
    background: var(--light-color);
    padding: 20px;
    border-radius: var(--border-radius);
    text-align: center;
    min-width: 120px;
    border: 2px solid var(--secondary-color);
}

.network-node.main {
    background: var(--secondary-color);
    color: white;
}

.connections {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.connection {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: var(--border-radius);
    background: #f8f9fa;
}

.connection.primary {
    border-left: 4px solid #27ae60;
}

.connection.backup {
    border-left: 4px solid #f39c12;
}

.connection.cellular {
    border-left: 4px solid #3498db;
}

/* Case Studies */
.case-studies {
    margin: 25px 0;
}

.case-study {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 25px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.case-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 20px;
}

.case-details {
    padding: 25px;
}

.requirements, .solution {
    margin-bottom: 20px;
}

.requirements h4, .solution h4 {
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.solution-details {
    background: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
}

.technology-choice h5 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.justification {
    margin: 15px 0;
}

.justification h6 {
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.cost-analysis {
    margin: 20px 0;
}

.cost-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    max-width: 300px;
}

.cost-option {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background: white;
    border-radius: var(--border-radius);
}

.cost-high {
    color: #e74c3c;
    font-weight: bold;
}

.cost-low {
    color: #27ae60;
    font-weight: bold;
}

/* Architecture Diagrams */
.architecture, .cloud-integration {
    margin: 20px 0;
}

.arch-diagram, .cloud-services {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.arch-component {
    background: var(--light-color);
    padding: 15px;
    border-radius: var(--border-radius);
    text-align: center;
    min-width: 120px;
}

.arch-component i {
    font-size: 1.5rem;
    margin-bottom: 8px;
    color: var(--secondary-color);
}

.arch-connection {
    color: var(--text-light);
    font-size: 1.2rem;
}

.cloud-service {
    background: white;
    padding: 15px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--box-shadow);
    min-width: 120px;
}

.cloud-service i {
    font-size: 2rem;
    margin-bottom: 8px;
    color: var(--secondary-color);
}

/* Future Trends */
.future-trends {
    margin: 25px 0;
}

.trend-category {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 25px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.trend-category h3 {
    background: var(--light-color);
    padding: 20px;
    margin: 0;
    color: var(--primary-color);
    border-left: 4px solid var(--secondary-color);
}

.trend-details {
    padding: 25px;
}

.trend-description {
    margin-bottom: 20px;
}

/* SASE Components */
.sase-components, .5g-applications, .aiops-applications {
    margin: 20px 0;
}

.components-grid, .applications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.component-item, .application-item {
    background: #f8f9fa;
    padding: 15px;
    border-radius: var(--border-radius);
    text-align: center;
}

.component-item h5, .application-item h5 {
    color: var(--primary-color);
    margin-bottom: 8px;
}

.applications-list {
    display: grid;
    gap: 15px;
}

.aiops-application {
    background: #f8f9fa;
    padding: 15px;
    border-radius: var(--border-radius);
}

.aiops-application h5 {
    color: var(--primary-color);
    margin-bottom: 8px;
}

.trend-benefits, .5g-challenges, .aiops-benefits {
    margin: 20px 0;
}

/* Career Connection */
.career-connection {
    margin: 25px 0;
}

.skills-section {
    margin-bottom: 30px;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.skill-category {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.skill-category h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--light-color);
}

.job-roles {
    margin-bottom: 30px;
}

.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.role-card {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.role-card:hover {
    transform: translateY(-5px);
}

.role-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.role-card h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.interview-preparation {
    background: #f8f9fa;
    padding: 25px;
    border-radius: var(--border-radius);
}

.interview-questions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.question-set h4 {
    color: var(--secondary-color);
    margin-bottom: 15px;
}

/* Business Analysis */
.business-analysis {
    margin: 25px 0;
}

.analysis-scenario {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 25px;
}

.scenario-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.company-profile, .business-needs {
    background: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
}

.analysis-tasks {
    margin-bottom: 25px;
}

.tasks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.task-item {
    background: white;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
}

.task-item h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.solution-framework {
    background: var(--light-color);
    padding: 25px;
    border-radius: var(--border-radius);
}

.framework-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.framework-step {
    display: flex;
    align-items: center;
    gap: 15px;
}

.step-number {
    background: var(--secondary-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.step-content h5 {
    color: var(--primary-color);
    margin-bottom: 5px;
}

/* Responsive Design for WAN Page */
@media (max-width: 768px) {
    .wan-classification {
        grid-template-columns: 1fr;
    }
    
    .vpn-comparison {
        grid-template-columns: 1fr;
    }
    
    .architecture-flow {
        grid-template-columns: 1fr;
    }
    
    .tiers-comparison {
        grid-template-columns: 1fr;
    }
    
    .traffic-classes {
        grid-template-columns: 1fr;
    }
    
    .techniques-grid {
        grid-template-columns: 1fr;
    }
    
    .strategies-grid {
        grid-template-columns: 1fr;
    }
    
    .design-example {
        flex-direction: column;
    }
    
    .scenario-details {
        grid-template-columns: 1fr;
    }
    
    .tasks-grid {
        grid-template-columns: 1fr;
    }
    
    .framework-steps {
        grid-template-columns: 1fr;
    }
    
    .interview-questions {
        grid-template-columns: 1fr;
    }
    
    .skills-grid {
        grid-template-columns: 1fr;
    }
    
    .roles-grid {
        grid-template-columns: 1fr;
    }
}

/* Animation for technology cards */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tech-category, .case-study, .trend-category {
    animation: slideInUp 0.6s ease-out;
}

/* IP Addressing & ACL Specific Styles */
.analogy-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.analogy-item {
    background: white;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.analogy-item h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
    text-align: center;
}

.analogy-item ul {
    list-style: none;
    padding: 0;
}

.analogy-item li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 20px;
}

.analogy-item li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: bold;
}

.analogy-item li:last-child {
    border-bottom: none;
}

/* Design Principles */
.design-principles {
    margin: 25px 0;
}

.principle-category {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 25px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.principle-category h3 {
    background: var(--light-color);
    padding: 20px;
    margin: 0;
    color: var(--primary-color);
    border-left: 4px solid var(--secondary-color);
}

.principle-details {
    padding: 25px;
}

/* Hierarchy Tree */
.hierarchy-tree {
    text-align: center;
    margin: 20px 0;
}

.tree-level {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 15px 0;
}

.tree-node {
    background: var(--light-color);
    padding: 15px;
    border-radius: var(--border-radius);
    min-width: 150px;
    border: 2px solid var(--secondary-color);
}

.tree-node.main {
    background: var(--secondary-color);
    color: white;
}

.tree-node span {
    font-weight: bold;
    display: block;
}

.tree-node small {
    font-size: 0.8rem;
    opacity: 0.8;
}

.tree-connector {
    height: 20px;
    border-left: 2px solid var(--secondary-color);
    margin: 0 auto;
    width: 2px;
}

/* Hierarchy Benefits */
.hierarchy-benefits {
    margin: 25px 0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: var(--border-radius);
}

.benefit-item i {
    font-size: 1.5rem;
    color: var(--secondary-color);
}

.benefit-content h5 {
    color: var(--primary-color);
    margin-bottom: 5px;
}

/* RFC 1918 Ranges */
.rfc1918-ranges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.range-card {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.range-card.large {
    border-top: 4px solid #27ae60;
}

.range-card.medium {
    border-top: 4px solid #f39c12;
}

.range-card.small {
    border-top: 4px solid #e74c3c;
}

.range-header {
    background: var(--light-color);
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.range-header h4 {
    margin: 0;
    color: var(--primary-color);
}

.range-size {
    background: var(--secondary-color);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
}

.range-details {
    padding: 15px;
}

.range-example {
    background: #f8f9fa;
    padding: 10px;
    border-radius: var(--border-radius);
    margin-top: 10px;
    font-family: 'Courier New', monospace;
}

/* VLSM Allocation */
.vlsm-allocation {
    display: grid;
    gap: 10px;
    margin: 20px 0;
}

.subnet-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-radius: var(--border-radius);
    color: white;
}

.subnet-item.large {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}

.subnet-item.medium {
    background: linear-gradient(135deg, #f39c12, #f1c40f);
}

.subnet-item.small {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.subnet-item.xsmall {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

.subnet-item.point-to-point {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.subnet-info {
    display: flex;
    gap: 15px;
    align-items: center;
}

.subnet-range {
    font-weight: bold;
    font-family: 'Courier New', monospace;
}

.subnet-size {
    background: rgba(255, 255, 255, 0.2);
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
}

.subnet-purpose {
    font-weight: 500;
}

/* Calculation Steps */
.calculation-steps {
    display: grid;
    gap: 15px;
    margin: 20px 0;
}

.calculation-step {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: var(--border-radius);
}

.step-number {
    background: var(--secondary-color);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.step-content h5 {
    color: var(--primary-color);
    margin-bottom: 5px;
}

/* Addressing Schemes */
.addressing-schemes {
    margin: 25px 0;
}

.scheme-category {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 25px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.scheme-category h3 {
    background: var(--light-color);
    padding: 20px;
    margin: 0;
    color: var(--primary-color);
    border-left: 4px solid var(--secondary-color);
}

.scheme-details {
    padding: 25px;
}

/* Functional Tree */
.functional-tree {
    display: grid;
    gap: 20px;
}

.functional-branch {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.branch-header {
    background: var(--secondary-color);
    color: white;
    padding: 15px;
    font-weight: bold;
}

.branch-subnets {
    padding: 15px;
}

.subnet-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #dee2e6;
}

.subnet-line:last-child {
    border-bottom: none;
}

.subnet-ip {
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

.subnet-desc {
    color: var(--text-light);
}

/* Geographic Map */
.geographic-map {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.region {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.region-header {
    background: var(--light-color);
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-left: 4px solid var(--secondary-color);
}

.region-header i {
    color: var(--secondary-color);
}

.region-ip {
    background: var(--secondary-color);
    color: white;
    padding: 10px 15px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    text-align: center;
}

.region-sites {
    padding: 15px;
}

.site {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.site:last-child {
    border-bottom: none;
}

.site small {
    font-family: 'Courier New', monospace;
    color: var(--text-light);
}

/* Best Practices */
.best-practices {
    display: grid;
    gap: 15px;
    margin: 20px 0;
}

.practice-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: var(--border-radius);
}

.practice-icon {
    font-size: 1.5rem;
    color: var(--secondary-color);
}

.practice-content h4 {
    color: var(--primary-color);
    margin-bottom: 5px;
}

/* Addressing Tips */
.addressing-tips {
    margin: 25px 0;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.tip-card {
    background: white;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
}

.tip-card h5 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

/* ACL Fundamentals */
.acl-fundamentals {
    margin: 25px 0;
}

.acl-category {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 25px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.acl-category h3 {
    background: var(--light-color);
    padding: 20px;
    margin: 0;
    color: var(--primary-color);
    border-left: 4px solid var(--secondary-color);
}

.acl-details {
    padding: 25px;
}

/* ACL Types */
.types-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.acl-type {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.type-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--light-color);
}

.type-header h5 {
    margin: 0;
    color: var(--primary-color);
}

.type-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
}

.type-badge.basic {
    background: #27ae60;
}

.type-badge.advanced {
    background: #f39c12;
}

.type-badge.modern {
    background: #3498db;
}

.type-details {
    padding: 15px;
}

.type-details ul {
    list-style: none;
    padding: 0;
    margin-bottom: 15px;
}

.type-details li {
    padding: 5px 0;
    border-bottom: 1px solid #dee2e6;
    position: relative;
    padding-left: 15px;
}

.type-details li:before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
}

.type-details li:last-child {
    border-bottom: none;
}

/* ACL Processing */
.processing-steps {
    display: grid;
    gap: 15px;
    margin: 20px 0;
}

.processing-step {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: var(--border-radius);
}

/* ACL Flow Visualization */
.flow-visualization {
    border: 1px solid #dee2e6;
    border-radius: var(--border-radius);
    overflow: hidden;
    margin: 20px 0;
}

.flow-item {
    padding: 15px;
    border-bottom: 1px solid #dee2e6;
}

.flow-item:last-child {
    border-bottom: none;
}

.flow-item.match {
    background: #d4edda;
}

.flow-item.nomatch {
    background: #fff3cd;
}

.flow-item.implicit {
    background: #f8d7da;
}

.flow-content {
    font-family: 'Courier New', monospace;
    margin-bottom: 5px;
}

.flow-result {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* ACL Design Tips */
.design-tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.design-tip {
    background: white;
    padding: 15px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
}

.design-tip h5 {
    color: var(--primary-color);
    margin-bottom: 8px;
}

/* ACL Placement */
.rules-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0;
}

.placement-rule {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    padding: 20px;
}

.rule-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.rule-header h5 {
    margin: 0;
    color: var(--primary-color);
}

.placement-badge {
    background: var(--secondary-color);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: bold;
}

.placement-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 15px 0;
    flex-wrap: wrap;
}

.network-element {
    background: white;
    padding: 10px 15px;
    border-radius: var(--border-radius);
    border: 1px solid #dee2e6;
    text-align: center;
}

.network-element.acl-location {
    background: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color);
}

.network-arrow {
    color: var(--text-light);
}

/* Enterprise ACL */
.enterprise-acl {
    margin: 20px 0;
}

.network-topology {
    background: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
}

.topology-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.topology-node {
    background: white;
    padding: 15px;
    border-radius: var(--border-radius);
    text-align: center;
    min-width: 150px;
    border: 2px solid var(--secondary-color);
}

.topology-node span {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.topology-node small {
    font-size: 0.8rem;
    color: var(--text-light);
}

.topology-arrow {
    color: var(--text-light);
    font-size: 1.2rem;
}

.acl-explanations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.acl-explanation {
    background: white;
    padding: 15px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.acl-explanation h5 {
    color: var(--primary-color);
    margin-bottom: 8px;
}

/* Advanced ACL */
.advanced-acl {
    margin: 25px 0;
}

.advanced-technique {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 25px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.advanced-technique h3 {
    background: var(--light-color);
    padding: 20px;
    margin: 0;
    color: var(--primary-color);
    border-left: 4px solid var(--secondary-color);
}

.technique-details {
    padding: 25px;
}

/* Security Zones */
.security-zones {
    margin: 20px 0;
}

.zones-design {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.security-zone {
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.security-zone.inside {
    border-top: 4px solid #27ae60;
}

.security-zone.dmz {
    border-top: 4px solid #f39c12;
}

.security-zone.outside {
    border-top: 4px solid #e74c3c;
}

.zone-header {
    background: var(--light-color);
    padding: 15px;
    text-align: center;
}

.zone-header h5 {
    margin: 0;
    color: var(--primary-color);
}

.zone-acl {
    background: #f8f9fa;
    padding: 15px;
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
}

.zone-description {
    padding: 15px;
    background: white;
}

/* Zone Policies */
.policies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.policy-item {
    background: white;
    padding: 15px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
}

.policy-item h5 {
    color: var(--primary-color);
    margin-bottom: 8px;
}

/* Enterprise Case Study */
.enterprise-case-study {
    margin: 25px 0;
}

.case-scenario {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--box-shadow);
    margin-bottom: 25px;
}

.building-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.building {
    background: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--secondary-color);
}

.building h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.building ul {
    list-style: none;
    padding: 0;
}

.building li {
    padding: 5px 0;
    border-bottom: 1px solid #dee2e6;
    position: relative;
    padding-left: 15px;
}

.building li:before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
}

.building li:last-child {
    border-bottom: none;
}

.design-solution {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--box-shadow);
}

.ip-design, .acl-design {
    margin-bottom: 30px;
}

.ip-scheme {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.scheme-header {
    background: var(--secondary-color);
    color: white;
    padding: 15px;
}

.scheme-header h4 {
    margin: 0;
    font-family: 'Courier New', monospace;
}

.scheme-details {
    padding: 20px;
}

.subnet-allocation {
    display: grid;
    gap: 15px;
}

.subnet-group {
    background: white;
    padding: 15px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.subnet-group h5 {
    color: var(--primary-color);
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #dee2e6;
}

.subnet-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f8f9fa;
}

.subnet-line:last-child {
    border-bottom: none;
}

.acl-policies {
    display: grid;
    gap: 20px;
}

.acl-policy {
    background: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
}

.acl-policy h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

/* Workshop Section */
.workshop-section {
    margin: 25px 0;
}

.workshop-scenario {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--box-shadow);
    margin-bottom: 25px;
}

.company-profile {
    background: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
}

.company-profile h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.workshop-requirements {
    margin-bottom: 25px;
}

.requirements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.requirement-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.req-icon {
    font-size: 2rem;
    color: var(--secondary-color);
}

.req-content h4 {
    color: var(--primary-color);
    margin-bottom: 5px;
}

.grading-criteria {
    background: #f8f9fa;
    padding: 25px;
    border-radius: var(--border-radius);
}

.criteria-details {
    display: grid;
    gap: 20px;
}

.criterion {
    background: white;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.criterion h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.criterion ul {
    list-style: none;
    padding: 0;
}

.criterion li {
    padding: 5px 0;
    border-bottom: 1px solid #f8f9fa;
    position: relative;
    padding-left: 20px;
}

.criterion li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: bold;
}

.criterion li:last-child {
    border-bottom: none;
}

/* Management Tools */
.management-tools {
    margin: 25px 0;
}

.tool-category {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 25px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.tool-category h3 {
    background: var(--light-color);
    padding: 20px;
    margin: 0;
    color: var(--primary-color);
    border-left: 4px solid var(--secondary-color);
}

.tool-details {
    padding: 25px;
}

/* IPAM Table */
.ipam-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.ipam-table th,
.ipam-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
}

.ipam-table th {
    background-color: var(--primary-color);
    color: white;
    font-weight: 600;
}

.ipam-table tr:nth-child(even) {
    background-color: #f8f9fa;
}

.ipam-table tr:hover {
    background-color: #e9ecef;
}

/* Enterprise Tools */
.enterprise-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.tool-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: var(--border-radius);
}

.tool-icon {
    font-size: 2rem;
    color: var(--secondary-color);
}

.tool-info h4 {
    color: var(--primary-color);
    margin-bottom: 5px;
}

.tool-type {
    background: var(--secondary-color);
    color: white;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: bold;
}

/* Common Mistakes */
.common-mistakes {
    margin: 25px 0;
}

.mistake-category {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 25px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.mistake-category h3 {
    background: var(--light-color);
    padding: 20px;
    margin: 0;
    color: var(--primary-color);
    border-left: 4px solid var(--secondary-color);
}

.mistake-details {
    padding: 25px;
}

.mistake-list {
    display: grid;
    gap: 15px;
}

.mistake-item {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    overflow: hidden;
}

.mistake-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--light-color);
}

.mistake-header h4 {
    margin: 0;
    color: var(--primary-color);
}

.mistake-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: bold;
    color: white;
}

.mistake-badge.critical {
    background: #e74c3c;
}

.mistake-badge.high {
    background: #f39c12;
}

.mistake-badge.medium {
    background: #3498db;
}

.mistake-content {
    padding: 15px;
}

.mistake-content p {
    margin-bottom: 8px;
}

.mistake-content strong {
    color: var(--primary-color);
}

/* Career Connection */
.career-connection {
    margin: 25px 0;
}

.skills-demand {
    margin-bottom: 30px;
}

.skills-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.skill-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.skill-icon {
    font-size: 2rem;
    color: var(--secondary-color);
}

.skill-content h4 {
    color: var(--primary-color);
    margin-bottom: 8px;
}

.job-roles {
    margin-bottom: 30px;
}

.roles-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.role-item {
    background: white;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.role-item h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.interview-tips {
    background: #f8f9fa;
    padding: 25px;
    border-radius: var(--border-radius);
}

.tips-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.tip-item {
    background: white;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.tip-item h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

/* Responsive Design for IP Addressing Page */
@media (max-width: 768px) {
    .analogy-comparison {
        grid-template-columns: 1fr;
    }
    
    .tree-level {
        flex-direction: column;
        align-items: center;
    }
    
    .rfc1918-ranges {
        grid-template-columns: 1fr;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .geographic-map {
        grid-template-columns: 1fr;
    }
    
    .types-comparison {
        grid-template-columns: 1fr;
    }
    
    .rules-comparison {
        grid-template-columns: 1fr;
    }
    
    .topology-row {
        flex-direction: column;
    }
    
    .zones-design {
        grid-template-columns: 1fr;
    }
    
    .policies-grid {
        grid-template-columns: 1fr;
    }
    
    .building-layout {
        grid-template-columns: 1fr;
    }
    
    .requirements-grid {
        grid-template-columns: 1fr;
    }
    
    .enterprise-tools {
        grid-template-columns: 1fr;
    }
    
    .skills-list {
        grid-template-columns: 1fr;
    }
    
    .roles-list {
        grid-template-columns: 1fr;
    }
    
    .tips-list {
        grid-template-columns: 1fr;
    }
}

/* Animation for interactive elements */
@keyframes highlight {
    0% { background-color: #fff3cd; }
    100% { background-color: transparent; }
}

.subnet-item:hover, .acl-type:hover, .tool-item:hover {
    animation: highlight 0.5s ease;
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}

/* NAT Specific Styles */
.nat-flow-diagram {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 25px 0;
    text-align: center;
}

.nat-flow-step {
    display: inline-block;
    margin: 0 20px;
    text-align: center;
    vertical-align: top;
}

.nat-flow-arrow {
    display: inline-block;
    font-size: 2rem;
    color: #50fa7b;
    margin: 0 10px;
    vertical-align: middle;
}

.nat-ip-box {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.nat-type-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.nat-type-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--box-shadow);
    border-top: 4px solid var(--secondary-color);
    transition: var(--transition);
}

.nat-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.nat-type-card.static {
    border-top-color: #e74c3c;
}

.nat-type-card.dynamic {
    border-top-color: #3498db;
}

.nat-type-card.pat {
    border-top-color: #2ecc71;
}

.nat-config-example {
    background: #2d3748;
    color: #e2e8f0;
    padding: 20px;
    border-radius: var(--border-radius);
    margin: 20px 0;
    border-left: 4px solid #ecc94b;
}

.config-comment {
    color: #a0aec0;
    font-style: italic;
}

.config-keyword {
    color: #63b3ed;
    font-weight: bold;
}

.config-value {
    color: #68d391;
}

.config-interface {
    color: #fbb6ce;
}

/* Troubleshooting Section */
.troubleshooting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.trouble-card {
    background: #fff3e0;
    border-left: 4px solid #ff9800;
    padding: 20px;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

.trouble-card.error {
    background: #ffebee;
    border-left-color: #f44336;
}

.trouble-card.success {
    background: #e8f5e8;
    border-left-color: #4caf50;
}

.trouble-card.info {
    background: #e3f2fd;
    border-left-color: #2196f3;
}

/* IPv6 Transition Styles */
.ipv6-transition {
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 25px 0;
}

.transition-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.method {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Interactive NAT Simulation */
.nat-simulation {
    background: #1a202c;
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 25px 0;
}

.simulation-controls {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sim-btn {
    padding: 10px 20px;
    background: #4a5568;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
}

.sim-btn:hover {
    background: #2d3748;
}

.sim-btn.active {
    background: #4299e1;
}

.simulation-output {
    background: #2d3748;
    padding: 20px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    min-height: 200px;
    border: 1px solid #4a5568;
}

/* Responsive Design for NAT */
@media (max-width: 768px) {
    .nat-flow-step {
        display: block;
        margin: 20px 0;
    }
    
    .nat-flow-arrow {
        display: block;
        margin: 10px auto;
        transform: rotate(90deg);
    }
    
    .nat-type-comparison {
        grid-template-columns: 1fr;
    }
    
    .simulation-controls {
        flex-direction: column;
    }
    
    .troubleshooting-grid {
        grid-template-columns: 1fr;
    }
}

/* Animation for NAT Flow */
@keyframes natFlow {
    0% { transform: translateX(-100px); opacity: 0; }
    50% { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(100px); opacity: 0; }
}

.nat-packet {
    animation: natFlow 3s ease-in-out infinite;
}

/* Enhanced Code Block for NAT */
.nat-code-block {
    position: relative;
    background: #1a1a1a;
    border-left: 4px solid #4299e1;
}

.nat-code-block .code-header {
    background: #2d3748;
    padding: 10px 15px;
    margin: -25px -25px 15px -25px;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    font-weight: bold;
    color: #e2e8f0;
}

/* Quiz and Exercise Styles */
.exercise-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 25px 0;
}

.exercise-task {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    margin: 15px 0;
    border-left: 4px solid #50fa7b;
}

.solution-toggle {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 15px;
    transition: var(--transition);
}

.solution-toggle:hover {
    background: rgba(255, 255, 255, 0.3);
}

.solution-content {
    display: none;
    background: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 8px;
    margin-top: 15px;
}

.solution-content.show {
    display: block;
    animation: fadeIn 0.5s ease-in;
}

/* Network Design Specific Styles */
.design-diagram {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 25px;
    border-radius: var(--border-radius);
    margin: 20px 0;
    text-align: center;
}

.design-diagram h4 {
    color: #50fa7b;
    margin-bottom: 15px;
}

.availability-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.metric-card {
    background: white;
    padding: 20px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--box-shadow);
    border-top: 4px solid;
    transition: var(--transition);
}

.metric-card:hover {
    transform: translateY(-5px);
}

.metric-card.basic {
    border-top-color: #95a5a6;
}

.metric-card.silver {
    border-top-color: #bdc3c7;
}

.metric-card.gold {
    border-top-color: #f1c40f;
}

.metric-card.platinum {
    border-top-color: #e74c3c;
}

.metric-value {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 10px 0;
}

.metric-label {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Checklist Styles */
.checklist-box {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 20px 0;
    border-left: 4px solid var(--secondary-color);
}

.checklist-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #dee2e6;
}

.checklist-item:last-child {
    border-bottom: none;
}

.checklist-item input[type="checkbox"] {
    margin-right: 15px;
    transform: scale(1.2);
}

.checklist-item label {
    cursor: pointer;
    font-weight: 500;
}

.checklist-item input[type="checkbox"]:checked + label {
    color: var(--secondary-color);
    text-decoration: line-through;
}

/* Architecture Comparison */
.architecture-comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 25px 0;
}

.arch-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.arch-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.arch-card.three-tier {
    border-top: 4px solid #3498db;
}

.arch-card.spine-leaf {
    border-top: 4px solid #e74c3c;
}

.arch-card.collapsed-core {
    border-top: 4px solid #2ecc71;
}

.arch-features {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.arch-features li {
    padding: 8px 0;
    border-bottom: 1px solid #f8f9fa;
}

.arch-features li:before {
    content: '✓';
    color: #2ecc71;
    margin-right: 10px;
    font-weight: bold;
}

/* Redundancy Visualization */
.redundancy-visual {
    background: #1a202c;
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 25px 0;
    text-align: center;
}

.network-node {
    display: inline-block;
    background: #4299e1;
    color: white;
    padding: 15px;
    border-radius: 8px;
    margin: 10px;
    position: relative;
}

.network-link {
    display: inline-block;
    width: 50px;
    height: 2px;
    background: #4a5568;
    margin: 0 10px;
    vertical-align: middle;
}

.network-link.redundant {
    background: #48bb78;
}

.network-node.active {
    background: #48bb78;
    box-shadow: 0 0 10px rgba(72, 187, 120, 0.5);
}

.network-node.standby {
    background: #ed8936;
}

.network-node.failed {
    background: #f56565;
}

/* Scalability Progress Bars */
.scalability-metrics {
    margin: 25px 0;
}

.metric-bar {
    margin: 15px 0;
}

.metric-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.metric-bar-container {
    background: #e2e8f0;
    border-radius: 10px;
    height: 10px;
    overflow: hidden;
}

.metric-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #4299e1, #48bb78);
    border-radius: 10px;
    transition: width 0.5s ease;
}

/* Design Principles Grid */
.design-principles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.principle-card {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.principle-card:hover {
    transform: translateY(-5px);
}

.principle-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

/* Failure Scenario Simulation */
.failure-simulation {
    background: #2d3748;
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 25px 0;
}

.simulation-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sim-scenario {
    padding: 10px 15px;
    background: #4a5568;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
}

.sim-scenario:hover {
    background: #2d3748;
}

.sim-scenario.active {
    background: #4299e1;
}

.simulation-visual {
    background: #1a202c;
    padding: 20px;
    border-radius: 4px;
    min-height: 200px;
    border: 1px solid #4a5568;
}

/* Cost-Benefit Analysis */
.cost-benefit {
    background: linear-gradient(135deg, #fdbb2d, #22c1c3);
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 25px 0;
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.benefit-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Responsive Design for Network Design */
@media (max-width: 768px) {
    .architecture-comparison {
        grid-template-columns: 1fr;
    }
    
    .design-principles {
        grid-template-columns: 1fr;
    }
    
    .availability-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .benefit-grid {
        grid-template-columns: 1fr;
    }
    
    .network-node {
        display: block;
        margin: 10px auto;
    }
    
    .network-link {
        display: block;
        width: 2px;
        height: 30px;
        margin: 5px auto;
    }
}

/* Animation for Network Visualizations */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.network-node.active {
    animation: pulse 2s infinite;
}

@keyframes flow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.traffic-flow {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #4299e1, transparent);
    animation: flow 3s linear infinite;
}

/* Enhanced Exercise Box for Design Tasks */
.design-exercise {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 25px 0;
}

.exercise-requirements {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    margin: 15px 0;
    border-left: 4px solid #50fa7b;
}

.requirement-item {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.requirement-item i {
    margin-right: 10px;
    color: #50fa7b;
}

.design-tools {
    display: flex;
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.tool-button {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tool-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* Capstone Project Specific Styles */
.capstone-timeline {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 25px 0;
}

.timeline-phase {
    display: flex;
    align-items: center;
    margin: 20px 0;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border-left: 4px solid #50fa7b;
}

.phase-number {
    background: #50fa7b;
    color: #1a1a1a;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 20px;
    flex-shrink: 0;
}

.phase-content {
    flex-grow: 1;
}

.phase-milestones {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.phase-milestones li {
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.phase-milestones li:last-child {
    border-bottom: none;
}

.phase-milestones li:before {
    content: '✓';
    color: #50fa7b;
    margin-right: 10px;
    font-weight: bold;
}

/* Role Cards */
.role-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.role-card {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    box-shadow: var(--box-shadow);
    border-top: 4px solid var(--secondary-color);
    transition: var(--transition);
}

.role-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.role-card.lead {
    border-top-color: #e74c3c;
}

.role-card.architect {
    border-top-color: #3498db;
}

.role-card.security {
    border-top-color: #2ecc71;
}

.role-card.operations {
    border-top-color: #f39c12;
}

.role-responsibilities {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.role-responsibilities li {
    padding: 8px 0;
    border-bottom: 1px solid #f8f9fa;
    position: relative;
    padding-left: 20px;
}

.role-responsibilities li:before {
    content: '•';
    color: var(--secondary-color);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Deliverables Checklist */
.deliverables-checklist {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 25px 0;
    border-left: 4px solid var(--secondary-color);
}

.deliverable-item {
    display: flex;
    align-items: flex-start;
    padding: 15px 0;
    border-bottom: 1px solid #dee2e6;
}

.deliverable-item:last-child {
    border-bottom: none;
}

.deliverable-icon {
    background: var(--secondary-color);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    font-size: 0.8rem;
}

.deliverable-content {
    flex-grow: 1;
}

.deliverable-deadline {
    background: #e9ecef;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--text-light);
    margin-left: 15px;
    flex-shrink: 0;
}

/* Grading Rubric */
.grading-rubric {
    background: linear-gradient(135deg, #fdbb2d, #22c1c3);
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 25px 0;
}

.rubric-levels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.rubric-level {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.level-score {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.level-label {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Innovation Showcase */
.innovation-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.innovation-card {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    border: 1px solid #e9ecef;
}

.innovation-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--secondary-color);
}

.innovation-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.innovation-badge {
    background: var(--accent-color);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Project Tools */
.project-tools {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.tool-card {
    background: white;
    padding: 20px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    border: 1px solid #e9ecef;
}

.tool-card:hover {
    transform: translateY(-3px);
    border-color: var(--secondary-color);
}

.tool-logo {
    font-size: 2rem;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.tool-cost {
    background: #e9ecef;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    margin-top: 8px;
    display: inline-block;
}

/* Success Metrics */
.success-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.metric-card {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: var(--box-shadow);
    position: relative;
    overflow: hidden;
}

.metric-card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
}

.metric-value {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 10px 0;
}

.metric-label {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Responsive Design for Capstone */
@media (max-width: 768px) {
    .timeline-phase {
        flex-direction: column;
        text-align: center;
    }
    
    .phase-number {
        margin-right: 0;
        margin-bottom: 15px;
    }
    
    .role-cards {
        grid-template-columns: 1fr;
    }
    
    .deliverable-item {
        flex-direction: column;
    }
    
    .deliverable-deadline {
        margin-left: 0;
        margin-top: 10px;
        align-self: flex-start;
    }
    
    .rubric-levels {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .innovation-showcase {
        grid-template-columns: 1fr;
    }
    
    .project-tools {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .success-metrics {
        grid-template-columns: 1fr;
    }
}

/* Animation for Capstone Elements */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.role-card, .innovation-card, .metric-card {
    animation: slideInUp 0.6s ease-out;
}

/* Enhanced Exercise Box for Capstone */
.capstone-exercise {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 25px 0;
}

.team-formation {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    margin: 15px 0;
    border-left: 4px solid #50fa7b;
}

.team-role {
    display: flex;
    align-items: center;
    margin: 10px 0;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.role-assign {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition);
}

.role-assign:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Project Timeline Visualization */
.project-timeline {
    background: #1a202c;
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 25px 0;
}

.timeline-visual {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: 30px 0;
}

.timeline-visual:before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: #4a5568;
}

.timeline-week {
    text-align: center;
    position: relative;
    z-index: 1;
}

.week-marker {
    width: 40px;
    height: 40px;
    background: #4299e1;
    border-radius: 50%;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.week-marker.current {
    background: #48bb78;
    box-shadow: 0 0 10px rgba(72, 187, 120, 0.5);
}

.week-label {
    font-size: 0.8rem;
    color: #a0aec0;
}

/* Presentation Specific Styles */
.schedule-timeline {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 25px;
    border-radius: var(--border-radius);
    margin: 20px 0;
}

.timeline-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.timeline-item:last-child {
    border-bottom: none;
}

.time-slot {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: bold;
    min-width: 100px;
    text-align: center;
    margin-right: 20px;
}

.activity {
    flex-grow: 1;
}

/* Presentation Structure */
.presentation-structure {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 20px 0;
    border-left: 4px solid var(--secondary-color);
}

.time-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.time-segment {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: var(--box-shadow);
    border-top: 4px solid var(--secondary-color);
}

.duration {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.segment-title {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Slide Template */
.slide-template {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 20px 0;
    box-shadow: var(--box-shadow);
}

.slide-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.slide-list li {
    padding: 10px 0;
    border-bottom: 1px solid #f8f9fa;
    position: relative;
    padding-left: 30px;
}

.slide-list li:before {
    content: '▸';
    color: var(--secondary-color);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.slide-list li:last-child {
    border-bottom: none;
}

/* Grading Rubric Styles */
.grading-rubric {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 20px 0;
    box-shadow: var(--box-shadow);
}

.rubric-category {
    margin-bottom: 25px;
}

.rubric-category:last-child {
    margin-bottom: 0;
}

.rubric-category h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
    border-bottom: 2px solid #f8f9fa;
    padding-bottom: 8px;
}

.rubric-levels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.rubric-level {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 2px solid transparent;
    transition: var(--transition);
}

.rubric-level:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.rubric-level.excellent {
    border-color: #27ae60;
}

.rubric-level.good {
    border-color: #3498db;
}

.rubric-level.average {
    border-color: #f39c12;
}

.rubric-level.poor {
    border-color: #e74c3c;
}

.level-score {
    font-weight: bold;
    margin-bottom: 8px;
    color: var(--primary-color);
}

.level-desc {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Evaluator Panel */
.evaluator-panel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.evaluator-card {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
    border-top: 4px solid var(--secondary-color);
    transition: var(--transition);
}

.evaluator-card:hover {
    transform: translateY(-5px);
}

.evaluator-avatar {
    width: 80px;
    height: 80px;
    background: var(--secondary-color);
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
}

.evaluator-info h4 {
    margin-bottom: 5px;
    color: var(--primary-color);
}

.evaluator-info p {
    color: var(--text-light);
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.evaluator-role {
    background: var(--accent-color);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    display: inline-block;
}

/* Question Categories */
.question-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.question-category {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.question-category h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
    border-bottom: 2px solid #f8f9fa;
    padding-bottom: 8px;
}

.question-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.question-list li {
    padding: 10px 0;
    border-bottom: 1px solid #f8f9fa;
    position: relative;
    padding-left: 20px;
}

.question-list li:before {
    content: '?';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: bold;
}

.question-list li:last-child {
    border-bottom: none;
}

/* Preparation Checklist */
.preparation-checklist {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 20px 0;
    border-left: 4px solid var(--secondary-color);
}

.prep-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #dee2e6;
}

.prep-item:last-child {
    border-bottom: none;
}

.prep-item input[type="checkbox"] {
    margin-right: 15px;
    transform: scale(1.2);
}

.prep-item label {
    cursor: pointer;
    font-weight: 500;
}

/* Presentation Techniques */
.presentation-techniques {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.technique-card {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
    transition: var(--transition);
}

.technique-card:hover {
    transform: translateY(-5px);
}

.technique-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.technique-content h4 {
    margin-bottom: 10px;
    color: var(--primary-color);
}

.technique-content p {
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Q&A Strategies */
.qa-strategies {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.strategy-item {
    display: flex;
    align-items: flex-start;
    background: white;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.strategy-number {
    background: var(--secondary-color);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}

.strategy-content h4 {
    margin-bottom: 8px;
    color: var(--primary-color);
}

.strategy-content p {
    color: var(--text-light);
    font-size: 0.9rem;
    margin: 0;
}

/* Q&A Dialogues */
.qa-dialogues {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 25px 0;
    box-shadow: var(--box-shadow);
}

.dialogue-scenario {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f8f9fa;
}

.dialogue-scenario:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.dialogue-scenario h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.dialogue-exchange {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.question {
    background: white;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 4px solid var(--secondary-color);
}

.answer {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.answer.effective {
    background: #d4edda;
    border-left: 4px solid #28a745;
}

.answer.poor {
    background: #f8d7da;
    border-left: 4px solid #dc3545;
}

.answer:last-child {
    margin-bottom: 0;
}

/* Workshop Activities */
.preparation-workshop {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 25px 0;
}

.workshop-activity {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.workshop-activity:last-child {
    margin-bottom: 0;
}

.feedback-template {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    margin-top: 15px;
}

.feedback-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.feedback-category {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 4px;
}

.pitch-example {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 4px;
    margin: 15px 0;
    font-style: italic;
}

.practice-timer {
    text-align: center;
    margin-top: 20px;
}

.timer-display {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.2);
    padding: 10px;
    border-radius: 8px;
    display: inline-block;
    min-width: 100px;
}

.timer-start {
    background: #50fa7b;
    color: #1a1a1a;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: var(--transition);
}

.timer-start:hover {
    background: #40e06b;
}

/* Demo Tips */
.demo-tips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.demo-tip {
    display: flex;
    align-items: flex-start;
    background: white;
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.tip-icon {
    font-size: 1.5rem;
    color: var(--secondary-color);
    margin-right: 15px;
    flex-shrink: 0;
}

.tip-content h4 {
    margin-bottom: 8px;
    color: var(--primary-color);
}

.tip-content p {
    color: var(--text-light);
    font-size: 0.9rem;
    margin: 0;
}

/* Failure Scenario Demo */
.scenario-demo {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 25px 0;
    border-left: 4px solid var(--accent-color);
}

.failure-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.failure-step {
    background: white;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    box-shadow: var(--box-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-indicator {
    background: var(--accent-color);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 10px;
}

/* Individual Assessment */
.individual-assessment {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 25px 0;
    box-shadow: var(--box-shadow);
}

.role-contributions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.contribution-role {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--secondary-color);
}

.contribution-role h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.contribution-role h4 i {
    margin-right: 10px;
    color: var(--secondary-color);
}

.contribution-role ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contribution-role li {
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
    position: relative;
    padding-left: 20px;
}

.contribution-role li:before {
    content: '•';
    color: var(--secondary-color);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.contribution-role li:last-child {
    border-bottom: none;
}

.assessment-criteria {
    background: #e3f2fd;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #2196f3;
}

.assessment-criteria h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.assessment-criteria ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.assessment-criteria li {
    padding: 8px 0;
    border-bottom: 1px solid #bbdefb;
    position: relative;
    padding-left: 20px;
}

.assessment-criteria li:before {
    content: '✓';
    color: #2196f3;
    position: absolute;
    left: 0;
    font-weight: bold;
}

.assessment-criteria li:last-child {
    border-bottom: none;
}

/* Submission Requirements */
.submission-requirements {
    background: #f8f9fa;
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 25px 0;
    border-left: 4px solid var(--secondary-color);
}

.submission-checklist {
    margin-top: 15px;
}

.submission-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #dee2e6;
}

.submission-item:last-child {
    border-bottom: none;
}

.submission-item input[type="checkbox"] {
    margin-right: 15px;
    transform: scale(1.2);
}

.submission-item label {
    cursor: pointer;
    font-weight: 500;
}

/* Reflection Guide */
.reflection-guide {
    background: white;
    border-radius: var(--border-radius);
    padding: 25px;
    margin: 25px 0;
    box-shadow: var(--box-shadow);
}

.reflection-prompts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.prompt-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--secondary-color);
}

.prompt-card h5 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.prompt-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.prompt-card li {
    padding: 6px 0;
    border-bottom: 1px solid #e9ecef;
    position: relative;
    padding-left: 20px;
}

.prompt-card li:before {
    content: '→';
    color: var(--secondary-color);
    position: absolute;
    left: 0;
}

.prompt-card li:last-child {
    border-bottom: none;
}

/* Awards Announcement */
.awards-announcement {
    background: linear-gradient(135deg, #fdbb2d, #22c1c3);
    color: white;
    padding: 30px;
    border-radius: var(--border-radius);
    margin: 25px 0;
}

.award-criteria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 25px 0;
}

.criterion {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.criterion-icon {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #fdbb2d;
}

.criterion-content h4 {
    margin-bottom: 10px;
    color: white;
}

.criterion-content p {
    opacity: 0.9;
    font-size: 0.9rem;
    margin: 0;
}

.recognition-details {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
}

.recognition-details h4 {
    color: #fdbb2d;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.recognition-details h4 i {
    margin-right: 10px;
}

.recognition-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.recognition-details li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    padding-left: 25px;
}

.recognition-details li:before {
    content: '🏆';
    position: absolute;
    left: 0;
}

.recognition-details li:last-child {
    border-bottom: none;
}

/* Final Checklist */
.final-checklist {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 25px 0;
    box-shadow: var(--box-shadow);
}

.checklist-category {
    margin-bottom: 30px;
}

.checklist-category:last-child {
    margin-bottom: 0;
}

.checklist-category h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
    border-bottom: 2px solid #f8f9fa;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
}

.checklist-category h4 i {
    margin-right: 10px;
    color: var(--secondary-color);
}

.checklist-items {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
}

.check-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #dee2e6;
}

.check-item:last-child {
    border-bottom: none;
}

.check-item input[type="checkbox"] {
    margin-right: 15px;
    transform: scale(1.2);
}

.check-item label {
    cursor: pointer;
    font-weight: 500;
}

/* Responsive Design for Presentation */
@media (max-width: 768px) {
    .timeline-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .time-slot {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .time-breakdown {
        grid-template-columns: 1fr;
    }
    
    .rubric-levels {
        grid-template-columns: 1fr;
    }
    
    .evaluator-panel {
        grid-template-columns: 1fr;
    }
    
    .question-categories {
        grid-template-columns: 1fr;
    }
    
    .presentation-techniques {
        grid-template-columns: 1fr;
    }
    
    .qa-strategies {
        grid-template-columns: 1fr;
    }
    
    .demo-tips {
        grid-template-columns: 1fr;
    }
    
    .failure-steps {
        grid-template-columns: 1fr;
    }
    
    .role-contributions {
        grid-template-columns: 1fr;
    }
    
    .reflection-prompts {
        grid-template-columns: 1fr;
    }
    
    .award-criteria {
        grid-template-columns: 1fr;
    }
}

/* Animation for Presentation Elements */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.timer-display.active {
    animation: pulse 1s infinite;
    color: #50fa7b;
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.technique-card, .strategy-item, .demo-tip {
    animation: slideInFromLeft 0.6s ease-out;
}

/* Review UAS Specific Styles */
.progress-tracker {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin-bottom: 40px;
    box-shadow: var(--box-shadow);
}

.progress-header {
    text-align: center;
    margin-bottom: 30px;
}

.progress-header h3 {
    margin: 0;
    font-size: 1.5rem;
}

.progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.progress-steps::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%);
    z-index: 1;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    text-align: center;
    flex: 1;
}

.step-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 10px;
    border: 4px solid rgba(255, 255, 255, 0.3);
}

.progress-step.completed .step-number {
    background: #4CAF50;
    border-color: #4CAF50;
}

.progress-step.current .step-number {
    background: #FF9800;
    border-color: #FF9800;
    animation: pulse 2s infinite;
}

.progress-step.upcoming .step-number {
    background: rgba(255, 255, 255, 0.2);
}

.step-label {
    font-size: 0.9rem;
    margin-bottom: 5px;
    font-weight: 600;
}

.step-status {
    font-size: 0.8rem;
    opacity: 0.9;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Integration Map */
.integration-map {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 20px 0;
    box-shadow: var(--box-shadow);
}

.map-level {
    text-align: center;
    margin-bottom: 20px;
}

.map-level h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.map-items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.map-item {
    background: var(--light-color);
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    transition: var(--transition);
}

.map-item.highlight {
    background: var(--secondary-color);
    color: white;
    font-weight: 600;
}

.map-item.final {
    background: var(--accent-color);
    color: white;
    font-weight: 600;
}

.map-connector {
    text-align: center;
    margin: 10px 0;
    color: var(--secondary-color);
}

.map-level.foundation {
    border-left: 4px solid #4CAF50;
    padding-left: 20px;
}

.map-level.advanced {
    border-left: 4px solid #2196F3;
    padding-left: 20px;
}

.map-level.integration {
    border-left: 4px solid #FF9800;
    padding-left: 20px;
}

/* Review Cards */
.review-card {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 25px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    transition: var(--transition);
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.review-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 20px;
    display: flex;
    justify-content: between;
    align-items: center;
}

.review-header h3 {
    margin: 0;
    flex: 1;
}

.review-tag {
    background: rgba(255, 255, 255, 0.2);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.review-body {
    padding: 25px;
}

.key-concepts, .must-know, .quick-review {
    margin-bottom: 20px;
}

.key-concepts h4, .must-know h4, .quick-review h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-size: 1.1rem;
}

/* Exam Focus */
.exam-focus {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 20px 0;
    box-shadow: var(--box-shadow);
}

.focus-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.focus-item {
    text-align: center;
    padding: 25px;
    background: var(--light-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.focus-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.focus-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.focus-item h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.focus-item ul {
    text-align: left;
    list-style: none;
    padding: 0;
}

.focus-item li {
    padding: 5px 0;
    position: relative;
    padding-left: 20px;
}

.focus-item li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: bold;
}

/* Practice Questions */
.practice-question {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 30px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    border-left: 4px solid var(--accent-color);
}

.question-header {
    background: #f8f9fa;
    padding: 20px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: between;
    align-items: center;
}

.question-header h3 {
    margin: 0;
    color: var(--primary-color);
    flex: 1;
}

.question-tag {
    background: var(--accent-color);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.question-body {
    padding: 25px;
}

.scenario, .requirements, .question-tasks, .evaluation-criteria {
    margin-bottom: 20px;
}

.scenario h4, .requirements h4, .question-tasks h4, .evaluation-criteria h4 {
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.answer-guide {
    background: #618097;
    padding: 20px;
    border-radius: var(--border-radius);
    margin-top: 20px;
}

/* Strategy Grid */
.strategy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin: 25px 0;
}

.strategy-card {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    text-align: center;
    transition: var(--transition);
}

.strategy-card:hover {
    transform: translateY(-5px);
}

.strategy-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.strategy-card h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
}

.time-allocation {
    text-align: left;
}

.time-slot {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.time-slot:last-child {
    border-bottom: none;
}

/* Capstone Integration */
.capstone-integration {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 20px 0;
    box-shadow: var(--box-shadow);
}

.integration-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.integration-item {
    text-align: center;
    padding: 20px;
    background: var(--light-color);
    border-radius: var(--border-radius);
}

.integration-item h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.example-integration {
    background: #f8f9fa;
    padding: 20px;
    border-radius: var(--border-radius);
}

/* Resources Grid */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 25px 0;
}

.resource-category {
    background: white;
    padding: 25px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.resource-category h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--light-color);
    padding-bottom: 10px;
}

.resource-category ul {
    list-style: none;
    padding: 0;
}

.resource-category li {
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    padding-left: 25px;
}

.resource-category li::before {
    content: '📚';
    position: absolute;
    left: 0;
}

.resource-category li:last-child {
    border-bottom: none;
}

/* Preparation Checklist */
.preparation-checklist {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 20px 0;
    box-shadow: var(--box-shadow);
}

.checklist-category {
    margin-bottom: 25px;
}

.checklist-category h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--light-color);
}

.checklist-items {
    list-style: none;
    padding: 0;
}

.checklist-items li {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: center;
}

.checklist-items li:last-child {
    border-bottom: none;
}

.checklist-items input[type="checkbox"] {
    margin-right: 15px;
    transform: scale(1.2);
}

/* Motivation Section */
.motivation-section {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    border-radius: var(--border-radius);
    padding: 40px;
    margin: 30px 0;
    text-align: center;
}

.motivation-content h3 {
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.motivation-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    opacity: 0.9;
}

.final-tips {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: var(--border-radius);
    margin-top: 25px;
    text-align: left;
}

.final-tips h4 {
    margin-bottom: 15px;
    text-align: center;
}

.final-tips ul {
    list-style: none;
    padding: 0;
}

.final-tips li {
    padding: 8px 0;
    position: relative;
    padding-left: 30px;
}

.final-tips li::before {
    content: '⭐';
    position: absolute;
    left: 0;
}

/* Responsive Design for Review Page */
@media (max-width: 768px) {
    .progress-steps {
        flex-direction: column;
        gap: 20px;
    }
    
    .progress-steps::before {
        display: none;
    }
    
    .progress-step {
        width: 100%;
        flex: none;
    }
    
    .focus-grid,
    .strategy-grid,
    .integration-points,
    .resources-grid {
        grid-template-columns: 1fr;
    }
    
    .review-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .question-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .map-items {
        flex-direction: column;
        align-items: center;
    }
    
    .motivation-section {
        padding: 25px 20px;
    }
}

/* Animation for review elements */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.review-card,
.practice-question,
.strategy-card {
    animation: slideInUp 0.6s ease-out;
}

/* UAS Specific Styles */
.exam-banner {
    background: linear-gradient(135deg, #2c3e50, #3498db);
    color: white;
    border-radius: var(--border-radius);
    margin-bottom: 40px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
}

.banner-content {
    display: flex;
    align-items: center;
    padding: 30px;
    gap: 30px;
}

.banner-icon {
    font-size: 3rem;
    opacity: 0.9;
}

.banner-text {
    flex: 1;
}

.banner-text h2 {
    margin: 0 0 10px 0;
    font-size: 2rem;
}

.banner-text p {
    margin: 0;
    opacity: 0.9;
    font-size: 1.1rem;
}

.banner-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 15px;
    border-radius: var(--border-radius);
    text-align: center;
}

/* Coverage Grid */
.coverage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.coverage-item {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: var(--border-radius);
}

.coverage-item h4 {
    margin: 0 0 10px 0;
    color: var(--light-color);
    font-size: 1rem;
}

.coverage-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.coverage-item li {
    padding: 5px 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Exam Format */
.exam-format {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 20px 0;
    box-shadow: var(--box-shadow);
}

.format-details {
    display: grid;
    gap: 25px;
    margin-bottom: 30px;
}

.format-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.format-icon {
    font-size: 2rem;
    color: var(--secondary-color);
    min-width: 60px;
}

.format-content h4 {
    margin: 0 0 10px 0;
    color: var(--primary-color);
}

.format-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.format-content li {
    padding: 5px 0;
    position: relative;
    padding-left: 20px;
}

.format-content li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: bold;
}

.exam-instructions {
    background: var(--light-color);
    padding: 25px;
    border-radius: var(--border-radius);
    border-left: 4px solid var(--secondary-color);
}

.exam-instructions ol {
    margin: 15px 0 0 0;
    padding-left: 20px;
}

.exam-instructions li {
    padding: 8px 0;
}

/* Exam Blueprint */
.exam-blueprint {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 20px 0;
    box-shadow: var(--box-shadow);
}

.difficulty-levels {
    margin-bottom: 30px;
}

.levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.level-item {
    text-align: center;
    padding: 20px;
    border-radius: var(--border-radius);
    background: var(--light-color);
}

.level-item.advanced {
    border-left: 4px solid #e74c3c;
}

.level-item.intermediate {
    border-left: 4px solid #f39c12;
}

.level-item.fundamental {
    border-left: 4px solid #27ae60;
}

.level-item h4 {
    margin: 0 0 10px 0;
    color: var(--primary-color);
}

.level-bar {
    background: #ddd;
    height: 8px;
    border-radius: 4px;
    margin-top: 10px;
    overflow: hidden;
}

.level-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 1s ease-in-out;
}

.level-item.advanced .level-fill {
    background: #e74c3c;
}

.level-item.intermediate .level-fill {
    background: #f39c12;
}

.level-item.fundamental .level-fill {
    background: #27ae60;
}

.competency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.competency-item {
    text-align: center;
    padding: 25px;
    background: var(--light-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.competency-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.competency-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.competency-item h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.competency-item p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* Sample Questions */
.sample-question {
    background: white;
    border-radius: var(--border-radius);
    margin-bottom: 40px;
    box-shadow: var(--box-shadow);
    overflow: hidden;
    border: 2px solid #e0e0e0;
}

.question-header {
    background: linear-gradient(135deg, #34495e, #2c3e50);
    color: white;
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.question-meta {
    display: flex;
    align-items: center;
    gap: 15px;
}

.question-number {
    background: var(--accent-color);
    padding: 8px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 1.1rem;
}

.question-weight {
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
}

.question-header h3 {
    margin: 0;
    font-size: 1.4rem;
}

.question-scenario,
.current-challenges,
.business-requirements,
.available-data,
.question-tasks {
    padding: 25px;
    border-bottom: 1px solid #eee;
}

.question-scenario:last-child,
.current-challenges:last-child,
.business-requirements:last-child,
.available-data:last-child,
.question-tasks:last-child {
    border-bottom: none;
}

.question-scenario h4,
.current-challenges h4,
.business-requirements h4,
.available-data h4,
.question-tasks h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.technology-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 25px;
}

.tech-environment {
    background: var(--light-color);
    padding: 20px;
    border-radius: var(--border-radius);
}

.tech-environment h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
    text-align: center;
}

.data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.data-item {
    background: var(--light-color);
    padding: 15px;
    border-radius: var(--border-radius);
}

.data-item h5 {
    color: var(--primary-color);
    margin-bottom: 10px;
    text-align: center;
}

/* Scoring Rubrics */
.scoring-rubric,
.evaluation-focus,
.solution-framework {
    padding: 25px;
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.rubric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.rubric-item h5 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.rubric-item ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rubric-item li {
    padding: 5px 0;
    font-size: 0.9rem;
    position: relative;
    padding-left: 20px;
}

.rubric-item li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: bold;
}

.focus-areas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.focus-area h5 {
    color: var(--primary-color);
    margin-bottom: 8px;
}

.focus-area p {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0;
}

.framework-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.framework-step {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.step-number {
    background: var(--secondary-color);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-content strong {
    color: var(--primary-color);
}

/* Exam Strategy */
.exam-strategy {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 20px 0;
    box-shadow: var(--box-shadow);
}

.time-breakdown {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 20px 0;
}

.time-segment {
    background: var(--light-color);
    border-radius: var(--border-radius);
    padding: 20px;
    border-left: 4px solid #ddd;
    transition: var(--transition);
}

.time-segment.critical {
    border-left-color: #e74c3c;
}

.time-segment.high-priority {
    border-left-color: #f39c12;
}

.time-segment.medium-priority {
    border-left-color: #3498db;
}

.time-segment.low-priority {
    border-left-color: #27ae60;
}

.time-segment.essential {
    border-left-color: #9b59b6;
}

.time-segment:hover {
    transform: translateX(5px);
}

.segment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.segment-header h4 {
    margin: 0;
    color: var(--primary-color);
}

.segment-duration {
    background: var(--secondary-color);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.technique-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.technique-item {
    text-align: center;
    padding: 25px;
    background: var(--light-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.technique-item:hover {
    transform: translateY(-5px);
}

.technique-icon {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
}

.technique-item h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.technique-item p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* Grading System */
.grading-system {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 20px 0;
    box-shadow: var(--box-shadow);
}

.grade-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 20px 0;
}

.grade-component {
    background: var(--light-color);
    padding: 20px;
    border-radius: var(--border-radius);
}

.grade-component h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
    text-align: center;
}

.component-details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.component-details li {
    padding: 8px 0;
    border-bottom: 1px solid #dee2e6;
    position: relative;
    padding-left: 25px;
}

.component-details li::before {
    content: '•';
    position: absolute;
    left: 10px;
    color: var(--secondary-color);
    font-weight: bold;
}

.component-details li:last-child {
    border-bottom: none;
}

.scale-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.scale-item {
    padding: 20px;
    border-radius: var(--border-radius);
    text-align: center;
    color: white;
}

.scale-item.A {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
}

.scale-item.B {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

.scale-item.C {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

.scale-item.D {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.scale-item.E {
    background: linear-gradient(135deg, #95a5a6, #7f8c8d);
}

.scale-item h4 {
    margin: 0 0 10px 0;
    font-size: 1.3rem;
}

.scale-item p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Final Preparation */
.final-preparation {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 20px 0;
    box-shadow: var(--box-shadow);
}

.checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin: 20px 0;
}

.checklist-category {
    background: var(--light-color);
    padding: 20px;
    border-radius: var(--border-radius);
}

.checklist-category h4 {
    color: var(--primary-color);
    margin-bottom: 15px;
    text-align: center;
}

.checklist-category ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.checklist-category li {
    padding: 8px 0;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
}

.checklist-category li:last-child {
    border-bottom: none;
}

.checklist-category input[type="checkbox"] {
    margin-right: 12px;
    transform: scale(1.2);
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.tip-item {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.tip-icon {
    font-size: 2rem;
    color: var(--secondary-color);
    min-width: 60px;
}

.tip-content h4 {
    margin: 0 0 8px 0;
    color: var(--primary-color);
}

.tip-content p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}

/* Post-Exam Roadmap */
.post-exam-roadmap {
    background: white;
    border-radius: var(--border-radius);
    padding: 30px;
    margin: 20px 0;
    box-shadow: var(--box-shadow);
}

.roadmap-steps {
    position: relative;
}

.roadmap-step {
    display: flex;
    gap: 25px;
    margin-bottom: 30px;
}

.roadmap-step:last-child {
    margin-bottom: 0;
}

.step-timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 30px;
}

.timeline-marker {
    width: 20px;
    height: 20px;
    background: var(--secondary-color);
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 0 0 2px var(--secondary-color);
}

.timeline-connector {
    flex: 1;
    width: 2px;
    background: var(--secondary-color);
    margin: 5px 0;
}

.roadmap-step:last-child .timeline-connector {
    display: none;
}

.step-content h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.step-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-content li {
    padding: 5px 0;
    position: relative;
    padding-left: 20px;
}

.step-content li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--secondary-color);
    font-weight: bold;
}

.career-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.career-role {
    background: var(--light-color);
    padding: 20px;
    border-radius: var(--border-radius);
    text-align: center;
    transition: var(--transition);
}

.career-role:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.career-role h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
}

.career-role p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Final Message */
.final-message {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    border-radius: var(--border-radius);
    padding: 40px;
    margin: 30px 0;
    box-shadow: var(--box-shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.message-content {
    flex: 1;
}

.message-icon {
    font-size: 4rem;
    opacity: 0.8;
    margin-bottom: 20px;
}

.message-text h3 {
    margin: 0 0 20px 0;
    font-size: 1.8rem;
    color: var(--light-color);
}

.message-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 15px;
}

.signature {
    font-style: italic;
    opacity: 0.8;
    margin-top: 20px;
}

.achievement-badge {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: var(--border-radius);
    text-align: center;
    min-width: 200px;
}

.badge-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    opacity: 0.9;
}

.badge-text h4 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
}

.badge-text p {
    margin: 0 0 10px 0;
    opacity: 0.8;
    font-size: 0.9rem;
}

.completion-status {
    background: #27ae60;
    color: white;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Navigation Buttons Update */
.nav-btn.home {
    background: var(--primary-color);
}

.nav-btn.home:hover {
    background: #1a252f;
}

/* Responsive Design for UAS Page */
@media (max-width: 768px) {
    .banner-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .banner-details {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .technology-comparison {
        grid-template-columns: 1fr;
    }
    
    .roadmap-step {
        flex-direction: column;
        gap: 15px;
    }
    
    .step-timeline {
        flex-direction: row;
        min-width: auto;
        justify-content: flex-start;
        gap: 15px;
    }
    
    .timeline-connector {
        width: 30px;
        height: 2px;
        margin: 0;
    }
    
    .final-message {
        flex-direction: column;
        text-align: center;
    }
    
    .question-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .question-meta {
        justify-content: center;
    }
}

/* Print Styles for UAS */
@media print {
    .navbar, .hamburger, .navigation-buttons, .exam-banner {
        display: none !important;
    }
    
    .materi-page {
        margin-top: 0 !important;
    }
    
    .sample-question {
        break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
    
    .final-message {
        background: white !important;
        color: black !important;
        border: 2px solid #2c3e50 !important;
    }
}

/* Animation for UAS elements */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.sample-question {
    animation: fadeInScale 0.6s ease-out;
}

.roadmap-step {
    animation: slideInUp 0.5s ease-out;
}