/* 化学课堂各环节整合 —— 聚合入口页公共样式 */

:root{
  --ink:#18323b; --muted:#63808a; --teal:#168c96; --teal-dark:#11747d;
  --gold:#e3b83f; --line:#d6e5e8; --bg:#f4faf9; --card:#ffffff;
  --shadow:0 7px 22px rgba(49,85,99,.09);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:linear-gradient(180deg,#f8fbfc,#eef6f7);
  color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-text-size-adjust:100%;
}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-in{
  max-width:1180px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand .logo{
  width:40px; height:40px; border-radius:12px; flex:none;
  background:linear-gradient(135deg,var(--teal),#0d6f78);
  color:#fff; font-weight:900; font-size:19px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(22,140,150,.28);
}
.brand h1{font-size:19px; margin:0; font-weight:900; letter-spacing:.02em}
.brand .sub{font-size:12.5px; color:var(--muted); margin:0}
.spacer{flex:1 1 auto}

.switch{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--line); background:var(--bg);
  border-radius:999px; padding:7px 15px; font-size:14px; font-weight:700;
  cursor:pointer; user-select:none; white-space:nowrap;
}
.switch:hover{background:#e9f5f5}
.switch input{width:17px; height:17px; accent-color:var(--teal); margin:0; cursor:pointer}
.switch .on{color:var(--teal)}
.switch .off{color:var(--muted)}
.switch .state{color:var(--teal); font-weight:800; min-width:64px; display:inline-block}

.btn{
  border:0; border-radius:10px; padding:10px 18px;
  background:var(--teal); color:#fff; font:inherit; font-weight:800; font-size:15px;
  cursor:pointer; white-space:nowrap;
}
.btn:hover{background:var(--teal-dark)}
.btn.ghost{background:#fff; color:var(--teal); border:1px solid var(--teal)}
.btn.ghost:hover{background:#eaf7f7}
.btn.danger{background:#fff; color:#c0403a; border:1px solid #e6b7b4}
.btn.danger:hover{background:#fdf1f0}
.btn:disabled{opacity:.55; cursor:default}

/* ---------- 主体 ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:26px 20px 64px}
.hero{margin:6px 0 22px}
.hero .eyebrow{color:#a87313; font-weight:800; font-size:14px; letter-spacing:.08em}
.hero h2{font-size:clamp(26px,4.2vw,40px); margin:6px 0 8px; color:#173844; line-height:1.2}
.hero p{margin:0; color:var(--muted); max-width:760px}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:14px}

.entry{
  display:flex; flex-direction:column; gap:8px;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:16px 16px 14px; box-shadow:var(--shadow); cursor:pointer;
  text-align:left; font:inherit; color:inherit; width:100%;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.entry:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(49,85,99,.14); border-color:#b9d7da}
.entry:focus-visible{outline:3px solid rgba(22,140,150,.45); outline-offset:2px}
.entry .row1{display:flex; align-items:center; gap:10px}
.entry .no{
  flex:none; width:34px; height:34px; border-radius:10px;
  background:#eaf7f7; color:var(--teal); border:1px solid #9bc9ca;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:16px;
}
.entry .name{font-size:17px; font-weight:800; line-height:1.35}
.entry .desc{font-size:13.5px; color:var(--muted); flex:1 1 auto}
.entry .tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:2px}
.tag{
  font-size:11.5px; font-weight:800; padding:2px 8px; border-radius:999px;
  background:#f0f6f7; color:#4b6a72; border:1px solid #dbe8ea;
}
.tag.data{background:#e8f6ef; color:#1c6b4d; border-color:#bfe3d0}
.tag.sim{background:#fff4dc; color:#8a6412; border-color:#eed9a4}
.tag.ext{background:#eef0fb; color:#3f4f9a; border-color:#cdd3f2}
.tag.static{background:#f2f2f2; color:#666; border-color:#e0e0e0}

/* ---------- 页内嵌入区 ---------- */
.viewer{
  display:none; position:fixed; inset:0; z-index:50; background:#eef6f7;
  flex-direction:column;
}
.viewer.on{display:flex}
.viewer-bar{
  display:flex; align-items:center; gap:12px; padding:10px 16px;
  background:#fff; border-bottom:1px solid var(--line); flex:none; flex-wrap:wrap;
}
.viewer-bar .t{font-weight:800; font-size:15px}
.viewer-bar .u{font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:46vw}
.viewer iframe{flex:1 1 auto; width:100%; border:0; background:#fff; display:block}
.viewer .ext-note{
  padding:8px 16px; background:#fff7e6; border-bottom:1px solid #f0dcae;
  color:#8a6412; font-size:13px; flex:none;
}

.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  background:rgba(24,50,59,.94); color:#fff; padding:11px 20px; border-radius:999px;
  font-size:14px; font-weight:700; opacity:0; pointer-events:none; transition:.22s ease; z-index:80;
}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

.foot{margin-top:30px; color:var(--muted); font-size:13px; text-align:center}
.foot code{background:#e9f2f3; padding:1px 6px; border-radius:5px; font-size:12.5px}

@media(max-width:640px){
  .topbar-in{padding:12px 14px; gap:10px}
  .brand h1{font-size:16px}
  .wrap{padding:18px 14px 48px}
  .entry .name{font-size:16px}
}