/* ===== 设计令牌 v2 =====
   三层色彩：纸面（bg/card/surface）→ 墨色（ink 1/2/3）→ 分类身份色（--h / --hsoft）。
   动作按钮只用墨色，颜色只用来表达「这是哪个分类」和「结果是好是坏」。
   --hsoft 是 --h 的同族浅底，所有浅色面都从它取，不再用 rgba 现算。 */
:root {
  color-scheme: light;
  --bg: #f2f4f7;
  --card: #fff;
  --field: #fbfcfd;
  --surface-2: #f6f8fa;
  --surface-3: #eef1f5;
  --line: #e3e7ec;
  --line-2: #d2d9e2;
  --ink: #14181d;
  --ink-2: #4a5560;
  --ink-3: #78838f;
  --h: #1f6feb;
  --hsoft: #eaf1fd;
  --link: #1f6feb;
  --ok: #0f7b4f;
  --ok-soft: #e7f5ee;
  --bad: #c0392b;
  --bad-soft: #fdecec;
  --warn: #b45309;
  --warn-soft: #fdf3e3;
  /* 字阶：1.18 倍率，禁止半步 */
  --f-12: 12px; --f-13: 13px; --f-14: 14px; --f-15: 15px; --f-17: 17px; --f-20: 20px; --f-26: 26px; --f-34: 34px;
  --font-num: "DIN Alternate", "Bahnschrift", "Helvetica Neue", -apple-system, "PingFang SC", sans-serif;
  --lh-head: 1.32;
  /* 间距阶 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 28px; --s-7: 40px;
  --pane-pad: 20px;
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 1px rgba(16, 24, 40, .04);
  --sh-2: 0 12px 28px -10px rgba(16, 24, 40, .18);
  --radius: var(--r-md);
  --wrapw: 1080px;
  --measure: 62ch;
  /* 站点签名：六个分类色拼成的色带，首页出现在 hero 顶边，工具页收成单色 */
  --rail: linear-gradient(90deg, #1f6feb 0 16.66%, #0f7b4f 0 33.33%, #c2410c 0 50%, #6d28d9 0 66.66%, #be185d 0 83.33%, #0e7490 0 100%);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.7 -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
/* 工具页整页跟着分类走：链接、焦点环、强调面都用这一页的分类色 */
body.toolpage { --link: var(--h); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--h); outline-offset: 2px; }
body.wbpage { --wrapw: 1280px; }
body.gamepage { --wrapw: 860px; }
/* ===== 顶栏：分类色带 + 品牌标记 ===== */
.hd {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.5) blur(8px); -webkit-backdrop-filter: saturate(1.5) blur(8px);
  border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top);
}
.hd::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--railbar, var(--rail)); }
.hd.stuck { box-shadow: var(--sh-1); }
.hdin {
  position: relative; max-width: var(--wrapw); margin: 0 auto;
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
  padding: 13px calc(20px + env(safe-area-inset-right)) 13px calc(20px + env(safe-area-inset-left));
}
.hd .logo { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: var(--f-17); letter-spacing: -.01em; color: var(--ink); }
.hd .logo:hover { text-decoration: none; }
.hd .logo .mark { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-sm); background: var(--ink); color: #fff; }
.hd nav { display: flex; gap: 2px; flex-wrap: wrap; font-size: var(--f-14); margin-left: auto; }
.hd nav a { padding: 6px 11px; border-radius: var(--r-pill); color: var(--ink-2); }
.hd nav a:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.hd nav a.on { background: var(--hsoft); color: var(--h); font-weight: 700; }
.wrap { max-width: var(--wrapw); margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-7); }
h1 { font-size: var(--f-26); line-height: var(--lh-head); letter-spacing: -.015em; font-weight: 800; margin: 0 0 var(--s-3); }
h2 { font-size: var(--f-17); line-height: 1.45; letter-spacing: -.005em; margin: 0 0 var(--s-4); }
.lede { color: var(--ink-2); margin: 0; max-width: var(--measure); }
.crumb { font-size: var(--f-13); color: var(--ink-3); margin: 0 0 var(--s-3); }
.crumb i { font-style: normal; margin: 0 6px; color: var(--line-2); }
.crumb .cat { color: var(--h); font-weight: 600; }
.toolhead { margin: 0 0 var(--s-6); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line); }
.toolhead h1 { margin-bottom: var(--s-2); }
.cols { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.15fr); gap: var(--s-5); align-items: start; }
@media (max-width: 820px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.cols > * { min-width: 0; }
.form, .result, .block {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--pane-pad); box-shadow: var(--sh-1);
}
/* 宽屏把两栏各锁成一块面板：--workh 由 app.js 按「屏幕还剩多少」算，兜底 100vh-92px */
@media (min-width: 821px) {
  .cols > .form, .cols > .result {
    max-height: var(--workh, calc(100vh - 92px - env(safe-area-inset-top))); overflow: auto; overscroll-behavior: contain;
  }
  .cols > .result {
    position: sticky; top: calc(72px + env(safe-area-inset-top));
    min-height: var(--workh, calc(100vh - 92px - env(safe-area-inset-top)));
  }
  /* 按钮条钉在左栏底部：表单再长，「计算」也一直伸手就能点 */
  .cols > .form { padding-bottom: 0; }
  .cols > .form > form > .btns {
    position: sticky; bottom: 0; z-index: 3; margin: 0 calc(-1 * var(--pane-pad)); padding: var(--s-3) var(--pane-pad) 14px;
    background: var(--card); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-md) var(--r-md);
  }
}
/* 三栏共用的栏头：输入 / 结果 / 表达式库，滚动时钉在各自面板顶部 */
.phead {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--s-2);
  margin: calc(-1 * var(--pane-pad)) calc(-1 * var(--pane-pad)) var(--s-4);
  padding: 12px var(--pane-pad) 10px;
  background: var(--card); border-bottom: 1px solid var(--line); border-radius: var(--r-md) var(--r-md) 0 0;
  font-size: var(--f-13); font-weight: 700; letter-spacing: .02em; color: var(--ink-2);
}
.phead .dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--h); }
.phead .phint { margin-left: auto; font-weight: 400; font-size: var(--f-12); color: var(--ink-3); letter-spacing: 0; }
/* 单列时面板不再各自滚动，栏头要是还 sticky 会钻到站点页头底下，直接退回普通标题 */
@media (max-width: 820px) { .phead { position: static; margin-left: calc(-1 * var(--pane-pad)); margin-right: calc(-1 * var(--pane-pad)); margin-top: calc(-1 * var(--pane-pad)); } }
.field { margin-bottom: var(--s-4); position: relative; }
.field > label, .rlabel { display: block; font-size: var(--f-13); font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.iwrap { position: relative; }
.field input[type=text], .field input[type=number], .field input[type=date], .field input[type=search], .field select, .field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--field); font: inherit; font-size: var(--f-15); color: var(--ink);
  transition: border-color .14s, background .14s, box-shadow .14s;
}
.field input.hasunit { padding-right: 58px; }
/* 数字框一律去掉浏览器自绘的上下箭头：单位压在右内侧会叠上去 */
.field input[type=number]::-webkit-outer-spin-button, .field input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.field textarea { font-family: ui-monospace, Consolas, monospace; font-size: var(--f-13); line-height: 1.7; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%2378838f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--h); background: #fff; box-shadow: 0 0 0 3px var(--hsoft);
}
/* 单位贴在输入框右内侧：它描述的是这个框里的数，不能飘到标签行另一端 */
.field .unit { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: var(--f-13); color: var(--ink-3); pointer-events: none; white-space: nowrap; }
.field.check { display: flex; align-items: center; }
.field.check label { display: flex; align-items: center; gap: 7px; font-size: var(--f-14); font-weight: 400; color: var(--ink); margin: 0; }
.field input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--h); }
.field.radios .rrow { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.radio { font-size: var(--f-14); display: inline-flex; gap: 6px; align-items: center; }
.radio input { accent-color: var(--h); }
.hint { font-size: var(--f-12); color: var(--ink-3); margin: 6px 0 0; line-height: 1.6; }
.btns { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
.btns button { white-space: nowrap; }
button {
  font: inherit; font-size: var(--f-14); font-weight: 600; padding: 9px 15px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2); cursor: pointer; touch-action: manipulation;
  transition: background .14s, border-color .14s, color .14s, transform .08s;
}
button:hover { background: var(--surface-2); border-color: var(--ink-3); color: var(--ink); }
button:active { transform: scale(.98); }
button.go { background: var(--ink); border-color: var(--ink); color: #fff; padding: 10px 22px; font-size: var(--f-15); }
button.go:hover { background: #232b34; border-color: #232b34; color: #fff; }
button.ghost { border-color: transparent; background: transparent; color: var(--ink-3); }
button.ghost:hover { background: var(--surface-3); color: var(--ink); }
.rows { display: flex; flex-direction: column; gap: 0; }
.row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  padding: 10px 0; border-bottom: 1px dashed var(--line);
}
.row:last-child { border-bottom: 0; }
.row .k { color: var(--ink-2); font-size: var(--f-14); }
.row .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--f-17); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.row .v i { font-style: normal; font-weight: 400; font-size: var(--f-12); color: var(--ink-3); margin-left: 3px; font-family: inherit; }
/* 结论前置：一个页面只有一个 hero 数字，由渲染器按 hero 标记 / 唯一 total 行挑出来 */
.row.hero {
  display: block; align-items: initial; gap: 0; margin: 0 0 var(--s-4); padding: 13px 15px;
  background: var(--hsoft); border: 1px solid #d8e5fb; border-left: 3px solid var(--h); border-radius: var(--r-md);
}
.row.hero .k { display: block; font-size: var(--f-13); font-weight: 700; color: var(--h); }
.row.hero .v { display: block; margin-top: 3px; text-align: left; font-size: var(--f-34); line-height: 1.15; color: var(--ink); letter-spacing: -.01em; }
.row.hero .v i { font-size: var(--f-14); margin-left: 4px; }
.row.total { background: var(--surface-2); border: 0; border-radius: var(--r-sm); padding: 11px var(--s-3); margin: var(--s-1) 0; }
.row.total .v { font-size: var(--f-20); color: var(--ink); }
.row.sub .v { font-weight: 500; font-size: var(--f-15); }
.row.ok .v { color: var(--ok); }
.row.bad .v { color: var(--warn); }
.row.hero.ok { background: var(--ok-soft); border-color: #cfe9db; border-left-color: var(--ok); }
.row.hero.ok .k { color: var(--ok); }
.row.hero.bad { background: var(--bad-soft); border-color: #f6d8d4; border-left-color: var(--bad); }
.row.hero.bad .k { color: var(--bad); }
.tblwrap { margin-top: var(--s-5); }
.tbname { font-size: var(--f-13); color: var(--ink-3); margin: 0 0 var(--s-2); }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--f-13); }
th, td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
td { font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--surface-2); }
thead th { background: var(--surface-3); color: var(--ink-3); font-size: var(--f-12); font-weight: 700; letter-spacing: .02em; position: sticky; top: 0; }
.rawout { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s-3); font-family: ui-monospace, Consolas, monospace; font-size: var(--f-13); line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.rawout pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
.note { font-size: var(--f-13); color: var(--ink-2); line-height: 1.7; background: var(--surface-2); border-left: 3px solid var(--line-2); padding: 10px var(--s-3); border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: var(--s-4) 0 0; max-width: var(--measure); }
.tip { font-size: var(--f-13); color: var(--ink-3); margin: var(--s-4) 0 0; }
.src { font-size: var(--f-12); color: var(--ink-3); margin: 6px 0 0; }
.block { margin-top: var(--s-5); }
.block ul { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: var(--f-14); line-height: 1.85; max-width: var(--measure); }
.block li + li { margin-top: 2px; }
.block p { color: var(--ink-2); font-size: var(--f-14); max-width: var(--measure); }
details { border-top: 1px solid var(--line); padding: 11px 0; }
details:first-of-type { border-top: 0; }
summary { cursor: pointer; font-weight: 600; font-size: var(--f-14); }
details p { margin: 8px 0 0; color: var(--ink-2); font-size: var(--f-14); line-height: 1.8; max-width: var(--measure); }
.rellist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rel { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-3) 11px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); transition: .14s; }
.rel span { color: var(--ink); font-size: var(--f-14); font-weight: 600; }
.rel em { color: var(--ink-3); font-size: var(--f-12); font-style: normal; }
.rel:hover { text-decoration: none; border-color: var(--h); background: var(--hsoft); transform: translateY(-1px); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: var(--s-4); margin-bottom: var(--s-2); }
.card {
  position: relative; display: flex; flex-direction: column; gap: 5px; padding: var(--s-4) var(--s-4) 11px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--h); transform: scaleY(0); transform-origin: top; transition: transform .2s ease;
}
.card strong { font-size: var(--f-15); letter-spacing: -.005em; }
.card span { font-size: var(--f-13); color: var(--ink-2); line-height: 1.6; }
.card .tag { margin-top: auto; align-self: flex-end; font-size: var(--f-12); font-weight: 700; color: var(--h); opacity: .6; transition: opacity .18s ease; }
.card:hover { text-decoration: none; border-color: var(--h); box-shadow: var(--sh-2); transform: translateY(-3px); }
.card:hover::before { transform: scaleY(1); }
.card:hover .tag { opacity: 1; transform: none; }
.ft { max-width: var(--wrapw); margin: var(--s-7) auto 0; padding: var(--s-5) 20px 40px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--f-13); }
.ft p { margin: 4px 0; }
.ft .beian { font-size: var(--f-12); }
.ft .beian a { color: var(--ink-3); text-decoration: none; }
.ft .beian a:hover { color: var(--link); text-decoration: underline; }
main h1 + .lede { margin-bottom: var(--s-5); }
.grid + h2 { margin-top: 26px; }
main > h2 { margin: 28px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--line); }

