:root{
  /* 共享设计 token：精致微拟物 + 现代卡通海洋风 */
  --radius-sm:16px;
  --radius:20px;
  --radius2:28px;
  --radius-pill:999px;
  --transition: all .3s cubic-bezier(.4,0,.2,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

/* ===== 深海夜间（默认）：神秘深海蓝 + 荧光水母绿/蓝点缀 ===== */
:root,
html[data-theme="night"]{
  --bg-primary:#0F172A;
  --bg0:#0A0F1F;
  --bg1:#0F172A;
  --bg2:#1E293B;
  --card-bg:rgba(30,41,59,.80);
  --card:rgba(30,41,59,.74);
  --card2:rgba(15,23,42,.96);
  --surface:rgba(30,41,59,.60);
  --stroke:#2E4A66;
  --text-color:#E6F4FF;
  --text:#E6F4FF;
  --muted:#A4C2DC;
  --brand:#22D3EE;            /* 荧光水母蓝 */
  --brand-rgb:34,211,238;
  --brand2:#5EEAD0;           /* 荧光水母绿 */
  --brand2-rgb:94,234,208;
  --warn:#FBBF24;
  --danger:#FB7185;
  --coral:#FB7185;            /* 深色下点缀采用珊瑚粉 */
  --coral-rgb:251,113,133;

  /* 柔和的微拟物悬浮阴影：组件像浮在水面 */
  --shadow: 0 18px 44px rgba(0,0,0,.45);
  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);
  --shadow-float: 0 26px 60px rgba(0,0,0,.5);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.05);

  --focus: 0 0 0 4px rgba(34,211,238,.30);
  --header-bg: linear-gradient(180deg, rgba(15,23,42,.94), rgba(15,23,42,.78));
  --side-bg: linear-gradient(180deg, rgba(15,23,42,.96), rgba(11,17,32,.90));
  --body-bg:
    radial-gradient(1000px 600px at 10% -10%, rgba(34,211,238,.22), transparent 60%),
    radial-gradient(900px 560px at 110% 20%, rgba(94,234,208,.18), transparent 55%),
    radial-gradient(900px 520px at 30% 120%, rgba(56,189,248,.12), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 42%, var(--bg0) 120%);
}

/* ===== 浅海日间：明亮海水蓝 + 浪花白 + 珊瑚橘点缀 ===== */
html[data-theme="day"]{
  --bg-primary:#E0F2FE;
  --bg0:#F2FBFF;
  --bg1:#E0F2FE;
  --bg2:#CDEAFB;
  --card-bg:rgba(255,255,255,.88);
  --card:rgba(255,255,255,.82);
  --card2:rgba(255,255,255,.96);
  --surface:rgba(255,255,255,.72);
  --stroke:#A9D4F0;
  --text-color:#0B3A56;
  --text:#0B3A56;
  --muted:#557790;
  --brand:#0EA5E9;            /* 海水蓝 */
  --brand-rgb:14,165,233;
  --brand2:#06B6D4;           /* 青蓝 */
  --brand2-rgb:6,182,212;
  --warn:#F59E0B;
  --danger:#F43F5E;
  --coral:#FF7F50;            /* 珊瑚橘点缀 */
  --coral-rgb:255,127,80;

  /* 浪花白底上的立体悬浮阴影（加深以增加层次对比） */
  --shadow: 0 14px 38px rgba(13,71,109,.16);
  --shadow-soft: 0 8px 22px rgba(13,71,109,.10);
  --shadow-float: 0 26px 60px rgba(13,71,109,.24);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.92);

  --focus: 0 0 0 4px rgba(14,165,233,.24);
  --header-bg: linear-gradient(180deg, rgba(255,255,255,.92), rgba(224,242,254,.85));
  --side-bg: linear-gradient(180deg, rgba(240,251,255,.98), rgba(205,234,251,.92));
  --body-bg:
    radial-gradient(1000px 600px at 10% -10%, rgba(186,230,253,.70), transparent 60%),
    radial-gradient(900px 560px at 110% 20%, rgba(255,224,200,.55), transparent 55%),
    radial-gradient(900px 520px at 30% 120%, rgba(165,243,252,.45), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 40%, var(--bg2) 120%);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Noto Sans SC", system-ui, -apple-system, "Segoe UI", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  color:var(--text-color);
  background:var(--body-bg);
  background-attachment: fixed;
  overflow-x:hidden;
  line-height:1.75;
  letter-spacing:.2px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* 主题切换平滑过渡 */
  transition: background-color .3s ease, color .3s ease;
}

/* 标题层级：字号调大、加粗、活泼行高 */
h1,h2,h3{
  line-height:1.3;
  letter-spacing:.3px;
}
h1{font-weight:900}
h2,h3{font-weight:800}

.skip-link{
  position:absolute; left:-9999px; top:12px;
  padding:10px 14px;
  background:var(--card2); border:1px solid var(--stroke);
  border-radius:var(--radius-sm); color:var(--text); text-decoration:none;
}
.skip-link:focus{left:12px; outline:none; box-shadow:var(--focus)}

.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; gap:18px; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background: linear-gradient(180deg, rgba(6,28,39,.92), rgba(6,28,39,.72));
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(42,90,116,.55);
}
html[data-theme="day"] .topbar{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(224,242,254,.85));
  border-bottom:1px solid rgba(14,165,233,.18);
}
.brand{display:flex; align-items:center; gap:12px; min-width:260px}
.brand__logo{
  width:40px; height:40px; border-radius:14px;
  background: linear-gradient(135deg, rgba(82,214,255,.22), rgba(139,255,207,.18));
  border:1px solid rgba(82,214,255,.28);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  display:grid; place-items:center;
  color:var(--brand);
}
html[data-theme="day"] .brand__logo{
  box-shadow: 0 6px 18px rgba(13,71,109,.12);
}
.brand__title{font-weight:800; letter-spacing:.5px}
.brand__sub{font-size:12px; color:var(--muted); opacity:.9}

.nav{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.nav__btn{
  appearance:none; border:1px solid color-mix(in srgb, var(--stroke) 70%, transparent);
  background: var(--surface);
  color:var(--text);
  padding:9px 14px;
  border-radius: var(--radius-pill);
  cursor:pointer;
  font-weight:700;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}
.nav__btn:hover{transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 65%, transparent); box-shadow: var(--shadow-float)}
.nav__btn:focus{outline:none; box-shadow:var(--focus)}
.nav__btn--primary{
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 32%, transparent), color-mix(in srgb, var(--brand2) 26%, transparent));
  border-color: color-mix(in srgb, var(--brand) 70%, transparent);
}

.main{max-width:1180px; margin:0 auto; padding:0 18px 60px}

.hero{
  position:relative;
  margin:18px 0 20px;
  border-radius: var(--radius2);
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
  box-shadow: var(--shadow), var(--shadow-inset);
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 75%, transparent), color-mix(in srgb, var(--bg2) 55%, transparent));
}
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 500px at 15% 10%, rgba(82,214,255,.33), transparent 55%),
    radial-gradient(1100px 500px at 85% 0%, rgba(139,255,207,.22), transparent 60%),
    radial-gradient(900px 520px at 55% 120%, rgba(255,204,102,.14), transparent 55%);
  filter:saturate(1.15);
}
.hero__bg::after{
  content:"";
  position:absolute; inset:-40% -20%;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(closest-side, rgba(255,255,255,.06), transparent 72%);
  background-size: 240px 240px, 320px 320px;
  background-position: 0 0, 80px 60px;
  transform: rotate(10deg);
  animation: drift 14s linear infinite;
  opacity:.8;
}
@keyframes drift{
  from{transform: translate3d(0,0,0) rotate(10deg)}
  to{transform: translate3d(-220px, 120px, 0) rotate(10deg)}
}
.hero__content{position:relative; padding:32px 26px}
.hero__title{margin:0 0 10px; font-size:36px; font-weight:900; line-height:1.25; letter-spacing:.2px}
.hero__lead{margin:0; color:var(--muted); font-size:17px; line-height:1.8; max-width:70ch}
.hero__cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.hero__chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}
.chip{
  font-size:13px; font-weight:700;
  padding:7px 13px; border-radius:var(--radius-pill);
  background: var(--surface);
  border:1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
  color:var(--text);
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}

.btn{
  appearance:none;
  border:1px solid color-mix(in srgb, var(--stroke) 75%, transparent);
  background: var(--surface);
  color:var(--text);
  padding:12px 18px;
  border-radius: var(--radius-sm);
  cursor:pointer;
  font-weight:800;
  font-size:15px;
  box-shadow: var(--shadow-soft), var(--shadow-inset);
  transition: var(--transition);
}
.btn:hover{transform: translateY(-2px); border-color: color-mix(in srgb, var(--brand) 65%, transparent); box-shadow: var(--shadow-float)}
.btn:active{transform: translateY(0); box-shadow: var(--shadow-soft)}
.btn:focus{outline:none; box-shadow:var(--focus)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:var(--shadow-soft)}
.btn--primary{
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 42%, transparent), color-mix(in srgb, var(--brand2) 30%, transparent));
  border-color: color-mix(in srgb, var(--brand) 85%, transparent);
}
.btn--ghost{
  background: transparent;
  box-shadow:none;
  border-color: color-mix(in srgb, var(--stroke) 60%, transparent);
}
.btn--ghost:hover{box-shadow: var(--shadow-soft)}
.btn--small{
  padding:9px 14px;
  border-radius: var(--radius-pill);
  font-weight:800;
  font-size:13px;
}

.station{margin-top:18px; padding-top:8px}
.station__head{
  margin:18px 0 12px;
  padding:10px 2px 0;
}
.station__badge{
  display:inline-block;
  font-weight:900;
  font-size:14px;
  color:var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 32%, transparent), color-mix(in srgb, var(--brand2) 20%, transparent));
  border:1px solid color-mix(in srgb, var(--brand) 55%, transparent);
  padding:7px 14px;
  border-radius:var(--radius-pill);
  letter-spacing:.4px;
  box-shadow: var(--shadow-soft);
}
.station h2{margin:12px 0 10px; font-size:27px; font-weight:800; line-height:1.3}
.station__desc{margin:0; color:var(--muted); font-size:16px; line-height:1.85; max-width:90ch}
.station--final .station__badge{border-color: rgba(255,204,102,.70)}

.grid{display:grid; gap:14px}
.grid--2{grid-template-columns: 1fr 1fr}
@media (max-width: 980px){
  .grid--2{grid-template-columns: 1fr}
  .brand{min-width:auto}
  .hero__title{font-size:26px}
}

.card{
  border-radius: var(--radius);
  border:1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
  background: var(--surface);
  box-shadow: var(--shadow-soft), var(--shadow-inset);
  padding:18px;
  overflow:hidden;
  backdrop-filter: blur(8px);
  transition: var(--transition);
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-float), var(--shadow-inset);
}
.card--glass{
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 88%, transparent), color-mix(in srgb, var(--card-bg) 58%, transparent));
  backdrop-filter: blur(12px);
}
.card__title{margin:0 0 12px; font-size:19px; font-weight:800; line-height:1.35}
.muted{color:var(--muted); line-height:1.85}
.note{margin-top:10px; color:var(--text); line-height:1.8}
.scoreline{margin-top:10px; color:var(--text); font-weight:800; font-size:16px}

/* 第一站 */
.poem{padding:14px 14px 16px; border-radius:var(--radius-sm); border:1px dashed color-mix(in srgb, var(--brand) 40%, transparent); background: color-mix(in srgb, var(--bg0) 30%, transparent)}
.poem__line{font-weight:900; font-size:20px; line-height:1.6; letter-spacing:.6px}
.poem__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.poem__answer{margin-top:10px; min-height:52px; color:var(--text); line-height:1.85; font-size:16px}

.mini-ocean{position:relative}
.mini-ocean canvas{
  width:100%; height:auto;
  display:block;
  border-radius: var(--radius-sm);
  border:1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
  background: linear-gradient(180deg, rgba(11,42,58,.55), rgba(6,28,39,.35));
}
html[data-theme="day"] .mini-ocean canvas{
  background: linear-gradient(180deg, rgba(14,165,233,.12), rgba(6,182,212,.08));
  border-color: rgba(14,165,233,.22);
}
.mini-ocean__hint{
  position:absolute; left:10px; bottom:10px;
  font-size:12px; color:rgba(234,246,255,.85);
  background: rgba(6,28,39,.55);
  border:1px solid rgba(42,90,116,.55);
  padding:6px 10px; border-radius:999px;
  backdrop-filter: blur(6px);
  pointer-events:none;
}
html[data-theme="day"] .mini-ocean__hint{
  color: #0B3A56;
  background: rgba(255,255,255,.78);
  border-color: rgba(14,165,233,.28);
}

/* 第二站：实验 */
.lab{display:grid; grid-template-columns: 1.7fr 1fr; gap:14px; align-items:start}
@media (max-width: 980px){.lab{grid-template-columns: 1fr}}
.lab__canvasWrap{position:relative}
.lab canvas{
  width:100%; height:auto; display:block;
  border-radius: var(--radius);
  border:1px solid rgba(42,90,116,.55);
  background: linear-gradient(180deg, rgba(11,42,58,.55), rgba(6,28,39,.35));
}
html[data-theme="day"] .lab canvas{
  background: linear-gradient(180deg, rgba(14,165,233,.12), rgba(6,182,212,.08));
  border-color: rgba(14,165,233,.22);
}
.lab__overlay{
  position:absolute; left:12px; top:12px;
  display:flex; gap:8px; align-items:center;
}
.lab__label{
  padding:7px 13px; border-radius:var(--radius-pill);
  background: color-mix(in srgb, var(--card2) 75%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  color:var(--text);
  font-weight:900;
  box-shadow: var(--shadow-soft);
}
.lab__panel{
  border-radius: var(--radius);
  border:1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
  background: var(--surface);
  padding:16px;
  box-shadow: var(--shadow-soft), var(--shadow-inset);
  backdrop-filter: blur(8px);
}
.panel__row{margin-bottom:10px}
.panel__row--2{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.label{display:block; font-weight:800; font-size:15px; margin-bottom:8px}
.select{
  width:100%;
  padding:12px 14px;
  border-radius: var(--radius-sm);
  border:1px solid color-mix(in srgb, var(--stroke) 65%, transparent);
  background: var(--surface);
  color: var(--text);
  font-weight:700;
  font-family:inherit;
  box-shadow: var(--shadow-inset);
  transition: var(--transition);
}
.select--small{padding:9px 14px; border-radius:var(--radius-pill); font-size:13px}
.select:hover{border-color: color-mix(in srgb, var(--brand) 50%, transparent)}
.select:focus{outline:none; box-shadow: var(--focus)}
.range{width:100%; accent-color: var(--brand)}
.toggle{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius: var(--radius-sm);
  border:1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
  background: var(--surface);
  box-shadow: var(--shadow-inset);
  transition: var(--transition);
}
.toggle input{accent-color: var(--brand)}
.panel__note{
  color:var(--text);
  line-height:1.8;
  background: color-mix(in srgb, var(--bg0) 28%, transparent);
  border:1px dashed color-mix(in srgb, var(--warn) 45%, transparent);
  border-radius: var(--radius-sm);
  padding:14px;
}

/* 第三站：小黄鸭 */
.duck-game{
  display:grid;
  gap:10px;
}
.duck-game canvas{
  width:100%; height:auto; display:block;
  border-radius: var(--radius);
  border:1px solid rgba(42,90,116,.55);
  background: linear-gradient(180deg, rgba(11,42,58,.55), rgba(6,28,39,.35));
}
html[data-theme="day"] .duck-game canvas{
  background: linear-gradient(180deg, rgba(14,165,233,.12), rgba(6,182,212,.08));
  border-color: rgba(14,165,233,.22);
}
.duck-game__hud{
  border-radius: var(--radius);
  background: var(--surface);
  border:1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
  padding:14px;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft), var(--shadow-inset);
}
.hud__row{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px}
.hud__row:last-child{margin-bottom:0}
.hud__tag{
  font-size:13px; font-weight:900;
  padding:5px 11px; border-radius:var(--radius-pill);
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 28%, transparent);
}
.hud__text{font-size:13px; color:var(--muted)}
.story__title{margin:0 0 10px; font-size:19px; font-weight:800; line-height:1.4}
.story__list{margin:0 0 12px; padding-left:18px; color:var(--text); font-size:16px; line-height:1.85}
.story__q{
  border-radius: var(--radius);
  border:1px solid rgba(42,90,116,.55);
  background: rgba(6,28,39,.35);
  padding:12px;
}
html[data-theme="day"] .story__q{
  border-color: rgba(14,165,233,.18);
  background: rgba(224,242,254,.55);
}
.story__qTitle{font-weight:900; margin-bottom:6px}
.story__qBody{color:var(--muted); line-height:1.7; margin-bottom:10px}
.story__choices{display:flex; gap:8px; flex-wrap:wrap}
.story__result{margin-top:10px; min-height:44px; line-height:1.7}

