/* ========================================
   STYLES — Tutorial Matematica (Analisi)
   Tema viola: derivate, flessi, max/min
   ======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
    --mt-purple: #a78bfa; --mt-purple-light: #c4b5fd; --mt-purple-glow: #a78bfa33;
    --mt-pink: #f472b6; --mt-green: #34d399; --mt-amber: #fbbf24;
    --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-comment: #6e7681; --c-attr: #ffa657;
}
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%, #a78bfa14, transparent), radial-gradient(ellipse 60% 40% at 80% 60%, #f472b60a, transparent); pointer-events:none; z-index:0; }
body>* { position:relative; z-index:1; }
.container { max-width: 880px; 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:880px; 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(--mt-purple); 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(--mt-purple); background:var(--mt-purple-glow); }
.nav-links a.active { color:var(--mt-purple); background:var(--mt-purple-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(--mt-purple); 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(--mt-purple); position:relative; }
.hero h1 .highlight::after { content:''; position:absolute; bottom:-2px; left:0; right:0; height:3px; background:var(--mt-purple); border-radius:2px; opacity:.5; }
.hero-sub { margin-top:1rem; font-size:1.1rem; color:var(--text-muted); max-width:600px; margin-left:auto; margin-right:auto; margin-bottom:1.5rem; }
.hero-anim-wrap { max-width:720px; margin:0 auto; padding:0 1rem; }
.hero-anim { display:block; width:100%; height:auto; }

/* CONCEPT GRID (intro f / f' / f'') */
.concept-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin:1.25rem 0; }
.concept-card { background:var(--bg-dark); border:1px solid var(--border); border-radius:12px; padding:1.1rem; text-align:center; transition:transform .25s,border-color .25s; position:relative; overflow:hidden; }
.concept-card:hover { transform:translateY(-3px); border-color:var(--mt-purple); }
.concept-card .concept-icon { font-family:'Space Mono',monospace; font-size:1.8rem; font-weight:700; color:var(--mt-purple); width:56px; height:56px; border-radius:50%; border:2px solid var(--mt-purple); background:var(--mt-purple-glow); display:flex; align-items:center; justify-content:center; margin:0 auto 0.6rem; }
.concept-card.concept-green .concept-icon { color:var(--mt-green); border-color:var(--mt-green); background:#34d39915; }
.concept-card.concept-amber .concept-icon { color:var(--mt-amber); border-color:var(--mt-amber); background:#fbbf2415; }
.concept-card .concept-title { font-family:'Space Mono',monospace; font-size:0.95rem; color:var(--text); margin-bottom:0.35rem; }
.concept-card .concept-desc { font-size:0.82rem; color:var(--text-muted); line-height:1.5; }

/* FUNCTION CARDS */
.fn-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0.75rem; margin:1rem 0; }
.fn-card { background:var(--bg-dark); border:1px solid var(--border); border-radius:10px; padding:0.85rem 1rem; transition:all .2s; }
.fn-card:hover { border-color:var(--mt-purple); }
.fn-card .fn-eq { font-size:0.95rem; color:var(--text); margin-bottom:0.4rem; }
.fn-card .fn-tag { font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--mt-purple); text-transform:uppercase; letter-spacing:0.06em; }

/* TWO COLUMN */
.two-col { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin:1rem 0; }
.two-col .theorem, .two-col .definition { margin:0; }

