/**
 * Campus skin — classroom look for 木水物理实验室.
 * Loaded on all pages (local + production).
 */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;600;700;800&family=ZCOOL+XiaoWei&display=swap");

html.campus-skin {
  --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "ZCOOL XiaoWei", "Noto Sans SC", serif;
  --radius-card: 16px;
  --campus-blue: #1d4ed8;
  --campus-teal: #0f766e;
  --shadow: 0 12px 28px rgb(15 23 42 / 0.1);
  /* Theme menu must sit above experiment toolbars / stage controls. */
  --z-dropdown: 1400;
}

html.campus-skin,
html.campus-skin[data-theme="warm"],
html.campus-skin[data-theme="cool"] {
  --paper: #eef3f9;
  --paper-deep: #e2eaf4;
  --panel: #ffffff;
  --ink: #0f172a;
  --ink-stroke: #1e293b;
  --muted-ink: #475569;
  --line: #334155;
  --line-soft: #cbd5e1;
  --green: #0f766e;
  --green-soft: #ccfbf1;
  --red: #b91c1c;
  --stage: #ffffff;
  --stage-deep: #eef3f9;
  --apparatus-bg: #f8fafc;
  --paper-rgb: 238 243 249;
  --ink-rgb: 15 23 42;
  --panel-rgb: 255 255 255;
  --green-rgb: 15 118 110;
  --green-soft-rgb: 204 251 241;
  --line-rgb: 51 65 85;
  --line-soft-rgb: 203 213 225;
  --grid-rgb: 29 78 216;
  --shadow-rgb: 15 23 42;
  --paper-deep-rgb: 226 234 244;
  --stage-rgb: 255 255 255;
}

html.campus-skin[data-theme="cyan"] {
  --paper: #e8f4f3;
  --paper-deep: #d5ecea;
  --panel: #ffffff;
  --ink: #134e4a;
  --muted-ink: #3f6f6a;
  --line: #115e59;
  --line-soft: #b6d9d4;
  --green: #0f766e;
  --green-soft: #ccfbf1;
  --stage: #ffffff;
  --apparatus-bg: #f0fdfa;
}

html.campus-skin[data-theme="dark"] {
  --paper: #0b1220;
  --paper-deep: #070d18;
  --panel: #152238;
  --ink: #e8eef8;
  --muted-ink: #9db0c9;
  --line: #3b4d6b;
  --line-soft: #2a3b57;
  --green: #2dd4bf;
  --green-soft: #134e4a;
  --stage: #101a2c;
  --apparatus-bg: #101a2c;
  --paper-rgb: 11 18 32;
  --ink-rgb: 232 238 248;
  --panel-rgb: 21 34 56;
  --green-rgb: 45 212 191;
  --line-soft-rgb: 42 59 87;
  --grid-rgb: 96 165 250;
}

html.campus-skin body {
  font-family: var(--font-body);
  background:
    radial-gradient(1200px 600px at 12% -10%, rgb(29 78 216 / 0.12), transparent 55%),
    radial-gradient(900px 500px at 100% 0%, rgb(15 118 110 / 0.1), transparent 50%),
    linear-gradient(rgb(var(--grid-rgb) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--grid-rgb) / 0.05) 1px, transparent 1px),
    var(--paper);
  background-size: auto, auto, 28px 28px, 28px 28px, auto;
  color: var(--ink);
}

html.campus-skin h1,
html.campus-skin h2,
html.campus-skin [class*="brand"],
html.campus-skin [class*="courseCard"] h2 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

html.campus-skin [class*="foundation_page"] {
  row-gap: clamp(14px, 2vh, 22px);
  padding: clamp(16px, 2vh, 22px) clamp(18px, 1.6vw, 32px) 14px;
}

/* Keep theme / status menus above workspace controls */
html.campus-skin [class*="foundation_topbar"],
html.campus-skin [class*="topbar"],
html.campus-skin header[class*="topbar"] {
  position: relative;
  z-index: 1400;
  overflow: visible !important;
}

html.campus-skin [class*="statusGroup"] {
  position: relative;
  z-index: 1401;
}

html.campus-skin aside[aria-label] {
  border-radius: 18px !important;
  border: 1px solid var(--line-soft) !important;
  background: color-mix(in srgb, var(--panel) 92%, white) !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden;
}

html.campus-skin [class*="courseCard"] {
  background: linear-gradient(135deg, #1d4ed8 0%, #0f766e 100%) !important;
  color: #f8fafc !important;
  border: none !important;
  border-radius: 0 !important;
}

html.campus-skin [class*="courseCard"] h2,
html.campus-skin [class*="courseCard"] p,
html.campus-skin [class*="courseCard"] span,
html.campus-skin [class*="courseCard"] strong {
  color: #f8fafc !important;
}

html.campus-skin [class*="courseCardStat"] {
  background: rgb(255 255 255 / 0.16) !important;
  border-radius: 12px !important;
  border: 1px solid rgb(255 255 255 / 0.22) !important;
}

html.campus-skin [class*="chapterMain"],
html.campus-skin button[aria-label^="模块"] {
  border-radius: 12px !important;
  border: 1px solid var(--line-soft) !important;
  background: var(--panel) !important;
  box-shadow: none !important;
}

html.campus-skin button[aria-label^="模块"][aria-expanded="true"],
html.campus-skin button[aria-current="page"][aria-label^="模块"] {
  border-color: color-mix(in srgb, #1d4ed8 45%, var(--line-soft)) !important;
  box-shadow: inset 4px 0 0 #1d4ed8 !important;
  background: #eff6ff !important;
}

html.campus-skin[data-theme="dark"] button[aria-label^="模块"][aria-expanded="true"],
html.campus-skin[data-theme="dark"] button[aria-current="page"][aria-label^="模块"] {
  background: #172554 !important;
}

html.campus-skin [data-experiment-slug],
html.campus-skin [class*="experimentLink"] {
  border-radius: 12px !important;
  border: 1px solid var(--line-soft) !important;
  background: var(--panel) !important;
}

html.campus-skin [data-experiment-slug][aria-current="page"],
html.campus-skin [class*="experimentLinkActive"] {
  background: #ecfeff !important;
  border-color: color-mix(in srgb, #0f766e 40%, var(--line-soft)) !important;
  box-shadow: inset 4px 0 0 #0f766e !important;
}

html.campus-skin[data-theme="dark"] [data-experiment-slug][aria-current="page"],
html.campus-skin[data-theme="dark"] [class*="experimentLinkActive"] {
  background: #134e4a !important;
}

html.campus-skin main,
html.campus-skin [class*="Workspace"],
html.campus-skin [class*="overview"] {
  border-radius: 18px;
  position: relative;
  z-index: 1;
}

html.campus-skin [class*="experimentHeader"] h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
}

html.campus-skin button[class*="primary"],
html.campus-skin [class*="StartButton"],
html.campus-skin .lizi-gate-primary {
  background: #0f766e !important;
  color: #fff !important;
  border-radius: 12px !important;
}

html.campus-skin [class*="ampereReplicaWorkspace"],
html.campus-skin [style*="dashed"] {
  border-style: solid !important;
}

html.campus-skin header,
html.campus-skin [class*="topBar"],
html.campus-skin [class*="TopBar"] {
  backdrop-filter: blur(8px);
}

#lizi-access-overlay .lizi-gate-card,
#lizi-access-page-block .lizi-gate-card {
  border-radius: 18px;
  border-color: var(--line-soft);
}