/*
 * 全站外壳样式（导航、页脚、通用组件、Bootstrap 主题覆盖）。
 * 视觉：2026-10-25 定稿为“瑞士网格 × 孔版套印”；2026-10-31 按客户首页设计稿换成浅色、靛紫渐变、圆角卡片（只换取值与组件外观，结构不变）。
 *   纸张灰底；只用两种“油墨”：孔版蓝（文字、线条、主要信息）与荧光粉（强调、当前、进行中）；
 *   两色叠印处用 multiply 混出紫色；结构靠粗细线分隔，不用卡片、圆角与阴影。
 * 对比度：亮蓝 #0078BF 与荧光粉 #FF48B0 只用于色块、线条与大字（≥24px 粗体）；
 *   正文用深蓝 #00558A（6.7:1），次要文字 #2F5F86（5.7:1），小号粉色文字用 #C8006E（4.8:1）。
 * 旧变量名（--ink、--red、--indigo、--teal、--gold 等）全部映射到新配色，旧页面自动换色。
 */
:root {
  /* 2026-10-31 起按客户首页设计稿统一为浅色、靛紫渐变风格：变量名沿用原“孔版”命名，取值换成新配色，旧页面自动换色 */
  --riso-blue: #6366F1; --riso-pink: #D946EF;
  --paper: #F7F9FC; --paper-2: #FFFFFF;
  --ink: #0F172A;            /* 标题、粗字 */
  --ink-text: #334155;       /* 正文 */
  --ink-2: #475569;          /* 次要文字 */
  --ink-3: #64748B;          /* 弱化文字（≥4.5:1） */
  --pink-ink: #A21CAF;       /* 小号强调文字 */
  --pink-big: #C026D3;       /* 大号强调文字 */
  --line: #E2E8F0;           /* 细分隔线 */
  --line-2: #EEF1F7;
  --rule: #C7D2FE;           /* 结构线（浅靛） */
  --accent: #4F46E5;         /* 链接、按钮文字等需要对比度的靛色 */
  --grad: linear-gradient(135deg, #6366F1 0%, #8B5CF6 48%, #D946EF 100%);
  --dots-blue: radial-gradient(rgba(99, 102, 241, .45) 34%, transparent 36%);
  --dots-pink: radial-gradient(rgba(217, 70, 239, .6) 36%, transparent 38%);

  /* 旧变量映射 */
  --white: var(--paper-2);
  --red: var(--pink-ink); --red-d: #86198F; --red-t: #FAE8FF;
  --indigo: var(--accent); --indigo-t: #EEF2FF;
  --gold: var(--pink-ink); --gold-t: #FAE8FF;
  --teal: var(--riso-blue); --teal-t: #EEF2FF;
  --p1: var(--riso-blue); --p2: var(--riso-blue); --p3: var(--riso-blue); --p4: var(--riso-blue); --p5: var(--riso-blue); --p6: var(--riso-blue); --p7: var(--riso-blue);
  --font: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", system-ui, sans-serif;
  --font-num: "Space Grotesk", "Archivo", "Arial Narrow", var(--font);
  --r-s: 8px; --r-m: 12px; --r-l: 18px;
  --shadow: 0 4px 16px -10px rgba(15, 23, 42, .12);

  --bs-body-font-family: var(--font); --bs-body-color: var(--ink-text); --bs-body-bg: var(--paper);
  --bs-primary: var(--accent); --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: var(--accent); --bs-link-color-rgb: 79, 70, 229; --bs-link-hover-color: var(--pink-ink); --bs-link-hover-color-rgb: 162, 28, 175;
  --bs-border-color: var(--line); --bs-border-radius: 10px; --bs-border-radius-sm: 8px; --bs-border-radius-lg: 14px; --bs-border-radius-pill: 50rem;
  --bs-secondary-color: var(--ink-2); --bs-tertiary-color: var(--ink-3); --bs-emphasis-color: var(--ink);
}
html { background: var(--paper); }
body { font-family: var(--font); color: var(--ink-text); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6, b, strong { color: var(--ink); }
.num, .font-num { font-family: var(--font-num); font-stretch: 80%; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--pink-ink); }
:focus-visible { outline: 2px solid var(--pink-ink); outline-offset: 2px; }
::selection { background: rgba(255, 72, 176, .35); color: var(--ink); }
.text-muted, .text-secondary { color: var(--ink-3) !important; }
.text-danger { color: var(--pink-ink) !important; }
.text-success { color: var(--ink-text) !important; }
.text-warning { color: var(--pink-ink) !important; }
.text-info { color: var(--ink-text) !important; }

/* ---------- 套印工具类 ---------- */
.dots-blue { background-image: var(--dots-blue); background-size: 6px 6px; }
.dots-pink { background-image: var(--dots-pink); background-size: 7px 7px; }
.overprint { position: relative; display: inline-block; }
.overprint::before { content: attr(data-text); position: absolute; left: .045em; top: .03em; color: var(--riso-pink); mix-blend-mode: multiply; pointer-events: none; white-space: inherit; }
.overprint > span { position: relative; mix-blend-mode: multiply; }

/* ---------- Bootstrap 组件覆盖 ---------- */
.btn { border-radius: 0; font-weight: 700; letter-spacing: .02em; box-shadow: none !important; }
.btn-primary { --bs-btn-color: var(--paper); --bs-btn-bg: var(--ink-text); --bs-btn-border-color: var(--ink-text); --bs-btn-hover-color: var(--paper); --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-bg: var(--ink); --bs-btn-active-border-color: var(--ink); --bs-btn-disabled-color: var(--paper); --bs-btn-disabled-bg: #7FA2BB; --bs-btn-disabled-border-color: #7FA2BB; }
.btn-outline-primary { --bs-btn-color: var(--ink-text); --bs-btn-border-color: var(--ink-text); --bs-btn-hover-color: var(--paper); --bs-btn-hover-bg: var(--ink-text); --bs-btn-hover-border-color: var(--ink-text);
  --bs-btn-active-color: var(--paper); --bs-btn-active-bg: var(--ink); --bs-btn-active-border-color: var(--ink); }
.btn-success { --bs-btn-color: var(--paper); --bs-btn-bg: var(--ink-text); --bs-btn-border-color: var(--ink-text); --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); }
.btn-ink { --bs-btn-color: var(--paper); --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-hover-color: var(--paper); --bs-btn-hover-bg: var(--ink-text); --bs-btn-hover-border-color: var(--ink-text); }
.btn-pink { --bs-btn-color: var(--ink); --bs-btn-bg: var(--riso-pink); --bs-btn-border-color: var(--riso-pink); --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: #FF2FA2; --bs-btn-hover-border-color: #FF2FA2; }
.btn-outline-danger, .btn-outline-secondary, .btn-outline-info, .btn-outline-success, .btn-outline-dark { --bs-btn-color: var(--ink-text); --bs-btn-border-color: var(--line); --bs-btn-hover-color: var(--paper); --bs-btn-hover-bg: var(--ink-text); --bs-btn-hover-border-color: var(--ink-text); }
.text-primary { color: var(--pink-ink) !important; }
.bg-primary { background-color: var(--ink-text) !important; }
.card { border: 0; border-top: 2px solid var(--rule); border-radius: 0; box-shadow: none; background: transparent; }
.card-header { background: transparent; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--ink); padding-left: 0; padding-right: 0; }
.card-body { padding-left: 0; padding-right: 0; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--ink-3); --bs-breadcrumb-item-active-color: var(--ink-3); font-size: 14px; margin: 0; }
.modal-content { border: 2px solid var(--rule); border-radius: 0; box-shadow: none; background: var(--paper); }
/* 弹窗：浅色页头 + 左侧粉色竖条，标题粗黑；不再用深色/绿色页头 */
.modal-header, .modal-header.bg-primary, .modal-header.bg-success { position: relative; background: var(--paper) !important; color: var(--ink) !important; border-bottom: 2px solid var(--rule); padding: 14px 20px 12px 26px; }
.modal-header::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--riso-pink); }
.modal-header .modal-title { font-size: 18px; font-weight: 900; color: var(--ink) !important; }
.modal-header .modal-title i { display: none; }
.modal-header .modal-title .small { color: var(--ink-2); font-weight: 400; }
.modal-header .btn-close-white { filter: none; }
.modal-body { padding: 18px 20px; color: var(--ink-text); }
.modal .border.rounded, .modal .rounded { border-radius: 0 !important; }
.modal .border { border-color: var(--line) !important; }
.modal label.border:has(input:checked) { border-color: var(--ink-text) !important; box-shadow: inset 4px 0 0 var(--riso-blue); }
.badge.bg-primary-subtle, .badge.bg-light, .badge.bg-secondary-subtle { background: transparent !important; color: var(--ink-text) !important; box-shadow: inset 0 0 0 1px var(--riso-blue); font-weight: 700; }
.modal .alert { border: 0; border-left: 4px solid var(--riso-blue); background: var(--paper-2); color: var(--ink-text); }
.modal .alert-warning, .modal .alert-danger { border-left-color: var(--riso-pink); }
.modal .table-light, .modal .table-light th { background: transparent !important; }
.modal-footer { border-top: 1px solid var(--line); }
.modal-backdrop.show { opacity: .35; }
.form-control, .form-select { border-radius: 0; border: 1px solid var(--line); background-color: var(--paper-2); color: var(--ink); }
.form-control:focus, .form-select:focus { border-color: var(--ink-text); box-shadow: 0 0 0 2px rgba(255, 72, 176, .45); background-color: var(--paper-2); }
.form-check-input:checked { background-color: var(--ink-text); border-color: var(--ink-text); }
.form-range::-webkit-slider-thumb { background: var(--ink-text); }
.form-range::-moz-range-thumb { background: var(--ink-text); }
.dropdown-menu { border: 2px solid var(--rule); border-radius: 0; box-shadow: none; font-size: 14px; background: var(--paper); }
.dropdown-item { color: var(--ink-text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--riso-pink); color: var(--ink); }
.dropdown-header { color: var(--ink); font-weight: 700; }
.badge { border-radius: 0; }
.alert { border-radius: 0; }
.progress { border-radius: 0; background-color: transparent; background-image: var(--dots-blue); background-size: 5px 5px; }
.progress-bar { background-color: var(--ink-text); }
.table { --bs-table-color: var(--ink-text); --bs-table-bg: transparent; --bs-table-border-color: var(--line); }
.table > thead { border-bottom: 2px solid var(--rule); }
hr { border-color: var(--rule); opacity: 1; }

