/*! 外观包 7「游戏 · 任务闯关」— 深蓝屏底 + 网格 + 霓虹紫品；任务面板 / 关卡链 / 得分看板 / 行动键
   只在本模板下加载（layout.php 的 $tplPacks）。全部规则前缀 `html[data-template=quest]`。
   红线：无位图（background-image:url 0）、无 clamp()、无 vw/vh —— 见 doctor A8。 */

/* ── ① token：整组中性色换成深蓝阶，压过 app.css 的暗色媒体块 ──────────────
   为什么是「重写中性色」而不是「在深色上叠一层半透明」：本站所有组件（卡片、输入框、
   表格、脚注）都读 --c-ink-* / --c-paper / --c-line 这几组变量。换掉它们，48 个组件
   的底色与文字色一起落到正确的位置；叠半透明则要逐个组件补规则，漏一个就是
   「深底 + 浅底补丁」。品牌 14 个值不在这里 —— 那是 Skin 注入的内联 <style>。
   `color-scheme:dark` 必须显式写：不写的话下拉、滚动条、搜索框取消按钮会按亮色画，
   落在深蓝上像三块白补丁（glass 那套踩过同一个坑）。 */
html[data-template=quest]{
  color-scheme:dark;
  --c-paper:#0A0F1E;--c-paper-2:#0E1428;
  --c-ink-100:#18203C;--c-ink-200:#232C4E;--c-ink-400:#7C88B2;--c-ink-500:#9AA6CC;
  --c-ink-700:#C3CCEC;--c-ink-900:#E9EEFF;
  --c-line:#232C4E;--c-line-strong:#3A4674;
  --c-surface-sub:#0E1428;--c-surface-head:#18203C;
  --c-ring-in:#0A0F1E;--c-toast-bg:#E9EEFF;--c-toast-fg:#10162C;
  --c-brand-glow:rgba(208,139,220,.24);--c-shade:rgba(3,6,16,.48);--c-shade-2:rgba(3,6,16,.66);
  --sh-1:0 1px 2px var(--c-shade),0 10px 26px var(--c-shade);
  --sh-2:0 2px 6px var(--c-shade),0 18px 40px var(--c-shade-2);
  --r-0:0;--r-1:10px;--r-2:12px;--r-3:18px;
  --t-h1:28px;--t-h2:19px;--t-h3:15px;

  /* 任务面板专用（不进皮肤契约：这些是"角色色"，永不做正文色） */
  --q-panel:#121A33;--q-panel-2:#16203C;--q-sunken:#0B1124;
  --q-line:rgba(154,172,255,.16);--q-line-2:rgba(154,172,255,.30);
  --q-cyan:#46E0C0;--q-amber:#FFC857;--q-orange:#FF8552;
  --q-mono:"SFMono-Regular","Cascadia Mono",Consolas,"Liberation Mono",ui-monospace,monospace;
}

/* ── ② 背景：深蓝渐变 + 低饱和网格 + 两处霓虹光晕 ─────────────────────────
   六层叠在固定的 `body::before` 上（z-index:-1），不叠在 body 自己的背景上。
   位置选「根背景之后、文档流之前」是被 .hdr 的半透明底逼出来的：放在 body 背景上，
   滚动时页头取样到的是另一段渐变，会出现一条随滚动移动的色差带（glass 已记过一次）。
   网格取 34px、alpha .045：再密读成布料纹理，再疏就看不出"这是一块屏幕"。
   两处光晕分别落在左上（品牌紫品）与右上（深青）：单色光晕会让整页读成"更黑的蓝"，
   两种色温对峙才有"里面有个发光的界面"的感觉。 */
html[data-template=quest] body{background-color:var(--c-paper)}
html[data-template=quest] body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(760px 460px at 14% -10%,rgba(138,69,144,.34),transparent 68%),
    radial-gradient(620px 400px at 92% -4%,rgba(38,86,190,.30),transparent 70%),
    radial-gradient(520px 320px at 50% 104%,rgba(70,224,192,.10),transparent 72%),
    repeating-linear-gradient(0deg,rgba(154,172,255,.045) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,rgba(154,172,255,.045) 0 1px,transparent 1px 34px),
    linear-gradient(180deg,#0A0F1E 0%,#0C1428 46%,#080D19 100%);
  background-size:auto,auto,auto,auto,auto,auto;
}

/* ── ③ 基础：字距收紧、数字走等宽、链接不靠下划线靠色与光 ───────────────── */
html[data-template=quest] h1,
html[data-template=quest] h2{letter-spacing:-.015em}
html[data-template=quest] .zip,
html[data-template=quest] .num,
html[data-template=quest] .row__zip,
html[data-template=quest] .kv-copy__v,
html[data-template=quest] .stat__n{
  font-family:var(--q-mono);font-variant-numeric:tabular-nums;
}
/* 深底上的下划线（1px 半透明黑）等于没有。改用"字色 + 底光"区分链接 */
html[data-template=quest] a{text-decoration-thickness:1px;text-underline-offset:3px}

