:root{
  --blue:#1769e0;
  --blue-soft:#edf5ff;
  --ink:#16233b;
  --muted:#68758a;
  --line:#dce5f0;
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#f7f9fc}
button,input{font:inherit}
button{cursor:pointer}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px clamp(18px,4vw,56px);border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(15px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:900}.brand::before{content:"";width:38px;height:38px;flex:0 0 38px;border-radius:50%;background:#fff url("chem-logo.png") center/contain no-repeat}.back{padding:9px 14px;border:1px solid #b9d4fb;border-radius:12px;color:var(--blue);background:#fff;text-decoration:none;font-weight:800}
.shell{width:min(1220px,calc(100% - 30px));margin:auto;padding:38px 0 60px}
.hero{display:grid;grid-template-columns:1fr auto;align-items:end;gap:20px;margin-bottom:24px}
.eyebrow{margin:0 0 8px;color:var(--blue);font-weight:900;letter-spacing:.12em;text-transform:uppercase}
h1{margin:0;font-size:clamp(34px,5vw,64px);letter-spacing:-.05em}
.lead{max-width:800px;margin:12px 0 0;color:var(--muted);line-height:1.75}
.source-badge{padding:12px 16px;border-radius:999px;color:var(--blue);background:var(--blue-soft);font-weight:800}
.tabs{display:flex;gap:8px;overflow-x:auto;padding:6px;margin-bottom:18px;border:1px solid var(--line);border-radius:18px;background:#fff}
.tab{flex:1;min-width:max-content;padding:11px 15px;border:0;border-radius:12px;color:#56657a;background:transparent;font-weight:800}
.tab.active{color:#fff;background:var(--blue)}
.panel{display:none;padding:clamp(18px,3vw,30px);border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 18px 50px rgba(37,67,110,.07)}
.panel.active{display:block}
.panel-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:18px}
.panel h2{margin:0;font-size:clamp(24px,3vw,34px)}
.panel-note{margin:7px 0 0;color:var(--muted);line-height:1.65}
.legend{display:flex;flex-wrap:wrap;gap:8px}
.legend span{padding:7px 10px;border-radius:99px;font-size:13px;font-weight:800}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:17px}
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:12px 14px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
tr:last-child td{border-bottom:0}th:last-child,td:last-child{border-right:0}
thead th{position:sticky;top:0;z-index:2;color:#3e5069;background:#f4f7fb}
tbody th{position:sticky;left:0;z-index:1;color:var(--blue);background:#f9fbff}
.sol-cell{border:0;border-radius:8px;padding:7px 10px;font-weight:900}
.state-sol{color:#0c7958;background:#eaf7f2}.state-insol{color:#a64343;background:#fff0f0}.state-slight{color:#9b6710;background:#fff7dc}.state-react{color:#5f6c7e;background:#eef1f5}.state-volatile{color:#7152a1;background:#f2edfa}
.cell-detail{margin-top:14px;padding:14px 16px;border-left:4px solid var(--blue);border-radius:12px;background:var(--blue-soft);line-height:1.65}
.search{width:min(310px,100%);padding:11px 14px;border:1px solid #cbd8e7;border-radius:12px;outline:none}
.search:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,105,224,.12)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.data-card{padding:17px;border:1px solid var(--line);border-radius:16px;background:#fbfdff}
.formula{font-family:Georgia,"Times New Roman",serif;font-size:22px;font-weight:800}
.constant-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:10px;margin-top:10px;border-top:1px dashed var(--line)}
.constant-row b{color:var(--blue)}
.heat-value{margin-top:12px;color:#c55f2a;font-size:22px;font-weight:900}
.quiz{max-width:760px;margin:auto}
.scorebar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.score{padding:8px 12px;border-radius:99px;color:var(--blue);background:var(--blue-soft);font-weight:900}
.question{padding:24px;border-radius:18px;background:#f4f8ff;font-size:clamp(20px,3vw,29px);font-weight:900;line-height:1.55}
.choices{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.choice{padding:14px;border:1px solid var(--line);border-radius:13px;color:var(--ink);background:#fff;font-weight:800}
.choice:hover{border-color:var(--blue);background:var(--blue-soft)}
.choice.correct{border-color:#16805f;color:#16805f;background:#eaf8f2}
.choice.wrong{border-color:#c64747;color:#c64747;background:#fff0f0}
.feedback{min-height:58px;margin-top:12px;padding:13px 15px;border-radius:12px;color:var(--muted);background:#f6f8fb;line-height:1.6}
.next{margin-top:12px;padding:11px 16px;border:0;border-radius:12px;color:#fff;background:var(--blue);font-weight:900}
.footer{margin-top:22px;color:#7b8797;text-align:center;font-size:13px;line-height:1.7}
@media(max-width:760px){
  .hero{grid-template-columns:1fr}.source-badge{justify-self:start}.panel-head{align-items:start;flex-direction:column}.choices{grid-template-columns:1fr}
}