@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

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

:root {
    --primary: #6366f1;
    --primary-light: #818cf8;
    --primary-dark: #4f46e5;
    --secondary: #ec4899;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --dark: #0f172a;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1);
    --radius: 12px;
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 35%, #f093fb 100%);
    min-height: 100vh;
    color: var(--gray-800);
}

/* Header */
header {
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,.2);
    padding: 2rem;
    color: white;
    text-align: center;
}

.header-content h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: .5rem; }
.header-content .subtitle { font-size: 1.1rem; opacity: .9; margin-bottom: 1.5rem; }

.progress-container { display: flex; align-items: center; gap: 1rem; justify-content: center; max-width: 500px; margin: 0 auto; }
.progress-bar { flex: 1; height: 8px; background: rgba(255,255,255,.3); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: white; border-radius: 4px; transition: width .5s ease; width: 0%; }
.progress-text { color: rgba(255,255,255,.9); font-size: .9rem; white-space: nowrap; }

/* Navigation */
.main-nav { background: rgba(255,255,255,.95); backdrop-filter: blur(10px); padding: .75rem 1rem; overflow-x: auto; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow); }
.main-nav ul { display: flex; gap: .5rem; list-style: none; min-width: max-content; margin: 0 auto; justify-content: center; flex-wrap: wrap; }
.main-nav a { display: block; padding: .5rem 1rem; border-radius: 8px; text-decoration: none; color: var(--gray-600); font-weight: 500; font-size: .85rem; transition: all .2s; white-space: nowrap; }
.main-nav a:hover, .main-nav a.active { background: var(--primary); color: white; }

/* Main content */
.main-content { max-width: 1100px; margin: 0 auto; padding: 2rem; }

.chapter { display: none; animation: fadeIn .4s ease; }
.chapter.active { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.chapter-header {
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(10px);
    border-radius: var(--radius);
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--shadow-lg);
}
.chapter-header h2 { font-size: 1.8rem; font-weight: 700; color: var(--gray-800); }
.chapter-info { display: flex; gap: .5rem; }
.chapter-number, .chapter-level {
    background: var(--primary);
    color: white;
    padding: .3rem .8rem;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
}

/* Lesson cards */
.lesson-card {
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(10px);
    border-radius: var(--radius);
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-lg);
}
.lesson-card h3 { font-size: 1.3rem; color: var(--primary); margin-bottom: 1rem; font-weight: 700; }
.lesson-card > p { color: var(--gray-600); margin-bottom: 1.5rem; line-height: 1.7; }

/* Boxes */
.concept-box, .interactive-activity, .algorithm-introduction, .programming-basics,
.coding-challenge, .network-simulation, .internet-security, .materials-explorer,
.properties-tester, .structures-lab, .bridge-builder, .energy-sources, .energy-calculator,
.sustainability-simulator, .eco-design-challenge, .communication-chain-diagram,
.protocol-model, .network-diagnostic, .project-methodology, .project-planner,
.project-gallery, .project-simulator, .exam-format, .exam-tips, .quiz-container {
    background: var(--gray-100);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin: 1.5rem 0;
    border: 1px solid var(--gray-200);
}
.concept-box h4, .interactive-activity h4, .algorithm-introduction h4,
.programming-basics h4, .network-simulation h4, .materials-explorer h4,
.structures-lab h4, .bridge-builder h4, .energy-sources h4, .energy-calculator h4,
.sustainability-simulator h4, .project-methodology h4, .project-planner h4,
.project-gallery h4, .project-simulator h4, .exam-format h4, .exam-tips h4 {
    font-size: 1.1rem; font-weight: 700; color: var(--gray-800); margin-bottom: 1rem;
}