/* ── ④ 页头 = 任务栏（HUD）：徽章式标志 + 药丸页签 + 一条霓虹底线 ──────────
   标志不换图形（那是站级品牌资产），只把它放进一枚 34px 的发光方块里 ——
   「图标装进徽章」是游戏界面的第一识别动作，且不改任何 DOM。 */
html[data-template=quest] .hdr{
  position:relative;height:64px;
  background:rgba(10,15,30,.86);border-bottom:1px solid var(--q-line);
}
html[data-template=quest] .hdr::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0,rgba(208,139,220,.85) 18%,rgba(70,224,192,.72) 52%,transparent 100%);
  opacity:.55;
}
html[data-template=quest] .hdr__logo{gap:10px;color:var(--c-ink-900);font-size:15px}
html[data-template=quest] .hdr__logo svg{
  width:34px;height:34px;padding:7px;color:#EFCBEF;
  background:linear-gradient(160deg,rgba(208,139,220,.24),rgba(70,224,192,.14));
  border:1px solid rgba(208,139,220,.42);border-radius:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 4px 14px rgba(138,69,144,.26);
}
html[data-template=quest] .hdr__logo:hover{color:#fff}
html[data-template=quest] .hdr__logo:hover svg{
  border-color:rgba(208,139,220,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 18px rgba(208,139,220,.4);
}
/* 导航 = 任务页签：药丸、无边框，悬停给一层极淡的品牌底 */
html[data-template=quest] .hdr__link{
  height:34px;padding:0 13px;font-size:13px;color:var(--c-ink-500);border-radius:999px;
}
html[data-template=quest] .hdr__link:hover{
  color:#F6E9FA;background:rgba(208,139,220,.18);box-shadow:inset 0 0 0 1px rgba(208,139,220,.30);
}
html[data-template=quest] .hdr__searchico{height:34px;border-radius:999px;color:var(--c-ink-500)}
html[data-template=quest] .hdr__searchico:hover{color:#F6E9FA;background:rgba(208,139,220,.18)}

/* ── ⑤ 首屏 = 任务简报：标题带底光，引导句加一条左侧导轨 ─────────────────── */
html[data-template=quest] .hero{position:relative;padding:var(--s-4) 0 0}
html[data-template=quest] .hero__title{
  color:#F4F7FF;text-shadow:0 0 26px rgba(208,139,220,.34);
}
html[data-template=quest] .hero__sub{color:var(--q-amber);font-size:13px;font-weight:600;letter-spacing:.04em}
html[data-template=quest] .hero__lead{
  position:relative;padding-left:12px;color:var(--c-ink-500);
}
html[data-template=quest] .hero__lead::before{
  content:"";position:absolute;left:0;top:.35em;bottom:.35em;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--q-cyan),rgba(70,224,192,0));pointer-events:none;
}
/* 首屏右侧那块任务卡（templates/partials/qs-hud.php）。<900 不渲染：
   手机首屏每一像素都归标题与查询区，一块 300px 的装饰牌会把标题挤成两行。
   top 跟 .hero 的上内边距取同一个刻度，牌顶才和 h1 顶对齐。 */
html[data-template=quest] .qs-hud{
  display:none;position:absolute;right:0;top:var(--s-4);
  width:300px;height:112px;pointer-events:none;
}
@media (min-width:900px){
  html[data-template=quest] .hero{padding-right:330px;padding-bottom:var(--s-2)}
  html[data-template=quest] .qs-hud{display:block}
}
@media (min-width:1024px){
  html[data-template=quest] .qs-hud{top:var(--s-5)}
}

/* ── ⑥ 查询区 = 「开始任务」：深色面板 + 四角 HUD 框 + 关卡选择 + 行动键 ────
   整页最重的一块，但不是最亮的一块 —— 亮留给行动键。这是与 guide 那套的分野：
   guide 把"入口"做成整块实色（导视牌），quest 把"入口"做成一块发光面板（任务台），
   读者的注意力落在里面的那一枚按钮上，而不是面板本身。 */
html[data-template=quest] .qbox__card{
  position:relative;padding:var(--s-2);
  background:linear-gradient(180deg,#1B2750 0%,#141D3A 58%,#101830 100%);
  background-color:#141D3A;
  border:1px solid rgba(154,172,255,.34);border-radius:20px;
  box-shadow:0 0 0 1px rgba(208,139,220,.14),0 20px 48px rgba(2,5,14,.62),
             inset 0 1px 0 rgba(255,255,255,.09);
}
/* 四角 HUD 框：四个角都做（只做对角时，孤零零的两根 L 读成页面上的碎屑，
   像没对齐的装饰；四角齐全才自证是"一个取景框"）。四条尺寸是两次截图换来的：
   ① 挂在面板**外面**（-9px）—— 内缩 12px 时横臂正好压在 tab 组上
     （实测 panel 左 200、padding 16，tab 组左 217，而 12+20=32 已经越过它）；
   ② 直角而不是圆角 —— 22px 的盒子配 20px 圆角会变成四分之一圆，读不出"角标"；
   ③ 2.5px + .82 不透明 —— 1px 细线在 1x 下只剩一条脏边；
   ④ 四个角分挂两层：`.qbox` 与 `.qbox__card` 的盒子实测完全重合（200,282 1040×215），
     所以右上 / 左下挂外层、左上 / 右下挂内层，位置不会错开，也不必加空元素。 */
html[data-template=quest] .qbox{position:relative}
html[data-template=quest] .qbox::before,
html[data-template=quest] .qbox::after,
html[data-template=quest] .qbox__card::before,
html[data-template=quest] .qbox__card::after{
  content:"";position:absolute;width:22px;height:22px;pointer-events:none;
  border:2.5px solid rgba(70,224,192,.82);
  filter:drop-shadow(0 0 6px rgba(70,224,192,.45));
}
html[data-template=quest] .qbox::before{right:-9px;top:-9px;border-left:0;border-bottom:0}
html[data-template=quest] .qbox::after{left:-9px;bottom:-9px;border-right:0;border-top:0}
html[data-template=quest] .qbox__card::before{left:-9px;top:-9px;border-right:0;border-bottom:0}
html[data-template=quest] .qbox__card::after{right:-9px;bottom:-9px;border-left:0;border-top:0}
/* 关卡选择：三个 tab 做成一颗凹槽里的亮块（分段控件的本义），选中态是"按下去的那一格" */
html[data-template=quest] .qbox__tabs{
  display:inline-flex;gap:2px;padding:3px;
  background:rgba(6,10,22,.78);border:1px solid var(--q-line);border-radius:999px;
}
html[data-template=quest] .qbox__tab{
  height:28px;padding:0 14px;font-size:13px;font-weight:600;
  color:var(--c-ink-500);background:transparent;border:0;border-radius:999px;cursor:pointer;
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
html[data-template=quest] .qbox__tab:hover{color:#F2E6F6;background:rgba(208,139,220,.14)}
html[data-template=quest] .qbox__tab.is-on{
  color:#1B0C22;background-color:var(--c-brand-600);
  background-image:linear-gradient(180deg,var(--c-brand-700),var(--c-brand-600));
  box-shadow:0 2px 10px rgba(208,139,220,.34),inset 0 1px 0 rgba(255,255,255,.5);
}
/* 任务输入栏：凹进去的槽（inset 阴影 + 深底），不是浮起来的白块 */
html[data-template=quest] .search__input{
  color:#F2F5FF;background:var(--q-sunken);
  border:1px solid var(--q-line-2);border-radius:14px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.5);
}
html[data-template=quest] .search__input::placeholder{color:var(--c-ink-400)}
html[data-template=quest] .search__input:hover{border-color:rgba(154,172,255,.46)}
html[data-template=quest] .search__input:focus{
  border-color:var(--c-brand-600);background:var(--q-sunken);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.5),0 0 0 3px rgba(208,139,220,.26),0 0 18px rgba(208,139,220,.24);
}
html[data-template=quest] .search__icon{color:var(--c-ink-400)}
html[data-template=quest] .search__field:focus-within .search__icon{color:var(--c-brand-700)}
/* 行动键：整套版式里唯一"按下去会有手感"的东西 —— 上缘高光 + 下缘实边 + 按下位移 1px。
   三个动作缺一不可：只给渐变是"色块"，给了这三样才是"键"。 */
html[data-template=quest] .search__btn{
  color:#1B0C22;font-weight:700;letter-spacing:.02em;
  background-color:var(--c-brand-600);
  background-image:linear-gradient(180deg,var(--c-brand-700) 0%,var(--c-brand-600) 54%,#C07FCB 100%);
  border:0;border-radius:14px;
  box-shadow:0 4px 0 #6B2C77,0 10px 24px rgba(208,139,220,.36),inset 0 1px 0 rgba(255,255,255,.6);
  transition:box-shadow var(--dur) var(--ease),transform 120ms var(--ease),filter var(--dur) var(--ease);
}
html[data-template=quest] .search__btn:hover{
  filter:brightness(1.06);
  box-shadow:0 4px 0 #6B2C77,0 13px 30px rgba(208,139,220,.5),inset 0 1px 0 rgba(255,255,255,.65);
}
html[data-template=quest] .search__btn:active{
  transform:translateY(4px);
  box-shadow:0 0 0 #6B2C77,0 4px 12px rgba(208,139,220,.3),inset 0 1px 0 rgba(255,255,255,.4);
}
/* 行动键在窄容器里再收一档：/chaxun 的 .qbox 只有 710 宽（右边被得分看板占掉），
   76 宽的按钮会把输入框压到占位词放不下。实测「输入 6 位邮编，如 530000」需要 174px，
   内容区只有 186px（差距太薄，截图里最后一个 0 会被切掉一半）；
   按钮收到 64 之后内容区回到 198，整句完整。**这是全站六套模板都有的截断**
   （导视包在同一位置只显示到「如 530」），这一档是本包顺手多修的。 */
html[data-template=quest] .qbox .search--big .search__btn{min-width:64px;padding:0 14px}
/* 示例行与说明：面板内的次级文字必须比全局 --c-ink-500 再亮一档，
   否则落在 #111930 上只剩 4.6:1，长句读起来发灰 */
html[data-template=quest] .qbox__eg{color:#B9C4E4}html[data-template=quest] .qbox__eg-t{color:#96A2C8}
html[data-template=quest] .qbox__eg a{color:#E7C7F0;text-decoration-color:rgba(208,139,220,.4)}
html[data-template=quest] .qbox__eg a:hover{color:#FBEFFE;text-decoration-color:currentColor}
html[data-template=quest] .qbox__dot{color:#57628A}
html[data-template=quest] .qbox__cov{color:#8D99BF}

/* ── ⑦ 得分看板（查询区右栏）：三格数字 = 三块成绩 ────────────────────────
   数字用琥珀（--q-amber）+ 等宽 + 底光。琥珀是这套版式里的"得分色"，
   与品牌紫品分工：紫品代表"你能做什么"，琥珀代表"已经有多少"。 */
html[data-template=quest] .qbox__side{
  background:rgba(6,10,22,.66);border:1px solid var(--q-line);border-radius:16px;
}
html[data-template=quest] .qbox__side-h{color:#B9C4E4;font-size:11px;font-weight:700;letter-spacing:.10em}
html[data-template=quest] .qbox__live{
  background:var(--q-cyan);box-shadow:0 0 0 3px rgba(70,224,192,.18),0 0 10px rgba(70,224,192,.7);
}
html[data-template=quest] .qbox__num{
  background:linear-gradient(180deg,#141D38,#0E1529);
  border:1px solid rgba(154,172,255,.12);border-radius:12px;
}
html[data-template=quest] .qbox__num dd{
  color:var(--q-amber);text-shadow:0 0 16px rgba(255,200,87,.34);
}
html[data-template=quest] .qbox__num dt{color:#A6B1D2;font-size:11px;letter-spacing:.04em}
html[data-template=quest] .qbox__links a{
  color:#E0B9EA;min-height:30px;font-size:13px;
}
html[data-template=quest] .qbox__links a:hover{color:#FBEFFE}
html[data-template=quest] .qbox__links a span{color:var(--q-cyan)}

/* ── ⑧ 模块标题 = 章节头：菱形标记 + 一条拖尾细线 ──────────────────────────
   不用编号（那是 guide 的语言）。菱形 + 拖尾线是"关卡开始的横线"，
   纯 CSS，无文字，所以不会和页面上任何真实计数混淆。 */
html[data-template=quest] .sec>h2{
  display:flex;align-items:center;gap:11px;margin-bottom:var(--s-2);
  color:#F1F4FF;
}
html[data-template=quest] .sec>h2::before{
  content:"";flex:0 0 auto;width:9px;height:9px;border-radius:2px;
  background:linear-gradient(135deg,var(--q-cyan),#2FB9A0);
  box-shadow:0 0 12px rgba(70,224,192,.6);transform:rotate(45deg);
}
html[data-template=quest] .sec>h2::after{
  content:"";flex:1 1 auto;height:1px;margin-left:2px;
  background:linear-gradient(90deg,var(--q-line-2),rgba(154,172,255,0));
}
html[data-template=quest] .sec__desc{color:var(--c-ink-400)}

/* ── ⑨ 卡片 = 任务卡：立体感来自"上缘一道高光 + 一圈极淡描边"，不来自投影 ──
   深色界面上投影几乎看不见（黑叠黑），真正让人读出"这是一块板"的是上缘高光。
   所以投影只留一层很浅的托底，高光必须写。 */
html[data-template=quest] .panel,
html[data-template=quest] .tool-way,
html[data-template=quest] .side-card,
html[data-template=quest] .branch,
html[data-template=quest] .addr,
html[data-template=quest] .envwrap,
html[data-template=quest] .table-wrap{
  background:linear-gradient(180deg,#151E39 0%,#111930 100%);
  border:1px solid var(--q-line);border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 26px rgba(2,5,14,.42);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
html[data-template=quest] .panel:hover,
html[data-template=quest] .tool-way:hover,
html[data-template=quest] .side-card:hover{
  border-color:rgba(208,139,220,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 26px rgba(2,5,14,.46),0 0 24px rgba(208,139,220,.14);
  transform:translateY(-1px);
}
html[data-template=quest] .tool-way__t{color:#F1F4FF}
html[data-template=quest] .tool-way__d{color:var(--c-ink-400)}
html[data-template=quest] .tool-way__go{color:var(--c-brand-700)}
html[data-template=quest] .side-card__t{
  display:flex;align-items:center;gap:7px;color:#C9D2EE;font-size:11px;
  font-weight:700;letter-spacing:.08em;
}
html[data-template=quest] .side-card__t::before{
  content:"";flex:0 0 auto;width:6px;height:6px;border-radius:2px;
  background:var(--q-orange);box-shadow:0 0 8px rgba(255,133,82,.7);transform:rotate(45deg);
}
html[data-template=quest] .side-list a{color:#C2CBE8;border-bottom:1px solid rgba(154,172,255,.10)}
html[data-template=quest] .side-list a:hover{color:#F3DAF8}

/* ── ⑩ 列表行 = 任务条目：左侧一枚定位点，右侧箭头改实心三角 ──────────────
   定位点只加在 flex 行上（.rows--card / 普通 .rows）。.rows--tbl 是四列 grid，
   多一个伪元素会挤掉一列，所以那里不加。 */
html[data-template=quest] .rows--card .row,
html[data-template=quest] .rows:not(.rows--card):not(.rows--tbl) .row{
  border-bottom:1px solid rgba(154,172,255,.10);border-radius:12px;
}
html[data-template=quest] .rows--tbl .row{border-bottom:1px solid rgba(154,172,255,.10)}
html[data-template=quest] .rows--card .row::before,
html[data-template=quest] .rows:not(.rows--card):not(.rows--tbl) .row::before{
  content:"";flex:0 0 auto;width:7px;height:7px;border-radius:999px;
  background:var(--q-cyan);box-shadow:0 0 8px rgba(70,224,192,.75);
  opacity:.55;transition:opacity var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
html[data-template=quest] .row:hover{
  background:rgba(208,139,220,.10);color:#FBEFFE;
}
html[data-template=quest] .row:hover::before{opacity:1;box-shadow:0 0 12px rgba(70,224,192,.95)}
html[data-template=quest] .row:hover .row__meta,
html[data-template=quest] .row:hover .row__zip{color:#E0B9EA}
html[data-template=quest] .row__name{color:#E9EEFF;font-weight:600}
html[data-template=quest] .row__meta{color:var(--c-ink-400)}
html[data-template=quest] .row__zip{color:#F2F5FF}
html[data-template=quest] .row__k{color:var(--c-ink-400)}
html[data-template=quest] .row::after{
  border-color:#7C88B2;
}
html[data-template=quest] .row:hover::after{border-color:var(--q-cyan)}

/* ── ⑪ 邮编主卡 = 奖励面板：顶部一条四色徽带 + 数字底光 ────────────────────
   为什么给一条四色带：这是全站唯一"发奖"的地方，需要一枚仪式性的标记。
   四色按 青→琥珀→橙→紫品 排，正好是这套版式的四个角色色，不引入第五种颜色。 */
html[data-template=quest] .zipcard{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#182243 0%,#111930 100%);
  border:1px solid var(--q-line-2);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 40px rgba(2,5,14,.5);
}
html[data-template=quest] .zipcard::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--q-cyan) 0 26%,var(--q-amber) 26% 52%,
             var(--q-orange) 52% 76%,var(--c-brand-600) 76% 100%);
  opacity:.9;
}
html[data-template=quest] .zipcard .zip{
  color:#F6F8FF;letter-spacing:.01em;
  text-shadow:0 0 28px rgba(208,139,220,.42);
}
html[data-template=quest] .zip--off{color:var(--c-ink-400);text-shadow:none}
/* 复制：从"按钮"降级成"槽里的标签"，主值已经是主角，不需要第二个实心块 */
html[data-template=quest] .copy{
  color:#F3DAF8;background:rgba(208,139,220,.14);
  border:1px solid rgba(208,139,220,.40);border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
html[data-template=quest] .copy:hover{background:rgba(208,139,220,.24);border-color:rgba(208,139,220,.62);color:#FDF3FF}
html[data-template=quest] .kv-copy{
  background:rgba(154,172,255,.06);border:1px solid rgba(154,172,255,.12);border-radius:12px;
}
html[data-template=quest] .kv-copy:hover{background:rgba(208,139,220,.12);border-color:rgba(208,139,220,.36)}
html[data-template=quest] .kv-copy.is-flat{background:transparent;border-color:transparent}
html[data-template=quest] .kv-copy__k{color:var(--c-ink-400)}
html[data-template=quest] .kv-copy__v{color:#F2F5FF}
html[data-template=quest] .kv-copy__i{color:var(--c-ink-400)}
html[data-template=quest] .zipcard__note{color:var(--c-ink-400)}

/* 奖励面板的三个邻居：统计块、邮编拆解、示例信封 —— 同一套"得分格"的语言。
   统计块把数字换成琥珀（得分色）；邮编拆解把六位数字摊成三格，本来就是"逐段核对"，
   用等宽 + 深槽之后，它读起来就是一块记分板，而不需要额外加任何装饰。 */
html[data-template=quest] .stats{
  background:linear-gradient(180deg,#151E39 0%,#111930 100%);
  border:1px solid var(--q-line);border-radius:16px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-template=quest] .side-card .stats{background:transparent;border:0;box-shadow:none}
html[data-template=quest] .stat:nth-child(even),
html[data-template=quest] .stat:not(:first-child){border-left-color:rgba(154,172,255,.12)}
html[data-template=quest] .stat:nth-child(n+3){border-top-color:rgba(154,172,255,.12)}
html[data-template=quest] .stat__n{color:var(--q-amber);text-shadow:0 0 18px rgba(255,200,87,.26)}
html[data-template=quest] .stat__n--off{color:var(--c-ink-400);text-shadow:none}
html[data-template=quest] .stat__k{color:var(--c-ink-400)}
html[data-template=quest] .zipbreak__g{
  background:linear-gradient(180deg,#141D38,#0E1529);
  border:1px solid rgba(154,172,255,.14);border-radius:14px;
}
html[data-template=quest] .zipbreak__d{font-family:var(--q-mono);color:#F2F5FF;letter-spacing:.02em}
html[data-template=quest] .zipbreak__k{color:#B9C4E4}
html[data-template=quest] .zipbreak__v{color:var(--c-ink-400)}
/* 信封示例图是**真图**（/og/e/... 现画的米色信纸，见 partials/envelope.php 头注）。
   米色在深蓝上本来就是一块高亮，不能调暗（调暗就看不清"邮编写在哪一行"），
   只能给它一圈细边与一层托底阴影，让它读成"贴上来的一张示例卡"而不是漏光的白块。 */
html[data-template=quest] .envwrap{background:rgba(154,172,255,.05);border-color:var(--q-line)}
html[data-template=quest] .envfig__img{
  border-radius:12px;box-shadow:0 12px 30px rgba(2,5,14,.55),0 0 0 1px rgba(154,172,255,.18);
}
html[data-template=quest] .envwrap + .note{color:var(--c-ink-400)}

/* ── ⑫ 进度：.steps 变成任务链（这是全站唯一真实的"进度条"）──────────────
   三步是真实顺序（输入 → 核对 → 复制），所以连成一条轨道是「描述」而不是「装饰」。
   最后一步的节点填实：写的是"走到这里就完成了"，与页面真实动作一致。 */
html[data-template=quest] .steps{
  counter-reset:qsstep;padding-left:0;list-style:none;gap:14px;color:var(--c-ink-500);
}
html[data-template=quest] .steps li{position:relative;padding-left:40px;line-height:1.7}
html[data-template=quest] .steps li::before{
  counter-increment:qsstep;content:counter(qsstep);
  position:absolute;left:0;top:0;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  font-family:var(--q-mono);font-size:12px;font-weight:700;color:#0A0F1E;
  background:linear-gradient(180deg,var(--c-brand-700),var(--c-brand-600));
  border-radius:999px;box-shadow:0 0 0 4px rgba(10,15,30,.92),0 0 14px rgba(208,139,220,.34);
}
html[data-template=quest] .steps li::after{
  content:"";position:absolute;left:12.5px;top:30px;bottom:-14px;width:1px;
  background:linear-gradient(180deg,rgba(208,139,220,.55),rgba(154,172,255,.10));
}
html[data-template=quest] .steps li:last-child::after{display:none}
html[data-template=quest] .steps li:last-child::before{
  color:#0A0F1E;background:linear-gradient(180deg,var(--q-cyan),#2FB9A0);
  box-shadow:0 0 0 4px rgba(10,15,30,.92),0 0 16px rgba(70,224,192,.5);
}

/* ── ⑬ 面包屑 = 关卡链：当前所在的那一关做成亮牌 ───────────────────────────
   这是"关卡"最诚实的一处映射 —— 省 → 市 → 区县 → 乡镇 本来就是逐级解锁，
   面包屑原本就在描述它。不加编号，避免与页面上的真实计数混淆。 */
html[data-template=quest] .bc{color:var(--c-ink-400)}
html[data-template=quest] .bc__item+.bc__item::before{content:"›";color:#4A5578;margin:0 6px}
html[data-template=quest] .bc__item a{padding:1px 6px;border-radius:999px;color:var(--c-ink-400)}
html[data-template=quest] .bc__item a:hover{color:#F3DAF8;background:rgba(208,139,220,.14)}
html[data-template=quest] .bc__item [aria-current]{
  padding:1px 9px;color:#F3DAF8;font-weight:600;
  background:rgba(208,139,220,.16);border:1px solid rgba(208,139,220,.34);border-radius:999px;
}

/* ── ⑭ 标签 / 药丸按钮：地区入口是一枚枚"关卡砖" ─────────────────────────── */
html[data-template=quest] .chip,
html[data-template=quest] .pager__btn{
  background:rgba(154,172,255,.07);border:1px solid rgba(154,172,255,.16);
  border-radius:999px;color:#C9D2EE;
}
html[data-template=quest] .chip:hover,
html[data-template=quest] .pager__btn:hover{
  background:rgba(208,139,220,.18);border-color:rgba(208,139,220,.5);color:#FBEFFE;
  box-shadow:0 4px 14px rgba(208,139,220,.22);
}
html[data-template=quest] .chip:active,
html[data-template=quest] .pager__btn:active{transform:scale(.97);box-shadow:none}
/* 标签：与「当前行」同一枚品牌色。青绿在这套版式里是"进度/在线"的专用色，
   用在分类标签上会让读者以为它有进度含义 —— 角色色必须各管一件事。 */
html[data-template=quest] .tag{
  background:rgba(208,139,220,.16);border:1px solid rgba(208,139,220,.40);border-radius:999px;color:#F3DAF8;
}
html[data-template=quest] .more-btn,
html[data-template=quest] .more-block{
  background:rgba(154,172,255,.06);border-color:rgba(154,172,255,.16);border-radius:12px;color:#C9D2EE;
}
html[data-template=quest] .more-btn:hover{background:rgba(208,139,220,.16);color:#FBEFFE}

/* ── ⑮ 提示条 / 表头 / FAQ / 表格 / 页脚 ─────────────────────────────────── */
html[data-template=quest] .bar{
  background:rgba(255,200,87,.10);border:1px solid rgba(255,200,87,.26);
  border-radius:12px;color:#FFE1A3;
}
html[data-template=quest] .bar--info{background:rgba(70,224,192,.10);border-color:rgba(70,224,192,.26);color:#A9F0E0}
html[data-template=quest] .note,
html[data-template=quest] .note--src{color:var(--c-ink-400)}
html[data-template=quest] .note--src{border-top:1px solid rgba(154,172,255,.12)}
html[data-template=quest] .prose h2{color:#E9EEFF}
html[data-template=quest] .rows--tbl .rows__head{
  background:rgba(154,172,255,.10);border-radius:10px;color:#C9D2EE;
  font-size:12px;font-weight:700;letter-spacing:.03em;
}
html[data-template=quest] .table th{
  background:rgba(154,172,255,.10);color:#C9D2EE;border-bottom:1px solid var(--q-line-2);
}
html[data-template=quest] .table td,
html[data-template=quest] .table th{border-color:rgba(154,172,255,.12)}
html[data-template=quest] .table tr:hover td{background:rgba(208,139,220,.08)}
/* 当前所在行（.is-cur，如「身份证前 6 位」表里的东城区）：
   app.css 用的是 --c-brand-50，在暗色组里是 #251429 —— 一整行铺开读成"暗红/栗色"，
   与全页深蓝对峙。改成品牌紫品的半透明叠色 + 左侧一道实心竖条，
   既保住"这一行是你正在看的"，也不引入第五种颜色。 */
html[data-template=quest] .table tr.is-cur{background:rgba(208,139,220,.14)}
html[data-template=quest] .table tr.is-cur td:first-child{box-shadow:inset 3px 0 0 var(--c-brand-600)}
html[data-template=quest] .table tr.is-cur:hover td{background:rgba(208,139,220,.18)}
html[data-template=quest] .faq{border-top:1px solid rgba(154,172,255,.12)}
html[data-template=quest] .faq__item{border-bottom:1px solid rgba(154,172,255,.12)}
html[data-template=quest] .faq summary{color:#E9EEFF}
html[data-template=quest] .faq summary:hover{color:#F3DAF8}
html[data-template=quest] .faq summary::after{color:var(--q-cyan);font-weight:600}
html[data-template=quest] .faq__a{color:var(--c-ink-500)}
html[data-template=quest] .empty__title{color:#E9EEFF}
html[data-template=quest] .empty__desc{color:var(--c-ink-400)}
html[data-template=quest] .empty__alt{
  background:rgba(154,172,255,.07);border:1px solid rgba(154,172,255,.16);
  border-radius:999px;color:#C9D2EE;
}
html[data-template=quest] .empty__alt:hover{background:rgba(208,139,220,.16);color:#FBEFFE}

/* 页脚：整页最深的一块，顶部一条霓虹线把它和正文切开 */
html[data-template=quest] .ft{
  position:relative;background:#060A15;border-top:1px solid var(--q-line);color:#9AA6CC;
}
html[data-template=quest] .ft::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(208,139,220,.6) 30%,rgba(70,224,192,.5) 70%,transparent);
  opacity:.5;
}
html[data-template=quest] .ft__title{color:#C9D2EE;font-size:11px;font-weight:700;letter-spacing:.10em}
html[data-template=quest] .ft__link{color:#9AA6CC}
html[data-template=quest] .ft__link:hover{color:#F3DAF8}
html[data-template=quest] .ft__icp,
html[data-template=quest] .ft__legal{color:#6E7AA3}

/* 轻提示：深底上反过来用亮底深字，出现时才抓得住眼睛 */
html[data-template=quest] .toast{
  background:#E9EEFF;color:#10162C;border-radius:12px;
  box-shadow:0 12px 30px rgba(2,5,14,.6),0 0 0 1px rgba(208,139,220,.4);
}

/* ── ⑯ 焦点环：深底一律走青绿；亮底按键走"深内环 + 青绿外环" ──────────────
   青绿在 #0A0F1E 上是 9.6:1，比品牌紫品的 7.3:1 更跳，而且紫品同时是链接色，
   用它做焦点环会出现"焦点与链接分不清"。 */
html[data-template=quest] a:focus-visible,
html[data-template=quest] button:focus-visible,
html[data-template=quest] input:focus-visible,
html[data-template=quest] summary:focus-visible{
  outline:2px solid var(--q-cyan);outline-offset:2px;
  box-shadow:0 0 0 4px rgba(70,224,192,.18);
  border-radius:var(--r-2);
}
/* 亮底按键（行动键 / 复制 / 选中 tab）上，青绿内环会糊进按钮本身：
   用 2px 深底隔开 + 4px 青绿外环，两层都对得上 */
html[data-template=quest] .search__btn:focus-visible,
html[data-template=quest] .copy:focus-visible,
html[data-template=quest] .qbox__tab.is-on:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px #0A0F1E,0 0 0 4px var(--q-cyan),0 8px 20px rgba(208,139,220,.3);
}
html[data-template=quest] .skip-link{background:var(--c-brand-600);color:#1B0C22}

/* ── ⑰ 动效：只留三处，且都服务于"手感"而不是"炫技" ─────────────────────
   ① 状态灯呼吸（数据是活的）；② 任务条目悬停时定位点变亮；③ 按键按下位移。
   入场动画沿用 app.css 的 .rise（0.1s 错开上浮），不另做一套。 */
@keyframes qspointer{
  0%,100%{box-shadow:0 0 0 3px rgba(70,224,192,.18),0 0 10px rgba(70,224,192,.7)}
  50%{box-shadow:0 0 0 5px rgba(70,224,192,.10),0 0 16px rgba(70,224,192,.95)}
}
html[data-template=quest] .qbox__live{animation:qspointer 2.8s var(--ease) infinite}
@media (prefers-reduced-motion:reduce){
  html[data-template=quest] .qbox__live{animation:none}
  html[data-template=quest] .panel:hover,
  html[data-template=quest] .tool-way:hover,
  html[data-template=quest] .side-card:hover,
  html[data-template=quest] .chip:hover{transform:none}
}

/* ── ⑱ 断点 ─────────────────────────────────────────────────────────────── */
/* <900：右栏得分看板整块不渲染（app.css 已办），查询面板内边距收一档；
   首屏装饰在 900 以下不显示 —— 手机首屏每一像素归标题与输入框。 */
@media (max-width:899px){
  html[data-template=quest] .qbox__card{padding:var(--s-2);border-radius:16px}
  html[data-template=quest] .qbox::before,
  html[data-template=quest] .qbox::after,
  html[data-template=quest] .qbox__card::before,
  html[data-template=quest] .qbox__card::after{display:none}
}
/* <520：页头站名与导航抢位置 —— 徽章方块 34px 太大，收成 28；输入框里的放大镜撤掉
   （44px 左内边距在 390 上等于白占一格，而 tab 已经说明了查什么），按钮收窄到 64，
   让占位词「输入 6 位邮编，如 530000」整句放得下。 */
@media (max-width:519px){
  html[data-template=quest] .hdr__logo svg{width:28px;height:28px;padding:6px;border-radius:9px}
  html[data-template=quest] .hdr__logo{gap:8px;font-size:14px}
  html[data-template=quest] .hdr__link{padding:0 9px;font-size:13px}
  html[data-template=quest] .hero__title{font-size:23px;text-shadow:0 0 18px rgba(208,139,220,.28)}
  html[data-template=quest] .qbox__tab{padding:0 11px}
  html[data-template=quest] .search__icon{display:none}
  html[data-template=quest] .search--big .search__input{padding-left:14px}
  html[data-template=quest] .search__btn{min-width:64px;padding:0 12px;font-size:13px}
  html[data-template=quest] .steps li{padding-left:34px}
  html[data-template=quest] .steps li::before{width:24px;height:24px;font-size:11px}
  html[data-template=quest] .steps li::after{left:11.5px;top:28px}
}
/* ≤374：full 版输入框与行动键改成上下两段 —— 横排时输入框只剩 184px，
   占位词「输入 6 位邮编，如 530000」差 26px 放不下（guide 那套的同一条结论）。 */
@media (max-width:374px){
  html[data-template=quest] .qbox--full .search--big .search__field{flex-wrap:wrap}
  html[data-template=quest] .qbox--full .search--big .search__input{flex:1 1 100%}
  html[data-template=quest] .qbox--full .search--big .search__btn{
    flex:1 1 100%;width:100%;min-width:0;height:44px;
  }
}