/* ---------- 标识：两色叠印方块 ---------- */
.weave-mark { position: relative; display: inline-block; width: 22px; height: 22px; vertical-align: middle; flex: none; }
.weave-mark::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; background: var(--riso-pink); }
.weave-mark::after { content: ""; position: absolute; right: 0; bottom: 0; width: 15px; height: 15px; background: var(--riso-blue); mix-blend-mode: multiply; }
.weave-mark i { display: none; }

/* ---------- 导航 ---------- */
.site-nav { background: var(--paper); padding: 0; position: sticky; top: 0; z-index: 1030; border-bottom: 2px solid var(--rule); }
.site-nav .container { min-height: 60px; }
.site-nav .navbar-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 900; font-size: 16px; letter-spacing: .02em; padding: 0; min-width: 0; }
.site-nav .navbar-brand:hover { color: var(--ink); }
.site-nav .navbar-brand small { display: block; font-weight: 500; font-size: 12px; color: var(--ink-2); letter-spacing: .06em; margin-top: 1px; }
.site-nav .navbar-brand .bt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
.site-nav .nav-link { color: var(--ink-text) !important; font-size: 14px; font-weight: 500; padding: 20px 12px !important; position: relative; white-space: nowrap; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus-visible { color: var(--pink-ink) !important; }
.site-nav .nav-link.active { color: var(--ink) !important; font-weight: 700; }
.site-nav .nav-link.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 4px; background: var(--riso-pink); }
.site-nav .nav-link i { margin-right: 4px; }
.site-nav .navbar-toggler { border: 1px solid var(--ink-text); border-radius: 0; }
.site-nav .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2300558A' stroke-width='2' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e"); }
.site-nav .dropdown-menu { max-height: 70vh; overflow: auto; margin-top: 2px !important; }
.site-nav .dropdown-item { padding: 5px 16px; }
.site-nav .dropdown-item .num { color: var(--ink-3); display: inline-block; min-width: 2.2em; }
.site-nav .dropdown-item.core-entry { color: var(--pink-ink); font-size: 15px; padding-top: 7px; padding-bottom: 7px; }
.site-nav .dropdown-item.core-entry .num { color: var(--pink-ink); font-weight: 800; }
@media (max-width: 1199.98px) {
  .site-nav .navbar-collapse { padding-bottom: 10px; }
  .site-nav .nav-link { padding: 9px 4px !important; }
  .site-nav .nav-link.active::after { left: -10px; right: auto; top: 10px; bottom: 10px; width: 4px; height: auto; }
}
@media (max-width: 575.98px) { .site-nav .navbar-brand small { display: none; } .site-nav .navbar-brand { max-width: calc(100vw - 96px); font-size: 15px; } }

