/* ============================================================
   学途点点 · theme.css  ——  专属配色（3 套：松石绿 / 朱霞红 / 海天蓝）
   ------------------------------------------------------------
   · 主色由 --ph(色相)/--ps(饱和)/--pl(明度) 三个变量驱动；切换预设即整页换肤。
   · 仅浅色外观（无深色模式）。
   · 语义色（朱砂=冲刺/紧迫、金=加分身份、青=信息）保持稳定，不随主题变——
     换的是“品牌主色”，而非红黄等语义提示色。
   （最后加载，覆盖式）
   ============================================================ */

:root{
  /* —— 配色驱动变量（被 js/theme.js / localStorage 改写）—— */
  --ph: 169;      /* 色相 */
  --ps: 70%;      /* 饱和 */
  --pl: 39%;      /* 明度（主色） */

  /* ============================================================
     ★ 中性体系（底色 / 描边 / 文字 / 阴影）整体跟随主题色相 --ph
     ------------------------------------------------------------
     原 main.css 把这些写死成「绿味中性色」(#f1f8f4 / #1e3a34 …)，
     换肤时只换主色不换中性色，于是红/蓝主题下底色仍发绿、不协调。
     这里按 hsl(var(--ph) …) 重算：绿→冷绿、红→暖粉、蓝→清冷，
     饱和度刻意压低，保证只是「极淡的一层主题味」，不抢主色。
     theme.css 最后加载，同名 :root 变量在此覆盖 main.css。
     语义色（朱砂/金/青蓝/指标到校紫）不在此列，保持稳定。
     ============================================================ */
  /* 文字墨色（深，带轻微主题味；仍读作近中性） */
  --ink:       hsl(var(--ph) 26% 18%);
  --ink-soft:  hsl(var(--ph) 17% 31%);
  --muted:     hsl(var(--ph) 10% 47%);
  --muted-2:   hsl(var(--ph) 13% 69%);
  /* 描边 / 分割线（极淡） */
  --line:      hsl(var(--ph) 20% 90%);
  --line-soft: hsl(var(--ph) 22% 95%);
  /* 底色 / 面板（高明度→主题味很轻；卡片保持纯白，避免发灰） */
  --paper:      hsl(var(--ph) 28% 96%);
  --paper-warm: hsl(var(--ph) 22% 99%);
  --panel:      #fff;
  --panel-2:    hsl(var(--ph) 26% 97%);

  /* 阴影：用 --ink（现已随主题）调出半透明投影，取代写死的墨绿 rgba(20,60,52) */
  --shadow:      0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent),
                 0 12px 30px color-mix(in srgb, var(--ink) 7%, transparent);
  --shadow-lift: 0 2px 4px color-mix(in srgb, var(--ink) 7%, transparent),
                 0 18px 40px color-mix(in srgb, var(--ink) 12%, transparent);
  /* 弹层 / 抽屉的深色遮罩，也跟随主题 */
  --scrim:       color-mix(in srgb, var(--ink) 45%, transparent);

  /* —— 主色家族：全部由上面三个值派生 —— */
  --pine:        hsl(var(--ph) var(--ps) var(--pl));
  --pine-dark:   hsl(var(--ph) calc(var(--ps) + 8%) calc(var(--pl) - 8%));
  --pine-light:  hsl(var(--ph) calc(var(--ps) - 14%) 90%);
  /* ★ 补齐此前只在 main.css 写死(绿)的两个派生色，改为跟随主题（theme.css 最后加载，覆盖 main.css）。
     注：--pine-rgb / --pine-dark-rgb 是 rgba() 用的 "r,g,b" 三元组，纯 CSS 无法由 hsl 推导，
     由 js/theme.js 按当前主题即时写入（见该文件 hslToRgb）。 */
  --pine-light-2: color-mix(in srgb, var(--pine) 6%,  #fff);
  --pine-border:  color-mix(in srgb, var(--pine) 26%, #fff);

  /* —— 由主色派生的柔光/阴影/描边（取代分散在各处的硬编码 rgba(pine)）—— */
  --pine-a08: color-mix(in srgb, var(--pine) 8%,  transparent);
  --pine-a12: color-mix(in srgb, var(--pine) 12%, transparent);
  --pine-a16: color-mix(in srgb, var(--pine) 16%, transparent);
  --pine-a22: color-mix(in srgb, var(--pine) 22%, transparent);
  --pine-a28: color-mix(in srgb, var(--pine) 28%, transparent);
  --pine-a35: color-mix(in srgb, var(--pine) 35%, transparent);
  --pine-tint:color-mix(in srgb, var(--pine) 6%,  var(--paper-warm));
  --ring:     0 0 0 3px var(--pine-a22);
}

/* 页面氛围底：跟随所选主题色（双径向）。 */
body{
  background:
    radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--pine) 14%, var(--paper)) 0%, transparent 55%),
    radial-gradient(900px 520px at -8% 112%, color-mix(in srgb, var(--pine) 9%,  var(--paper)) 0%, transparent 52%),
    var(--paper) !important;
}