/* ANIMATION WRAPPER */
.anim-wrap { margin:1.25rem 0; padding:1rem; background:var(--bg-dark); border:1px solid var(--border); border-radius:12px; }
.anim-caption { font-family:'JetBrains Mono',monospace; font-size:0.78rem; color:var(--text-muted); text-align:center; margin-bottom:0.6rem; }
.anim-caption em, .anim-caption strong { color:var(--mt-purple); }
.anim-svg { width:100%; height:auto; display:block; background:#0a0d12; border-radius:8px; }
.anim-controls { display:flex; flex-wrap:wrap; gap:0.6rem; align-items:center; justify-content:center; margin-top:0.7rem; }
.anim-slider { font-family:'JetBrains Mono',monospace; font-size:0.78rem; color:var(--text-muted); display:flex; align-items:center; gap:0.5rem; min-width:220px; flex:1; max-width:360px; }
.anim-slider input[type=range] { flex:1; accent-color:var(--mt-purple); }

/* FLEX TYPES MINI-GRID */
.flex-types { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0.85rem; margin:1rem 0; }
.flex-type { background:var(--bg-dark); border:1px solid var(--border); border-radius:10px; padding:0.85rem; text-align:center; }
.flex-mini { width:100%; height:70px; display:block; margin-bottom:0.5rem; }
.flex-type .ft-name { font-family:'Space Mono',monospace; font-size:0.88rem; color:var(--mt-purple); margin-bottom:0.3rem; }
.flex-type .ft-desc { font-size:0.78rem; color:var(--text-muted); line-height:1.5; }

/* steps compact variant */
.steps.compact li { padding:0.3rem 0 0.3rem 2.6rem; }

/* 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:linear-gradient(90deg,var(--mt-purple),var(--mt-pink)); opacity:.8; }
.section-number { font-family:'JetBrains Mono',monospace; font-size:0.7rem; font-weight:700; color:#fff; background:var(--mt-purple); 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, .section ol { 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(--mt-purple); border:1px solid var(--border); }
.section h3 { font-family:'Space Mono',monospace; font-size:1.15rem; margin:1.5rem 0 0.75rem; color:var(--text); }
.section h4 { font-family:'Space Mono',monospace; font-size:0.95rem; margin:1rem 0 0.5rem; color:var(--mt-purple-light); }
.section a { color:var(--mt-purple); text-decoration:none; }
.section a:hover { text-decoration:underline; }
.section strong { color:var(--text); }

/* THEOREM BOX */
.theorem { margin:1.25rem 0; padding:1.1rem 1.3rem; background:linear-gradient(135deg,#1a1530,#141828); border-left:3px solid var(--mt-purple); border-radius:0 12px 12px 0; }
.theorem-name { font-family:'Space Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--mt-purple); font-weight:700; margin-bottom:0.5rem; }
.theorem-statement { color:var(--text); font-size:0.95rem; line-height:1.65; }
.theorem-statement em { color:var(--mt-purple-light); font-style:normal; font-weight:600; }

/* DEFINITION BOX */
.definition { margin:1.25rem 0; padding:1rem 1.25rem; background:#0d2030; border-left:3px solid var(--mt-green); border-radius:0 10px 10px 0; }
.definition .def-title { font-family:'Space Mono',monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--mt-green); font-weight:700; margin-bottom:0.4rem; }
.definition p { color:var(--text); margin-bottom:0; }

/* WARNING / TIP */
.tip { margin:1.25rem 0; padding:0.9rem 1.2rem; background:#2a1f0a; border-left:3px solid var(--mt-amber); border-radius:0 10px 10px 0; font-size:0.9rem; color:#e8d9b0; }
.tip strong { color:var(--mt-amber); }

/* FORMULA / CODE BLOCKS */
.formula-block { margin:1.25rem 0; padding:1.4rem 1.2rem; background:var(--bg-dark); border:1px solid var(--border); border-radius:12px; text-align:center; overflow-x:auto; }
.formula-block .formula-label { font-family:'JetBrains Mono',monospace; font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:0.6rem; }

.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%; }
.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} .num{color:var(--c-number)} .cm{color:var(--c-comment);font-style:italic} .fn{color:var(--c-func)} .vr{color:var(--c-attr)}

/* INTERACTIVE PLOTTER */
.plot-wrap { margin:1.25rem 0; padding:1rem; background:var(--bg-dark); border:1px solid var(--border); border-radius:12px; }
.plot-controls { display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:0.75rem; align-items:center; justify-content:center; }
.plot-btn { font-family:'JetBrains Mono',monospace; font-size:0.78rem; padding:0.45rem 0.9rem; border-radius:8px; border:1px solid var(--border); background:#1c2128; color:var(--text-muted); cursor:pointer; transition:all .2s; }
.plot-btn:hover { border-color:var(--mt-purple); color:var(--mt-purple); background:var(--mt-purple-glow); }
.plot-btn.active { border-color:var(--mt-purple); color:var(--mt-purple); background:var(--mt-purple-glow); font-weight:600; }
.plot-canvas-wrap { position:relative; display:flex; justify-content:center; }
.plot-canvas-wrap canvas { background:#0a0d12; border-radius:8px; max-width:100%; height:auto; display:block; }
.plot-legend { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-top:0.75rem; font-family:'JetBrains Mono',monospace; font-size:0.72rem; color:var(--text-muted); }
.plot-legend .lg { display:inline-flex; align-items:center; gap:0.4rem; }
.plot-legend .sw { display:inline-block; width:18px; height:3px; border-radius:2px; }
.plot-info { margin-top:0.75rem; padding:0.75rem; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; font-family:'JetBrains Mono',monospace; font-size:0.78rem; color:var(--text-muted); text-align:center; }
.plot-info .hl { color:var(--mt-purple); font-weight:600; }
.plot-info .hl-pink { color:var(--mt-pink); font-weight:600; }
.plot-info .hl-green { color:var(--mt-green); font-weight:600; }

/* SIGN TABLE (tabella dei segni) */
.sign-table { margin:1.25rem 0; overflow-x:auto; }
.sign-table table { width:100%; border-collapse:collapse; font-family:'JetBrains Mono',monospace; font-size:0.82rem; min-width:420px; }
.sign-table th, .sign-table td { padding:0.55rem 0.75rem; border:1px solid var(--border); text-align:center; color:var(--text-muted); }
.sign-table th { background:#1c2128; color:var(--text); font-size:0.78rem; }
.sign-table td.pos { color:var(--mt-green); font-weight:700; }
.sign-table td.neg { color:#f472b6; font-weight:700; }
.sign-table td.zero { color:var(--mt-amber); font-weight:700; }
.sign-table td.label { color:var(--mt-purple); text-align:left; padding-left:1rem; }

/* STEP LIST */
.steps { counter-reset: step; padding-left:0; list-style:none; margin:1rem 0; }
.steps li { counter-increment: step; position:relative; padding:0.5rem 0 0.5rem 2.6rem; color:var(--text-muted); }
.steps li::before { content: counter(step); position:absolute; left:0; top:0.5rem; width:1.8rem; height:1.8rem; line-height:1.8rem; text-align:center; border-radius:50%; background:var(--mt-purple-glow); color:var(--mt-purple); font-family:'JetBrains Mono',monospace; font-weight:700; font-size:0.78rem; border:1px solid var(--mt-purple); }

/* 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.95rem; color:var(--mt-purple); margin-bottom:0.75rem; }
.quiz-options-row { display:flex; flex-direction:column; gap:0.4rem; }
.quiz-option-mini { display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0.7rem; border-radius:6px; border:1px solid var(--border); background:var(--bg-card); cursor:pointer; transition:all .2s; font-size:0.85rem; }
.quiz-option-mini:hover { border-color:var(--mt-purple); }
.quiz-option-mini input[type="radio"] { accent-color:var(--mt-purple); flex-shrink:0; }
.quiz-option-mini.selected { border-color:var(--mt-purple); background:var(--mt-purple-glow); }
.quiz-option-mini.correct { border-color:var(--mt-green); background:#34d39915; }
.quiz-option-mini.correct::after { content:'\2713'; color:var(--mt-green); 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.6rem; padding:0.5rem 0.75rem; border-radius:6px; font-family:'JetBrains Mono',monospace; font-size:0.78rem; display:none; }
.mini-quiz-feedback.show { display:block; }
.mini-quiz-feedback.ok { background:#34d39915; color:var(--mt-green); border:1px solid #34d39944; }
.mini-quiz-feedback.fail { background:#f8514915; color:#f85149; border:1px solid #f8514944; }

/* FINAL QUIZ */
.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(--mt-purple); 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.85rem; font-size:0.95rem; display:inline; }
.quiz-options { display:flex; flex-direction:column; gap:0.4rem; margin-top:0.75rem; }
.quiz-option { display:flex; align-items:center; gap:0.6rem; padding:0.65rem 0.85rem; border-radius:8px; border:1px solid var(--border); background:var(--bg-dark); cursor:pointer; transition:all .2s; font-size:0.9rem; }
.quiz-option:hover { border-color:var(--mt-purple); }
.quiz-option input[type="radio"] { accent-color:var(--mt-purple); flex-shrink:0; }
.quiz-option.selected { border-color:var(--mt-purple); background:var(--mt-purple-glow); }
.quiz-option.correct { border-color:var(--mt-green); background:#34d39915; }
.quiz-option.correct::after { content:'\2713'; color:var(--mt-green); 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(--mt-purple); }
.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(--mt-purple); color:#fff; cursor:pointer; transition:all .2s; margin-top:1rem; }
#btn-submit-quiz:hover { background:var(--mt-purple-light); transform:scale(1.03); }

/* 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:170px; }
.pagination .page-btn:not(.disabled):hover { border-color:var(--mt-purple); color:var(--mt-purple); background:var(--mt-purple-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(--mt-purple); color:var(--mt-purple); }
.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(--mt-purple); padding:0.4rem; outline:none; transition:border-color .2s; -moz-appearance:textfield; }
.page-center input:focus { border-color:var(--mt-purple); }
.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 { background:var(--mt-purple-light); }
.page-dots .dot.active { background:var(--mt-purple); box-shadow:0 0 10px var(--mt-purple-glow); transform:scale(1.3); }

/* FOOTER */
.footer { text-align:center; padding:3rem 0 1rem; color:var(--text-muted); font-size:0.85rem; }
.footer a { color:var(--mt-purple); 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; }
    .plot-controls { gap:0.3rem; }
    .plot-btn { font-size:0.72rem; padding:0.35rem 0.6rem; }
}