/* 第四站：拖拽 */
.drag-area__cards{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.drag-card{
  user-select:none;
  padding:12px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border:1px solid color-mix(in srgb, var(--stroke) 60%, transparent);
  cursor:grab;
  font-weight:900;
  box-shadow: var(--shadow-soft), var(--shadow-inset);
  transition: var(--transition);
}
.drag-card:hover{transform: translateY(-2px); box-shadow: var(--shadow-float)}
.drag-card:focus{outline:none; box-shadow: var(--focus)}
.drag-area__bins{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
@media (max-width: 720px){.drag-area__bins{grid-template-columns: 1fr}}
.bin{
  border-radius: var(--radius);
  border:1px solid rgba(42,90,116,.55);
  background: rgba(6,28,39,.30);
  padding:10px;
}
html[data-theme="day"] .bin{
  border-color: rgba(14,165,233,.18);
  background: rgba(224,242,254,.45);
}
.bin__title{font-weight:900}
.bin__hint{font-size:12px; color:var(--muted); margin-top:4px}
.bin__drop{
  margin-top:10px;
  min-height:92px;
  border-radius: var(--radius-sm);
  border:1px dashed color-mix(in srgb, var(--brand) 40%, transparent);
  padding:10px;
  display:flex; gap:8px; flex-wrap:wrap; align-content:flex-start;
  transition: var(--transition);
}
.bin--over{border-color: rgba(82,214,255,.8); box-shadow: var(--focus)}

.coriolis{display:grid; gap:12px}
.coriolis__controls{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.coriolis__controls .label{
  font-size:13px;
  margin:0;
  white-space:nowrap;
  flex-shrink:0;
}
.coriolis__controls .select{
  width:auto;
  flex:0 1 auto;
  padding:6px 12px;
  font-size:13px;
}
.coriolis__controls .panel__row--2{
  display:flex;
  gap:8px;
  margin:0;
}
.coriolis__controls .btn{
  font-size:13px;
  padding:6px 14px;
  white-space:nowrap;
}
.coriolis canvas{
  width:100%; height:auto; display:block;
  border-radius: var(--radius-sm);
  border:1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
  background: rgba(6,28,39,.30);
}
html[data-theme="day"] .coriolis canvas{
  background: rgba(14,165,233,.08);
  border-color: rgba(14,165,233,.18);
}

/* 第五站：空调与上涌 */
.ac{display:grid; gap:12px}
.ac__map{
  position:relative;
  height:220px;
  border-radius: var(--radius);
  border:1px solid rgba(42,90,116,.55);
  background:
    radial-gradient(220px 160px at 18% 60%, rgba(255,204,102,.22), transparent 70%),
    radial-gradient(260px 190px at 78% 40%, rgba(139,255,207,.18), transparent 72%),
    linear-gradient(180deg, rgba(11,42,58,.45), rgba(6,28,39,.30));
  overflow:hidden;
}
html[data-theme="day"] .ac__map{
  border-color: rgba(14,165,233,.18);
  background:
    radial-gradient(220px 160px at 18% 60%, rgba(245,158,11,.18), transparent 70%),
    radial-gradient(260px 190px at 78% 40%, rgba(6,182,212,.12), transparent 72%),
    linear-gradient(180deg, rgba(224,242,254,.55), rgba(205,234,251,.40));
}
.ac__zone{
  position:absolute;
  width:46%; height:74%;
  top:13%;
  border-radius: var(--radius);
  border:1px dashed rgba(234,246,255,.25);
  display:flex; align-items:flex-start; justify-content:flex-start;
  padding:10px;
}
.ac__zone--hot{left:4%; background: rgba(255,204,102,.10)}
.ac__zone--cold{right:4%; background: rgba(139,255,207,.08)}
.ac__label{
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(6,28,39,.55);
  border:1px solid rgba(42,90,116,.55);
  font-size:12px;
}
html[data-theme="day"] .ac__label{
  background: rgba(255,255,255,.75);
  border-color: rgba(14,165,233,.22);
  color: var(--text);
}
.parcel{
  position:absolute;
  left:10%;
  top:62%;
  transform: translateY(-50%);
  width:210px;
  padding:10px 10px;
  border-radius: 16px;
  border:1px solid rgba(255,204,102,.55);
  background: rgba(6,28,39,.68);
  cursor:grab;
  display:flex; gap:10px; align-items:center;
}
html[data-theme="day"] .parcel{
  background: rgba(255,255,255,.85);
  border-color: rgba(245,158,11,.45);
  box-shadow: 0 4px 16px rgba(13,71,109,.10);
}
.parcel__icon{
  width:40px; height:40px; border-radius:14px;
  display:grid; place-items:center;
  font-weight:900;
  background: rgba(255,204,102,.18);
  border:1px solid rgba(255,204,102,.45);
  color: rgba(255,204,102,.95);
}
html[data-theme="day"] .parcel__icon{
  background: rgba(245,158,11,.15);
  border-color: rgba(245,158,11,.35);
  color: #D97706;
}
.parcel__text{font-weight:900; font-size:12px; color:rgba(234,246,255,.92)}
html[data-theme="day"] .parcel__text{color:var(--text)}
.ac__meters{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
@media (max-width: 720px){.ac__meters{grid-template-columns: 1fr}}
.meter{
  border-radius: var(--radius);
  border:1px solid rgba(42,90,116,.55);
  background: rgba(6,28,39,.25);
  padding:10px;
}
html[data-theme="day"] .meter{
  border-color: rgba(14,165,233,.18);
  background: rgba(224,242,254,.40);
}
.meter__title{font-weight:900; margin-bottom:8px}
.meter__bar{
  height:12px; border-radius:999px;
  background: rgba(234,246,255,.10);
  border:1px solid rgba(42,90,116,.55);
  overflow:hidden;
}
html[data-theme="day"] .meter__bar{
  background: rgba(14,165,233,.08);
  border-color: rgba(14,165,233,.18);
}
.meter__fill{height:100%; width:60%; border-radius:999px; transition: width .25s ease}
.meter__fill--hot{background: linear-gradient(90deg, rgba(255,204,102,.25), rgba(255,204,102,.85))}
.meter__fill--cold{background: linear-gradient(90deg, rgba(82,214,255,.25), rgba(82,214,255,.85)); width:30%}
.meter__val{margin-top:8px; font-weight:900; color:var(--text)}

.upwelling canvas{
  width:100%; height:auto; display:block;
  border-radius: var(--radius);
  border:1px solid rgba(42,90,116,.55);
  background: rgba(6,28,39,.30);
}
html[data-theme="day"] .upwelling canvas{
  background: rgba(14,165,233,.08);
  border-color: rgba(14,165,233,.18);
}
html[data-theme="day"] .upwelling__controls{
  background: rgba(14,165,233,.06);
  border-color: rgba(14,165,233,.14);
}
.upwelling__controls{
  display:flex; 
  gap:10px; 
  flex-wrap:wrap; 
  align-items:center; 
  margin-top:12px;
  padding:10px 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}
.upwelling__controls .btn{
  font-size:13px;
  padding:7px 16px;
  white-space:nowrap;
}
.upwelling__hint{
  font-size:13px; 
  color:var(--muted); 
  font-weight:700;
  margin-left:4px;
}

/* 测验 */
.q{
  border-radius: var(--radius);
  border:1px solid rgba(42,90,116,.55);
  background: rgba(6,28,39,.25);
  padding:12px;
  margin-bottom:10px;
}
html[data-theme="day"] .q{
  border-color: rgba(14,165,233,.18);
  background: rgba(224,242,254,.45);
}
.q__title{font-weight:800; font-size:17px; line-height:1.5; margin-bottom:12px}
.q__opts{display:grid; gap:8px}
.opt{
  display:flex; gap:10px; align-items:center;
  padding:12px 14px;
  border-radius: var(--radius-sm);
  border:1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
  background: var(--surface);
  cursor:pointer;
  font-size:15px;
  box-shadow: var(--shadow-inset);
  transition: var(--transition);
}
.opt input{accent-color: var(--brand)}
.opt:hover{border-color: color-mix(in srgb, var(--brand) 55%, transparent); transform: translateY(-1px); box-shadow: var(--shadow-soft)}
.opt--correct{border-color: color-mix(in srgb, var(--brand2) 85%, transparent); background: color-mix(in srgb, var(--brand2) 12%, transparent)}
.opt--wrong{border-color: color-mix(in srgb, var(--danger) 85%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent)}

/* 通关卡 */
.badge-card{
  border-radius: var(--radius2);
  border:1px solid rgba(255,204,102,.55);
  background: linear-gradient(180deg, rgba(255,204,102,.10), rgba(15,38,51,.40));
  padding:14px;
}
html[data-theme="day"] .badge-card{
  background: linear-gradient(180deg, rgba(254,243,199,.30), rgba(255,251,240,.60));
}
.badge-card__top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.badge-card__title{font-weight:900}
.badge-card__stars{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.star{
  width:16px; height:16px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: rgba(255,204,102,.22);
  border:1px solid rgba(255,204,102,.35);
  box-shadow: 0 6px 16px rgba(0,0,0,.24);
}
.star--on{background: rgba(255,204,102,.90)}
.badge-card__big{margin-top:18px; font-weight:900; font-size:21px; line-height:1.4}
.badge-card__small{margin-top:10px; color:var(--muted); line-height:1.8}
.badge-card__bottom{margin-top:12px}

.footer{
  margin-top:18px;
  border-top:1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
  padding-top:18px;
  color:var(--text);
}
.footer__inner{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.footer__title{font-weight:900}
.footer__sub{font-size:12px; color:var(--muted)}
.footer-tip{
  margin-top:12px;
  padding:14px;
  border-radius: var(--radius-sm);
  border:1px dashed color-mix(in srgb, var(--brand) 38%, transparent);
  background: color-mix(in srgb, var(--bg0) 28%, transparent);
  color:var(--text);
  line-height:1.8;
}

/* ---------- 登录 / 注册：全屏海底 + 潜水艇舷窗 ---------- */
body.auth-locked{overflow:hidden}
.app-shell[hidden]{display:none !important}

/* ---------- 主界面：侧栏 + 内容区 ---------- */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.app-layout{
  display:flex;
  min-height:100vh;
  width:100%;
}

.side-shell{
  display:flex;
  flex-shrink:0;
  position:sticky;
  top:0;
  align-self:flex-start;
  align-items:stretch;
  height:100vh;
  z-index:60;
  /* 微透明海洋色，与右侧主体拉开层次 */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 14%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg2) 60%, transparent), color-mix(in srgb, var(--bg0) 50%, transparent));
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  border-right:1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  box-shadow: 10px 0 34px rgba(0,0,0,.16);
}
html[data-theme="day"] .side-shell{
  box-shadow: 6px 0 22px rgba(13,71,109,.08);
}

.side-rail__toggle{
  appearance:none;
  flex-shrink:0;
  width:52px;
  height:52px;
  margin:10px 0 10px 8px;
  border-radius:var(--radius-sm);
  border:1px solid color-mix(in srgb, var(--brand) 35%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 22%, transparent), color-mix(in srgb, var(--brand2) 16%, transparent));
  color:var(--brand);
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}
.side-rail__toggle:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 70%, transparent);
  box-shadow: var(--shadow-float);
}
.side-rail__toggle:focus{outline:none; box-shadow:var(--focus)}
.side-shell.is-open .side-rail__toggle{
  border-color: color-mix(in srgb, var(--brand) 75%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 32%, transparent), color-mix(in srgb, var(--brand2) 22%, transparent));
}

.side-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  width:0;
  overflow:hidden;
  padding:10px 0;
  transition: width .28s ease, padding .28s ease;
  flex:1;
  min-height:0;
}
.side-nav__spacer{flex:1; min-height:12px}
.side-nav__item--settings{margin-top:0}
.side-shell.is-open .side-nav{
  width:200px;
  padding:10px 10px 10px 0;
}
.side-shell.is-open .side-nav[hidden]{display:flex}

.side-nav__item{
  appearance:none;
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  width:180px;
  padding:12px 12px;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  background: transparent;
  color:var(--muted);
  cursor:pointer;
  font-weight:700;
  font-size:15px;
  text-align:left;
  transition: color .15s, background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.side-nav__item:hover{
  background: var(--surface);
  border-color: color-mix(in srgb, var(--stroke) 55%, transparent);
  color:var(--text);
  transform: translateX(3px);
}
.side-nav__item:focus{outline:none; box-shadow:var(--focus)}

/* 选中项：悬浮胶囊 + 前方一滴小水滴 */
.side-nav__item--active,
.side-nav__item[aria-current="page"]{
  padding-left:20px;
  border-radius:var(--radius-pill);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 30%, transparent), color-mix(in srgb, var(--brand2) 18%, transparent));
  border-color: color-mix(in srgb, var(--brand) 58%, transparent);
  color:var(--text);
  transform: translateX(3px);
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--brand) 30%, transparent),
    var(--shadow-soft),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.side-nav__item--active::before,
.side-nav__item[aria-current="page"]::before{
  content:"";
  position:absolute;
  left:6px;
  top:50%;
  width:9px; height:9px;
  border-radius:50% 50% 50% 0;
  background: radial-gradient(circle at 35% 28%, #ffffff, var(--brand2) 55%, var(--brand) 100%);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand) 75%, transparent);
  animation: drop-bob 2.4s ease-in-out infinite;
}
@keyframes drop-bob{
  0%,100%{transform: translateY(-50%) rotate(45deg) scale(1)}
  50%{transform: translateY(-62%) rotate(45deg) scale(1.08)}
}
.side-nav__icon{
  flex-shrink:0;
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:var(--radius-sm);
  background: color-mix(in srgb, var(--card-bg) 70%, transparent);
  border:1px solid color-mix(in srgb, var(--stroke) 50%, transparent);
  color:var(--brand);
  font-size:14px;
  transition: var(--transition);
}
.side-nav__item--active .side-nav__icon,
.side-nav__item[aria-current="page"] .side-nav__icon{
  color:var(--brand2);
  border-color: rgba(82,214,255,.45);
}
.side-nav__text{white-space:nowrap}

.app-stage{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}

.app-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:12px 18px;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom:1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
}
.app-header__title{
  margin:0;
  font-size:22px;
  font-weight:900;
  letter-spacing:.3px;
}

.app-panels{
  flex:1;
  min-height:0;
}

.app-panel{
  display:none;
  padding:0 0 40px;
  animation: panel-fade .18s ease;
}
.app-panel.app-panel--active{
  display:block;
}
.app-panel[hidden]:not(.app-panel--active){display:none !important}

@keyframes panel-fade{
  from{opacity:0}
  to{opacity:1}
}

.panel-placeholder{
  max-width:560px;
  margin:48px auto 24px;
  padding:32px 24px;
  text-align:center;
  border-radius: var(--radius2);
  border:1px dashed rgba(82,214,255,.35);
  background: rgba(15,38,51,.42);
  box-shadow: var(--shadow);
}
html[data-theme="day"] .panel-placeholder{
  border-color: rgba(14,165,233,.28);
  background: rgba(224,242,254,.55);
}
.panel-placeholder__icon{font-size:42px; margin-bottom:8px}
.panel-placeholder__title{margin:0 0 8px; font-size:22px}
.panel-placeholder__desc{margin:0; color:var(--muted); line-height:1.7}

