@charset "UTF-8";
/* ==================================================================
   秋君视界 · 双模主题层  qj-theme.css  (版本 v=1)
   ------------------------------------------------------------------
   双模结构:
     [门面层·暖米学堂] 学科列表 / 详情 / 目录 / 导航 / 表单等壳层界面
       纸面底 #faf9f5, 卡面 #ffffff 或 #f0eee6, 墨色 #1f1e1d,
       次要文字 #6b6862, 描边 rgba(31,30,29,0.12),
       主色 黏土橙 #cc785c, 卡片圆角 14px, 按钮圆角 10px,
       软阴影 0 6px 24px rgba(31,30,29,0.06), 大标题衬线字
     [沉浸层·深空实验] 课件舞台与引擎容器, 保持深色沉浸, 不做改亮:
       canvas / video / iframe / [class*="stage"] / [class*="simul"]
       / [class*="sim-"] / [class*="engine"] / [class*="sandbox"]
   ------------------------------------------------------------------
   安全约束(避免破坏 React 应用):
     1. 追加式覆盖层: 全部主题规则用 :where() 包裹, 特异性为 0,
        不会压过 React/Tailwind 运行时注入的任何工具类;
     2. 仅 html 与 body 底色用元素级选择器, 依靠本文件在 head 末尾
        加载的顺序覆盖各 app 启动内联的深色底, 不用 important;
     3. 沉浸层容器在每条主题规则中以 :not() 链排除, 末尾另有
        「沉浸层保护」段把可能渗入的壳层样式还原为浏览器默认值;
     4. 所有颜色/圆角/阴影均为写死的字面值, 不使用百分比写法。
   ================================================================== */

/* ---------- 0. 主题令牌 ---------- */
:root {
  --qj-paper: #faf9f5;
  --qj-card: #ffffff;
  --qj-card-alt: #f0eee6;
  --qj-ink: #1f1e1d;
  --qj-ink-soft: #6b6862;
  --qj-line: rgba(31, 30, 29, 0.12);
  --qj-clay: #cc785c;
  --qj-clay-tint: rgba(204, 120, 92, 0.14);
  --qj-shadow: 0 6px 24px rgba(31, 30, 29, 0.06);
  --qj-radius-card: 14px;
  --qj-radius-btn: 10px;
}

/* ---------- 1. 暖米纸面底色(门面层地基) ----------
   body 文字色保持各 app 原值, 避免改变沉浸层内部继承的文字颜色。 */
html {
  background-color: #faf9f5;
}
body {
  background-color: #faf9f5;
}
/* React 挂载容器: 铺暖米底; 组件内部自带底色的区域不受影响 */
#root {
  background-color: #faf9f5;
}

/* ---------- 2. 主题令牌桥接 ----------
   物理(初/高中)壳层沿用 --sg-* 变量体系, 映射到暖米学堂色板;
   实验舞台(sim-* / engine-* / stage 区域)自带深色底, 不受影响。 */
:root {
  --sg-gold: #cc785c;
  --sg-accent: #cc785c;
  --sg-black: #1f1e1d;
  --sg-text-muted: #6b6862;
  --sg-slate-light: #faf9f5;
  --sg-slate-border: rgba(31, 30, 29, 0.12);
  --sg-accent-glow: rgba(204, 120, 92, 0.15);
}

/* ---------- 3. 大标题衬线(门面层) ---------- */
:where(h1, h2, [class*="headline"], [class*="page-title"], [class*="hero-title"], [class*="app-title"]):not(canvas):not(video):not(iframe):not([class*="stage"]):not([class*="simul"]):not([class*="sim-"]):not([class*="engine"]):not([class*="sandbox"]) {
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}

/* ---------- 4. 顶栏 / 导航(白底, 墨色文字, 细描边) ---------- */
:where(header, nav, [class*="topbar"], [class*="top-bar"], [class*="navbar"], [class*="header"], [class*="tabbar"], [class*="bottom-nav"]):not(canvas):not(video):not(iframe):not([class*="stage"]):not([class*="simul"]):not([class*="sim-"]):not([class*="engine"]):not([class*="sandbox"]) {
  background-color: #ffffff;
  color: #1f1e1d;
  border-bottom: 1px solid rgba(31, 30, 29, 0.12);
}

/* ---------- 5. 卡片 / 列表项(白底, 14px 圆角, 软阴影, 细描边) ---------- */
:where([class*="card"], [class*="item"], [class*="tile"], [class*="entry"], [class*="chapter"], [class*="lesson"], [class*="unit"], [class*="panel"]):not(canvas):not(video):not(iframe):not([class*="stage"]):not([class*="simul"]):not([class*="sim-"]):not([class*="engine"]):not([class*="sandbox"]) {
  background-color: #ffffff;
  color: #1f1e1d;
  border: 1px solid rgba(31, 30, 29, 0.12);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(31, 30, 29, 0.06);
}

