/* 模板 / 映射工具页共用样式。配色沿用站点其余页面，浅深色都支持。 */
:root{
  --bg:#f5eee6; --panel:#fffbf6; --ink:#2b1d12; --muted:#7a6553;
  --line:#e3d3c2; --accent:#c57535; --accent-text:#9a531d; --accent-ink:#fff;
  --ok:#3a5a40; --bad:#9b3232; --warn:#8a6d1f;
  --radius:10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#120b06; --panel:#1c130c; --ink:#f0e6da; --muted:#b3a08e;
    --line:#3b2e23; --accent:#e08f50; --accent-text:#e08f50; --accent-ink:#1f1108;
    --ok:#7fa683; --bad:#d98080; --warn:#d3b268;
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#120b06; --panel:#1c130c; --ink:#f0e6da; --muted:#b3a08e;
  --line:#3b2e23; --accent:#e08f50; --accent-text:#e08f50; --accent-ink:#1f1108;
  --ok:#7fa683; --bad:#d98080; --warn:#d3b268;
  color-scheme: dark;
}

*{box-sizing:border-box}
body{
  margin:0; padding:0; background:var(--bg); color:var(--ink);
  font:14px/1.55 ui-sans-serif,-apple-system,"Segoe UI","Microsoft YaHei",Roboto,sans-serif;
}
/* 语言 / 主题开关放在顶栏里正常排版，不用 fixed 浮层，避免压住登录框 */
.prefs{display:flex;gap:8px;align-items:center}
.seg{
  display:inline-flex;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  font-size:12px;font-weight:600;background:var(--bg);
}
.seg button{border:0;background:transparent;color:var(--muted);padding:5px 11px;cursor:pointer;font:inherit}
.seg button.on{background:var(--accent);color:var(--accent-ink)}

/* Same pill family as .seg, but for two longer/uneven-width options: an
   animated thumb slides under whichever button is on, instead of each
   button just swapping its own background. */
.seg2{
  position:relative;display:inline-grid;grid-template-columns:repeat(2,1fr);
  border:1px solid var(--line);border-radius:20px;
  background:var(--panel);padding:2px;font-size:12.5px;font-weight:600;
}
.seg2 button{
  position:relative;z-index:1;border:0;background:transparent;color:var(--muted);
  padding:6px 14px;cursor:pointer;font:inherit;border-radius:18px;
  transition:color .2s ease;white-space:nowrap;text-align:center;
}
.seg2 button.on{color:var(--accent-ink)}
.seg2 .thumb{
  position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);
  border-radius:18px;background:var(--accent);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.seg2[data-active="1"] .thumb{transform:translateX(100%)}

.page{display:flex;flex-direction:column;height:100vh}
.topbar{
  display:flex;align-items:center;gap:14px;padding:12px 20px;
  border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap;
}
.topbar h1{font-size:16px;margin:0;font-weight:600;letter-spacing:-.01em}
.topbar .spacer{flex:1}
.home-link{color:var(--muted);font-size:13px;text-decoration:none}
.home-link:hover{color:var(--ink)}

.navtabs{display:flex;gap:4px}
.navtabs a{
  font-size:13px;font-weight:600;padding:6px 13px;border-radius:7px;
  text-decoration:none;color:var(--muted);border:1px solid transparent;
}
.navtabs a:hover{color:var(--ink);background:var(--bg)}
.navtabs a.on{color:var(--ink);background:var(--bg);border-color:var(--line)}

.auth{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.auth input{
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
  padding:6px 9px;border-radius:6px;font:inherit;font-size:12px;width:140px;
}
button.btn, a.btn{
  font:inherit;font-weight:600;font-size:12.5px;padding:7px 14px;border:0;border-radius:7px;
  background:var(--accent);color:var(--accent-ink);cursor:pointer;
  display:inline-flex;align-items:center;text-decoration:none;
}
button.btn:disabled{opacity:.45;cursor:not-allowed}
button.ghost, a.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
button.ghost:hover:not(:disabled), a.ghost:hover{color:var(--ink)}

.body{flex:1;overflow:hidden;display:flex}
.side{width:250px;border-right:1px solid var(--line);overflow-y:auto;background:var(--panel);flex-shrink:0}
.side .grp{padding:12px 14px 5px;font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.05em}
.side .item{padding:7px 14px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;gap:8px}
.side .item:hover{background:var(--bg)}
.side .item.on{background:var(--bg);color:var(--accent-text);font-weight:600}
.side .item .n{color:var(--muted);font-size:11px;font-weight:400}

.main{flex:1;overflow:auto;padding:16px 20px 40px}

.stat{display:flex;gap:22px;margin-bottom:14px;flex-wrap:wrap}
.stat div b{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em}
.stat div span{color:var(--muted);font-size:11.5px}

.bar{display:flex;gap:9px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.bar input[type=text], .bar select{
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  padding:7px 10px;border-radius:7px;font:inherit;font-size:13px;
}
.bar input[type=text]{min-width:210px}
.bar label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;cursor:pointer}

table{border-collapse:collapse;width:100%;font-size:13px}
th,td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top}
th{
  color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.04em;
  position:sticky;top:0;background:var(--bg);z-index:1;
}
tbody tr:hover td{background:var(--panel)}
.mono{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:12px}