/* ---------- 洋流总览 ---------- */
.overview-panel.app-panel--active{
  display:flex;
  flex-direction:column;
  padding-bottom:0;
  min-height:calc(100vh - 56px);
}
.overview-panel .overview{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:8px 18px 16px;
  max-width:900px;
  margin:0 auto;
  width:100%;
}
.overview__lead{
  margin:0 0 12px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  max-width:62ch;
}
.overview__map-wrap{
  position:relative;
  width:100%;
  max-width:760px;
  margin:0 auto;
}
.overview-map{
  display:block;
  width:100%;
  height:auto;
  max-width:760px;
  border-radius: var(--radius);
  border:1px solid rgba(42,90,116,.65);
  box-shadow: var(--shadow);
  background:#a8d8f0;
}
.overview-map .ocean{fill:#a8d8f0}
.overview-map .lat-line{
  fill:none;
  stroke:rgba(255,255,255,.45);
  stroke-width:1;
  stroke-dasharray:4 6;
}
.overview-map .lat-label{
  fill:rgba(6,28,39,.55);
  font-size:9px;
  font-weight:700;
  font-family:inherit;
}
.overview-map .continent{
  stroke:#5d4037;
  stroke-width:1.2;
  stroke-linejoin:round;
}
.overview-map .continent--sand{fill:#e8d5b7}
.overview-map .continent--green{fill:#c8e6c9}
.overview-map .current-line{
  fill:none;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:8 6;
  pointer-events:none;
}
.overview-map .current-line--warm{stroke:#d32f2f}
.overview-map .current-line--cold{stroke:#1976d2}
.overview-map .current-hit{
  fill:none;
  stroke:transparent;
  stroke-width:18;
  stroke-linecap:round;
  stroke-linejoin:round;
  cursor:pointer;
}
.overview-map .current-flow-anim{
  animation: current-dash-flow 1.1s linear infinite;
}
@keyframes current-dash-flow{
  to{stroke-dashoffset:-14}
}
.overview__legend{
  display:flex;
  gap:16px;
  justify-content:center;
  margin-top:10px;
  font-size:13px;
  font-weight:700;
}
.overview__legend-item::before{
  content:"";
  display:inline-block;
  width:28px; height:3px;
  margin-right:6px;
  vertical-align:middle;
  border-radius:2px;
  background:currentColor;
}
.overview__legend-item--warm{color:#ff8a80}
.overview__legend-item--cold{color:#64b5f6}

.current-tooltip{
  position:fixed;
  z-index:300;
  pointer-events:none;
  padding:10px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.92);
  color:#0b2a3a;
  box-shadow: 0 10px 32px rgba(0,0,0,.22);
  border:1px solid rgba(42,90,116,.25);
  max-width:220px;
  transform:translate(14px, 14px);
}
.current-tooltip__name{
  margin:0 0 4px;
  font-size:16px;
  font-weight:800;
  color:#0b3d5c;
}
.current-tooltip__desc{
  margin:0;
  font-size:13px;
  color:#455a64;
  line-height:1.45;
}

.overview__tipbar{
  flex-shrink:0;
  width:100%;
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 20px;
  background: linear-gradient(90deg, #0b3d5c 0%, rgba(11,61,92,.88) 50%, rgba(11,61,92,.75) 100%);
  border-top:1px solid rgba(82,214,255,.25);
}
html[data-theme="day"] .overview__tipbar{
  background: linear-gradient(90deg, #0EA5E9 0%, rgba(14,165,233,.92) 50%, rgba(6,182,212,.85) 100%);
  border-top:1px solid rgba(255,255,255,.30);
}
.overview__tip{
  margin:0;
  color:#fff;
  font-size:18px;
  font-weight:600;
  text-align:center;
  line-height:1.45;
  opacity:1;
  transition: opacity .55s ease;
}
.overview__tip.is-fading{opacity:0}

@media (max-width: 800px){
  .overview__tip{font-size:15px}
}

/* ---------- 智能问答 ---------- */
.qa-panel.app-panel--active{
  display:flex;
  flex-direction:column;
  padding:0;
  min-height:calc(100vh - 56px);
  overflow:hidden;
}
.qa-chat{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  background:
    radial-gradient(900px 500px at 20% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 55%),
    radial-gradient(700px 420px at 100% 80%, color-mix(in srgb, var(--brand2) 18%, transparent), transparent 50%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 45%, var(--bg2) 100%);
  transition: var(--transition);
}
.qa-header{
  position:relative;
  flex-shrink:0;
  padding:16px 18px;
  text-align:center;
  background: var(--header-bg);
  border-bottom:1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px);
}
.qa-header__brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.qa-avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:28px;
  background: linear-gradient(145deg, var(--brand), var(--brand2));
  border:2px solid color-mix(in srgb, #fff 45%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 35%, transparent);
}
.qa-header__title{
  margin:0;
  font-size:22px;
  font-weight:900;
  color:var(--text-color);
  letter-spacing:.5px;
}
.qa-header__actions{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:10px;
  justify-content:center;
}
.qa-new-chat-btn{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 14px;
  border:none;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  background:var(--brand);
  color:#fff;
  transition:var(--transition);
}
.qa-new-chat-btn:hover{
  filter:brightness(1.15);
  transform:translateY(-1px);
  box-shadow:0 4px 14px color-mix(in srgb, var(--brand) 40%, transparent);
}
/* AI/KB 来源徽章 */
.qa-badge{
  display:inline-block;
  margin-top:4px;
  padding:2px 10px;
  border-radius:10px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.3px;
  align-self:flex-start;
}
.qa-badge--ai{
  background:linear-gradient(135deg, #e0f7fa, #b2ebf2);
  color:#00695c;
  border:1px solid color-mix(in srgb, #26c6da 40%, transparent);
}
.qa-badge--kb{
  background:linear-gradient(135deg, #fff3e0, #ffe0b2);
  color:#bf360c;
  border:1px solid color-mix(in srgb, #ff9800 40%, transparent);
}
html[data-theme="night"] .qa-badge--ai{
  background:rgba(56,189,248,.18);
  color:#7dd3fc;
  border-color:rgba(56,189,248,.35);
}
html[data-theme="night"] .qa-badge--kb{
  background:rgba(251,191,36,.18);
  color:#fde68a;
  border-color:rgba(251,191,36,.35);
}
.qa-explore-btn{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  appearance:none;
  border:1px solid color-mix(in srgb, var(--stroke) 60%, transparent);
  background:var(--surface);
  color:var(--text);
  font-size:13px;
  font-weight:700;
  padding:8px 13px;
  border-radius:var(--radius-pill);
  cursor:pointer;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}
.qa-explore-btn:hover{transform:translateY(-50%) scale(1.04); border-color: color-mix(in srgb, var(--brand) 60%, transparent)}
.qa-explore-btn:focus{outline:none; box-shadow:var(--focus)}

.qa-messages{
  flex:1;
  width:100%;
  max-width:850px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  padding:20px 18px 28px;
  box-sizing:border-box;
  background:
    repeating-linear-gradient(
      125deg,
      color-mix(in srgb, var(--text-color) 4%, transparent) 0 2px,
      transparent 2px 14px
    ),
    color-mix(in srgb, var(--surface) 50%, transparent);
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color: color-mix(in srgb, var(--brand) 45%, transparent) transparent;
}
.qa-messages::-webkit-scrollbar{width:6px}
.qa-messages::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:color-mix(in srgb, var(--brand) 45%, transparent);
}
.qa-msg{
  display:flex;
  flex-direction:column;
  width:fit-content;
  max-width:min(82%, 680px);
  margin-bottom:16px;
  animation: qa-msg-in .35s ease;
}
@keyframes qa-msg-in{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:translateY(0)}
}
.qa-msg--user{align-self:flex-end; align-items:flex-end}
.qa-msg--bot{align-self:flex-start; align-items:flex-start}
.qa-bubble{
  position:relative;
  width:fit-content;
  max-width:100%;
  padding:13px 18px;
  border-radius:18px;
  line-height:1.72;
  font-size:15px;
  word-break:break-word;
  box-shadow: var(--shadow-soft);
  transition:var(--transition);
}
/* 小海豚思考中的打字动画 */
.qa-dot {
  display: inline-block;
  font-size: 8px;
  color: var(--muted, #94a3b8);
  animation: qa-dot-bounce 1.4s infinite ease-in-out;
}
.qa-dot:nth-child(1) { animation-delay: 0s; }
.qa-dot:nth-child(2) { animation-delay: 0.2s; }
.qa-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes qa-dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.3; }
  40% { transform: translateY(-4px); opacity: 1; }
}
.qa-msg--typing .qa-bubble {
  background: transparent;
  box-shadow: none;
  padding: 8px 18px;
}
.qa-msg--user .qa-bubble{
  background:linear-gradient(145deg, #ff8f5a, #ff7f50);
  color:#fff;
  border-bottom-right-radius:6px;
  box-shadow:0 8px 22px rgba(255,127,80,.28), inset 0 1px 0 rgba(255,255,255,.28);
}
.qa-msg--user .qa-bubble::after{
  content:"";
  position:absolute;
  right:-6px;
  bottom:10px;
  border:6px solid transparent;
  border-left-color:#ff7f50;
  border-right:0;
}
.qa-msg--bot .qa-bubble{
  background:linear-gradient(145deg, #d4f1ff, #b3e5fc);
  color:#1e3a4a;
  border-bottom-left-radius:6px;
  box-shadow:0 8px 22px rgba(14,165,233,.16), inset 0 1px 0 rgba(255,255,255,.45);
}
html[data-theme="night"] .qa-msg--bot .qa-bubble{
  background:linear-gradient(145deg, rgba(56,189,248,.32), rgba(34,211,238,.22));
  color:var(--text);
  border:1px solid rgba(56,189,248,.28);
}
.qa-msg--bot .qa-bubble::after{
  content:"";
  position:absolute;
  left:-6px;
  bottom:8px;
  border:6px solid transparent;
  border-right-color:#b3e5fc;
  border-left:0;
}
html[data-theme="night"] .qa-msg--bot .qa-bubble::after{
  border-right-color:rgba(56,189,248,.55);
}
.qa-msg__time{
  margin-top:5px;
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}
.qa-msg--user .qa-msg__time{text-align:right}
.qa-related{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
  max-width:100%;
}
.qa-related__chip{
  appearance:none;
  border:1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  background:color-mix(in srgb, var(--brand) 50%, transparent);
  color:#fff;
  font-size:13px;
  font-weight:700;
  padding:7px 14px;
  border-radius:var(--radius-pill);
  cursor:pointer;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}
.qa-related__chip:hover{
  background:color-mix(in srgb, var(--brand) 70%, transparent);
  transform:translateY(-2px);
}
.qa-related__chip:focus{outline:none; box-shadow:var(--focus)}

.qa-compose{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:14px 16px 18px;
  box-sizing:border-box;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--bg2) 72%, transparent), transparent),
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand) 6%, transparent));
  border-top:1px solid color-mix(in srgb, var(--stroke) 40%, transparent);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.qa-input{
  flex:0 1 calc(850px - 58px);
  width:100%;
  max-width:calc(850px - 58px);
  min-width:0;
  padding:14px 20px;
  border-radius:var(--radius-pill);
  border:1px solid color-mix(in srgb, var(--stroke) 50%, transparent);
  background:color-mix(in srgb, var(--card2) 88%, transparent);
  color:var(--text);
  font-size:15px;
  font-weight:600;
  font-family:inherit;
  box-shadow: var(--shadow-soft), var(--shadow-inset);
  transition: var(--transition);
}
.qa-input::placeholder{color:color-mix(in srgb, var(--muted) 70%, transparent)}
.qa-input:focus{outline:none; box-shadow:var(--focus); border-color:color-mix(in srgb, var(--brand) 55%, transparent)}
.qa-send{
  flex-shrink:0;
  width:48px;
  height:48px;
  border-radius:50%;
  border:none;
  background: linear-gradient(145deg, var(--brand), var(--brand2));
  color:#fff;
  font-size:17px;
  cursor:pointer;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 40%, transparent);
  transition: var(--transition);
}
.qa-send:hover{transform:scale(1.08) translateY(-1px)}
.qa-send:focus{outline:none; box-shadow:var(--focus)}

@media (max-width: 900px){
  .qa-messages{
    max-width:100%;
    padding:16px 14px 22px;
  }
  .qa-input{
    flex:1 1 auto;
    max-width:none;
  }
  .qa-msg{
    max-width:88%;
  }
}

.qa-modal[hidden]{display:none !important}
.qa-modal{
  position:fixed;
  inset:0;
  z-index:400;
  display:grid;
  place-items:center;
  padding:20px;
}
.qa-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,20,30,.55);
  backdrop-filter:blur(4px);
}
.qa-modal__box{
  position:relative;
  width:min(480px, 100%);
  max-height:70vh;
  overflow:auto;
  padding:20px 18px 16px;
  border-radius:var(--radius);
  background:var(--card2);
  border:1px solid rgba(42,90,116,.65);
  box-shadow:var(--shadow);
}
.qa-modal__box--explore{width:min(560px,100%)}
.qa-modal__close{
  position:absolute;
  right:10px;
  top:8px;
  width:32px;
  height:32px;
  border:none;
  border-radius:10px;
  background:rgba(15,38,51,.55);
  color:var(--text);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.qa-modal__close:hover{background:rgba(82,214,255,.2)}
.qa-modal__title{margin:0 0 4px; font-size:17px}
.qa-modal__hint{margin:0 0 14px; font-size:13px; color:var(--muted)}

/* 探索指南分类 */
.qa-explore-cat{
  margin-bottom:14px;
}
.qa-explore-cat__header{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:700;
  margin-bottom:6px;
  color:var(--text);
}
.qa-explore-cat__dot{
  width:8px;height:8px;border-radius:50%;
}
.qa-explore-cat__items{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.qa-explore-item{
  appearance:none;
  border:1px solid color-mix(in srgb, var(--stroke) 50%, transparent);
  background:var(--surface);
  color:var(--text);
  font-size:13px;
  font-weight:600;
  padding:6px 12px;
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:var(--transition);
  line-height:1.4;
}
.qa-explore-item:hover{
  background:color-mix(in srgb, var(--brand) 18%, var(--surface));
  border-color:var(--brand);
  transform:scale(1.03);
}
.qa-explore-item:active{transform:scale(0.97)}

/* ---------- 设置面板 ---------- */
.settings-panel.app-panel--active{
  display:block;
  padding:0 18px 40px;
  min-height:calc(100vh - 56px);
}
.settings{
  max-width:640px;
  margin:0 auto;
  position:relative;
}
.settings__head{
  text-align:center;
  padding:24px 12px 20px;
}
.settings__title{
  margin:0 0 8px;
  font-size:clamp(22px, 4vw, 28px);
  font-weight:900;
  letter-spacing:.5px;
  color:var(--text-color);
  text-shadow: 0 2px 12px color-mix(in srgb, var(--brand) 25%, transparent);
}
.settings__sub{
  margin:0;
  color:var(--muted);
  font-size:15px;
}
.settings__cards{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.settings-card{
  padding:20px 18px;
  border-radius:var(--radius);
  background:var(--card-bg);
  border:1px solid color-mix(in srgb, var(--stroke) 45%, transparent);
  box-shadow:var(--shadow-soft), var(--shadow-inset);
  backdrop-filter:blur(8px);
  transition: var(--transition);
}
.settings-card:hover{transform: translateY(-3px); box-shadow: var(--shadow-float), var(--shadow-inset)}
.settings-card__title{
  margin:0 0 8px;
  font-size:20px;
  font-weight:800;
  line-height:1.4;
}
.settings-card__hint{
  margin:0 0 14px;
  font-size:14px;
  color:var(--muted);
  line-height:1.65;
}
.settings-theme{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  justify-content:center;
}
.theme-swatch{
  appearance:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:8px;
  border:2px solid transparent;
  border-radius:var(--radius);
  background:transparent;
  cursor:pointer;
  transition: var(--transition);
}
.theme-swatch:hover{transform: translateY(-2px)}
.theme-swatch:focus{outline:none; box-shadow:var(--focus)}
.theme-swatch[aria-pressed="true"]{
  border-color:var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 30%, transparent), 0 0 18px color-mix(in srgb, var(--brand) 45%, transparent);
}
.theme-swatch__preview{
  width:56px;
  height:56px;
  border-radius:50%;
  border:2px solid color-mix(in srgb, var(--stroke) 40%, transparent);
  box-shadow: inset 0 2px 8px rgba(0,0,0,.12);
}
.theme-swatch--day .theme-swatch__preview{
  background: linear-gradient(145deg, #e3f2fd, #81d4fa);
}
.theme-swatch--night .theme-swatch__preview{
  background: linear-gradient(145deg, #1E293B, #0A0F1F);
}
.theme-swatch__label{
  font-size:12px;
  font-weight:700;
  color:var(--text-color);
}
.settings-font{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.settings-font__btn{
  appearance:none;
  flex:1;
  min-width:140px;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  border:1px solid color-mix(in srgb, var(--stroke) 55%, transparent);
  background:color-mix(in srgb, var(--card-bg) 80%, transparent);
  color:var(--text-color);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
  font-family:inherit;
}
.settings-font__btn:hover{border-color:var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-float)}
.settings-font__btn:focus{outline:none; box-shadow:var(--focus)}
.settings-font__btn--active{
  background:var(--coral);
  border-color:var(--coral);
  color:#fff;
}
.settings-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.settings-actions .btn{flex:1; min-width:160px}
.settings-password .label{font-size:12px; margin-bottom:4px}
.settings-password .label + .input{margin-bottom:10px}
.settings-password .btn--primary{width:100%; margin-top:4px}
.settings-password__msg{
  margin:0 0 10px;
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
  line-height:1.5;
}
.settings-password__msg--ok{
  background:color-mix(in srgb, var(--brand2) 20%, transparent);
  color:var(--text-color);
}
.settings-password__msg--err{
  background:color-mix(in srgb, var(--danger) 18%, transparent);
  color:var(--danger);
}
.settings-toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  z-index:350;
  padding:12px 20px;
  border-radius:999px;
  background:color-mix(in srgb, var(--card2) 92%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  color:var(--text-color);
  font-weight:700;
  font-size:14px;
  box-shadow:var(--shadow);
  animation: settings-toast-in .35s ease;
}
.settings-toast[hidden]{display:none !important}
@keyframes settings-toast-in{
  from{opacity:0; transform:translateX(-50%) translateY(12px)}
  to{opacity:1; transform:translateX(-50%) translateY(0)}
}

.station-nav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:12px 18px 0;
  max-width:1180px;
  margin:0 auto;
}

.app-shell .main{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px 60px;
}

.auth-screen{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:20px;
}
.auth-screen[hidden]{display:none !important}

.auth-screen__ocean{
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 520px at 18% -8%, rgba(150,240,255,.55), transparent 60%),
    radial-gradient(900px 600px at 92% 6%, rgba(120,240,210,.32), transparent 55%),
    radial-gradient(900px 640px at 50% 118%, rgba(7,58,92,.55), transparent 62%),
    linear-gradient(180deg, #0a5a8c 0%, #1184bd 32%, #18a3cf 62%, #25bcd9 100%);
  overflow:hidden;
}
/* 卡通海底沙丘 + 小珊瑚 */
.auth-screen__ocean::after{
  content:"";
  position:absolute; left:-2%; right:-2%; bottom:-2px; height:24%;
  background:
    radial-gradient(34px 22px at 12% 100%, #d98cc4 0 60%, transparent 64%),
    radial-gradient(30px 30px at 12% 92%, #e7a3d4 0 55%, transparent 60%),
    radial-gradient(38px 24px at 70% 100%, #6fd6c0 0 60%, transparent 64%),
    radial-gradient(150px 96px at 16% 130%, #f6dca6 0 70%, transparent 72%),
    radial-gradient(190px 110px at 48% 134%, #efce8d 0 70%, transparent 72%),
    radial-gradient(160px 100px at 80% 130%, #f6dca6 0 70%, transparent 72%),
    radial-gradient(150px 96px at 102% 134%, #efce8d 0 70%, transparent 72%);
  filter: drop-shadow(0 -6px 10px rgba(0,0,0,.12));
  pointer-events:none;
  z-index:1;
}
.auth-screen__rays{
  position:absolute; inset:-30% -20% auto -20%; height:130%;
  background:
    repeating-conic-gradient(from 90deg at 50% -12%,
      rgba(255,255,255,.16) 0deg 3deg,
      transparent 3deg 11deg);
  transform-origin: 50% -12%;
  animation: auth-rays 16s ease-in-out infinite alternate;
  opacity:.5;
  mix-blend-mode: screen;
  pointer-events:none;
}
@keyframes auth-rays{
  from{transform: rotate(-3deg) scale(1)}
  to{transform: rotate(3deg) scale(1.05)}
}

.auth-bubbles{position:absolute; inset:0; pointer-events:none}
.auth-bubble{
  position:absolute;
  left:var(--x);
  bottom:-12%;
  width:var(--s);
  height:var(--s);
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.95) 0 12%, transparent 26%),
    radial-gradient(circle at 32% 30%, rgba(255,255,255,.6), rgba(150,240,255,.20) 52%, rgba(120,240,210,.10) 72%, transparent 80%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 0 6px rgba(255,255,255,.35);
  animation: auth-rise 9s linear infinite;
  animation-delay:var(--d);
  opacity:.85;
}
@keyframes auth-rise{
  0%{transform: translateY(0) scale(1); opacity:0}
  8%{opacity:.75}
  100%{transform: translateY(-115vh) scale(1.15); opacity:0}
}

.auth-fish{
  position:absolute;
  width:60px; height:32px;
  border-radius: 50% 52% 52% 50% / 56% 56% 44% 44%;
  background:
    radial-gradient(circle at 80% 40%, #07303f 0 3.5px, rgba(7,48,63,0) 4.6px),
    radial-gradient(130% 100% at 74% 26%, rgba(255,255,255,.55), transparent 46%),
    linear-gradient(160deg, #ffd277, #ff8f4d);
  box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 -5px 9px rgba(214,108,40,.35);
  opacity:.92;
}
.auth-fish::after{
  content:"";
  position:absolute; left:-12px; top:50%;
  transform:translateY(-50%);
  width:0; height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-right:16px solid #ff9a52;
  filter: drop-shadow(-2px 0 0 rgba(214,108,40,.4));
}
.auth-fish--1{top:24%; left:-70px; animation: auth-swim 22s linear infinite}
.auth-fish--2{
  top:60%; left:-90px;
  width:42px; height:23px;
  background:
    radial-gradient(circle at 80% 40%, #07303f 0 2.6px, rgba(7,48,63,0) 3.6px),
    radial-gradient(130% 100% at 74% 26%, rgba(255,255,255,.5), transparent 46%),
    linear-gradient(160deg, #8ff0d6, #34c6c0);
  animation: auth-swim 28s linear infinite 6s;
  opacity:.85;
}
.auth-fish--2::after{border-right-color:#3fc9c2}
@keyframes auth-swim{
  from{transform: translateX(0) scaleX(1)}
  to{transform: translateX(calc(100vw + 140px)) scaleX(1)}
}

.porthole-wrap{
  position:relative; z-index:2;
  width:min(92vw, 92vh, 470px);
  height:min(92vw, 92vh, 470px);
  display:grid; place-items:center;
}
.porthole{
  position:relative;
  width:100%; height:100%;
  min-height:0;
  border-radius:50%;
  padding:18px;
  background:
    conic-gradient(from 130deg,
      #5a3f1e, #d9b24a, #fff3c6, #c9962f, #7c5e28,
      #f4d36b, #6b4e2a, #ffe89a, #b8902f, #5a3f1e);
  box-shadow:
    0 0 0 5px rgba(15,23,42,.9),
    0 0 0 7px rgba(120,210,255,.18),
    0 30px 90px rgba(0,0,0,.6),
    inset 0 0 0 2px rgba(255,255,255,.12),
    inset 0 9px 22px rgba(255,255,255,.30),
    inset 0 -12px 26px rgba(60,40,10,.55),
    inset 0 0 44px rgba(0,0,0,.3);
}
/* 旋转高光：金属/科技扫光 */
.porthole::before{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(255,255,255,0) 38deg,
      rgba(255,255,255,.65) 72deg,
      rgba(255,255,255,0) 108deg,
      transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 90%, #000 92% 100%);
          mask: radial-gradient(circle, transparent 0 90%, #000 92% 100%);
  mix-blend-mode: screen;
  opacity:.75;
  pointer-events:none;
  z-index:1;
  animation: porthole-sheen 7s linear infinite;
}
@keyframes porthole-sheen{
  to{transform: rotate(360deg)}
}
.porthole__bolts{
  position:absolute; inset:10px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 6%, #fff7df 0 1.6px, #b89544 2.4px 3.4px, rgba(40,28,8,.55) 3.6px 4.4px, transparent 4.6px),
    radial-gradient(circle at 88% 22%, #fff7df 0 1.6px, #b89544 2.4px 3.4px, rgba(40,28,8,.55) 3.6px 4.4px, transparent 4.6px),
    radial-gradient(circle at 94% 58%, #fff7df 0 1.6px, #b89544 2.4px 3.4px, rgba(40,28,8,.55) 3.6px 4.4px, transparent 4.6px),
    radial-gradient(circle at 72% 90%, #fff7df 0 1.6px, #b89544 2.4px 3.4px, rgba(40,28,8,.55) 3.6px 4.4px, transparent 4.6px),
    radial-gradient(circle at 28% 94%, #fff7df 0 1.6px, #b89544 2.4px 3.4px, rgba(40,28,8,.55) 3.6px 4.4px, transparent 4.6px),
    radial-gradient(circle at 6% 62%, #fff7df 0 1.6px, #b89544 2.4px 3.4px, rgba(40,28,8,.55) 3.6px 4.4px, transparent 4.6px),
    radial-gradient(circle at 12% 24%, #fff7df 0 1.6px, #b89544 2.4px 3.4px, rgba(40,28,8,.55) 3.6px 4.4px, transparent 4.6px);
  pointer-events:none;
  z-index:3;
}
.porthole__rim{
  position:absolute; inset:18px;
  border-radius:50%;
  padding:3px;
  background:
    conic-gradient(from 200deg,
      #fff3c6, #b8902f, #ffe89a, #7c5e28, #fff3c6, #c9962f, #fff3c6) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  box-shadow:
    inset 0 0 26px rgba(0,0,0,.5),
    0 0 14px rgba(120,210,255,.30);
  pointer-events:none;
  z-index:2;
}
.porthole__glass{
  position:relative;
  z-index:2;
  width:100%; height:100%;
  border-radius:50%;
  padding:26px 30px 22px;
  overflow:hidden auto;
  background:
    radial-gradient(140% 100% at 30% 0%, rgba(120,230,255,.28), transparent 55%),
    radial-gradient(120% 90% at 80% 100%, rgba(8,38,60,.78), rgba(4,18,28,.94) 70%);
  border:2px solid rgba(120,220,255,.4);
  box-shadow:
    inset 0 0 50px rgba(82,214,255,.14),
    inset 0 2px 0 rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  text-align:center;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.porthole__glass::-webkit-scrollbar{width:0;height:0;display:none}
.porthole__shine{
  position:absolute; top:-20%; left:-10%;
  width:55%; height:70%;
  border-radius:50%;
  background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.18), transparent 65%);
  pointer-events:none;
  transform: rotate(-18deg);
}
.porthole__title{
  margin:0 0 6px;
  font-size:23px;
  font-weight:900;
  letter-spacing:.3px;
  line-height:1.3;
  color:#eaf6ff;
  position:relative;
}
.porthole__sub{
  margin:0 0 10px;
  font-size:12px;
  color:#b7d3e6;
  line-height:1.5;
  position:relative;
}
.porthole__tabs{
  display:flex; gap:6px;
  justify-content:center;
  margin-bottom:10px;
  position:relative;
}
.porthole__tab{
  appearance:none;
  border:1px solid rgba(42,90,116,.65);
  background: rgba(6,28,39,.45);
  color:#b7d3e6;
  padding:8px 16px;
  border-radius:var(--radius-pill);
  cursor:pointer;
  font-weight:800;
  font-size:13px;
  transition: var(--transition);
}
.porthole__tab:hover{border-color: rgba(82,214,255,.55); color:#eaf6ff}
.porthole__tab:focus{outline:none; box-shadow:var(--focus)}
.porthole__tab--active{
  color:#eaf6ff;
  border-color: rgba(82,214,255,.75);
  background: linear-gradient(135deg, rgba(82,214,255,.28), rgba(139,255,207,.18));
}
.porthole__msg{
  margin:0 0 10px;
  padding:8px 10px;
  border-radius:12px;
  font-size:12px;
  font-weight:700;
  line-height:1.5;
  text-align:left;
  position:relative;
}
.porthole__msg--ok{
  background: rgba(139,255,207,.14);
  border:1px solid rgba(139,255,207,.35);
  color:rgba(234,246,255,.95);
}
.porthole__msg--err{
  background: rgba(255,107,143,.12);
  border:1px solid rgba(255,107,143,.35);
  color:rgba(255,220,230,.98);
}
.porthole__pane{
  text-align:left;
  position:relative;
}
.porthole__pane--hidden{display:none}
.porthole__pane .label{font-size:12px; margin-bottom:3px; color:#dcecf7}
.porthole__pane .label + .input{margin-bottom:9px}
.porthole__pane .btn--block{width:100%; margin-top:4px}

/* 舷窗内：毛玻璃输入框，去掉死板边框 */
.porthole__pane .input{
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#eaf6ff;
  font-weight:600;
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -8px 16px rgba(8,38,60,.25),
    0 6px 16px rgba(0,0,0,.22);
  transition: var(--transition);
}
.porthole__pane .input::placeholder{color:rgba(220,236,247,.55); font-weight:500}
.porthole__pane .input:focus{
  outline:none;
  border-color: rgba(140,228,255,.65);
  background: rgba(255,255,255,.16);
  box-shadow:
    0 0 0 4px rgba(82,214,255,.25),
    inset 0 1px 0 rgba(255,255,255,.45),
    0 8px 20px rgba(0,0,0,.28);
}

/* 舷窗内：鼓起的 Q 弹卡通登录/注册按钮 */
.porthole__pane .btn--primary{
  position:relative;
  border:none;
  border-radius:18px;
  padding:13px 18px;
  font-size:16px;
  font-weight:900;
  letter-spacing:2px;
  color:#063246;
  background: linear-gradient(180deg, #b6f4ff 0%, #5fd6f5 48%, #21a9e2 100%);
  box-shadow:
    0 9px 0 #0f6f9c,
    0 16px 24px rgba(0,0,0,.35),
    inset 0 3px 3px rgba(255,255,255,.85),
    inset 0 -8px 12px rgba(8,90,130,.4);
  transition:
    transform .18s cubic-bezier(.34,1.7,.5,1),
    box-shadow .18s ease,
    filter .18s ease;
}
.porthole__pane .btn--primary:hover{
  transform: translateY(-2px) scale(1.05);
  filter: saturate(1.12) brightness(1.05);
  box-shadow:
    0 11px 0 #0f6f9c,
    0 20px 30px rgba(0,0,0,.4),
    inset 0 3px 3px rgba(255,255,255,.9),
    inset 0 -8px 12px rgba(8,90,130,.4);
}
.porthole__pane .btn--primary:active{
  transform: translateY(6px) scale(.97);
  box-shadow:
    0 2px 0 #0f6f9c,
    0 6px 12px rgba(0,0,0,.3),
    inset 0 3px 3px rgba(255,255,255,.7),
    inset 0 -5px 10px rgba(8,90,130,.4);
}
.porthole__pane .btn--primary:focus-visible{
  outline:none;
  box-shadow:
    0 9px 0 #0f6f9c,
    0 0 0 4px rgba(140,228,255,.5),
    0 16px 24px rgba(0,0,0,.35),
    inset 0 3px 3px rgba(255,255,255,.85);
}

.input{
  width:100%;
  padding:12px 14px;
  border-radius: var(--radius-sm);
  border:1px solid color-mix(in srgb, var(--stroke) 65%, transparent);
  background: color-mix(in srgb, var(--card2) 55%, transparent);
  color: var(--text);
  font-weight:600;
  font-size:15px;
  font-family: inherit;
  box-shadow: var(--shadow-inset);
  transition: var(--transition);
}
.input::placeholder{color:color-mix(in srgb, var(--muted) 70%, transparent); font-weight:500}
.input:focus{outline:none; box-shadow:var(--focus); border-color: color-mix(in srgb, var(--brand) 65%, transparent)}

.porthole__guest{
  appearance:none;
  border:none;
  background:none;
  color:var(--brand);
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  margin-top:14px;
  padding:6px 8px;
  text-decoration: underline;
  text-underline-offset:3px;
  position:relative;
}
.porthole__guest:hover{color:var(--brand2)}
.porthole__guest:focus{outline:none; box-shadow:var(--focus); border-radius:8px}

.userbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(42,90,116,.55);
  background: rgba(15,38,51,.42);
  font-size:12px;
}
html[data-theme="day"] .userbar{
  border-color: rgba(14,165,233,.18);
  background: rgba(224,242,254,.65);
  box-shadow: 0 1px 4px rgba(13,71,109,.06);
}
.userbar__label{color:var(--muted); font-weight:600}
.userbar__name{font-weight:900; color:var(--brand2)}

@media (max-width: 980px){
  .topbar{flex-wrap:wrap}
  .userbar{order:3; width:100%; justify-content:center}
  .app-header{flex-direction:column; align-items:flex-start}
  .side-shell.is-open .side-nav{width:min(200px, calc(100vw - 60px))}
  .side-nav__item{width:100%; max-width:180px}
}

@media (prefers-reduced-motion: reduce){
  .auth-screen__rays,
  .auth-bubble,
  .auth-fish,
  .porthole::before,
  .side-nav__item--active::before,
  .side-nav__item[aria-current="page"]::before{animation:none !important}
  .auth-bubble{opacity:.35}
  .side-nav{transition:none}
  .app-panel{animation:none}
  .current-flow-anim{animation:none}
  .overview__tip{transition:none}
  .qa-msg{animation:none}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important}
  .hero__bg::after{animation:none}
  .btn:hover,
  .card:hover,
  .nav__btn:hover,
  .drag-card:hover,
  .settings-card:hover,
  .side-rail__toggle:hover,
  .settings-font__btn:hover,
  .theme-swatch:hover{transform:none}
}

@media print{
  .auth-screen{display:none !important}
  .side-shell{display:none !important}
  .topbar, .hero__cta, .nav, .station-nav, .footer__right, #btnPrint, .userbar {display:none !important}
  body{background:#ffffff; color:#000}
  .card, .badge-card{box-shadow:none}
}

/* =========================================================
   洋流课堂 · 多媒体授课大屏
   原生 HTML + CSS + JS，课件窗口强制 16:9，不拉伸变形
   ========================================================= */
.overview-panel.app-panel--active{
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - 58px);
  padding:0;
}
.classroom{
  --classroom-stage-w: min(100%, calc((100vh - 164px) * 16 / 9), 1500px);
  position:relative;
  flex:1;
  min-height:620px;
  display:grid;
  grid-template-rows:minmax(0, 1fr) auto;
  align-items:center;
  gap:16px;
  width:100%;
  padding:18px 22px 22px;
  overflow:hidden;
  background:
    radial-gradient(900px 460px at 12% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%),
    radial-gradient(760px 420px at 88% 8%, color-mix(in srgb, var(--brand2) 18%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg1) 80%, transparent), var(--bg0));
  transition:var(--transition);
}
html[data-theme="day"] .classroom{
  background:
    radial-gradient(900px 460px at 12% 0%, rgba(186,230,253,.72), transparent 60%),
    radial-gradient(760px 420px at 88% 8%, rgba(125,211,252,.38), transparent 62%),
    linear-gradient(180deg, #f0f9ff, #e0f2fe);
}
.classroom::before,
.classroom::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  filter:blur(.2px);
  opacity:.7;
}
.classroom::before{
  width:170px; height:170px;
  left:3%; bottom:10%;
  background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), color-mix(in srgb, var(--brand) 20%, transparent) 38%, transparent 68%);
}
.classroom::after{
  width:240px; height:240px;
  right:-80px; top:8%;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.62), color-mix(in srgb, var(--brand2) 18%, transparent) 42%, transparent 70%);
}
.classroom__stage{
  position:relative;
  z-index:1;
  width:var(--classroom-stage-w);
  aspect-ratio:16 / 9;
  margin:auto;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:30px;
  border:1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  background:
    linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.03)),
    radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 58%),
    #071827;
  box-shadow:
    0 28px 70px rgba(0,70,120,.18),
    0 10px 28px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.28);
  transition:var(--transition);
}
html[data-theme="day"] .classroom__stage{
  background:
    linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08)),
    radial-gradient(120% 100% at 50% 0%, rgba(14,165,233,.12), transparent 58%),
    #E8F4FD;
  box-shadow:
    0 28px 70px rgba(13,71,109,.14),
    0 10px 28px rgba(13,71,109,.08),
    inset 0 1px 0 rgba(255,255,255,.45);
}
.classroom__stage:hover{
  border-color:color-mix(in srgb, var(--brand) 58%, transparent);
  box-shadow:
    0 34px 86px rgba(0,70,120,.22),
    0 14px 34px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.34);
}
html[data-theme="day"] .classroom__stage:hover{
  box-shadow:
    0 34px 86px rgba(13,71,109,.18),
    0 14px 34px rgba(13,71,109,.10),
    inset 0 1px 0 rgba(255,255,255,.50);
}
.classroom__img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#06121f;
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  transition:opacity .3s ease-in-out, transform .3s ease-in-out;
  will-change:opacity, transform;
  user-select:none;
}
html[data-theme="day"] .classroom__img{
  background:#E8F4FD;
}
/* ─── 课堂 video 标签（动图课件） ─── */
.classroom__video{
  position:absolute;
  width:100%;
  height:100%;
  object-fit:contain;
  display:none;
  background:#06121f;
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  transition:opacity .3s ease-in-out, transform .3s ease-in-out;
}
html[data-theme="day"] .classroom__video{
  background:#E8F4FD;
}
.classroom__img.is-loading{
  opacity:0;
  transform:translate3d(0,0,0) scale(.985);
}
/* ─── 课堂加载动画遮罩 ─── */
.classroom__loading-overlay{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:rgba(6,18,31,.88);
  z-index:2;
  pointer-events:none;
  transition:opacity .3s ease;
}
.classroom__stage.is-loading .classroom__loading-overlay{
  display:flex;
}
html[data-theme="day"] .classroom__loading-overlay{
  background:rgba(232,244,253,.92);
}
.classroom__spinner{
  width:44px;height:44px;
  border:4px solid rgba(100,200,255,.22);
  border-top-color:#64c8ff;
  border-radius:50%;
  animation:classroomSpin .8s linear infinite;
}
html[data-theme="day"] .classroom__spinner{
  border:4px solid rgba(0,120,200,.18);
  border-top-color:#0078c8;
}
.classroom__loading-text{
  margin-top:12px;
  font-size:.85rem;
  color:#64c8ff;
  letter-spacing:.08em;
}
html[data-theme="day"] .classroom__loading-text{
  color:#0078c8;
}
@keyframes classroomSpin{
  to{transform:rotate(360deg)}
}
.classroom__nav{
  appearance:none;
  position:absolute;
  z-index:3;
  top:50%;
  width:64px;
  height:96px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.14);
  color:#fff;
  opacity:.34;
  cursor:pointer;
  -webkit-backdrop-filter:blur(12px) saturate(1.25);
  backdrop-filter:blur(12px) saturate(1.25);
  box-shadow:0 18px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.32);
  transform:translateY(-50%) translateZ(0);
  transition:opacity .3s ease-in-out, transform .3s cubic-bezier(.4,0,.2,1), background .3s ease, box-shadow .3s ease;
}
.classroom__nav--prev{left:18px}
.classroom__nav--next{right:18px}
.classroom__stage:hover .classroom__nav,
.classroom__nav:focus-visible{
  opacity:.78;
}
.classroom__nav:hover{
  opacity:1;
  background:color-mix(in srgb, var(--brand) 36%, rgba(255,255,255,.14));
  transform:translateY(-50%) translateZ(0) scale(1.06);
  box-shadow:0 22px 44px rgba(0,0,0,.28), 0 0 24px color-mix(in srgb, var(--brand) 36%, transparent);
}
.classroom__nav:disabled{
  opacity:.12;
  cursor:not-allowed;
  transform:translateY(-50%) translateZ(0) scale(.96);
  box-shadow:none;
}
.classroom__bar{
  position:relative;
  z-index:1;
  width:var(--classroom-stage-w);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(108px, auto) minmax(160px, 1fr) auto;
  align-items:center;
  gap:16px;
  padding:12px 14px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(14px) saturate(1.35);
  backdrop-filter:blur(14px) saturate(1.35);
  box-shadow:0 14px 34px rgba(0,70,120,.12), inset 0 1px 0 rgba(255,255,255,.28);
}
html[data-theme="day"] .classroom__bar{
  background:rgba(255,255,255,.58);
  border-color:rgba(14,165,233,.20);
}
.classroom__page{
  white-space:nowrap;
  font-weight:900;
  color:var(--text);
  letter-spacing:.2px;
}
.classroom__progress{
  height:12px;
  overflow:hidden;
  border-radius:999px;
  background:color-mix(in srgb, var(--bg0) 48%, rgba(255,255,255,.20));
  box-shadow:inset 0 2px 6px rgba(0,0,0,.18);
}
html[data-theme="day"] .classroom__progress{
  box-shadow:inset 0 2px 6px rgba(13,71,109,.10);
}
.classroom__progress-fill{
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--brand), var(--brand2), #FBBF24);
  box-shadow:0 0 18px color-mix(in srgb, var(--brand) 55%, transparent);
  transition:width .3s cubic-bezier(.4,0,.2,1);
}
.classroom__fs{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px;
  padding:10px 16px;
  border:1px solid color-mix(in srgb, var(--brand) 36%, transparent);
  border-radius:999px;
  color:var(--text);
  background:linear-gradient(135deg, color-mix(in srgb, var(--brand) 22%, transparent), color-mix(in srgb, var(--brand2) 16%, transparent));
  box-shadow:0 10px 22px color-mix(in srgb, var(--brand) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.24);
  cursor:pointer;
  font-weight:900;
  transition:var(--transition);
}
.classroom__fs:hover{
  transform:translateY(-2px) scale(1.03);
  border-color:color-mix(in srgb, var(--brand) 62%, transparent);
  box-shadow:0 16px 32px color-mix(in srgb, var(--brand) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.32);
}
.classroom__fs:active{
  transform:scale(.96);
}
.classroom--fs{
  --classroom-stage-w: min(96vw, calc((100dvh - 108px) * 16 / 9));
  width:100vw;
  height:100dvh;
  min-height:0;
  padding:18px 2vw 18px;
  background:
    radial-gradient(1000px 520px at 15% 0%, rgba(34,211,238,.22), transparent 62%),
    radial-gradient(840px 480px at 88% 6%, rgba(94,234,208,.18), transparent 62%),
    linear-gradient(180deg, #020817, #0F172A 58%, #061827);
}
html[data-theme="day"] .classroom--fs{
  background:
    radial-gradient(1000px 520px at 15% 0%, rgba(14,165,233,.16), transparent 62%),
    radial-gradient(840px 480px at 88% 6%, rgba(6,182,212,.12), transparent 62%),
    linear-gradient(180deg, #F2FBFF, #E0F2FE 58%, #CDEAFB);
}
.classroom--fs .classroom__stage{
  border-radius:24px;
  box-shadow:0 30px 88px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.20);
}
html[data-theme="day"] .classroom--fs .classroom__stage{
  box-shadow:0 30px 88px rgba(13,71,109,.22), inset 0 1px 0 rgba(255,255,255,.45);
}
.classroom--fs .classroom__bar{
  background:rgba(15,23,42,.56);
  border-color:rgba(255,255,255,.16);
}

@media (max-width: 900px){
  .classroom{
    --classroom-stage-w:100%;
    min-height:560px;
    padding:14px 12px 18px;
  }
  .classroom__stage{border-radius:22px}
  .classroom__nav{
    width:48px;
    height:72px;
  }
  .classroom__nav--prev{left:10px}
  .classroom__nav--next{right:10px}
  .classroom__bar{
    grid-template-columns:1fr;
    gap:10px;
  }
  .classroom__fs{width:100%}
}
@media (prefers-reduced-motion: reduce){
  .classroom__img,
  .classroom__video,
  .classroom__nav,
  .classroom__progress-fill,
  .classroom__fs{transition:none !important}
  .classroom__nav:hover{transform:translateY(-50%)}
  .classroom__fs:hover{transform:none}
}

/* =========================================================
   五站闯关 · 海底探险关卡视觉（精致微拟物 + 现代卡通海洋风）
   仅样式层，不改动任何 JS / id / data-*
   ========================================================= */

/* ---- 1. 整体画布：海洋渐变 + 大圆角 + 通透悬浮阴影 ---- */
#main{
  position:relative;
  border-radius:24px;
  padding:16px 18px 52px;
  margin-bottom:22px;
  box-shadow: 0 20px 40px rgba(0,70,120,.08);
  transition: var(--transition);
}
:root #main,
html[data-theme="night"] #main{
  background: linear-gradient(to bottom, #0F172A, #1E293B);
}
html[data-theme="day"] #main{
  background: linear-gradient(to bottom, #F0F9FF, #E0F2FE);
}

/* 进入关卡：核心内容左右双栏（PC 1fr 1fr，移动端单栏） */
.app-panel[data-panel="stations"] .grid--2{
  gap:30px;
}
@media (max-width: 980px){
  .app-panel[data-panel="stations"] .grid--2{gap:18px}
}

/* 关卡卡片统一大圆角 + 海洋悬浮阴影 */
.app-panel[data-panel="stations"] .card{
  border-radius:24px;
  box-shadow: 0 20px 40px rgba(0,70,120,.08), var(--shadow-inset);
  transition: var(--transition);
}
.app-panel[data-panel="stations"] .card:hover{
  transform: translateY(-4px);
  box-shadow: 0 28px 54px rgba(0,70,120,.14), var(--shadow-inset);
}

/* ---- 2. 顶部关卡导航：海底驿站徽章 ---- */
.station-nav{
  gap:12px;
  padding:18px 18px 6px;
}
.station-nav .station-badge{
  position:relative;
  border-radius:18px;
  padding:11px 18px 11px 36px;
  border:1.5px dashed color-mix(in srgb, var(--stroke) 75%, transparent);
  background: color-mix(in srgb, var(--card-bg) 45%, transparent);
  color: var(--muted);
  font-weight:800;
  letter-spacing:.5px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft);
  transition: var(--transition);
}
/* 驿站地标小圆点 */
.station-nav .station-badge::before{
  content:"";
  position:absolute;
  left:14px; top:50%;
  width:11px; height:11px;
  border-radius:50%;
  transform: translateY(-50%);
  background: color-mix(in srgb, var(--muted) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 16%, transparent);
  transition: var(--transition);
}
.station-nav .station-badge:hover{
  transform: translateY(-4px) scale(1.03);
  color: var(--text);
  border-style:solid;
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: var(--shadow-float);
}
.station-nav .station-badge:hover::before{
  background: var(--brand);
  box-shadow: 0 0 10px var(--brand);
}
/* 当前驿站（聚焦即视为选中）/ 回顾闯关：金橘呼吸发光 */
.station-nav .station-badge:focus-visible,
.station-nav .station-badge--final{
  outline:none;
  color: var(--text);
  border:2px solid #FBBF24;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--coral) 30%, transparent),
    color-mix(in srgb, #FBBF24 22%, transparent));
  animation: station-pulse 2.2s ease-in-out infinite;
}
.station-nav .station-badge:focus-visible::before,
.station-nav .station-badge--final::before{
  background:#FBBF24;
  box-shadow: 0 0 12px #FBBF24;
}
@keyframes station-pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(251,191,36,.45), var(--shadow-soft); }
  50%{ box-shadow: 0 0 20px 4px rgba(251,191,36,.55), var(--shadow-float); }
}

/* ---- 3. 核心大标题 Banner ---- */
.hero{ border-radius:24px; }
.hero__title{
  font-size: clamp(28px, 4.6vw, 42px);
  font-weight:900;
  line-height:1.22;
  letter-spacing:.5px;
  background: linear-gradient(100deg, #FB7185 0%, #F97316 45%, #FBBF24 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
html[data-theme="night"] .hero__title{
  background: linear-gradient(100deg, #FB923C 0%, #FBBF24 45%, #5EEAD0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* 标签 → 潜水艇仪表盘 / 悬浮毛玻璃气泡 */
.hero__chips .chip{
  background: rgba(255,255,255,.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.30);
  color: var(--text);
  box-shadow: 0 6px 16px rgba(0,70,120,.10), inset 0 1px 0 rgba(255,255,255,.4);
  transition: var(--transition);
}
html[data-theme="day"] .hero__chips .chip{
  background: rgba(255,255,255,.65);
  border-color: rgba(14,165,233,.22);
  box-shadow: 0 4px 14px rgba(13,71,109,.08), inset 0 1px 0 rgba(255,255,255,.7);
}
.hero__chips .chip:hover{
  transform: translateY(-3px) scale(1.04);
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
}

/* ---- 4. 左栏：诗词 / 探测板 ---- */
.card--log{
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 8%, transparent), transparent 60%),
    var(--card2);
  border:1px solid color-mix(in srgb, var(--brand) 26%, transparent);
}
.poem{
  text-align:center;
  border-radius:20px;
  padding:24px 18px;
  border:1px dashed color-mix(in srgb, var(--brand) 38%, transparent);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%),
    color-mix(in srgb, var(--bg0) 26%, transparent);
}
.poem__line{
  font-size:27px;
  line-height:2;
  font-weight:900;
  letter-spacing:3px;
}
/* 互动大按钮 → 珊瑚橘胶囊，强点击欲 + 点击下沉 */
.poem__actions{gap:12px; margin-top:16px}
.poem__actions .btn{
  border:none;
  border-radius:50px;
  padding:14px 22px;
  font-size:16px;
  font-weight:900;
  color:#fff;
  background: linear-gradient(180deg, #FB923C, #F97316);
  box-shadow: 0 10px 20px rgba(249,115,22,.35), inset 0 2px 0 rgba(255,255,255,.45);
  transition: var(--transition);
}
.poem__actions .btn:hover{
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.06);
  box-shadow: 0 14px 26px rgba(249,115,22,.46), inset 0 2px 0 rgba(255,255,255,.5);
}
.poem__actions .btn:active{
  transform: scale(.95);
  box-shadow: 0 6px 12px rgba(249,115,22,.3), inset 0 2px 0 rgba(255,255,255,.4);
}
.poem__actions .btn--ghost{
  background: transparent;
  color: var(--text);
  border:2px solid color-mix(in srgb, var(--coral) 60%, transparent);
  box-shadow:none;
}
.poem__actions .btn--ghost:hover{
  background: color-mix(in srgb, var(--coral) 14%, transparent);
  box-shadow: 0 8px 18px rgba(249,115,22,.2);
}
.poem__actions .btn:disabled{opacity:.5; transform:none; filter:none}
.poem__answer{
  margin-top:14px;
  font-size:16px;
  text-align:center;
}

/* ---- 5. 右栏：海底观察窗 / 水族箱 ---- */
.card--aquarium .mini-ocean{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  box-shadow: inset 0 4px 12px rgba(0,0,0,.15);
}
.card--aquarium .mini-ocean canvas{
  border-radius:20px;
  display:block;
}
.card--aquarium .mini-ocean::after{
  content:"";
  position:absolute; inset:0;
  border-radius:20px;
  pointer-events:none;
  background: linear-gradient(180deg,
    rgba(56,189,248,.14),
    rgba(14,165,233,.06) 42%,
    transparent 72%);
  box-shadow:
    inset 0 6px 16px rgba(0,40,80,.28),
    inset 0 0 0 2px rgba(255,255,255,.06);
}
html[data-theme="day"] .card--aquarium .mini-ocean::after{
  box-shadow:
    inset 0 6px 16px rgba(13,71,109,.10),
    inset 0 0 0 2px rgba(255,255,255,.35);
}
/* 提示文字：小手图标 + 荧光强调 */
.card--aquarium .mini-ocean__hint{
  color:#FDE047;
  font-weight:800;
  letter-spacing:.3px;
}
.card--aquarium .mini-ocean__hint::before{
  content:"👆";
  margin-right:6px;
  display:inline-block;
  animation: hint-bob 1.6s ease-in-out infinite;
}
@keyframes hint-bob{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-3px) }
}

/* ---- 6. 全局点击下沉（不破坏既有逻辑） ---- */
.app-panel[data-panel="stations"] .btn:active{
  transform: scale(.96);
}

/* ---- 无障碍：减少动态 ---- */
@media (prefers-reduced-motion: reduce){
  .station-nav .station-badge--final,
  .station-nav .station-badge:focus-visible,
  .card--aquarium .mini-ocean__hint::before{ animation:none !important; }
  .station-nav .station-badge:hover,
  .hero__chips .chip:hover,
  .poem__actions .btn:hover,
  .app-panel[data-panel="stations"] .card:hover{ transform:none; }
}

/* =========================================================
   五站闯关 · Zero-Scroll 少儿海底探险游戏舞台
   保留所有 id / data-* / 原有互动逻辑，仅重构舞台与视觉
   ========================================================= */
.app-panel[data-panel="stations"].app-panel--active{
  display:flex;
  flex-direction:column;
  height:calc(100vh - 58px);
  min-height:0;
  overflow:hidden;
  padding:0;
}
body:has(#panelStations.app-panel--active){
  overflow:hidden;
}
body:has(#panelStations.app-panel--active) .app-stage{
  height:100vh;
  overflow:hidden;
}
.app-panel[data-panel="stations"].app-panel--active .station-nav{
  position:relative;
  z-index:20;
  flex:0 0 auto;
  flex-shrink:0;
  min-height:118px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  padding:25px 22px 15px;
  overflow:visible;
}
.app-panel[data-panel="stations"].app-panel--active .station-nav::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:50%;
  height:42px;
  transform:translateY(-50%);
  pointer-events:none;
  opacity:.72;
  background:
    radial-gradient(18px 18px at 4% 58%, transparent 54%, color-mix(in srgb, var(--brand) 46%, transparent) 56% 60%, transparent 63%),
    radial-gradient(18px 18px at 18% 32%, transparent 54%, color-mix(in srgb, var(--brand) 46%, transparent) 56% 60%, transparent 63%),
    radial-gradient(18px 18px at 34% 62%, transparent 54%, color-mix(in srgb, var(--brand) 46%, transparent) 56% 60%, transparent 63%),
    radial-gradient(18px 18px at 50% 32%, transparent 54%, color-mix(in srgb, var(--brand) 46%, transparent) 56% 60%, transparent 63%),
    radial-gradient(18px 18px at 66% 62%, transparent 54%, color-mix(in srgb, var(--brand) 46%, transparent) 56% 60%, transparent 63%),
    radial-gradient(18px 18px at 82% 32%, transparent 54%, color-mix(in srgb, var(--brand) 46%, transparent) 56% 60%, transparent 63%),
    radial-gradient(18px 18px at 96% 58%, transparent 54%, color-mix(in srgb, var(--brand) 46%, transparent) 56% 60%, transparent 63%);
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--brand) 36%, transparent));
}
.app-panel[data-panel="stations"].app-panel--active .station-nav .station-badge{
  position:relative;
  width:66px;
  height:66px;
  min-width:66px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:50% 50% 46% 46%;
  border:2px dashed color-mix(in srgb, var(--stroke) 72%, transparent);
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.26), transparent 30%),
    color-mix(in srgb, var(--bg2) 62%, transparent);
  color:color-mix(in srgb, var(--muted) 82%, transparent);
  font-size:13px;
  font-weight:900;
  line-height:1.15;
  text-align:center;
  box-shadow:0 10px 24px rgba(0,40,80,.12), inset 0 1px 0 rgba(255,255,255,.16);
  transform:translateY(var(--badge-y, 0));
  transition:var(--transition);
}
.app-panel[data-panel="stations"].app-panel--active .station-nav .station-badge:nth-child(2n){--badge-y:14px}
.app-panel[data-panel="stations"].app-panel--active .station-nav .station-badge:nth-child(2n + 1){--badge-y:-6px}
.app-panel[data-panel="stations"].app-panel--active .station-nav .station-badge::before{
  content:"🔒";
  position:absolute;
  left:50%;
  top:-9px;
  width:auto;
  height:auto;
  border-radius:0;
  transform:translateX(-50%);
  background:none;
  box-shadow:none;
  font-size:13px;
  opacity:.72;
}
.app-panel[data-panel="stations"].app-panel--active .station-nav .station-badge:hover{
  transform:translateY(calc(var(--badge-y, 0) - 5px)) scale(1.06);
  color:var(--text);
  border-style:solid;
}
.app-panel[data-panel="stations"].app-panel--active .station-nav .station-badge--current{
  color:#fff;
  border:2px solid #FBBF24;
  background:linear-gradient(160deg, #38BDF8, #0EA5E9 48%, #FB923C);
  transform:translateY(calc(var(--badge-y, 0) - 4px)) scale(1.14);
  animation: station-ripple-glow 2s ease-in-out infinite;
}
.app-panel[data-panel="stations"].app-panel--active .station-nav .station-badge--current::before{
  content:"";
  top:-23px;
  width:34px;
  height:18px;
  border-radius:18px 18px 10px 10px;
  background:
    radial-gradient(circle at 74% 44%, #071827 0 2px, transparent 2.8px),
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.9) 0 5px, rgba(255,255,255,.22) 5.4px 8px, transparent 8.5px),
    linear-gradient(180deg, #FDE68A, #F59E0B);
  box-shadow:0 6px 14px rgba(245,158,11,.32);
  opacity:1;
}
.app-panel[data-panel="stations"].app-panel--active .station-nav .station-badge--done{
  color:#07303f;
  border-style:solid;
  border-color:#86EFAC;
  background:linear-gradient(160deg, #ECFCCB, #86EFAC 58%, #22C55E);
}
.app-panel[data-panel="stations"].app-panel--active .station-nav .station-badge--done::before{
  content:"✓";
  top:-14px;
  color:#16A34A;
  font-size:18px;
  opacity:1;
}
@keyframes station-ripple-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.38), 0 12px 28px rgba(14,165,233,.22), inset 0 1px 0 rgba(255,255,255,.28)}
  50%{box-shadow:0 0 0 12px rgba(251,191,36,0), 0 18px 42px rgba(14,165,233,.36), 0 0 24px rgba(251,191,36,.5), inset 0 1px 0 rgba(255,255,255,.34)}
}

