/* KiLocus — 深色优先的科研数据库视觉系统 */
:root{
  --bg:#070b12; --bg2:#0b1220; --panel:#0e1726; --panel2:#121c2e;
  --line:#1e2b42; --line2:#28395a;
  --ink:#e8eefb; --ink2:#a9b8d4; --ink3:#6f82a4;
  --acc:#39d8c8; --acc2:#5b8cff; --acc3:#b779ff;
  --warn:#ffb648; --bad:#ff6b81; --ok:#48d78a;
  --grad:linear-gradient(120deg,#39d8c8,#5b8cff 55%,#b779ff);
  --r:14px; --r2:20px;
  --sh:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
  --gut:clamp(16px,4vw,40px);
}
:root[data-theme="light"]{
  --bg:#f6f8fc; --bg2:#eef2f9; --panel:#fff; --panel2:#f7f9fd;
  --line:#dde5f1; --line2:#c6d3e7;
  --ink:#0d1526; --ink2:#44536e; --ink3:#7b8aa5;
  --acc:#0e9e91; --acc2:#3463e8; --acc3:#8b45e0;
  --sh:0 1px 2px rgba(16,30,54,.06),0 12px 28px -14px rgba(16,30,54,.22);
}
*{box-sizing:border-box}
/* hidden 属性只有 UA 样式表的 display:none，任何类选择器（.qrmask{display:grid}、
   .maphud{display:flex}）都会盖过它 —— 2026-10-17 二维码被「已过期」遮罩长期挡住就是这个原因。 */
[hidden]{display:none!important}
/* html 也要有背景色：导航空档浏览器画的是 html 的背景，
   只在 body 上设的话那一帧会用画布默认色（深色方案下是黑的）。 */
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.6;overflow-x:hidden;
  background-image:
    radial-gradient(900px 500px at 12% -8%,rgba(57,216,200,.10),transparent 60%),
    radial-gradient(800px 520px at 88% -4%,rgba(91,140,255,.12),transparent 62%);
  background-attachment:fixed;
}
:root[data-theme="light"] body{background-image:
  radial-gradient(900px 500px at 12% -8%,rgba(14,158,145,.10),transparent 60%),
  radial-gradient(800px 520px at 88% -4%,rgba(52,99,232,.10),transparent 62%);}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em;letter-spacing:-.015em}
p{margin:0 0 1em}
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--panel);padding:8px;z-index:99}
.mono{font-family:var(--mono)}
.muted{color:var(--ink2)}.dim{color:var(--ink3)}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:14px;height:62px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{border-radius:9px}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand-txt b{font-size:17px;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-txt em{font-style:normal;font-size:10.5px;color:var(--ink3);letter-spacing:.06em}
.qbox{position:relative;flex:1 1 auto;max-width:520px;display:flex;align-items:center}
.qbox svg{position:absolute;left:12px;width:17px;height:17px;color:var(--ink3)}
.qbox input{width:100%;height:40px;padding:0 14px 0 36px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:14px}
.qbox input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 20%,transparent)}
.sug{position:absolute;top:46px;left:0;right:0;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--sh);overflow:hidden;z-index:60;max-height:60vh;overflow-y:auto}
.sug a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line)}
.sug a:last-child{border:0}.sug a:hover,.sug a.hl{background:var(--panel2)}
.sug .tag{font-size:10px;padding:2px 6px;border-radius:5px;background:var(--bg2);color:var(--ink3);flex:none}
.sug .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.nav{display:flex;gap:4px;flex:none}
.nav a{padding:7px 12px;border-radius:9px;font-size:14px;color:var(--ink2)}
.nav a:hover{background:var(--panel);color:var(--ink)}
.nav a.on{color:var(--ink);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.topend{display:flex;align-items:center;gap:8px;flex:none}
.icobtn{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--ink2)}
.icobtn:hover{color:var(--ink);border-color:var(--line2)}
.icobtn svg{width:17px;height:17px}
.i-sun{display:none}:root[data-theme="light"] .i-sun{display:block}
:root[data-theme="light"] .i-moon{display:none}
.who{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:12px;
  font-weight:700;background:var(--grad);color:#04121a}
.burger{display:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;padding:0 17px;
  border-radius:11px;border:1px solid transparent;background:var(--grad);color:#04121a;font-weight:650;
  font-size:14px;cursor:pointer;transition:transform .14s,filter .14s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.07)}