/* Design process */
.design-process { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.process-step {
    flex: 1; min-width: 120px; background: white; border-radius: 10px;
    padding: 1rem; text-align: center; cursor: pointer; transition: all .3s;
    box-shadow: var(--shadow); border: 2px solid transparent;
}
.process-step:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.step-icon { font-size: 2rem; margin-bottom: .5rem; }
.process-step h5 { font-size: .9rem; font-weight: 700; color: var(--primary); margin-bottom: .3rem; }
.process-step p { font-size: .8rem; color: var(--gray-500); }
.step-info-display {
    margin-top: 1rem; padding: 1rem; background: white; border-radius: 10px;
    border-left: 4px solid var(--primary); display: none;
}
.step-info-display:not(:empty) { display: block; }

/* Design form */
.design-form { display: grid; gap: 1rem; margin-top: 1rem; }
.form-step h5 { font-size: .9rem; font-weight: 600; color: var(--gray-700); margin-bottom: .5rem; }
.design-form textarea, .design-form input[type="text"] {
    width: 100%; padding: .75rem; border: 1px solid var(--gray-300);
    border-radius: 8px; font-family: inherit; font-size: .9rem; resize: vertical; min-height: 80px;
}

/* Buttons */
.submit-btn, .run-btn, .clear-btn, .send-btn, .test-btn, .generate-btn,
.reset-btn, .command-btn, .quiz-btn {
    padding: .7rem 1.4rem; border: none; border-radius: 8px; cursor: pointer;
    font-family: inherit; font-size: .9rem; font-weight: 600; transition: all .2s;
}
.submit-btn, .run-btn, .send-btn { background: var(--primary); color: white; }
.submit-btn:hover, .run-btn:hover, .send-btn:hover { background: var(--primary-dark); transform: translateY(-2px); }
.clear-btn, .reset-btn { background: var(--gray-200); color: var(--gray-700); }
.clear-btn:hover, .reset-btn:hover { background: var(--gray-300); }
.test-btn, .generate-btn { background: var(--success); color: white; }
.test-btn:hover, .generate-btn:hover { background: #059669; }
.command-btn { background: white; color: var(--primary); border: 2px solid var(--primary); margin: .25rem; }
.command-btn:hover { background: var(--primary); color: white; }
.quiz-btn { background: var(--primary); color: white; }
.quiz-btn.secondary { background: var(--gray-200); color: var(--gray-700); }
.quiz-btn.primary { background: var(--success); }

.feedback-box, .analysis-result, .design-simulation-result, .function-details,
.material-info-display, .structure-demonstration, .test-results, .energy-info-display,
.consumption-results, .city-evaluation, .diagnosis-steps, .phase-info-display,
.project-timeline, .project-details-display, .robot-feedback, .program-output,
.network-log, .node-details, .security-info-display, .bridge-results, .property-results,
.challenge-result, .timeline-details {
    margin-top: 1rem; padding: 1rem; background: white;
    border-radius: 8px; border-left: 4px solid var(--primary); min-height: 20px;
}

/* Timeline */
.timeline { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.timeline-event {
    flex: 1; min-width: 120px; background: white; border-radius: 10px;
    padding: 1rem; text-align: center; cursor: pointer; transition: all .3s;
    box-shadow: var(--shadow); border: 2px solid transparent;
}
.timeline-event:hover { border-color: var(--secondary); transform: translateY(-3px); }
.timeline-year { font-size: 1.2rem; font-weight: 800; color: var(--primary); margin-bottom: .3rem; }
.timeline-content h5 { font-size: .85rem; font-weight: 700; margin-bottom: .3rem; }
.timeline-content p { font-size: .75rem; color: var(--gray-500); }

/* Object analysis */
.bike-diagram { position: relative; margin: 1rem 0; }
.bike-image { max-width: 400px; display: block; margin: 0 auto; }
.analysis-points { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.analysis-point {
    position: absolute; cursor: pointer; display: flex; align-items: center; gap: .4rem;
    transform: translate(-50%, -50%);
}
.point-marker {
    background: var(--primary); color: white; width: 28px; height: 28px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700; flex-shrink: 0;
}
.point-label {
    background: white; padding: .2rem .5rem; border-radius: 4px;
    font-size: .75rem; font-weight: 600; box-shadow: var(--shadow); white-space: nowrap;
}
.function-categories { display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.function-category { flex: 1; min-width: 200px; background: white; padding: 1rem; border-radius: 10px; border-left: 4px solid var(--primary); }
.function-category h5 { font-weight: 700; color: var(--primary); margin-bottom: .5rem; }
.function-category ul { padding-left: 1rem; font-size: .9rem; color: var(--gray-600); line-height: 1.8; }

.object-selector label, .test-scenario label, .control-group label, .parameter label { display: block; font-weight: 600; margin-bottom: .5rem; font-size: .9rem; }
.object-selector select, .test-scenario select, .control-group select, .parameter select,
.parameter input[type="range"] {
    width: 100%; padding: .6rem; border: 1px solid var(--gray-300);
    border-radius: 8px; font-family: inherit; font-size: .9rem; background: white;
}

/* Evolution */
.evolution-timeline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
.evolution-stage { flex: 1; min-width: 160px; background: white; border-radius: 10px; padding: 1rem; text-align: center; box-shadow: var(--shadow); }
.stage-image { font-size: 2.5rem; margin-bottom: .5rem; }
.evolution-stage h5 { font-size: .9rem; font-weight: 700; margin-bottom: .3rem; }
.evolution-stage p { font-size: .8rem; color: var(--gray-500); }
.constraints { font-size: .75rem; color: var(--warning); margin-top: .5rem; }
.evolution-arrow { font-size: 1.5rem; color: var(--primary); flex-shrink: 0; }

/* Simulator controls */
.simulator-controls { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.control-group { flex: 1; min-width: 150px; }

/* Algorithm steps */
.algorithm-steps { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
.step { display: flex; align-items: center; gap: 1rem; background: white; padding: .75rem; border-radius: 8px; }
.step-number {
    background: var(--primary); color: white; width: 28px; height: 28px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 700; flex-shrink: 0;
}
.step-text { font-size: .9rem; color: var(--gray-700); }

/* Scratch simulator */
.scratch-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
.scratch-blocks { background: var(--gray-100); border-radius: 10px; padding: 1rem; }
.block-category { margin-bottom: 1rem; }
.block-category h6 { font-weight: 700; font-size: .8rem; color: var(--gray-600); margin-bottom: .5rem; text-transform: uppercase; }
.scratch-block {
    padding: .5rem .75rem; border-radius: 6px; cursor: grab; font-size: .85rem;
    font-weight: 600; margin-bottom: .3rem; user-select: none; display: block;
}
.scratch-block.movement { background: #4299e1; color: white; }
.scratch-block.appearance { background: #9f7aea; color: white; }
.scratch-block.control { background: #f6ad55; color: white; }
.scratch-block.event { background: #f6c90e; color: var(--gray-800); }
.scratch-script-area {
    background: white; border-radius: 10px; padding: 1rem; min-height: 200px;
    border: 2px dashed var(--gray-300);
}
.scratch-script-area h6 { font-weight: 700; font-size: .8rem; color: var(--gray-600); margin-bottom: .5rem; }
.script-start { margin-bottom: .5rem; }
.script-blocks { min-height: 100px; }
.scratch-controls { display: flex; gap: .5rem; margin-top: .5rem; }

/* Network */
.network-diagram { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
.network-node {
    flex: 1; min-width: 100px; background: white; border-radius: 10px; padding: 1rem;
    text-align: center; cursor: pointer; transition: all .3s; box-shadow: var(--shadow);
    border: 2px solid transparent; font-size: 2rem;
}
.network-node span { display: block; font-size: .8rem; font-weight: 600; margin-top: .3rem; color: var(--gray-600); }
.network-node:hover { border-color: var(--primary); transform: translateY(-3px); }
.network-connection { width: 30px; height: 2px; background: var(--gray-300); flex-shrink: 0; }
.message-form { display: flex; gap: .5rem; margin: 1rem 0; }
.message-form input { flex: 1; padding: .6rem; border: 1px solid var(--gray-300); border-radius: 8px; font-family: inherit; }
.network-log { font-family: monospace; font-size: .85rem; background: var(--dark); color: #4ade80; padding: 1rem; border-radius: 8px; min-height: 60px; margin-top: .5rem; white-space: pre-line; }

/* Security */
.security-scenarios { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.security-scenario {
    flex: 1; min-width: 140px; background: white; border-radius: 10px; padding: 1.5rem;
    text-align: center; cursor: pointer; transition: all .3s; box-shadow: var(--shadow);
    border: 2px solid transparent;
}
.security-scenario:hover { border-color: var(--warning); transform: translateY(-3px); }
.scenario-icon { font-size: 2.5rem; margin-bottom: .5rem; }
.security-scenario h5 { font-weight: 700; margin-bottom: .3rem; }
.security-scenario p { font-size: .8rem; color: var(--gray-500); }

/* Materials */
.materials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; margin: 1rem 0; }
.material-card {
    background: white; border-radius: 10px; padding: 1rem; text-align: center;
    cursor: pointer; transition: all .3s; box-shadow: var(--shadow); border: 2px solid transparent;
}
.material-card:hover { border-color: var(--primary); transform: translateY(-3px); }
.material-sample { width: 60px; height: 60px; border-radius: 10px; margin: 0 auto .5rem; }
.material-sample.metal { background: linear-gradient(135deg, #9ca3af, #d1d5db); }
.material-sample.plastic { background: linear-gradient(135deg, #60a5fa, #93c5fd); }
.material-sample.wood { background: linear-gradient(135deg, #92400e, #b45309); }
.material-sample.ceramic { background: linear-gradient(135deg, #e5e7eb, #f9fafb); border: 1px solid #d1d5db; }
.material-sample.composite { background: linear-gradient(45deg, #1f2937 25%, #6b7280 25%, #6b7280 50%, #1f2937 50%, #1f2937 75%, #6b7280 75%); background-size: 20px 20px; }
.material-sample.textile { background: repeating-linear-gradient(45deg, #818cf8 0, #818cf8 2px, #e0e7ff 2px, #e0e7ff 8px); }
.material-card h5 { font-weight: 700; font-size: .9rem; margin-bottom: .3rem; }
.material-card p { font-size: .75rem; color: var(--gray-500); }

/* Structures */
.structure-types { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0; }
.structure-example {
    flex: 1; min-width: 100px; background: white; border-radius: 10px; padding: 1rem;
    text-align: center; cursor: pointer; transition: all .3s; box-shadow: var(--shadow);
    border: 2px solid transparent;
}
.structure-example:hover { border-color: var(--success); transform: translateY(-3px); }
.structure-shape { width: 60px; height: 60px; margin: 0 auto .5rem; border: 3px solid var(--primary); }
.structure-shape.triangle { width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 52px solid var(--primary); border-top: none; }
.structure-shape.square { width: 50px; height: 50px; }
.structure-shape.arch { width: 60px; height: 30px; border-radius: 60px 60px 0 0; border-bottom: none; }
.structure-shape.truss { background: repeating-linear-gradient(60deg, var(--primary) 0, var(--primary) 2px, transparent 2px, transparent 20px); border: none; }
.structure-example h5 { font-weight: 700; font-size: .9rem; margin-bottom: .3rem; }
.structure-example p { font-size: .75rem; color: var(--gray-500); }

/* Bridge builder */
.design-parameters, .bridge-design { display: flex; flex-direction: column; gap: 1rem; }
.parameter label { display: flex; justify-content: space-between; }
.bridge-visualization { min-height: 120px; background: white; border-radius: 10px; border: 2px dashed var(--gray-300); margin: 1rem 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.bridge-test { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Energy */
.energy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; margin: 1rem 0; }
.energy-card {
    background: white; border-radius: 10px; padding: 1rem; text-align: center;
    cursor: pointer; transition: all .3s; box-shadow: var(--shadow); border: 2px solid transparent;
}
.energy-card.renewable:hover { border-color: var(--success); }
.energy-card.non-renewable:hover { border-color: var(--danger); }
.energy-card:hover { transform: translateY(-3px); }
.energy-icon { font-size: 2.5rem; margin-bottom: .5rem; }
.energy-card h5 { font-weight: 700; font-size: .9rem; margin-bottom: .3rem; }
.energy-type { font-size: .7rem; padding: .2rem .6rem; border-radius: 20px; font-weight: 600; }
.renewable .energy-type { background: #d1fae5; color: #065f46; }
.non-renewable .energy-type { background: #fee2e2; color: #991b1b; }

.consumption-form { display: grid; gap: .75rem; margin-bottom: 1rem; }
.appliance-input { display: flex; align-items: center; gap: 1rem; background: white; padding: .75rem; border-radius: 8px; }
.appliance-input label { flex: 1; font-size: .9rem; font-weight: 500; }
.appliance-input input { width: 80px; padding: .4rem; border: 1px solid var(--gray-300); border-radius: 6px; font-family: inherit; }
.appliance-input input[type="checkbox"] { width: 20px; height: 20px; }

/* City simulator */
.city-planning { display: grid; grid-template-columns: 1fr auto; gap: 1rem; margin: 1rem 0; }
.city-grid { display: grid; grid-template-columns: repeat(4, 60px); gap: 4px; }
.city-cell {
    width: 60px; height: 60px; background: var(--gray-100); border: 2px solid var(--gray-200);
    border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; transition: all .2s;
}
.city-cell:hover { border-color: var(--primary); background: #ede9fe; }
.city-cell.occupied { background: #f0fdf4; border-color: var(--success); }
.building-options { flex-shrink: 0; }
.building-option {
    background: white; border-radius: 8px; padding: .75rem; margin-bottom: .5rem;
    cursor: grab; font-size: .85rem; font-weight: 600; box-shadow: var(--shadow);
    border: 2px solid var(--gray-200); transition: all .2s;
}
.building-option:hover { border-color: var(--primary); transform: translateX(-2px); }
.building-types { display: flex; flex-direction: column; gap: .5rem; }
.city-stats { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.stat { background: white; padding: .5rem 1rem; border-radius: 8px; display: flex; align-items: center; gap: .4rem; box-shadow: var(--shadow); }
.stat-icon { font-size: 1.2rem; }
.stat-label { font-size: .85rem; font-weight: 600; color: var(--gray-600); }
.stat-value { font-size: .95rem; font-weight: 700; color: var(--primary); }

/* Eco design */
.eco-design-form { display: grid; gap: 1rem; }
.design-step h5 { font-size: .9rem; font-weight: 700; margin-bottom: .5rem; }
.eco-design-form select, .eco-design-form textarea {
    width: 100%; padding: .7rem; border: 1px solid var(--gray-300);
    border-radius: 8px; font-family: inherit; font-size: .9rem; resize: vertical;
}
.eco-design-form textarea { min-height: 80px; }

/* Communication chain */
.communication-chain { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.chain-element {
    flex: 1; min-width: 100px; background: white; border-radius: 10px; padding: 1rem;
    text-align: center; cursor: pointer; transition: all .3s; box-shadow: var(--shadow);
    border: 2px solid transparent;
}
.chain-element:hover { border-color: var(--primary); transform: translateY(-3px); }
.chain-icon { font-size: 2rem; margin-bottom: .3rem; }
.chain-element h5 { font-size: .85rem; font-weight: 700; }
.chain-arrow { font-size: 1.5rem; color: var(--primary); flex-shrink: 0; }

/* Protocol layers */
.protocol-layers { display: flex; flex-direction: column; gap: .5rem; margin: 1rem 0; }
.protocol-layer {
    background: white; border-radius: 10px; padding: 1rem 1.5rem;
    cursor: pointer; transition: all .3s; box-shadow: var(--shadow);
    border-left: 6px solid var(--primary); display: flex; align-items: center; gap: 1rem;
}
.protocol-layer:nth-child(1) { border-left-color: var(--primary); }
.protocol-layer:nth-child(2) { border-left-color: var(--success); }
.protocol-layer:nth-child(3) { border-left-color: var(--warning); }
.protocol-layer:nth-child(4) { border-left-color: var(--secondary); }
.protocol-layer:hover { transform: translateX(5px); }
.layer-number { font-size: 1.5rem; font-weight: 800; color: var(--gray-300); }
.layer-name { font-weight: 700; font-size: 1rem; }
.layer-description { font-size: .85rem; color: var(--gray-500); }
.layer-protocol { margin-left: auto; background: var(--gray-100); padding: .3rem .75rem; border-radius: 6px; font-size: .8rem; font-weight: 600; }

/* Diagnosis */
.diagnosis-form { display: flex; flex-direction: column; gap: .5rem; }
.diagnosis-form label { font-weight: 600; font-size: .9rem; }
.diagnosis-form select { padding: .6rem; border: 1px solid var(--gray-300); border-radius: 8px; font-family: inherit; }

/* Project phases */
.project-phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin: 1rem 0; }
.phase-card {
    background: white; border-radius: 10px; padding: 1.2rem; text-align: center;
    cursor: pointer; transition: all .3s; box-shadow: var(--shadow); border: 2px solid transparent;
}
.phase-card:hover { border-color: var(--primary); transform: translateY(-3px); }
.phase-number {
    width: 40px; height: 40px; background: var(--primary); color: white;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; font-weight: 800; margin: 0 auto .75rem;
}
.phase-card h5 { font-size: .9rem; font-weight: 700; margin-bottom: .3rem; }
.phase-card p { font-size: .8rem; color: var(--gray-500); }

/* Planning tool */
.planning-tool { display: flex; flex-direction: column; gap: .75rem; }
.project-input label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.project-input input { padding: .6rem; border: 1px solid var(--gray-300); border-radius: 8px; font-family: inherit; width: 100%; max-width: 200px; }

/* Project gallery */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1rem 0; }
.project-idea {
    background: white; border-radius: 10px; padding: 1rem; text-align: center;
    cursor: pointer; transition: all .3s; box-shadow: var(--shadow); border: 2px solid transparent;
}
.project-idea:hover { border-color: var(--primary); transform: translateY(-3px); }
.project-image { font-size: 2.5rem; margin-bottom: .5rem; }
.project-idea h5 { font-size: .9rem; font-weight: 700; margin-bottom: .3rem; }
.project-idea p { font-size: .75rem; color: var(--gray-500); margin-bottom: .3rem; }
.difficulty { font-size: .75rem; color: var(--warning); }

/* Robot simulator */
.robot-world { display: grid; grid-template-columns: 1fr auto; gap: 1rem; }
.world-grid { display: grid; grid-template-columns: repeat(8, 45px); gap: 2px; }
.robot-cell {
    width: 45px; height: 45px; background: var(--gray-100); border: 1px solid var(--gray-200);
    border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.robot-cell.obstacle { background: var(--danger); }
.robot-cell.goal { background: var(--success); }
.robot-cell.path { background: #dbeafe; }
.robot-controls { flex-shrink: 0; max-width: 260px; }
.command-buttons { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1rem; }
.program-area { background: white; border-radius: 8px; padding: .75rem; margin-bottom: .75rem; min-height: 80px; border: 1px solid var(--gray-200); }
.program-area h6 { font-size: .8rem; font-weight: 700; color: var(--gray-500); margin-bottom: .5rem; }
.robot-program { font-size: .85rem; color: var(--gray-700); line-height: 1.8; }
.execution-controls { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Brevet section */
.exam-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 1rem 0; }
.exam-section { background: white; border-radius: 10px; padding: 1.2rem; box-shadow: var(--shadow); }
.exam-section h5 { font-weight: 700; color: var(--primary); margin-bottom: .5rem; }
.exam-section p, .exam-section ul { font-size: .9rem; color: var(--gray-600); line-height: 1.7; }
.exam-section ul { padding-left: 1rem; }

.tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 1rem 0; }
.tip-card { background: white; border-radius: 10px; padding: 1rem; box-shadow: var(--shadow); border-left: 4px solid var(--success); }
.tip-card h5 { font-weight: 700; color: var(--success); margin-bottom: .5rem; }
.tip-card ul { font-size: .85rem; color: var(--gray-600); padding-left: 1rem; line-height: 1.8; }

/* Quiz */
.quiz-progress { margin-bottom: 1.5rem; }
.quiz-progress .progress-bar { background: var(--gray-200); height: 8px; border-radius: 4px; margin-bottom: .5rem; }
.quiz-progress .progress-fill { background: var(--primary); height: 100%; border-radius: 4px; transition: width .5s; }
.quiz-progress .progress-text { font-size: .85rem; color: var(--gray-500); }
.quiz-question { background: white; border-radius: 10px; padding: 1.5rem; box-shadow: var(--shadow); }
.quiz-question h4 { font-size: 1.1rem; font-weight: 700; color: var(--gray-800); margin-bottom: 1rem; }
.quiz-options { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.quiz-option {
    padding: .75rem 1rem; background: var(--gray-100); border-radius: 8px; cursor: pointer;
    font-size: .9rem; transition: all .2s; border: 2px solid transparent;
}
.quiz-option:hover { background: #ede9fe; border-color: var(--primary); }
.quiz-option.selected { background: #ede9fe; border-color: var(--primary); }
.quiz-option.correct { background: #d1fae5; border-color: var(--success); color: #065f46; }
.quiz-option.incorrect { background: #fee2e2; border-color: var(--danger); color: #991b1b; }
.quiz-controls { display: flex; gap: .5rem; justify-content: flex-end; }

/* Revision cards */
.revision-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1rem 0; }
.revision-card {
    background: white; border-radius: 10px; padding: 1.2rem; text-align: center;
    cursor: pointer; transition: all .3s; box-shadow: var(--shadow); border: 2px solid transparent;
}
.revision-card:hover { border-color: var(--primary); transform: translateY(-3px); }

/* Floating help */
.floating-help { position: fixed; bottom: 2rem; right: 2rem; z-index: 200; }
.help-btn {
    width: 50px; height: 50px; border-radius: 50%; background: var(--primary); color: white;
    border: none; font-size: 1.4rem; font-weight: 800; cursor: pointer; box-shadow: var(--shadow-lg);
    transition: all .3s;
}
.help-btn:hover { background: var(--primary-dark); transform: scale(1.1); }
.help-panel {
    position: absolute; bottom: 60px; right: 0; background: white; border-radius: var(--radius);
    padding: 1.2rem; min-width: 250px; box-shadow: var(--shadow-xl); display: none;
    border: 1px solid var(--gray-200);
}
.help-panel.visible { display: block; }
.help-panel h4 { font-weight: 700; color: var(--primary); margin-bottom: .75rem; }
.help-panel ul { list-style: disc; padding-left: 1.2rem; font-size: .85rem; color: var(--gray-600); line-height: 2; }

/* Footer */
footer { background: rgba(0,0,0,.3); color: white; padding: 1.5rem 2rem; margin-top: 2rem; }
.footer-content { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer-links a { color: rgba(255,255,255,.8); text-decoration: none; font-size: .9rem; }
.footer-links a:hover { color: white; }

/* Responsive */
@media (max-width: 768px) {
    .main-content { padding: 1rem; }
    .chapter-header { flex-direction: column; gap: 1rem; text-align: center; }
    .scratch-workspace { grid-template-columns: 1fr; }
    .city-planning { grid-template-columns: 1fr; }
    .robot-world { grid-template-columns: 1fr; }
    .world-grid { grid-template-columns: repeat(8, 36px); }
    .robot-cell { width: 36px; height: 36px; }
    .evolution-timeline { flex-direction: column; }
    .evolution-arrow { transform: rotate(90deg); }
}