.app-panel[data-panel="stations"].app-panel--active #main{
  flex:1;
  min-height:0;
  height:100%;
  width:auto;
  max-width:none;
  margin:0 18px 18px;
  padding:0;
  overflow:hidden;
  position:relative;
  border-radius:28px;
  background:
    radial-gradient(900px 520px at 12% 8%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 60%),
    radial-gradient(780px 520px at 92% 18%, color-mix(in srgb, var(--brand2) 16%, transparent), transparent 62%),
    linear-gradient(to bottom, #0F172A, #1E293B);
  box-shadow:0 24px 60px rgba(0,70,120,.12);
}
html[data-theme="day"] .app-panel[data-panel="stations"].app-panel--active #main{
  background:
    radial-gradient(900px 520px at 12% 8%, rgba(186,230,253,.74), transparent 60%),
    radial-gradient(780px 520px at 92% 18%, rgba(125,211,252,.34), transparent 62%),
    linear-gradient(to bottom, #F0F9FF, #E0F2FE);
}
.intro-welcome-layer{
  position:absolute;
  inset:0;
  z-index:15;
  display:grid;
  place-items:center;
  padding:28px;
  background:
    radial-gradient(800px 420px at 50% 28%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg0) 54%, transparent), color-mix(in srgb, var(--bg1) 72%, transparent));
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  backdrop-filter:blur(10px) saturate(1.2);
  opacity:1;
  transition:opacity .42s ease, transform .42s ease;
}
.intro-welcome-layer.is-hidden{
  opacity:0;
  transform:scale(1.015);
  pointer-events:none;
}
.intro-welcome-card{
  width:min(760px, 92vw);
  padding:36px 34px;
  border-radius:32px;
  text-align:center;
  border:1px solid rgba(255,255,255,.26);
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08)),
    color-mix(in srgb, var(--card2) 88%, transparent);
  box-shadow:0 34px 90px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.32);
}
html[data-theme="day"] .intro-welcome-card{
  border-color: rgba(14,165,233,.20);
  box-shadow:0 34px 80px rgba(13,71,109,.16), inset 0 1px 0 rgba(255,255,255,.65);
}
.intro-welcome-card__eyebrow{
  display:inline-flex;
  padding:8px 16px;
  border-radius:999px;
  color:#07303f;
  background:linear-gradient(180deg, #FEF3C7, #FBBF24);
  font-weight:900;
  box-shadow:0 10px 22px rgba(251,191,36,.24);
}
.intro-welcome-card__title{
  margin:18px 0 12px;
  font-size:clamp(28px, 4vw, 44px);
  line-height:1.2;
  font-weight:900;
  color:var(--text);
}
.intro-welcome-card__text{
  margin:0 auto 26px;
  max-width:58ch;
  color:var(--muted);
  font-size:18px;
  line-height:1.9;
}
.intro-welcome-card__btn{
  appearance:none;
  border:0;
  border-radius:999px;
  padding:17px 30px;
  color:#fff;
  font-size:20px;
  font-weight:900;
  cursor:pointer;
  background:linear-gradient(180deg, #38BDF8, #0EA5E9 52%, #0369A1);
  box-shadow:0 11px 0 #075985, 0 22px 36px rgba(14,165,233,.28), inset 0 3px 0 rgba(255,255,255,.62);
  transition:transform .24s cubic-bezier(.34,1.7,.5,1), box-shadow .24s ease, filter .24s ease;
}
.intro-welcome-card__btn:hover{
  transform:translateY(-3px) scale(1.05);
  filter:brightness(1.08);
}
.intro-welcome-card__btn:active{
  transform:translateY(7px) scale(.96);
  box-shadow:0 4px 0 #075985, 0 12px 20px rgba(14,165,233,.22), inset 0 2px 0 rgba(255,255,255,.48);
}

.stage-container{
  display:block;
  height:100%;
  box-sizing:border-box;
  padding:16px 18px 80px;
  opacity:0;
  pointer-events:none;
  transition:opacity .42s ease, transform .42s ease;
  transform:translateY(10px);
  overflow:hidden;
}
.station-voyage-started .stage-container,
.stage-container.is-ready{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.stage-container > .hero,
.stage-container > .footer{
  display:none !important;
}
.stage-container > .station{
  display:none;
  height:100%;
  min-height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(10px) scale(.99);
  transition:opacity .32s ease, transform .32s ease;
}
.stage-container > .station.station--active{
  display:flex;
  flex-direction:column;
  opacity:1;
  transform:translateY(0) scale(1);
}
.stage-container .station__head{
  flex:0 0 auto;
  flex-shrink:0;
  margin-bottom:10px;
}
.stage-container .station__head h2{
  margin:6px 0 4px;
  font-size:clamp(20px, 2.2vw, 30px);
}
.stage-container .station__desc{
  margin:0;
  max-width:90ch;
  line-height:1.55;
  font-size:clamp(14px, 1.5vw, 16px);
}
.stage-container .station > .grid,
.stage-container .station > .lab{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
  align-items:stretch;
}
/* 左右栏卡片：限高 + 内部弹性滚动（全局零滚动，局部细滚动条） */
.stage-container .station > .grid > .card,
.stage-container .station > .lab > .lab__panel{
  display:flex;
  flex-direction:column;
  gap:15px;
  min-height:0;
  max-height:100%;
  box-sizing:border-box;
  padding:15px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color: color-mix(in srgb, var(--brand) 55%, transparent) transparent;
}
.stage-container .station > .lab > .lab__canvasWrap{
  display:flex;
  flex-direction:column;
  min-height:0;
  max-height:100%;
  box-sizing:border-box;
  overflow:hidden;
}

/* 左侧日志牛皮纸 / 磨砂探险卡 */
.stage-container .card--log,
.stage-container .station .card:first-child{
  border-radius:28px;
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 22px 46px rgba(0,70,120,.12), inset 0 1px 0 rgba(255,255,255,.24);
}
html[data-theme="day"] .stage-container .card--log,
html[data-theme="day"] .stage-container .station .card:first-child{
  background:rgba(255,255,255,.72);
  border-color: rgba(14,165,233,.20);
  box-shadow:0 22px 46px rgba(13,71,109,.10), inset 0 1px 0 rgba(255,255,255,.55);
}
.stage-container .poem{
  flex:0 0 auto;
  min-height:auto;
  flex-shrink:0;
  padding:18px 16px;
  border-radius:20px;
}
.stage-container .poem__line{
  font-size:clamp(24px, 2.8vw, 38px);
  line-height:1.85;
  letter-spacing:3px;
}
.stage-container .poem__actions{
  flex-shrink:0;
  gap:12px;
  margin-top:0;
}
.stage-container .poem__answer{
  flex-shrink:0;
  margin-top:0;
  min-height:0;
  line-height:1.75;
}
.stage-container #s1 .card--log{
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:stretch;
}
.stage-container #s1 .poem__actions{
  display:flex;
  flex-wrap:wrap;
  flex-shrink:0;
}
.stage-container #s1 .poem__answer{
  flex-shrink:0;
  width:100%;
  min-height:0;
}
.stage-container #s1 .poem__answer:not(:empty){
  padding:12px 14px;
  border-radius:16px;
  background:color-mix(in srgb, var(--brand) 10%, transparent);
  border:1px dashed color-mix(in srgb, var(--brand) 35%, transparent);
}
/* === 第一站全宽布局 === */
.s1-full-wrap{
  width:100%;
}
.s1-ocean-card{
  display:flex;
  flex-direction:column;
  padding:0 !important;
  overflow:hidden;
}
.stage-container #s1 .card--aquarium{
  display:flex;
  flex-direction:column;
  min-height:0;
}
.stage-container #s1 .mini-ocean{
  flex:1 1 auto;
  min-height:360px;
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.stage-container #s1 .mini-ocean canvas{
  flex:1 1 auto;
  width:100%;
  min-height:360px;
  height:auto;
  max-height:none;
  aspect-ratio:16 / 7;
  object-fit:fill;
  position:relative;
  z-index:2;
  pointer-events:auto;
  touch-action:none;
  cursor:crosshair;
}
.stage-container #s1 .mini-ocean__hint{
  pointer-events:none;
  z-index:3;
}
.stage-container #s1 .mini-ocean::after{
  pointer-events:none;
  z-index:1;
}
.stage-container .card__title,
.stage-container .station .muted,
.stage-container .station .note,
.stage-container .station .scoreline,
.stage-container .story__title,
.stage-container .story__qTitle{
  flex-shrink:0;
  margin-bottom:0;
}
.stage-container .panel__row{
  flex-shrink:0;
  margin-bottom:0;
}
.stage-container .panel__row--2{
  gap:12px;
}
.stage-container .panel__note{
  flex-shrink:0;
  margin-top:0;
  padding:12px;
}
/* 中间核心交互区：弹性伸缩，不被挤压裁切 */
.stage-container .mini-ocean,
.stage-container .duck-game,
.stage-container .drag-area,
.stage-container .ac,
.stage-container .coriolis,
.stage-container .upwelling,
.stage-container .story,
.stage-container .station #quiz,
.stage-container .lab__canvasWrap canvas,
.stage-container .badge-card{
  flex:1;
  min-height:0;
}
.stage-container .upwelling__controls,
.stage-container .duck-game__hud,
.stage-container .coriolis__controls,
.stage-container .station .panel__row--2:last-child{
  flex-shrink:0;
}
.stage-container .poem__actions .btn,
.stage-container .station .btn{
  border-radius:999px;
  transition:transform .24s cubic-bezier(.34,1.7,.5,1), box-shadow .24s ease, filter .24s ease, background .24s ease;
}
.stage-container .poem__actions .btn:hover,
.stage-container .station .btn:hover{
  transform:translateY(-2px) scale(1.04);
}
.stage-container .poem__actions .btn:active,
.stage-container .station .btn:active{
  transform:scale(.95);
}