.btn.sm{height:34px;padding:0 13px;font-size:13px;border-radius:9px}
.btn.ghost{background:var(--panel);color:var(--ink2);border-color:var(--line)}
.btn.ghost:hover{color:var(--ink);border-color:var(--line2);filter:none}
.btn.block{width:100%}

/* ---------- blocks ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.pad{padding:clamp(16px,2.4vw,24px)}
.grid{display:grid;gap:14px}
/* 只设上下内边距：用简写 padding 会把 .wrap 的 padding-inline 一起重置成 0，
   两条规则权重相同而 .sec 在后，于是 section.sec.wrap 在窄屏上整段贴边。 */
.sec{padding-block:clamp(28px,5vw,56px)}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.sec-h h2{margin:0;font-size:clamp(18px,2.4vw,24px)}
.sec-h a{font-size:13.5px;color:var(--acc)}
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:8px}

.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;
  background:var(--bg2);border:1px solid var(--line);color:var(--ink2);white-space:nowrap}
.chip.k{border-color:color-mix(in srgb,var(--acc) 45%,var(--line));color:var(--acc)}
.chip.b{border-color:color-mix(in srgb,var(--acc2) 45%,var(--line));color:var(--acc2)}
.chip.p{border-color:color-mix(in srgb,var(--acc3) 45%,var(--line));color:var(--acc3)}
.chip.w{border-color:color-mix(in srgb,var(--warn) 45%,var(--line));color:var(--warn)}
/* 底盘归属。跨底盘的页面（基因详情、搜索、论文列表）靠它区分每行属于哪个菌株 */
.chip.s{border-color:transparent;background:color-mix(in srgb,var(--acc2) 16%,transparent);
  color:var(--acc2);font-weight:600}
a.chip.s:hover{background:color-mix(in srgb,var(--acc2) 28%,transparent)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;position:relative;overflow:hidden}
.stat:before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:var(--grad);opacity:.8}
.stat b{display:block;font-size:clamp(22px,3.4vw,30px);font-family:var(--mono);letter-spacing:-.02em}
.stat span{font-size:12px;color:var(--ink3)}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);
  padding:10px 12px;border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap}
