:root {
  --bg:#07090f;--surface:#0e1117;--surface2:#141920;--border:rgba(255,255,255,0.07);
  --accent:#4fffb0;--accent2:#38bdf8;--alkane:#10d48a;--alkene:#3b9eff;--alkyne:#ff5f7e;
  --isomer:#ffb347;--nuclear:#c084fc;--thermo:#fb923c;--solutions:#34d399;
  --ions-pos:#f472b6;--ions-neg:#60a5fa;--text:#e8edf5;--muted:#5a6478;
  --glow-green:0 0 30px rgba(79,255,176,0.25);--glow-blue:0 0 30px rgba(56,189,248,0.25);
  --glow-purple:0 0 30px rgba(192,132,252,0.25);--glow-orange:0 0 30px rgba(251,146,60,0.25);
  --radius:20px;--transition:0.25s cubic-bezier(0.4,0,0.2,1);
  --accent3:#4ade80;--tag-bg:rgba(79,255,176,0.10);
  --bonding:#a78bfa;--reactions:#f59e0b;--acids:#f87171;--electro:#22d3ee;--gas:#818cf8;
  --equilibrium:#2dd4bf;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);line-height:1.7;overflow-x:hidden;}
::-webkit-scrollbar{width:6px;}::-webkit-scrollbar-track{background:var(--bg);}::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px;}
#bgCanvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0.35;}
nav{position:sticky;top:0;z-index:9999;background:rgba(7,9,15,0.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 2%;display:flex;justify-content:space-between;align-items:center;height:64px;gap:12px;will-change:transform;}
.nav-logo{font-family:'JetBrains Mono',monospace;font-size:1.2rem;font-weight:700;color:var(--text);text-decoration:none;flex-shrink:0;}
.nav-logo span{color:var(--accent);}

header{position:relative;z-index:1;padding:110px 20px 180px;text-align:center;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(79,255,176,0.08) 0%,transparent 70%);clip-path:polygon(0 0,100% 0,100% 88%,0 100%);}
.hero-tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--accent);border:1px solid rgba(79,255,176,0.4);border-radius:50px;padding:5px 16px;margin-bottom:24px;letter-spacing:0.15em;text-transform:uppercase;animation:fadeUp 0.6s ease both;}
header h1{font-family:'DM Serif Display',serif;font-size:clamp(2.5rem,5.5vw,5rem);line-height:1.1;animation:fadeUp 0.7s 0.1s ease both;}
header h1 em{color:var(--accent);font-style:italic;}
header p{font-size:clamp(0.95rem,2vw,1.2rem);color:var(--muted);max-width:680px;margin:20px auto 0;font-weight:300;animation:fadeUp 0.7s 0.2s ease both;}
.hero-stats{display:flex;justify-content:center;gap:36px;margin-top:56px;flex-wrap:wrap;animation:fadeUp 0.7s 0.35s ease both;}
.hero-stat .num{font-family:'JetBrains Mono',monospace;font-size:2.2rem;font-weight:700;color:var(--accent);display:block;}
.hero-stat .lbl{font-size:0.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}
.wrapper{position:relative;z-index:1;max-width:1300px;margin:0 auto;padding:0 24px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:52px;margin-bottom:36px;opacity:0;transform:translateY(30px);transition:opacity 0.6s ease,transform 0.6s ease,box-shadow 0.3s ease;will-change:opacity,transform;}
.card.visible{opacity:1;transform:translateY(0);}
.card:hover{box-shadow:0 0 0 1px rgba(79,255,176,0.08),0 40px 80px rgba(0,0,0,0.4);}

/* ===== BADGE FIX — stacks above title instead of sitting inline ===== */
.badge{display:block;width:fit-content;font-family:'JetBrains Mono',monospace;font-size:0.68rem;font-weight:700;letter-spacing:0.15em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(79,255,176,0.4);padding:4px 13px;border-radius:50px;margin-bottom:16px;}

.badge.purple{color:var(--nuclear);border-color:rgba(192,132,252,0.4);}
.badge.orange{color:var(--thermo);border-color:rgba(251,146,60,0.4);}
.badge.teal{color:var(--solutions);border-color:rgba(52,211,153,0.4);}
.badge.pink{color:var(--ions-pos);border-color:rgba(244,114,182,0.4);}
.badge.violet{color:var(--bonding);border-color:rgba(167,139,250,0.4);}
.badge.amber{color:var(--reactions);border-color:rgba(245,158,11,0.4);}
.badge.red{color:var(--acids);border-color:rgba(248,113,113,0.4);}
.badge.cyan{color:var(--electro);border-color:rgba(34,211,238,0.4);}
.badge.indigo{color:var(--gas);border-color:rgba(129,140,248,0.4);}
.badge.eq{color:var(--equilibrium);border-color:rgba(45,212,191,0.4);}
.section-title{font-family:'DM Serif Display',serif;font-size:clamp(1.7rem,2.8vw,2.6rem);color:var(--text);margin-bottom:18px;line-height:1.2;}
.section-title span{color:var(--accent);}
.section-title span.purple{color:var(--nuclear);}
.section-title span.orange{color:var(--thermo);}
.section-title span.teal{color:var(--solutions);}
.section-title span.pink{color:var(--ions-pos);}
.section-title span.violet{color:var(--bonding);}
.section-title span.amber{color:var(--reactions);}
.section-title span.red{color:var(--acids);}
.section-title span.cyan{color:var(--electro);}
.section-title span.indigo{color:var(--gas);}
.section-title span.eq{color:var(--equilibrium);}
.section-lead{color:var(--muted);font-size:1rem;max-width:780px;margin-bottom:36px;}
#calc-tool .section-lead{margin-bottom:16px;}
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin-top:32px;}
.info-box{background:var(--surface2);border-radius:18px;padding:26px;border:1px solid var(--border);border-left:4px solid var(--accent);transition:box-shadow var(--transition);}
.info-box:hover{box-shadow:var(--glow-green);}
.info-box.blue{border-left-color:var(--alkene);}.info-box.blue:hover{box-shadow:var(--glow-blue);}
.info-box.purple{border-left-color:var(--nuclear);}.info-box.purple:hover{box-shadow:var(--glow-purple);}
.info-box.orange{border-left-color:var(--thermo);}.info-box.orange:hover{box-shadow:var(--glow-orange);}
.info-box.violet{border-left-color:var(--bonding);}.info-box.violet:hover{box-shadow:0 0 30px rgba(167,139,250,0.2);}
.info-box.amber{border-left-color:var(--reactions);}.info-box.amber:hover{box-shadow:0 0 30px rgba(245,158,11,0.2);}
.info-box.red{border-left-color:var(--acids);}.info-box.red:hover{box-shadow:0 0 30px rgba(248,113,113,0.2);}
.info-box.cyan{border-left-color:var(--electro);}.info-box.cyan:hover{box-shadow:0 0 30px rgba(34,211,238,0.2);}
.info-box.indigo{border-left-color:var(--gas);}.info-box.indigo:hover{box-shadow:0 0 30px rgba(129,140,248,0.2);}
.info-box.eq{border-left-color:var(--equilibrium);}.info-box.eq:hover{box-shadow:0 0 30px rgba(45,212,191,0.2);}
.info-box h3{font-size:1rem;color:var(--text);margin-bottom:8px;}
.info-box p,.info-box ul{color:var(--muted);font-size:0.88rem;}
.info-box ul{padding-left:16px;}.info-box li{margin-bottom:5px;}