/* 右侧厚玻璃水族箱（装饰层，不阻断卡片内部滚动） */
.stage-container .card--aquarium,
.stage-container .mini-ocean,
.stage-container .duck-game,
.stage-container .lab__canvasWrap,
.stage-container .coriolis,
.stage-container .upwelling,
.stage-container .ac__map{
  border-radius:24px;
  box-shadow:inset 0 8px 24px rgba(0,0,0,.30), 0 22px 44px rgba(0,70,120,.10);
  border:1px solid color-mix(in srgb, var(--brand) 28%, transparent);
}
html[data-theme="day"] .stage-container .card--aquarium,
html[data-theme="day"] .stage-container .mini-ocean,
html[data-theme="day"] .stage-container .duck-game,
html[data-theme="day"] .stage-container .lab__canvasWrap,
html[data-theme="day"] .stage-container .coriolis,
html[data-theme="day"] .stage-container .upwelling,
html[data-theme="day"] .stage-container .ac__map{
  box-shadow:inset 0 4px 16px rgba(13,71,109,.08), 0 22px 44px rgba(13,71,109,.08);
  border-color: rgba(14,165,233,.24);
}
.stage-container .mini-ocean,
.stage-container .duck-game canvas,
.stage-container .lab__canvasWrap,
.stage-container .coriolis canvas,
.stage-container .upwelling canvas{
  overflow:hidden;
}
.stage-container .station > .grid > .card::-webkit-scrollbar,
.stage-container .station > .lab > .lab__panel::-webkit-scrollbar{
  width:6px;
}
.stage-container .station > .grid > .card::-webkit-scrollbar-thumb,
.stage-container .station > .lab > .lab__panel::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:color-mix(in srgb, var(--brand) 50%, transparent);
}
.stage-container .station > .grid > .card::-webkit-scrollbar-track,
.stage-container .station > .lab > .lab__panel::-webkit-scrollbar-track{
  background:transparent;
}