td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:hover{background:var(--panel2)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* 窄屏：表格必须有个底宽，否则列被压成一个字一行（见位点索引） */
@media (max-width:640px){.tbl-wrap table{min-width:620px}}

.list{display:grid;gap:10px}
.row{display:flex;align-items:center;gap:12px;padding:13px 16px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;transition:border-color .15s,transform .15s}
.row:hover{border-color:var(--line2);transform:translateX(2px)}
.row .nm{font-weight:600;font-family:var(--mono);font-size:14.5px}
.row .meta{color:var(--ink3);font-size:12.5px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cnt{font-family:var(--mono);font-size:13px;color:var(--acc);flex:none}

.kv{display:grid;grid-template-columns:150px 1fr;gap:10px 18px;font-size:14px}
.kv dt{color:var(--ink3);font-size:12.5px}
.kv dd{margin:0}
.prose{max-width:74ch}
.prose p{color:var(--ink2)}

.pager{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:24px;flex-wrap:wrap}
.pager a,.pager span{padding:7px 12px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);font-size:13.5px;color:var(--ink2)}
.pager .cur{background:var(--grad);color:#04121a;border-color:transparent;font-weight:650}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.filters a{padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  font-size:13px;color:var(--ink2)}
.filters a.on{background:var(--grad);color:#04121a;border-color:transparent;font-weight:600}

.empty{text-align:center;padding:60px 20px;color:var(--ink3)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(34px,7vw,88px) 0 clamp(28px,5vw,56px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,48px);align-items:center}
.hero h1{font-size:clamp(28px,5.2vw,52px);letter-spacing:-.03em;margin-bottom:14px}
.hero h1 .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:clamp(15px,1.7vw,18px);color:var(--ink2);max-width:52ch}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.hero-viz{position:relative}
.hero-viz:after{content:"";position:absolute;inset:8%;border-radius:50%;pointer-events:none;
  box-shadow:0 0 120px 40px color-mix(in srgb,var(--acc) 12%,transparent)}

/* ---------- genome map page ---------- */
.mapwrap{position:relative;height:min(72vh,720px);border-radius:var(--r2);overflow:hidden;
  border:1px solid var(--line);background:#05080f}
:root[data-theme="light"] .mapwrap{background:#0a1020}
#map-canvas{width:100%;height:100%;display:block;touch-action:none}
.maphud{position:absolute;inset:auto 14px 14px 14px;display:flex;gap:8px;flex-wrap:wrap;
  justify-content:center;pointer-events:none}
.maphud .chip{pointer-events:auto;background:rgba(10,16,28,.82);backdrop-filter:blur(8px);color:#cfe0ff;
  border-color:rgba(130,160,220,.3);cursor:pointer}
.maphud .chip.on{color:#04121a;background:var(--grad);border-color:transparent;font-weight:650}
.mapinfo{position:absolute;top:14px;left:14px;width:min(330px,calc(100% - 28px));
  background:rgba(10,16,28,.9);backdrop-filter:blur(10px);border:1px solid rgba(130,160,220,.26);
  border-radius:14px;padding:14px 16px;color:#dfe9ff;font-size:13px;display:none}
.mapinfo.show{display:block}
.mapinfo h3{margin:0 0 4px;font-family:var(--mono);font-size:16px;color:#7ff0e2}
.mapinfo .mi-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:#9fb3d8}
.mapinfo .mi-row b{color:#e8f0ff;font-family:var(--mono);font-weight:500}
.mapinfo ul{margin:8px 0 0;padding-left:16px;color:#b9c9e6}
.mapinfo a.go{display:inline-block;margin-top:10px;color:#04121a;background:var(--grad);
  padding:6px 12px;border-radius:8px;font-weight:650;font-size:12.5px}
.maptip{position:fixed;z-index:70;pointer-events:none;background:rgba(8,14,24,.94);color:#e6eeff;
  border:1px solid rgba(130,160,220,.3);border-radius:9px;padding:6px 10px;font-size:12.5px;
  font-family:var(--mono);display:none;white-space:nowrap}
.maploading{position:absolute;inset:0;display:grid;place-items:center;color:#8fa6cc;font-size:13px;
  background:#05080f;z-index:5}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:var(--ink2)}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px}

/* ---------- login ---------- */
.auth{min-height:calc(100vh - 62px);display:grid;place-items:center;padding:28px var(--gut)}
.authcard{width:100%;max-width:410px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r2);box-shadow:var(--sh);padding:clamp(22px,4vw,34px);position:relative;overflow:hidden}
.authcard:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.authtabs{display:flex;gap:6px;background:var(--bg2);padding:4px;border-radius:11px;margin-bottom:20px}
.authtabs button{flex:1;height:34px;border:0;border-radius:8px;background:transparent;color:var(--ink2);
  font:inherit;font-size:13.5px;cursor:pointer}
.authtabs button.on{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:var(--sh)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;color:var(--ink3);margin-bottom:6px}
.field input{width:100%;height:42px;padding:0 13px;border-radius:11px;border:1px solid var(--line);
  background:var(--bg2);color:var(--ink);font:inherit}
.field input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}
.err{background:color-mix(in srgb,var(--bad) 14%,transparent);border:1px solid color-mix(in srgb,var(--bad) 40%,transparent);
  color:var(--bad);padding:9px 12px;border-radius:10px;font-size:13px;margin-bottom:14px}
.qrpane{text-align:center}
.qrbox{width:208px;height:208px;margin:6px auto 14px;border-radius:14px;background:#fff;padding:10px;
  display:grid;place-items:center;position:relative}
.qrbox img,.qrbox canvas{width:100%;height:100%;image-rendering:pixelated}
.qrmask{position:absolute;inset:0;background:rgba(255,255,255,.92);display:grid;place-items:center;
  border-radius:14px;color:#0d1526;font-size:13.5px;text-align:center;padding:16px;gap:8px}
.qrstatus{font-size:13px;color:var(--ink2);min-height:20px}

/* ---------- footer / tabbar ---------- */
.foot{border-top:1px solid var(--line);margin-top:40px;padding:26px 0 calc(26px + env(safe-area-inset-bottom));
  background:var(--panel);font-size:13px;color:var(--ink3)}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot p{margin:6px 0 0;max-width:62ch}
.foot-links{display:flex;gap:16px;flex-wrap:wrap}
.foot-links a:hover{color:var(--acc)}
.tabbar{display:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:grid}
  /* 下拉必须贴着顶栏的实际底边：≤720px 时顶栏会换行（搜索框独占一行），
     写死 top:62px 会让菜单钻到搜索栏下面，被挡住一半。 */
  .topbar.open .nav{display:flex;position:absolute;top:100%;left:0;right:0;z-index:60;
    background:var(--panel);border-bottom:1px solid var(--line);box-shadow:var(--sh);
    padding:10px var(--gut);gap:6px;flex-wrap:wrap;max-height:70vh;overflow:auto}
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-viz{order:-1;max-width:400px;margin:0 auto}
  .kv{grid-template-columns:1fr;gap:4px 0}
  .kv dt{margin-top:10px}
}
@media (max-width:720px){
  body{font-size:14.5px;padding-bottom:64px}
  .topbar-in{height:58px;gap:8px}
  .brand-txt em{display:none}
  .qbox{order:3;flex-basis:100%;max-width:none;margin-bottom:8px}
  .topbar-in{flex-wrap:wrap;height:auto;padding-block:9px}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:55;
    background:color-mix(in srgb,var(--panel) 95%,transparent);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;display:grid;place-items:center;gap:2px;padding:5px 0;color:var(--ink3);font-size:10.5px}
  .tabbar a svg{width:20px;height:20px}
  .tabbar a:hover,.tabbar a.on{color:var(--acc)}
  .mapwrap{height:66vh;border-radius:16px}
  .mapinfo{width:calc(100% - 28px)}
  .foot{margin-bottom:60px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- 溢出修正（2026-10-17 三视口验收）---- */
.row > *{min-width:0}
.row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
.chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.stat b{overflow-wrap:anywhere}
.kv dd{min-width:0;overflow-wrap:anywhere}
td,th{overflow-wrap:anywhere}
@media (max-width:720px){
  .row{flex-wrap:wrap;row-gap:4px}
  .row .meta{flex-basis:100%;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
}

/* grid 的隐式列是 auto（=max-content），长文本会把整行撑出视口 —— 必须显式 minmax(0,1fr) */
.list{grid-template-columns:minmax(0,1fr)}
.row .meta{min-width:0}

/* 基因详情页的序列框 */
.seqbox{margin:0;padding:12px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--bg2);color:var(--ink2);font-family:var(--mono);font-size:12px;
  line-height:1.7;letter-spacing:.04em;word-break:break-all;white-space:pre-wrap;
  max-height:220px;overflow:auto}

/* 首页的位点推荐入口 */
.reccta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-left:3px solid var(--acc)}
.reccta:hover{border-color:var(--acc2)}
@media (max-width:620px){.reccta .btn{width:100%;text-align:center}}

/* 语言切换 */
.langsw{display:flex;flex:none;margin:0}
.langsw button{display:flex;align-items:center;gap:5px;height:36px;padding:0 10px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink2);
  cursor:pointer;font:inherit;font-size:12.5px;line-height:1}
.langsw button:hover{color:var(--ink);border-color:var(--line2)}
.langsw svg{width:15px;height:15px}
.langsw b{font-family:var(--mono);font-weight:600;letter-spacing:.02em}
@media (max-width:720px){.langsw button{height:32px;padding:0 8px}}

/* 顶栏不放品牌副标题。
   英文导航比中文宽近 200px，副标题的英文（Gene-insertion site knowledge base）
   又比中文长一倍，两者挤完搜索框只剩 60px，没法输入。
   .wrap 上限是 1240px，屏幕再宽这一行也不会变宽，所以这不是「大屏就好了」的问题，
   加媒体查询没有意义。副标题是装饰、搜索是功能 —— 顶栏留搜索，
   副标题在页脚和各页标题里仍然有。 */
.brand-txt em{display:none}

/* 底盘切换条：只在收了两个以上底盘时渲染（见 base.html） */
.chassisbar{border-bottom:1px solid var(--line);background:var(--panel2,var(--panel))}
.cb-in{display:flex;align-items:center;gap:6px;padding:7px 0;flex-wrap:wrap}
.cb-lab{font-size:12px;color:var(--ink2);margin-right:2px}
a.cb{padding:4px 11px;border-radius:999px;font-size:12.5px;color:var(--ink2);
     border:1px solid var(--line);white-space:nowrap}
a.cb:hover{color:var(--ink);background:var(--bg)}
a.cb.on{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 45%,var(--line));
        background:color-mix(in srgb,var(--acc) 8%,transparent)}
a.cb.last{margin-left:auto;border-style:dashed}
@media (max-width:640px){
  .cb-lab{display:none}
  /* 换行会堆成三行把顶栏挤掉，窄屏改成横向滑 */
  .cb-in{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .cb-in::-webkit-scrollbar{display:none}
  a.cb.last{margin-left:0}
}

/* ---------- 表单控件 ----------
   .field input 原本只给登录框写的（width:100%;height:42px），range 和 checkbox
   也会被它命中：位点推荐页的勾选框被拉成 138×42 的大方块，下拉框则完全没样式
   （19px 高的原生控件压在深色底上）。下面把这几类控件各自管起来。 */
.field input[type=checkbox],.field input[type=radio]{width:auto;height:auto;accent-color:var(--acc)}
.field input[type=range]{height:auto;padding:0;border:0;background:none}
.field textarea,.field select{width:100%;border-radius:11px;border:1px solid var(--line);
  background:var(--bg2);color:var(--ink);font:inherit}
.field textarea{padding:11px 13px;font-family:var(--mono);font-size:12.5px;line-height:1.55;resize:vertical}
.field select{height:42px;padding:0 36px 0 13px;cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236f82a4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:16px}
.field textarea:focus,.field select:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 18%,transparent)}

/* 滑块：默认样式在深色底上是一条刺眼的亮蓝 */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:999px;
  background:linear-gradient(90deg,var(--acc),var(--acc2))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;
  margin-top:-5.5px;border-radius:50%;background:var(--panel);border:3px solid var(--acc);
  box-shadow:0 1px 6px rgba(0,0,0,.45)}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 25%,transparent)}
input[type=range]::-moz-range-track{height:5px;border-radius:999px;
  background:linear-gradient(90deg,var(--acc),var(--acc2))}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:var(--panel);border:3px solid var(--acc)}

/* 勾选项做成可点的整块，顺便躲开 .field input 的尺寸 */
/* .field label{display:block} 权重 (0,1,1) 压过 .check，勾选药丸会被拉成整列宽 */
label.check{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 14px;cursor:pointer;
  font-size:13.5px;color:var(--ink2);border:1px solid var(--line);border-radius:11px;
  background:var(--bg2);user-select:none;white-space:nowrap}
.check:hover{border-color:var(--line2);color:var(--ink)}
.check input{width:16px;height:16px;accent-color:var(--acc)}
.check:has(input:checked){border-color:color-mix(in srgb,var(--acc) 50%,var(--line));color:var(--ink)}

/* 说明块：比一段灰字好读，也能标出轻重 */
.note{display:flex;gap:10px;padding:12px 15px;border-radius:12px;background:var(--bg2);
  border:1px solid var(--line);font-size:12.5px;color:var(--ink2);line-height:1.62}
.note i{font-style:normal;flex:none}
.note.warn{background:color-mix(in srgb,var(--warn) 10%,transparent);
  border-color:color-mix(in srgb,var(--warn) 34%,var(--line))}

/* ---------- 位点推荐 ---------- */
/* 表单分两段：上段取序列，下段调条件。原先把两个滑块、下拉、勾选框和提交按钮
   塞进一个 auto-fit 网格，各自基线不齐，主按钮还被挤成 59px 宽。 */
.qform{padding:0;overflow:hidden}
.qf{padding:clamp(16px,2.3vw,22px) clamp(16px,2.4vw,24px)}
.qf + .qf{border-top:1px solid var(--line)}
.qf-opts{background:var(--bg2)}
.steplab{display:flex;align-items:center;gap:9px;margin-bottom:14px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.steplab i{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:11px;font-weight:700;background:var(--grad);color:#04121a;letter-spacing:0}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:14px 18px;align-items:end}
.opts .field{margin:0}
.qf-go{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.qf-go .btn{height:44px;padding:0 22px;font-size:14.5px}

.recs{display:grid;gap:10px;margin-bottom:24px}
.rec{display:grid;grid-template-columns:auto 1fr auto;gap:0 15px;align-items:start;
  padding:15px 18px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .15s,transform .15s}
.rec:hover{border-color:var(--line2);transform:translateY(-1px)}
.rec-rank{font-family:var(--mono);font-size:12.5px;color:var(--ink3);min-width:2.2ch;
  text-align:right;padding-top:4px}
.rec-main{min-width:0}
.rec-nm{font-family:var(--mono);font-size:16px;font-weight:650;letter-spacing:-.01em}
.rec-nm:hover{color:var(--acc)}
.rec-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.rec-sc{flex:none;min-width:104px;text-align:right}
.rec-sc b{display:block;font-family:var(--mono);font-size:19px;letter-spacing:-.02em;color:var(--acc);
  line-height:1.2}
.rec-sc span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.rec-bar{height:4px;border-radius:999px;background:var(--bg2);overflow:hidden;margin-top:8px}
.rec-bar i{display:block;height:100%;background:var(--grad)}
.rec-body{grid-column:2/-1;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.rec-why{display:flex;gap:7px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--ink3)}
.rec-use{margin:8px 0 0;font-size:12.5px;color:var(--ink3)}
@media (max-width:640px){
  .rec{grid-template-columns:auto 1fr;gap:0 11px;padding:14px}
  .rec-sc{grid-column:2;text-align:left;margin-top:11px;min-width:0}
  .rec-sc b{display:inline;font-size:17px}
  .rec-sc span{margin-left:6px}
  .rec-bar{margin-top:7px}
  .rec-body{grid-column:1/-1}
  .qf-go{flex-direction:column;align-items:stretch}
  .qf-go .btn{width:100%}
}

/* ===================== 表达强度预测页（predict） ===================== */
/* 配色与间距全部走既有令牌，不引入新色值 —— 明暗两套自动跟随。 */
.kl-big{font-family:var(--mono);font-size:30px;line-height:1.1;letter-spacing:-.02em;
  margin:6px 0 6px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.kl-a1{border-top:2px solid var(--acc)}
.kl-a2{border-top:2px solid var(--acc2)}
.kl-a3{border-top:2px solid var(--acc3)}

/* 场景卡片：可点的卡片要有明确的按钮语义与选中态 */
.kl-scen{display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;
  font:inherit;color:inherit;border:1px solid var(--line);background:var(--panel);
  transition:border-color .16s,transform .16s,box-shadow .16s}
.kl-scen b{font-size:14px}
.kl-scen .dim{font-size:12.5px;line-height:1.5}
.kl-scen:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:var(--sh)}
.kl-scen:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.kl-scen[aria-pressed="true"]{border-color:var(--acc);
  box-shadow:0 0 0 1px var(--acc) inset,var(--sh)}

/* 分段选择器：比原生 radio 更符合「选一个模式」的习惯 */
.kl-seg{display:flex;flex-wrap:wrap;gap:8px}
.kl-opt{position:relative;flex:1 1 180px;min-width:160px}
.kl-opt input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.kl-opt>span{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:11px;
  border:1px solid var(--line);background:var(--panel2);cursor:pointer;transition:border-color .15s,background .15s}
.kl-opt b{font-size:13.5px;font-weight:600}
.kl-opt em{font-style:normal;font-size:11.5px;color:var(--ink3);line-height:1.4}
.kl-opt input:hover+span{border-color:var(--line2)}
.kl-opt input:checked+span{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,var(--panel2))}
.kl-opt input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}

/* 货物四档：纵向列表，每档带精度与耗时，一眼可比 */
.kl-tiers{display:flex;flex-direction:column;gap:8px}
.kl-tiers .kl-opt{flex:1 1 auto}
.kl-tiers .kl-opt>span{flex-direction:row;align-items:flex-start;gap:10px;padding:11px 13px}
.kl-tier-n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:11.5px;background:var(--panel);border:1px solid var(--line2);color:var(--ink2)}
.kl-opt input:checked+span .kl-tier-n{background:var(--acc);border-color:var(--acc);color:#04231f}
.kl-tier-m{flex:1 1 auto;min-width:0}
.kl-tier-m b{display:block;font-size:13.5px}
.kl-tier-m em{display:block;font-style:normal;font-size:11.5px;color:var(--ink3);line-height:1.45;margin-top:2px}
.kl-tier-s{flex:none;text-align:right;font-family:var(--mono);font-size:11px;color:var(--ink2);line-height:1.5}
@media (max-width:620px){.kl-tiers .kl-opt>span{flex-wrap:wrap}.kl-tier-s{text-align:left;width:100%}}

.kl-adv summary{cursor:pointer;font-size:13px;color:var(--ink2);padding:6px 0}
.kl-adv summary:hover{color:var(--ink)}

/* 结果条形图：用长度表达相对强度，比纯数字快得多 */
.kl-bars{display:flex;flex-direction:column;gap:7px}
.kl-bar{display:grid;grid-template-columns:92px 1fr 104px;gap:10px;align-items:center;font-size:12.5px}
.kl-bar-pos{font-family:var(--mono);color:var(--ink2)}
.kl-bar-track{display:block;height:16px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);overflow:hidden}
.kl-bar-fill{display:block;height:100%;border-radius:8px 0 0 8px;background:var(--grad)}
.kl-bar-fill.meas{background:linear-gradient(90deg,var(--acc),var(--acc2))}
.kl-bar-fill.model{background:linear-gradient(90deg,var(--ink3),var(--acc2));opacity:.75}
.kl-bar-val{font-family:var(--mono);text-align:right;color:var(--ink2)}
@media (max-width:560px){.kl-bar{grid-template-columns:74px 1fr 84px;font-size:11.5px}}

/* 结果表 */
.kl-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.kl-tbl th,.kl-tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.kl-tbl th{font-size:11.5px;letter-spacing:.03em;color:var(--ink3);text-transform:uppercase;
  position:sticky;top:0;background:var(--panel);z-index:1}
.kl-tbl tr:last-child td{border-bottom:0}
.kl-tbl td.num,.kl-tbl th.num{text-align:right;font-family:var(--mono)}
.kl-tbl tbody tr:hover{background:var(--panel2)}
.kl-src{font-size:11px;padding:1.5px 7px;border-radius:999px;border:1px solid var(--line2)}
.kl-src.meas{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 50%,var(--line2))}
.kl-src.model{color:var(--ink2)}
.kl-flag{font-size:11px;padding:1.5px 6px;border-radius:999px;margin-left:4px;
  color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line2))}