/* ===== 首页：墨色主视觉 + 真实算例 + 分类徽章 ===== */
.hero {
  position: relative; overflow: hidden; color: #fff;
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(300px, .94fr); gap: var(--s-7); align-items: start;
  margin: 0 0 var(--s-6); padding: var(--s-7) var(--s-7) var(--s-6); border-radius: var(--r-lg);
  background: #12161c; box-shadow: 0 22px 46px -24px rgba(16, 24, 40, .6);
}
/* 坐标纸纹理：只从右上淡出，不抢正文 */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(115% 95% at 86% 4%, #000 0%, transparent 66%); mask-image: radial-gradient(115% 95% at 86% 4%, #000 0%, transparent 66%);
}
/* 站点签名：六个分类色拼的色带 */
.hero::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--rail); }
.heromain, .heraside { position: relative; min-width: 0; }
/* 404 没有算例卡，别让空的右列把正文挤成窄条 */
.hero.single { grid-template-columns: minmax(0, 1fr); }
.herotag {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 var(--s-4);
  padding: 5px 13px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--f-13); letter-spacing: .01em; color: #d8e2ee;
}
.herotag i { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); }
.hero h1 { margin: 0 0 var(--s-4); font-size: clamp(26px, 3.5vw, 40px); line-height: 1.26; letter-spacing: -.022em; font-weight: 800; }
.hero h1 em { font-style: normal; box-shadow: inset 0 -.22em 0 rgba(255, 255, 255, .2); }
.herolede { max-width: 52ch; margin: 0 0 var(--s-5); color: #a9b6c6; font-size: var(--f-15); line-height: 1.8; }
.search {
  display: flex; align-items: center; gap: var(--s-2); max-width: 540px; margin: 0;
  padding: 5px 6px 5px 14px; background: #fff; border-radius: var(--r-md); box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}
.nfgobtn { flex: 0 0 auto; padding: 9px 18px; border: 0; border-radius: var(--r-sm); background: var(--ink); color: #fff; font: inherit; font-size: var(--f-14); font-weight: 600; cursor: pointer; }
.nfgobtn:hover { background: #232b34; }
.notfound .nfhero { margin-bottom: var(--s-6); }
.notfound .pinned { margin-bottom: var(--s-1); }
.backhome { margin: var(--s-6) 0 var(--s-1); font-size: var(--f-15); }
.search svg { flex: 0 0 auto; color: var(--ink-3); }
.search input { flex: 1; min-width: 0; padding: 11px 2px; border: 0; background: transparent; font: inherit; color: var(--ink); }
.search input:focus { outline: none; }
.search kbd { flex: 0 0 auto; margin-right: 6px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); font-size: var(--f-12); color: var(--ink-3); font-family: var(--font-num); }
.hotwords { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 0; font-size: var(--f-13); color: #8b98a8; }
.hotwords a { padding: 4px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); color: #e6ecf3; }
.hotwords a:hover { background: rgba(255, 255, 255, .16); text-decoration: none; color: #fff; }
/* 真实算例卡：不写口号，直接把工具算出来的那一屏摆出来 */
.herocase { background: #fff; color: var(--ink); border-radius: var(--r-md); padding: var(--s-5); box-shadow: 0 16px 34px rgba(0, 0, 0, .3); }
.herocase .hck { margin: 0 0 var(--s-4); font-size: var(--f-12); color: var(--ink-3); }
.hcv { padding: var(--s-3) 0 var(--s-4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.hcv span { display: block; font-size: var(--f-13); font-weight: 700; color: var(--h); }
.hcv b { display: block; margin-top: 3px; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--f-34); line-height: 1.1; font-weight: 800; letter-spacing: -.015em; }
.hcv b i { font-style: normal; font-weight: 400; font-size: var(--f-14); color: var(--ink-3); margin-left: 4px; font-family: inherit; }
.hcr { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; gap: 7px; }
.hcr li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); font-size: var(--f-13); color: var(--ink-2); }
.hcr li b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--f-15); color: var(--ink); }
.hcf { margin: var(--s-4) 0 0; padding-top: var(--s-3); border-top: 1px dashed var(--line); font-size: var(--f-12); color: var(--ink-3); }
.hcf a { color: var(--h); font-weight: 600; white-space: nowrap; }
.herostats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); margin: var(--s-5) 0 0; }
.herostats div { display: flex; flex-direction: column; }
.herostats b { font-family: var(--font-num); font-size: var(--f-26); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.herostats span { margin-top: 5px; font-size: var(--f-12); color: #8b98a8; }
.catnav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-6); }
.catnav a {
  position: relative; display: flex; align-items: center; gap: 11px; padding: 14px 15px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink);
  box-shadow: var(--sh-1); transition: .16s ease;
}
.catnav a:hover { text-decoration: none; transform: translateY(-3px); border-color: var(--h); box-shadow: var(--sh-2); }
.catnav .medal { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--hsoft); color: var(--h); }
.catnav .cbody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.catnav .cname { font-size: var(--f-15); font-weight: 700; letter-spacing: -.005em; }
.catnav .cblurb { display: block; margin-top: 2px; font-size: var(--f-12); line-height: 1.5; color: var(--ink-3); font-weight: 400; }
.catnav .ccount {
  position: absolute; top: 10px; right: 12px; min-width: 22px; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--hsoft); color: var(--h); font-size: var(--f-12); font-weight: 700; font-family: var(--font-num); font-variant-numeric: tabular-nums;
}
.cat-sec { margin: 0 0 var(--s-6); scroll-margin-top: 74px; }
.sechead { display: flex; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-4); padding-bottom: 11px; border-bottom: 2px solid var(--line); }
.sechead .medal { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--hsoft); color: var(--h); flex: 0 0 auto; }
.sechead h2 { margin: 0; font-size: var(--f-20); white-space: nowrap; }
.sechead p { margin: 0; color: var(--ink-3); font-size: var(--f-13); }
.sechead .hits { margin-left: auto; padding: 3px 10px; border-radius: var(--r-pill); background: var(--hsoft); color: var(--h); font-size: var(--f-12); font-weight: 600; white-space: nowrap; }
.pinned { margin: 0 0 var(--s-6); }
#pinned .sechead { --h: #b45309; --hsoft: #fdf3e3; }
.pinned .grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pcard .pinmark { position: absolute; top: 0; right: 0; padding: 3px 10px; border-radius: 0 var(--r-md) 0 var(--r-sm); background: var(--warn-soft); color: var(--warn); font-size: var(--f-12); font-weight: 700; font-style: normal; }
.noresult { margin: var(--s-5) 0 var(--s-1); padding: var(--s-5); text-align: center; color: var(--ink-2); background: var(--card); border: 1px dashed var(--line-2); border-radius: var(--r-md); }
.rv { opacity: 0; transform: translateY(10px); }
.rv.in { opacity: 1; transform: none; transition: opacity .42s ease, transform .42s ease; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .card:hover, .catnav a:hover, .rel:hover { transform: none; }
  button:active { transform: none; }
}
@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .herostats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wrap { padding: var(--s-5) var(--s-4) var(--s-6); }
  .hero { padding: var(--s-6) var(--s-5) var(--s-5); border-radius: var(--r-md); }
  .herostats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .herostats b { font-size: var(--f-20); }
  .search kbd { display: none; }
  .catnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catnav .cblurb { display: none; }
  .rellist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nfgobtn { padding: 8px 12px; }
  .sechead p { display: none; }
  .hd nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: var(--s-6); margin-left: 0; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
  .hd nav::-webkit-scrollbar { display: none; }
  .hd nav a { white-space: nowrap; }
}