.pill{display:inline-block;padding:1px 8px;border-radius:20px;font-size:11px;font-weight:600;border:1px solid var(--line)}
.pill.MANDATORY{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent);background:color-mix(in srgb,var(--bad) 9%,transparent)}
.pill.CONDITIONAL{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 9%,transparent)}
.pill.RECOMMENDED{color:var(--muted)}
.pill.OPTIONAL{color:var(--muted)}
.pill.done{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 9%,transparent)}

.muted{color:var(--muted)}
.empty{padding:44px;text-align:center;color:var(--muted)}
.err{color:var(--bad);padding:10px 0;font-size:13px}
.hint{color:var(--muted);font-size:12.5px;margin-bottom:10px}

details.vals summary{cursor:pointer;color:var(--muted);font-size:12px}
details.vals div{margin-top:5px;color:var(--muted);font-size:12px;max-width:520px}

.editor{display:grid;gap:6px;max-width:290px}
.editor select,.editor input{
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
  padding:6px 8px;border-radius:6px;font:inherit;font-size:12.5px;width:100%;
}
.note{
  margin-top:5px;font-size:12px;color:var(--warn);
  background:color-mix(in srgb,var(--warn) 8%,transparent);
  border-left:2px solid var(--warn);padding:4px 8px;border-radius:0 5px 5px 0;
}
.note button{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;font-size:11px;padding:0 0 0 6px}
.auth input.flash{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}

.modal-back{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:30px;
}
.modal{
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:16px;max-width:820px;width:100%;display:flex;flex-direction:column;gap:10px;
}
.modal textarea{
  width:100%;height:340px;font:12px ui-monospace,Consolas,monospace;
  background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:9px;
}

/* ---------- 规则编辑弹窗 ---------- */
.ed-back{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:90;
  display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow:auto;
}
.ed{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  width:100%;max-width:880px;display:flex;flex-direction:column;
}
.ed-head{padding:16px 20px;border-bottom:1px solid var(--line)}
.ed-head h2{margin:0;font-size:16px}
.ed-head .mono{color:var(--muted)}
.ed-body{display:grid;grid-template-columns:1fr 330px;gap:0}
.ed-cfg{padding:16px 20px;display:flex;flex-direction:column;gap:14px;border-right:1px solid var(--line);min-width:0}
.ed-side{padding:16px 18px;display:flex;flex-direction:column;gap:10px;background:var(--bg);border-radius:0 0 12px 0}
.ed-foot{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center}
@media (max-width:780px){ .ed-body{grid-template-columns:1fr} .ed-cfg{border-right:0;border-bottom:1px solid var(--line)} }

.ed-label{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin-bottom:6px}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{
  border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;
  padding:7px 11px;font:inherit;font-size:12.5px;cursor:pointer;text-align:left;
}
.opt:hover{border-color:var(--muted)}
.opt.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg));color:var(--ink);font-weight:600}
.opt small{display:block;color:var(--muted);font-weight:400;font-size:11px;margin-top:1px}

.row{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:13px}
.row select,.row input,.ed-cfg select,.ed-cfg input[type=text],.ed-cfg input[type=number]{
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
  padding:6px 8px;border-radius:6px;font:inherit;font-size:13px;
}
.ed-cfg select.wide,.ed-cfg input.wide{width:100%}
.row input[type=number]{width:84px}

.lk{max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.lk table{font-size:12.5px}
.lk td,.lk th{padding:5px 8px}
.lk select{max-width:210px}

.ex{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:10px 12px;font-size:12.5px}
.ex .k{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.04em}
.ex .v{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;word-break:break-all;margin-top:2px}
.ex .arrow{color:var(--muted);text-align:center;font-size:13px;line-height:1.2}
.ex.result .v{font-size:14px;font-weight:700;color:var(--ok)}
.ex.bad{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.ex.bad .v{color:var(--bad);font-weight:600}
.warn{color:var(--warn);font-size:12px}

.sample{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sample select{max-width:220px}
.eg{margin-top:3px;font-size:11.5px;font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;color:var(--muted);word-break:break-all}
.eg b{color:var(--ok);font-weight:600}
.eg.bad{color:var(--bad)}

/* ---------- AI 建议 / 路由 ---------- */
.ai{
  border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:8px;
  padding:7px 9px;background:color-mix(in srgb,var(--accent) 5%,transparent);font-size:12.5px;
}
.ai .why{margin-top:3px}
.why{color:var(--muted);font-size:12px}
.ai-act{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.ai-act .btn{padding:4px 10px;font-size:12px}
.pill.ai{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.pill.ai.LOW{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.aibar{padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.routebar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px}
.chip{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;background:var(--panel);border:1px solid var(--line)}
.routes{flex-basis:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:var(--panel)}
.rg-h{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin-bottom:3px}
.rg label{display:flex;gap:6px;align-items:baseline;font-size:12.5px;padding:2px 0;cursor:pointer;flex-wrap:wrap}
.rg label.muted{cursor:not-allowed}

.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:var(--accent-ink);padding:9px 18px;border-radius:8px;
  font-size:13px;font-weight:600;z-index:120;
}