/* ---------- 页面通用头部（非首页） ---------- */
.page-head { background: transparent; border-bottom: 2px solid var(--rule); margin: -1.5rem -.75rem 28px; }
.page-head .inner { padding: 30px 0 22px; position: relative; }
.page-head h1 { font-size: clamp(26px, 3vw, 40px); font-weight: 900; letter-spacing: -.01em; margin: 6px 0 6px; color: var(--ink); }
.page-head .lede { color: var(--ink-2); max-width: 46em; margin: 0; line-height: 1.8; }
.page-head .thread { position: absolute; left: 0; top: 30px; bottom: 22px; width: 10px; background: var(--riso-pink); }
.page-head .thread + * { margin-left: 24px; }

/* ---------- 篇章色（统一孔版蓝） ---------- */
.p1, .p2, .p3, .p4, .p5, .p6, .p7 { --pc: var(--riso-blue); }

/* ---------- 页脚 ---------- */
.site-foot { background: var(--paper); color: var(--ink-2); font-size: 14.5px; margin-top: 72px; border-top: 2px solid var(--rule); }
.site-foot .top { padding: 32px 0 24px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; }
@media (max-width: 1199.98px) { .site-foot .top { grid-template-columns: 1fr 1fr; } }
.site-foot h6 { color: var(--ink); font-size: 14px; font-weight: 700; margin: 0 0 12px; }
.site-foot p { margin: 0 0 6px; line-height: 1.8; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin: 0 0 7px; }
.site-foot a { color: var(--accent); text-decoration: none; }
.site-foot a:hover { color: var(--pink-ink); text-decoration: underline; }
.site-foot .bottom { border-top: 1px solid var(--line); padding: 14px 0 18px; font-size: 13.5px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.site-foot .brand { display: flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 900; font-size: 15px; margin-bottom: 10px; }
@media (max-width: 767.98px) { .site-foot .top { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- 实验计时（旧版计时器，保留功能） ---------- */
.experiment-timer { position: fixed; top: 74px; right: 20px; background: var(--paper); border: 2px solid var(--rule); padding: 8px 14px;
  font-weight: 700; z-index: 1000; display: none; }
.fade-in { animation: none; }

/* ---------- AI 助手对话框 ---------- */
#aiAssistantModal .modal-header { background: var(--ink); color: var(--paper); }
#aiAssistantModal .modal-title { font-size: 16px; font-weight: 700; color: var(--paper); }
#chatHistory { height: 440px; overflow-y: auto; border: 1px solid var(--line); padding: 18px; margin-bottom: 14px; background: var(--paper-2); }
#chatHistory::-webkit-scrollbar { width: 8px; }
#chatHistory::-webkit-scrollbar-thumb { background: var(--line); }
.message-content { word-wrap: break-word; font-size: 14.5px; line-height: 1.85; padding: 12px 16px; background: var(--paper); border: 0; border-left: 4px solid var(--riso-blue) !important; color: var(--ink-text); }
.message-content p { margin-bottom: 10px; } .message-content p:last-child { margin-bottom: 0; }
.avatar-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--paper); font-size: 17px; flex-shrink: 0; background: var(--ink-text) !important; }
.avatar-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; flex-shrink: 0; background: #fff; border: 2px solid var(--line); }
#chatHistory .badge { background: transparent !important; color: var(--ink) !important; padding-left: 0 !important; font-weight: 700; }
#chatInput { border-radius: 0; padding: 10px 14px; border: 1px solid var(--ink-text); font-size: 14px; }
.btn-send { border-radius: 0; padding: 10px 22px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- 实验流程提示条 ---------- */
#labToast .alert { background: var(--ink); color: var(--paper); border: 0; border-left: 8px solid var(--riso-blue); border-radius: 0; box-shadow: none !important; }
#labToast .alert-success { border-left-color: var(--riso-blue); }
#labToast .alert-danger { border-left-color: var(--riso-pink); }
#labToast .alert-warning { border-left-color: var(--riso-pink); }
.modal-content { background: var(--paper); }
.btn-secondary { --bs-btn-color: var(--ink-text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--ink-text); --bs-btn-hover-color: var(--paper); --bs-btn-hover-bg: var(--ink-text); --bs-btn-hover-border-color: var(--ink-text);
  --bs-btn-active-color: var(--paper); --bs-btn-active-bg: var(--ink); --bs-btn-disabled-color: var(--ink-3); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--line); }

/* ======================================================================
 * 2026-10-31 新风格（与首页设计稿一致）：圆角、细边框、轻阴影、渐变主按钮。放在文件末尾覆盖上面的旧规则。
 * ====================================================================== */
body { background: var(--paper); }
.num, .font-num { font-family: var(--font-num); font-stretch: normal; }
.btn { border-radius: 12px; font-weight: 600; letter-spacing: .01em; transition: transform .2s, box-shadow .2s, background-color .2s; }
.btn-primary, .btn-success, .btn-ink { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; border: 0;
  background-image: var(--grad); box-shadow: 0 10px 22px -12px rgba(139, 92, 246, .75) !important; }
.btn-primary:hover, .btn-success:hover, .btn-ink:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(139, 92, 246, .85) !important; }
.btn-primary:disabled, .btn-success:disabled { background-image: none; background-color: #C7D2FE; box-shadow: none !important; }
.btn-pink { --bs-btn-color: #fff; --bs-btn-bg: #C026D3; --bs-btn-border-color: #C026D3; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #A21CAF; --bs-btn-hover-border-color: #A21CAF; }
.btn-outline-primary, .btn-secondary, .btn-outline-danger, .btn-outline-secondary, .btn-outline-info, .btn-outline-success, .btn-outline-dark {
  --bs-btn-color: var(--ink-2); --bs-btn-bg: #fff; --bs-btn-border-color: #CBD5E1; --bs-btn-hover-color: var(--accent); --bs-btn-hover-bg: #fff; --bs-btn-hover-border-color: var(--riso-blue);
  --bs-btn-active-color: var(--accent); --bs-btn-active-bg: #EEF2FF; --bs-btn-active-border-color: var(--riso-blue); }
.text-primary { color: var(--accent) !important; }
.bg-primary { background-color: var(--accent) !important; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.card-header { padding-left: 1rem; padding-right: 1rem; border-bottom-color: var(--line-2); }
.card-body { padding-left: 1rem; padding-right: 1rem; }
.modal-content { border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(15, 23, 42, .35); background: #fff; overflow: hidden; }
.modal-header, .modal-header.bg-primary, .modal-header.bg-success { background: #fff !important; border-bottom: 1px solid var(--line-2); }
.modal-header::before { width: 4px; top: 14px; bottom: 14px; border-radius: 4px; background: var(--grad); }
#aiAssistantModal .modal-header { background: #fff !important; }
#aiAssistantModal .modal-title, #aiAssistantModal .modal-title.text-white { color: var(--ink) !important; }
.modal .alert { border-radius: 12px; background: #F8FAFF; }
.modal .border.rounded, .modal .rounded { border-radius: 12px !important; }
.form-control, .form-select { border-radius: 10px; border-color: #CBD5E1; background-color: #fff; }
.form-control:focus, .form-select:focus { border-color: var(--riso-blue); box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); background-color: #fff; }
.dropdown-menu { border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -20px rgba(15, 23, 42, .25); background: #fff; }
.dropdown-item:hover, .dropdown-item:focus { background: #EEF2FF; color: var(--accent); }
.badge { border-radius: 6px; }
.alert { border-radius: 12px; }
.progress { border-radius: 99px; background-image: none; background-color: #EEF2FF; }
.progress-bar { background-image: var(--grad); }
.table > thead { border-bottom: 1px solid var(--rule); }
.page-head { background: linear-gradient(160deg, #FFFFFF 0%, #F7F9FF 45%, #EEF2FF 100%); border-bottom: 1px solid var(--line); }
.page-head h1 { font-family: "Space Grotesk", var(--font); font-weight: 700; }
.page-head .thread { width: 6px; border-radius: 6px; background: var(--grad); }
#chatHistory { border-radius: 14px; background: #F8FAFF; }
.message-content { border-radius: 12px; background: #fff; border-left: 3px solid var(--riso-blue) !important; }
#chatInput { border-radius: 12px 0 0 12px; border-color: #CBD5E1; }
.btn-send { border-radius: 0 12px 12px 0; }
.experiment-timer { border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); background: #fff; }
#labToast .alert { border-radius: 12px; background: #0F172A; }
:focus-visible { outline-color: var(--riso-blue); }
::selection { background: rgba(139, 92, 246, .22); }