/* 折叠说明 */
.kl-help{display:flex;flex-direction:column;gap:8px;margin:10px 0 28px}
.kl-help details{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.kl-help summary{cursor:pointer;padding:12px 15px;font-size:13.5px;list-style:none;
  display:flex;align-items:center;gap:9px}
.kl-help summary::-webkit-details-marker{display:none}
.kl-help summary::before{content:"";flex:none;width:7px;height:7px;border-right:1.8px solid var(--ink3);
  border-bottom:1.8px solid var(--ink3);transform:rotate(-45deg);transition:transform .18s}
.kl-help details[open] summary::before{transform:rotate(45deg)}
.kl-help summary:hover{background:var(--panel2)}
.kl-help details[open] summary{border-bottom:1px solid var(--line)}
.kl-hbody{padding:14px 16px 4px;font-size:13px;color:var(--ink2);line-height:1.65}
.kl-hbody p{margin:0 0 .85em}
.kl-hbody ul,.kl-hbody ol{margin:0 0 .9em;padding-left:1.3em}
.kl-hbody li{margin:0 0 .45em}
.kl-hbody b{color:var(--ink)}
.kl-warn{padding:9px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--warn) 40%,var(--line));
  background:color-mix(in srgb,var(--warn) 8%,transparent);color:var(--ink)}
.kl-busy{opacity:.55;pointer-events:none}

/* --- 版式修正 2026-11-08（截图验收后） --- */
/* 1) 场景卡：宽屏排 5 列，避免第 5 张孤零零换行 */
@media (min-width:1180px){ .kl-sc{grid-template-columns:repeat(5,1fr)!important} }
/* 2) 按钮行：本页不要 space-between，提示文字靠自己推到右边 */
#kl-form .qf-go{display:flex;justify-content:flex-start;gap:10px;align-items:center;flex-wrap:wrap}
#kl-form .qf-go #kl-hint{margin-left:auto;text-align:right;max-width:46ch}
/* 3) 分辨率说明与下一个标签之间要有呼吸 */
#kl-res-note{margin-bottom:16px}