.quick-fish-nav{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:10;
  display:flex;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px) saturate(1.35);
  backdrop-filter:blur(14px) saturate(1.35);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:
    0 18px 40px rgba(0,40,80,.22),
    0 6px 18px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.32);
}
html[data-theme="day"] .quick-fish-nav{
  background:rgba(255,255,255,.62);
  border-color: rgba(14,165,233,.18);
  box-shadow:
    0 18px 40px rgba(13,71,109,.10),
    0 6px 18px rgba(13,71,109,.05),
    inset 0 1px 0 rgba(255,255,255,.65);
}
.quick-fish-nav__btn{
  appearance:none;
  border:1px solid color-mix(in srgb, var(--brand) 34%, transparent);
  border-radius:999px;
  padding:10px 14px;
  color:var(--text);
  background:color-mix(in srgb, var(--card-bg) 70%, transparent);
  cursor:pointer;
  font-weight:900;
  transition:var(--transition);
}
.quick-fish-nav__btn:hover{
  transform:translateY(-3px) scale(1.04);
  background:color-mix(in srgb, var(--brand) 24%, var(--card-bg));
}
.quick-fish-nav__btn--finish{
  border-color:rgba(251,191,36,.52);
}

@media (max-width: 980px){
  .app-panel[data-panel="stations"].app-panel--active{
    height:calc(100vh - 58px);
    min-height:0;
    overflow:hidden;
  }
  .app-panel[data-panel="stations"].app-panel--active #main{
    margin:0 10px 12px;
  }
  .stage-container{
    padding:12px 12px 88px;
  }
  .stage-container .station > .grid,
  .stage-container .station > .lab{
    grid-template-columns:1fr;
    gap:12px;
  }
  .app-panel[data-panel="stations"].app-panel--active .station-nav{
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:visible;
    min-height:118px;
    padding-top:25px;
    padding-bottom:15px;
    -webkit-overflow-scrolling:touch;
  }
  .quick-fish-nav{
    right:10px;
    bottom:10px;
    flex-direction:column;
    align-items:stretch;
  }
}
@media (prefers-reduced-motion: reduce){
  .intro-welcome-layer,
  .stage-container,
  .stage-container > .station,
  .app-panel[data-panel="stations"].app-panel--active .station-nav .station-badge--current{
    animation:none !important;
    transition:none !important;
  }
}

/* =========================================================
   五站闯关 · 布局修复补丁（Zero-Scroll + 局部滚动 + 防重叠）
   ========================================================= */
.stage-container > .station{
  margin-top:0;
  padding-top:0;
}
.stage-container .station > .grid > .card:hover,
.stage-container .station > .lab > .lab__panel:hover{
  transform:none;
}
.stage-container .ac,
.stage-container .duck-game,
.stage-container .coriolis,
.stage-container .upwelling,
.stage-container .story,
.stage-container .drag-area{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.stage-container .lab__panel{
  gap:12px;
}
.stage-container .lab__canvasWrap canvas,
.stage-container .mini-ocean canvas,
.stage-container .duck-game canvas,
.stage-container .coriolis canvas,
.stage-container .upwelling canvas{
  flex:1;
  min-height:120px;
  max-height:100%;
  width:100%;
  height:auto;
  object-fit:contain;
}
.stage-container .mini-ocean{
  display:flex;
  flex-direction:column;
  min-height:180px;
}
.stage-container .ac__meters{
  flex-shrink:0;
  gap:10px;
}
.stage-container .drag-area__cards{
  flex-shrink:0;
  margin-bottom:0;
}
.stage-container .drag-area__bins{
  flex:1;
  min-height:0;
  align-content:start;
}
.stage-container .story__list,
.stage-container .story__q,
.stage-container .story__choices,
.stage-container .story__result{
  flex-shrink:0;
}
.stage-container .badge-card__bottom,
.stage-container .footer-tip{
  flex-shrink:0;
}

/* ===== 第二站：动手实验室专属布局修复 ===== */
.stage-container #s2 .lab{
  grid-template-columns: 1.55fr 1fr;
}
.stage-container #s2 .lab__canvasWrap canvas{
  flex:0 0 auto;
  width:100%;
  height:auto;
  aspect-ratio: 920 / 420;
  max-height:100%;
  object-fit:contain;
  min-height:0;
}
/* 玻璃水槽装饰边框 */
.stage-container #s2 .lab__canvasWrap{
  border-radius:20px;
  border:3px solid rgba(82,214,255,.22);
  background:linear-gradient(180deg, rgba(8,32,48,.70), rgba(4,18,28,.55));
  box-shadow:
    inset 0 0 60px rgba(82,214,255,.06),
    0 0 0 1px rgba(255,255,255,.04),
    0 8px 32px rgba(0,0,0,.30);
  overflow:hidden;
}
html[data-theme="day"] .stage-container #s2 .lab__canvasWrap{
  border-color: rgba(14,165,233,.28);
  background:linear-gradient(180deg, rgba(224,242,254,.70), rgba(205,234,251,.55));
  box-shadow:
    inset 0 0 60px rgba(14,165,233,.06),
    0 0 0 1px rgba(255,255,255,.55),
    0 8px 32px rgba(13,71,109,.08);
}
.stage-container #s2 .lab__overlay{
  z-index:3;
}
.stage-container #s2 .lab__label{
  background:rgba(8,32,48,.85);
  border:1.5px solid rgba(82,214,255,.40);
  font-size:14px;
  padding:8px 16px;
}
html[data-theme="day"] .stage-container #s2 .lab__label{
  background:rgba(255,255,255,.78);
  border-color: rgba(14,165,233,.35);
  color: var(--text);
}
.stage-container #s2 .lab__panel{
  gap:12px;
}
.stage-container #s2 .lab__panel .panel__row{
  flex-shrink:0;
}
.stage-container #s2 .lab__panel .panel__note{
  flex-shrink:0;
  margin-top:4px;
}

/* ===== 第三站专属布局修复 ===== */
/* 左大右小：canvas 区给更多空间 */
.stage-container #s3 > .grid{
  grid-template-columns: 1.35fr 1fr;
}
/* canvas 保持 16:10 比例，不被 flex 拉伸变形 */
.stage-container #s3 .duck-game{
  gap:10px;
}
.stage-container #s3 .duck-game canvas{
  flex:0 0 auto;
  width:100%;
  height:auto;
  aspect-ratio: 620 / 420;
  max-height:100%;
  object-fit:contain;
  display:block;
}
/* HUD 紧凑排版 */
.stage-container #s3 .duck-game__hud{
  flex-shrink:0;
  padding:12px 14px;
}
.stage-container #s3 .hud__row{
  gap:6px;
  margin-bottom:5px;
}
.stage-container #s3 .hud__tag{
  font-size:12px;
  padding:3px 9px;
  flex-shrink:0;
}
.stage-container #s3 .hud__row .btn,
.stage-container #s3 .hud__row .select{
  font-size:13px;
  padding:5px 12px;
}
.stage-container #s3 .hud__text{
  font-size:12px;
  line-height:1.5;
}
/* story 面板：标题不缩，列表可滚 */
.stage-container #s3 .story{
  gap:10px;
}
.stage-container #s3 .story__title{
  font-size:17px;
  flex-shrink:0;
}
.stage-container #s3 .story__list{
  font-size:14px;
  line-height:1.75;
}
.stage-container #s3 .story__qBody{
  font-size:14px;
  line-height:1.6;
}
@media (max-width: 980px){
  .stage-container #s3 > .grid{
    grid-template-columns: 1fr;
  }
}

/* ===== 第四站专属布局修复 ===== */
/* 右栏 coriolis 控件紧凑化 */
.stage-container #s4 .coriolis{
  gap:10px;
}
.stage-container #s4 .coriolis__controls{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:0;
  background:none;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
}
.stage-container #s4 .coriolis__controls .label{
  font-size:13px;
  margin:0;
  white-space:nowrap;
  flex-shrink:0;
}
.stage-container #s4 .coriolis__controls .select{
  width:auto;
  flex:0 1 auto;
  padding:6px 12px;
  font-size:13px;
}
.stage-container #s4 .coriolis__controls .panel__row--2{
  display:flex;
  gap:8px;
  margin:0;
  flex:0 0 auto;
}
.stage-container #s4 .coriolis__controls .btn{
  font-size:13px;
  padding:6px 14px;
  white-space:nowrap;
}
/* canvas 保持 620:260 比例，不被 flex 拉伸变形 */
.stage-container #s4 .coriolis canvas{
  flex:0 0 auto;
  width:100%;
  height:auto;
  aspect-ratio: 620 / 260;
  max-height:100%;
  object-fit:contain;
  min-height:0;
}
/* 右栏卡片内容紧凑 */
.stage-container #s4 .card--glass .card__title{
  font-size:16px;
  flex-shrink:0;
  margin-bottom:0;
}
.stage-container #s4 .card--glass .muted{
  font-size:13px;
  line-height:1.6;
  flex-shrink:0;
  margin:0;
}

/* ===== 第五站专属布局修复 ===== */
.stage-container #s5 .upwelling{
  gap:10px;
}
/* canvas 保持 620:320 比例，不被 flex 拉伸变形 */
.stage-container #s5 .upwelling canvas{
  flex:0 0 auto;
  width:100%;
  height:auto;
  aspect-ratio: 620 / 320;
  max-height:100%;
  object-fit:contain;
  min-height:0;
}
/* controls 紧凑一行 */
.stage-container #s5 .upwelling__controls{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0;
  flex-shrink:0;
}
.stage-container #s5 .upwelling__controls .btn{
  font-size:13px;
  padding:6px 14px;
  white-space:nowrap;
}
.stage-container #s5 .upwelling__hint{
  font-size:12px;
  margin:0;
  flex:1 1 auto;
  min-width:0;
}
/* 右栏卡片内容紧凑 */
.stage-container #s5 .card--glass .card__title{
  font-size:16px;
  flex-shrink:0;
  margin-bottom:0;
}
.stage-container #s5 .card--glass .muted{
  font-size:13px;
  line-height:1.6;
  flex-shrink:0;
  margin:0;
}

/* =========================================================
   洋流实验 · 世界洋流分布模式演示器
   底板 740×840px，控制面板风格与主站海洋主题统一
   ========================================================= */
.experiment-panel.app-panel--active{
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - 58px);
  padding:0;
}
.experiment-layout{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding:20px 18px 40px;
  overflow-y:auto;
}
/* 实验底板：保留原粉色泡沫板质感，降低饱和度融入海洋色调 */
.experiment-board{
  flex-shrink:0;
  width:740px;
  height:840px;
  border-radius:16px;
  background: linear-gradient(180deg, #e8c8c4 0%, #dbb8b4 40%, #ceaca8 100%);
  box-shadow:
    0 14px 44px color-mix(in srgb, var(--brand) 18%, rgba(0,0,0,.35)),
    inset 0 2px 10px rgba(255,255,255,.38);
  position:relative;
  overflow:hidden;
}
#experimentCanvas{
  display:block;
  position:absolute;
  top:0;
  left:0;
}
/* 实验控制台卡片 */
.experiment-controls{
  max-width:740px;
  width:100%;
  padding:20px 22px;
}
.experiment-controls__title{
  margin:0 0 16px;
  font-size:19px;
  font-weight:800;
  text-align:center;
  color:var(--text);
}
.experiment-ctrl-row{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  justify-content:center;
  align-items:flex-start;
}
.experiment-ctrl-group{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:100px;
}
.experiment-ctrl__label{
  font-size:13px;
  font-weight:800;
  color:var(--muted);
  text-align:center;
}
/* 加水按钮：品牌色强调 */
.experiment-btn--water{
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 46%, transparent), color-mix(in srgb, var(--brand2) 34%, transparent)) !important;
  border-color: color-mix(in srgb, var(--brand) 75%, transparent) !important;
  color:#fff !important;
}
/* 滴油按钮：珊瑚色强调 */
.experiment-btn--oil{
  background: linear-gradient(135deg, color-mix(in srgb, var(--coral) 46%, transparent), color-mix(in srgb, var(--coral) 34%, transparent)) !important;
  border-color: color-mix(in srgb, var(--coral) 70%, transparent) !important;
  color:#fff !important;
}
/* 水位指示条 */
.experiment-ctrl-group .water-level{
  width:80px;
  height:10px;
  background:color-mix(in srgb, var(--bg0) 55%, transparent);
  border-radius:5px;
  overflow:hidden;
  box-shadow:var(--shadow-inset);
}
.experiment-ctrl-group .water-level-fill{
  height:100%;
  background:linear-gradient(90deg, color-mix(in srgb, var(--brand) 55%, transparent), var(--brand));
  border-radius:5px;
  transition:width .5s ease;
  width:0%;
}
/* 气泵开关：风格化 toggle */
.experiment-pump{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.experiment-pump .toggle{
  width:58px;
  height:30px;
  padding:3px;
  border-radius:15px;
  background:color-mix(in srgb, var(--muted) 45%, transparent);
  cursor:pointer;
  position:relative;
  transition:background .3s ease;
  display:flex;
  align-items:center;
}
.experiment-pump .toggle.is-active{
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand2) 55%, transparent), var(--brand2));
}
.experiment-pump .toggle .toggle__track{
  display:none;
}
.experiment-pump .toggle .toggle__thumb{
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  transition:transform .3s ease;
}
.experiment-pump .toggle.is-active .toggle__thumb{
  transform:translateX(28px);
}
.experiment-pump__status{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
}
.experiment-pump__status.is-active{
  color:var(--brand2);
}
/* 信息指标 */
.experiment-info{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  margin-top:16px;
  padding:10px 16px;
  border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--bg0) 30%, transparent);
  border:1px dashed color-mix(in srgb, var(--stroke) 50%, transparent);
}
.experiment-info__item{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 14px;
  border-right:1px solid color-mix(in srgb, var(--stroke) 40%, transparent);
  font-size:12px;
  color:var(--muted);
}
.experiment-info__item:last-child{border-right:none}
.experiment-info__value{
  font-weight:800;
  color:var(--brand);
  font-size:15px;
  margin-top:2px;
}
/* 使用说明 */
.experiment-controls .panel__note{
  margin-top:14px;
  font-size:13px;
  text-align:center;
}

@media (max-width: 800px){
  .experiment-board{
    width:100%;
    height:auto;
    aspect-ratio:740/840;
  }
  #experimentCanvas{
    width:100%;
    height:100%;
  }
  .experiment-controls{
    padding:16px;
  }
  .experiment-ctrl-row{
    gap:12px;
  }
  .experiment-ctrl-group{
    min-width:auto;
  }
}

@media (prefers-reduced-motion: reduce){
  .experiment-ctrl-group .water-level-fill{transition:none}
}

/* ================================================================
   洋流数据库面板
   ================================================================ */
.db-panel.app-panel--active{
  display:flex;
  flex-direction:column;
  min-height:0;
  padding:16px 18px 40px;
}
.db-layout{
  flex:1;
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:16px;
  min-height:0;
}
@media (max-width: 980px){
  .db-layout{grid-template-columns:1fr}
}

