/* ============ 正则手册 · Excel 联动 | 浅色主题 ============ */
:root{
  --bg:#f6f8fb;
  --surface:#ffffff;
  --surface2:#f2f5fa;
  --line:#e2e8f0;
  --line2:#d3dce8;
  --ink:#132033;
  --ink2:#3d5068;
  --muted:#6b7c93;
  --brand:#2456e6;
  --brand2:#1e40af;
  --brand-soft:#e9efff;
  --brand-line:#c5d6ff;
  --ok:#0f9d6a;
  --ok-soft:#e6f7f0;
  --warn:#b45309;
  --warn-soft:#fdf1e2;
  --err:#c03a2b;
  --err-soft:#fdeceb;
  --mark-bg:#ffe9a3;
  --mark-ink:#4d3800;
  --radius:14px;
  --shadow:0 1px 2px rgba(15,28,46,.05),0 6px 24px -12px rgba(15,28,46,.12);
  --font:ui-sans-serif,"Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"Cascadia Code","JetBrains Mono",Consolas,"Courier New",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:15.5px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
code,kbd,.mono{font-family:var(--mono);font-size:.9em}
p{margin:.55rem 0}
ul,ol{margin:.4rem 0 .8rem;padding-left:1.4rem}
li{margin:.22rem 0}
h1,h2,h3,h4{line-height:1.35;letter-spacing:.2px}
h2{margin:0 0 .4rem;font-size:1.72rem}
h3{margin:1.6rem 0 .5rem;font-size:1.16rem}
h4{margin:1.1rem 0 .3rem;font-size:1rem}
b,strong{font-weight:650}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;
  padding:10px 22px;background:rgba(255,255,255,.86);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:center;gap:9px;font-weight:750;font-size:15.5px;color:var(--ink);white-space:nowrap}
