/* ========================================
   STYLES — Cisco Packet Tracer Tutorial
   ======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --pt-blue: #049fd9; --pt-blue-light: #00bceb; --pt-blue-glow: #049fd933;
    --bg-dark: #0d1117; --bg-card: #161b22; --border: #30363d;
    --text: #e6edf3; --text-muted: #8b949e;
    --c-keyword: #ff7b72; --c-string: #a5d6ff; --c-func: #d2a8ff;
    --c-number: #79c0ff; --c-tag: #7ee787; --c-attr: #ffa657;
    --c-punct: #8b949e; --c-comment: #6e7681; --c-builtin: #ffa657;
    --c-console: #ffa657; --c-prop: #79c0ff; --c-variable: #ffa198;
}
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', sans-serif; background: var(--bg-dark); color: var(--text); line-height: 1.7; overflow-x: hidden; }
body::before { content:''; position:fixed; inset:0; background: radial-gradient(ellipse 80% 50% at 50% -20%, #049fd90a, transparent), radial-gradient(ellipse 60% 40% at 80% 60%, #58a6ff08, transparent); pointer-events:none; z-index:0; }
body>* { position:relative; z-index:1; }
.container { max-width: 860px; margin: 0 auto; padding: 2rem 1.5rem 6rem; }

/* NAV */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; background:#0d1117dd; backdrop-filter:blur(16px); border-bottom:1px solid var(--border); padding:0.75rem 0; }
.nav-inner { max-width:860px; margin:0 auto; padding:0 1.5rem; display:flex; align-items:center; gap:1.5rem; }
.nav-logo { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:1.1rem; color:var(--pt-blue); text-decoration:none; white-space:nowrap; }
.nav-links { display:flex; gap:0.15rem; flex-wrap:wrap; }
.nav-links a { font-size:0.8rem; color:var(--text-muted); text-decoration:none; padding:0.3rem 0.65rem; border-radius:6px; transition:color .2s,background .2s; cursor:pointer; }
.nav-links a:hover { color:var(--pt-blue); background:var(--pt-blue-glow); }
.nav-links a.active { color:var(--pt-blue); background:var(--pt-blue-glow); font-weight:600; }

/* HERO */
.hero { padding:7rem 0 1rem; text-align:center; }
.hero-badge { display:inline-block; font-family:'Space Mono',monospace; font-size:0.75rem; color:#fff; background:var(--pt-blue); padding:0.25rem 1rem; border-radius:999px; font-weight:700; letter-spacing:0.05em; margin-bottom:1.5rem; }
.hero h1 { font-family:'Space Mono',monospace; font-size:clamp(2rem,5vw,3.2rem); font-weight:700; line-height:1.2; }
.hero h1 .highlight { color:var(--pt-blue); position:relative; }
.hero h1 .highlight::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:3px; background:var(--pt-blue); border-radius:2px; opacity:.5; }
.hero-sub { margin-top:1rem; font-size:1.1rem; color:var(--text-muted); max-width:560px; margin-left:auto; margin-right:auto; margin-bottom:1.5rem; }
.hero-sub code { font-family:'JetBrains Mono',monospace; background:var(--bg-card); padding:0.15em 0.45em; border-radius:4px; font-size:0.92em; color:var(--pt-blue); border:1px solid var(--border); }