/* ---- 左侧主区 ---- */
.db-main{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:0;
  overflow-y:auto;
}
.db-header{
  flex-shrink:0;
}
.db-header__title{
  margin:0 0 4px;
  font-size:22px;
  font-weight:800;
  color:var(--text);
}
.db-header__sub{
  margin:0;
  font-size:13px;
  color:var(--muted);
  line-height:1.5;
}

/* ---- 筛选栏 ---- */
.db-filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  flex-shrink:0;
}
.db-search{
  flex:1;
  min-width:180px;
  padding:10px 14px;
  border-radius:var(--radius-pill);
  border:1px solid var(--stroke);
  background:var(--card-bg);
  color:var(--text);
  font-size:13px;
  font-weight:700;
  font-family:inherit;
  outline:none;
  backdrop-filter:blur(8px);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.db-search::placeholder{color:var(--muted); opacity:.7}
.db-search:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(var(--brand-rgb),.15);
}
.db-select{
  padding:10px 12px;
  border-radius:var(--radius-pill);
  border:1px solid var(--stroke);
  background:var(--card-bg);
  color:var(--text);
  font-size:13px;
  font-weight:700;
  font-family:inherit;
  outline:none;
  cursor:pointer;
  backdrop-filter:blur(8px);
}
.db-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:var(--radius-pill);
  border:1px solid var(--stroke);
  background:var(--card-bg);
  color:var(--text);
  font-size:13px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  user-select:none;
  backdrop-filter:blur(8px);
  transition:border-color .2s ease, box-shadow .15s ease, transform .12s ease;
}
.db-toggle:hover{transform:translateY(-1px)}
.db-toggle[aria-pressed="true"]{
  border-color:var(--warn);
  box-shadow:0 0 12px rgba(var(--warn),.18);
}
.db-toggle__dot{
  display:inline-block;
  width:10px; height:10px;
  border-radius:99px;
  flex-shrink:0;
}
.db-toggle__dot--gray{background:var(--muted)}
.db-toggle__dot--warm{background:var(--coral)}
.db-toggle__dot--cold{background:var(--brand)}

/* ---- 洋流列表 ---- */
.db-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  flex-shrink:0;
}
@media (max-width: 640px){
  .db-list{grid-template-columns:1fr}
}
.db-item{
  background:var(--card-bg);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:12px 14px;
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease, border-color .2s ease, box-shadow .2s ease;
  backdrop-filter:blur(6px);
}
.db-item:hover{
  transform:translateY(-1px);
  border-color:var(--warn);
  box-shadow:0 4px 18px rgba(var(--warn),.10);
}
.db-item--active{
  border-color:var(--brand2) !important;
  box-shadow:0 0 16px rgba(var(--brand2-rgb),.20) !important;
  background:rgba(var(--brand2-rgb),.08);
}
.db-item__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px;
}
.db-item__name{
  font-size:14px;
  font-weight:800;
  color:var(--text);
  line-height:1.3;
}
.db-item__tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 8px;
  border-radius:var(--radius-pill);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  border:1px solid var(--stroke);
  background:var(--surface);
  color:var(--muted);
  flex-shrink:0;
}
.db-item__tag--warm{
  color:var(--coral);
  border-color:rgba(var(--coral-rgb),.25);
}
.db-item__tag--cold{
  color:var(--brand);
  border-color:rgba(var(--brand-rgb),.25);
}
.db-item__tag-dot{
  width:7px; height:7px;
  border-radius:99px;
  flex-shrink:0;
}
.db-item__tag-dot--warm{background:var(--coral)}
.db-item__tag-dot--cold{background:var(--brand)}
.db-item__where{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  line-height:1.45;
}

/* ---- 右侧面板 ---- */
.db-side{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:0;
  overflow-y:auto;
}

/* ---- 探险记录卡 ---- */
.db-info{
  background:var(--card-bg);
  border:1px solid var(--stroke);
  border-radius:var(--radius2);
  overflow:hidden;
  flex-shrink:0;
  backdrop-filter:blur(6px);
  box-shadow:var(--shadow-soft);
}
.db-info__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--stroke);
  background:var(--surface);
}
.db-info__title{
  margin:0;
  font-size:15px;
  font-weight:800;
  color:var(--text);
}
.db-info__kind{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 10px;
  border-radius:var(--radius-pill);
  border:1px solid var(--stroke);
  background:var(--surface);
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  white-space:nowrap;
}
.db-info__dot{
  width:7px; height:7px;
  border-radius:99px;
  flex-shrink:0;
}
.db-info__dot--gray{background:var(--muted)}
.db-info__dot--warm{background:var(--coral)}
.db-info__dot--cold{background:var(--brand)}
.db-info__body{
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.db-info__desc{
  font-size:13px;
  font-weight:700;
  color:var(--text);
  line-height:1.55;
  padding:10px 12px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--stroke);
}
.db-info__facts{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.db-info__fact{
  padding:10px 12px;
  border-radius:var(--radius);
  background:var(--surface);
  border:1px solid var(--stroke);
  font-size:13px;
  font-weight:600;
  color:var(--text);
  line-height:1.55;
}

/* ---- 闯关题库 ---- */
.db-quiz{
  background:var(--card-bg);
  border:1px solid var(--stroke);
  border-radius:var(--radius2);
  padding:14px;
  flex-shrink:0;
  backdrop-filter:blur(6px);
}
.db-quiz__title{
  font-size:14px;
  font-weight:800;
  color:var(--text);
  margin-bottom:6px;
}
.db-quiz__counter{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:10px;
  padding:4px 10px;
  border-radius:var(--radius-pill);
  background:var(--surface);
  display:inline-block;
}
.db-quiz__q{
  font-size:15px;
  font-weight:800;
  color:var(--text);
  margin-bottom:10px;
  line-height:1.5;
}
.db-quiz__choices{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:10px;
}
.db-quiz__choice{
  text-align:left;
  padding:10px 14px;
  border-radius:var(--radius);
  border:1px solid var(--stroke);
  background:var(--surface);
  color:var(--text);
  font-size:13px;
  font-weight:700;
  font-family:inherit;
  cursor:pointer;
  transition:transform .12s ease, border-color .2s ease, background .18s ease;
}
.db-quiz__choice:hover{
  transform:translateY(-1px);
  border-color:var(--warn);
}
.db-quiz__choice--correct{
  border-color:rgba(32,201,151,.55) !important;
  background:rgba(32,201,151,.12) !important;
}
.db-quiz__choice--wrong{
  border-color:rgba(255,77,109,.55) !important;
  background:rgba(255,77,109,.10) !important;
}
.db-quiz__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.db-quiz__msg{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  line-height:1.4;
}

/* ===== 回顾闯关：quiz + 卡通通关卡 ===== */

/* 答题区 */
.quiz-actions{
  display:flex;
  gap:12px;
  margin-top:16px;
  flex-shrink:0;
}
.quiz-actions .btn--lg{
  padding:12px 28px;
  font-size:17px;
  font-weight:800;
}
.quiz-actions .btn--outline{
  border:2px solid rgba(255,204,102,.55);
  background:transparent;
  color:var(--text);
  font-weight:700;
}
.quiz-actions .btn--outline:hover{
  background:rgba(255,204,102,.12);
  border-color:rgba(255,204,102,.85);
}

/* 答题卡片：题目区滚动，按钮钉在底部 */
.stage-container #finalLeft{
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 200px);
  overflow:hidden;
}
.stage-container #finalLeft #quiz{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding-right:4px;
}
.stage-container #finalLeft .quiz-actions{
  flex-shrink:0;
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid rgba(82,214,255,.08);
}
.stage-container #finalLeft .scoreline{
  flex-shrink:0;
  margin-top:10px;
  padding-bottom:2px;
}

@media (max-width: 980px){
  .stage-container #finalLeft{
    max-height:none;
    overflow:visible;
  }
  .stage-container #finalLeft #quiz{
    overflow-y:visible;
  }
}

/* ===== 卡通通关卡 ===== */
.badge-card{
  border-radius:20px;
  border:3px solid rgba(255,204,102,.65);
  background: linear-gradient(160deg,
    rgba(15,38,51,.92) 0%,
    rgba(20,50,70,.88) 40%,
    rgba(15,38,51,.92) 100%);
  padding:0;
  overflow:hidden;
  box-shadow:
    0 0 30px rgba(255,204,102,.15),
    0 8px 40px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;
}
html[data-theme="day"] .badge-card{
  background: linear-gradient(160deg,
    rgba(255,252,245,.96) 0%,
    rgba(255,248,235,.94) 40%,
    rgba(255,252,245,.96) 100%);
  box-shadow:
    0 0 34px rgba(245,158,11,.18),
    0 8px 40px rgba(13,71,109,.12),
    inset 0 1px 0 rgba(255,255,255,.55);
}
/* 装饰内边框 */
.badge-card::before{
  content:'';
  position:absolute;
  inset:10px;
  border:2px dashed rgba(255,204,102,.25);
  border-radius:14px;
  pointer-events:none;
  z-index:1;
}

.badge-card__inner{
  padding:24px 20px 16px;
  position:relative;
  z-index:2;
  text-align:center;
}

.badge-card__header{
  margin-bottom:18px;
}
.badge-card__ribbon{
  display:inline-block;
  background:linear-gradient(135deg, #ffb347, #ffcc66, #ffb347);
  color:#1a3a4a;
  font-weight:900;
  font-size:15px;
  padding:6px 28px;
  border-radius:999px;
  letter-spacing:2px;
  box-shadow:0 3px 12px rgba(255,179,71,.30);
  margin-bottom:10px;
}
.badge-card__title{
  font-size:26px;
  font-weight:900;
  background:linear-gradient(180deg, #ffd700, #ffaa00);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  letter-spacing:1px;
}

/* 10颗星星：2行×5颗 */
.badge-card__stars{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:10px 8px;
  max-width:280px;
  margin:0 auto 20px;
  justify-items:center;
}
.star{
  width:36px;
  height:36px;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
  background:rgba(255,204,102,.12);
  border:2px solid rgba(255,204,102,.25);
  transition: all .5s cubic-bezier(.34,1.7,.5,1);
  position:relative;
}
.star--on{
  background:linear-gradient(135deg, #ffd700, #ffaa00, #ffd700);
  border-color:rgba(255,215,0,.80);
  box-shadow:
    0 0 12px rgba(255,215,0,.50),
    0 0 28px rgba(255,170,0,.25);
  animation:starPop .5s cubic-bezier(.34,1.7,.5,1) both;
}
@keyframes starPop{
  0%{ transform:scale(0); opacity:0; }
  60%{ transform:scale(1.35); }
  100%{ transform:scale(1); opacity:1; }
}

/* 通关消息 */
.badge-card__msg{
  font-size:16px;
  color:var(--muted);
  line-height:1.8;
  margin-bottom:18px;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.badge-card__msg--done{
  color:var(--text);
  font-weight:800;
  font-size:18px;
}
/* 印章 */
.badge-card__seal{
  margin:0 auto;
  width:72px;
  height:72px;
  border-radius:50%;
  border:3px solid rgba(255,77,77,.30);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  opacity:0;
  transform:rotate(-15deg) scale(.6);
  transition: all .6s cubic-bezier(.34,1.7,.5,1);
}
.badge-card__seal--show{
  opacity:1;
  transform:rotate(-12deg) scale(1);
  border-color:rgba(255,77,77,.80);
  box-shadow:0 0 20px rgba(255,77,77,.20);
}

.badge-card__bottom{
  padding:12px 20px 18px;
  text-align:center;
  position:relative;
  z-index:2;
}
.badge-card__bottom .btn{
  font-size:14px;
}

/* stage-container 中 final 站的专属覆盖 */
.stage-container #finalRight .badge-card{
  flex:0 0 auto;
  min-height:0;
}
.stage-container #finalRight{
  display:flex;
  flex-direction:column;
}
/* quiz 题目标题和选项 */
.stage-container #quiz .q__title{
  font-weight:800;
}
.stage-container #quiz .opt{
  font-size:14px;
  padding:8px 12px;
}

@media (max-width: 980px){
  .badge-card__stars{
    max-width:240px;
    gap:8px 6px;
  }
  .star{
    width:30px;
    height:30px;
  }
}

/* ===== 字体大小切换 ===== */
/* small - 小字体 (手机/平板) */
[data-font-size="small"] {
  --fs-body: 14px;
  --fs-h1: 26px;
  --fs-h2: 20px;
  --fs-h3: 17px;
  --fs-card-title: 16px;
  --fs-side: 13px;
  --fs-nav-btn: 13px;
  --fs-btn: 13px;
  --fs-input: 13px;
  --fs-label: 12px;
  --fs-chip: 11px;
  --fs-hero-sub: 15px;
  --sp-sm: 6px;
  --sp-md: 10px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --side-width: 58px;
  --side-expanded: 170px;
}
/* medium - 中字体 (默认) */
[data-font-size="medium"] {
  --fs-body: 16px;
  --fs-h1: 32px;
  --fs-h2: 24px;
  --fs-h3: 19px;
  --fs-card-title: 18px;
  --fs-side: 14px;
  --fs-nav-btn: 14px;
  --fs-btn: 14px;
  --fs-input: 14px;
  --fs-label: 13px;
  --fs-chip: 12px;
  --fs-hero-sub: 18px;
  --sp-sm: 8px;
  --sp-md: 14px;
  --sp-lg: 22px;
  --sp-xl: 28px;
  --side-width: 68px;
  --side-expanded: 190px;
}
/* large - 大字体 (投影/护眼) */
[data-font-size="large"] {
  --fs-body: 20px;
  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 24px;
  --fs-card-title: 22px;
  --fs-side: 16px;
  --fs-nav-btn: 16px;
  --fs-btn: 16px;
  --fs-input: 16px;
  --fs-label: 15px;
  --fs-chip: 14px;
  --fs-hero-sub: 22px;
  --sp-sm: 12px;
  --sp-md: 20px;
  --sp-lg: 30px;
  --sp-xl: 38px;
  --side-width: 80px;
  --side-expanded: 220px;
}

/* === 小字体专属调整 === */
[data-font-size="small"] .app-header { padding: 8px 14px; }
[data-font-size="small"] .app-header__title { font-size: var(--fs-h2); }
[data-font-size="small"] .userbar { font-size: 12px; gap: 6px; }
[data-font-size="small"] .userbar__name { font-size: 13px; }
[data-font-size="small"] .userbar .btn { font-size: 11px; padding: 3px 10px; }

/* 侧边导航 - small */
[data-font-size="small"] .side-rail__toggle { width: 44px; padding: 6px 4px; }
[data-font-size="small"] .side-nav__item { padding: 8px 6px; gap: 5px; }
[data-font-size="small"] .side-nav__text { font-size: var(--fs-side); }
[data-font-size="small"] .side-nav__icon svg { width: 18px; height: 18px; }

/* 卡片与面板 - small */
[data-font-size="small"] .card { padding: var(--sp-md); }
[data-font-size="small"] .card__title { font-size: var(--fs-card-title); }
[data-font-size="small"] .panel__row { gap: 6px; margin-bottom: 8px; }
[data-font-size="small"] .panel__note { font-size: 12px; }

/* 按钮 - small */
[data-font-size="small"] .btn { font-size: var(--fs-btn); padding: 6px 14px; }
[data-font-size="small"] .btn--lg { font-size: 14px; padding: 8px 20px; }
[data-font-size="small"] .btn--small { font-size: 11px; padding: 3px 9px; }

/* 输入控件 - small */
[data-font-size="small"] .input { font-size: var(--fs-input); padding: 7px 10px; }
[data-font-size="small"] .label { font-size: var(--fs-label); }
[data-font-size="small"] .select { font-size: var(--fs-input); padding: 6px 10px; }

/* 标签 - small */
[data-font-size="small"] .chip { font-size: var(--fs-chip); padding: 2px 8px; }

/* 课堂区域 - small */
[data-font-size="small"] .classroom__page { font-size: 12px; }
[data-font-size="small"] .classroom__fs-text { font-size: 12px; }
[data-font-size="small"] .classroom__bar { padding: 8px 12px; gap: 8px; }

/* 实验控制台 - small */
[data-font-size="small"] .experiment-controls { padding: var(--sp-md); }
[data-font-size="small"] .experiment-controls__title { font-size: var(--fs-card-title); }
[data-font-size="small"] .experiment-ctrl__label { font-size: 12px; }
[data-font-size="small"] .experiment-info__item { font-size: 12px; }

/* 闯关区域 - small */
[data-font-size="small"] .station__badge { font-size: 13px; padding: 3px 12px; }
[data-font-size="small"] .station__head h2 { font-size: var(--fs-h2); }
[data-font-size="small"] .station__desc { font-size: 13px; }
[data-font-size="small"] .nav__btn { font-size: 12px; padding: 5px 10px; }
[data-font-size="small"] .hero__title { font-size: var(--fs-h1); }
[data-font-size="small"] .hero__lead { font-size: var(--fs-hero-sub); }

/* 小黄鸭 - small */
[data-font-size="small"] .story__title { font-size: var(--fs-card-title); }
[data-font-size="small"] .story__list li { font-size: 13px; }
[data-font-size="small"] .story__qBody { font-size: 13px; }
[data-font-size="small"] .story__qTitle { font-size: 14px; }

/* 拖拽分类 - small */
[data-font-size="small"] .bin__title { font-size: 14px; }
[data-font-size="small"] .bin__hint { font-size: 11px; }

/* 地球空调 - small */
[data-font-size="small"] .ac__label { font-size: 12px; }
[data-font-size="small"] .meter__title { font-size: 12px; }
[data-font-size="small"] .meter__val { font-size: 12px; }

/* 测验 - small */
[data-font-size="small"] .quiz-actions { gap: 8px; }
[data-font-size="small"] #quiz .q { font-size: 14px; }
[data-font-size="small"] #quiz .opt { font-size: 13px; padding: 6px 10px; }

/* 通关卡 - small */
[data-font-size="small"] .badge-card__title { font-size: 18px; }
[data-font-size="small"] .badge-card__msg { font-size: 13px; }
[data-font-size="small"] .badge-card__ribbon { font-size: 14px; }

/* 数据库面板 - small */
[data-font-size="small"] .db-header__title { font-size: var(--fs-h2); }
[data-font-size="small"] .db-header__sub { font-size: 12px; }
[data-font-size="small"] .db-search { font-size: var(--fs-input); padding: 6px 10px; }
[data-font-size="small"] .db-info__title { font-size: var(--fs-card-title); }
[data-font-size="small"] .db-info__desc { font-size: 13px; }
[data-font-size="small"] .db-info__fact { font-size: 12px; }
[data-font-size="small"] .db-quiz__q { font-size: 14px; }
[data-font-size="small"] .db-quiz__title { font-size: var(--fs-card-title); }
[data-font-size="small"] .db-quiz__counter { font-size: 12px; }

/* 智能问答 - small */
[data-font-size="small"] .qa-header { padding: 10px 14px; }
[data-font-size="small"] .qa-header__title { font-size: 18px; }
[data-font-size="small"] .qa-avatar { width: 42px; height: 42px; font-size: 22px; }
[data-font-size="small"] .qa-bubble { font-size: 13px; padding: 8px 14px; }
[data-font-size="small"] .qa-input { font-size: 13px; padding: 9px 14px; }
[data-font-size="small"] .qa-send { width: 36px; height: 36px; font-size: 14px; }
[data-font-size="small"] .qa-new-chat-btn { font-size: 11px; padding: 4px 10px; }
[data-font-size="small"] .qa-msg__time { font-size: 10px; }

/* 设置面板 - small */
[data-font-size="small"] .settings__title { font-size: var(--fs-h2); }
[data-font-size="small"] .settings__sub { font-size: 13px; }
[data-font-size="small"] .settings-card__title { font-size: var(--fs-card-title); }
[data-font-size="small"] .settings-card__hint { font-size: 12px; }
[data-font-size="small"] .settings-font__btn { font-size: 13px; padding: 6px 12px; }
[data-font-size="small"] .theme-swatch__label { font-size: 12px; }