/* ---------- 6. 标题墨色 / 次要文字(门面层文字层级) ---------- */
:where([class*="title"], [class*="heading"], [class*="name"]):not(canvas):not(video):not(iframe):not([class*="stage"]):not([class*="simul"]):not([class*="sim-"]):not([class*="engine"]):not([class*="sandbox"]) {
  color: #1f1e1d;
}
:where([class*="subtitle"], [class*="sub-title"], [class*="desc"], [class*="summary"], [class*="meta"], [class*="caption"], [class*="muted"], [class*="hint"], [class*="label"], time, small):not(canvas):not(video):not(iframe):not([class*="stage"]):not([class*="simul"]):not([class*="sim-"]):not([class*="engine"]):not([class*="sandbox"]) {
  color: #6b6862;
}

/* ---------- 7. 按钮(10px 圆角; 主按钮与选中态 黏土橙) ---------- */
:where(button, [class*="btn"], [class*="button"], [type="button"], [type="submit"]):not(canvas):not(video):not(iframe):not([class*="stage"]):not([class*="simul"]):not([class*="sim-"]):not([class*="engine"]):not([class*="sandbox"]) {
  border-radius: 10px;
}
:where([class*="btn-primary"], [class*="button-primary"], [class*="primary-btn"], [class*="cta"]):not(canvas):not(video):not(iframe):not([class*="stage"]):not([class*="simul"]):not([class*="sim-"]):not([class*="engine"]):not([class*="sandbox"]) {
  background-color: #cc785c;
  color: #ffffff;
}

/* ---------- 8. 筛选片 / 标签页(10px 圆角, 暖米面) ---------- */
:where([class*="chip"], [class*="tab"], [class*="pill"], [class*="segment"], [class*="filter"]):not(canvas):not(video):not(iframe):not([class*="stage"]):not([class*="simul"]):not([class*="sim-"]):not([class*="engine"]):not([class*="sandbox"]) {
  border-radius: 10px;
}

/* ---------- 9. 选中态 / 激活态(黏土橙强调) ---------- */
:where([class*="active"], [class*="selected"], [class*="current"], [class*="checked"], [aria-selected="true"], [aria-current="true"], [aria-current="page"], [aria-pressed="true"]):not(canvas):not(video):not(iframe):not([class*="stage"]):not([class*="simul"]):not([class*="sim-"]):not([class*="engine"]):not([class*="sandbox"]) {
  color: #cc785c;
}

/* ---------- 10. 表单控件(白底, 10px 圆角, 细描边) ---------- */
:where(input, textarea, select):not(canvas):not(video):not(iframe):not([class*="stage"]):not([class*="simul"]):not([class*="sim-"]):not([class*="engine"]):not([class*="sandbox"]) {
  background-color: #ffffff;
  color: #1f1e1d;
  border: 1px solid rgba(31, 30, 29, 0.12);
  border-radius: 10px;
}

/* ---------- 11. 物理壳层桥接(仅初/高中物理页加载 main.css 时生效;
     单类名选择器与 main.css 同特异性, 靠加载顺序取胜, 无 important) ---------- */
.header-premium {
  background-color: #ffffff;
  border-bottom: 1px solid rgba(31, 30, 29, 0.12);
}
.nav-link {
  color: #6b6862;
}
.nav-link:hover {
  color: #1f1e1d;
}
.nav-link.active {
  color: #cc785c;
  border-bottom-color: #cc785c;
}
.physics-catalog-card {
  background-color: #ffffff;
  color: #1f1e1d;
  border: 1px solid rgba(31, 30, 29, 0.12);
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(31, 30, 29, 0.06);
}
.physics-catalog-card .card-title {
  color: #1f1e1d;
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
}
.physics-catalog-card .card-subtitle,
.physics-catalog-card .card-formula {
  color: #6b6862;
}
.physics-catalog-card .card-tag {
  color: #cc785c;
}
.physics-catalog-card .card-btn {
  color: #cc785c;
  border-bottom-color: #cc785c;
}
.physics-catalog-category {
  background-color: #f0eee6;
  border-color: rgba(31, 30, 29, 0.12);
  color: #6b6862;
  border-radius: 10px;
}
.physics-catalog-category.is-active {
  background-color: #cc785c;
  border-color: #cc785c;
  color: #ffffff;
}
.exhibition-card {
  border-radius: 14px;
  border: 1px solid rgba(31, 30, 29, 0.12);
  box-shadow: 0 6px 24px rgba(31, 30, 29, 0.06);
}

/* ---------- 12. 沉浸层保护(深空实验) ----------
   以上任何壳层规则若渗入舞台容器内部, 在此还原为浏览器默认,
   使舞台内部保持其自身的深空沉浸观感; 已有明确样式的引擎元素
   特异性更高, 不受影响。 */
:where(canvas, video, iframe, [class*="stage"], [class*="simul"], [class*="sim-"], [class*="engine"], [class*="sandbox"]) :where(*) {
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  border-radius: 0;
  box-shadow: none;
}