/* SECTIONS */
.section { background:var(--bg-card); border:1px solid var(--border); border-radius:16px; padding:2.5rem 2rem; position:relative; overflow:hidden; margin-bottom:2rem; animation:fadeIn .4s ease both; }
.section.hidden { display:none; }
.section::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--pt-blue); opacity:.7; }
.section-number { font-family:'JetBrains Mono',monospace; font-size:0.7rem; font-weight:700; color:#fff; background:var(--pt-blue); display:inline-block; width:28px; height:28px; line-height:28px; text-align:center; border-radius:50%; margin-bottom:0.75rem; }
.section h2 { font-family:'Space Mono',monospace; font-size:1.5rem; margin-bottom:0.5rem; }
.section p,.section li { color:var(--text-muted); margin-bottom:0.75rem; }
.section ul { padding-left:1.3rem; margin-bottom:1rem; }
.section li { margin-bottom:0.35rem; }
.section li code,.section p code { font-family:'JetBrains Mono',monospace; background:#0d1117; padding:0.12em 0.4em; border-radius:4px; font-size:0.88em; color:var(--pt-blue); border:1px solid var(--border); }
.section h3 { font-family:'Space Mono',monospace; font-size:1.15rem; margin-bottom:0.75rem; }
.section a { color:var(--pt-blue); text-decoration:none; }
.section a:hover { text-decoration:underline; }

/* CONCEPT BOX */
.concept-box { margin:1.25rem 0; padding:1rem 1.25rem; background:#0d2040; border-left:3px solid var(--pt-blue); border-radius:0 10px 10px 0; font-size:0.95rem; }
.concept-box code { font-family:'JetBrains Mono',monospace; background:#0d1117; padding:0.12em 0.4em; border-radius:4px; font-size:0.88em; color:var(--pt-blue); border:1px solid var(--border); }

/* CODE BLOCKS */
.code-block { margin:1.25rem 0; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
.code-header { display:flex; justify-content:space-between; align-items:center; background:#1c2128; padding:0.5rem 1rem; font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--text-muted); border-bottom:1px solid var(--border); }
.code-header .dots { display:flex; gap:6px; }
.code-header .dots span { width:10px; height:10px; border-radius:50%; background:var(--border); }
.code-header .dots span:nth-child(1) { background:#ff5f57; }
.code-header .dots span:nth-child(2) { background:#febc2e; }
.code-header .dots span:nth-child(3) { background:#28c840; }
pre { margin:0; padding:1.25rem; background:var(--bg-card); overflow-x:auto; font-size:0.85rem; line-height:1.65; }
code { font-family:'JetBrains Mono',monospace; }
.kw{color:var(--c-keyword);font-weight:600} .str{color:var(--c-string)} .fn{color:var(--c-func)} .num{color:var(--c-number)} .cm{color:var(--c-comment);font-style:italic} .tg{color:var(--c-tag)} .at{color:var(--c-attr)} .op{color:var(--c-punct)} .bi{color:var(--c-builtin)} .cn{color:var(--c-console)} .pr{color:var(--c-prop)} .vr{color:var(--c-variable)}

/* DEVICE GRID */
.device-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:1rem; margin:1rem 0; }
.device-card { background:var(--bg-dark); border:1px solid var(--border); border-radius:12px; padding:1.25rem; text-align:center; transition:border-color .2s,transform .2s; }
.device-card:hover { border-color:var(--pt-blue); transform:translateY(-2px); }
.device-icon { font-family:'Space Mono',monospace; font-size:1.5rem; font-weight:700; width:52px; height:52px; display:flex; align-items:center; justify-content:center; border:2px solid; border-radius:10px; margin:0 auto 0.75rem; }
.device-name { font-family:'Space Mono',monospace; font-size:0.82rem; font-weight:600; margin-bottom:0.4rem; }

/* ===== CLI MODE DIAGRAM ===== */
.cli-mode-diagram { display:flex; align-items:center; justify-content:center; gap:0.5rem; margin:1.5rem 0; flex-wrap:wrap; }
.cli-node { display:flex; flex-direction:column; align-items:center; gap:0.4rem; padding:1rem 1.25rem; border:2px solid var(--border); border-radius:12px; min-width:130px; transition:all .3s; font-family:'JetBrains Mono',monospace; }
.cli-node .cli-node-name { font-size:0.65rem; text-transform:uppercase; letter-spacing:.1em; color:var(--text-muted); }
.cli-node .cli-node-prompt { font-size:0.8rem; color:var(--text-muted); transition:color .3s; }
.cli-node .cli-node-icon { font-size:1.2rem; font-weight:700; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:2px solid var(--border); }
.cli-node.active .cli-node-prompt { color:var(--text); }
.cli-node.active { border-color:var(--pt-blue); background:#049fd910; }
.cli-node.active .cli-node-icon { border-color:var(--pt-blue); }
.arrow-bullet { font-size:1.1rem; color:var(--text-muted); }
.cli-arrow { font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--text-muted); transition:color .3s; white-space:nowrap; }
.cli-arrow.active { color:var(--pt-blue); }

/* ===== TERMINAL DEMO ===== */
.demo-zone { margin:1.5rem 0; padding:1.5rem; border:2px dashed var(--border); border-radius:12px; text-align:center; padding:1.5rem; }
.demo-label { font-family:'Space Mono',monospace; font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; }

.terminal-demo { background:var(--bg-dark); border:1px solid var(--border); border-radius:10px; overflow:hidden; text-align:left; }
.terminal-header { display:flex; align-items:center; background:#1c2128; padding:0.5rem 0.75rem; border-bottom:1px solid var(--border); }
.terminal-header .dots { display:flex; gap:5px; margin-right:0.75rem; }
.terminal-header .dots span { width:10px; height:10px; border-radius:50%; background:var(--border); }
.terminal-header .dots span:nth-child(1) { background:#ff5f57; }
.terminal-header .dots span:nth-child(2) { background:#febc2e; }
.terminal-header .dots span:nth-child(3) { background:#28c840; }
.terminal-title { font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--text-muted); flex-grow:1; text-align:center; }
.terminal-spacer { width:60px; }
.terminal-reset-btn { font-family:'JetBrains Mono',monospace; font-size:0.68rem; padding:0.25rem 0.6rem; border-radius:4px; border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; transition:all .2s; }
.terminal-reset-btn:hover { border-color:#f85149; color:#f85149; }
.terminal-body { padding:0.75rem; min-height:180px; max-height:320px; overflow-y:auto; font-family:'JetBrains Mono',monospace; font-size:0.82rem; }
.terminal-output { white-space:pre-wrap; color:var(--text-muted); line-height:1.55; margin-bottom:0.5rem; }
.terminal-output .t-cmd { color:var(--text); }
.terminal-output .t-out { color:#3fb950; }
.terminal-output .t-err { color:#f85149; }
.terminal-output .t-info { color:var(--pt-blue); }
.terminal-input-row { display:flex; align-items:center; gap:0; }
.terminal-prompt { color:var(--pt-blue); font-family:'JetBrains Mono',monospace; font-size:0.82rem; white-space:nowrap; }
.terminal-input { flex:1; background:transparent; border:none; color:var(--text); font-family:'JetBrains Mono',monospace; font-size:0.82rem; outline:none; caret-color:var(--pt-blue); }
.terminal-help { font-family:'JetBrains Mono',monospace; font-size:0.68rem; color:var(--text-muted); padding:0.4rem 0.75rem; background:#0d1117; border-top:1px solid var(--border); }
.terminal-help code { color:var(--pt-blue); background:none; border:none; padding:0; font-size:inherit; }

/* ===== SWITCH PORT GRID ===== */
.switch-port-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(60px,1fr)); gap:6px; margin:1rem 0; }
.port-cell { display:flex; flex-direction:column; align-items:center; padding:0.5rem 0.25rem; border:1px solid var(--border); border-radius:8px; cursor:pointer; transition:all .2s; font-family:'JetBrains Mono',monospace; font-size:0.65rem; }
.port-cell:hover { border-color:var(--pt-blue); transform:scale(1.05); }
.port-cell .port-num { font-weight:700; color:var(--text); }
.port-cell .port-vlan { font-size:0.58rem; color:var(--text-muted); margin-top:2px; }
.port-cell.vlan-10 { border-color:#049fd9; background:#049fd910; }
.port-cell.vlan-20 { border-color:#3fb950; background:#3fb95010; }
.port-cell.vlan-99 { border-color:#d2a8ff; background:#d2a8ff10; }
.port-cell.vlan-trunk { border-color:#ffa657; background:#ffa65710; }

.vlan-legend { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:0.5rem; }
.vlan-legend-item { display:flex; align-items:center; gap:0.4rem; font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--text-muted); }
.vlan-color { display:inline-block; width:14px; height:14px; border-radius:4px; border:1px solid var(--border); }

/* ===== RIP TOPOLOGY ===== */
.rip-topology { display:flex; align-items:flex-start; justify-content:center; gap:0.5rem; margin:1rem 0; flex-wrap:wrap; }
.rip-router { background:var(--bg-dark); border:2px solid var(--border); border-radius:12px; padding:1rem; min-width:180px; transition:border-color .3s; }
.rip-router.active { border-color:var(--pt-blue); }
.rip-router-icon { font-family:'Space Mono',monospace; font-size:1.8rem; font-weight:700; color:var(--pt-blue); width:48px; height:48px; display:flex; align-items:center; justify-content:center; border:2px solid var(--pt-blue); border-radius:10px; margin:0 auto 0.5rem; background:#049fd910; }
.rip-router-name { font-family:'Space Mono',monospace; font-size:0.85rem; font-weight:700; color:var(--text); text-align:center; margin-bottom:0.25rem; }
.rip-ifaces { display:flex; flex-direction:column; gap:2px; margin:0.5rem 0; }
.rip-iface { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:var(--text-muted); }
.rip-route-list { display:flex; flex-direction:column; gap:2px; margin-top:0.5rem; }
.rip-route-item { font-family:'JetBrains Mono',monospace; font-size:0.68rem; padding:0.2rem 0.5rem; border-radius:4px; background:var(--bg-card); color:var(--text-muted); display:block; }
.rip-route-item.c { border-left:2px solid #3fb950; }
.rip-route-item.rip { border-left:2px solid var(--pt-blue); color:var(--pt-blue); animation:fadeIn .5s ease; }

.rip-link { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:100px; padding-top:1.5rem; position:relative; height:160px; }
.rip-link-label { font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--text-muted); margin-bottom:0.5rem; }
.rip-packets { position:absolute; bottom:20px; left:0; right:0; height:4px; background:var(--border); border-radius:2px; overflow:visible; }
.rip-pkt { position:absolute; top:-3px; left:0; width:10px; height:10px; border-radius:50%; background:var(--pt-blue); opacity:0; }
.rip-packets.active .rip-pkt { animation:ripPacket 2s ease-in-out infinite; }
@keyframes ripPacket { 0%{left:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(100% - 10px);opacity:0} }

.rip-result { margin-top:1rem; padding:1rem; background:var(--bg-dark); border-radius:8px; border:1px solid var(--border); font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--text-muted); white-space:pre-wrap; text-align:left; min-height:3em; }

/* ===== DHCP TOPOLOGY ===== */
.dhcp-topology { display:flex; align-items:center; justify-content:center; gap:0.5rem; margin:1.5rem 0; flex-wrap:wrap; }
.dhcp-device { display:flex; flex-direction:column; align-items:center; gap:0.3rem; padding:1rem; border:2px solid var(--border); border-radius:12px; min-width:100px; transition:border-color .3s; }
.dhcp-device.active { border-color:var(--pt-blue); }
.dev-icon { font-family:'Space Mono',monospace; font-size:1.3rem; font-weight:700; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:2px solid var(--border); border-radius:8px; }
.dev-icon.active { border-color:var(--pt-blue); background:#049fd915; color:var(--pt-blue); }
.dev-label { font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--text-muted); }
.dev-ip { font-family:'JetBrains Mono',monospace; font-size:0.68rem; color:var(--pt-blue); text-align:center; min-height:1em; }
.dhcp-link-label { font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--text-muted); min-width:60px; text-align:center; }
.dhcp-step-text { font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--pt-blue); }

/* DHCP Animation bars */
.dhcp-animation-bar { display:flex; flex-direction:column; gap:0.5rem; margin:1rem 0; }
.dhcp-packet { display:flex; align-items:center; gap:0.75rem; }
.pkt-label { font-family:'JetBrains Mono',monospace; font-size:0.68rem; color:var(--text-muted); min-width:70px; text-align:right; }
.pkt-progress { flex:1; height:6px; background:var(--border); border-radius:3px; overflow:visible; position:relative; }
.pkt-fill { height:100%; width:0%; border-radius:3px; transition:width .8s ease; background:var(--pt-blue); opacity:.4; }
.pkt-fill.filled { width:100%; opacity:1; }
.dhcp-packet.done .pkt-label { color:var(--pt-blue); font-weight:700; }

/* ===== QUIZ ===== */
.mini-quiz { padding:1.25rem; border:1px dashed var(--border); border-radius:12px; background:#0d1117; }
.mini-quiz h3 { font-family:'Space Mono',monospace; font-size:0.9rem; color:var(--pt-blue); margin-bottom:0.75rem; }
.quiz-options-row { display:flex; flex-direction:column; gap:0.35rem; }
.quiz-option-mini { display:flex; align-items:center; gap:0.5rem; padding:0.45rem 0.65rem; border-radius:6px; border:1px solid var(--border); background:var(--bg-card); cursor:pointer; transition:all .2s; font-size:0.82rem; }
.quiz-option-mini:hover { border-color:var(--pt-blue); }
.quiz-option-mini input[type="radio"] { accent-color:var(--pt-blue); flex-shrink:0; }
.quiz-option-mini.selected { border-color:var(--pt-blue); background:#049fd915; }
.quiz-option-mini.correct { border-color:#3fb950; background:#3fb95015; }
.quiz-option-mini.correct::after { content:'\2713'; color:#3fb950; font-weight:700; margin-left:auto; }
.quiz-option-mini.wrong { border-color:#f85149; background:#f8514915; }
.quiz-option-mini.wrong::after { content:'\2717'; color:#f85149; font-weight:700; margin-left:auto; }
.quiz-option-mini.disabled { pointer-events:none; }
.mini-quiz-feedback { margin-top:0.5rem; padding:0.5rem 0.75rem; border-radius:6px; font-family:'JetBrains Mono',monospace; font-size:0.78rem; }
.mini-quiz-feedback.show { display:block!important; }
.mini-quiz-feedback.ok { background:#3fb95015; color:#3fb950; border:1px solid #3fb95044; }
.mini-quiz-feedback.fail { background:#f8514915; color:#f85149; border:1px solid #f8514944; }

/* Pagination */
.pagination { display:flex; align-items:center; padding:2rem 0; gap:1.25rem; }
.pagination .page-btn { display:flex; align-items:center; justify-content:center; gap:0.5rem; font-family:'JetBrains Mono',monospace; font-size:0.85rem; padding:0.6rem 1.5rem; border-radius:8px; border:1px solid var(--border); background:#1c2128; color:var(--text-muted); cursor:pointer; transition:all .2s; min-width:180px; }
.pagination .page-btn:not(.disabled):hover { border-color:var(--pt-blue); color:var(--pt-blue); background:var(--pt-blue-glow); }
.pagination .page-btn.disabled { opacity:.3; pointer-events:none; }
.pagination .page-btn .arrow { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; border:1px solid var(--border); background:#0d1117; transition:all .2s; }
.pagination .page-btn:not(.disabled):hover .arrow { border-color:var(--pt-blue); color:var(--pt-blue); }
.page-center { display:flex; align-items:center; gap:1rem; width:100%; justify-content:center; flex-direction:column; }
.page-center label { font-family:'JetBrains Mono',monospace; font-size:0.75rem; color:var(--text-muted); }
.page-center input { width:52px; text-align:center; font-family:'JetBrains Mono',monospace; font-size:1rem; font-weight:700; background:var(--bg-dark); border:1px solid var(--border); border-radius:6px; color:var(--pt-blue); padding:0.4rem; outline:none; transition:border-color .2s; -moz-appearance:textfield; }
.page-center input:focus { border-color:var(--pt-blue); }
.page-center input::-webkit-outer-spin-button,.page-center input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.page-dots { display:flex; gap:0.6rem; }
.page-dots .dot { width:14px; height:14px; border-radius:50%; background:var(--border); transition:all .3s; cursor:pointer; }
.page-dots .dot:hover { border-color:var(--pt-blue); box-shadow:0 0 6px #049fd944; }
.page-dots .dot.active { background:var(--pt-blue); box-shadow:0 0 10px #049fd966; transform:scale(1.3); }

/* Demo row and button */
.demo-row { display:flex; gap:1rem; flex-wrap:wrap; margin:1rem 0; justify-content:space-evenly; }
.demo-btn { font-family:'JetBrains Mono',monospace; font-size:0.82rem; padding:0.6rem 1.2rem; border-radius:8px; border:1px solid var(--border); background:#1c2128; color:var(--text); cursor:pointer; transition:all .2s; }
.demo-btn:hover { border-color:var(--pt-blue); background:var(--pt-blue-glow); }

/* Quiz final */
.quiz-section { margin-top:1rem; }
.quiz-question { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.5rem; margin-bottom:1.25rem; animation:fadeIn .3s ease both; }
.quiz-question .q-number { font-family:'Space Mono',monospace; font-size:0.7rem; font-weight:700; color:#fff; background:var(--pt-blue); display:inline-block; width:22px; height:22px; line-height:22px; text-align:center; border-radius:50%; margin-right:0.5rem; }
.quiz-question .q-text { font-weight:600; margin-bottom:0.75rem; font-size:0.95rem; }
.quiz-question code { font-family:'JetBrains Mono',monospace; background:var(--bg-card); padding:0.12em 0.4em; border-radius:4px; font-size:0.88em; color:var(--pt-blue); border:1px solid var(--border); }
.quiz-options { display:flex; flex-direction:column; gap:0.4rem; }
.quiz-option { display:flex; align-items:center; gap:0.6rem; padding:0.6rem 0.8rem; border-radius:8px; border:1px solid var(--border); background:var(--bg-dark); cursor:pointer; transition:all .2s; font-size:0.88rem; }
.quiz-option:hover { border-color:var(--pt-blue); }
.quiz-option input[type="radio"] { accent-color:var(--pt-blue); flex-shrink:0; }
.quiz-option.selected { border-color:var(--pt-blue); background:#049fd915; }
.quiz-option.correct { border-color:#3fb950; background:#3fb95015; }
.quiz-option.correct::after { content:'\2713'; color:#3fb950; font-weight:700; margin-left:auto; }
.quiz-option.wrong { border-color:#f85149; background:#f8514915; }
.quiz-option.wrong::after { content:'\2717'; color:#f85149; font-weight:700; margin-left:auto; }
.quiz-option.disabled { pointer-events:none; }
.quiz-score { text-align:center; padding:1.5rem; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; margin-top:1rem; display:none; }
.quiz-score.visible { display:block; animation:fadeIn .4s ease; }
.quiz-score .score-value { font-family:'Space Mono',monospace; font-size:2rem; font-weight:700; color:var(--pt-blue); }
.quiz-score .score-label { color:var(--text-muted); font-size:0.9rem; margin-top:0.25rem; }
#btn-submit-quiz { font-family:'JetBrains Mono',monospace; font-size:0.9rem; font-weight:600; padding:0.75rem 2rem; border-radius:8px; border:none; background:var(--pt-blue); color:#fff; cursor:pointer; transition:all .2s; margin-top:1rem; }
#btn-submit-quiz:hover { background:var(--pt-blue-light); transform:scale(1.03); }

/* FOOTER */
.footer { text-align:center; padding:3rem 0 1rem; color:var(--text-muted); font-size:0.85rem; }
.footer a { color:var(--pt-blue); text-decoration:none; }
.footer a:hover { text-decoration:underline; }

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

/* RESPONSIVE */
@media(max-width:640px) {
    .nav-inner { flex-direction:column; gap:0.5rem; }
    .section { padding:1.75rem 1.25rem; }
    pre { padding:1rem; font-size:0.78rem; }
    .pagination { flex-direction:column; align-items:stretch; }
    .device-grid { grid-template-columns:1fr; }
    .cli-mode-diagram { flex-direction:column; }
    .rip-topology { flex-direction:column; align-items:center; }
    .rip-link { height:60px; }
}