.logo-badge{
  width:30px;height:30px;border-radius:8px;flex:none;
  background:linear-gradient(135deg,#2456e6,#7c3aed);
  color:#fff;display:grid;place-items:center;font:700 15px var(--mono);box-shadow:0 4px 10px -3px rgba(36,86,230,.5);
}
.topbar .crumbs{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-pills{margin-left:auto;display:flex;gap:7px}
.pill{
  font-size:12px;color:var(--ink2);background:var(--surface2);
  border:1px solid var(--line);padding:3px 10px;border-radius:999px;white-space:nowrap;
}

/* ---------- Hero ---------- */
.hero{
  padding:52px 24px 40px;text-align:center;
  background:
    radial-gradient(900px 300px at 18% -10%,rgba(36,86,230,.14),transparent 60%),
    radial-gradient(800px 280px at 85% -20%,rgba(124,58,237,.12),transparent 55%),
    linear-gradient(180deg,#eef3ff,var(--bg) 75%);
  border-bottom:1px solid var(--line);
}
.hero h1{font-size:clamp(1.7rem,4vw,2.5rem);margin:0 0 10px;font-weight:800;letter-spacing:.4px}
.hero h1 .grad{background:linear-gradient(90deg,#2456e6,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{color:var(--ink2);max-width:760px;margin:8px auto 18px;font-size:16px}
.hero-badges{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.chip{font-size:12.5px;font-weight:600;color:var(--brand2);background:var(--brand-soft);border:1px solid var(--brand-line);padding:4px 12px;border-radius:999px}
.hero-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  font:600 14px var(--font);color:var(--ink2);background:#fff;
  border:1px solid var(--line2);border-radius:10px;padding:7px 16px;
  transition:.15s;user-select:none;white-space:nowrap;
}
.btn:hover{border-color:var(--brand);color:var(--brand);text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 6px 16px -8px rgba(36,86,230,.7)}
.btn.primary:hover{background:var(--brand2)}
.btn.ghost{background:transparent}
.btn.sm{padding:3px 10px;font-size:12.5px;border-radius:8px}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px;height:15px;flex:none}

/* ---------- 布局 ---------- */
.layout{
  display:grid;grid-template-columns:264px minmax(0,1fr);
  gap:10px;max-width:1240px;margin:0 auto;padding:26px 20px 90px;
  align-items:start;
}
aside.toc{
  position:sticky;top:66px;max-height:calc(100vh - 86px);overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 8px;box-shadow:var(--shadow);
}
aside.toc .toc-cap{font-size:11.5px;font-weight:700;letter-spacing:1.5px;color:var(--muted);padding:2px 12px 8px;text-transform:uppercase}
aside.toc a{
  display:block;padding:5px 12px;border-radius:8px;font-size:13.5px;color:var(--ink2);line-height:1.4;
  border-left:2px solid transparent;margin:1px 0;
}
aside.toc a:hover{background:var(--surface2);text-decoration:none;color:var(--ink)}
aside.toc a.on{color:var(--brand);background:var(--brand-soft);border-left-color:var(--brand);font-weight:600}
aside.toc .back{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}

main{min-width:0}
article{max-width:900px;margin:0 auto}
section{margin-top:46px;scroll-margin-top:76px}
.sec-head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.sec-num{
  flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font:800 15px var(--mono);color:var(--brand);background:var(--brand-soft);
  border:1px solid var(--brand-line);
}
.lead{color:var(--ink2);font-size:15.5px;max-width:840px}
hr.sep{border:0;border-top:1px solid var(--line);margin:44px auto;max-width:820px}

/* ---------- 通用卡片 ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:18px 20px}
.callout{
  border-radius:12px;padding:13px 16px 13px 44px;margin:14px 0;position:relative;font-size:14.5px;
  background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--ink2);
}
.callout::before{
  content:"💡";position:absolute;left:15px;top:12px;font-size:16px;
}
.callout.ok{background:var(--ok-soft);border-color:#bfe8d8}
.callout.ok::before{content:"✅"}
.callout.warn{background:var(--warn-soft);border-color:#f3ddc0}
.callout.warn::before{content:"⚠️"}
.callout.err{background:var(--err-soft);border-color:#f2cbc6}
.callout.err::before{content:"🚫"}
.callout b{color:var(--ink)}

/* ---------- 代码 ---------- */
.i-code{background:#edf1f8;border:1px solid #e0e6f0;color:#1d3a8f;padding:1px 7px;border-radius:6px;font-size:.86em;white-space:nowrap}
pre.block{
  background:#f4f6fb;border:1px solid var(--line);border-radius:12px;
  padding:13px 16px;overflow-x:auto;font-family:var(--mono);font-size:13.2px;line-height:1.7;
  color:var(--ink);white-space:pre;tab-size:4;
}
pre.block .cm{color:#7d8ea5;user-select:none}
.formula{
  font-family:var(--mono);font-size:13.4px;line-height:1.8;background:var(--brand-soft);
  border:1px dashed var(--brand-line);border-radius:11px;padding:10px 14px;margin:10px 0;
  overflow-x:auto;white-space:pre-wrap;word-break:break-all;color:#16306f;
}
.formula .fname{color:var(--brand2);font-weight:700}
.formula .estr{color:#0f7a5f}
.formula .num{color:#9a3412}
.formula .cm{color:#8aa0c0;font-style:italic}
kbd{
  background:#fff;border:1px solid var(--line2);border-bottom-width:2px;border-radius:6px;
  padding:0 7px;font:600 12px var(--mono);color:var(--ink2);
}

/* ---------- 表格 ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:14px 0;background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.tbl th{
  background:var(--surface2);color:var(--ink2);font-weight:650;text-align:left;
  padding:9px 12px;border-bottom:1px solid var(--line2);font-size:13px;white-space:nowrap;
}
.tbl td{padding:8px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:#fafcff}
.tbl .pat{font-family:var(--mono);font-size:12.8px;color:#9a3412;white-space:nowrap}
.tbl .pos{color:var(--ok);font-weight:700}
.tbl .neg{color:var(--err);font-weight:700}
.tbl td .sep{color:#c3ccd9;font-size:11px}
.tbl .mtxt{font-family:var(--mono);font-size:12.5px;background:#eaf6ef;color:#0b6e4a;border-radius:4px;padding:0 5px}

/* ---------- 语法组渲染 ---------- */
.grammar{margin-top:10px}
.gcard{margin:14px 0}
.gcard .gtitle{font-weight:700;font-size:15px;padding:13px 18px 0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.gcard .gtitle small{color:var(--muted);font-weight:400}
.gcard .gbody{padding:4px 18px 16px}
.gtips{font-size:13.5px;color:var(--muted);margin-top:10px}
.gtips b{color:var(--ink2)}
table.tbl td.demo .trybtn{margin-left:8px;opacity:.55}
table.tbl tr:hover td.demo .trybtn{opacity:1}

/* ---------- 速查卡 ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;margin:16px 0}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.pcard .pt{font-weight:650;font-size:14px}
.pcard .pd{font-size:13px;color:var(--muted);min-height:20px}
.pcard .pbody{flex:1}
.pcard .patbox{
  font-family:var(--mono);font-size:12.6px;background:#f4f6fb;border:1px solid var(--line);
  color:#16306f;padding:7px 10px;border-radius:9px;overflow-x:auto;white-space:nowrap;
}
.pcard .pops{display:flex;gap:6px;flex-wrap:wrap}
.pcard .warn-flag{font-size:11.5px;color:var(--warn);margin-top:6px}

/* ---------- Excel 函数卡 ---------- */
.fn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:14px;margin:16px 0}
.fn-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.fn-head{padding:13px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#f7faff,#eef3ff)}
.fn-head .fn-name{font:800 15.5px var(--mono);color:var(--brand2)}
.fn-head .fn-tag{font-size:11.5px;color:#fff;background:var(--brand);border-radius:6px;padding:1px 8px;margin-left:8px;vertical-align:2px}
.fn-body{padding:12px 16px;font-size:13.5px;flex:1}
.fn-body code.i-code{font-size:12.2px}
.fn-foot{border-top:1px dashed var(--line);background:var(--surface2);padding:8px 16px;font-size:12.5px;color:var(--muted)}

/* 参数行 */
.sig{
  font-family:var(--mono);font-size:13.6px;background:#fff;border:1px solid var(--brand-line);
  border-radius:10px;padding:12px 16px;margin:8px 0 14px;overflow-x:auto;white-space:nowrap;color:#16306f;
}
.sig b{color:var(--brand2)}
.sig .opt{color:var(--muted)}
.arglist{margin:0;padding:0;list-style:none}
.arglist li{padding:7px 0 7px 30px;border-bottom:1px dashed var(--line);position:relative;font-size:14px}
.arglist li:last-child{border-bottom:0}
.arglist .an{position:absolute;left:0;top:8px;font:650 12px var(--mono);color:var(--brand);background:var(--brand-soft);border-radius:6px;padding:0 6px;line-height:20px}
.mode-note{margin-top:8px;font-size:13px;color:var(--ink2);background:var(--surface2);border-radius:9px;padding:8px 12px}
.mode-note code{background:#fff}

/* ---------- 案例 ---------- */
.case{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);margin:18px 0;overflow:hidden}
.case-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#ffffff,#f7faff)}
.case-no{font:800 13px var(--mono);color:#fff;background:var(--brand);border-radius:8px;padding:2px 9px}
.case-head .ct{font-weight:700;font-size:15px}
.tag{font-size:11.5px;padding:1.5px 9px;border-radius:999px;font-weight:600}
.tag.test{color:#0e6bb8;background:#e3f1fd}
.tag.extract{color:#0f7a5f;background:#e2f5ec}
.tag.clean{color:#a45a08;background:#fdeed7}
.tag.replace{color:#8a4e9e;background:#f4e8fb}
.tag.lookup{color:#b8346c;background:#fbe4ef}
.case-body{padding:14px 18px 18px}
.case-desc{font-size:14.3px;color:var(--ink2)}
.case-desc b{color:var(--ink)}
.case .formula{margin:10px 0 6px}
.case .steps{margin:8px 0 4px;font-size:13.5px;color:var(--ink2)}
.case .steps b{color:var(--brand2)}
table.case-tbl td.tok{white-space:nowrap}
table.case-tbl .out{color:var(--ink);font-family:var(--mono);font-size:12.6px}
table.case-tbl td .good{background:#eaf6ef;color:#0b6e4a;border-radius:4px;padding:0 5px;font-family:var(--mono);font-size:12.4px}
table.case-tbl td .bad{background:var(--err-soft);color:var(--err);border-radius:4px;padding:0 5px;font-family:var(--mono);font-size:12.4px}

/* ---------- 测试器 ---------- */
.tester{padding:18px 20px}
.tester .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tester label{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.6px;flex:none}
.in{
  font:600 14px var(--mono);padding:8px 11px;border:1px solid var(--line2);border-radius:9px;
  background:#fff;color:var(--ink);outline:none;flex:1;min-width:140px;
}
.in:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(36,86,230,.14)}
textarea.in{resize:vertical;min-height:110px;font-weight:400;line-height:1.7}
.flagbox{display:flex;gap:6px;flex-wrap:wrap}
.flagc{display:flex;align-items:center;gap:4px;font:600 12.5px var(--mono);color:var(--ink2);border:1px solid var(--line2);border-radius:8px;padding:4px 8px;background:#fff;cursor:pointer;user-select:none}
.flagc input{accent-color:var(--brand);margin:0;width:13px;height:13px}
.flagc:has(input:checked){border-color:var(--brand);background:var(--brand-soft);color:var(--brand2)}
.tester .split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media(max-width:760px){.tester .split{grid-template-columns:1fr}}
.txt-frame{position:relative;border:1px solid var(--line2);border-radius:11px;overflow:hidden}
.txt-frame .cap{font-size:11.5px;font-weight:700;color:var(--muted);background:var(--surface2);border-bottom:1px solid var(--line);padding:5px 12px;letter-spacing:.5px}
.txt-frame textarea.in{border:0;border-radius:0;width:100%;display:block;min-height:150px;font-size:13.4px;background:#fff}
.outbox{
  border:1px solid var(--line2);border-radius:11px;overflow:auto;min-height:150px;max-height:330px;
  padding:11px 13px;background:#fff;font-family:var(--mono);font-size:13.4px;line-height:1.85;
  white-space:pre-wrap;word-break:break-all;color:var(--ink);
}
.outbox .hl{background:var(--mark-bg);color:var(--mark-ink);border-radius:3px;box-shadow:0 0 0 1px #f5d98a}
.outbox .hl2{background:#d7f0e3;color:#0b6e4a;border-radius:3px}
.outbox.empty{color:#a8b4c5;font-style:italic}
.statline{display:flex;gap:14px;align-items:center;margin-top:10px;font-size:13px;color:var(--ink2);flex-wrap:wrap}
.statline .n{font-weight:800;color:var(--brand2);font-family:var(--mono)}
.errline{color:var(--err);font-family:var(--mono);font-size:12.8px;background:var(--err-soft);border:1px solid #f2cbc6;border-radius:9px;padding:7px 12px;margin-top:9px;display:none;overflow-x:auto}
.groups{margin-top:12px;border:1px solid var(--line);border-radius:11px;overflow:hidden;display:none}
.groups .gt{font-size:12px;font-weight:700;padding:7px 13px;background:var(--surface2);border-bottom:1px solid var(--line);color:var(--muted)}
.groups table{width:100%;border-collapse:collapse;font-size:13px}
.groups td{padding:6px 13px;border-bottom:1px solid var(--line);font-family:var(--mono)}
.groups tr:last-child td{border-bottom:0}
.groups td.k{color:var(--muted);width:70px;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px}
.samples{margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
.samples .cap{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:7px}
.samples .chips{display:flex;flex-wrap:wrap;gap:6px}
.s-chip{
  font:600 12px var(--mono);color:var(--brand2);background:var(--brand-soft);border:1px solid var(--brand-line);
  padding:3px 10px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:.12s;
}
.s-chip:hover{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---------- 引擎差异 ---------- */
table.engine th:first-child{min-width:120px}
.yd{color:var(--ok);font-weight:700}
.yn{color:var(--err);font-weight:700}
.yp{color:var(--warn);font-weight:700}
.eng-note{font-size:12.8px;color:var(--muted);margin-top:8px}

/* ---------- 坑 ---------- */
.pit{display:flex;gap:12px;margin:12px 0;padding:0}
.pit .pi{
  flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:var(--err-soft);color:var(--err);font:800 14px var(--mono);margin-top:2px;
}
.pit .ptx{flex:1}
.pit .ptx h4{margin:.1rem 0 .2rem}
.pit .ptx p{margin:.15rem 0 .4rem;color:var(--ink2);font-size:14px}

/* ---------- FAQ ---------- */
details.faq{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin:9px 0;overflow:hidden}
details.faq summary{
  cursor:pointer;padding:12px 16px;font-weight:650;font-size:14.5px;list-style:none;position:relative;
  padding-right:40px;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";position:absolute;right:15px;top:8px;font-size:20px;color:var(--brand);font-weight:400}
details.faq[open] summary::after{content:"–"}
details.faq .fb{padding:0 16px 14px;color:var(--ink2);font-size:14.3px}

/* ---------- 页脚 ---------- */
footer{
  border-top:1px solid var(--line);background:var(--surface);padding:26px 20px 34px;margin-top:30px;
  text-align:center;color:var(--muted);font-size:13px;
}

/* 顶部小工具：回到顶部/去测试器 */
.gotop{display:none;position:fixed;right:18px;bottom:20px;z-index:70}

/* ---------- 响应式 ---------- */
@media(max-width:1020px){
  .layout{grid-template-columns:1fr}
  aside.toc{
    position:static;max-height:none;padding:8px 6px;
  }
  aside.toc .toc-cap{display:none}
  aside.toc .toc-nav{display:flex;flex-wrap:wrap;gap:2px}
  aside.toc a{display:inline-block;padding:4px 10px;margin:1px}
  aside.toc .back{display:none}
}
@media(max-width:640px){
  .top-pills{display:none}
  .hero{padding:36px 16px 30px}
  .layout{padding:18px 12px 60px}
}