/* 初中物理互动实验 · 科技风深色主题（高对比·适合投影与课堂）
 * 全部实验页与导航页均引用本文件，修改后自动级联。 */
:root{
  /* 背景与面板 */
  --bg:#050a12;            /* 深蓝黑基底 */
  --panel:rgba(13,26,44,0.72);   /* 玻璃面板 */
  --panel-solid:#0c1b2e;   /* 实色面板（表格/读数） */
  --panel-2:#0a1726;       /* 次级实色 */
  /* 文字（高对比：近白 / 浅蓝灰） */
  --ink:#eef5ff;           /* 正文，约 16:1 对比 */
  --muted:#b7c9e0;         /* 次要文字，约 10:1 对比 */
  /* 描边与霓虹 */
  --line:rgba(96,170,230,0.22);
  --line-strong:rgba(96,170,230,0.45);
  --brand:#38bdf8;         /* 霓虹青 */
  --brand2:#22d3ee;        /* 亮青 */
  --accent:#ffb02e;        /* 琥珀高亮 */
  --warn:#ff7a7a;          /* 警示红 */
  --ok:#57e08a;            /* 成功绿 */
  --soft:rgba(56,189,248,0.10);   /* 浅青底纹 */
  --glow:0 0 18px rgba(34,211,238,0.35);
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"Segoe UI","Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  background:var(--bg);
  background-image:
    radial-gradient(1100px 560px at 50% -12%, rgba(34,211,238,0.10), rgba(34,211,238,0) 62%),
    radial-gradient(900px 500px at 100% 0%, rgba(56,189,248,0.06), rgba(56,189,248,0) 60%),
    linear-gradient(180deg,#060d18 0%,#050a12 55%,#04070d 100%);
  background-attachment:fixed;
  color:var(--ink);
  line-height:1.8;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* 科技感淡网格叠层（不遮挡文字） */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(96,170,230,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,170,230,0.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(1200px 800px at 50% 0%, #000 0%, transparent 80%);
}
.wrap{max-width:980px;margin:0 auto;padding:30px 20px 64px;position:relative}

/* 顶部标题：霓虹渐变 + 发光 */
header.top{
  background:linear-gradient(120deg,#0b3a5c 0%,#0e7490 55%,#155e75 100%);
  color:#ffffff;
  padding:24px 22px;border-radius:14px;margin-bottom:20px;
  border:1px solid rgba(120,200,255,0.35);
  box-shadow:0 0 0 1px rgba(56,189,248,0.10), 0 10px 40px rgba(0,0,0,0.55), inset 0 0 30px rgba(34,211,238,0.12);
  position:relative;overflow:hidden;
}
header.top::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--brand2),transparent);
  box-shadow:0 0 12px var(--brand2);
}
header.top h1{margin:0 0 6px;font-size:25px;letter-spacing:.5px;text-shadow:0 0 16px rgba(255,255,255,0.35)}
header.top p{margin:0;opacity:.95;font-size:14.5px;color:#dff3ff}

h2{font-size:21px;margin:32px 0 12px;padding-left:12px;border-left:5px solid var(--brand);
  color:#eaf6ff;text-shadow:0 0 12px rgba(56,189,248,0.35)}
h3{font-size:17px;margin:20px 0 8px;color:var(--brand2)}
.meta{color:var(--muted);font-size:13px;margin:2px 0 14px}

/* 玻璃卡片 */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 18px;margin:12px 0;
  box-shadow:0 8px 30px rgba(0,0,0,0.40), inset 0 0 0 1px rgba(255,255,255,0.02);
  backdrop-filter:blur(6px);
}
.card b{color:#ffffff}
.card .tag{display:inline-block;font-size:12px;padding:2px 9px;border-radius:999px;
  background:var(--soft);color:var(--brand);margin-right:6px;border:1px solid var(--line)}
.card .tag.t-tan{background:rgba(255,176,46,0.14);color:#ffc24d;border-color:rgba(255,176,46,0.30)}
.card .tag.t-xue{background:rgba(87,224,138,0.14);color:#7ef0a8;border-color:rgba(87,224,138,0.30)}

table{border-collapse:collapse;width:100%;margin:10px 0;font-size:14.5px;background:var(--panel-solid);
  border-radius:10px;overflow:hidden;border:1px solid var(--line)}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:center;color:var(--ink)}
th{background:linear-gradient(180deg,#0e3a57,#0c2c44);color:#dff3ff;font-weight:700;
  border-bottom:2px solid var(--brand)}
tr:nth-child(even) td{background:rgba(255,255,255,0.03)}

/* 仿真区：深空底色 + 霓虹描边 */
.sim{background:#0a1622;border:1px solid var(--line-strong);border-radius:12px;padding:10px;margin:14px 0;
  box-shadow:inset 0 0 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(56,189,248,0.04)}
.sim svg{width:100%;height:auto;touch-action:none;display:block;border-radius:8px}
.sim-hint{color:#bfe0ff;font-size:13px;margin:8px 2px 2px;text-align:left;line-height:1.7}

/* 按钮：霓虹渐变 + 发光 */
.btn{display:inline-block;background:linear-gradient(135deg,#0ea5e9,#22d3ee);color:#04141f;
  border:none;border-radius:9px;padding:9px 15px;font-size:14px;font-weight:700;cursor:pointer;
  margin:6px 8px 0 0;box-shadow:0 0 14px rgba(34,211,238,0.40), inset 0 1px 0 rgba(255,255,255,0.3);
  transition:box-shadow .15s, transform .05s}
.btn:hover{box-shadow:0 0 22px rgba(34,211,238,0.70), inset 0 1px 0 rgba(255,255,255,0.4)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:rgba(56,189,248,0.07);color:var(--brand);border:1px solid rgba(56,189,248,0.55);
  box-shadow:none}
.btn.ghost:hover{border-color:var(--brand2);box-shadow:0 0 14px rgba(34,211,238,0.35);color:#eafcff}

/* 读数胶囊 */
.readout{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.readout .r{background:var(--panel-solid);border:1px solid var(--line-strong);border-radius:10px;
  padding:7px 13px;font-size:14px;color:var(--ink);box-shadow:inset 0 0 18px rgba(56,189,248,0.06)}
.readout .r b{color:var(--accent);font-size:16px;text-shadow:0 0 10px rgba(255,176,46,0.45)}

/* 提示框 */
.note{background:rgba(255,176,46,0.10);border-left:4px solid var(--accent);padding:11px 14px;
  border-radius:8px;margin:10px 0;font-size:14.5px;color:#ffe9c2}
.warn{background:rgba(255,122,122,0.10);border-left:4px solid var(--warn);padding:11px 14px;
  border-radius:8px;margin:10px 0;font-size:14.5px;color:#ffd6d6}
.back{display:inline-block;margin:8px 0 0;color:var(--brand);text-decoration:none;font-size:14px;
  padding:4px 10px;border:1px solid var(--line);border-radius:8px;background:rgba(56,189,248,0.06)}
.back:hover{text-decoration:none;border-color:var(--brand2);box-shadow:var(--glow)}

ul.steps{margin:6px 0;padding-left:24px}
ul.steps li{margin:5px 0;color:var(--ink)}
ul.steps li b{color:#ffffff}

footer{color:var(--muted);font-size:12.5px;text-align:center;margin-top:36px;
  border-top:1px solid var(--line);padding-top:18px}

/* 导航页：标签胶囊与卡片网格 */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.tabs a{padding:8px 15px;border-radius:999px;background:var(--panel);border:1px solid var(--line);
  color:var(--brand);text-decoration:none;font-size:14px;box-shadow:inset 0 0 16px rgba(56,189,248,0.05)}
.tabs a:hover{border-color:var(--brand2);box-shadow:var(--glow);color:#eafcff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.grid .item{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px;
  box-shadow:0 8px 26px rgba(0,0,0,0.40), inset 0 0 0 1px rgba(255,255,255,0.02);transition:border-color .15s, box-shadow .15s}
.grid .item:hover{border-color:var(--brand2);box-shadow:0 0 22px rgba(34,211,238,0.25)}
.grid .item a{color:var(--brand);font-weight:600;text-decoration:none;font-size:15px}
.grid .item a:hover{color:#eafcff;text-shadow:0 0 10px rgba(34,211,238,0.5)}
.grid .item .soon{color:var(--muted);font-size:12.5px;margin-top:6px;line-height:1.6}
.legend{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.8}

/* 通用：区段内联面板（部分页面用到） */
.ctrl-col{flex:1;min-width:260px;background:var(--panel-solid);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ctl{margin:10px 0;text-align:left}
.ctl label{display:inline-block;min-width:96px;font-weight:600;color:var(--ink)}
.ctl input[type=range]{width:46%;vertical-align:middle;accent-color:var(--brand2)}
.ctl .v{display:inline-block;min-width:90px;color:var(--accent);font-weight:700}
.seg{display:inline-flex;gap:6px;margin:6px 0;flex-wrap:wrap;align-items:center}

::selection{background:rgba(34,211,238,0.30);color:#fff}