/* 欢迎界面 - small */
[data-font-size="small"] .intro-welcome-card { padding: var(--sp-lg); }
[data-font-size="small"] .intro-welcome-card__eyebrow { font-size: 13px; }
[data-font-size="small"] .intro-welcome-card__title { font-size: var(--fs-h1); }
[data-font-size="small"] .intro-welcome-card__text { font-size: var(--fs-hero-sub); }
[data-font-size="small"] .intro-welcome-card__btn { font-size: var(--fs-btn); padding: 8px 20px; }

/* 脚注 - small */
[data-font-size="small"] .footer__title { font-size: 14px; }
[data-font-size="small"] .footer__sub { font-size: 11px; }

/* 快捷导航 - small */
[data-font-size="small"] .quick-fish-nav__btn { font-size: 12px; padding: 6px 14px; }

/* 登录界面 - small */
[data-font-size="small"] .porthole__title { font-size: var(--fs-h1); }
[data-font-size="small"] .porthole__sub { font-size: 13px; }
[data-font-size="small"] .porthole__tab { font-size: 13px; padding: 6px 14px; }
[data-font-size="small"] .porthole .input { font-size: 13px; padding: 8px 12px; }
[data-font-size="small"] .porthole__guest { font-size: 12px; padding: 6px; }
[data-font-size="small"] .porthole__msg { font-size: 12px; }
[data-font-size="small"] .porthole__pane { gap: 6px; }

/* 实验按钮 - small */
[data-font-size="small"] .experiment-btn--water,
[data-font-size="small"] .experiment-btn--oil { font-size: 12px; padding: 5px 10px; }

/* ===== 大字体专属调整 ===== */
[data-font-size="large"] .app-header { padding: 14px 24px; }
[data-font-size="large"] .app-header__title { font-size: var(--fs-h2); }
[data-font-size="large"] .userbar { font-size: 16px; gap: 12px; }
[data-font-size="large"] .userbar__name { font-size: 17px; }
[data-font-size="large"] .userbar .btn { font-size: 14px; padding: 6px 16px; }

/* 侧边导航 - large */
[data-font-size="large"] .side-rail__toggle { width: 60px; padding: 10px 6px; }
[data-font-size="large"] .side-nav__item { padding: 14px 10px; gap: 8px; }
[data-font-size="large"] .side-nav__text { font-size: var(--fs-side); }
[data-font-size="large"] .side-nav__icon svg { width: 24px; height: 24px; }

/* 卡片与面板 - large */
[data-font-size="large"] .card { padding: var(--sp-xl); }
[data-font-size="large"] .card__title { font-size: var(--fs-card-title); }
[data-font-size="large"] .panel__row { gap: 12px; margin-bottom: 14px; }
[data-font-size="large"] .panel__note { font-size: 15px; line-height: 1.7; }

/* 按钮 - large */
[data-font-size="large"] .btn { font-size: var(--fs-btn); padding: 10px 22px; }
[data-font-size="large"] .btn--lg { font-size: 18px; padding: 14px 32px; }
[data-font-size="large"] .btn--small { font-size: 14px; padding: 5px 14px; }

/* 输入控件 - large */
[data-font-size="large"] .input { font-size: var(--fs-input); padding: 12px 16px; }
[data-font-size="large"] .label { font-size: var(--fs-label); }
[data-font-size="large"] .select { font-size: var(--fs-input); padding: 10px 14px; }

/* 标签 - large */
[data-font-size="large"] .chip { font-size: var(--fs-chip); padding: 4px 12px; }

/* 课堂区域 - large */
[data-font-size="large"] .classroom__page { font-size: 15px; }
[data-font-size="large"] .classroom__fs-text { font-size: 15px; }
[data-font-size="large"] .classroom__bar { padding: 14px 20px; gap: 14px; }

/* 实验控制台 - large */
[data-font-size="large"] .experiment-controls { padding: var(--sp-xl); }
[data-font-size="large"] .experiment-controls__title { font-size: var(--fs-card-title); }
[data-font-size="large"] .experiment-ctrl__label { font-size: 15px; }
[data-font-size="large"] .experiment-info__item { font-size: 15px; }

/* 闯关区域 - large */
[data-font-size="large"] .station__badge { font-size: 16px; padding: 6px 18px; }
[data-font-size="large"] .station__head h2 { font-size: var(--fs-h2); }
[data-font-size="large"] .station__desc { font-size: 17px; line-height: 1.8; }
[data-font-size="large"] .nav__btn { font-size: 15px; padding: 8px 16px; }
[data-font-size="large"] .hero__title { font-size: var(--fs-h1); }
[data-font-size="large"] .hero__lead { font-size: var(--fs-hero-sub); line-height: 1.8; }

/* 小黄鸭 - large */
[data-font-size="large"] .story__title { font-size: var(--fs-card-title); }
[data-font-size="large"] .story__list li { font-size: 16px; line-height: 1.8; }
[data-font-size="large"] .story__qBody { font-size: 16px; line-height: 1.7; }
[data-font-size="large"] .story__qTitle { font-size: 17px; }

/* 拖拽分类 - large */
[data-font-size="large"] .bin__title { font-size: 17px; }
[data-font-size="large"] .bin__hint { font-size: 14px; }

/* 地球空调 - large */
[data-font-size="large"] .ac__label { font-size: 15px; }
[data-font-size="large"] .meter__title { font-size: 15px; }
[data-font-size="large"] .meter__val { font-size: 15px; }

/* 测验 - large */
[data-font-size="large"] .quiz-actions { gap: 14px; }
[data-font-size="large"] #quiz .q { font-size: 17px; line-height: 1.7; }
[data-font-size="large"] #quiz .opt { font-size: 16px; padding: 10px 16px; }

/* 通关卡 - large */
[data-font-size="large"] .badge-card__title { font-size: 24px; }
[data-font-size="large"] .badge-card__msg { font-size: 16px; }
[data-font-size="large"] .badge-card__ribbon { font-size: 18px; }

/* 数据库面板 - large */
[data-font-size="large"] .db-header__title { font-size: var(--fs-h2); }
[data-font-size="large"] .db-header__sub { font-size: 15px; }
[data-font-size="large"] .db-search { font-size: var(--fs-input); padding: 10px 14px; }
[data-font-size="large"] .db-info__title { font-size: var(--fs-card-title); }
[data-font-size="large"] .db-info__desc { font-size: 16px; line-height: 1.7; }
[data-font-size="large"] .db-info__fact { font-size: 15px; }
[data-font-size="large"] .db-quiz__q { font-size: 17px; line-height: 1.7; }
[data-font-size="large"] .db-quiz__title { font-size: var(--fs-card-title); }
[data-font-size="large"] .db-quiz__counter { font-size: 14px; }

/* 智能问答 - large */
[data-font-size="large"] .qa-header { padding: 16px 24px; }
[data-font-size="large"] .qa-header__title { font-size: 26px; }
[data-font-size="large"] .qa-avatar { width: 64px; height: 64px; font-size: 32px; }
[data-font-size="large"] .qa-bubble { font-size: 16px; padding: 12px 20px; }
[data-font-size="large"] .qa-input { font-size: 16px; padding: 14px 18px; }
[data-font-size="large"] .qa-send { width: 46px; height: 46px; font-size: 18px; }
[data-font-size="large"] .qa-new-chat-btn { font-size: 14px; padding: 6px 16px; }
[data-font-size="large"] .qa-msg__time { font-size: 12px; }
[data-font-size="large"] .qa-badge { font-size: 13px; padding: 3px 12px; }

/* 设置面板 - large */
[data-font-size="large"] .settings__title { font-size: var(--fs-h2); }
[data-font-size="large"] .settings__sub { font-size: 16px; }
[data-font-size="large"] .settings-card__title { font-size: var(--fs-card-title); }
[data-font-size="large"] .settings-card__hint { font-size: 15px; }
[data-font-size="large"] .settings-font__btn { font-size: 16px; padding: 10px 20px; }
[data-font-size="large"] .theme-swatch__label { font-size: 15px; }

/* 欢迎界面 - large */
[data-font-size="large"] .intro-welcome-card { padding: var(--sp-xl); }
[data-font-size="large"] .intro-welcome-card__eyebrow { font-size: 17px; }
[data-font-size="large"] .intro-welcome-card__title { font-size: var(--fs-h1); }
[data-font-size="large"] .intro-welcome-card__text { font-size: var(--fs-hero-sub); line-height: 1.9; }
[data-font-size="large"] .intro-welcome-card__btn { font-size: var(--fs-btn); padding: 14px 32px; }

/* 脚注 - large */
[data-font-size="large"] .footer__title { font-size: 18px; }
[data-font-size="large"] .footer__sub { font-size: 14px; }

/* 快捷导航 - large */
[data-font-size="large"] .quick-fish-nav__btn { font-size: 15px; padding: 10px 22px; }

/* 登录界面 - large */
[data-font-size="large"] .porthole__title { font-size: var(--fs-h1); }
[data-font-size="large"] .porthole__sub { font-size: 16px; }
[data-font-size="large"] .porthole__tab { font-size: 16px; padding: 10px 20px; }
[data-font-size="large"] .porthole .input { font-size: 16px; padding: 12px 16px; }
[data-font-size="large"] .porthole__guest { font-size: 15px; padding: 10px; }
[data-font-size="large"] .porthole__msg { font-size: 14px; }
[data-font-size="large"] .porthole__pane { gap: 12px; }

/* 实验按钮 - large */
[data-font-size="large"] .experiment-btn--water,
[data-font-size="large"] .experiment-btn--oil { font-size: 15px; padding: 8px 18px; }

/* === medium = 默认，无需额外覆盖 === */

/* ========================================================================
   知识图谱面板 (Knowledge Graph Panel)
   ======================================================================== */

/* ---- 面板约束到视口高度，确保详情面板可滚动 ---- */
.app-panel[data-panel="kg"].app-panel--active{
  display:flex;
  flex-direction:column;
  height:calc(100vh - 58px);
  min-height:0;
  overflow:hidden;
  padding:0;
}
body:has(#panelKg.app-panel--active){
  overflow:hidden;
}

.kg-layout{display:flex;flex-direction:column;flex:1;min-height:0;gap:0}

/* ---- 工具栏 ---- */
.kg-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--card-bg);border:1px solid var(--stroke);border-radius:var(--radius) var(--radius) 0 0;flex-wrap:wrap}
.kg-toolbar__left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kg-toolbar__right{display:flex;align-items:center;gap:10px}
.kg-toolbar__btn{padding:6px 12px;border:1px solid var(--stroke);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-color);font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s;white-space:nowrap}
.kg-toolbar__btn:hover{background:var(--brand);color:#0A0F1F;border-color:var(--brand)}
.kg-search{width:260px;max-width:100%;padding:7px 14px;border:1px solid var(--stroke);border-radius:var(--radius-pill);background:var(--card2);color:var(--text-color);font-size:13px;font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s}
.kg-search:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.2)}

/* 图例 — 简洁色点 */
.kg-legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.kg-legend__item{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap}
.kg-legend__dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}

/* ---- 画布区域（全宽） ---- */
.kg-body{display:flex;flex:1;min-height:0;background:var(--card-bg);border:1px solid var(--stroke);border-top:none;border-radius:0 0 var(--radius) var(--radius);overflow:hidden}
.kg-canvas-wrap{position:relative;flex:1;min-width:0;overflow:hidden}
.kg-cy{width:100%;height:100%;min-height:300px}
.kg-hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);padding:7px 18px;background:rgba(0,0,0,.55);color:#e0e0e0;font-size:11px;border-radius:var(--radius-pill);pointer-events:none;white-space:nowrap;backdrop-filter:blur(8px);transition:opacity .3s}

/* ---- 详情浮层（覆盖在画布右侧） ---- */
.kg-detail{position:absolute;top:0;right:0;bottom:0;width:360px;max-width:90vw;background:rgba(15,23,42,.94);border-left:1px solid var(--stroke);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow-y:auto;overscroll-behavior-y:contain;z-index:10;box-shadow:-8px 0 40px rgba(0,0,0,.4);animation:kg-detail-slide .28s cubic-bezier(.22,.61,.36,1);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.kg-detail::-webkit-scrollbar{width:6px}
.kg-detail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:3px}
.kg-detail::-webkit-scrollbar-track{background:transparent}
@keyframes kg-detail-slide{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
.kg-detail__close{position:sticky;top:10px;float:right;margin-right:10px;width:34px;height:34px;border:none;border-radius:50%;background:var(--surface);color:var(--text-color);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:3}
.kg-detail__close:hover{background:var(--danger);color:#fff;transform:rotate(90deg)}
.kg-detail__content{padding:18px 18px 24px;clear:both}
.kg-detail__icon{font-size:42px;line-height:1;margin-bottom:6px}
.kg-detail__name{font-size:22px;font-weight:900;color:var(--text-color);margin:0 0 6px;padding-right:40px;line-height:1.25}
.kg-detail__badge{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:var(--radius-pill);font-size:12px;font-weight:700;margin-bottom:14px}
.kg-detail__badge-dot{width:9px;height:9px;border-radius:50%}
.kg-detail__desc{font-size:13px;line-height:1.8;color:var(--text-color);margin-bottom:14px;padding:12px 14px;background:rgba(255,255,255,.04);border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.06)}
.kg-detail__section{margin-bottom:12px}
.kg-detail__section-title{font-size:12px;font-weight:800;color:var(--muted);margin:0 0 8px;text-transform:uppercase;letter-spacing:.5px}
.kg-detail__rels{display:flex;flex-direction:column;gap:4px}
.kg-detail__rel{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--radius-sm);background:rgba(255,255,255,.03);font-size:13px;cursor:pointer;transition:all .2s;border:1px solid rgba(255,255,255,.05)}
.kg-detail__rel:hover{background:rgba(var(--brand-rgb),.1);border-color:var(--brand);transform:translateX(4px)}
.kg-detail__rel-type{font-size:10px;font-weight:700;padding:2px 7px;border-radius:var(--radius-pill);white-space:nowrap;flex-shrink:0;color:#fff}
.kg-detail__rel-name{font-weight:600;color:var(--text-color)}
.kg-detail__rel-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0}
.kg-detail__actions{display:flex;flex-direction:column;gap:7px;margin-top:16px}
.kg-detail__btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 14px;border:1px solid var(--stroke);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-color);font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s}
.kg-detail__btn:hover{background:var(--brand);color:#0A0F1F;border-color:var(--brand);transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--brand-rgb),.25)}
.kg-detail__btn--ai:hover{background:#8B5CF6;border-color:#8B5CF6;color:#fff}
.kg-detail__btn--disabled{opacity:.4;cursor:not-allowed}
.kg-detail__btn--disabled:hover{background:var(--surface);color:var(--text-color);border-color:var(--stroke);transform:none;box-shadow:none}

/* 连线提示浮层（相对于 canvas-wrap 定位） */
.kg-edge-tip{position:absolute;z-index:100;padding:10px 16px;background:var(--card2);border:1px solid var(--brand);border-radius:var(--radius-sm);box-shadow:var(--shadow);font-size:12px;max-width:280px;pointer-events:none;animation:kg-tip-in .2s ease}
@keyframes kg-tip-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.kg-edge-tip__type{font-weight:800;color:var(--brand);margin-bottom:4px;font-size:13px}

/* ---- 辐射式布局：环 / 轴线 / 标签 ---- */
.kg-ring-svg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:visible;
  will-change:transform;  /* GPU 加速，缩放/平移时 SVG viewBox 变化更流畅 */
}
.kg-ring__circle{
  fill:none;
  stroke:rgba(14,165,233,.35);    /* 中蓝色虚线圆，更醒目 */
  stroke-width:1.5;
  stroke-dasharray:5 7;
}
.kg-ring__axis{
  stroke:rgba(148,163,184,.28);   /* 浅灰十字 */
  stroke-width:1;
  stroke-dasharray:3 9;
}
.kg-ring__label{
  font-family:system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size:18px;
  font-weight:700;
  fill:rgba(14,165,233,.65);
  letter-spacing:2px;
  user-select:none;
}
.kg-ring__halo{
  fill:rgba(14,165,233,.10);    /* 浅蓝半透明 */
  stroke:rgba(14,165,233,.25);
  stroke-width:1;
  stroke-dasharray:2 4;
}
.kg-ring__halo[data-layer="1"]{fill:rgba(14,165,233,.18);stroke:rgba(14,165,233,.45);stroke-width:1.5}
.kg-ring__halo[data-layer="2"]{fill:rgba(14,165,233,.10);stroke:rgba(14,165,233,.30);stroke-width:1.2}
.kg-ring__halo[data-layer="3"]{fill:rgba(14,165,233,.05);stroke:rgba(14,165,233,.18);stroke-width:1}

/* ---- 图例：关系类型 ---- */
.kg-legend__title{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-right:4px}
.kg-legend__item--rel{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:var(--radius-pill);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);cursor:pointer}
.kg-legend__line{display:inline-block;width:22px;height:2px;background:var(--c);position:relative;top:-1px}
.kg-legend__line--solid{background:var(--c)}
.kg-legend__line--dashed{background:repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 9px);height:2px}
.kg-legend__line--dotted{background:repeating-linear-gradient(90deg, var(--c) 0 1.5px, transparent 1.5px 5px);height:2px}
.kg-legend__line--double{background:linear-gradient(to bottom, var(--c) 0 40%, transparent 40% 60%, var(--c) 60% 100%);height:5px;top:0}
.kg-legend__lbl{font-size:11px;font-weight:700;color:var(--text-color)}
.kg-legend__sep{display:inline-block;width:1px;height:16px;background:var(--stroke);margin:0 6px;opacity:.5}

/* ---- 列标题节点视觉（cy 内部样式覆盖）---- */
/* Cytoscape 内的样式由 JS style 数组控制，这里只留兜底 */

/* ---- 响应式 ---- */
@media (max-width:1024px){.kg-detail{width:300px}.kg-search{width:180px}.kg-toolbar__btn{padding:5px 10px;font-size:11px}}
@media (max-width:768px){.kg-body{min-height:0}.kg-cy{min-height:300px}.kg-detail{top:auto;right:0;bottom:0;left:0;width:100%;max-width:100%;max-height:55vh;border-left:none;border-top:1px solid var(--stroke);border-radius:var(--radius) var(--radius) 0 0;box-shadow:0 -8px 40px rgba(0,0,0,.4)}.kg-legend{display:none}.kg-toolbar__left{width:100%}.kg-search{flex:1;min-width:120px}.kg-toolbar__btns{margin-left:auto}.kg-toolbar__btn{padding:5px 10px;font-size:11px}.kg-hint{font-size:10px;bottom:8px;padding:5px 14px}}

/* ---- 字体适应 ---- */
[data-font-size="small"] .kg-detail__name{font-size:18px}
[data-font-size="small"] .kg-detail__desc{font-size:11px}
[data-font-size="small"] .kg-detail__btn{font-size:11px;padding:8px 12px}
[data-font-size="small"] .kg-search{font-size:11px}
[data-font-size="small"] .kg-cy{min-height:200px}
[data-font-size="small"] .kg-body{min-height:0}
[data-font-size="large"] .kg-detail__name{font-size:26px}
[data-font-size="large"] .kg-detail__desc{font-size:15px;line-height:2}
[data-font-size="large"] .kg-detail__btn{font-size:15px;padding:12px 18px}
[data-font-size="large"] .kg-search{font-size:15px}
[data-font-size="large"] .kg-legend__item{font-size:12px}