.calc-box{background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:22px 28px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-bottom:4px;}
.calc-divider{width:1px;height:52px;background:var(--border);flex-shrink:0;}
@media(max-width:600px){.calc-divider{display:none;}}
.calc-left{flex:0 0 auto;}
.calc-left label{display:block;font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--accent);letter-spacing:0.2em;text-transform:uppercase;margin-bottom:12px;}
.input-row{display:flex;align-items:center;gap:14px;}
.calc-btn{width:42px;height:42px;border-radius:11px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:1.3rem;cursor:pointer;transition:background var(--transition),border-color var(--transition);display:flex;align-items:center;justify-content:center;}
.calc-btn:hover{background:rgba(79,255,176,0.12);border-color:var(--accent);color:var(--accent);}
input[type="number"]{background:transparent;border:none;border-bottom:3px solid var(--accent);color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:3.2rem;font-weight:700;width:120px;text-align:center;outline:none;-moz-appearance:textfield;}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;}
.calc-name{font-family:'DM Serif Display',serif;font-size:1.7rem;color:var(--text);padding:10px 0;border-left:3px solid var(--accent);padding-left:18px;min-width:160px;}
.calc-name small{display:block;font-family:'Outfit',sans-serif;font-size:0.72rem;color:var(--muted);font-weight:400;margin-top:2px;text-transform:uppercase;letter-spacing:0.1em;}
.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px;}
#calc-tool{padding-bottom:32px;}
.res-card{border-radius:22px;padding:28px;border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);min-width:0;}
.res-card::before{content:'';position:absolute;inset:0;opacity:0.07;transition:opacity var(--transition);}
.res-card:hover{transform:translateY(-7px);}
.res-card:hover::before{opacity:0.13;}
.res-card.alkane{background:rgba(16,212,138,0.07);border-color:rgba(16,212,138,0.2);}
.res-card.alkane::before{background:var(--alkane);}
.res-card.alkane:hover{box-shadow:0 20px 50px rgba(16,212,138,0.15);border-color:rgba(16,212,138,0.4);}
.res-card.alkene{background:rgba(59,158,255,0.07);border-color:rgba(59,158,255,0.2);}
.res-card.alkene::before{background:var(--alkene);}
.res-card.alkene:hover{box-shadow:0 20px 50px rgba(59,158,255,0.15);border-color:rgba(59,158,255,0.4);}
.res-card.alkyne{background:rgba(255,95,126,0.07);border-color:rgba(255,95,126,0.2);}
.res-card.alkyne::before{background:var(--alkyne);}
.res-card.alkyne:hover{box-shadow:0 20px 50px rgba(255,95,126,0.15);border-color:rgba(255,95,126,0.4);}
.res-type{font-family:'JetBrains Mono',monospace;font-size:0.63rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:700;margin-bottom:8px;display:block;}
.alkane .res-type{color:var(--alkane)}.alkene .res-type{color:var(--alkene)}.alkyne .res-type{color:var(--alkyne)}
.res-card h3{font-size:0.95rem;font-weight:600;margin-bottom:14px;color:var(--text);}
.chem-formula{font-family:'JetBrains Mono',monospace;font-size:2.2rem;font-weight:700;display:block;margin:10px 0 18px;transition:transform 0.3s ease;}
.alkane .chem-formula{color:var(--alkane)}.alkene .chem-formula{color:var(--alkene)}.alkyne .chem-formula{color:var(--alkyne)}
.res-card:hover .chem-formula{transform:scale(1.05);}
.res-meta{font-size:0.8rem;color:var(--muted);padding-top:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:3px;}
.res-meta b{color:var(--text);}
.tab-wrapper{display:grid;grid-template-columns:250px 1fr;gap:22px;margin-top:32px;}
.tab-sidebar{display:flex;flex-direction:column;gap:7px;}
.tab-link{padding:14px 18px;background:var(--surface2);border:1px solid var(--border);border-radius:13px;text-align:left;font-weight:600;font-size:0.85rem;color:var(--muted);cursor:pointer;transition:color var(--transition),border-color var(--transition),background var(--transition);}
.tab-link:hover{color:var(--text);border-color:rgba(79,255,176,0.2);}
.tab-link.active{background:rgba(79,255,176,0.1);border-color:rgba(79,255,176,0.4);color:var(--accent);transform:translateX(5px);}
.tab-step{display:inline-block;width:20px;height:20px;background:rgba(79,255,176,0.12);border-radius:5px;font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--accent);text-align:center;line-height:20px;margin-right:8px;}
.tab-pane{display:none;padding:36px;background:var(--surface2);border-radius:20px;border:1px solid var(--border);animation:slideIn 0.35s ease both;}
.tab-pane.show{display:block;}
@keyframes slideIn{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:translateX(0);}}
.tab-pane h3{font-family:'DM Serif Display',serif;font-size:1.45rem;margin-bottom:12px;color:var(--text);}
.tab-pane p,.tab-pane ul{color:var(--muted);font-size:0.9rem;margin-bottom:10px;}
.tab-pane ul{padding-left:16px;}.tab-pane li{margin-bottom:7px;}
.tab-pane b{color:var(--text);}.tab-pane u{text-decoration-color:var(--accent);}
.example-box{background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:16px 20px;margin-top:18px;font-family:'JetBrains Mono',monospace;font-size:0.88rem;color:var(--accent);}
.example-box span{color:var(--muted);font-family:'Outfit',sans-serif;font-size:0.78rem;display:block;margin-bottom:5px;}
.isomer-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px;}
.isomer-card{border-radius:20px;padding:28px;border:1px solid var(--border);background:var(--surface2);transition:transform var(--transition),box-shadow var(--transition);}
.isomer-card:hover{transform:translateY(-5px);}
.isomer-card.orange{border-top:3px solid var(--isomer);}.isomer-card.orange:hover{box-shadow:0 20px 50px rgba(255,179,71,0.1);}
.isomer-card.blue{border-top:3px solid var(--alkene);}.isomer-card.blue:hover{box-shadow:0 20px 50px rgba(59,158,255,0.1);}
.isomer-card h3{font-size:1rem;margin-bottom:10px;}
.isomer-card.orange h3{color:var(--isomer);}.isomer-card.blue h3{color:var(--alkene);}
.isomer-card p,.isomer-card ul{color:var(--muted);font-size:0.86rem;}
.isomer-card ul{padding-left:14px;margin-top:7px;}.isomer-card li{margin-bottom:5px;}
.isomer-tag{display:inline-block;font-size:0.68rem;font-family:'JetBrains Mono',monospace;letter-spacing:0.1em;text-transform:uppercase;padding:3px 9px;border-radius:50px;margin-bottom:10px;}
.orange .isomer-tag{background:rgba(255,179,71,0.12);color:var(--isomer);border:1px solid rgba(255,179,71,0.3);}
.blue .isomer-tag{background:rgba(59,158,255,0.12);color:var(--alkene);border:1px solid rgba(59,158,255,0.3);}
.table-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:14px;}
.search-box{background:var(--surface2);border:1px solid var(--border);border-radius:11px;padding:9px 16px;color:var(--text);font-family:'Outfit',sans-serif;font-size:0.88rem;outline:none;width:240px;transition:border-color var(--transition);}
.search-box:focus{border-color:rgba(79,255,176,0.4);}
.search-box::placeholder{color:var(--muted);}
.filter-pills{display:flex;gap:7px;flex-wrap:wrap;}
.pill{padding:6px 14px;border-radius:50px;font-size:0.78rem;font-weight:600;border:1px solid var(--border);background:var(--surface2);color:var(--muted);cursor:pointer;transition:color var(--transition),border-color var(--transition),background var(--transition);}
.pill.active{background:rgba(79,255,176,0.1);border-color:rgba(79,255,176,0.4);color:var(--accent);}
.pill:hover:not(.active){border-color:var(--muted);color:var(--text);}
.table-wrap{overflow-x:auto;border-radius:17px;border:1px solid var(--border);}
table{width:100%;border-collapse:collapse;}
.table-wrap table{min-width:800px;}
thead{background:var(--surface2);}
th{padding:16px 20px;font-size:0.74rem;font-family:'JetBrains Mono',monospace;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);text-align:left;font-weight:400;border-bottom:1px solid var(--border);}
td{padding:14px 20px;border-bottom:1px solid var(--border);font-size:0.88rem;color:var(--text);transition:background var(--transition);}
td:first-child{font-family:'JetBrains Mono',monospace;color:var(--accent);font-weight:700;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(255,255,255,0.03);}
.formula-cell{font-family:'JetBrains Mono',monospace;font-size:0.85rem;}
.na-cell{color:var(--muted);font-style:italic;font-size:0.8rem;}
.tri-grid{display:flex;gap:36px;flex-wrap:wrap;justify-content:center;margin-top:32px;}
.tri-block{display:flex;flex-direction:column;align-items:center;gap:8px;}
.tri-label{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase;text-align:center;}
.tri-shape{width:220px;height:190px;position:relative;}
.tri-shape svg{width:100%;height:100%;position:absolute;top:0;left:0;}
.tri-cell-top{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-family:'JetBrains Mono',monospace;font-size:0.78rem;font-weight:700;color:var(--text);text-align:center;text-transform:uppercase;width:90px;line-height:1.3;}
.tri-cell-bl{position:absolute;bottom:28px;left:20px;font-family:'JetBrains Mono',monospace;font-size:0.72rem;font-weight:700;color:var(--text);text-align:center;text-transform:uppercase;width:72px;line-height:1.3;}
.tri-cell-br{position:absolute;bottom:28px;right:20px;font-family:'JetBrains Mono',monospace;font-size:0.72rem;font-weight:700;color:var(--text);text-align:center;text-transform:uppercase;width:72px;line-height:1.3;}
.conv-row{display:flex;align-items:center;gap:0;margin-bottom:12px;}
.conv-from{background:rgba(14,17,23,0.8);border:1px solid var(--border);padding:14px 28px;border-radius:12px 0 0 12px;font-family:'JetBrains Mono',monospace;font-size:1.1rem;font-weight:700;color:var(--text);min-width:130px;text-align:center;}
.conv-op{background:var(--surface2);padding:14px 18px;font-family:'JetBrains Mono',monospace;font-size:0.85rem;font-weight:700;color:var(--accent);min-width:100px;text-align:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.conv-to{background:rgba(79,255,176,0.06);border:1px solid rgba(79,255,176,0.2);padding:14px 28px;border-radius:0 12px 12px 0;font-family:'JetBrains Mono',monospace;font-size:1.1rem;font-weight:700;color:var(--accent);min-width:130px;text-align:center;}
.conv-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px;}
.ions-split{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px;}
.ions-panel{background:var(--surface2);border-radius:20px;padding:28px;border:1px solid var(--border);}
.ions-panel.pos{border-top:3px solid var(--ions-pos);}
.ions-panel.neg{border-top:3px solid var(--ions-neg);}
.ions-panel-title{font-family:'JetBrains Mono',monospace;font-size:0.72rem;letter-spacing:0.18em;text-transform:uppercase;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--border);}
.ions-panel.pos .ions-panel-title{color:var(--ions-pos);}
.ions-panel.neg .ions-panel-title{color:var(--ions-neg);}
.ions-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.ion-group h4{font-size:0.7rem;font-family:'JetBrains Mono',monospace;letter-spacing:0.1em;color:var(--muted);margin-bottom:10px;text-transform:uppercase;}
.ion-item{margin-bottom:8px;}
.ion-name{font-size:0.82rem;color:var(--muted);display:block;}
.ion-formula{font-family:'JetBrains Mono',monospace;font-size:0.88rem;font-weight:700;}
.ions-panel.pos .ion-formula{color:var(--ions-pos);}
.ions-panel.neg .ion-formula{color:var(--ions-neg);}
.mass-table{width:100%;border-collapse:collapse;margin-top:24px;}
.mass-table th{background:var(--surface2);padding:12px 16px;font-family:'JetBrains Mono',monospace;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);text-align:center;border:1px solid var(--border);}
.mass-table td{padding:12px 16px;text-align:center;border:1px solid var(--border);font-family:'JetBrains Mono',monospace;font-size:0.9rem;font-weight:700;color:var(--text);}
.systems-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px;}
.system-card{border-radius:20px;padding:28px;background:var(--surface2);border:1px solid var(--border);text-align:center;transition:transform var(--transition),box-shadow var(--transition);}
.system-card:hover{transform:translateY(-6px);}
.system-card.open{border-top:3px solid var(--alkane);}.system-card.open:hover{box-shadow:0 20px 50px rgba(16,212,138,0.12);}
.system-card.closed{border-top:3px solid var(--alkene);}.system-card.closed:hover{box-shadow:0 20px 50px rgba(59,158,255,0.12);}
.system-card.isolated{border-top:3px solid var(--alkyne);}.system-card.isolated:hover{box-shadow:0 20px 50px rgba(255,95,126,0.12);}
.system-title{font-family:'DM Serif Display',serif;font-size:1.3rem;margin-bottom:14px;}
.system-card.open .system-title{color:var(--alkane);}.system-card.closed .system-title{color:var(--alkene);}.system-card.isolated .system-title{color:var(--alkyne);}
.system-prop{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:0.85rem;}
.system-prop:last-child{border-bottom:none;}.system-prop span{color:var(--muted);}
.system-prop b.yes{color:#4ade80;}.system-prop b.no{color:#f87171;}
.heat-formula-box{background:var(--surface2);border:1px solid rgba(251,146,60,0.25);border-radius:22px;padding:36px;text-align:center;box-shadow:0 0 40px rgba(251,146,60,0.08);margin-top:24px;}
.heat-formula-box .big-eq{font-family:'JetBrains Mono',monospace;font-size:2.4rem;font-weight:700;color:var(--thermo);margin-bottom:20px;display:block;}
.heat-vars{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:16px;}
.heat-var{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px 20px;text-align:center;}
.heat-var .sym{font-family:'JetBrains Mono',monospace;font-size:1.3rem;color:var(--thermo);font-weight:700;}
.heat-var .def{font-size:0.78rem;color:var(--muted);margin-top:4px;}
.reaction-table{width:100%;border-collapse:collapse;margin-top:24px;border-radius:18px;overflow:hidden;}
.reaction-table th{padding:16px 22px;font-size:0.78rem;font-family:'JetBrains Mono',monospace;letter-spacing:0.1em;text-transform:uppercase;background:var(--surface2);border-bottom:2px solid var(--border);}
.reaction-table th:nth-child(2){color:var(--thermo);}.reaction-table th:nth-child(3){color:var(--alkene);}
.reaction-table td{padding:15px 22px;border-bottom:1px solid var(--border);font-size:0.9rem;}
.reaction-table tr:last-child td{border-bottom:none;}
.reaction-table td:first-child{font-family:'JetBrains Mono',monospace;color:var(--accent);font-weight:700;}
.reaction-table tr:hover td{background:rgba(255,255,255,0.02);}
.sign-pos{color:#4ade80;font-weight:700;font-family:'JetBrains Mono',monospace;}
.sign-neg{color:#f87171;font-weight:700;font-family:'JetBrains Mono',monospace;}
.nuclear-notation{background:var(--surface2);border:1px solid rgba(192,132,252,0.2);border-radius:22px;padding:36px;display:flex;align-items:center;gap:48px;flex-wrap:wrap;margin-bottom:24px;}
.notation-symbol{position:relative;display:inline-block;font-family:'JetBrains Mono',monospace;}
.notation-symbol .elem{font-size:5rem;font-weight:700;color:var(--nuclear);line-height:1;}
.notation-symbol .mass-num{position:absolute;top:-8px;right:-28px;font-size:1.6rem;color:var(--accent);font-weight:700;}
.notation-symbol .atom-num{position:absolute;bottom:4px;left:-28px;font-size:1.6rem;color:var(--ions-pos);font-weight:700;}
.notation-legend{display:flex;flex-direction:column;gap:12px;}
.notation-row{display:flex;align-items:center;gap:14px;}
.notation-key{font-family:'JetBrains Mono',monospace;font-size:1rem;font-weight:700;min-width:30px;}
.notation-key.z{color:var(--ions-pos);}.notation-key.a{color:var(--accent);}.notation-key.n{color:var(--nuclear);}
.notation-desc{font-size:0.88rem;color:var(--muted);}
.notation-desc b{color:var(--text);}
.nbe-steps{display:flex;flex-direction:column;gap:12px;margin-top:24px;}
.nbe-step{display:flex;gap:16px;align-items:flex-start;background:var(--surface2);border-radius:14px;padding:16px 20px;border:1px solid var(--border);}
.step-num{width:28px;height:28px;border-radius:8px;background:rgba(192,132,252,0.15);border:1px solid rgba(192,132,252,0.3);font-family:'JetBrains Mono',monospace;font-size:0.8rem;color:var(--nuclear);text-align:center;line-height:28px;flex-shrink:0;font-weight:700;}
.step-content{font-size:0.88rem;color:var(--muted);}
.step-content b{color:var(--text);}
.step-content code{font-family:'JetBrains Mono',monospace;color:var(--nuclear);font-size:0.85rem;background:rgba(192,132,252,0.08);padding:2px 6px;border-radius:5px;}
.unit-conv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px;}
.unit-row{display:flex;align-items:center;background:var(--surface2);border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.unit-from{padding:12px 18px;font-family:'JetBrains Mono',monospace;font-size:0.95rem;font-weight:700;color:var(--text);flex:1;text-align:center;}
.unit-op{padding:12px 14px;background:rgba(79,255,176,0.08);font-family:'JetBrains Mono',monospace;font-size:0.78rem;color:var(--accent);border-left:1px solid var(--border);border-right:1px solid var(--border);white-space:nowrap;}
.unit-to{padding:12px 18px;font-family:'JetBrains Mono',monospace;font-size:0.95rem;font-weight:700;color:var(--nuclear);flex:1;text-align:center;}
.radiation-table{width:100%;border-collapse:collapse;margin-top:24px;}
.radiation-table th{padding:14px 18px;font-size:0.76rem;font-family:'JetBrains Mono',monospace;letter-spacing:0.1em;text-transform:uppercase;background:var(--surface2);border:1px solid var(--border);}
.radiation-table th:nth-child(2){color:#fbbf24;}.radiation-table th:nth-child(3){color:#60a5fa;}.radiation-table th:nth-child(4){color:#a78bfa;}
.radiation-table td{padding:13px 18px;border:1px solid var(--border);font-size:0.87rem;color:var(--muted);}
.radiation-table td:first-child{color:var(--muted);font-weight:600;font-size:0.8rem;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:0.08em;}
.radiation-table tr:hover td{background:rgba(255,255,255,0.02);}
.rad-alpha{color:#fbbf24!important;font-weight:700;}.rad-beta{color:#60a5fa!important;font-weight:700;}.rad-gamma{color:#a78bfa!important;font-weight:700;}
.halflife-box{background:var(--surface2);border:1px solid rgba(192,132,252,0.2);border-radius:20px;padding:32px;margin-top:24px;}
.halflife-formula{font-family:'JetBrains Mono',monospace;font-size:1.4rem;color:var(--nuclear);margin-bottom:16px;padding:16px;background:var(--bg);border-radius:12px;text-align:center;border:1px solid var(--border);}
.halflife-steps{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
.hl-step{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px 18px;}
.hl-step .hl-label{font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--nuclear);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px;}
.hl-step .hl-desc{font-size:0.82rem;color:var(--muted);}
.emc2-box{background:var(--surface2);border:1px solid rgba(192,132,252,0.25);border-radius:22px;padding:40px;text-align:center;margin-bottom:28px;box-shadow:0 0 50px rgba(192,132,252,0.07);}
.emc2-eq{font-family:'DM Serif Display',serif;font-size:3.5rem;color:var(--nuclear);margin-bottom:24px;display:block;}
.emc2-vars{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;}
.emc2-var{text-align:center;}
.emc2-var .v-sym{font-family:'JetBrains Mono',monospace;font-size:1.4rem;color:var(--nuclear);font-weight:700;}
.emc2-var .v-desc{font-size:0.78rem;color:var(--muted);display:block;margin-top:4px;}
.pct-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:24px;}
.pct-card{background:var(--surface2);border-radius:18px;padding:22px;border:1px solid var(--border);}
.pct-card h4{font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--solutions);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:12px;}
.pct-eq{font-family:'JetBrains Mono',monospace;font-size:0.82rem;color:var(--accent);line-height:2;}
.pct-note{font-size:0.78rem;color:var(--muted);margin-top:8px;}
.frez-box{background:var(--surface2);border:1px solid rgba(52,211,153,0.2);border-radius:18px;padding:28px;margin-top:18px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.frez-formula{font-family:'JetBrains Mono',monospace;font-size:1.3rem;color:var(--solutions);font-weight:700;}
.frez-desc{font-size:0.88rem;color:var(--muted);}
.bond-compare{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px;}
.bond-card{background:var(--surface2);border-radius:18px;padding:24px;border:1px solid var(--border);text-align:center;transition:transform var(--transition),box-shadow var(--transition);}
.bond-card:hover{transform:translateY(-5px);}
.bond-card.ionic{border-top:3px solid var(--ions-pos);}.bond-card.ionic:hover{box-shadow:0 20px 50px rgba(244,114,182,0.12);}
.bond-card.covalent{border-top:3px solid var(--alkene);}.bond-card.covalent:hover{box-shadow:0 20px 50px rgba(59,158,255,0.12);}
.bond-card.metallic{border-top:3px solid var(--bonding);}.bond-card.metallic:hover{box-shadow:0 20px 50px rgba(167,139,250,0.12);}
.bond-icon{font-size:2.2rem;margin-bottom:10px;display:block;}
.bond-name{font-family:'DM Serif Display',serif;font-size:1.2rem;margin-bottom:8px;}
.bond-card.ionic .bond-name{color:var(--ions-pos);}.bond-card.covalent .bond-name{color:var(--alkene);}.bond-card.metallic .bond-name{color:var(--bonding);}
.bond-card p{color:var(--muted);font-size:0.82rem;line-height:1.6;}
.bond-card ul{color:var(--muted);font-size:0.8rem;padding-left:14px;margin-top:8px;text-align:left;}.bond-card li{margin-bottom:4px;}
.rxn-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px;}
.rxn-card{background:var(--surface2);border-radius:15px;padding:20px;border:1px solid var(--border);border-left:4px solid var(--reactions);transition:box-shadow var(--transition);}
.rxn-card:hover{box-shadow:0 0 28px rgba(245,158,11,0.15);}
.rxn-type{font-family:'JetBrains Mono',monospace;font-size:0.66rem;color:var(--reactions);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:5px;}
.rxn-card h3{font-size:0.97rem;color:var(--text);margin-bottom:5px;}
.rxn-card p{color:var(--muted);font-size:0.82rem;margin-bottom:9px;}
.rxn-eq{font-family:'JetBrains Mono',monospace;font-size:0.82rem;color:var(--accent);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 12px;line-height:1.8;}
.ph-scale{margin-top:22px;border-radius:14px;overflow:hidden;border:1px solid var(--border);}
.ph-bar{display:flex;height:48px;}
.ph-seg{flex:1;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:0.7rem;font-weight:700;color:#fff;cursor:default;}
.ph-labels{display:flex;margin-top:5px;}
.ph-label{flex:1;text-align:center;font-size:0.6rem;color:var(--muted);font-family:'JetBrains Mono',monospace;}
.acid-base-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px;}
.ab-card{background:var(--surface2);border-radius:15px;padding:20px;border:1px solid var(--border);}
.ab-card.acid{border-top:3px solid var(--acids);}.ab-card.base{border-top:3px solid var(--alkane);}
.ab-title{font-family:'DM Serif Display',serif;font-size:1.2rem;margin-bottom:9px;}
.ab-card.acid .ab-title{color:var(--acids);}.ab-card.base .ab-title{color:var(--alkane);}
.ab-card p,.ab-card ul{color:var(--muted);font-size:0.82rem;}.ab-card ul{padding-left:14px;margin-top:5px;}.ab-card li{margin-bottom:4px;}
.oilrig{background:linear-gradient(135deg,rgba(34,211,238,0.06),rgba(129,140,248,0.06));border:1px solid rgba(34,211,238,0.2);border-radius:14px;padding:18px 26px;margin-top:16px;display:flex;align-items:center;justify-content:center;gap:44px;flex-wrap:wrap;}
.oilrig-item{text-align:center;}
.oilrig-letters{font-family:'JetBrains Mono',monospace;font-size:2.2rem;font-weight:700;color:var(--electro);letter-spacing:0.2em;}
.oilrig-desc{font-size:0.74rem;color:var(--muted);margin-top:5px;}
.redox-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;}
.redox-half{background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:16px;}
.redox-half h4{font-family:'JetBrains Mono',monospace;font-size:0.7rem;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:7px;}
.redox-half.ox h4{color:var(--acids);}.redox-half.red h4{color:var(--alkene);}
.redox-half p{font-size:0.82rem;color:var(--muted);margin-bottom:6px;}
.redox-half code{font-family:'JetBrains Mono',monospace;font-size:0.82rem;color:var(--accent);background:rgba(79,255,176,0.07);padding:2px 6px;border-radius:4px;}
.gas-laws-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px;}
.gas-law-card{background:var(--surface2);border-radius:15px;padding:20px;border:1px solid var(--border);border-top:3px solid var(--gas);transition:transform var(--transition),box-shadow var(--transition);}
.gas-law-card:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(129,140,248,0.12);}
.gas-law-name{font-family:'JetBrains Mono',monospace;font-size:0.66rem;color:var(--gas);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:5px;}
.gas-law-card h3{font-size:0.97rem;color:var(--text);margin-bottom:7px;}
.gas-formula{font-family:'JetBrains Mono',monospace;font-size:1.25rem;color:var(--accent);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:11px 14px;text-align:center;margin:9px 0;}
.gas-law-card p{color:var(--muted);font-size:0.81rem;}
.gas-law-card ul{color:var(--muted);font-size:0.79rem;padding-left:14px;margin-top:5px;}.gas-law-card li{margin-bottom:3px;}
.gas-calc-box{background:var(--surface2);border:1px solid rgba(129,140,248,0.2);border-radius:16px;padding:24px;margin-top:24px;}
.gas-calc-title{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--gas);letter-spacing:0.14em;text-transform:uppercase;margin-bottom:12px;}
.gas-calc-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;}
.gas-calc-tab{padding:6px 14px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:0.73rem;cursor:pointer;transition:color var(--transition),border-color var(--transition),background var(--transition);}
.gas-calc-tab.active{background:rgba(129,140,248,0.12);border-color:rgba(129,140,248,0.4);color:var(--gas);}
.gas-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.gas-field label{display:block;font-family:'JetBrains Mono',monospace;font-size:0.63rem;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:4px;}
.gas-field input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:9px 13px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:0.92rem;outline:none;transition:border-color var(--transition);}
.gas-field input:focus{border-color:var(--gas);}
.gas-field input[readonly]{color:var(--gas);border-color:rgba(129,140,248,0.3);}
.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;}
.tool-panel{background:var(--surface2);border-radius:18px;padding:26px;border:1px solid var(--border);}
.tool-title-tag{font-family:'JetBrains Mono',monospace;font-size:0.66rem;color:var(--accent);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:8px;}
.tool-panel h3{font-family:'DM Serif Display',serif;font-size:1.25rem;color:var(--text);margin-bottom:12px;}
.tool-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:0.95rem;outline:none;transition:border-color var(--transition);}
.tool-input:focus{border-color:var(--accent);}
.tool-input::placeholder{color:var(--muted);}
.tool-select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 14px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:0.87rem;outline:none;cursor:pointer;}
.tool-btn{background:rgba(79,255,176,0.1);border:1px solid rgba(79,255,176,0.3);border-radius:10px;padding:10px 20px;color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:0.83rem;font-weight:700;cursor:pointer;width:100%;margin-top:10px;transition:background var(--transition),border-color var(--transition),transform var(--transition);}
.tool-btn:hover{background:rgba(79,255,176,0.18);border-color:var(--accent);transform:translateY(-1px);}
.tool-result{margin-top:12px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:16px 20px;min-height:56px;}
.tool-result-main{font-family:'JetBrains Mono',monospace;font-size:1.7rem;font-weight:700;color:var(--accent);display:block;}
.tool-result-breakdown{font-size:0.79rem;color:var(--muted);margin-top:5px;line-height:1.8;}
.tool-result-formula{font-family:'JetBrains Mono',monospace;font-size:1.45rem;font-weight:700;color:var(--accent);}
.tool-empty{color:var(--muted);font-size:0.83rem;font-style:italic;}
.tool-row{display:flex;gap:9px;margin-top:9px;align-items:center;}
.tool-row label{font-size:0.77rem;color:var(--muted);white-space:nowrap;}
.tool-row .tool-select{flex:1;}
.decay-table{width:100%;border-collapse:collapse;margin-top:10px;font-size:0.8rem;}
.decay-table th{background:var(--surface);padding:7px 11px;font-family:'JetBrains Mono',monospace;font-size:0.63rem;color:var(--nuclear);letter-spacing:0.1em;text-transform:uppercase;border-bottom:1px solid var(--border);}
.decay-table td{padding:7px 11px;border-bottom:1px solid var(--border);color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:0.78rem;}
.decay-table tr:last-child td{border-bottom:none;}
.decay-bar{display:inline-block;height:7px;background:var(--nuclear);border-radius:4px;vertical-align:middle;}
/* FUNCTIONAL GROUPS */
.fg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:24px;}
.fg-card{background:var(--surface2);border-radius:18px;padding:22px;border:1px solid var(--border);transition:transform var(--transition),box-shadow var(--transition);position:relative;overflow:hidden;}
.fg-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;}
.fg-card.fg-alcohol::after{background:var(--alkane);}
.fg-card.fg-aldehyde::after{background:var(--alkyne);}
.fg-card.fg-ketone::after{background:var(--isomer);}
.fg-card.fg-acid::after{background:var(--acids);}
.fg-card.fg-ester::after{background:var(--alkene);}
.fg-card.fg-amine::after{background:var(--nuclear);}
.fg-card.fg-ether::after{background:var(--electro);}
.fg-card.fg-amide::after{background:var(--solutions);}
.fg-card:hover{transform:translateY(-5px);}
.fg-card.fg-alcohol:hover{box-shadow:0 18px 44px rgba(16,212,138,0.14);}
.fg-card.fg-aldehyde:hover{box-shadow:0 18px 44px rgba(255,95,126,0.14);}
.fg-card.fg-ketone:hover{box-shadow:0 18px 44px rgba(255,179,71,0.14);}
.fg-card.fg-acid:hover{box-shadow:0 18px 44px rgba(248,113,113,0.14);}
.fg-card.fg-ester:hover{box-shadow:0 18px 44px rgba(59,158,255,0.14);}
.fg-card.fg-amine:hover{box-shadow:0 18px 44px rgba(192,132,252,0.14);}
.fg-card.fg-ether:hover{box-shadow:0 18px 44px rgba(34,211,238,0.14);}
.fg-card.fg-amide:hover{box-shadow:0 18px 44px rgba(52,211,153,0.14);}
.fg-symbol{font-family:'JetBrains Mono',monospace;font-size:1.3rem;font-weight:700;margin-bottom:10px;display:block;}
.fg-card.fg-alcohol .fg-symbol{color:var(--alkane);}
.fg-card.fg-aldehyde .fg-symbol{color:var(--alkyne);}
.fg-card.fg-ketone .fg-symbol{color:var(--isomer);}
.fg-card.fg-acid .fg-symbol{color:var(--acids);}
.fg-card.fg-ester .fg-symbol{color:var(--alkene);}
.fg-card.fg-amine .fg-symbol{color:var(--nuclear);}
.fg-card.fg-ether .fg-symbol{color:var(--electro);}
.fg-card.fg-amide .fg-symbol{color:var(--solutions);}
.fg-name{font-size:0.97rem;font-weight:700;color:var(--text);margin-bottom:4px;}
.fg-suffix{font-family:'JetBrains Mono',monospace;font-size:0.68rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:3px 8px;display:inline-block;margin-bottom:8px;color:var(--muted);}
.fg-card p{font-size:0.8rem;color:var(--muted);margin-bottom:7px;line-height:1.5;}
.fg-example{font-family:'JetBrains Mono',monospace;font-size:0.79rem;background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:6px 10px;}
.fg-card.fg-alcohol .fg-example{color:var(--alkane);}
.fg-card.fg-aldehyde .fg-example{color:var(--alkyne);}
.fg-card.fg-ketone .fg-example{color:var(--isomer);}
.fg-card.fg-acid .fg-example{color:var(--acids);}
.fg-card.fg-ester .fg-example{color:var(--alkene);}
.fg-card.fg-amine .fg-example{color:var(--nuclear);}
.fg-card.fg-ether .fg-example{color:var(--electro);}
.fg-card.fg-amide .fg-example{color:var(--solutions);}
/* EQUILIBRIUM */
.kc-box{background:var(--surface2);border:1px solid rgba(45,212,191,0.25);border-radius:18px;padding:28px;text-align:center;margin-bottom:18px;box-shadow:0 0 40px rgba(45,212,191,0.06);}
.kc-formula{font-family:'JetBrains Mono',monospace;font-size:1.35rem;color:var(--equilibrium);display:block;margin-bottom:12px;line-height:2;}
.kc-note{font-size:0.83rem;color:var(--muted);}
.kc-note b{color:var(--text);}
.kc-split{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:18px;}
.kc-card{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center;}
.kc-val{font-family:'JetBrains Mono',monospace;font-size:1.05rem;font-weight:700;margin-bottom:4px;}
.kc-desc{font-size:0.77rem;color:var(--muted);}
.lc-principle{background:linear-gradient(135deg,rgba(45,212,191,0.06),rgba(129,140,248,0.06));border:1px solid rgba(45,212,191,0.2);border-radius:16px;padding:22px 26px;margin-top:18px;}
.lc-principle-title{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--equilibrium);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:8px;}
.lc-principle p{font-size:0.88rem;color:var(--muted);}
.lc-principle b{color:var(--text);}
.lc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:16px;}
.lc-card{background:var(--surface2);border-radius:12px;padding:16px;border:1px solid var(--border);}
.lc-stress{font-family:'JetBrains Mono',monospace;font-size:0.66rem;color:var(--alkyne);background:rgba(255,95,126,0.08);padding:3px 8px;border-radius:5px;display:inline-block;margin-bottom:6px;letter-spacing:0.08em;text-transform:uppercase;}
.lc-card h4{font-size:0.87rem;color:var(--text);margin-bottom:5px;}
.lc-response{font-size:0.79rem;color:var(--muted);line-height:1.5;}
.ice-box{background:var(--surface2);border-radius:16px;border:1px solid var(--border);overflow:hidden;margin-top:18px;}
.ice-box-title{font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:var(--equilibrium);letter-spacing:0.14em;text-transform:uppercase;padding:12px 18px;border-bottom:1px solid var(--border);background:var(--bg);}
.ice-table{width:100%;border-collapse:collapse;}
.ice-table th{background:var(--bg);padding:12px 16px;font-family:'JetBrains Mono',monospace;font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;border-bottom:1px solid var(--border);text-align:center;}
.ice-table td{padding:11px 16px;border-bottom:1px solid var(--border);text-align:center;font-family:'JetBrains Mono',monospace;font-size:0.84rem;}
.ice-table tr:last-child td{border-bottom:none;}
.ice-table td:first-child{text-align:left;font-weight:700;font-size:0.75rem;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;}
.ice-i{color:var(--alkane)!important;}.ice-c{color:var(--alkyne)!important;}.ice-e{color:var(--accent)!important;}
/* ELEMENT MODAL */
.elem-modal-overlay{display:none;position:fixed;inset:0;background:rgba(7,9,15,0.93);z-index:99998;backdrop-filter:blur(14px);align-items:center;justify-content:center;}
.elem-modal-overlay.open{display:flex;}
.elem-modal{background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:40px;width:min(580px,94vw);max-height:90vh;overflow-y:auto;position:relative;animation:fadeUp 0.3s ease;}
.elem-modal-close{position:absolute;top:18px;right:18px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;width:34px;height:34px;cursor:pointer;color:var(--muted);font-size:1rem;display:flex;align-items:center;justify-content:center;transition:color var(--transition),border-color var(--transition);}
.elem-modal-close:hover{border-color:var(--accent);color:var(--accent);}
.elem-modal-header{display:flex;align-items:flex-start;gap:24px;margin-bottom:28px;}
.elem-modal-symbol{font-family:'JetBrains Mono',monospace;font-size:4.5rem;font-weight:700;line-height:1;min-width:90px;text-align:center;}
.elem-modal-name{font-family:'DM Serif Display',serif;font-size:2.1rem;color:var(--text);line-height:1;margin-bottom:7px;}
.elem-modal-type-badge{font-family:'JetBrains Mono',monospace;font-size:0.66rem;letter-spacing:0.15em;text-transform:uppercase;padding:4px 13px;border-radius:50px;border:1px solid;display:inline-block;margin-bottom:7px;}
.elem-modal-state{font-size:0.82rem;color:var(--muted);}
.elem-modal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:22px;}
.elem-stat{background:var(--surface2);border-radius:12px;padding:13px;text-align:center;border:1px solid var(--border);}
.elem-stat-val{font-family:'JetBrains Mono',monospace;font-size:1rem;font-weight:700;color:var(--accent);display:block;line-height:1.2;}
.elem-stat-label{font-size:0.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em;margin-top:4px;display:block;}
.elem-econfig{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin-top:14px;}
.elem-econfig-label{font-size:0.65rem;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase;display:block;margin-bottom:4px;font-family:'JetBrains Mono',monospace;}
.elem-econfig-val{font-family:'JetBrains Mono',monospace;font-size:0.88rem;color:var(--nuclear);}
.elem-uses{font-size:0.83rem;color:var(--muted);margin-top:14px;line-height:1.7;background:var(--surface2);border-radius:12px;padding:14px 18px;border:1px solid var(--border);}
.elem-uses b{color:var(--text);}
/* PERIODIC TABLE */
.pt-container{margin-top:32px;overflow-x:auto;}
.pt-grid{display:grid;grid-template-columns:repeat(18,minmax(52px,1fr));gap:3px;min-width:980px;}
.pt-cell{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:5px 3px;text-align:center;cursor:pointer;position:relative;transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);min-height:58px;}
.pt-cell:hover{transform:scale(1.12);z-index:10;border-color:var(--accent);box-shadow:0 0 20px rgba(79,255,176,0.3);}
.pt-cell .pt-num{font-family:'JetBrains Mono',monospace;font-size:0.55rem;color:var(--muted);display:block;line-height:1.2;}
.pt-cell .pt-sym{font-family:'JetBrains Mono',monospace;font-size:1.05rem;font-weight:700;display:block;line-height:1.2;}
.pt-cell .pt-name{font-size:0.45rem;color:var(--muted);display:block;line-height:1.3;}
.pt-cell .pt-mass{font-family:'JetBrains Mono',monospace;font-size:0.48rem;color:var(--muted);display:block;}
.pt-cell.empty{background:transparent;border-color:transparent;cursor:default;}
.pt-cell.empty:hover{transform:none;box-shadow:none;}
.pt-cell.alkali{border-color:rgba(239,68,68,0.3);}.pt-cell.alkali .pt-sym{color:#f87171;}
.pt-cell.alkaline{border-color:rgba(251,146,60,0.3);}.pt-cell.alkaline .pt-sym{color:#fb923c;}
.pt-cell.transition{border-color:rgba(250,204,21,0.3);}.pt-cell.transition .pt-sym{color:#facc15;}
.pt-cell.post-trans{border-color:rgba(163,163,163,0.3);}.pt-cell.post-trans .pt-sym{color:#a3a3a3;}
.pt-cell.metalloid{border-color:rgba(52,211,153,0.3);}.pt-cell.metalloid .pt-sym{color:#34d399;}
.pt-cell.nonmetal{border-color:rgba(79,255,176,0.3);}.pt-cell.nonmetal .pt-sym{color:var(--accent);}
.pt-cell.halogen{border-color:rgba(251,191,36,0.3);}.pt-cell.halogen .pt-sym{color:#fbbf24;}
.pt-cell.noble{border-color:rgba(168,85,247,0.3);}.pt-cell.noble .pt-sym{color:#a855f7;}
.pt-cell.lanthanide{border-color:rgba(244,114,182,0.3);}.pt-cell.lanthanide .pt-sym{color:#f472b6;}
.pt-cell.actinide{border-color:rgba(56,189,248,0.3);}.pt-cell.actinide .pt-sym{color:#38bdf8;}
.pt-cell:hover .pt-name,.pt-cell:hover .pt-mass{color:var(--text);}
.pt-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.pt-leg-item{display:flex;align-items:center;gap:6px;font-size:0.75rem;color:var(--muted);}
.pt-leg-dot{width:10px;height:10px;border-radius:3px;}
.pt-series-grid{display:grid;grid-template-columns:repeat(15,minmax(52px,1fr));gap:3px;min-width:820px;margin-top:6px;}
/* SEARCH */
#searchOverlay{display:none;position:fixed;inset:0;background:rgba(7,9,15,0.93);z-index:99999;backdrop-filter:blur(14px);align-items:flex-start;justify-content:center;padding-top:14vh;}
#searchOverlay.open{display:flex;}
.search-modal{width:min(680px,90vw);}
.global-search-input{width:100%;background:var(--surface);border:2px solid var(--accent);border-radius:16px;padding:16px 22px;font-family:'Outfit',sans-serif;font-size:1.1rem;color:var(--text);outline:none;}
.global-search-input::placeholder{color:var(--muted);}
.search-results{margin-top:12px;max-height:55vh;overflow-y:auto;display:flex;flex-direction:column;gap:7px;}
.search-hit{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 18px;cursor:pointer;transition:border-color var(--transition),background var(--transition);}
.search-hit:hover{border-color:var(--accent);background:rgba(79,255,176,0.05);}
.search-hit-title{font-weight:700;font-size:0.93rem;color:var(--text);}
.search-hit-ctx{font-size:0.79rem;color:var(--muted);margin-top:2px;}
.search-hit-tag{font-family:'JetBrains Mono',monospace;font-size:0.62rem;color:var(--accent);border:1px solid rgba(79,255,176,0.3);padding:2px 7px;border-radius:50px;margin-left:7px;}
.search-empty{text-align:center;color:var(--muted);font-size:0.88rem;padding:28px;}
.search-hint{font-size:0.75rem;color:var(--muted);text-align:center;margin-top:8px;}
.progress-bar-wrap{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:14px 22px;margin-bottom:28px;position:relative;z-index:1;display:flex;align-items:center;gap:14px;}
.progress-bar-track{flex:1;height:7px;background:var(--surface2);border-radius:50px;overflow:hidden;}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--alkene));border-radius:50px;transition:width 0.5s ease;width:0%;}
.progress-label{font-family:'JetBrains Mono',monospace;font-size:0.73rem;color:var(--accent);white-space:nowrap;}
.progress-check{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:7px;}
.progress-check input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;}
.progress-check label{cursor:pointer;font-family:'JetBrains Mono',monospace;letter-spacing:0.08em;font-size:0.66rem;text-transform:uppercase;color:var(--muted);}
.nav-actions{display:flex;gap:7px;flex-shrink:0;}
.nav-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);cursor:pointer;font-size:0.95rem;transition:color var(--transition),border-color var(--transition),background var(--transition);display:flex;align-items:center;justify-content:center;}
.nav-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(79,255,176,0.08);}
.mob-link{display:block;color:var(--muted);text-decoration:none;font-size:0.88rem;font-weight:500;padding:10px 10px;border-radius:10px;transition:color var(--transition),background var(--transition);margin-bottom:2px;}
.mob-link:hover,.mob-link:active{color:var(--accent);background:rgba(79,255,176,0.07);}
.nav-hamburger{display:flex;}
.chapter-divider{background:linear-gradient(135deg,rgba(79,255,176,0.05),rgba(56,189,248,0.05));border:1px solid rgba(79,255,176,0.12);border-radius:22px;padding:28px 36px;margin:12px 0 28px;display:flex;align-items:flex-start;gap:18px;position:relative;z-index:1;}
.chapter-icon{font-size:2.2rem;line-height:1;flex-shrink:0;margin-top:4px;}
.chapter-label{font-family:'JetBrains Mono',monospace;font-size:0.62rem;color:var(--accent);letter-spacing:0.18em;text-transform:uppercase;margin-bottom:4px;}
.chapter-title{font-family:'DM Serif Display',serif;font-size:1.6rem;color:var(--text);}
.chapter-desc{font-size:0.82rem;color:var(--muted);margin-top:4px;line-height:1.6;}
.chapter-count{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--muted);border:1px solid var(--border);border-radius:10px;padding:6px 14px;white-space:nowrap;flex-shrink:0;margin-top:4px;}
[data-theme="light"]{
  --bg:#f4f6ff;--surface:#ffffff;--surface2:#eaedff;--border:rgba(79,70,229,0.13);
  --accent:#059669;--accent2:#2563eb;--alkane:#059669;--alkene:#2563eb;--alkyne:#dc2626;
  --isomer:#d97706;--nuclear:#7c3aed;--thermo:#ea580c;--solutions:#0d9488;
  --ions-pos:#db2777;--ions-neg:#2563eb;--bonding:#7c3aed;--reactions:#d97706;
  --acids:#dc2626;--electro:#0891b2;--gas:#4f46e5;--equilibrium:#0d9488;
  --text:#1e1b4b;--muted:#6b7a99;
  --accent3:#16a34a;--tag-bg:rgba(5,150,105,0.10);
}
[data-theme="light"] nav{background:rgba(244,246,255,0.93);}
[data-theme="light"] #bgCanvas{opacity:0.07;}
[data-theme="light"] .chapter-divider{background:linear-gradient(135deg,rgba(5,150,105,0.06),rgba(37,99,235,0.06));border-color:rgba(79,70,229,0.15);}
[data-theme="light"] header{background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(5,150,105,0.08) 0%,transparent 70%);}
footer{position:relative;z-index:1;background:var(--surface);border-top:1px solid var(--border);padding:72px 20px;text-align:center;margin-top:60px;}
.footer-logo{font-family:'JetBrains Mono',monospace;font-size:1.5rem;font-weight:700;color:var(--text);display:block;margin-bottom:14px;}
.footer-logo span{color:var(--accent);}
footer p{color:var(--muted);font-size:0.85rem;margin-bottom:6px;}
.footer-divider{width:44px;height:2px;background:var(--accent);margin:22px auto;border-radius:2px;}
.footer-meta{display:inline-flex;gap:22px;flex-wrap:wrap;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--muted);}
.footer-meta span{display:flex;align-items:center;gap:5px;}
.footer-contact-row{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:14px;}
.footer-contact-row a{font-size:0.75rem;color:var(--muted);text-decoration:none;opacity:0.75;transition:opacity 0.2s,color 0.2s;}
.footer-contact-row a:hover{opacity:1;color:var(--accent);}
.dot{width:5px;height:5px;border-radius:50%;background:var(--accent);display:inline-block;}
[data-tip]{position:relative;cursor:help;}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:130%;left:50%;transform:translateX(-50%);background:var(--surface2);color:var(--text);border:1px solid var(--border);font-size:0.75rem;padding:6px 12px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.2s ease;}
[data-tip]:hover::after{opacity:1;}
/* ========== RESPONSIVE SYSTEM ========== */
@media print{
  #bgCanvas,nav,.nav-actions,#searchOverlay,.progress-bar-wrap,.elem-modal-overlay{display:none!important;}
  .card{opacity:1!important;transform:none!important;page-break-inside:avoid;box-shadow:none!important;}
  body{background:#fff!important;color:#000!important;}
}
@media(max-width:1100px){
  .ecs-layout{grid-template-columns:1fr;}
}
@media(max-width:900px){
  .tab-wrapper{grid-template-columns:1fr;}
  .tab-sidebar{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:8px;scrollbar-width:none;}
  .tab-sidebar::-webkit-scrollbar{display:none;}
  .tab-link{white-space:nowrap;padding:9px 14px;border-radius:9px;font-size:0.8rem;}
  .tab-step{display:none;}
  .bond-compare{grid-template-columns:1fr 1fr;}
  .gas-laws-grid{grid-template-columns:1fr 1fr;}
  .kc-split{grid-template-columns:1fr 1fr 1fr;}
  .ions-split{grid-template-columns:1fr;}
  .rxn-grid{grid-template-columns:1fr 1fr;}
  .acid-base-grid{grid-template-columns:1fr 1fr;}
  .redox-split{grid-template-columns:1fr 1fr;}
  .systems-grid{grid-template-columns:1fr 1fr 1fr;}
  .pct-grid{grid-template-columns:1fr 1fr;}
  .halflife-steps{grid-template-columns:1fr 1fr;}
  .isomer-grid{grid-template-columns:1fr 1fr;}
  .conv-grid{grid-template-columns:1fr;}
  .unit-conv-grid{grid-template-columns:1fr 1fr;}
  .tools-grid{grid-template-columns:1fr 1fr;}
  .gas-fields{grid-template-columns:1fr 1fr;}
  .energy-profile-grid{grid-template-columns:1fr 1fr;}
  .polymer-split{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  .nav-hamburger{display:flex!important;}
  nav{padding:0 5%;}
  .nav-logo{font-size:1rem;}
  header{padding:70px 5% 50px;}
  header h1{font-size:clamp(1.8rem,8vw,3rem);}
  .wrapper{padding:0 4% 60px;}
  .card{padding:20px 14px;border-radius:16px;}
  .chapter-divider{padding:18px 16px;gap:12px;align-items:flex-start;margin:8px 0 20px;}
  .chapter-icon{font-size:1.6rem;margin-top:2px;}
  .chapter-title{font-size:1.25rem;}
  .chapter-desc{font-size:0.78rem;line-height:1.5;}
  .chapter-count{display:none;}
  .calc-box{padding:18px 16px;gap:14px;border-radius:18px;}
  .calc-left label{font-size:0.6rem;margin-bottom:8px;}
  input[type="number"]#carbonN{font-size:2rem;width:70px;}
  .calc-btn{width:36px;height:36px;font-size:1.1rem;border-radius:9px;}
  .calc-name{font-size:1.2rem;min-width:100px;padding-left:12px;}
  .calc-name small{font-size:0.64rem;}
  .input-row{gap:10px;}
  .result-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;}
  .res-card{padding:14px 10px;border-radius:14px;}
  .chem-formula{font-size:1.3rem;margin:8px 0 12px;}
  .res-type{font-size:0.52rem;letter-spacing:0.12em;}
  .res-card h3{font-size:0.76rem;margin-bottom:10px;}
  .res-meta{font-size:0.68rem;gap:2px;padding-top:10px;}
  .info-grid,
  .fg-grid,
  .bond-compare,
  .gas-laws-grid,
  .rxn-grid,
  .acid-base-grid,
  .redox-split,
  .tools-grid,
  .gas-fields,
  .ions-split,
  .systems-grid,
  .pct-grid,
  .halflife-steps,
  .isomer-grid,
  .conv-grid,
  .unit-conv-grid,
  .kc-split,
  .energy-profile-grid,
  .polymer-split,
  .ecs-layout,
  .blocks-visual{grid-template-columns:1fr;}
  .elem-modal-stats{grid-template-columns:1fr 1fr;}
  .iupac-root-grid{grid-template-columns:repeat(5,1fr);}
  .iupac-sub-grid{grid-template-columns:repeat(2,1fr);}
  .ions-columns{grid-template-columns:repeat(3,1fr);}
  .block-card{flex-direction:column;}
  .tab-wrapper{grid-template-columns:1fr;}
  .tab-sidebar{flex-direction:row;overflow-x:auto;gap:4px;padding-bottom:6px;scrollbar-width:none;}
  .tab-sidebar::-webkit-scrollbar{display:none;}
  .tab-link{white-space:nowrap;padding:8px 12px;border-radius:8px;font-size:0.76rem;}
  .tab-step{display:none;}
  .tab-pane{padding:20px 16px;}
  .elem-modal{padding:22px 16px;}
  .elem-modal-symbol{font-size:3rem;}
  .elem-modal-name{font-size:1.4rem;}
  /* ── New organic section mobile overrides ── */
  .structure-card{padding:1.25rem;gap:1rem;}
  .huckel-box{padding:1.25rem 1.5rem;gap:1rem;}
  .info-banner{padding:1rem 1.25rem;}
}

/* ===== v12.0 STYLES ===== */
.energy-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px;}
.energy-card{background:var(--surface2);border:1px solid var(--border);border-radius:18px;padding:22px;}
.ep-label{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--accent);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:12px;}
.ep-svg{width:100%;height:auto;display:block;border-radius:10px;background:var(--bg);}
.ep-note{font-size:0.82rem;color:var(--muted);margin-top:10px;line-height:1.5;}
.org-rxn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:16px;}
.org-rxn-card{background:var(--surface2);border:1px solid var(--border);border-radius:16px;padding:20px;transition:transform var(--transition),box-shadow var(--transition);}
.org-rxn-card:hover{transform:translateY(-4px);}
.orxn-type{font-family:'JetBrains Mono',monospace;font-size:0.65rem;letter-spacing:0.14em;text-transform:uppercase;padding:3px 9px;border-radius:50px;display:inline-block;margin-bottom:8px;}
.orxn-addition .orxn-type{background:rgba(79,255,176,0.1);color:var(--alkane);border:1px solid rgba(79,255,176,0.3);}
.orxn-addition:hover{box-shadow:0 16px 40px rgba(79,255,176,0.1);}
.orxn-substitution .orxn-type{background:rgba(59,158,255,0.1);color:var(--alkene);border:1px solid rgba(59,158,255,0.3);}
.orxn-substitution:hover{box-shadow:0 16px 40px rgba(59,158,255,0.1);}
.orxn-elimination .orxn-type{background:rgba(255,179,71,0.1);color:var(--isomer);border:1px solid rgba(255,179,71,0.3);}
.orxn-elimination:hover{box-shadow:0 16px 40px rgba(255,179,71,0.1);}
.orxn-esterification .orxn-type{background:rgba(244,114,182,0.1);color:var(--ions-pos);border:1px solid rgba(244,114,182,0.3);}
.orxn-esterification:hover{box-shadow:0 16px 40px rgba(244,114,182,0.1);}
.orxn-oxidation .orxn-type{background:rgba(251,146,60,0.1);color:var(--thermo);border:1px solid rgba(251,146,60,0.3);}
.orxn-oxidation:hover{box-shadow:0 16px 40px rgba(251,146,60,0.1);}
.orxn-combustion .orxn-type{background:rgba(248,113,113,0.1);color:var(--acids);border:1px solid rgba(248,113,113,0.3);}
.orxn-combustion:hover{box-shadow:0 16px 40px rgba(248,113,113,0.1);}
.org-rxn-card h4{font-size:0.95rem;color:var(--text);margin-bottom:6px;}
.org-rxn-card p{font-size:0.82rem;color:var(--muted);margin-bottom:10px;line-height:1.5;}
.orxn-examples{display:flex;flex-direction:column;gap:5px;}
.orxn-eq{font-family:'JetBrains Mono',monospace;font-size:0.78rem;color:var(--accent);background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:6px 10px;line-height:1.6;}
.orxn-rule{font-size:0.79rem;color:var(--muted);margin-top:10px;background:rgba(255,255,255,0.03);border-radius:8px;padding:8px 10px;border:1px solid var(--border);}
.polymer-split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;}
.poly-card{border-radius:18px;padding:26px;border:1px solid var(--border);}
.poly-addition{background:rgba(79,255,176,0.04);border-top:3px solid var(--alkane);}
.poly-condensation{background:rgba(59,158,255,0.04);border-top:3px solid var(--alkene);}
.poly-type-badge{font-family:'JetBrains Mono',monospace;font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;padding:4px 12px;border-radius:50px;background:rgba(79,255,176,0.1);border:1px solid rgba(79,255,176,0.3);color:var(--alkane);display:inline-block;margin-bottom:10px;}
.poly-card h3{font-size:1rem;color:var(--text);margin-bottom:8px;}
.poly-card p{font-size:0.83rem;color:var(--muted);margin-bottom:12px;}
.poly-arrow{font-family:'JetBrains Mono',monospace;font-size:0.85rem;color:var(--alkane);background:var(--bg);border:1px solid rgba(79,255,176,0.2);border-radius:10px;padding:10px 14px;margin-bottom:14px;text-align:center;}
.poly-examples-table{background:var(--bg);border-radius:12px;overflow:hidden;border:1px solid var(--border);}
.poly-row{display:grid;grid-template-columns:1fr 1fr 1fr;font-size:0.77rem;padding:8px 12px;border-bottom:1px solid var(--border);}
.poly-row:last-child{border-bottom:none;}
.poly-header{font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase;background:var(--surface2);}
.poly-row span{color:var(--muted);} .poly-row span:first-child{color:var(--text);}
.ecs-layout{display:grid;grid-template-columns:1fr 340px;gap:22px;margin-top:24px;}
.ecs-table-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--border);}
.ecs-table{width:100%;border-collapse:collapse;min-width:420px;}
.ecs-table th{padding:12px 16px;font-family:'JetBrains Mono',monospace;font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;background:var(--surface2);border-bottom:2px solid var(--border);color:var(--muted);}
.ecs-table td{padding:9px 16px;border-bottom:1px solid var(--border);font-size:0.84rem;transition:background var(--transition);}
.ecs-table tr:last-child td{border-bottom:none;}
.ecs-table tr:hover td{background:rgba(255,255,255,0.03);}
.ecs-eq{font-family:'JetBrains Mono',monospace;font-size:0.8rem;color:var(--muted);}
.ecs-val{font-family:'JetBrains Mono',monospace;font-size:0.88rem;font-weight:700;text-align:center;}
.ecs-val.neg{color:#f87171;}.ecs-val.pos{color:#4ade80;}.ecs-val.zero{color:var(--accent);}
.ecs-str{font-size:0.72rem;color:var(--alkyne);font-weight:600;}
.ecs-str-mini{font-size:0.7rem;color:var(--muted);}
.ecs-str-she{font-size:0.72rem;color:var(--accent);}
.ecs-row-top{background:rgba(248,113,113,0.05)!important;}
.ecs-row-bot{background:rgba(74,222,128,0.05)!important;}
.ecs-row-she{background:rgba(79,255,176,0.04)!important;border-top:1px solid rgba(79,255,176,0.2)!important;border-bottom:1px solid rgba(79,255,176,0.2)!important;}
.ecs-rules{display:flex;flex-direction:column;gap:14px;}
.ecs-rule-card{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:18px;}
.ecs-rule-title{font-family:'JetBrains Mono',monospace;font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:8px;}
.ecs-formula{font-family:'JetBrains Mono',monospace;font-size:1rem;color:var(--electro);background:var(--bg);border:1px solid var(--border);border-radius:9px;padding:10px 14px;margin-bottom:10px;text-align:center;}
.ecs-rule-card p{font-size:0.83rem;color:var(--muted);}
.ecs-example{font-family:'JetBrains Mono',monospace;font-size:0.79rem;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-top:9px;line-height:2;}
.blocks-visual{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:24px;}
.block-card{border-radius:20px;padding:24px;border:1px solid var(--border);background:var(--surface2);transition:transform var(--transition),box-shadow var(--transition);display:flex;gap:16px;}
.block-card:hover{transform:translateY(-4px);}
.block-s{border-top:3px solid #f87171;}.block-s:hover{box-shadow:0 18px 44px rgba(248,113,113,0.12);}
.block-p{border-top:3px solid var(--accent);}.block-p:hover{box-shadow:0 18px 44px rgba(79,255,176,0.12);}
.block-d{border-top:3px solid #facc15;}.block-d:hover{box-shadow:0 18px 44px rgba(250,204,21,0.12);}
.block-f{border-top:3px solid #f472b6;}.block-f:hover{box-shadow:0 18px 44px rgba(244,114,182,0.12);}
.block-letter{font-family:'DM Serif Display',serif;font-size:3.2rem;font-weight:700;line-height:1;flex-shrink:0;width:48px;}
.block-s .block-letter{color:#f87171;}.block-p .block-letter{color:var(--accent);}.block-d .block-letter{color:#facc15;}.block-f .block-letter{color:#f472b6;}
.block-name{font-family:'DM Serif Display',serif;font-size:1.1rem;color:var(--text);margin-bottom:2px;}
.block-groups{font-family:'JetBrains Mono',monospace;font-size:0.66rem;color:var(--muted);margin-bottom:10px;}
.block-desc{font-size:0.81rem;color:var(--muted);margin-bottom:8px;line-height:1.5;}
.block-examples{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:6px 10px;line-height:1.6;}
.orbital-visual{margin:10px 0;}
.orb-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.orb-label{font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:var(--muted);min-width:50px;}
.orb-box{width:28px;height:28px;border:1px solid var(--border);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:0.75rem;background:var(--bg);}
.orb-box.filled-up{border-color:rgba(79,255,176,0.4);color:var(--accent);}
.orb-box.filled-both{border-color:rgba(192,132,252,0.4);color:var(--nuclear);font-size:0.65rem;}
.orb-box.empty{border-style:dashed;color:var(--muted);opacity:0.4;}
.orb-note{font-size:0.7rem;color:var(--muted);margin-left:4px;}
.orbital-period-grid{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.op-row{display:flex;align-items:center;gap:16px;background:var(--surface2);border-radius:10px;padding:10px 16px;border:1px solid var(--border);}
.op-period{font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:var(--muted);min-width:70px;flex-shrink:0;}
.op-config{font-size:0.83rem;color:var(--muted);flex:1;flex-wrap:wrap;}
.op-orb{font-family:'JetBrains Mono',monospace;font-size:0.78rem;padding:2px 7px;border-radius:5px;margin:0 2px;}
.s-orb{background:rgba(248,113,113,0.1);color:#f87171;border:1px solid rgba(248,113,113,0.3);}
.p-orb{background:rgba(79,255,176,0.1);color:var(--accent);border:1px solid rgba(79,255,176,0.3);}
.d-orb{background:rgba(250,204,21,0.1);color:#facc15;border:1px solid rgba(250,204,21,0.3);}
.f-orb{background:rgba(244,114,182,0.1);color:#f472b6;border:1px solid rgba(244,114,182,0.3);}
.trans-props-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:8px;}
.trans-prop-card{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:18px;border-left:3px solid #facc15;transition:box-shadow var(--transition);}
.trans-prop-card:hover{box-shadow:0 0 24px rgba(250,204,21,0.1);}
.tp-icon{font-size:1.4rem;margin-bottom:6px;}
.tp-title{font-weight:700;font-size:0.9rem;color:var(--text);margin-bottom:6px;}
.trans-prop-card p{font-size:0.8rem;color:var(--muted);line-height:1.5;}
[data-theme="light"] .ep-svg{background:rgba(244,246,255,0.8);}
[data-theme="light"] .ecs-row-top{background:rgba(220,38,38,0.04)!important;}
[data-theme="light"] .ecs-row-bot{background:rgba(22,163,74,0.04)!important;}

/* ===== IUPAC Enhanced Styles ===== */
.iupac-root-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:18px 0;}
.iupac-root{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 8px;text-align:center;}
.iupac-root-n{display:block;font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:var(--muted);margin-bottom:3px;}
.iupac-root-name{display:block;font-family:'JetBrains Mono',monospace;font-size:0.95rem;font-weight:700;color:var(--accent);}
.iupac-rules-list{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.iupac-rule{display:flex;gap:12px;align-items:flex-start;background:var(--surface2);border-radius:11px;padding:13px 16px;border:1px solid var(--border);font-size:0.85rem;color:var(--muted);}
.iupac-rule b{color:var(--text);}
.iupac-rule-icon{font-size:1rem;flex-shrink:0;margin-top:1px;}
.iupac-sub-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:16px;}
.iupac-sub-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 8px;text-align:center;}
.iupac-sub-formula{font-family:'JetBrains Mono',monospace;font-size:0.82rem;color:var(--accent);font-weight:700;margin-bottom:4px;}
.iupac-sub-name{font-size:0.78rem;color:var(--muted);}
.iupac-format-box{background:var(--surface2);border:1px solid rgba(79,255,176,0.2);border-radius:14px;padding:20px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:1.2rem;font-weight:700;letter-spacing:0.03em;margin-top:18px;}
.iupac-fmt-part{font-size:1.1rem;}
.iupac-fmt-dash{color:var(--muted);margin:0 2px;}
.alkane-col{color:var(--alkane)!important;}
.alkene-col{color:var(--alkene)!important;}
.alkyne-col{color:var(--alkyne)!important;}
.block-info{flex:1;min-width:0;}
.ef-row{display:grid;grid-template-columns:60px 1fr;gap:8px;align-items:center;}
.ep-path{stroke-dasharray:400;stroke-dashoffset:400;animation:drawPath 1.4s ease forwards;}
@keyframes drawPath{to{stroke-dashoffset:0;}}

/* ===== v11 NEW STYLES ===== */
.glossary-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-top:20px; }
.gloss-card { background:var(--surface2); border:1px solid var(--border); border-radius:14px; padding:16px 18px; display:flex; gap:14px; align-items:flex-start; transition:border-color 0.2s; }
.gloss-card:hover { border-color:var(--accent); }
.gloss-num { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:var(--accent); letter-spacing:0.12em; min-width:22px; padding-top:3px; }
.gloss-content h3 { font-family:'DM Serif Display',serif; font-size:1rem; color:var(--text); margin-bottom:4px; }
.gloss-content p { font-size:0.84rem; color:var(--muted); line-height:1.55; }
.gloss-ex { color:var(--accent); font-family:'JetBrains Mono',monospace; font-size:0.78rem; display:block; margin-top:4px; }
.abbrev-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:6px; margin-top:10px; }
.abbrev-row { display:flex; gap:12px; align-items:baseline; padding:6px 12px; border-radius:8px; background:var(--surface2); }
.abbrev-key { font-family:'JetBrains Mono',monospace; font-size:0.78rem; color:var(--accent2); font-weight:700; min-width:110px; }
.abbrev-val { font-size:0.82rem; color:var(--muted); }
.reactivity-layout { display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:start; margin-top:20px; }
@media(max-width:768px){ .reactivity-layout { grid-template-columns:1fr; } }
.reactivity-scale { display:flex; flex-direction:column; gap:6px; min-width:320px; }
.react-header, .react-arrow-label { font-family:'JetBrains Mono',monospace; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; padding:4px 0; }
.react-most { color:#ef4444; } .react-least { color:#4fffb0; margin-top:4px; }
.react-item { display:flex; align-items:center; gap:10px; }
.react-rank { font-family:'JetBrains Mono',monospace; font-size:0.65rem; color:var(--muted); min-width:22px; text-align:right; }
.react-elem-box { width:44px; height:44px; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; }
.react-z { font-family:'JetBrains Mono',monospace; font-size:0.52rem; color:rgba(255,255,255,0.6); }
.react-sym { font-family:'DM Serif Display',serif; font-size:1.15rem; color:#fff; font-weight:700; line-height:1; }
.react-name { font-size:0.85rem; color:var(--text); min-width:90px; }
.react-note { font-size:0.73rem; color:var(--muted); }
.react-special { opacity:0.85; margin:4px 0; }
.reactivity-rules { display:flex; flex-direction:column; gap:14px; }
.react-rule-card { border-radius:14px; padding:16px 18px; border:1px solid var(--border); }
.react-rule-green { background:rgba(74,222,128,0.06); border-color:rgba(74,222,128,0.2); }
.react-rule-blue  { background:rgba(56,189,248,0.06); border-color:rgba(56,189,248,0.2); }
.react-rule-orange{ background:rgba(249,115,22,0.06); border-color:rgba(249,115,22,0.2); }
.react-rule-purple{ background:rgba(167,139,250,0.06); border-color:rgba(167,139,250,0.2); }
.react-rule-title { font-family:'JetBrains Mono',monospace; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text); margin-bottom:8px; font-weight:700; }
.react-eq { font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--accent); background:var(--surface2); padding:5px 10px; border-radius:6px; margin-top:6px; }
.react-extract-row { display:flex; justify-content:space-between; font-size:0.82rem; padding:4px 0; border-bottom:1px solid var(--border); }
.react-extract-row:last-child { border-bottom:none; }
.polyion-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-top:16px; }
.polyion-panel { background:var(--surface2); border:1px solid var(--border); border-radius:14px; padding:14px 16px; }
.polyion-header { font-family:'JetBrains Mono',monospace; font-size:0.65rem; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:10px; font-weight:700; }
.polyion-row { display:flex; justify-content:space-between; align-items:baseline; padding:4px 0; border-bottom:1px solid rgba(255,255,255,0.04); font-size:0.82rem; }
.polyion-row:last-child { border-bottom:none; }
.polyion-name { color:var(--muted); }
.polyion-formula { font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--ions-neg,#f472b6); }
.conjpairs-wrap { display:flex; gap:0; border-radius:16px; overflow:hidden; border:1px solid var(--border); margin-top:14px; }
.conjpairs-col { flex:1; }
.conjpairs-header { font-family:'JetBrains Mono',monospace; font-size:0.65rem; letter-spacing:0.12em; text-transform:uppercase; padding:10px 14px; background:var(--surface2); font-weight:700; color:var(--muted); }
.conjpairs-acid .conjpairs-header { color:var(--acids,#f87171); border-right:1px solid var(--border); }
.conjpairs-base .conjpairs-header { color:#4fffb0; }
.conjpairs-group { padding:8px 14px; }
.conjpairs-group + .conjpairs-group { border-top:1px solid var(--border); }
.cp-group-label { font-family:'JetBrains Mono',monospace; font-size:0.6rem; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase; display:block; margin-bottom:4px; }
.cp-row { font-family:'JetBrains Mono',monospace; font-size:0.8rem; padding:3px 0; color:var(--text); }
.cp-strong .cp-row { color:#f87171; } .cp-negligible .cp-row { color:#94a3b8; }
.cp-strong-base .cp-row { color:#4fffb0; } .cp-negligible-base .cp-row { color:#94a3b8; }
.conjpairs-arrow-col { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:0 10px; gap:8px; background:var(--surface); border-left:1px solid var(--border); border-right:1px solid var(--border); min-width:36px; }
.cp-arrow-acid, .cp-arrow-base { writing-mode:vertical-rl; font-family:'JetBrains Mono',monospace; font-size:0.6rem; letter-spacing:0.1em; text-transform:uppercase; }
.cp-arrow-acid { color:var(--acids,#f87171); transform:rotate(180deg); }
.cp-arrow-base { color:#4fffb0; }
.compounds-mega-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:16px; }
.compounds-panel { background:var(--surface2); border:1px solid var(--border); border-radius:14px; padding:14px 16px; }
.compounds-panel-title { font-family:'JetBrains Mono',monospace; font-size:0.65rem; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:10px; font-weight:700; }
.cmpd-row { display:flex; justify-content:space-between; align-items:baseline; padding:5px 0; border-bottom:1px solid rgba(255,255,255,0.04); font-size:0.82rem; }
.cmpd-row:last-child { border-bottom:none; }
.cmpd-formula { font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--accent); }
.conc-terms-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-top:14px; }
.conc-term-card { background:var(--surface2); border:1px solid var(--border); border-radius:14px; padding:16px 18px; }
.conc-term-label { font-family:'JetBrains Mono',monospace; font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:6px; }
.conc-term-def { font-size:0.88rem; color:var(--text); margin-bottom:8px; }
.conc-term-formula { font-family:'JetBrains Mono',monospace; font-size:0.82rem; background:var(--surface); padding:8px 12px; border-radius:8px; color:var(--accent2); margin-bottom:8px; }
.conc-term-note { font-size:0.78rem; color:var(--muted); }
.chem-formulas-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:6px; margin-top:14px; }
.cfrow { display:flex; justify-content:space-between; align-items:baseline; background:var(--surface2); padding:6px 12px; border-radius:8px; font-size:0.82rem; }
.cfname { color:var(--muted); }
.cff { font-family:'JetBrains Mono',monospace; font-size:0.8rem; color:var(--solutions,#34d399); }
.fg-card.fg-halide { border-top-color:#a78bfa; } .fg-card.fg-halide .fg-symbol { color:#a78bfa; }
.fg-card.fg-thiol { border-top-color:#fb923c; } .fg-card.fg-thiol .fg-symbol { color:#fb923c; }
.fg-card.fg-nitrile { border-top-color:#38bdf8; } .fg-card.fg-nitrile .fg-symbol { color:#38bdf8; }
.fg-card.fg-aromatic { border-top-color:#facc15; } .fg-card.fg-aromatic .fg-symbol { color:#facc15; }
.econfig-table-wrap { overflow-x:auto; border-radius:14px; border:1px solid var(--border); margin-top:10px; }
.econfig-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.econfig-table thead tr { background:var(--surface2); }
.econfig-table th { font-family:'JetBrains Mono',monospace; font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); padding:10px 14px; text-align:left; }
.econfig-table td { padding:8px 14px; border-top:1px solid rgba(255,255,255,0.05); color:var(--text); }
.econfig-table tbody tr:hover { background:var(--surface2); }
.ecfg { font-family:'JetBrains Mono',monospace; font-size:0.82rem; color:var(--accent); }
.ecfg-except { color:#facc15 !important; }
.ecfg-note { font-size:0.65rem; color:#facc15; font-family:'Outfit',sans-serif; margin-left:6px; }
.info-box.orange { border-left-color:#f97316; background:rgba(249,115,22,0.06); }
.tm-cation-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin-top:14px; }
.tm-cation-card { background:var(--surface2); border:1px solid var(--border); border-radius:12px; padding:14px 16px; }
.tm-cation-atom { font-family:'DM Serif Display',serif; font-size:1rem; color:var(--text); margin-bottom:8px; }
.tm-cation-before, .tm-cation-after { font-family:'JetBrains Mono',monospace; font-size:0.8rem; padding:4px 8px; border-radius:6px; }
.tm-cation-before { background:rgba(255,255,255,0.05); color:var(--text); margin-bottom:4px; }
.tm-cation-after { background:rgba(79,255,176,0.08); color:var(--accent); margin-top:4px; }
.tm-cation-arrow { font-size:0.72rem; color:var(--muted); text-align:center; margin:4px 0; }
.tc-s { color:#f87171; } .tc-d { color:#60a5fa; }
.badge.teal { background:rgba(20,184,166,0.12); color:#2dd4bf; border-color:rgba(20,184,166,0.25); }
.badge.amber { background:rgba(245,158,11,0.12); color:#fbbf24; border-color:rgba(245,158,11,0.25); }
span.teal { color:#2dd4bf; } span.amber { color:#fbbf24; }

/* ===================================================
   v11 ORGANIC SYNTHESIS STYLES
   =================================================== */
.retro-box { display: grid; grid-template-columns: auto 1fr; gap: 24px; background: var(--surface2); border: 1px solid var(--border); border-radius: 18px; padding: 24px 28px; margin-top: 14px; align-items: center; }
@media(max-width:600px){ .retro-box { grid-template-columns:1fr; } }
.retro-concept { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 200px; }
.retro-arrow-label { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--accent); letter-spacing: 0.12em; text-transform: uppercase; }
.retro-molecule { background: var(--surface); border: 1px solid rgba(79,255,176,0.2); border-radius: 10px; padding: 8px 20px; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; color: var(--text); text-align: center; }
.retro-arrow { font-size: 1.1rem; color: var(--accent); letter-spacing: 0.08em; }
.retro-rules { display: flex; flex-direction: column; gap: 10px; }
.retro-rule { display: flex; gap: 12px; align-items: flex-start; font-size: 0.87rem; color: var(--muted); line-height: 1.5; }
.retro-rule b { color: var(--text); }
.rr-num { background: rgba(79,255,176,0.12); color: var(--accent); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.named-rxn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 10px; }
.named-rxn-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; transition: transform 0.2s, box-shadow 0.2s; }
.named-rxn-card:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.nrxn-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.nrxn-name { font-family: 'DM Serif Display', serif; font-size: 1.05rem; color: var(--text); }
.nrxn-type { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.nrxn-eq { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--accent); background: var(--surface); padding: 9px 14px; border-radius: 9px; margin-bottom: 12px; line-height: 1.6; overflow-x: auto; }
.nrxn-detail { display: flex; flex-direction: column; gap: 5px; }
.nrxn-reagents, .nrxn-product, .nrxn-condition { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
.nrxn-reagents b, .nrxn-product b, .nrxn-condition b { color: var(--text); }
.synth-compare-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.synth-compare-table th { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 16px; background: var(--surface2); text-align: left; border-bottom: 1px solid var(--border); }
.synth-compare-table td { padding: 9px 16px; border-top: 1px solid rgba(255,255,255,0.04); color: var(--muted); }
.synth-compare-table td:first-child { color: var(--text); font-weight: 600; }
.synth-compare-table tbody tr:hover { background: var(--surface2); }

/* ===================================================
   v11 ELECTROCHEMISTRY CALCULATIONS STYLES
   =================================================== */
.ecalc-formula-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 14px; }
.ecalc-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; }
.ecalc-label { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.ecalc-eq { font-family: 'JetBrains Mono', monospace; font-size: 1rem; color: var(--electro, #22d3ee); margin-bottom: 10px; line-height: 1.5; }
.ecalc-eq-small { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; color: var(--muted); margin-bottom: 4px; line-height: 1.5; }
.ecalc-desc { font-size: 0.83rem; color: var(--muted); line-height: 1.55; margin-bottom: 10px; }
.ecalc-rule { font-size: 0.82rem; padding: 4px 0; }
.ecalc-rule-pos { color: #4ade80; font-family: 'JetBrains Mono', monospace; }
.ecalc-rule-neg { color: #f87171; font-family: 'JetBrains Mono', monospace; }
.ecalc-trio { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.ecalc-trio-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.ecalc-trio-formula { font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; color: var(--electro, #22d3ee); margin-bottom: 14px; text-align: center; }
.ecalc-trio-vars { display: flex; flex-direction: column; gap: 6px; }
.etv-sym { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text); margin-right: 8px; }
.etv-desc { font-size: 0.78rem; color: var(--muted); }
.nernst-box { background: linear-gradient(135deg, rgba(34,211,238,0.06), rgba(79,255,176,0.04)); border: 1px solid rgba(34,211,238,0.25); border-radius: 18px; padding: 28px 32px; margin-top: 14px; }
.nernst-formula { font-family: 'DM Serif Display', serif; font-size: 1.8rem; color: var(--electro, #22d3ee); text-align: center; margin-bottom: 8px; }
.nernst-at25 { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: var(--accent); text-align: center; margin-bottom: 22px; }
.nernst-vars { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.nv-row { display: flex; gap: 10px; align-items: baseline; }
.nv-sym { font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; color: var(--text); font-weight: 700; min-width: 30px; }
.nv-desc { font-size: 0.82rem; color: var(--muted); }
.faraday-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 14px; }
@media(max-width:700px){ .faraday-grid { grid-template-columns: 1fr; } }
.faraday-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; }
.faraday-card[style*="span 2"] { grid-column: span 2; }
@media(max-width:700px){ .faraday-card[style*="span 2"] { grid-column: span 1; } }
.faraday-law-num { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--electro, #22d3ee); margin-bottom: 10px; }
.faraday-formula { font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; color: var(--text); background: var(--surface); padding: 10px 16px; border-radius: 10px; margin-bottom: 12px; }
.faraday-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.55; margin-bottom: 12px; }
.faraday-vars { display: flex; flex-direction: column; gap: 4px; }
.faraday-vars div { font-size: 0.8rem; color: var(--muted); }
.faraday-vars b { color: var(--electro, #22d3ee); }
.faraday-steps { display: flex; flex-direction: column; gap: 8px; }
.fstep { display: flex; align-items: baseline; gap: 10px; font-size: 0.85rem; color: var(--muted); }
.fstep-n { background: rgba(34,211,238,0.12); color: var(--electro, #22d3ee); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; font-weight: 700; flex-shrink: 0; }
.fg-card.fg-sulfide    { border-top-color:#f59e0b; } .fg-card.fg-sulfide    .fg-symbol { color:#f59e0b; }
.fg-card.fg-anhydride  { border-top-color:#10b981; } .fg-card.fg-anhydride  .fg-symbol { color:#10b981; }
.fg-card.fg-acylhalide { border-top-color:#e879f9; } .fg-card.fg-acylhalide .fg-symbol { color:#e879f9; }

/* ===== SCROLL PROGRESS BAR ===== */
#scrollBar{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--accent),var(--alkene),var(--isomer));z-index:9999;transition:width 0.1s linear;border-radius:0 3px 3px 0;}

/* ===== PROGRESS DASHBOARD ===== */
.progress-dashboard{background:var(--surface);border:1px solid var(--border);border-radius:18px;margin-bottom:28px;overflow:hidden;position:relative;z-index:1;}
.pd-header{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;cursor:pointer;user-select:none;transition:background var(--transition);}
.pd-header:hover{background:rgba(79,255,176,0.04);}
.pd-header-left{display:flex;align-items:center;gap:10px;}
.pd-icon{font-size:1rem;}
.pd-title{font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--muted);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;}
.pd-badge{font-family:'JetBrains Mono',monospace;font-size:0.72rem;font-weight:700;color:var(--accent);background:rgba(79,255,176,0.1);border:1px solid rgba(79,255,176,0.25);padding:2px 9px;border-radius:50px;}
.pd-header-right{display:flex;align-items:center;gap:12px;}
.pd-mini-bar{width:120px;height:6px;background:var(--surface2);border-radius:50px;overflow:hidden;}
.pd-mini-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--alkene));border-radius:50px;transition:width 0.5s ease;width:0%;}
.pd-chevron{font-size:0.8rem;color:var(--muted);transition:transform 0.3s ease;}
.pd-chevron.open{transform:rotate(180deg);}
.pd-body{border-top:1px solid var(--border);padding:20px 22px;display:none;}
.pd-body.open{display:block;}
.pd-chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px;}
.pd-chapter{background:var(--surface2);border-radius:14px;padding:16px 18px;border:1px solid var(--border);}
.pd-ch-label{font-family:'JetBrains Mono',monospace;font-size:0.65rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:12px;}
.pd-ch-bar-wrap{height:6px;background:var(--bg);border-radius:50px;overflow:hidden;margin-bottom:8px;}
.pd-ch-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--alkene));border-radius:50px;transition:width 0.5s ease;width:0%;}
.pd-ch-count{font-family:'JetBrains Mono',monospace;font-size:0.7rem;color:var(--muted);margin-bottom:12px;}
.pd-section-dots{display:flex;flex-wrap:wrap;gap:5px;}
.pd-dot{width:10px;height:10px;border-radius:3px;border:1px solid var(--border);background:var(--bg);transition:background 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease;cursor:default;position:relative;}
.pd-dot.done{background:var(--accent);border-color:var(--accent);box-shadow:0 0 6px rgba(79,255,176,0.5);}
.pd-dot[title]:hover::after{content:attr(title);position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:var(--surface2);border:1px solid var(--border);color:var(--text);font-size:0.68rem;padding:4px 8px;border-radius:7px;white-space:nowrap;pointer-events:none;z-index:10;font-family:'Outfit',sans-serif;}
.pd-message{font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--muted);text-align:center;padding:8px;border-top:1px solid var(--border);}
@media(max-width:700px){.pd-chapters{grid-template-columns:1fr;}.pd-mini-bar{width:70px;}}

/* ===== MOBILE DRAWER ===== */
.mob-overlay{position:fixed;inset:0;background:rgba(7,9,15,0.7);z-index:9998;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity 0.3s ease;will-change:opacity;}
.mob-overlay.mob-open{opacity:1;pointer-events:all;}
.mob-drawer{position:fixed;top:0;right:0;width:min(300px,85vw);height:100vh;background:var(--surface);border-left:1px solid var(--border);z-index:9999;overflow-y:auto;padding:20px 0;display:flex;flex-direction:column;transform:translateX(100%);transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);will-change:transform;}
.mob-drawer.mob-open{transform:translateX(0);}

/* ===== BACK TO TOP ===== */
#backToTop{position:fixed;bottom:28px;right:24px;width:44px;height:44px;border-radius:14px;background:var(--surface2);border:1px solid var(--border);color:var(--muted);font-size:1.1rem;cursor:pointer;z-index:999;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity 0.3s ease,transform 0.3s ease,color 0.2s,border-color 0.2s,background 0.2s;display:flex;align-items:center;justify-content:center;}
#backToTop.btt-show{opacity:1;transform:translateY(0);pointer-events:all;}
#backToTop:hover{color:var(--accent);border-color:rgba(79,255,176,0.4);background:rgba(79,255,176,0.08);}

/* ===== CARD POLISH ===== */
.card{transition:opacity 0.65s ease,transform 0.65s ease,box-shadow 0.25s ease;}
.card:hover{box-shadow:0 0 0 1px rgba(79,255,176,0.1),0 32px 70px rgba(0,0,0,0.45);}

/* ===== SECTION TITLE UNDERLINE ===== */
.section-title{position:relative;display:inline-block;}

/* ===== MOBILE NAV PROGRESS MINI ===== */
.mob-progress-row{display:flex;align-items:center;gap:10px;padding:14px 22px 0;}
.mob-progress-track{flex:1;height:4px;background:var(--surface2);border-radius:50px;overflow:hidden;}
.mob-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--alkene));border-radius:50px;transition:width 0.5s ease;width:0%;}
.mob-progress-label{font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:var(--muted);}

/* ===== v12.1 — NEW SECTION STYLES ===== */
.isomer-builder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}
.isomer-item{background:var(--bg);border:1px solid var(--border);border-left:3px solid var(--isomer);border-radius:12px;padding:14px 16px;transition:box-shadow var(--transition);}
.isomer-item:hover{box-shadow:0 0 20px rgba(255,179,71,0.12);}
.isomer-item-num{font-family:'JetBrains Mono',monospace;font-size:0.6rem;color:var(--muted);letter-spacing:0.1em;margin-bottom:4px;}
.isomer-item-name{font-size:0.9rem;font-weight:600;color:var(--text);margin-bottom:5px;}
.isomer-item-formula{font-family:'JetBrains Mono',monospace;font-size:0.82rem;color:var(--isomer);}
.iron-process-box{background:linear-gradient(135deg,rgba(248,113,113,0.05),rgba(245,158,11,0.05));border:1px solid rgba(248,113,113,0.2);border-radius:18px;padding:24px;margin-top:18px;}
.iron-process-step{display:flex;gap:14px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border);}
.iron-process-step:last-child{border-bottom:none;}
.iron-step-num{width:26px;height:26px;border-radius:7px;background:rgba(248,113,113,0.12);border:1px solid rgba(248,113,113,0.3);color:var(--acids);font-family:'JetBrains Mono',monospace;font-size:0.72rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;}
.alloy-table{width:100%;border-collapse:collapse;margin-top:14px;}
.alloy-table th{background:var(--surface2);padding:10px 14px;font-family:'JetBrains Mono',monospace;font-size:0.65rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--border);text-align:left;}
.alloy-table td{padding:9px 14px;border-bottom:1px solid var(--border);font-size:0.85rem;color:var(--muted);}
.alloy-table td:first-child{font-family:'JetBrains Mono',monospace;color:var(--solutions);font-weight:700;}
.alloy-table tr:hover td{background:rgba(52,211,153,0.03);}
/* responsive for new info-grid sections */
@media(max-width:768px){
  .iron-process-box{padding:16px;}
  .iron-process-step{gap:10px;}
}

/* ── Global text selection protection ── */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Re-enable selection in inputs and tool output areas (students need to copy results) */
input, textarea, [contenteditable],
.tool-result, .tool-result-main, .tool-result-breakdown,
.isomer-card, .isomer-card h3, .isomer-card p, .isomer-card li {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* ══════════════════════════════════════
   CONTACT SECTION
══════════════════════════════════════ */
.contact-section{text-align:center;padding:60px 40px;}
.contact-section h2{font-size:2rem;color:var(--text);margin-bottom:8px;letter-spacing:-0.5px;}
.contact-section p{color:var(--muted);font-size:1rem;margin-bottom:36px;}
.contact-icons{display:flex;gap:24px;justify-content:center;align-items:center;}
.icon-btn{width:64px;height:64px;border-radius:50%;border:2px solid var(--text);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--text);background:transparent;outline:2px solid transparent;outline-offset:0px;transition:outline-color 0.25s ease,outline-offset 0.25s ease,background 0.25s ease,border-color 0.25s ease;}
.icon-btn svg{width:28px;height:28px;fill:currentColor;transition:color 0.25s ease;}
.icon-btn:hover{outline-offset:4px;animation:shake 0.4s ease;}
.icon-btn--instagram:hover{background-image:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);border-color:transparent;outline-color:#d6249f;color:#fff;}
.icon-btn--gmail:hover{background:#EA4335;border-color:transparent;outline-color:#EA4335;color:#fff;}
@keyframes shake{10%{transform:rotate(15deg)}20%{transform:rotate(-15deg)}30%{transform:rotate(12deg)}40%{transform:rotate(-10deg)}50%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(2deg)}100%{transform:rotate(0deg)}}
.icon-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;}
.icon-label{font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);transition:color 0.25s ease;}
.icon-wrap:hover .icon-label{color:#fff;}

/* ══════════════════════════════════════
   GLOBAL SMOOTH THEME TRANSITION
   Scoped — no !important so animations still work
══════════════════════════════════════ */
html{transition:background-color 0.4s ease,color 0.3s ease;}
body,nav,header,.card,.section,.wrapper,.chapter-divider,
.info-box,.calc-box,.tab-pane,.elem-modal,.tool-result,
footer,.contact-section,.progress-dashboard{
  transition:background-color 0.4s ease,color 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease;
}

/* ══════════════════════════════════════
   VIEW TRANSITION — CIRCULAR WIPE
══════════════════════════════════════ */
::view-transition-old(root),
::view-transition-new(root){animation:none;}
::view-transition-old(root){z-index:1;}
::view-transition-new(root){z-index:9999;}

/* ══════════════════════════════════════
   PILL THEME TOGGLE
══════════════════════════════════════ */
.theme-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 10px;
  cursor:pointer;
  font-size:0.8rem;
  line-height:1;
  color:var(--muted);
  user-select:none;
  transition:border-color 0.3s ease, background 0.3s ease !important;
}
.theme-pill:hover{border-color:var(--accent);}
.theme-pill__track{
  position:relative;
  width:36px;
  height:20px;
  border-radius:999px;
  background:rgba(79,255,176,0.15);
  border:1px solid rgba(79,255,176,0.3);
  transition:background 0.35s ease, border-color 0.35s ease !important;
}
.theme-pill__thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--accent);
  transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.35s ease !important;
  box-shadow:0 1px 4px rgba(0,0,0,0.3);
}
/* Light mode state — thumb slides right, track changes */
.theme-pill--light .theme-pill__thumb{
  transform:translateX(16px);
  background:var(--accent);
}
.theme-pill--light .theme-pill__track{
  background:rgba(5,150,105,0.15);
  border-color:rgba(5,150,105,0.3);
}

/* ══════════════════════════════════════
   EXTRA LARGE — 1440px+
   Wider screens: cap content, boost spacing
══════════════════════════════════════ */
@media(min-width:1440px){
  .wrapper{max-width:1400px;padding:0 48px;}
  .card{padding:38px;}
  .chapter-divider{padding:30px 32px;}
  header{padding:130px 20px 200px;}
  header h1{font-size:5.5rem;}
}

/* ══════════════════════════════════════
   SMALL MOBILE — max 480px
   Phones like iPhone SE, Galaxy A series
══════════════════════════════════════ */
@media(max-width:480px){
  .wrapper{padding:0 3% 48px;}
  .card{padding:16px 12px;border-radius:14px;}
  header{padding:60px 5% 40px;}
  header h1{font-size:clamp(1.6rem,9vw,2.4rem);}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;justify-items:center;}
  .hero-stat .num{font-size:1.6rem;}
  .result-grid{grid-template-columns:1fr 1fr;gap:6px;}
  .ions-columns{grid-template-columns:1fr 1fr;}
  .iupac-root-grid{grid-template-columns:repeat(4,1fr);}
  .iupac-sub-grid{grid-template-columns:1fr;}
  .elem-modal{padding:16px 12px;}
  .elem-modal-symbol{font-size:2.4rem;}
  .contact-section{padding:40px 20px;}
  .icon-btn{width:54px;height:54px;}
  .icon-btn svg{width:24px;height:24px;}
  table{font-size:0.78rem;}
  td,th{padding:10px 10px;}
  .chapter-divider{padding:14px 12px;gap:10px;}
  .chapter-title{font-size:1.1rem;}
  .section-title{font-size:1.2rem;}
  nav{padding:0 4%;}
  .nav-logo{font-size:0.9rem;}
  .theme-pill{padding:3px 7px;font-size:0.7rem;}
  .theme-pill__track{width:30px;height:17px;}
  .theme-pill__thumb{width:11px;height:11px;}
  .theme-pill--light .theme-pill__thumb{transform:translateX(13px);}
  /* ── New organic section 480px fixes ── */
  .sub-label{white-space:normal;}
  .structure-card{flex-direction:column;align-items:flex-start;}
  .structure-info{min-width:0;width:100%;}
  .huckel-box{flex-direction:column;align-items:flex-start;}
  .huckel-formula{font-size:1.5rem;}
}

/* ═══════════════════════════════════════
   MISSING CLASSES — Deep audit fix
═══════════════════════════════════════ */

/* Nav logo image */
.nav-logo-img{height:28px;width:auto;vertical-align:middle;margin-right:6px;border-radius:4px;}

/* Theme pill emoji labels */
.theme-pill__label{font-size:0.8rem;line-height:1;pointer-events:none;}

/* Section intro paragraph */
.section-intro{color:var(--muted);font-size:0.95rem;max-width:700px;margin-bottom:24px;line-height:1.7;}

/* Tool box — isomer builder input area */
.tool-box{background:var(--surface2);border:1px solid var(--border);border-radius:16px;padding:24px 28px;}
.tool-title{font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--accent);letter-spacing:0.15em;text-transform:uppercase;margin-bottom:14px;}
.tool-label{display:block;font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--muted);letter-spacing:0.12em;text-transform:uppercase;margin-bottom:8px;}

/* Reactivity series color bands */
.react-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:var(--muted);}
.react-item.react-very-high .react-elem-box,.react-item.react-very-high .react-elem-name{color:#ff5f7e;}
.react-item.react-high .react-elem-box,.react-item.react-high .react-elem-name{color:#ffb347;}
.react-item.react-mid .react-elem-box,.react-item.react-mid .react-elem-name{color:#4fffb0;}
.react-item.react-low .react-elem-box,.react-item.react-low .react-elem-name{color:#38bdf8;}
.react-item.react-very-low .react-elem-box,.react-item.react-very-low .react-elem-name{color:#c084fc;}
.react-item.react-h .react-elem-box,.react-item.react-h .react-elem-name{color:var(--muted);}

/* Conjugate pairs grouping — modifier selectors only (base defined above at line 792) */
.conjpairs-group.cp-weak{border-left:3px solid var(--acids);}
.conjpairs-group.cp-weak-base{border-left:3px solid var(--alkene);}

/* ═══════════════════════════════════════════
   AROMATIC / DEMO SECTION STYLES
   Added: Aromatic Chemistry, Hydrocarbon Derivatives,
   Cyclic Hydrocarbons, Alcohols & Phenols
   ═══════════════════════════════════════════ */

/* ── Shared grid layout for reaction/info cards ── */
.grid {
  display: grid;
  gap: 1.25rem;
  max-width: 960px;
  margin: 0 auto 1.5rem;
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

/* ── Sub-section label ── */
.sub-label {
  max-width: 960px;
  margin: 2.5rem auto .85rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .75rem;
  white-space: nowrap;
}
.sub-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  min-width: 20px;
}

/* ── Structure card ── */
.structure-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 960px;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}
.structure-card svg { flex-shrink: 0; max-width: 100%; }
.structure-info { flex: 1; min-width: 220px; }
.structure-info h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.4rem;
  margin-bottom: .5rem;
  line-height: 1.3;
}
.structure-info p { color: var(--muted); font-size: .93rem; margin-bottom: .4rem; }

/* ── Bond badge ── */
.bond-badge {
  display: inline-block;
  background: var(--tag-bg);
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  padding: .2rem .6rem;
  border-radius: 4px;
  margin-right: .35rem;
  margin-top: .35rem;
  white-space: nowrap;
}

/* ── Reaction card ── */
.reaction-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}
@media(hover:hover){
  .reaction-card:hover { border-color: var(--accent2); transform: translateY(-2px); box-shadow: 0 4px 24px rgba(0,0,0,.3); }
}
.reaction-card .r-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.15rem;
  margin-bottom: .2rem;
  line-height: 1.3;
}
.reaction-card .r-type {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  color: var(--accent2);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .9rem;
}
.reaction-card .r-eq {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .85rem 1rem;
  margin-bottom: .85rem;
  font-size: .9rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
  line-height: 1.6;
}
.reaction-card .r-conditions {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--accent3);
  margin-bottom: .5rem;
  line-height: 1.5;
}
.reaction-card > p { color: var(--muted); font-size: .87rem; margin-top: auto; }

/* ── Hückel / formula box ── */
.huckel-box {
  max-width: 960px;
  margin: 0 auto 1.25rem;
  background: linear-gradient(135deg, rgba(88,166,255,.06), rgba(86,211,100,.06));
  border: 1px solid rgba(88,166,255,.3);
  border-radius: var(--radius);
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.huckel-formula {
  font-family: 'DM Serif Display', serif;
  font-size: 2rem;
  color: var(--accent);
  white-space: nowrap;
  flex-shrink: 0;
}
.huckel-desc { flex: 1; min-width: 180px; }
.huckel-desc h3 { font-family: 'DM Serif Display', serif; font-size: 1.15rem; margin-bottom: .35rem; }
.huckel-desc p { color: var(--muted); font-size: .88rem; }

/* ── Directing effects / data table wrapper ── */
.dir-table-wrap {
  max-width: 960px;
  margin: 0 auto 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.dir-table-wrap h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.15rem;
  padding: 1.1rem 1.4rem .7rem;
  border-bottom: 1px solid var(--border);
}
.dir-table-wrap table { width: 100%; border-collapse: collapse; min-width: 480px; }
/* No display:block/table override — the outer .dir-table-wrap handles scroll */
.dir-table-wrap th,
.dir-table-wrap td {
  padding: .65rem 1.1rem;
  text-align: left;
  font-size: .86rem;
  border-bottom: 1px solid var(--border);
  white-space: normal;
  word-break: break-word;
}
.dir-table-wrap th {
  font-family: 'JetBrains Mono', monospace;
  font-size: .69rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  background: var(--surface2);
  white-space: nowrap;
}
.dir-table-wrap td { color: var(--text); }
.dir-table-wrap tr:last-child td { border-bottom: none; }

/* ── Info banner ── */
.info-banner {
  max-width: 960px;
  margin: 0 auto 1.25rem;
  border-radius: var(--radius);
  padding: 1.2rem 1.75rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.info-banner p { color: var(--muted); font-size: .9rem; line-height: 1.65; }
.info-banner > span { flex-shrink: 0; line-height: 1.4; }
.info-banner--green {
  background: linear-gradient(135deg, rgba(86,211,100,.08), rgba(86,211,100,.02));
  border: 1px solid rgba(86,211,100,.3);
}
.info-banner--orange {
  background: linear-gradient(135deg, rgba(247,129,102,.08), rgba(247,129,102,.02));
  border: 1px solid rgba(247,129,102,.3);
}
.info-banner--blue {
  background: linear-gradient(135deg, rgba(88,166,255,.08), rgba(88,166,255,.02));
  border: 1px solid rgba(88,166,255,.25);
}

/* ── Colour helpers ── */
.op { color: var(--accent3); font-weight: 600; }
.m  { color: var(--accent2); font-weight: 600; }

/* ── Scrollbar styling for r-eq and dir-table ── */
.r-eq::-webkit-scrollbar,
.dir-table-wrap table::-webkit-scrollbar { height: 4px; }
.r-eq::-webkit-scrollbar-track,
.dir-table-wrap table::-webkit-scrollbar-track { background: var(--surface2); border-radius: 2px; }
.r-eq::-webkit-scrollbar-thumb,
.dir-table-wrap table::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }