/* naaticcl.com 全站外观层 v2（2026-10-09）
   首页 10-09 换成浅色光晕版（build_home_v2.py），这一份让其余两千多页长成同一个样子：
   浅底 + 顶部彩色光晕 + 毛玻璃顶栏 + 悬浮卡片（大圆角、软投影）+ 统一按钮/表格/页脚 + 完整深色模式。
   只管长相、不动文字。各页模板自己的 <style> 在前、这份在后（同权重后写的赢）——
   所以引用它的 <link> 必须放在页面 </style> 之后（brand.UI）。 */

:root{
 --paper:#fbf8f3;--paper2:#f3ede1;--card:#fffdf9;--ink:#14181f;--dim:#4b5462;--mut:#6b6559;--faint:#7d766a;
 --pen:#d6301c;--pen-deep:#a81f0f;--pen-soft:#fdeeea;--brass:#a8792c;--ok:#12734a;--ok-soft:#e5f3eb;
 --warn:#9a5600;--warn-soft:#fdf0dc;--bad-soft:#fbe7e3;
 --line:#e8e0d2;--line2:#d8cfbc;--glass:rgba(251,248,243,.82);--th:#f6f0e6;--rowh:#f8f3ea;--footbg:#f6f1e8;
 --sh1:0 1px 2px rgba(20,24,31,.04),0 6px 18px -10px rgba(20,24,31,.16);
 --sh2:0 2px 6px rgba(20,24,31,.05),0 22px 44px -18px rgba(20,24,31,.26);
 --r:16px;
 --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Noto Sans",sans-serif;
 --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* overflow-x:hidden 会让 body 变成滚动容器，顶栏 sticky 就失效；clip 只裁不滚 */
html,body{overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(214,48,28,.16)}
:focus-visible{outline:2px solid var(--pen);outline-offset:2px;border-radius:6px}

/* 顶栏在 assets/gnav.css（全站唯一的一份，brand.py 内联进每页）。这里只留页脚字标 */
.foot .wd{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:18px;
 font-weight:750;letter-spacing:-.015em;color:var(--ink);text-decoration:none;flex:none}
.foot .wd svg{width:28px;height:28px;flex:none}
.foot .wd b{font-weight:750}
.foot .wd i{font-style:normal;color:var(--pen)}

/* ── 正文区顶部的光晕（跟首页同一组红/金/紫，淡一档，不动画——子页要的是安静） ── */
main{position:relative;isolation:isolate}
main::before,main::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%}
main::before{width:620px;height:520px;inset-inline-end:-260px;top:-200px;
 background:radial-gradient(closest-side,rgba(255,122,89,.22),rgba(214,48,28,.07) 55%,transparent),
            radial-gradient(closest-side at 18% 78%,rgba(167,139,250,.14),transparent 70%)}
main::after{width:560px;height:460px;inset-inline-start:-300px;top:-90px;
 background:radial-gradient(closest-side,rgba(255,206,120,.30),rgba(255,170,90,.08) 55%,transparent)}

/* ── 字 ── */
main h1{font-family:var(--sans);font-weight:800;letter-spacing:-.028em;line-height:1.12;
 font-size:clamp(30px,4.4vw,46px);margin:12px 0 16px;text-wrap:balance;color:var(--ink)}
main h1 .native{color:var(--brass)}
:where(main,article)>h2{font-family:var(--sans);font-weight:750;letter-spacing:-.018em;line-height:1.25;
 font-size:clamp(21px,2.5vw,26px);margin:52px 0 14px;text-wrap:balance}
:where(main,article)>h3{font-weight:700;font-size:18.5px;letter-spacing:-.01em;line-height:1.35;margin:30px 0 8px}
:where(main,article)>h2[id],:where(main,article)>h3[id]{scroll-margin-top:86px}
.lede{font-size:18px;line-height:1.65;color:#3b3731;max-width:42em}
.k,.kicker{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.k a,.kicker a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(168,121,44,.35)}
.k a:hover,.kicker a:hover{color:var(--pen);border-color:currentColor}
:where(main a:not([class])){color:var(--pen-deep)}
:where(main) :where(p,li,td,dd,blockquote,figcaption,.note,.upd) a{color:var(--pen-deep);text-decoration:underline;
 text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(214,48,28,.38);transition:color .15s,text-decoration-color .15s}
:where(main) :where(p,li,td,dd,blockquote,figcaption,.note,.upd) a:hover{color:var(--pen);text-decoration-color:currentColor}
.note,.upd{color:var(--mut)}

/* 长文：段落之间要有气口（模板全局 *{margin:0} 把段距清零了，指南正文挤成一坨） */
article>p,article>ul,article>ol,article>blockquote,main.wrap>p{margin:0 0 16px}
article>ul,article>ol{padding-inline-start:1.35em}
article li{margin:6px 0}
article li::marker{color:var(--brass)}
article strong,article b{color:var(--ink)}

/* ── 按钮 ── */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--pen);color:#fff;
 text-decoration:none;font-weight:650;font-size:15.5px;line-height:1.3;padding:13px 24px;border-radius:12px;border:0;
 box-shadow:0 10px 24px -10px rgba(214,48,28,.65);transition:transform .15s,box-shadow .15s,background .15s}
.cta:hover{transform:translateY(-1px);background:#c92b18;box-shadow:0 14px 28px -10px rgba(214,48,28,.72)}
.cta.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line2);box-shadow:var(--sh1)}
.cta.ghost:hover{background:var(--card);border-color:#cbbfa8;box-shadow:var(--sh2)}
.ctarow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0 6px}
.ctarow .cta{margin:0}

/* ── 卡片：大圆角 + 软投影，能点的悬停时浮起来 ── */
.lang,.seg,.tr,section.v,.box,.alertf,.ctabox,.quick,ul.titles li,ul.terms li{background:var(--card);border:1px solid var(--line);
 border-radius:var(--r);box-shadow:var(--sh1)}
.lang{padding:20px 22px;margin-bottom:14px}
.seg,.tr{padding:14px 18px}
.tr.lote,.seg.lote{border-inline-start:4px solid var(--pen)}
.grid a,nav.rel a,.rel a,.toc a,.doms li,.hub li,ul.terms li{transition:transform .18s,box-shadow .18s,border-color .18s}
.grid a{background:var(--card);border:1px solid var(--line);border-radius:13px;box-shadow:var(--sh1);padding:13px 16px;font-weight:600}
.grid a small{font-weight:400}
.grid a:hover,nav.rel a:hover,.rel a:hover,ul.terms li:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:#e1c8bc}
nav.rel,.rel{display:flex;flex-wrap:wrap;gap:9px}
nav.rel a,.rel a{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:8px 13px;font-size:14px;
 color:var(--ink);text-decoration:none;box-shadow:0 1px 2px rgba(20,24,31,.04);line-height:1.4}
.toc a,.doms li{background:var(--card);border:1px solid var(--line);border-radius:999px;box-shadow:0 1px 2px rgba(20,24,31,.04)}
.toc a:hover{border-color:#e1c8bc;transform:translateY(-1px)}

/* 「快速回答」——给 AI 摘要引用的那一段，做成首屏最醒目的卡 */
.quick{border-color:#f1d2c7;background:#fff5f0;border-inline-start:4px solid var(--pen);padding:16px 20px;margin:18px 0 26px}
.quick p{font-size:16.5px;line-height:1.7}
.native-lede{background:#fff5f0;border:1px solid #f1d2c7;border-inline-start:4px solid var(--pen);border-radius:var(--r);padding:12px 16px}

/* 页尾的「先练一篇」卡：带一点光晕，跟首页收尾同一个语气 */
.ctabox{position:relative;overflow:hidden;padding:24px 26px;margin:40px 0;
 background:radial-gradient(420px 200px at 100% 0,rgba(255,122,89,.14),transparent 70%),
            radial-gradient(360px 200px at 0 100%,rgba(255,206,120,.18),transparent 70%),var(--card)}
.ctabox strong{display:block;font-size:19px;letter-spacing:-.01em;margin-bottom:4px}
.ctabox p{color:var(--dim);margin:0 0 6px}

/* ── 表格：放进卡片里，表头小号大写，行之间一根细线 ── */
.tbl,.tdwrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1);
 overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0 24px}
.tbl table,.tdwrap table,article .tbl table{width:100%;border-collapse:collapse;margin:0;font-size:15px}
.tbl th,.tbl td,.td th,.td td{border:0;border-bottom:1px solid var(--line);padding:11px 16px;text-align:start;vertical-align:top}
.tbl tr:last-child td,.td tr:last-child td{border-bottom:0}
.tbl th,.td th{background:var(--th);font-size:11.5px;font-weight:650;letter-spacing:.08em;
 text-transform:uppercase;color:var(--mut);white-space:nowrap}
.tbl tbody tr:hover td,.td tr:hover td{background:var(--rowh)}
table.facts{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);
 border-radius:var(--r);box-shadow:var(--sh1);overflow:hidden;margin:18px 0}
table.facts th,table.facts td{border:0;border-bottom:1px solid var(--line);padding:13px 18px}
table.facts tr:last-child th,table.facts tr:last-child td{border-bottom:0}
table.facts th{color:var(--ink);font-weight:600}
table.facts td{color:var(--dim)}
/* 考期表：座位数做成小胶囊，一眼分出有座 / 快满 / 已满 */
.td a{color:var(--ink);font-weight:600;text-decoration:none}
.td a:hover{color:var(--pen)}
.td .ok,.td .few,.td .full{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:650;white-space:nowrap}
.td .ok{background:var(--ok-soft);color:var(--ok)}
.td .few{background:var(--warn-soft);color:var(--warn)}
.td .full{background:var(--bad-soft);color:var(--pen-deep)}
.td td .note{font-size:12.5px}

/* 表单（考位提醒） */
.alertf{padding:18px 20px;margin:12px 0 24px}
.alertrow input,.alertrow select,.pick select{background:var(--paper);border:1px solid var(--line2);border-radius:11px;
 color:var(--ink);transition:border-color .15s,box-shadow .15s}
.alertrow input:focus,.alertrow select:focus,.pick select:focus{outline:0;border-color:var(--pen);box-shadow:0 0 0 3px rgba(214,48,28,.14)}
.alertrow button,.copy{background:var(--ink);color:#fffdf9;border-radius:11px;font-weight:650;transition:transform .15s}
.alertrow button:hover,.copy:hover{transform:translateY(-1px)}

/* ── 问答折叠 ── */
:where(main,article)>details:not(.also):not(.otp){background:var(--card);border:1px solid var(--line);border-radius:14px;
 box-shadow:var(--sh1);padding:15px 20px;margin:10px 0}
:where(main,article)>details:not(.also):not(.otp)>summary{cursor:pointer;font-weight:650;list-style:none;position:relative;padding-inline-end:28px}
:where(main,article)>details:not(.also):not(.otp)>summary::-webkit-details-marker{display:none}
:where(main,article)>details:not(.also):not(.otp)>summary::after{content:"";position:absolute;inset-inline-end:2px;top:.45em;width:8px;height:8px;
 border-inline-end:2px solid var(--mut);border-bottom:2px solid var(--mut);transform:rotate(45deg);transition:transform .2s}
:where(main,article)>details[open]:not(.also):not(.otp)>summary::after{transform:rotate(-135deg);top:.65em}
:where(main,article)>details:not(.also):not(.otp)>p{margin:10px 0 0;color:var(--dim)}

/* ── 指南：右侧「本页目录」，跟着滚动高亮当前小节 ── */
main.guide{max-width:1110px}
main.guide article{position:relative;max-width:760px}
.otp{margin:4px 0 26px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh1);padding:12px 16px}
.otp summary{cursor:pointer;font-weight:650;font-size:14px;color:var(--ink)}
.otp ol{list-style:none;margin:10px 0 2px;padding:0;counter-reset:otp}
.otp li{margin:0;counter-increment:otp}
.otp a{display:block;padding:5px 10px;border-radius:8px;font-size:14px;line-height:1.45;color:var(--dim);text-decoration:none;
 border-inline-start:2px solid transparent;transition:background .15s,color .15s,border-color .15s}
.otp a:hover{background:rgba(20,24,31,.04);color:var(--ink)}
.otp a.on{color:var(--pen-deep);border-color:var(--pen);background:var(--pen-soft)}
@media(min-width:1180px){
 .otp-rail{position:absolute;top:0;bottom:0;inset-inline-start:calc(100% + 56px);width:250px}
 .otp{position:sticky;top:86px;margin:0;max-height:calc(100vh - 110px);overflow:auto;background:transparent;border:0;box-shadow:none;padding:0}
 .otp summary{list-style:none;pointer-events:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);padding:0 10px}
 .otp summary::-webkit-details-marker{display:none}
}
@media(max-width:1179px){main.guide{max-width:860px}}