/* —— 把若干写死的 pine 柔光改为跟随主题 —— */
.seal{ box-shadow:0 6px 16px var(--pine-a35) !important; }
.pill .dot{ box-shadow:0 0 0 3px var(--pine-a16) !important; }
.inp:focus,.sel:focus,textarea.inp:focus{ box-shadow:var(--ring) !important; }
.chip.on{ box-shadow:0 4px 12px var(--pine-a28) !important; }
.sb-field input.over,.inp.big.over{ box-shadow:0 0 0 3px color-mix(in srgb, var(--cinnabar) 16%, transparent) !important; }
.rankbox{ background:linear-gradient(135deg,var(--pine-light),color-mix(in srgb,var(--pine) 8%, #fff)); border-color:var(--pine-a35) !important; }
.empty-stage .demo:hover{ background:color-mix(in srgb,var(--pine) 22%, #fff) !important; }

/* —— 此前写死「墨绿」的遮罩 / 投影 / 毛玻璃底，统一改为跟随主题（取代 rgba(20,60,52) / rgba(20,40,35) / rgba(251,253,251) 等）—— */
.drawer-bg,.picker-bg{ background:var(--scrim) !important; }
.drawer{ box-shadow:-12px 0 40px color-mix(in srgb,var(--ink) 20%,transparent) !important; }
.picker{ box-shadow:0 30px 70px color-mix(in srgb,var(--ink) 28%,transparent) !important; }
.rk-tip{ box-shadow:0 6px 16px color-mix(in srgb,var(--ink) 24%,transparent) !important; }
.tl-you .bubble{ box-shadow:0 5px 12px color-mix(in srgb,var(--ink) 22%,transparent) !important; }
.mainnav{ background:color-mix(in srgb,var(--paper-warm) 92%,transparent) !important; }

/* ============================================================
   顶栏：整理右侧（状态药丸 → 配色入口 → 设置 → 登录槽位）
   ============================================================ */
.topbar{ gap:12px; }
.topbar .spacer{ flex:1 1 auto; min-width:8px; }

/* 配色入口按钮（沿用 .iconbtn 外观，右下角小色点指示当前主色） */
#themeBtn{ position:relative; }
#themeBtn .tdot{ position:absolute; right:5px; bottom:5px; width:9px; height:9px; border-radius:50%; background:var(--pine); box-shadow:0 0 0 2px var(--panel); }

/* 设置齿轮上的 AI 状态点（绿=已连通 / 琥珀=异常 / 灰=未配置） */
#gearBtn{ position:relative; }
.gdot{ position:absolute; right:5px; bottom:5px; width:9px; height:9px; border-radius:50%; background:var(--muted-2); box-shadow:0 0 0 2px var(--panel); transition:background .2s; }
.gdot.ok{ background:#16a34a; } .gdot.warn{ background:var(--gold); } .gdot.off{ background:var(--muted-2); }

/* 登录组件归位：顶栏内真实槽位（不再 position:fixed 浮在最上层） */
.topbar-auth{ display:flex; align-items:center; flex:none; }
.topbar-auth .xtauth-pill{ position:static !important; top:auto !important; right:auto !important; z-index:auto !important; }
/* 登录药丸配色贴合本站主题（原组件自带靛蓝，这里覆盖为中性 + 主题色） */
.xtauth-btn{ border:1px solid var(--line) !important; background:var(--panel) !important; color:var(--ink-soft) !important; box-shadow:none !important; }
.xtauth-btn:hover{ border-color:var(--pine) !important; color:var(--pine-dark) !important; }
.xtauth-user{ background:var(--panel) !important; border:1px solid var(--line) !important; box-shadow:none !important; gap:7px !important; padding:5px 7px 5px 13px !important; }
.xtauth-user b{ color:var(--ink) !important; font-family:var(--sans); }
.xtauth-tag{ color:var(--pine-dark) !important; background:var(--pine-light) !important; font-weight:600 !important; }
.xtauth-out{ background:var(--panel-2) !important; color:var(--ink-soft) !important; border:1px solid var(--line) !important; transition:.15s; }
.xtauth-out:hover{ background:color-mix(in srgb,var(--cinnabar) 14%, #fff) !important; color:var(--cinnabar-dark) !important; border-color:transparent !important; }
.xtauth-go{ background:var(--pine) !important; }
.xtauth-go:hover{ background:var(--pine-dark) !important; }
.xtauth-card input:focus{ border-color:var(--pine) !important; box-shadow:var(--ring) !important; }

/* 窄屏：顶栏压缩，优先保留品牌 + 配色/设置/登录；隐藏次要状态药丸 */
@media(max-width:980px){ .brand .sub{ display:none; } }
@media(max-width:760px){ .topbar .pill:not(#dataPill){ display:none; } .xtauth-user .xtauth-tag{ display:none; } }

/* ============================================================
   配色选择浮层（3 套预设）
   ============================================================ */
.theme-pop{
  position:fixed; z-index:120; top:62px; right:16px; width:252px;
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 18px 50px color-mix(in srgb,var(--ink) 18%,transparent), 0 2px 8px color-mix(in srgb,var(--ink) 6%,transparent);
  padding:14px; font-family:var(--sans); transform-origin:top right; animation:tpIn .16s ease;
}
.theme-pop[hidden]{ display:none; }
@keyframes tpIn{ from{ opacity:0; transform:translateY(-6px) scale(.98); } to{ opacity:1; transform:none; } }
.theme-pop .tp-head{ display:flex; align-items:center; margin-bottom:11px; }
.theme-pop .tp-head .tt{ font-family:var(--serif); font-weight:700; font-size:15px; color:var(--ink); }
.theme-pop .tp-head .ts{ font-size:11px; color:var(--muted-2); margin-left:8px; }
.theme-pop .tp-head .tx{ margin-left:auto; border:none; background:var(--panel-2); color:var(--muted); width:24px; height:24px; border-radius:8px; cursor:pointer; font-size:13px; line-height:1; }
.theme-pop .tp-head .tx:hover{ background:var(--line-soft); color:var(--ink-soft); }

.tp-grid{ display:flex; flex-direction:column; gap:8px; }
.tp-sw{ display:flex; align-items:center; gap:11px; width:100%; padding:9px 11px; border:1.5px solid var(--line); background:var(--panel); border-radius:11px; cursor:pointer; transition:.14s; text-align:left; font-family:var(--sans); }
.tp-sw:hover{ border-color:color-mix(in srgb,var(--pine) 40%, var(--line)); transform:translateY(-1px); }
.tp-sw.on{ border-color:var(--pine); background:var(--pine-tint); }
.tp-chip{ flex:none; width:28px; height:28px; border-radius:9px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.tp-meta{ flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.tp-lbl{ font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.2; }
.tp-sub{ font-size:11px; color:var(--muted); }
.tp-tick{ display:none; flex:none; width:18px; height:18px; border-radius:50%; background:var(--pine); color:#fff; place-items:center; font-size:11px; font-weight:800; }
.tp-sw.on .tp-tick{ display:grid; }

/* ============================================================
   报告页：主按钮区 70 / 30 双按钮
   ============================================================ */
.gen-row{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; margin-top:6px; }
.gen-row .gen-btn{ margin-top:0; flex:2 1 230px; min-width:0; font-size:15.5px; letter-spacing:.5px; gap:7px; padding:15px 8px; white-space:nowrap; }
.gen-row .gen-btn svg{ width:16px; height:16px; flex:none; }
.gen-row .gen-btn.alt{
  flex:1 1 122px; min-width:112px; padding:15px 4px;
  background:var(--pine-light); color:var(--pine-dark);
  box-shadow:none; border:1px solid color-mix(in srgb,var(--pine) 26%, transparent);
  font-size:14px; letter-spacing:.5px; flex-direction:column; gap:1px; line-height:1.15; white-space:nowrap;
}
.gen-row .gen-btn.alt.export{ flex-basis:116px; font-size:13.5px; letter-spacing:.2px; }
.gen-row .gen-btn.alt small{ font-family:var(--sans); font-weight:500; font-size:10px; letter-spacing:0; opacity:.78; }
.gen-row .gen-btn.alt:hover{ transform:translateY(-1px); background:var(--pine); color:#fff; box-shadow:0 10px 24px var(--pine-a28); }
.gen-row .gen-btn.alt:disabled{ opacity:.55; cursor:not-allowed; transform:none; background:var(--panel-2); color:var(--muted-2); border-color:var(--line); }
@media(max-width:420px){ .gen-row{ flex-direction:column; } .gen-row .gen-btn,.gen-row .gen-btn.alt{ flex:1 1 auto; } }

/* ── 导出：单按钮 + 二次下拉菜单（替代常驻三按钮，减少按钮数、优化布局） ── */
.gen-row .export-menu{ position:relative; flex:1 1 150px; min-width:132px; display:flex; }
.gen-row .export-menu > .gen-btn.alt.export{ flex:1 1 auto; min-width:0; }
.gen-row .export-menu.open > .gen-btn.alt.export{ background:var(--pine); color:#fff; box-shadow:0 10px 24px var(--pine-a28); }
.export-pop{
  position:absolute; z-index:80; right:0; bottom:calc(100% + 8px); min-width:216px; max-width:calc(100vw - 40px);
  background:var(--panel,#fff); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 16px 44px rgba(20,24,22,.24); padding:6px;
}
.export-pop[hidden]{ display:none; }
.export-item{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  width:100%; text-align:left; cursor:pointer; border:none; background:transparent;
  padding:9px 12px; border-radius:9px; color:var(--pine-dark); transition:.14s;
}
.export-item + .export-item{ margin-top:2px; }
.export-item b{ font-family:var(--serif); font-weight:700; font-size:14.5px; letter-spacing:.3px; line-height:1.25; }
.export-item small{ font-family:var(--sans); font-weight:500; font-size:10.5px; letter-spacing:0; color:var(--muted); }
.export-item:hover,.export-item:focus-visible{ background:var(--pine-light); outline:none; }
.export-item:hover small,.export-item:focus-visible small{ color:var(--pine-dark); }
@media(max-width:420px){ .gen-row .export-menu{ flex:1 1 auto; } .export-pop{ left:0; right:0; min-width:0; } }

/* ── 志愿风格：默认折叠为一枚小按钮，点击展开说明（减少常驻信息量、优化布局） ── */
.risk-field .risk-toggle{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:10px 13px; border-radius:11px; cursor:pointer;
  background:var(--panel-2,#f6f2ec); border:1px solid var(--line);
  font-family:var(--sans); text-align:left; transition:.16s;
}
.risk-field .risk-toggle:hover{ border-color:color-mix(in srgb,var(--pine) 30%, transparent); background:var(--pine-tint,#f0f6f3); }
.risk-field .risk-toggle .rt-k{ font-weight:700; font-size:13px; color:var(--ink); }
.risk-field .risk-toggle .rt-v{ font-weight:700; font-size:12px; color:var(--pine-dark); background:var(--pine-light); padding:2px 9px; border-radius:999px; }
.risk-field .risk-toggle .rt-x{ margin-left:auto; font-size:11px; color:var(--muted-2); white-space:nowrap; }
.risk-field .risk-toggle .rt-x::after{ content:" ▾"; }
.risk-field .risk-toggle.on .rt-x::after{ content:" ▴"; }
.risk-field .risk-detail{ margin-top:8px; }
.risk-field .risk-detail[hidden]{ display:none; }

/* ── 志愿草表：新增「偏高·谨慎(high)」档——高你>15 分、几乎不可能被投档的学校（与报告表1同口径） ── */
.cc-high{ color:var(--cinnabar-dark); font-weight:700; }
.ct-pill.cc-high{ background:var(--cinnabar-soft); border-color:#f0d0c4; }
.ct-pill.cc-high b{ color:var(--cinnabar-dark); }
.pk-divider{ margin:8px 2px 4px; padding:5px 10px; font-size:11px; line-height:1.5; color:var(--cinnabar-dark); background:var(--cinnabar-soft,#fbeee9); border:1px dashed #eec4b6; border-radius:8px; }

/* 「仅匹配学校」后，AI 区的占位卡片 */
.ai-skip{ display:flex; align-items:flex-start; gap:13px; padding:16px 18px; border-radius:14px; background:var(--pine-tint); border:1px dashed color-mix(in srgb,var(--pine) 32%, transparent); }
.ai-skip .ic{ flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--pine-light); color:var(--pine-dark); font-size:17px; }
.ai-skip .tx{ flex:1; font-size:13px; color:var(--ink-soft); line-height:1.7; }
.ai-skip .tx b{ color:var(--pine-dark); }
.ai-skip .go{ margin-top:9px; border:none; cursor:pointer; background:linear-gradient(135deg,var(--pine),var(--pine-dark)); color:#fff; font-family:var(--sans); font-weight:700; font-size:13px; padding:9px 16px; border-radius:10px; display:inline-flex; align-items:center; gap:7px; box-shadow:0 8px 20px var(--pine-a28); transition:.15s; }
.ai-skip .go:hover{ transform:translateY(-1px); }

/* ============================================================
   数据填充态打磨（轻量、非破坏）
   ============================================================ */
.dtable tbody tr{ transition:background .12s; }
.dtable tbody tr:hover td{ background:var(--pine-a08); }
.schtable tbody tr:hover td,.tier table tbody tr:hover td{ background:var(--pine-a08); }
.report .schtable tbody tr{ transition:background .12s; }
.report .schtable tbody tr:hover td{ background:var(--pine-a08); }

/* 考生信息展开后，「考生身份」右栏不再空旷：轻卡片承托 */
.sb-pcol-id{ background:var(--pine-tint); border:1px solid var(--line); border-radius:12px; padding:12px 14px; align-self:stretch; }
.sb-pcol-id .sb-pcap{ margin-top:2px; }

/* 顶部「全省位次」结果块：填分后更醒目 */
.sb-rank:not(.empty){ background:linear-gradient(135deg,var(--pine-light),color-mix(in srgb,var(--pine) 6%, #fff)); border-color:var(--pine-a35); }

/* 顶部「考生信息」条底色跟随主题（原写死浅绿 rgba(214,241,234)）*/
.scorebar-wrap{ background:color-mix(in srgb, var(--pine) 13%, var(--paper)) !important; }

/* 选区颜色随主题 */
::selection{ background:color-mix(in srgb,var(--pine) 24%, transparent); }

/* ============================================================
   报告内此前未跟随主题的配色（语义色朱砂/金不动；“稳”与把握度条改为主题派生）
   ============================================================ */
.k3-wen{ background:color-mix(in srgb, var(--pine) 15%, #fff); color:var(--pine-dark); }
.suit-wen{ background:color-mix(in srgb, var(--pine) 15%, #fff) !important; color:var(--pine-dark) !important; }  /* ★ 与 k3-wen 同步跟随主题（原写死绿） */
.prob-bar{ background:var(--pine-a08); }
.prob-bar > i{ background:linear-gradient(90deg, color-mix(in srgb, var(--pine) 42%, #fff), var(--pine-dark)); }
.dm-intro b{ color:var(--pine-dark); }
.anchor-line .mono{ color:var(--pine-dark); }
.dmt .pcell .plabel .pct{ color:var(--pine-dark); }

/* 「更多保底备选 / 展开更多参考」折叠块：统一为主题描边卡片 */
details.safe-more, details.more-rec{
  margin-top:10px; border:1px dashed color-mix(in srgb, var(--pine) 30%, transparent);
  border-radius:12px; background:var(--pine-tint); padding:0 14px;
}
details.safe-more > summary, details.more-rec > summary{
  cursor:pointer; list-style:none; padding:12px 2px; font-size:13px; font-weight:700;
  color:var(--pine-dark); display:flex; align-items:center; gap:8px;
}
details.safe-more > summary::-webkit-details-marker, details.more-rec > summary::-webkit-details-marker{ display:none; }
details.safe-more > summary::before, details.more-rec > summary::before{ content:"▸"; color:var(--pine); transition:transform .15s; }
details.safe-more[open] > summary::before, details.more-rec[open] > summary::before{ transform:rotate(90deg); }
details.more-rec > table{ margin:4px 0 12px; }
details.safe-more > table{ margin-bottom:12px; }

/* ============================================================
   第十批 · 按主题微调(theme.js 写入 data-accent 后生效)
   ------------------------------------------------------------
   红 / 粉的中性底若沿用统一公式会偏"玫瑰纸",这里单独压低纸面
   饱和并提亮,保住"喜庆/温柔"的一层暖意而不刺眼;蓝微调更清透。
   ============================================================ */
[data-accent="red"], [data-accent="pink"]{
  --paper:      hsl(var(--ph) 42% 97.4%);
  --paper-warm: hsl(var(--ph) 30% 99.2%);
  --panel-2:    hsl(var(--ph) 36% 97.6%);
  --line:       hsl(var(--ph) 24% 90.5%);
  --line-soft:  hsl(var(--ph) 26% 95%);
  --ink:        hsl(var(--ph) 30% 17%);
  --muted:      hsl(var(--ph) 9% 46%);
}
[data-accent="pink"]{
  /* 粉主题主色明度较高,深一档的衍生色再压一点保证文字/描边对比 */
  --pine-dark: hsl(var(--ph) calc(var(--ps) + 6%) calc(var(--pl) - 12%));
}
[data-accent="blue"]{
  --paper:      hsl(var(--ph) 34% 96.6%);
  --paper-warm: hsl(var(--ph) 24% 99.2%);
}

/* v2:红/粉主题的页面氛围底再收一档(双径向渐变浓度 14%/9% → 9%/6%),喜庆不糊眼 */
html[data-accent="red"] body, html[data-accent="pink"] body{
  background:
    radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--pine) 9%, var(--paper)) 0%, transparent 55%),
    radial-gradient(900px 520px at -8% 112%, color-mix(in srgb, var(--pine) 6%,  var(--paper)) 0%, transparent 52%),
    var(--paper) !important;
}