:root {
  --bg:#0d0500;--bg2:#110800;--bg3:#180b00;--card:#130800;--card2:#190c00;
  --border:rgba(255,120,30,0.10);--text:#f0ece6;--text2:#9a8060;
  --accent:#ff6b1a;--accent2:#ffaa33;
  --math:#ffffff;--phys:#FF8A1F;--chem:#57B3FE;--bio:#4ade80;--gold:#FFD700;
  --nav-h:72px;
}
/* ── MODE JOUR ── */
.light-mode{--bg:#ff8c00;--bg2:#fff8ee;--bg3:#fff2d6;--card:#ffffff;--card2:#f4f4fe;--border:rgba(120,60,0,0.2);--text:#1a0800;--text2:#6b2c00;--accent:#c44d00;--accent2:#e08000;--math:#4f46e5;}
.light-mode html,.light-mode{background:#f0f0f4;}
.light-mode #header{background:rgba(240,240,244,.97);}
.light-mode #nav{background:rgba(240,240,244,.96);}
.light-mode #modal-box{background:var(--card);}
.light-mode .hero h1{color:var(--text)!important;-webkit-text-fill-color:var(--text)!important;}
.light-mode .stats-hero h1{color:var(--text)!important;-webkit-text-fill-color:var(--text)!important;}
.light-mode #logo-text{color:var(--text);}
.light-mode #logo-svg rect{fill:#1c1c1c;}
.light-mode #auth-logo rect{fill:#1c1c1c;}
/* Textes blancs → noirs en mode jour */
.light-mode .sim-card-title{color:var(--text)!important;-webkit-text-fill-color:var(--text)!important;}
.light-mode .hero p{color:var(--text2)!important;}
.light-mode #xp-popup{background:rgba(240,240,244,.98)!important;color:var(--text);}
.light-mode #xp-popup-bar-wrap{background:rgba(0,0,0,.1)!important;}
.light-mode #xp-popup-lvl-name,.light-mode #xp-popup-xp-line,.light-mode #xp-popup-next-line{color:var(--text2)!important;}
.light-mode #level-ring{color:var(--text)!important;}
.light-mode .lesson-card .card-progress{background:rgba(0,0,0,.1)!important;}
.light-mode .progress-bar-bg{background:rgba(0,0,0,.1)!important;}
.light-mode .badge-tooltip .bt-bar-bg{background:rgba(0,0,0,.1)!important;}
.light-mode .badge-tooltip{box-shadow:0 6px 24px rgba(0,0,0,.15);}
.light-mode .auth-input::placeholder{color:rgba(0,0,0,.3)!important;}
.light-mode .lecon-formula{background:rgba(85,105,255,.07);color:var(--text);}
.light-mode .lecon-tip{background:rgba(16,185,129,.06);}
.light-mode .formula-box{background:rgba(85,105,255,.06);color:var(--text);}
.light-mode .quiz-option{background:var(--card2);color:var(--text);}
.light-mode .modal-close{background:var(--card2);color:var(--text);}
.light-mode .sim-card{background:var(--card);}
.light-mode .sim-card-header{background:rgba(0,0,0,.04)!important;}
.light-mode .sim-card-sub{color:var(--text2)!important;}
.light-mode .spc-title{color:var(--text)!important;}
.light-mode .sim-preview-card{border-color:rgba(0,0,0,.12);}
.light-mode .streak-card{background:linear-gradient(135deg,rgba(245,158,11,.07),rgba(255,138,31,.05));}
.light-mode .xp-chip{background:rgba(180,130,0,.12)!important;color:#a07000!important;}
/* ── LIGHT MODE : boutons opaques & lisibilité ── */
.light-mode .sim-action{background:#f4f4fe;color:#1a0800;border-color:rgba(0,0,0,.2);}
.light-mode .sim-action:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.light-mode .sim-card[data-cat='math'] .sim-action{color:#4f46e5;border-color:rgba(79,70,229,.38);}
.light-mode .sim-card[data-cat='math'] .sim-action.primary{background:linear-gradient(135deg,#4f46e5,#7c73f0);border-color:#4f46e5;color:#fff;}
.light-mode .sim-card[data-cat='math'] .sim-action:hover:not(.primary){background:rgba(79,70,229,.12);border-color:#4f46e5;color:#4f46e5;}
.light-mode .sim-card[data-cat='phys'] .sim-action{color:#b84500;border-color:rgba(200,100,0,.4);}
.light-mode .sim-card[data-cat='phys'] .sim-action.primary{background:linear-gradient(135deg,#c45200,#ff8a1f);border-color:#c45200;color:#fff;}
.light-mode .sim-card[data-cat='chem'] .sim-action{color:#1a4fcf;border-color:rgba(87,179,254,.45);}
.light-mode .sim-card[data-cat='chem'] .sim-action.primary{background:linear-gradient(135deg,#2563eb,#57b3fe);border-color:#2563eb;color:#fff;}
.light-mode .sim-card[data-cat='bio'] .sim-action{color:#15803d;border-color:rgba(74,222,128,.45);}
.light-mode .sim-card[data-cat='bio'] .sim-action.primary{background:linear-gradient(135deg,#16a34a,#4ade80);border-color:#16a34a;color:#fff;}
.light-mode .sim-card button:not(.sim-action){background:#f4f4fe;color:#1a0800;border-color:rgba(0,0,0,.2);}
.light-mode .sim-card[data-cat='math'] button:not(.sim-action){color:#4f46e5;border-color:rgba(79,70,229,.38);}
.light-mode .sim-card[data-cat='phys'] button:not(.sim-action){color:#b84500;border-color:rgba(200,100,0,.4);}
.light-mode .sim-card[data-cat='chem'] button:not(.sim-action){color:#1a4fcf;border-color:rgba(87,179,254,.45);}
.light-mode .sim-card[data-cat='bio'] button:not(.sim-action){color:#15803d;border-color:rgba(74,222,128,.45);}
.light-mode .lesson-card.math{border-color:rgba(79,70,229,.22)!important;border-left-color:#4f46e5!important;}
.light-mode .sim-preview-card[data-cat="math"]{border-color:rgba(79,70,229,.22);background:linear-gradient(135deg,rgba(79,70,229,.05),#fff);}
.light-mode .sim-preview-card[data-cat="math"]:hover,.light-mode .sim-preview-card.spc-active[data-cat="math"]{border-color:#4f46e5!important;box-shadow:0 0 22px rgba(79,70,229,.2)!important;}
.light-mode #nav{background:rgba(255,255,255,.95)!important;border-top-color:rgba(0,0,0,.09)!important;}
.light-mode .nav-btn{color:#5a3010;}
.light-mode .sim-card-header{background:rgba(225,225,255,.5)!important;}
.light-mode .filter-btn{background:#fff;border-color:rgba(0,0,0,.14);color:#3a1800;}
.light-mode .quiz-option{background:#fff!important;border-color:rgba(0,0,0,.13)!important;}
.light-mode .quiz-option:hover{border-color:var(--accent)!important;}
.light-mode .lecon-formula{background:rgba(79,70,229,.07)!important;border-color:rgba(79,70,229,.2)!important;color:#1a0800!important;}
.light-mode .lecon-tip{background:rgba(0,0,0,.04);}
.light-mode .lecon-example{background:rgba(0,0,0,.03);}
.light-mode .stat-box{background:#fff;}
.light-mode #modal-box .theory-block{background:#f8f8ff;border-color:rgba(0,0,0,.09);}
.light-mode #toast{background:#fff;border-color:rgba(0,0,0,.1);color:var(--text);}
.light-mode .form-input,.light-mode .form-select{background:#fff;border-color:rgba(0,0,0,.16);color:var(--text);}
.light-mode .lecon-chapter:not(.open):hover{box-shadow:0 6px 18px rgba(0,0,0,.12);}
.light-mode .badge-tooltip{background:#fff;border-color:rgba(0,0,0,.1);}
.light-mode .toggle-row{background:#fff;border-color:rgba(0,0,0,.12);}
.light-mode .atelier-q{background:#fff;border-color:rgba(0,0,0,.1);}
.light-mode .atelier-q-header:hover{background:rgba(0,0,0,.02);}
/* Textes blancs dans modales à fond clair */
.light-mode #atom-box{background:#fff!important;}
.light-mode #atom-btn-bohr,.light-mode #atom-btn-schrodinger{color:var(--text)!important;border-color:rgba(0,0,0,.2)!important;background:rgba(0,0,0,.05)!important;}
/* --sim-cat-color math en jour */
.light-mode .sim-card[data-cat='math']{--sim-cat-color:#4f46e5;}
/* XP badge, streak, stats-hero */
.light-mode #xp-badge{background:rgba(255,255,255,.4);border-color:rgba(0,0,0,.12);color:var(--text);}
.light-mode .stats-hero{background:rgba(255,255,255,.15);}
.light-mode .streak-card{background:rgba(255,255,255,.3)!important;border-color:rgba(200,100,0,.3)!important;}
/* ── Cartes bibliothèque : dégradé couleur matière, sans contour ── */
.light-mode .lesson-card{background:rgba(255,255,255,.5)!important;border:none!important;box-shadow:0 2px 10px rgba(0,0,0,.1)!important;}
/* Math = blanc, texte noir */
.light-mode .lesson-card.math{background:#ffffff!important;border:1px solid rgba(79,70,229,.25)!important;}
.light-mode .lesson-card.math .card-title,.light-mode .lesson-card.math .cat-label{color:#1a1a2e!important;-webkit-text-fill-color:#1a1a2e!important;}
.light-mode .lesson-card.math .card-desc,.light-mode .lesson-card.math .diff-chip{color:rgba(30,20,80,.7)!important;}
.light-mode .lesson-card.math .xp-chip{background:rgba(79,70,229,.12)!important;color:#4f46e5!important;}
.light-mode .lesson-card.math .card-progress{background:rgba(79,70,229,.15)!important;}
/* Physique = dégradé orange, texte blanc */
.light-mode .lesson-card.phys{background:linear-gradient(135deg,#fb923c 0%,#c2440c 100%)!important;border:none!important;}
.light-mode .lesson-card.phys .card-title,.light-mode .lesson-card.phys .cat-label{color:#fff!important;-webkit-text-fill-color:#fff!important;}
.light-mode .lesson-card.phys .card-desc,.light-mode .lesson-card.phys .diff-chip{color:rgba(255,255,255,.88)!important;}
.light-mode .lesson-card.phys .xp-chip{background:rgba(255,255,255,.22)!important;color:#fff!important;}
.light-mode .lesson-card.phys .card-progress{background:rgba(255,255,255,.28)!important;}
/* Chimie = dégradé bleu, texte blanc */
.light-mode .lesson-card.chem{background:linear-gradient(135deg,#60a5fa 0%,#2563eb 100%)!important;border:none!important;}
.light-mode .lesson-card.chem .card-title,.light-mode .lesson-card.chem .cat-label{color:#fff!important;-webkit-text-fill-color:#fff!important;}
.light-mode .lesson-card.chem .card-desc,.light-mode .lesson-card.chem .diff-chip{color:rgba(255,255,255,.88)!important;}
.light-mode .lesson-card.chem .xp-chip{background:rgba(255,255,255,.22)!important;color:#fff!important;}
.light-mode .lesson-card.chem .card-progress{background:rgba(255,255,255,.28)!important;}
/* Bio = dégradé vert, texte blanc */
.light-mode .lesson-card.bio{background:linear-gradient(135deg,#4ade80 0%,#16a34a 100%)!important;border:none!important;}
.light-mode .lesson-card.bio .card-title,.light-mode .lesson-card.bio .cat-label{color:#fff!important;-webkit-text-fill-color:#fff!important;}
.light-mode .lesson-card.bio .card-desc,.light-mode .lesson-card.bio .diff-chip{color:rgba(255,255,255,.88)!important;}
.light-mode .lesson-card.bio .xp-chip{background:rgba(255,255,255,.22)!important;color:#fff!important;}
.light-mode .lesson-card.bio .card-progress{background:rgba(255,255,255,.28)!important;}
/* All/gen = dégradé accent, texte blanc */
.light-mode .lesson-card.all,.light-mode .lesson-card.gen{background:linear-gradient(135deg,#fb923c 0%,#c44d00 100%)!important;border:none!important;}
.light-mode .lesson-card.all .card-title,.light-mode .lesson-card.all .cat-label,.light-mode .lesson-card.gen .card-title,.light-mode .lesson-card.gen .cat-label{color:#fff!important;-webkit-text-fill-color:#fff!important;}
.light-mode .lesson-card.all .card-desc,.light-mode .lesson-card.all .diff-chip,.light-mode .lesson-card.gen .card-desc,.light-mode .lesson-card.gen .diff-chip{color:rgba(255,255,255,.88)!important;}
.light-mode .lesson-card.all .xp-chip,.light-mode .lesson-card.gen .xp-chip{background:rgba(255,255,255,.22)!important;color:#fff!important;}
.light-mode .lesson-card:hover{box-shadow:0 10px 26px rgba(0,0,0,.2)!important;}
/* Sim-preview-cards : dégradé couleur matière, sans contour */
.light-mode .sim-preview-card{background:rgba(255,255,255,.45)!important;border:none!important;}
.light-mode .sim-preview-card[data-cat="math"]{background:#ffffff!important;border:1px solid rgba(79,70,229,.25)!important;}
.light-mode .sim-preview-card[data-cat="math"] .spc-title,.light-mode .sim-preview-card[data-cat="math"] .spc-sub{color:#1a1a2e!important;}
.light-mode .sim-preview-card[data-cat="phys"]{background:linear-gradient(135deg,#fb923c 0%,#c2440c 100%)!important;border:none!important;}
.light-mode .sim-preview-card[data-cat="phys"] .spc-title,.light-mode .sim-preview-card[data-cat="phys"] .spc-sub{color:#fff!important;}
.light-mode .sim-preview-card[data-cat="chem"]{background:linear-gradient(135deg,#60a5fa 0%,#2563eb 100%)!important;border:none!important;}
.light-mode .sim-preview-card[data-cat="chem"] .spc-title,.light-mode .sim-preview-card[data-cat="chem"] .spc-sub{color:#fff!important;}
.light-mode .sim-preview-card[data-cat="bio"]{background:linear-gradient(135deg,#4ade80 0%,#16a34a 100%)!important;border:none!important;}
.light-mode .sim-preview-card[data-cat="bio"] .spc-title,.light-mode .sim-preview-card[data-cat="bio"] .spc-sub{color:#fff!important;}
.light-mode .sim-preview-card[data-cat="all"]{background:linear-gradient(135deg,#fb923c 0%,#c44d00 100%)!important;border:none!important;}
.light-mode .sim-preview-card[data-cat="all"] .spc-title,.light-mode .sim-preview-card[data-cat="all"] .spc-sub{color:#fff!important;}
.light-mode .sim-preview-card[data-cat="math"]:hover,.light-mode .sim-preview-card.spc-active[data-cat="math"]{background:rgba(79,70,229,.07)!important;border-color:#4f46e5!important;box-shadow:0 0 18px rgba(79,70,229,.25)!important;}
.light-mode .sim-preview-card[data-cat="phys"]:hover,.light-mode .sim-preview-card.spc-active[data-cat="phys"]{background:linear-gradient(135deg,#f97316 0%,#9a3308 100%)!important;box-shadow:0 0 18px rgba(249,115,22,.4)!important;}
.light-mode .sim-preview-card[data-cat="chem"]:hover,.light-mode .sim-preview-card.spc-active[data-cat="chem"]{background:linear-gradient(135deg,#3b82f6 0%,#1e3a8a 100%)!important;box-shadow:0 0 18px rgba(59,130,246,.4)!important;}
.light-mode .sim-preview-card[data-cat="bio"]:hover,.light-mode .sim-preview-card.spc-active[data-cat="bio"]{background:linear-gradient(135deg,#22c55e 0%,#14532d 100%)!important;box-shadow:0 0 18px rgba(34,197,94,.4)!important;}
/* ── Lecon-chapter cards : dégradé couleur matière, sans contour ── */
.light-mode .lecon-chapter{border:none!important;box-shadow:0 2px 10px rgba(0,0,0,.1);}
.light-mode .lecon-chapter[data-cat="math"]{background:#ffffff!important;border:1px solid rgba(79,70,229,.25)!important;}
.light-mode .lecon-chapter[data-cat="math"] .lc-title,.light-mode .lecon-chapter[data-cat="math"] .lc-chevron{color:#1a1a2e!important;}
.light-mode .lecon-chapter[data-cat="phys"]{background:linear-gradient(135deg,#fb923c 0%,#c2440c 100%)!important;}
.light-mode .lecon-chapter[data-cat="phys"] .lc-title,.light-mode .lecon-chapter[data-cat="phys"] .lc-chevron{color:#fff!important;}
.light-mode .lecon-chapter[data-cat="chem"]{background:linear-gradient(135deg,#60a5fa 0%,#2563eb 100%)!important;}
.light-mode .lecon-chapter[data-cat="chem"] .lc-title,.light-mode .lecon-chapter[data-cat="chem"] .lc-chevron{color:#fff!important;}
.light-mode .lecon-chapter[data-cat="bio"]{background:linear-gradient(135deg,#4ade80 0%,#16a34a 100%)!important;}
.light-mode .lecon-chapter[data-cat="bio"] .lc-title,.light-mode .lecon-chapter[data-cat="bio"] .lc-chevron{color:#fff!important;}
.light-mode .lecon-chapter[data-cat] .lecon-chapter-body{background:rgba(255,255,255,.9);border-radius:0 0 14px 14px;padding:0 16px 16px;}
.light-mode .lecon-chapter[data-cat] .lecon-concept{background:rgba(255,255,255,.75);}
/* ── Sim-card en-tête : dégradé couleur matière, sans contour ── */
.light-mode .sim-card{border:none!important;box-shadow:0 2px 14px rgba(0,0,0,.1)!important;}
.light-mode .sim-card[data-cat="math"] .sim-card-header{background:#f5f4ff!important;border-bottom:1px solid rgba(79,70,229,.2)!important;}
.light-mode .sim-card[data-cat="math"] .sim-card-title{color:#1a1a2e!important;-webkit-text-fill-color:#1a1a2e!important;}
.light-mode .sim-card[data-cat="math"] .sim-card-sub{color:rgba(30,20,80,.6)!important;}
.light-mode .sim-card[data-cat="phys"] .sim-card-header{background:linear-gradient(135deg,#fb923c 0%,#c2440c 100%)!important;}
.light-mode .sim-card[data-cat="phys"] .sim-card-title{color:#fff!important;-webkit-text-fill-color:#fff!important;}
.light-mode .sim-card[data-cat="phys"] .sim-card-sub{color:rgba(255,255,255,.7)!important;}
.light-mode .sim-card[data-cat="chem"] .sim-card-header{background:linear-gradient(135deg,#60a5fa 0%,#2563eb 100%)!important;}
.light-mode .sim-card[data-cat="chem"] .sim-card-title{color:#fff!important;-webkit-text-fill-color:#fff!important;}
.light-mode .sim-card[data-cat="chem"] .sim-card-sub{color:rgba(255,255,255,.7)!important;}
.light-mode .sim-card[data-cat="bio"] .sim-card-header{background:linear-gradient(135deg,#4ade80 0%,#16a34a 100%)!important;}
.light-mode .sim-card[data-cat="bio"] .sim-card-title{color:#fff!important;-webkit-text-fill-color:#fff!important;}
.light-mode .sim-card[data-cat="bio"] .sim-card-sub{color:rgba(255,255,255,.7)!important;}
/* ── BADGE TOOLTIP ── */
.badge-item{position:relative;cursor:pointer;transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;}
.badge-item:hover{transform:scale(1.1);z-index:3;}
.badge-tooltip{display:none;position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:10px 12px;min-width:180px;max-width:220px;z-index:500;box-shadow:0 6px 24px rgba(0,0,0,.4);pointer-events:none;}
.badge-tooltip .bt-title{font-size:11px;font-weight:700;color:var(--text);margin-bottom:4px;}
.badge-tooltip .bt-desc{font-size:10px;color:var(--text2);line-height:1.5;margin-bottom:6px;}
.badge-tooltip .bt-prog{font-size:10px;color:var(--gold);font-weight:600;}
.badge-tooltip .bt-bar-bg{height:4px;background:rgba(255,255,255,.1);border-radius:2px;margin-top:4px;overflow:hidden;}
.badge-tooltip .bt-bar{height:100%;background:var(--gold);border-radius:2px;transition:width .3s;}
.badge-item:hover .badge-tooltip,.badge-item.tt-open .badge-tooltip{display:block;}
/* ── PAGE LEÇONS (SYNTHÈSE) ── */
.lecon-section{padding:0 16px 16px;}
.lecon-chapter{background:var(--card);border-radius:16px;border:1px solid var(--border);margin-bottom:12px;overflow:hidden;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s;}
.lecon-chapter:not(.open):hover{transform:scale(1.025);box-shadow:0 8px 24px rgba(0,0,0,.32);}
.lecon-chapter-header{padding:14px 16px;display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;}
.lecon-chapter-header .lc-icon{font-size:24px;}
.lecon-chapter-header .lc-title{font-size:14px;font-weight:700;flex:1;}
.lecon-chapter-header .lc-chevron{font-size:12px;color:var(--text2);transition:transform .35s cubic-bezier(.25,.46,.45,.94);}
.lecon-chapter.open .lc-chevron{transform:rotate(180deg);}
.lecon-chapter-body{display:none;padding:0 16px 16px;}
.lecon-chapter.open .lecon-chapter-body{display:block;animation:leconReveal .35s cubic-bezier(.25,.46,.45,.94);}
@keyframes leconReveal{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.lecon-concept{margin-bottom:14px;padding:12px 14px;background:var(--card2);border-radius:12px;border-left:3px solid var(--accent);}
.lecon-concept h4{font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.lecon-concept p{font-size:13px;color:var(--text);line-height:1.6;}
.lecon-formula{background:rgba(85,105,255,.1);border:1px solid rgba(85,105,255,.25);border-radius:10px;padding:12px 16px;margin:10px 0;font-family:'Michroma','Courier New',monospace;font-size:15px;color:var(--accent2);overflow-x:auto;word-break:break-word;white-space:pre-wrap;line-height:1.8;letter-spacing:.5px;text-align:center;}
/* ── Couleur par catégorie dans les leçons ── */
[data-cat="math"] .lecon-concept{border-left-color:var(--math);}[data-cat="math"] .lecon-concept h4{color:var(--math);}[data-cat="math"] .lecon-tip{border-left-color:var(--math);}[data-cat="math"] .lecon-example{border-left-color:var(--math);}
[data-cat="phys"] .lecon-concept{border-left-color:var(--phys);}[data-cat="phys"] .lecon-concept h4{color:var(--phys);}[data-cat="phys"] .lecon-tip{border-left-color:var(--phys);}[data-cat="phys"] .lecon-example{border-left-color:var(--phys);}
[data-cat="chem"] .lecon-concept{border-left-color:var(--chem);}[data-cat="chem"] .lecon-concept h4{color:var(--chem);}[data-cat="chem"] .lecon-tip{border-left-color:var(--chem);}[data-cat="chem"] .lecon-example{border-left-color:var(--chem);}
[data-cat="bio"] .lecon-concept{border-left-color:var(--bio);}[data-cat="bio"] .lecon-concept h4{color:var(--bio);}[data-cat="bio"] .lecon-tip{border-left-color:var(--bio);}[data-cat="bio"] .lecon-example{border-left-color:var(--bio);}
.lecon-tip{background:rgba(74,222,128,.08);border-left:3px solid var(--bio);border-radius:0 10px 10px 0;padding:8px 12px;margin:8px 0;font-size:12px;color:var(--text2);line-height:1.5;}
.lecon-table-wrap{overflow-x:auto;margin:10px 0;}
.lecon-table{width:100%;border-collapse:collapse;font-size:11px;}
.lecon-table th{background:rgba(85,105,255,.2);color:var(--accent);padding:5px 8px;text-align:center;font-weight:700;border:1px solid rgba(85,105,255,.2);}
.lecon-table td{padding:5px 8px;text-align:center;border:1px solid var(--border);color:var(--text);}
.lecon-table tr:last-child td{background:rgba(251,191,36,.08);font-weight:700;color:var(--gold);}
.lecon-example{background:rgba(0,207,255,.06);border-left:3px solid var(--accent2);border-radius:0 10px 10px 0;padding:10px 12px;margin:8px 0;font-size:12px;color:var(--text);line-height:1.7;}
.lecon-section-title{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.8px;margin:16px 0 6px;padding-bottom:6px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;}
.calc-key{display:inline-block;background:var(--card2);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:10px;font-weight:600;color:var(--text);font-family:'Courier New',monospace;}
.calc-key-hl{display:inline-block;background:var(--accent);border-radius:4px;padding:1px 5px;font-size:10px;font-weight:700;color:#fff;font-family:'Courier New',monospace;}
.calc-key-ac{display:inline-block;background:#f59e0b;border-radius:4px;padding:1px 5px;font-size:10px;font-weight:700;color:#fff;font-family:'Courier New',monospace;}
.calc-key-ti{display:inline-block;background:#60a5fa;border-radius:4px;padding:1px 5px;font-size:10px;font-weight:700;color:#fff;font-family:'Courier New',monospace;}
.calc-model-btn{flex:1;min-width:120px;padding:7px 8px;border-radius:8px;border:1.5px solid var(--border);background:var(--card2);color:var(--text2);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;text-align:center;line-height:1.4;}
.calc-model-btn.active-calc{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important;}
@font-face{font-family:'Michroma';src:url('Michroma-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
#logo-text,#authTitle,.hero h1,.sec-title,.profile-name,.stats-hero h1,.sim-card-title{font-family:'Michroma','Segoe UI',system-ui,sans-serif!important;font-weight:400!important;}
*{margin:0;padding:0;box-sizing:border-box;}
html{background:#050200;}html,body{height:100%;overflow:hidden;font-family:'Segoe UI',system-ui,sans-serif;}
body{background:linear-gradient(180deg,#080300 0%,#0d0600 55%,#1a0a00 100%);color:var(--text);position:relative;transition:background .6s;}
.light-mode{background:linear-gradient(180deg,#ff6600 0%,#ff9500 35%,#ffcc00 70%,#ffe566 100%)!important;}
#starCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;}
#app{position:fixed;inset:0;display:flex;flex-direction:column;z-index:1;}
#header{flex-shrink:0;padding:16px 20px 14px;background:linear-gradient(180deg,rgba(13,5,0,0.97) 0%,rgba(13,5,0,0) 100%);display:flex;align-items:center;justify-content:space-between;}
.light-mode #header{background:linear-gradient(180deg,rgba(255,90,0,0.97) 0%,rgba(255,90,0,0) 100%);}
.light-mode #logo-text{color:#fff;text-shadow:0 0 16px rgba(255,200,80,0.8);}
#logo{display:flex;align-items:center;gap:10px;cursor:pointer;}
#logo svg{transform-origin:center center;display:inline-block;filter:drop-shadow(0 0 4px rgba(255,255,255,.75));}
#logo:hover svg{animation:starSpin 1.6s cubic-bezier(.16,.86,.3,1) both,starGlow 1.6s ease-in-out both;}
#logo.logo-clicked svg{animation:starSpin 2s cubic-bezier(.16,.86,.3,1) both,starGlow 2s ease-in-out both;}
#logo-text{font-family:'Michroma','Segoe UI',system-ui,sans-serif!important;font-weight:400!important;font-size:20px;letter-spacing:2px;color:#fff;text-shadow:0 0 18px rgba(255,150,50,0.7);}
#logo-sub{font-size:9px;letter-spacing:4px;color:var(--text2);text-transform:uppercase;margin-top:-3px;}
#theme-switch-btn{width:86px;height:40px;border-radius:20px;border:none;cursor:pointer;position:relative;padding:0;overflow:hidden;flex-shrink:0;background:linear-gradient(90deg,#0d0500,#1a0800);box-shadow:0 0 0 1.5px rgba(255,255,255,0.15),0 2px 14px rgba(0,0,0,.6);transition:background .45s,box-shadow .45s;}
#theme-switch-btn.day{background:linear-gradient(90deg,#ff8800,#ffcc00);box-shadow:0 0 0 1.5px rgba(255,200,80,.7),0 2px 16px rgba(255,150,0,.55);}
#tsw-sun{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;display:flex;align-items:center;justify-content:center;}
#tsw-moon{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:22px;height:22px;display:flex;align-items:center;justify-content:center;}
#tsw-knob{position:absolute;top:4px;left:4px;width:32px;height:32px;border-radius:16px;background:rgba(255,255,255,.12);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.25);transition:left .35s cubic-bezier(.34,1.56,.64,1);box-shadow:0 1px 6px rgba(0,0,0,.4);}
#theme-switch-btn.day #tsw-knob{left:50px;background:rgba(255,255,255,.85);box-shadow:0 1px 8px rgba(255,120,0,.5);}
@media(max-width:600px){#theme-switch-btn{width:52px;height:26px;border-radius:13px;}#tsw-sun{left:3px;width:16px;height:16px;}#tsw-moon{right:4px;width:14px;height:14px;}#tsw-knob{width:20px;height:20px;border-radius:10px;}#theme-switch-btn.day #tsw-knob{left:30px;}}
#header-right{display:flex;align-items:center;gap:10px;}
#xp-badge{display:flex;align-items:center;gap:6px;background:rgba(85,105,255,.15);border:1px solid rgba(85,105,255,.3);border-radius:20px;padding:5px 12px;font-size:13px;font-weight:600;}
#level-ring{width:48px;height:48px;border-radius:50%;background:conic-gradient(var(--phys) 0%,transparent 0%);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;border:2.5px solid var(--phys);box-shadow:0 0 16px rgba(255,138,31,.5);position:relative;overflow:visible;}
@media(max-width:600px){#header{padding:max(14px,env(safe-area-inset-top,14px)) 14px 12px;}#logo svg{width:32px;height:26px;}#logo-text{font-size:16px;}#header-right{gap:8px;}#xp-badge{padding:5px 10px;font-size:12px;gap:4px;white-space:nowrap;}#level-ring{width:38px;height:38px;font-size:12px;}}
#xp-popup{position:fixed;top:60px;right:10px;z-index:200;background:rgba(8,16,30,.95);backdrop-filter:blur(20px);border:1px solid rgba(255,138,31,.4);border-radius:18px;padding:18px 20px;min-width:190px;box-shadow:0 8px 40px rgba(0,0,0,.7),0 0 0 1px rgba(255,107,26,.1);transition:opacity .2s,transform .2s;}#xp-popup.xp-popup-hidden{opacity:0;pointer-events:none;transform:translateY(-8px);}#xp-popup-lvl-name{font-size:11px;letter-spacing:2px;color:var(--text2);text-transform:uppercase;margin-bottom:10px;}#xp-popup-badge{width:56px;height:56px;border-radius:50%;background:conic-gradient(var(--phys) 0%,rgba(255,255,255,.06) 0%);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;border:2.5px solid var(--phys);box-shadow:0 0 16px rgba(255,138,31,.5);margin:0 auto 12px;position:relative;overflow:visible;}#xp-popup-xp-line{text-align:center;font-size:22px;font-weight:700;color:var(--text);margin-bottom:10px;}#xp-popup-bar-wrap{width:100%;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-bottom:8px;}#xp-popup-bar{height:100%;background:linear-gradient(90deg,var(--phys),var(--accent2));border-radius:3px;transition:width .4s;}#xp-popup-next-line{text-align:center;font-size:11px;color:var(--text2);}#pages{flex:1;overflow:hidden;position:relative;}
.page{position:absolute;inset:0;overflow-y:auto;padding:0 0 calc(var(--nav-h) + 8px);display:none;animation:fadeIn .3s ease;}
.page.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
#nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);background:rgba(13,5,0,.92);backdrop-filter:blur(20px);border-top:1px solid var(--border);display:flex;justify-content:space-around;align-items:center;z-index:100;padding:0 8px 8px;}
.light-mode #nav{background:rgba(240,244,255,.92);}
.nav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:var(--text2);cursor:pointer;padding:8px 16px;border-radius:14px;transition:all .25s;flex:1;max-width:90px;}
.nav-btn.active{color:var(--accent);background:rgba(85,105,255,.12);}
.nav-btn svg{width:22px;height:22px;transition:transform .25s;}
.nav-btn.active svg{transform:scale(1.15);filter:drop-shadow(0 0 6px var(--accent));}
.nav-btn span{font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;}
.hero{padding:70px 20px 30px;text-align:center;position:relative;}
.hero h1{font-size:28px;line-height:1.2;margin-bottom:8px;color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;}
.hero p{color:var(--text2);font-size:14px;max-width:300px;margin:0 auto;}
.sec-header{padding:16px 20px 8px;display:flex;align-items:center;justify-content:space-between;}
.sec-title{font-size:18px;font-weight:700;}
.filter-row{display:flex;gap:8px;padding:4px 20px 12px;overflow-x:auto;scrollbar-width:none;}
.filter-row::-webkit-scrollbar{display:none;}
.filter-btn{flex-shrink:0;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid var(--border);background:var(--card);color:var(--text2);cursor:pointer;transition:all .2s;}
.filter-btn.active{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 0 12px rgba(85,105,255,.4);}
.filter-btn.math-f.active{background:var(--math);color:#000;border-color:transparent;box-shadow:0 0 12px rgba(255,255,255,.4);}
.filter-btn.phys-f.active{background:var(--phys);color:#000;border-color:transparent;box-shadow:0 0 12px rgba(255,138,31,.4);}
.filter-btn.chem-f.active{background:var(--chem);color:#000;border-color:transparent;box-shadow:0 0 12px rgba(87,179,254,.4);}
.filter-btn.bio-f.active{background:var(--bio);color:#000;border-color:transparent;box-shadow:0 0 12px rgba(74,222,128,.4);}
.lesson-card.gen{border-left:3px solid #f59e0b;}
.cards-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 16px;}
.lesson-card{border-radius:18px;padding:18px 16px;cursor:pointer;border:1px solid var(--border);background:var(--card);transition:all .3s;position:relative;overflow:hidden;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 2px 12px rgba(0,0,0,.3);}
.lesson-card::before{content:'';position:absolute;inset:0;border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.04) 0%,transparent 60%);pointer-events:none;}
.lesson-card{transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s!important;}
.lesson-card:hover{transform:scale(1.04);box-shadow:0 12px 32px rgba(0,0,0,.4);}
.lesson-card .cat-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;}
.lesson-card .cat-label{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.lesson-card .card-icon{font-size:36px;margin:8px 0;}
.lesson-card .card-title{font-size:14px;font-weight:700;line-height:1.3;}
.lesson-card .card-desc{font-size:11px;color:var(--text2);margin-top:4px;line-height:1.4;}
.lesson-card .card-progress{margin-top:10px;background:rgba(255,255,255,.08);border-radius:4px;height:4px;overflow:hidden;}
.lesson-card .card-progress-bar{height:100%;border-radius:4px;transition:width 1s ease;}
.lesson-card .card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px;}
.lesson-card .xp-chip{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;background:rgba(245,158,11,.15);color:var(--gold);}
.lesson-card .diff-chip{font-size:9px;padding:2px 7px;border-radius:10px;border:1px solid var(--border);color:var(--text2);}
.lesson-card.math{border-color:rgba(255,255,255,.18);border-left:3px solid var(--math);background:linear-gradient(135deg,rgba(255,255,255,.06),var(--card));}
.lesson-card.phys{border-color:rgba(255,138,31,.3);border-left:3px solid var(--phys);background:linear-gradient(135deg,rgba(255,138,31,.09),var(--card));}
.lesson-card.chem{border-color:rgba(87,179,254,.3);border-left:3px solid var(--chem);background:linear-gradient(135deg,rgba(87,179,254,.09),var(--card));}
.lesson-card.bio{border-color:rgba(74,222,128,.3);border-left:3px solid var(--bio);background:linear-gradient(135deg,rgba(74,222,128,.09),var(--card));}
.lesson-card.all{border-color:rgba(255,107,26,.28);border-left:3px solid var(--accent);background:linear-gradient(135deg,rgba(255,107,26,.08),var(--card));}
#modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);z-index:200;display:none;align-items:flex-end;justify-content:center;}
#modal-overlay.open{display:flex;animation:fadeIn .2s ease;}
#modal-box{background:var(--bg2);border-radius:24px 24px 0 0;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;padding:24px 20px 40px;border-top:1px solid var(--border);animation:slideUp .3s cubic-bezier(.22,.68,0,1.2);scrollbar-width:none;}
#modal-box::-webkit-scrollbar{display:none;}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes quizShake{0%,100%{transform:translateX(0)}10%{transform:translateX(-9px)}20%{transform:translateX(9px)}30%{transform:translateX(-7px)}40%{transform:translateX(7px)}50%{transform:translateX(-5px)}60%{transform:translateX(5px)}75%{transform:translateX(-3px)}90%{transform:translateX(3px)}}
@keyframes quizWrongFlash{0%,100%{background:transparent}45%{background:rgba(239,68,68,.18)}}
@keyframes quizCorrectNotif{0%{background:transparent;transform:translateY(-6px);opacity:.8}30%{background:rgba(16,185,129,.14);transform:translateY(2px);opacity:1}70%{background:rgba(16,185,129,.08);transform:translateY(0)}100%{background:transparent;transform:translateY(0)}}
@keyframes quizExitNext{0%{opacity:1;transform:rotate(0deg) translate(0,0)}50%{opacity:.8}100%{opacity:0;transform:rotate(22deg) translate(75%,18%)}}
@keyframes quizExitPrev{0%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(.86) rotate(-1.5deg)}}
@keyframes quizEnterNext{0%{opacity:0;transform:scale(.88) rotate(-4deg)}60%{transform:scale(1.02) rotate(.5deg)}100%{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes quizEnterPrev{0%{opacity:0;transform:rotate(22deg) translate(75%,18%)}50%{opacity:.8}100%{opacity:1;transform:rotate(0deg) translate(0,0)}}
@keyframes badgePop{0%{transform:scale(0) rotate(-15deg);opacity:0}60%{transform:scale(1.25) rotate(5deg)}80%{transform:scale(0.92)}100%{transform:scale(1) rotate(0deg);opacity:1}}
@keyframes badgePopIn{from{opacity:0;transform:scale(.88) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}
#badge-unlock-popup{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);animation:fadeIn .25s ease;}
#badge-unlock-popup .bup-box{position:relative;background:var(--bg2);border:1px solid var(--border);border-radius:24px;padding:36px 28px 28px;max-width:300px;width:calc(100% - 40px);text-align:center;box-shadow:0 24px 64px rgba(0,0,0,.85);animation:badgePopIn .4s cubic-bezier(.22,.68,0,1.2);}
#badge-unlock-popup .bup-close{position:absolute;top:12px;left:12px;width:28px;height:28px;min-width:28px;min-height:28px;flex-shrink:0;border-radius:50%;border:1px solid var(--border);background:var(--card2);color:var(--text2);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;line-height:1;}
@media(max-width:600px){#badge-unlock-popup{padding-top:max(70px,env(safe-area-inset-top,70px));align-items:flex-start;}}
#badge-unlock-popup .bup-icon{font-size:68px;display:block;animation:badgePop .6s cubic-bezier(.22,.68,0,1.4) .1s both;}.bup-portrait{width:110px;height:110px;object-fit:cover;object-position:50% 10%;image-rendering:pixelated;image-rendering:crisp-edges;display:block;margin:0 auto 8px;border-radius:8px;animation:badgePop .6s cubic-bezier(.22,.68,0,1.4) .1s both;}
#badge-unlock-popup .bup-label{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--gold);text-transform:uppercase;margin:10px 0 6px;}
#badge-unlock-popup .bup-name{font-size:18px;font-weight:800;color:var(--text);margin-bottom:8px;}
#badge-unlock-popup .bup-desc{font-size:13px;color:var(--text2);line-height:1.55;margin-bottom:20px;}
#badge-unlock-popup .bup-btn{width:100%;padding:12px;border-radius:12px;border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;}
#modal-box h2{font-size:20px;font-weight:800;margin-bottom:8px;}
#modal-box .theory-block{background:var(--card);border-radius:14px;padding:16px;margin-bottom:14px;border:1px solid var(--border);}
#modal-box .theory-block h3{font-size:14px;font-weight:700;margin-bottom:8px;}
#modal-box .theory-block p{font-size:13px;color:var(--text2);line-height:1.6;}
#modal-box .formula-box{background:rgba(85,105,255,.1);border:1px solid rgba(85,105,255,.3);border-radius:12px;padding:12px 16px;margin:10px 0;font-family:'Courier New',monospace;font-size:14px;text-align:center;color:var(--accent2);}
.modal-close{width:36px;height:36px;border-radius:50%;background:var(--card);border:1px solid var(--border);color:var(--text2);cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;float:right;margin-bottom:12px;}
.quiz-btn{width:100%;padding:14px;border-radius:14px;border:none;cursor:pointer;margin-top:8px;font-size:14px;font-weight:700;background:var(--quiz-col,var(--accent));color:var(--card);box-shadow:0 4px 20px color-mix(in srgb,var(--quiz-col,var(--accent)) 45%,transparent);transition:all .2s;}
.quiz-option{width:100%;padding:12px 16px;border-radius:12px;border:1.5px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;margin:5px 0;font-size:14px;font-weight:600;text-align:left;transition:all .2s;}
.quiz-option:hover{border-color:var(--quiz-col,var(--accent));background:color-mix(in srgb,var(--quiz-col,var(--accent)) 12%,transparent);}
.quiz-option.correct{border-color:var(--bio);background:rgba(16,185,129,.15);color:var(--bio);}
.quiz-option.wrong{border-color:#ef4444;background:rgba(239,68,68,.1);color:#ef4444;}
.quiz-result{text-align:center;padding:20px;}
.quiz-result .big-emoji{font-size:48px;margin-bottom:10px;display:block;}
#page-profil{padding-top:0;}
.profile-hero{padding:28px 20px 24px;text-align:center;}
@keyframes avatar-ripple{0%{box-shadow:0 0 0 1px rgba(255,138,31,.55);}75%{box-shadow:0 0 0 32px rgba(255,138,31,0);}100%{box-shadow:0 0 0 32px rgba(255,138,31,0);}}.avatar-ring{width:84px;height:84px;border-radius:50%;margin:0 auto 12px;background:linear-gradient(135deg,var(--phys),var(--accent2));display:flex;align-items:center;justify-content:center;font-size:36px;position:relative;box-shadow:0 0 30px rgba(255,138,31,.45);}.avatar-ring::before,.avatar-ring::after{content:'';position:absolute;inset:0;border-radius:50%;animation:avatar-ripple 2.2s ease-out infinite;pointer-events:none;}.avatar-ring::after{animation-delay:-1.1s;}.avatar-char-wrap{position:relative;width:180px;height:180px;margin:0 auto 16px;cursor:pointer;}.avatar-inner{position:relative;width:180px;height:180px;transition:transform .4s cubic-bezier(.4,0,.2,1);}.avatar-char-wrap.show-stats .avatar-inner{transform:translateX(-20px);}#avatar-aura{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;}.avatar-portrait{width:140px;height:140px;image-rendering:pixelated;image-rendering:crisp-edges;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;}.avatar-stat-panel{position:absolute;left:190px;top:50%;transform:translateY(-50%);width:0;max-height:200px;opacity:0;overflow:hidden;pointer-events:none;display:flex;flex-direction:column;justify-content:center;white-space:nowrap;transition:width .4s cubic-bezier(.4,0,.2,1),opacity .3s .15s ease;}.avatar-char-wrap.show-stats .avatar-stat-panel{width:min(220px,calc(100vw - 210px));opacity:1;pointer-events:auto;white-space:normal;}.asp-title{font-size:10px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;}.asp-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;}.asp-icon{font-size:13px;width:16px;text-align:center;flex-shrink:0;}.asp-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}.asp-meta{display:flex;justify-content:space-between;align-items:baseline;}.asp-name{font-size:10px;font-weight:600;color:var(--text1,#fff);}.asp-bar-bg{width:100%;height:7px;border-radius:4px;background:rgba(255,255,255,.22);}.asp-bar{height:100%;border-radius:4px;transition:width .6s ease;min-width:2px;}.asp-pct{font-size:10px;color:var(--text2);text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums;}
.profile-name{font-size:20px;font-weight:800;}
.profile-level{font-size:13px;color:var(--text2);margin-top:4px;}
.form-section{padding:20px;}
.form-group{margin-bottom:16px;}
.form-label{font-size:12px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;display:block;}
.form-input,.form-select{width:100%;padding:12px 16px;border-radius:12px;background:var(--card);border:1px solid var(--border);color:var(--text);font-size:14px;outline:none;transition:border-color .2s;appearance:none;}
.form-input:focus,.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(85,105,255,.15);}
.form-select option{background:var(--bg2);}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--card);border-radius:14px;border:1px solid var(--border);margin-bottom:16px;}
.save-btn{width:100%;padding:15px;border-radius:16px;border:none;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:15px;font-weight:700;box-shadow:0 4px 20px rgba(85,105,255,.4);transition:all .2s;margin-top:8px;}
.badges-section{padding:0 20px 20px;}
.badge-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
.badge-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;background:var(--card);border-radius:14px;border:1px solid var(--border);}
.badge-item .badge-icon{font-size:26px;display:flex;align-items:center;justify-content:center;}.badge-portrait{width:44px;height:44px;object-fit:cover;object-position:50% 12%;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:6px;display:block;}.badge-icon-img{width:32px;height:32px;image-rendering:pixelated;image-rendering:crisp-edges;display:block;}
.badge-item .badge-name{font-size:9px;color:var(--text2);text-align:center;font-weight:600;}
.badge-item.locked .badge-icon,.badge-item.locked .badge-name{opacity:.35;}
.badge-item.unlocked{border-color:var(--gold);box-shadow:0 0 10px rgba(245,158,11,.2);}
.sim-card{margin:0 16px 16px;border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--border);}
.sim-card-header{padding:16px 18px 12px;display:flex;align-items:center;justify-content:space-between;}
.sim-card-title{font-size:15px;color:#fff!important;-webkit-text-fill-color:#fff!important;}
.sim-card-sub{font-size:12px;color:var(--text2);margin-top:2px;}
.sim-canvas-wrap{background:#000;position:relative;display:flex;justify-content:center;}
.sim-canvas-wrap canvas{display:block;}
.sim-controls{padding:14px 18px;display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--border);}
.sim-controls > div{width:100%;}
.sim-slider-row{width:100%;display:flex;align-items:center;gap:10px;}
.sim-slider-row label{font-size:11px;color:var(--text2);width:100px;flex-shrink:0;}
.sim-slider-row input[type=range]{flex:1;accent-color:var(--accent);}
#ft-right-panel input[type=range]{cursor:pointer;}
#ft-right-panel input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;}
#ft-right-panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;margin-top:-7px;background:currentColor;}
#ft-right-panel .ft-slider-block{padding:10px 0 4px;border-top:1px solid var(--border);}
.sim-slider-row span{font-size:11px;color:var(--accent);width:40px;text-align:right;}
.sim-action{padding:8px 16px;border-radius:10px;border:1px solid var(--border);background:var(--card2);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;}
.sim-action:hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.sim-action.primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.sim-card[data-cat='math'] .sim-action{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.75);}
.sim-card[data-cat='math'] .sim-action.primary{background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(200,220,255,.12));border-color:rgba(255,255,255,.55);color:#fff;}
.sim-card[data-cat='math'] .sim-action:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.6);color:#fff;}
.sim-card[data-cat='phys'] .sim-action{border-color:rgba(255,138,31,.28);color:var(--phys);}
.sim-card[data-cat='phys'] .sim-action.primary{background:linear-gradient(135deg,rgba(255,138,31,.40),rgba(255,180,80,.20));border-color:var(--phys);color:#fff;}
.sim-card[data-cat='phys'] .sim-action:hover{background:rgba(255,138,31,.28);border-color:var(--phys);color:#fff;}
.sim-card[data-cat='chem'] .sim-action{border-color:rgba(87,179,254,.28);color:var(--chem);}
.sim-card[data-cat='chem'] .sim-action.primary{background:linear-gradient(135deg,rgba(87,179,254,.40),rgba(0,200,255,.20));border-color:var(--chem);color:#fff;}
.sim-card[data-cat='chem'] .sim-action:hover{background:rgba(87,179,254,.25);border-color:var(--chem);color:#fff;}
.sim-card[data-cat='bio'] .sim-action{border-color:rgba(74,222,128,.28);color:var(--bio);}
.sim-card[data-cat='bio'] .sim-action.primary{background:linear-gradient(135deg,rgba(74,222,128,.40),rgba(0,220,100,.20));border-color:var(--bio);color:#fff;}
.sim-card button:not(.sim-action){padding:8px 16px;border-radius:10px;border:1px solid var(--border);background:var(--card2);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;}
.sim-card button:not(.sim-action):hover{background:var(--accent);color:#fff;border-color:var(--accent);}
.sim-card[data-cat='phys'] button:not(.sim-action){border-color:rgba(255,138,31,.28);color:var(--phys);}
.sim-card[data-cat='chem'] button:not(.sim-action){border-color:rgba(87,179,254,.28);color:var(--chem);}
.sim-card[data-cat='bio'] button:not(.sim-action){border-color:rgba(74,222,128,.28);color:var(--bio);}
.sim-card[data-cat='math'] button:not(.sim-action){border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.75);}
.mx-vbtn{border-color:var(--vbtn-col)!important;color:var(--vbtn-col)!important;}
.mx-vbtn.primary{background:linear-gradient(135deg,rgba(var(--vbtn-glow),.40),rgba(var(--vbtn-glow2),.20))!important;border-color:var(--vbtn-col)!important;color:#fff!important;}
.mx-vbtn:hover:not(.primary){background:rgba(var(--vbtn-glow),.12)!important;}


.sim-card[data-cat='bio'] .sim-action:hover{background:rgba(74,222,128,.25);border-color:var(--bio);color:#fff;}
.sim-card[data-cat='math']{--sim-cat-color:rgba(255,255,255,.92);}
.sim-card[data-cat='phys']{--sim-cat-color:var(--phys);}
.sim-card[data-cat='chem']{--sim-cat-color:var(--chem);}
.sim-card[data-cat='bio']{--sim-cat-color:var(--bio);}
.sim-card input[type=range]{accent-color:var(--sim-cat-color);}
.stats-hero{background:linear-gradient(135deg,rgba(85,105,255,.15),rgba(0,212,255,.08));padding:70px 20px 20px;border-bottom:1px solid var(--border);}
.stats-grid-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:16px;}
.stat-box{background:var(--card);border-radius:14px;border:1px solid var(--border);padding:14px 10px;text-align:center;}
.stat-box .sv{font-size:22px;font-weight:800;}
.stat-box .sl{font-size:10px;color:var(--text2);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:2px;}
.stat-box{cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,border-color .15s;}
.stat-box:hover{transform:scale(1.06);z-index:2;}
.stat-box.stat-active{border-width:2px;}
#stat-graph-panel{background:var(--card);border-radius:16px;border:1px solid var(--border);padding:16px;margin-top:12px;}
.stat-graph-title{font-size:12px;font-weight:700;margin-bottom:10px;}
.sg-empty{text-align:center;font-size:11px;color:var(--text2);margin-top:6px;}
.sg-point-info{text-align:center;font-size:11px;font-weight:700;margin-top:6px;padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.06);display:none;}
.tf-btns{display:flex;gap:8px;margin-top:10px;justify-content:center;}
.tf-btn{padding:5px 14px;border-radius:20px;border:1px solid var(--border);background:var(--card2);color:var(--text2);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .18s;}
.tf-btn.tf-active{background:var(--accent);color:#fff;border-color:var(--accent);}
.ranking-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;margin-bottom:6px;background:var(--card2);border:1px solid var(--border);}
.ranking-row.rank-me{border-color:var(--accent);background:rgba(85,105,255,.12);}
.ranking-num{font-size:13px;font-weight:700;width:28px;text-align:center;flex-shrink:0;color:var(--text2);letter-spacing:-.3px;}.ranking-portrait{width:38px;height:38px;flex-shrink:0;object-fit:cover;object-position:50% 15%;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:6px;border:1px solid var(--border);}.ranking-portrait-ph{display:inline-block;width:38px;height:38px;flex-shrink:0;}
.ranking-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ranking-xp{font-size:12px;color:var(--text2);flex-shrink:0;}
.ranking-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
/* Bouton bascule invisible/visible — calqué sur #theme-switch-btn */
#invis-toggle-btn{width:86px;height:40px;border-radius:20px;border:none;cursor:pointer;position:relative;padding:0;overflow:hidden;flex-shrink:0;background:linear-gradient(90deg,#0d0500,#1a0800);box-shadow:0 0 0 1.5px rgba(255,255,255,.15),0 2px 14px rgba(0,0,0,.6);transition:background .45s,box-shadow .45s;}
#invis-toggle-btn.visible{background:linear-gradient(90deg,#ff8800,#ffcc00);box-shadow:0 0 0 1.5px rgba(255,200,80,.7),0 2px 16px rgba(255,150,0,.55);}
#itw-sun{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:26px;height:26px;display:flex;align-items:center;justify-content:center;}
#itw-moon{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:22px;height:22px;display:flex;align-items:center;justify-content:center;}
#itw-knob{position:absolute;top:4px;left:4px;width:32px;height:32px;border-radius:16px;background:rgba(255,255,255,.12);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.25);transition:left .35s cubic-bezier(.34,1.56,.64,1);box-shadow:0 1px 6px rgba(0,0,0,.4);}
#invis-toggle-btn.visible #itw-knob{left:50px;background:rgba(255,255,255,.85);box-shadow:0 1px 8px rgba(255,120,0,.5);}
/* Boutons en bas */
.btn-row-bottom{display:flex;gap:10px;padding:0 20px 32px;margin-top:8px;justify-content:center;}
#logout-btn{width:25vw;max-width:160px;flex-shrink:0;padding:13px 8px;border-radius:14px;border:1px solid rgba(239,68,68,.25);background:rgba(239,68,68,.08);color:#ef4444;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:all .2s;}
.feedback-btn{width:25vw;max-width:200px;flex-shrink:0;padding:13px 8px;border-radius:14px;border:1px solid rgba(85,105,255,.25);background:rgba(85,105,255,.08);color:var(--accent);font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .2s;font-family:inherit;}
@media(max-width:600px){.btn-row-bottom{padding:0 0 32px;gap:8px;}#logout-btn,.feedback-btn{width:calc(50% - 4px);max-width:none;}}
.feedback-popup-box{background:var(--bg2);border-radius:20px;padding:24px;width:100%;max-width:420px;border:1px solid var(--border);box-shadow:0 24px 64px rgba(0,0,0,.8);}
.roulette-card{background:var(--card2);border:2px solid var(--border);border-radius:14px;padding:14px 8px;font-size:22px;color:var(--text);font-weight:700;cursor:default;transition:all .15s;line-height:1.6;}
.roulette-card span{display:block;font-size:11px;font-weight:600;color:var(--text2);}
.roulette-card.rc-active{border-color:#FF8A1F;background:rgba(255,138,31,.2);box-shadow:0 0 16px rgba(255,138,31,.5);transform:scale(1.04);}
.roulette-card.rc-winner{border-color:#FF8A1F;background:rgba(255,138,31,.25);box-shadow:0 0 22px rgba(255,138,31,.7);transform:scale(1.06);}
.feedback-textarea{width:100%;min-height:110px;background:var(--card);border:1px solid var(--border);border-radius:12px;color:var(--text);font-size:13px;font-family:inherit;padding:10px 12px;resize:vertical;outline:none;margin-top:12px;}
.light-mode .feedback-textarea{background:#f8f8f8;}
.progress-section{padding:0 16px 16px;}
.progress-item{margin-bottom:14px;}
.progress-item .pi-header{display:flex;justify-content:space-between;margin-bottom:6px;}
.progress-item .pi-name{font-size:13px;font-weight:600;}
.progress-item .pi-pct{font-size:12px;color:var(--text2);}
.progress-bar-bg{background:rgba(255,255,255,.06);border-radius:6px;height:8px;overflow:hidden;}
.progress-bar-fill{height:100%;border-radius:6px;transition:width 1.5s cubic-bezier(.22,.68,0,1.2);}
.streak-card{margin:0 16px 16px;background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(255,138,31,.1));border:1px solid rgba(245,158,11,.2);border-radius:18px;padding:18px;display:flex;align-items:center;gap:16px;}

#sim-showcase{margin:0 16px 4px;border-radius:18px;overflow:hidden;transition:opacity .25s;}
#sims-container{max-width:600px;margin:0 auto;}
#sim-preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px 16px;}
.sim-section-label{padding:10px 20px 4px;font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:1px;}
.sim-preview-card{border-radius:16px;padding:14px 12px 12px;cursor:pointer;border:2px solid var(--border);background:var(--card);transition:all .25s;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:5px;}
.sim-preview-card::before{content:'';position:absolute;inset:0;border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 60%);pointer-events:none;}
.sim-preview-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.4);}
.sim-preview-card[data-cat="math"]{border-color:rgba(255,255,255,.18);background:linear-gradient(135deg,rgba(255,255,255,.05),var(--card));}
.sim-preview-card[data-cat="phys"]{border-color:rgba(255,138,31,.28);background:linear-gradient(135deg,rgba(255,138,31,.08),var(--card));}
.sim-preview-card[data-cat="chem"]{border-color:rgba(87,179,254,.28);background:linear-gradient(135deg,rgba(87,179,254,.08),var(--card));}
.sim-preview-card[data-cat="bio"]{border-color:rgba(74,222,128,.28);background:linear-gradient(135deg,rgba(74,222,128,.08),var(--card));}
.sim-preview-card[data-cat="all"]{border-color:rgba(255,107,26,.28);background:linear-gradient(135deg,rgba(255,107,26,.08),var(--card));}
.sim-preview-card[data-cat="math"]:hover{border-color:var(--math);background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(200,220,255,.06));box-shadow:0 0 24px rgba(255,255,255,.2);}
.sim-preview-card[data-cat="phys"]:hover{border-color:var(--phys);background:linear-gradient(135deg,rgba(255,138,31,.18),rgba(255,180,80,.08));box-shadow:0 0 24px rgba(255,138,31,.38);}
.sim-preview-card[data-cat="chem"]:hover{border-color:var(--chem);background:linear-gradient(135deg,rgba(87,179,254,.18),rgba(0,207,255,.08));box-shadow:0 0 24px rgba(87,179,254,.35);}
.sim-preview-card[data-cat="bio"]:hover{border-color:var(--bio);background:linear-gradient(135deg,rgba(74,222,128,.18),rgba(0,207,255,.06));box-shadow:0 0 24px rgba(74,222,128,.35);}
.sim-preview-card[data-cat="all"]:hover{border-color:var(--accent);background:linear-gradient(135deg,rgba(255,107,26,.18),rgba(255,138,31,.08));box-shadow:0 0 24px rgba(255,107,26,.35);}
/* ── Hover animation pour éléments cliquables dans les simulateurs ── */
.smc{transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .15s,box-shadow .2s!important;}
.smc:hover{transform:scale(1.07);z-index:2;position:relative;box-shadow:0 3px 12px rgba(0,0,0,.3);}
.smc-lg{transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .15s,box-shadow .2s!important;}
.smc-lg:hover{transform:scale(1.025);box-shadow:0 6px 20px rgba(0,0,0,.35);}
[data-ac]{transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .15s,outline .1s!important;}
[data-ac]:hover{transform:scale(1.07);z-index:2;position:relative;box-shadow:0 3px 12px rgba(0,0,0,.3);}
[data-at]{transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .15s,outline .1s!important;}
[data-at]:hover{transform:scale(1.04);box-shadow:0 4px 14px rgba(0,0,0,.3);}
.sim-preview-card.spc-active[data-cat="math"]{border-color:var(--math);background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(200,220,255,.06));box-shadow:0 0 24px rgba(255,255,255,.2);}
.sim-preview-card.spc-active[data-cat="phys"]{border-color:var(--phys);background:linear-gradient(135deg,rgba(255,138,31,.18),rgba(255,180,80,.08));box-shadow:0 0 24px rgba(255,138,31,.38);}
.sim-preview-card.spc-active[data-cat="chem"]{border-color:var(--chem);background:linear-gradient(135deg,rgba(87,179,254,.18),rgba(0,207,255,.08));box-shadow:0 0 24px rgba(87,179,254,.35);}
.sim-preview-card.spc-active[data-cat="bio"]{border-color:var(--bio);background:linear-gradient(135deg,rgba(74,222,128,.18),rgba(0,207,255,.06));box-shadow:0 0 24px rgba(74,222,128,.35);}
.sim-preview-card.spc-hidden{display:none;}
.spc-icon{font-size:24px;}
.spc-title{font-size:11px;font-weight:700;line-height:1.3;color:var(--text);}
.spc-sub{font-size:10px;color:var(--text2);line-height:1.3;}
.spc-badge{display:inline-block;font-size:8px;font-weight:700;padding:2px 6px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px;margin-top:3px;}
#toast{position:fixed;top:80px;left:50%;transform:translateX(-50%) translateY(-20px);background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:10px 18px;font-size:13px;font-weight:600;z-index:300;opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
/* Search bar */
.search-wrap{padding:6px 16px 2px;}
.search-bar{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:8px 14px;transition:border-color .2s;}
.search-bar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,107,26,.15);}
.search-bar svg{color:var(--text2);flex-shrink:0;width:15px;height:15px;}
.search-bar input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:13px;}
.search-bar input::placeholder{color:var(--text2);}
.search-bar .clear-btn{background:none;border:none;color:var(--text2);cursor:pointer;font-size:16px;padding:0;line-height:1;flex-shrink:0;}
/* ── Search pill : bouton loupe extensible ── */
.filter-search-row{display:flex;align-items:center;gap:8px;padding:4px 16px 8px;overflow:hidden;}
.filter-search-row .filter-row{flex:1;padding:0;margin:0;overflow-x:auto;}
.search-pill{display:flex;align-items:center;border-radius:50px;height:36px;width:36px;min-width:36px;overflow:hidden;background:var(--card2);border:1.5px solid var(--accent);transition:width .28s cubic-bezier(.4,0,.2,1),border-color .2s,box-shadow .2s;flex-shrink:0;}
.search-pill.sp-open{width:min(200px,50vw);border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,107,26,.18);}
.sp-btn{width:34px;height:34px;min-width:34px;border:none;background:transparent;color:var(--text2);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:color .15s;}
.search-pill.sp-open .sp-btn{color:var(--accent);}
.sp-input{flex:1;border:none;background:transparent;color:var(--text);font-size:13px;font-family:inherit;outline:none;min-width:0;width:0;opacity:0;pointer-events:none;transition:opacity .18s;padding:0;}
.search-pill.sp-open .sp-input{opacity:1;pointer-events:auto;padding:0 4px 0 0;}
.sp-clear{width:18px;height:18px;min-width:18px;border:none;background:var(--text2);color:var(--bg);border-radius:50%;font-size:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:8px;opacity:0;pointer-events:none;transition:opacity .15s;line-height:1;font-weight:700;}
.search-pill.sp-open.sp-has-val .sp-clear{opacity:.75;pointer-events:auto;}
/* Atom modal */
#atom-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);z-index:250;display:none;align-items:center;justify-content:center;}
#atom-modal.open{display:flex;}
#atom-box{background:var(--bg2);border-radius:24px;width:calc(100% - 40px);max-width:440px;max-height:90vh;overflow-y:auto;padding:20px;border:1px solid var(--border);animation:fadeIn .25s ease;}
input[type=range].has-zero{background-image:linear-gradient(to right,transparent calc(var(--zero-pct,50%) - 1.5px),rgba(255,255,255,.55) calc(var(--zero-pct,50%) - 1.5px),rgba(255,255,255,.55) calc(var(--zero-pct,50%) + 1.5px),transparent calc(var(--zero-pct,50%) + 1.5px));background-repeat:no-repeat;background-size:100% 100%;}
.formula-box{background:rgba(85,105,255,.08);border:1px solid rgba(85,105,255,.25);border-radius:10px;padding:10px 14px;margin:10px 0;font-family:monospace;font-size:12px;color:var(--text);line-height:1.8;}
.formula-box .formula-title{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;}
.formula-box.formula-fin{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.25);}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;}

/* ── RESPONSIVE: PETITS TÉLÉPHONES (≤480px) ── */
@media(max-width:480px){
  .cards-grid{grid-template-columns:1fr;padding:0 12px;}
  #sim-preview-grid{grid-template-columns:1fr 1fr;gap:8px;padding:0 10px 12px;}
  .badge-grid{grid-template-columns:repeat(3,1fr);gap:6px;}
  .badge-item .badge-icon{font-size:20px;}
  .badge-item .badge-name{font-size:8px;}
  .badge-tooltip{
    position:static;bottom:auto;left:auto;
    transform:none;
    margin-top:6px;
    max-width:none;min-width:0;
    width:100%;
    pointer-events:auto;
    z-index:auto;
  }
  .hero{padding:54px 14px 18px;}
  .hero h1{font-size:22px;}
  .stats-hero{padding:54px 14px 14px;}
  .stats-grid-top{grid-template-columns:1fr 1fr;}
  .profile-hero{padding:20px 14px 18px;}
  .sim-card{margin:0 10px 12px;}
  .lecon-section{padding:0 10px 10px;}
  .sec-header{padding:14px 12px 6px;}
  .filter-row{padding:4px 12px 10px;}
  #modal-box{padding:18px 14px 32px;}
  #page-profil{overflow-x:hidden;}
  .avatar-char-wrap{width:100%;height:180px;}
  .avatar-inner{margin:0 auto;transition:transform .4s cubic-bezier(.4,0,.2,1);}
  .avatar-char-wrap.show-stats .avatar-inner{transform:translateX(-50px);}
  .avatar-stat-panel{position:absolute;left:190px;top:50%;transform:translateY(-50%);max-height:none;width:0;margin:0;white-space:nowrap;}
  .avatar-char-wrap.show-stats .avatar-stat-panel{width:calc(100vw - 205px);max-width:none;opacity:1;pointer-events:auto;white-space:normal;}
}

/* ── RESPONSIVE: MOBILE (≤640px) — simulateurs ── */
@media(max-width:640px){
  /* Transformateur de Fonctions: canvas pleine largeur, sliders en dessous */
  #ft-layout{flex-direction:column!important;}
  #ft-right-panel{
    width:100%!important;
    border-left:none!important;
    border-top:1px solid var(--border);
    max-height:none!important;
    overflow-y:visible!important;
    padding:8px 12px!important;
  }
  /* Sim cards: marges/padding réduits sur mobile */
  .sim-card{margin:0 8px 10px!important;border-radius:14px!important;}
  .sim-card-header{padding:12px 14px 10px!important;}
  .sim-controls{padding:10px 12px!important;}
  /* Prévient le débordement horizontal dans les sims (pas sur canvas-wrap : bloquerait touch-action) */
  .sim-card,.sim-controls{max-width:100%;box-sizing:border-box;overflow-x:hidden;}
  .sim-canvas-wrap{max-width:100%;box-sizing:border-box;}
  /* Sliders: libère la contrainte de largeur de label */
  .sim-slider-row{flex-wrap:wrap;}
  .sim-slider-row label{width:auto!important;min-width:60px;max-width:100%;}
  /* Canvas: ne pas contraindre la largeur — certains sims (MRUA, MCUA) utilisent un canvas
     intentionnellement plus large que le conteneur (×3) avec scroll horizontal. */
  /* Sim preview grid: 2 col même sur très petits écrans */
  #sim-preview-grid{grid-template-columns:1fr 1fr!important;}
  /* Popup XP mieux positionné */
  #xp-popup{right:6px!important;left:6px!important;min-width:0!important;}
  /* Formule bar du transformateur */
  #ft-formula-bar{font-size:12px!important;padding:6px 10px!important;}
  /* Boutons: supprime le délai 300ms iOS pour réponse immédiate */
  .sim-action,button{touch-action:manipulation;}
}

/* ── RESPONSIVE: DESKTOP (≥768px) ── */
@media(min-width:768px){
  .cards-grid{grid-template-columns:repeat(3,1fr);max-width:min(860px,88vw);margin:0 auto;}
  #sim-preview-grid{grid-template-columns:repeat(3,1fr);max-width:min(860px,88vw);margin:0 auto;}
  .badge-grid{grid-template-columns:repeat(6,1fr);}
  .badges-section{max-width:min(860px,88vw);margin:0 auto;}
  .sec-header,.filter-row{max-width:min(860px,88vw);margin:0 auto;}
  .stats-grid-top{max-width:min(860px,88vw);margin:0 auto;}
  .progress-section{max-width:min(860px,88vw);margin:0 auto;}
  .streak-card{max-width:min(828px,88vw);width:calc(100% - 32px);margin-left:auto;margin-right:auto;}
  .form-section{max-width:580px;margin:0 auto;}
  .lecon-section{max-width:min(860px,88vw);margin:0 auto;}
  #sims-container{max-width:min(860px,88vw);}
  .sim-section-label{max-width:min(860px,88vw);margin:0 auto;}
  #modal-box{max-width:640px;border-radius:24px;}
  #modal-overlay{align-items:center;}
  @keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
  .hero{padding:80px 32px 30px;}
  .hero h1{font-size:34px;}
  .hero p{font-size:15px;max-width:480px;}
  .stats-hero{padding:80px 32px 22px;}
  .profile-hero{padding:40px 32px 28px;}
  .nav-btn{max-width:120px;padding:8px 20px;}
}

/* ── RESPONSIVE: GRAND ÉCRAN (≥1200px) ── */
@media(min-width:1200px){
  .cards-grid{grid-template-columns:repeat(4,1fr);max-width:min(1120px,82vw);}
  #sim-preview-grid{grid-template-columns:repeat(4,1fr);max-width:min(1120px,82vw);}
  .badge-grid{grid-template-columns:repeat(6,1fr);}
  .badges-section{max-width:min(1120px,82vw);}
  .sec-header,.filter-row{max-width:min(1120px,82vw);}
  .stats-grid-top{max-width:min(1120px,82vw);}
  .progress-section{max-width:min(1120px,82vw);}
  .streak-card{max-width:min(1088px,82vw);}
  .lecon-section{max-width:min(1120px,82vw);}
  #sims-container{max-width:min(1120px,82vw);}
  .sim-section-label{max-width:min(1120px,82vw);}
  .hero h1{font-size:42px;}
  .hero p{font-size:16px;max-width:560px;}
  #modal-box{max-width:720px;}
}

@keyframes qspark {
  0%   { opacity:0; transform:translate(-50%,-50%) translate(0,0) scale(0); }
  20%  { opacity:.85; }
  60%  { opacity:.5; transform:translate(-50%,-50%) translate(var(--stx),var(--sty)) scale(1); }
  100% { opacity:0; transform:translate(-50%,-50%) translate(calc(var(--stx)*1.5),calc(var(--sty)*1.5)) scale(.2); }
}
.lvl-spark{position:absolute;border-radius:50%;background:var(--phys);opacity:0;top:50%;left:50%;pointer-events:none;animation:qspark 2.1s ease-out infinite;}


#splash-svg{transform-origin:center center;display:block;filter:drop-shadow(0 0 0px transparent);will-change:filter,transform;}
#splash-svg.logo-anim{animation:starSpin 2s cubic-bezier(.16,.86,.3,1) both,starGlow 2s ease-in-out both;}
@keyframes splashOut{from{opacity:1}to{opacity:0}}
#splash-screen.out{animation:splashOut .35s ease forwards;pointer-events:none;}


/* ── Install auth collapsible ── */
#installAuthWrap{width:100%;max-width:340px;margin-top:12px;}
.install-auth-toggle{width:100%;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:12px 16px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:rgba(255,255,255,.7);transition:background .2s;}
.install-auth-toggle:hover{background:rgba(255,255,255,.1);}
.install-auth-icon{font-size:18px;}
.install-auth-label{flex:1;text-align:left;}
.install-auth-chevron{font-size:17px;font-weight:400;color:#ff6b1a;transition:transform .25s;display:inline-block;}
.install-auth-chevron.open{transform:rotate(90deg);}
.install-auth-body{max-height:0;overflow:hidden;transition:max-height .38s,padding .38s;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-top:none;border-radius:0 0 16px 16px;margin-top:-8px;padding:0 14px;}
.install-auth-body.open{max-height:640px;padding:16px 14px 18px;}
.astro-install-auto{width:100%;display:flex;align-items:center;gap:10px;background:rgba(255,107,26,.1);border:1.5px solid rgba(255,107,26,.3);border-radius:12px;padding:12px 14px;cursor:pointer;font-family:inherit;margin-bottom:10px;transition:background .2s;}
.astro-install-auto:hover{background:rgba(255,107,26,.18);}
.install-steps-astro{display:flex;flex-direction:column;gap:10px;}
.install-platform-astro{background:rgba(255,255,255,.03);border-radius:10px;padding:10px 12px;border:1px solid rgba(255,255,255,.06);}
.install-plat-title-astro{font-size:11px;font-weight:700;color:rgba(255,255,255,.7);margin-bottom:6px;}
.install-list-astro{margin:0;padding-left:18px;font-size:10px;color:rgba(255,255,255,.45);line-height:1.9;}
.install-list-astro strong{color:rgba(255,255,255,.7);}
/* ── PWA install popup ── */
#pwaPopup{position:fixed;bottom:24px;right:16px;transform:translateY(calc(100% + 50px));z-index:10200;display:flex;align-items:center;gap:14px;background:rgba(18,8,2,.92);backdrop-filter:blur(20px);border:1px solid rgba(255,107,26,.25);border-radius:18px;padding:14px 16px;box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 20px rgba(255,107,26,.1);width:calc(100vw - 32px);max-width:360px;transition:transform .45s cubic-bezier(.34,1.4,.64,1);pointer-events:none;opacity:0;}
#pwaPopup.show{transform:translateY(0);pointer-events:auto;opacity:1;}
#pwaPopupIcon{width:40px;height:40px;border-radius:10px;flex-shrink:0;box-shadow:0 2px 8px rgba(255,107,26,.2);}
#pwaPopupText{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;}
#pwaPopupTitle{font-size:14px;font-weight:800;color:#fff;line-height:1.2;}
#pwaPopupSub{font-size:11px;color:rgba(255,255,255,.5);line-height:1.3;}
#pwaPopupInstall{flex-shrink:0;background:linear-gradient(135deg,#ff6b1a,#ff8a33);color:#fff;border:none;border-radius:10px;padding:8px 14px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;font-family:inherit;box-shadow:0 3px 12px rgba(255,107,26,.35);transition:opacity .2s;}
@media(max-width:600px){#pwaPopup{right:0;left:0;bottom:0;max-width:100%;width:100%;border-radius:18px 18px 0 0;padding:14px 16px;}}
#pwaPopupInstall:hover{opacity:.88;}
#pwaPopupClose{flex-shrink:0;background:none;border:none;font-size:16px;color:rgba(255,255,255,.35);cursor:pointer;padding:4px 2px;line-height:1;transition:color .2s;}
#pwaPopupClose:hover{color:rgba(255,255,255,.7);}
/* iOS sheet */
#pwaIOSSheet{position:fixed;inset:0;z-index:10300;background:rgba(0,0,0,0);display:none;align-items:flex-end;justify-content:center;pointer-events:none;transition:background .3s;}
#pwaIOSSheet.show{background:rgba(0,0,0,.60);pointer-events:auto;display:flex;}
#pwaIOSCard{position:relative;background:rgba(18,8,2,.95);backdrop-filter:blur(20px);border-radius:24px 24px 0 0;padding:28px 28px 36px;width:100%;max-width:480px;text-align:center;transform:translateY(100%);transition:transform .4s cubic-bezier(.34,1.2,.64,1);box-shadow:0 -4px 40px rgba(0,0,0,.5);color:#fff;}
#pwaIOSSheet.show #pwaIOSCard{transform:translateY(0);}
#pwaIOSClose{position:absolute;top:14px;right:16px;background:rgba(255,255,255,.08);border:none;border-radius:50%;width:28px;height:28px;font-size:14px;color:rgba(255,255,255,.5);cursor:pointer;display:flex;align-items:center;justify-content:center;}
#pwaIOSArrow{font-size:22px;color:#ff6b1a;animation:pwaArrowBounce 1.2s ease-in-out infinite;margin-top:4px;}
@keyframes pwaArrowBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}


#authOverlay{position:fixed;inset:0;z-index:500;background:linear-gradient(135deg,#000000 0%,#0a0300 60%,#3d1200 90%,#5a1e00 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;visibility:hidden;}
#authOverlay.auth-ready{visibility:visible;}
#authOverlay.hidden{display:none!important;}
#loginCanvas{position:absolute;inset:0;pointer-events:none;}
#authCard{position:relative;z-index:1;width:100%;max-width:340px;background:rgba(18,8,2,.88);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.09);border-radius:28px;padding:28px 28px 24px;box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 0 1px rgba(234,88,12,.15);animation:loginEntrance .6s cubic-bezier(.22,.68,0,1.2);max-height:92vh;overflow-y:auto;scrollbar-width:none;}
#authCard::-webkit-scrollbar{display:none;}
@keyframes loginEntrance{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
#authCard::before{content:'';display:block;height:2px;width:60px;margin:0 auto 6px;background:linear-gradient(90deg,transparent,rgba(234,88,12,.6),transparent);border-radius:2px;}
#auth-logo{text-align:center;margin-bottom:4px;cursor:pointer;display:inline-block;width:100%;}
#auth-logo svg{transform-origin:center center;display:inline-block;filter:drop-shadow(0 0 7px rgba(255,255,255,.75));}
@keyframes starSpin{0%{transform:rotate(0) scale(1)}20%{transform:rotate(110deg) scale(1.22)}50%{transform:rotate(280deg) scale(0.92)}70%{transform:rotate(338deg) scale(1.07)}85%{transform:rotate(354deg) scale(0.97)}95%{transform:rotate(359deg) scale(1.01)}100%{transform:rotate(360deg) scale(1)}}
@keyframes starGlow{0%{filter:drop-shadow(0 0 0px #ff6a00)}30%{filter:drop-shadow(0 0 20px #ff6a00) drop-shadow(0 0 40px #ffb347) drop-shadow(0 0 12px #fff)}60%{filter:drop-shadow(0 0 10px #ff6a00) drop-shadow(0 0 22px #ffb347)}85%{filter:drop-shadow(0 0 3px #ff6a00)}100%{filter:drop-shadow(0 0 0px #ff6a00)}}
#auth-logo:hover svg{animation:starSpin 1.6s cubic-bezier(.16,.86,.3,1) both,starGlow 1.6s ease-in-out both;}
#auth-logo.logo-clicked svg{animation:starSpin 2s cubic-bezier(.16,.86,.3,1) both,starGlow 2s ease-in-out both;}
#authTitle{font-family:'Michroma','Segoe UI',system-ui,sans-serif!important;text-align:center;font-size:20px;font-weight:400;letter-spacing:3px;background:linear-gradient(135deg,#fff 20%,#ffb347 70%,#ff6a00 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:2px;margin-top:0;}
#authSubtitle{text-align:center;font-size:11px;color:rgba(255,255,255,.55);margin-bottom:16px;font-style:italic;}
#authError{font-size:12px;color:#ff6b6b;text-align:center;min-height:16px;margin-bottom:6px;font-weight:600;}
.auth-field{margin-bottom:13px;}
.auth-label{display:block;font-size:10px;font-weight:600;color:#ff8c42;text-transform:uppercase;letter-spacing:.8px;margin-bottom:5px;}
.auth-input-wrap{position:relative;}
.auth-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#fff;pointer-events:none;}
.auth-input{width:100%;padding:12px 42px 12px 40px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#e8eaf6;font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit;}.auth-input:-webkit-autofill,.auth-input:-webkit-autofill:hover,.auth-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px rgba(18,6,2,.95) inset!important;-webkit-text-fill-color:#e8eaf6!important;caret-color:#e8eaf6;border-color:rgba(255,255,255,.08)!important;transition:background-color 9999s ease;}
.auth-input-username{padding-right:160px;}
.auth-email-suffix{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;color:#ea580c;pointer-events:none;letter-spacing:.2px;}
.auth-role-row{display:flex;gap:8px;margin-bottom:14px;}
.auth-role-btn{flex:1;padding:9px 6px;border-radius:10px;border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,255,255,.6);font-size:13px;font-weight:600;cursor:pointer;transition:background .18s,color .18s,border-color .18s;font-family:inherit;}
.auth-role-btn.auth-role-active{background:linear-gradient(135deg,#c2410c,#ea580c);border-color:#ea580c;color:#fff;}
.auth-input::placeholder{color:rgba(255,255,255,.38);}
.auth-input:focus{border-color:rgba(234,88,12,.6);box-shadow:0 0 0 3px rgba(234,88,12,.12);}
input[type="password"]::-ms-reveal,input[type="password"]::-ms-clear{display:none}
.auth-pwd-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:#fff;cursor:pointer;padding:4px;}
.auth-remember-row{display:flex;align-items:center;gap:8px;cursor:pointer;margin:2px 0 12px;user-select:none;}
.auth-check-wrap{position:relative;width:18px;height:18px;flex-shrink:0;}
.auth-check-wrap input[type=checkbox]{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer;margin:0;}
.auth-checkmark{position:absolute;inset:0;border-radius:5px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;}
.auth-check-wrap input:checked ~ .auth-checkmark{background:#ea580c;border-color:#ea580c;}
.auth-remember-label{font-size:12px;color:#fff;}
#authSubmitBtn{width:100%;padding:13px;border-radius:14px;border:none;cursor:pointer;margin-top:2px;background:linear-gradient(135deg,#c2410c,#ea580c,#ff9a3c);color:#fff;font-size:15px;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 4px 24px rgba(234,88,12,.45);transition:transform .2s,box-shadow .2s,opacity .2s;font-family:inherit;}
#authSubmitBtn:hover{transform:scale(1.02);}
#authSubmitBtn:disabled{opacity:.55;cursor:default;transform:none;}
#auth-forgot{text-align:center;font-size:11px;color:#fff;margin-top:8px;cursor:pointer;}
#auth-forgot:hover{color:#ea580c;}
.auth-sep{width:100%;height:1px;background:rgba(255,255,255,.06);margin:10px 0;}
.auth-toggle{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:#fff;margin-top:16px;}
.auth-toggle button{background:none;border:none;color:#ea580c;font-weight:700;font-size:12px;cursor:pointer;font-family:inherit;padding:0;}
input.slv{width:54px;padding:3px 4px;background:var(--card2);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:11px;font-family:monospace;text-align:center;outline:none;-moz-appearance:textfield;}
input.slv::-webkit-inner-spin-button,input.slv::-webkit-outer-spin-button{-webkit-appearance:none;}
.cc{cursor:pointer;transition:transform .35s cubic-bezier(0,0,.2,1),box-shadow .35s cubic-bezier(0,0,.2,1),background .2s,border-color .2s;will-change:transform;}
.cc:hover{transform:scale(1.03);box-shadow:0 6px 20px rgba(0,0,0,.38);}
[style*="transition:background .28s"]:hover{border-color:rgba(255,255,255,.35)!important;box-shadow:0 4px 16px rgba(0,0,0,.3)!important;}
.cc > div:first-child{font-family:'Michroma','Segoe UI',sans-serif!important;font-size:10px!important;font-weight:400!important;letter-spacing:1px!important;text-transform:uppercase!important;opacity:.85;}
/* ── ATELIER ── */
.atelier-mode-btn{flex:1;padding:8px 12px;border-radius:10px;border:none;background:none;color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit;}
.atelier-mode-btn.active{background:var(--accent);color:#fff;}
.exo-type-btn{padding:5px 12px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid var(--border);background:var(--card);color:var(--text2);cursor:pointer;transition:all .2s;font-family:inherit;}
.exo-type-btn.active{background:var(--accent);color:#fff;border-color:transparent;}
.atelier-q{background:var(--card);border-radius:16px;border:1px solid var(--border);margin-bottom:10px;overflow:hidden;}
.atelier-q-header{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;}
.atelier-q-header:hover{background:rgba(255,255,255,.03);}
.atelier-q-title{font-size:13px;font-weight:700;}
.atelier-q-pts{font-size:12px;color:var(--text2);font-weight:600;white-space:nowrap;}
.atelier-q-body{padding:0 16px 16px;}
.atelier-q-text{font-size:13px;color:var(--text);line-height:1.7;margin-bottom:10px;}
.atelier-q-text p{margin-bottom:8px;}
.atelier-table{width:100%;border-collapse:collapse;font-size:11px;margin:8px 0;}
.atelier-table th{background:rgba(85,105,255,.15);color:var(--accent);padding:5px 8px;text-align:center;font-weight:700;border:1px solid rgba(85,105,255,.2);}
.atelier-table td{padding:5px 8px;text-align:center;border:1px solid var(--border);color:var(--text);}
.atelier-solution{background:rgba(16,185,129,.07);border:1px solid rgba(16,185,129,.2);border-radius:12px;padding:14px;margin-top:10px;}
.atelier-solution-title{font-size:11px;font-weight:700;color:var(--bio);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;}
.atelier-solution-step{font-size:12px;color:var(--text);line-height:1.9;font-family:'Courier New',monospace;margin-bottom:6px;}
.atelier-toggle-sol{font-size:11px;padding:5px 14px;border-radius:8px;border:1px solid rgba(16,185,129,.3);background:rgba(16,185,129,.08);color:var(--bio);cursor:pointer;font-family:inherit;margin-top:10px;display:inline-block;}
@keyframes atelierSpin{to{transform:rotate(360deg)}}
.atelier-spinner{width:36px;height:36px;border:3px solid rgba(85,105,255,.2);border-top-color:var(--accent);border-radius:50%;animation:atelierSpin .8s linear infinite;margin:0 auto 14px;}
.atelier-api-key-wrap{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:14px;}
.atelier-api-key-wrap input{width:100%;padding:9px 12px;border-radius:8px;background:var(--card2);border:1px solid var(--border);color:var(--text);font-size:13px;outline:none;font-family:monospace;margin-top:6px;}
.atelier-api-key-wrap input:focus{border-color:var(--accent);}
.atelier-header-card{background:linear-gradient(135deg,rgba(85,105,255,.1),rgba(68,170,255,.05));border:1px solid rgba(85,105,255,.2);border-radius:16px;padding:16px;margin-bottom:14px;}
/* Logo hover animation */
#logo{cursor:pointer;}
@keyframes logo-bounce{0%{transform:translateY(0)}35%{transform:translateY(-4px)}65%{transform:translateY(2px)}85%{transform:translateY(-1px)}100%{transform:translateY(0)}}
#logo-svg.logo-anim{animation:logo-bounce 0.45s ease forwards;}

text{font-family:monospace;font-size:11px;} .lbl{fill:rgba(255,255,255,.5);font-size:9px;} .res{font-weight:700;font-size:11px;} .br{stroke-width:2;fill:none;stroke:'+G+';} .clickable{cursor:pointer;transition:transform .15s ease,opacity .15s;transform-box:fill-box;transform-origin:center;} .clickable:hover{opacity:.9;transform:scale(1.08);}
text{font-family:monospace;} .vzone{cursor:pointer;transition:transform .15s ease,opacity .15s;transform-box:fill-box;transform-origin:center;} .vzone:hover{opacity:.85;transform:scale(1.035);} .vzone-bg{cursor:pointer;transition:opacity .15s;} .vzone-bg:hover{opacity:.85;}

  body{font-family:Arial,sans-serif;font-size:10pt;margin:0}
  @page{size:A4;margin:2cm 2.5cm}
  p{margin:3pt 0}
  h3{margin:8pt 0 4pt}