input[type=color] { width: 56px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }

/* ===== 抠图工作台：仅 data-custom="matting" 的两个页面生效 ===== */
.wb { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.wbleft { min-width: 0; align-self: stretch; }
.stage { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; min-height: min(760px, calc(100vh - 96px)); min-width: 0; position: sticky; top: 72px; }
.drop { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 30px 16px; min-height: 460px; cursor: pointer; transition: border-color .15s, background .15s; border: 1.5px dashed var(--line-2); border-radius: 12px; background: #fbfcfe; }
.drop:hover, .drop.over { border-color: var(--h); background: #f1f6ff; }
.drop:focus-visible { outline: 2px solid var(--h); outline-offset: 2px; }
.dropicon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 8px; border-radius: 50%; color: var(--h); background: var(--hsoft); box-shadow: inset 0 0 0 1px #d4e2fb; }
.dropmain { margin: 0; font-size: var(--f-17); font-weight: 600; }
.dropsub { margin: 2px 0 0; font-size: var(--f-13); color: var(--ink-2); }
.board { display: flex; flex-direction: column; gap: 10px; }
.frame { position: relative; --ar: 0.75; width: min(100%, calc(var(--ar) * 62vh)); aspect-ratio: var(--ar); margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background:
  linear-gradient(45deg, var(--line-2) 25%, transparent 25%) 0 0/16px 16px,
  linear-gradient(-45deg, var(--line-2) 25%, transparent 25%) 0 8px/16px 16px,
  linear-gradient(45deg, transparent 75%, var(--line-2) 75%) 8px -8px/16px 16px,
  linear-gradient(-45deg, transparent 75%, var(--line-2) 75%) 8px 0/16px 16px, #fff; }
.frame img.orig, .frame canvas.cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.frame canvas.cv { z-index: 2; box-shadow: 0 0 0 1px rgba(20, 40, 80, .06); }
.splitline { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 40, 80, .25); z-index: 3; }
.splitline span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(20, 40, 80, .3); }
.splitline span::before, .splitline span::after { content: ''; position: absolute; top: 50%; width: 0; height: 0; margin-top: -4px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.splitline span::before { left: 7px; border-right: 5px solid var(--ink-2); }
.splitline span::after { right: 7px; border-left: 5px solid var(--ink-2); }
.busy { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(255, 255, 255, .86); }
.busy p { margin: 0; font-size: var(--f-14); color: var(--ink-2); }
.busy .bar { position: relative; width: 160px; height: 4px; border-radius: 4px; background: var(--hsoft); overflow: hidden; }
.busy .bar::after { content: ''; position: absolute; inset: 0; width: 45%; border-radius: 4px; background: var(--h); animation: wbSlide 1.1s infinite ease-in-out; }
@keyframes wbSlide { 0% { transform: translateX(-110%); } 100% { transform: translateX(230%); } }
.stagebar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: var(--f-13); color: var(--ink-2); }
.matfile { font-weight: 600; color: var(--ink); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost { padding: 3px 10px; border-radius: 20px; background: var(--ok-soft); color: var(--ok); font-size: var(--f-13); }
.cost b { font-variant-numeric: tabular-nums; }
.split { width: 100%; margin: 2px 0 0; }
.matstatus { margin: 0; font-size: var(--f-14); color: var(--ink-2); min-height: 22px; }
.matstatus.ok { color: var(--ok); }
.matstatus.bad { color: var(--bad); }
.rail { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wbform, .wbcalc { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; }
.wbform .field { margin-bottom: 16px; position: relative; }
.chips { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; }
.chip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1px 6px; padding: 8px 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: var(--f-14); line-height: 1.3; cursor: pointer; transition: .12s; text-align: center; }
.chip:hover { border-color: var(--line-2); background: var(--surface-2); }
.chip .sw { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; background: var(--sw, transparent); box-shadow: inset 0 0 0 1px rgba(20, 40, 80, .18); }
.chip .csub { flex: 0 0 100%; font-size: var(--f-12); color: var(--ink-2); }
.chip-clear .sw { background: repeating-conic-gradient(#dfe5ee 0 25%, #fff 0 50%) 50%/8px 8px; }
.sw-custom { background: conic-gradient(#f87171, #fbbf24, #34d399, #60a5fa, #c084fc, #f87171); }
.chip.on { border-color: var(--h); background: var(--hsoft); box-shadow: inset 0 0 0 1px var(--h); font-weight: 600; }
.chip.on .csub { color: var(--h); }
.field .mirror, .field .mirror-c { position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-width: 0; padding: 0; margin: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; pointer-events: none; visibility: hidden; }
.srow { display: flex; gap: 10px; align-items: center; }
.srow input[type=range] { flex: 1; }
.srow input[type=number] { width: 76px; }
.sl-unit { float: right; font-weight: 400; font-size: var(--f-12); color: var(--ink-2); }
.crow { display: flex; align-items: center; gap: 10px; }
.hexout { font: 13px ui-monospace, Consolas, monospace; color: var(--ink-2); }
.wbacts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 2px; }
.wbacts .dl { padding: 11px 20px; border: 1px solid var(--ok); border-radius: var(--r-sm); background: var(--ok); color: #fff; font-size: var(--f-15); font-weight: 600; cursor: pointer; }
.wbacts .dl:disabled { opacity: .45; cursor: not-allowed; }
.wbacts .clr { padding: 11px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink); font-size: var(--f-14); cursor: pointer; }
.wbacts .rst { padding: 8px 10px; border: 0; background: none; color: var(--ink-2); font-size: var(--f-13); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.wbhint { margin: 10px 0 0; font-size: var(--f-13); color: var(--ink-2); }
.wbcalc summary { list-style: none; cursor: pointer; font-weight: 600; font-size: var(--f-14); }
.wbcalc summary::-webkit-details-marker { display: none; }
.wbcalc summary::before { content: '▸'; color: var(--h); margin-right: 6px; }
.wbcalc[open] summary::before { content: '▾'; }
.wbcalc .result { padding: 12px 0 0; border: 0; background: none; }
.wbcalc .result table { font-size: var(--f-13); }
.wbcalc .result th, .wbcalc .result td { padding: 5px 7px; white-space: normal; vertical-align: top; }
.wbcalc .result th:first-child, .wbcalc .result td:first-child { min-width: 5em; }
.wbcalc .row .v { font-size: var(--f-15); }
@media (max-width: 940px) {
  .wb { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .stage { position: static; min-height: 420px; }
  .frame { width: min(100%, calc(var(--ar) * 52vh)); }
}

/* ===== 解压小游戏 ===== */
.game { margin: 14px 0 6px; }
.gamebox { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 14px 12px; box-shadow: 0 2px 16px rgba(20, 40, 80, .06); }
.gamebox:fullscreen { border-radius: 0; padding: 18px; overflow: auto; background: #0e1522; }
.ghud { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; justify-content: space-between; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--line); }
.gstats { display: flex; gap: 18px; flex-wrap: wrap; }
.gstat { display: flex; flex-direction: column; gap: 2px; }
.gstat b { font-size: var(--f-26); font-weight: 800; line-height: 1; color: var(--h); font-variant-numeric: tabular-nums; }
.gstat span { font-size: var(--f-12); color: var(--ink-2); letter-spacing: .04em; }
.gacts { display: flex; gap: 8px; flex-wrap: wrap; }
.gbtn { border: 1px solid var(--line); background: #fff; border-radius: var(--r-sm); padding: 8px 13px; font-size: var(--f-13); color: var(--ink); cursor: pointer; transition: .12s; }
.gbtn:hover { border-color: var(--h); color: var(--h); background: var(--hsoft); }
.gbtn.pri { border-color: var(--h); background: var(--h); color: #fff; font-weight: 600; }
.gamebox:fullscreen .gbtn { background: #1a2434; border-color: #2b3a52; color: #cdd9ea; }
.gstage { display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 220px; }
.gbar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; }
.gbtn.on { border-color: var(--h); background: var(--h); color: #fff; font-weight: 600; }
.gcanvas { display: block; width: 100%; max-width: 660px; height: auto; border-radius: 12px; background: #101a2b; touch-action: none; }
.ggrid { display: grid; gap: 9px; width: 100%; max-width: 560px; }
.gmsg { margin: 12px 0 0; text-align: center; font-size: var(--f-14); color: var(--ink-2); min-height: 20px; }
.gmsg.ok { color: var(--ok); }
.gmsg.bad { color: var(--bad); }
.gamebox:fullscreen .gmsg { color: #9fb0c7; }
.gnav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.gnav a { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); transition: .14s; }
.gnav a:hover { border-color: var(--h); box-shadow: 0 3px 12px rgba(31, 111, 235, .12); text-decoration: none; transform: translateY(-1px); }
.gnav a em { font-size: var(--f-12); font-style: normal; color: var(--ink-2); }
.gnav a span { font-size: var(--f-15); font-weight: 600; }
.gnav a.next { align-items: flex-end; text-align: right; background: var(--hsoft); border-color: #cfe0fb; }
@media (max-width: 620px) {
  .gstat b { font-size: var(--f-20); }
  .ghud { align-items: flex-start; }
}

/* ---- 滑块字段 ---- */
.rangewrap { display: flex; align-items: center; gap: 12px; }
.rangewrap input[type=range] { flex: 1 1 auto; min-width: 0; -webkit-appearance: none; appearance: none; height: 22px; background: transparent; cursor: pointer; margin: 0; }
.rangewrap input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-pill); background: var(--line); }
.rangewrap input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--h); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(16, 24, 40, .25); }
.rangewrap input[type=range]::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--line); }
.rangewrap input[type=range]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--h); border: 2px solid #fff; }
.rangewrap input[type=range]:focus-visible { outline: 2px solid var(--h); outline-offset: 4px; border-radius: var(--r-pill); }
.rangecur { flex: 0 0 auto; min-width: 46px; padding: 4px 8px; border-radius: 8px; background: var(--hsoft); color: var(--h); font-size: var(--f-13); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.rangewrap .runit { flex: 0 0 auto; font-size: var(--f-13); color: var(--ink-2); }

/* ---- 开关式按钮组（字符集、对比口径） ---- */
.field.checks .swrow { display: flex; flex-wrap: wrap; gap: 8px; }
.field.checks .sw { display: inline-block; margin: 0; position: relative; }
.field.checks .sw > input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.field.checks .sw > span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: var(--f-14); line-height: 1.3; cursor: pointer; transition: .12s; user-select: none; }
.field.checks .sw > span::before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); transition: .12s; }
.field.checks .sw:hover > span { border-color: var(--line-2); background: var(--surface-2); }
.field.checks .sw > input:checked + span { border-color: var(--h); background: var(--hsoft); font-weight: 600; box-shadow: inset 0 0 0 1px var(--h); }
.field.checks .sw > input:checked + span::before { background: var(--h); }
.field.checks .sw > input:focus-visible + span { outline: 2px solid var(--h); outline-offset: 2px; }

/* ---- 密码强度条 ---- */
.strength { margin-bottom: 14px; }
.meter { position: relative; height: 10px; border-radius: var(--r-pill); background: var(--line-2); overflow: hidden; }
.meter > i { position: absolute; top: 0; bottom: 0; left: 0; display: block; border-radius: var(--r-pill); background: linear-gradient(90deg, #d64545, #e0a13a 42%, #1f6feb 74%, #0f7b4f); transition: width .18s ease; }
.sline { display: flex; align-items: baseline; gap: 9px; margin: 7px 0 0; font-size: var(--f-13); color: var(--ink-2); flex-wrap: wrap; }
.sline b { font-size: var(--f-15); color: var(--ink); }
.strength.ok .sline b { color: var(--ok); }
.strength.sub .sline b { color: var(--warn); }
.strength.bad .sline b { color: var(--bad); }
.pwlist { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 6px; }
.pwlist li { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.pwlist code { font-family: ui-monospace, Consolas, monospace; font-size: var(--f-14); word-break: break-all; cursor: copy; }
.pwlist code.copied { background: var(--hsoft); }
.pwlist code.copied::after { content: '已复制'; margin-left: 8px; font-size: var(--f-12); color: var(--ok); }
.cophint { font-size: var(--f-12); color: var(--ink-2); margin: 12px 0 6px; }

/* ---- 二维码 ---- */
.qrbox { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.qrbox > svg { max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.qracts { display: flex; flex-direction: column; gap: 8px; }
.qrdl { display: inline-flex; align-items: center; justify-content: center; padding: 8px 14px; border: 1px solid var(--h); border-radius: var(--r-sm); background: var(--h); color: #fff; font: inherit; font-size: var(--f-14); font-weight: 600; cursor: pointer; text-decoration: none; }
.qrdl:hover { background: #1f5fd0; border-color: #1f5fd0; color: #fff; text-decoration: none; }
.qrdl.qrpng { background: #fff; color: var(--h); }
.qrdl.qrpng:hover { background: var(--hsoft); color: var(--h); border-color: var(--h); }

/* ---- 文本差异 ---- */
.diff { max-height: 460px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--field); }
.dline { display: flex; align-items: stretch; border-bottom: 1px solid #eef1f5; font-family: ui-monospace, Consolas, monospace; font-size: var(--f-13); line-height: 1.6; }
.dline:last-child { border-bottom: 0; }
.dline .dn { flex: 0 0 46px; padding: 2px 8px; text-align: right; background: var(--surface-3); color: var(--ink-3); user-select: none; }
.dline .db { flex: 0 0 22px; text-align: center; font-weight: 700; color: var(--ink-3); }
.dline code { flex: 1 1 auto; min-width: 0; padding: 2px 10px 2px 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.dline.add { background: #eaf7ef; }
.dline.add .db { color: var(--ok); }
.dline.add .dn { background: #d8efe1; }
.dline.del { background: #fdecec; }
.dline.del .db { color: var(--bad); }
.dline.del .dn { background: #f7dbdb; }
.dline.gap { background: var(--surface-2); font-family: inherit; color: var(--ink-2); }
.dline.gap code { padding: 2px 10px; }
@media (max-width: 640px) {
  .field.checks .sw > span { padding: 7px 10px; font-size: var(--f-13); }
  .qracts { flex-direction: row; width: 100%; }
  .qrdl { flex: 1 1 auto; }
  .dline .dn { flex-basis: 34px; padding: 2px 5px; }
  .dline .db { flex-basis: 16px; }
}

/* ---- PWA 安全区：viewport-fit=cover 后 iOS 刘海/手势条才有 inset，普通浏览器为 0 ---- */
.wrap { padding-left: calc(20px + env(safe-area-inset-left)); padding-right: calc(20px + env(safe-area-inset-right)); }
.ft { padding-left: calc(20px + env(safe-area-inset-left)); padding-right: calc(20px + env(safe-area-inset-right)); padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.stage, .rail { top: calc(72px + env(safe-area-inset-top)); }

/* ---- 正则工具页：输入 / 结果 / 表达式库三栏，库在宽屏常驻右栏 ---- */
body.rgxpage { --wrapw: 1360px; }
.cols.rgx { grid-template-columns: minmax(300px, 1fr) minmax(330px, 1.12fr) minmax(280px, 330px); }
.side { min-width: 0; }
@media (min-width: 1180px) {
  /* 库和结果栏等高：滚动条留在 details 自己身上，标题跟着滚、不会被裁掉 */
  .side { position: sticky; top: calc(72px + env(safe-area-inset-top)); display: flex; flex-direction: column; max-height: var(--workh, calc(100vh - 92px - env(safe-area-inset-top))); }
  .side .regexlib { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .side .regexlib > summary { position: sticky; top: 0; z-index: 2; background: var(--card); border-bottom: 1px solid var(--line); }
}
@media (max-width: 1179px) {
  .cols.rgx { grid-template-columns: minmax(300px, 1fr) minmax(320px, 1.15fr); }
  .side { grid-column: 1 / -1; }
}
@media (max-width: 820px) { .cols.rgx { grid-template-columns: minmax(0, 1fr); } }

.regexlib { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0; margin: 0; }
.regexlib > summary { display: flex; align-items: baseline; gap: 10px; padding: 11px 14px; font-size: var(--f-14); font-weight: 700; list-style: none; cursor: pointer; }
.regexlib > summary::-webkit-details-marker { display: none; }
.regexlib > summary em { margin-left: auto; font-style: normal; font-weight: 400; font-size: var(--f-12); color: var(--ink-2); white-space: nowrap; }
.regexlib > summary::after { content: '▾'; color: var(--h); }
.regexlib:not([open]) > summary::after { content: '▸'; }
.regexlib .libbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.regexlib .libfilter { flex: 1 1 auto; min-width: 0; padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--field); font: inherit; font-size: var(--f-13); color: var(--ink); }
.regexlib .libfilter:focus { outline: none; border-color: var(--h); background: #fff; box-shadow: 0 0 0 3px var(--hsoft); }
.libcount { flex: 0 0 auto; font-size: var(--f-12); color: var(--ink-2); white-space: nowrap; }
.regexlib .libgrid { padding: 12px 14px 14px; }
.regexlib .libempty { margin: 0; }
.liblist { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.libgroup > h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 5px; font-size: var(--f-13); color: var(--ink-2); }
.libgroup { margin-bottom: 10px; }
.libgroup:last-child { margin-bottom: 0; }
.libgroup > h3 em { margin-left: auto; font-size: var(--f-12); font-style: normal; }
.libitem { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--field); }
.libitem:hover { border-color: var(--line-2); }
.libitem.on { border-color: var(--h); background: var(--hsoft); }
.libuse { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 6px 7px; text-align: left; border: 0; border-radius: 7px; background: transparent; transition: .12s; }
.libuse:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--h); filter: none; }
.libtop { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.liblabel { font-size: var(--f-13); font-weight: 600; }
.libflags { padding: 0 4px; border-radius: 4px; background: var(--surface-3); color: var(--h); font: 12px/1.5 ui-monospace, Consolas, monospace; font-style: normal; }
.libuse code { font-family: ui-monospace, Consolas, monospace; font-size: var(--f-12); line-height: 1.45; color: var(--h); white-space: normal; overflow-wrap: anywhere; }
.libnote, .libex { display: none; }
.libitem.on .libnote, .libitem.on .libex { display: block; }
/* 桌面右栏：鼠标悬停就能看到说明与「试一试」，触屏仍靠点选后展开 */
@media (min-width: 1180px) and (hover: hover) {
  .libitem:hover .libnote, .libitem:hover .libex,
  .libitem:focus-within .libnote, .libitem:focus-within .libex { display: block; }
}
.libnote { margin: 0 8px; font-size: var(--f-12); color: var(--ink-2); }
.libex { align-self: flex-end; margin: 2px 6px 4px; padding: 3px 10px; font-size: var(--f-12); border-radius: 6px; color: var(--ink-2); }
.libex:hover { color: var(--h); border-color: var(--h); }
@media (max-width: 1179px) {
  .regexlib .libbar { position: static; }
  .liblist { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
  .liblabel { font-size: var(--f-14); }
  .libuse code { font-size: var(--f-12); }
}
@media (max-width: 560px) {
  .liblist { grid-template-columns: minmax(0, 1fr); }
  .libbar { flex-wrap: wrap; }
}

/* ---- 结果块：命中高亮 / 替换结果，各带一个复制按钮 ---- */
.outbox { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin: 0 0 14px; }
.outbox .outname { margin: 0 0 6px; font-size: var(--f-13); font-weight: 600; color: var(--ink-2); }
.outbox pre { margin: 0; max-height: 380px; overflow: auto; font-family: ui-monospace, Consolas, monospace; font-size: var(--f-13); line-height: 1.75; white-space: pre-wrap; word-break: break-word; }
.outbox mark { background: #ffe9a8; border-radius: 3px; padding: 0 2px; box-shadow: inset 0 -1px 0 #ddb100; }
.outbox mark i { font-style: normal; color: #8a6a00; }
.outbox.rep mark { background: #cdeedc; box-shadow: inset 0 -1px 0 #35a86b; }
.outbox .cut { color: var(--ink-2); }
.copyone { margin: 8px 0 0; padding: 5px 12px; font-size: var(--f-13); color: var(--h); border-color: #cfe0fb; border-radius: 7px; }
.copyone:hover { background: var(--hsoft); }
.field.flash input, .field.flash textarea { animation: fieldflash 1.3s ease; }
@keyframes fieldflash {
  0%, 55% { border-color: var(--h); background: #fff; box-shadow: 0 0 0 3px var(--hsoft); }
  100% { box-shadow: none; }
}