/* ── 指南目录页 / 对话目录：一张张卡片，整张可点 ── */
.hub ul{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:12px}
.hub li{position:relative;margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--sh1);line-height:1.45}
.hub li>a{font-weight:650;color:var(--ink);text-decoration:none}
.hub li>a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.hub li:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:#e1c8bc}
.hub li:hover>a{color:var(--pen-deep)}
ul.hub{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
ul.hub li{padding:12px 16px;font-size:15px}
.hub .d{display:block;font-size:14px;color:var(--mut);margin-top:6px;line-height:1.55}

/* ── 语种页：实时考期卡（产品界面感：悬浮、带「实时」小灯） ── */
.ncd{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh2);padding:16px 18px;max-width:520px;margin:18px 0 10px}
.ncd-head{display:flex;align-items:center;gap:8px;font-weight:700;margin:0 0 4px}
.ncd-head::before{content:"";width:8px;height:8px;border-radius:50%;background:#1f9d62;box-shadow:0 0 0 0 rgba(31,157,98,.5);animation:ncdpulse 2.2s ease-out infinite;flex:none}
@keyframes ncdpulse{70%{box-shadow:0 0 0 8px rgba(31,157,98,0)}100%{box-shadow:0 0 0 0 rgba(31,157,98,0)}}
.ncd-body{margin:2px 0;color:var(--ink)}
.ncd-sub{font-size:13.5px;color:var(--mut)}
.ncd-link{display:inline-block;margin-top:8px;color:var(--pen-deep);font-weight:650;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(214,48,28,.38)}
.ncd-meta{font-size:12px;color:var(--faint);margin-top:8px}
.ncd-pick{display:block;width:100%;max-width:340px;margin:10px 0 8px;font:inherit;font-size:15px;padding:9px 12px;border:1px solid var(--line2);border-radius:11px;background:var(--paper);color:var(--ink)}
.ncd-pick:focus{outline:0;border-color:var(--pen);box-shadow:0 0 0 3px rgba(214,48,28,.14)}
@media(min-width:900px){.ncd{transform:perspective(1100px) rotateY(-5deg) rotateX(2.5deg);transform-origin:0 50%;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
 .ncd:hover{transform:none}}
[dir=rtl] .ncd{transform-origin:100% 50%}

/* ── 页脚：浅色、四栏站内链接 ── */
footer.foot{margin-top:80px;padding:0;background:var(--footbg);color:var(--mut);
 border-top:1px solid var(--line);font-size:13.5px;line-height:1.7}
.foot-in{max-width:1180px;margin:0 auto;padding:46px 22px 54px}
.foot-top{display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:28px}
.foot-brand p{margin:10px 0 0;max-width:30em}
.foot-brand .foot-note{display:block;color:var(--mut)}
.foot-brand .foot-note a{color:var(--dim)}
.foot-col b{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.foot-col a{display:block;padding:3px 0;color:var(--dim);text-decoration:none}
.foot-col a:hover{color:var(--pen)}
.foot-legal{margin:30px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mut)}
.foot-legal a{color:var(--dim);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line2)}
@media(max-width:960px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ── 手机 ── */
@media(max-width:640px){
 main h1{font-size:clamp(27px,8vw,34px)}
 main .cta{display:flex;width:100%;margin-inline-start:0;margin-inline-end:0}
 main .cta.ghost{margin-top:8px}
 .ctarow .cta.ghost{margin-top:0}
 .td th:nth-child(4),.td td:nth-child(4){display:none}
 .td td .note{display:block}
 .lede{font-size:16.5px}
 main::before{width:420px;height:380px;inset-inline-end:-220px;top:-150px}
 main::after{width:380px;height:340px;inset-inline-start:-240px}
 .tbl th,.tbl td,.td th,.td td{padding:10px 12px}
 .facts th,.facts td{padding:11px 14px}
 .ctabox{padding:20px}
}

/* ── 深色模式：整页一起变，不再出现「浅底配深色块」 ── */
@media(prefers-color-scheme:dark){
 :root{--paper:#141318;--paper2:#1d1c22;--card:#1c1b21;--ink:#f0ebe1;--dim:#cbc4b7;--mut:#a9a194;--faint:#958e81;
  --pen:#f0563d;--pen-deep:#ff8f78;--pen-soft:#2c1714;--brass:#d9ae62;--ok:#53c992;--ok-soft:#14281e;--warn:#f3b866;--warn-soft:#2c2113;--bad-soft:#331a16;
  --line:#2f2d35;--line2:#403d48;--glass:rgba(20,19,24,.8);--th:#211f26;--rowh:#201f25;--footbg:#17161b;
  /* 手写页（问答/登录/语种表…）沿用的旧变量名：同样给深色值，不然深底上是深字 */
  --ink-dim:#cbc4b7;--ink-faint:#a9a194;--ink-2:#cbc4b7;--muted:#a9a194;--paper-2:#1d1c22;--line-2:#403d48;--hairline:#2a2830;--canvas:#141318;--canvas-2:#1d1c22;--white:#1c1b21;--brass:#d9ae62;--brass-soft:#2a2216;--blue-soft:#2c1714;
  --sh1:0 1px 2px rgba(0,0,0,.35),0 8px 22px -12px rgba(0,0,0,.7);--sh2:0 2px 6px rgba(0,0,0,.4),0 24px 48px -18px rgba(0,0,0,.85)}
 html,body{background:var(--paper);color:var(--ink)}
 .foot .wd svg rect{fill:#1c1b21;stroke:#3a3842}
 main::before{opacity:.55}main::after{opacity:.35}
 .lede,p.lede,.facts td,.ctabox p,.hub .d,ul.titles span,ul.terms span,.tr .who,.meta,.upd,.note,.terms .how{color:var(--dim)}
 .tr .n,ul.titles i{color:var(--faint)}
 .quick,.native-lede{background:#2a1714;border-color:#4a2620}
 .quick p,.native-lede{color:var(--ink)}
 article th,article td,.rel a,nav.rel a,.tr,.seg,section.v,.lang,details,.doms li,.toc a,.grid a{border-color:var(--line)}
 .seg,.tr,section.v,.lang,.box,.alertf,.ctabox,.grid a,.rel a,nav.rel a,.toc a,.doms li,ul.titles li,ul.terms li,.hub li,.snip{background:var(--card);color:var(--ink)}
 .row,section.v p,.seg p,.tr p,.lang h2,.grid a,ul.titles b,ul.terms b{color:var(--ink)}
 .lang h2 small,.grid a small{color:var(--faint)}
 .cta.ghost{background:var(--card);color:var(--ink);border-color:var(--line2)}
 .cta{background:#d6301c;color:#fff}
 .cta:hover{background:#e0442f}
 .snip{border-color:var(--line)}
 .copy,.alertrow button{background:#f0ebe1;color:#14181f}
 .others a{color:var(--dim);border-color:var(--line2)}
 .stores a{background:#f0ebe1;color:#14181f}
 .k a,.kicker a{border-color:rgba(217,174,98,.4)}
 .facts th{color:var(--ink)}
 .foot-col b{color:var(--ink)}
 .ncd-head::before{background:#3ccf8a}
}

/* 系统设了「减少动态效果」：不浮、不转、不闪 */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .cta,.grid a,nav.rel a,.rel a,.toc a,.hub li,ul.terms li,.ncd{transition:none}
 .cta:hover,.grid a:hover,nav.rel a:hover,.rel a:hover,.toc a:hover,.hub li:hover,ul.terms li:hover{transform:none}
 .ncd,.ncd:hover{transform:none}
 .ncd-head::before{animation:none}
}
@media print{footer.foot,main::before,main::after,.otp-rail,.ctabox{display:none}}

/* 语种总表（/languages）：表格进卡片；手机上收起与第一列重复的英文名一列，四列塞得下、不用横滑 */
.twrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh1);margin:20px 0}
.twrap table{margin:0}
.twrap th{background:var(--th);font-size:11.5px;text-transform:uppercase;letter-spacing:.08em}
.twrap tr:last-child td{border-bottom:0}
@media(max-width:640px){.twrap table{min-width:0}.twrap th:nth-child(2),.twrap td:nth-child(2){display:none}
 .twrap th,.twrap td{padding:10px 9px}.twrap th{letter-spacing:.03em;font-size:10.5px}
 .twrap td:first-child a{display:block;font-size:13px;margin-top:1px}.twrap td:last-child{font-size:13px;line-height:1.4}}