/* 参数中心 · 设计系统 v3 */
:root{
  --bg:#f6f7f9; --bg-2:#ffffff; --bg-3:#f1f2f5;
  --ink:#12141a; --ink-2:#5b6070; --ink-3:#767d8e;
  --line:#e8eaef; --line-2:#d9dce4;
  --accent:#2f6bff; --accent-ink:#1d4fd4; --accent-soft:#eaf0ff;
  --ok:#0f9d58; --warn:#c9820b; --danger:#d93b3b; --danger-soft:#fdecec;
  --r:14px; --r-sm:9px;
  --sh-1:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04);
  --sh-2:0 4px 12px rgba(16,24,40,.07),0 1px 3px rgba(16,24,40,.05);
  --sh-3:0 18px 48px rgba(16,24,40,.16),0 4px 12px rgba(16,24,40,.08);
}
html[data-theme="dark"]{
  --bg:#0e1015; --bg-2:#161920; --bg-3:#1d2129;
  --ink:#eef0f5; --ink-2:#a3a9b8; --ink-3:#767d8e;
  --line:#242833; --line-2:#2f3441;
  --accent:#6b93ff; --accent-ink:#9db4ff; --accent-soft:#1b2440;
  --ok:#3ecf8e; --warn:#e0a53c; --danger:#ff6b6b; --danger-soft:#3a1e1e;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 6px 18px rgba(0,0,0,.5);
  --sh-3:0 24px 60px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 13.5px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1;
}
button,input,select{font:inherit;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

.app{display:flex;height:100vh;overflow:hidden}

/* ---------- 侧栏 ---------- */
.rail{
  width:252px;flex:0 0 252px;display:flex;flex-direction:column;gap:14px;
  padding:18px 14px 14px;background:var(--bg-2);border-right:1px solid var(--line);
  transition:width .2s ease,flex-basis .2s ease,padding .2s ease;
}
.rail-top{display:flex;align-items:center;gap:10px;padding:0 4px;min-height:34px}
.mark{width:32px;height:32px;flex:0 0 32px;border-radius:10px;background:linear-gradient(150deg,var(--accent),var(--accent-ink));display:grid;place-items:center;color:#fff;box-shadow:0 2px 6px rgba(47,107,255,.35)}
.mark svg{width:19px;height:19px}
.mark-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.mark-txt b{font-size:14.5px;font-weight:680;letter-spacing:-.01em}
.mark-txt span{font-size:10.5px;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}

.rail-search{
  display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--bg-3);transition:border-color .15s,box-shadow .15s;
}
.rail-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 14%,transparent);background:var(--bg-2)}
.rail-search svg{width:14px;height:14px;color:var(--ink-3);flex:0 0 14px}
.rail-search input{border:0;background:none;outline:0;width:100%;font-size:12.5px}
.rail-search kbd{font:600 10px/1 ui-monospace,Menlo,monospace;color:var(--ink-3);border:1px solid var(--line-2);border-radius:4px;padding:2px 4px;background:var(--bg-2)}

.nav{flex:1;overflow-y:auto;margin:0 -6px;padding:0 6px;display:flex;flex-direction:column;gap:1px}
.nav::-webkit-scrollbar{width:6px}
.nav-group{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:14px 8px 5px}
.nav-item{
  display:flex;align-items:center;gap:9px;padding:7px 9px;border:0;background:none;border-radius:8px;
  cursor:pointer;text-align:left;width:100%;color:var(--ink-2);font-size:13px;position:relative;
  transition:background .13s,color .13s;
}
.nav-item:hover{background:var(--bg-3);color:var(--ink)}
.nav-item svg{width:14.5px;height:14.5px;flex:0 0 14.5px;opacity:.6}
.nav-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item .cnt{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.nav-item.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.nav-item.on svg{opacity:1}
.nav-item.on::before{content:"";position:absolute;left:-6px;top:7px;bottom:7px;width:2.5px;border-radius:99px;background:var(--accent)}
.nav-item.on .cnt{color:var(--accent-ink);opacity:.75}

.rail-foot{display:flex;align-items:center;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.live{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.live i{width:6px;height:6px;border-radius:99px;background:var(--ink-3);flex:0 0 6px}
.live.ok i{background:var(--ok);box-shadow:0 0 0 3px color-mix(in oklab,var(--ok) 18%,transparent)}
.live.bad i{background:var(--danger)}
.rail-acts{display:flex;gap:2px}

.ibtn{width:30px;height:30px;display:grid;place-items:center;border:0;background:none;border-radius:8px;color:var(--ink-2);cursor:pointer;transition:background .13s,color .13s}
.ibtn:hover{background:var(--bg-3);color:var(--ink)}
.ibtn svg{width:16px;height:16px}
.ibtn.sq{border:1px solid var(--line);background:var(--bg-2)}
.ibtn.sq:hover{border-color:var(--line-2)}
.ibtn[disabled]{opacity:.38;cursor:not-allowed}

.rail.mini{width:66px;flex-basis:66px;padding:18px 10px 14px;align-items:center}
.rail.mini .mark-txt,.rail.mini .rail-search input,.rail.mini .rail-search kbd,.rail.mini .nav-group,.rail.mini .nav-item span,.rail.mini .live{display:none}
.rail.mini .rail-search{justify-content:center;padding:7px}
.rail.mini .nav-item{justify-content:center;padding:9px}
.rail.mini .nav-item.on::before{left:-10px}
.rail.mini .rail-foot{flex-direction:column}

/* ---------- 主区 ---------- */
.stage{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;padding:20px 22px 16px;gap:14px}

.thead{display:flex;align-items:flex-start;gap:16px}
.head-l{min-width:0;flex:1}
.crumb{font-size:11.5px;color:var(--ink-3);letter-spacing:.02em;margin-bottom:3px}
.thead h1{margin:0;font-size:23px;font-weight:680;letter-spacing:-.022em;line-height:1.2}
.head-desc{margin:5px 0 0;font-size:12.5px;color:var(--ink-2);display:flex;gap:12px;flex-wrap:wrap}
.head-desc b{color:var(--ink);font-weight:650}
.head-r{display:flex;gap:8px;align-items:center;position:relative;padding-top:16px}

.btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--line);
  background:var(--bg-2);border-radius:var(--r-sm);font-size:12.8px;font-weight:560;cursor:pointer;color:var(--ink);
  transition:border-color .13s,background .13s,box-shadow .13s,transform .08s;white-space:nowrap}
.btn svg{width:15px;height:15px;opacity:.72}
.btn:hover{border-color:var(--line-2);background:var(--bg-3)}
.btn:active{transform:translateY(.5px)}
.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--bg-2)}
html[data-theme="dark"] .btn.primary{background:var(--accent);border-color:var(--accent);color:#0b1220}
.btn.primary svg{opacity:.9}
.btn.primary:hover{filter:brightness(1.14)}
.btn.soft{background:var(--bg-2)}
.btn.ghost{background:none;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{background:var(--bg-3);color:var(--ink)}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.danger:hover{filter:brightness(1.06)}
.btn.tiny{height:27px;padding:0 9px;font-size:12px;border-radius:7px}
.btn em.fc{font-style:normal;font-size:10.5px;font-weight:700;background:var(--accent);color:#fff;border-radius:99px;padding:1px 5px;min-width:16px;text-align:center}

/* 筛选条 */
.filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sbox{display:flex;align-items:center;gap:7px;height:34px;padding:0 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--bg-2);width:300px;transition:border-color .15s,box-shadow .15s}
.sbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 13%,transparent)}
.sbox svg{width:14.5px;height:14.5px;color:var(--ink-3);flex:0 0 14.5px}
.sbox input{border:0;background:none;outline:0;width:100%;font-size:13px}
.sbox-clear{border:0;background:var(--bg-3);color:var(--ink-2);width:17px;height:17px;border-radius:99px;cursor:pointer;line-height:1;font-size:12px;display:grid;place-items:center}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;height:27px;padding:0 4px 0 9px;border-radius:99px;
  background:var(--accent-soft);color:var(--accent-ink);font-size:12px;border:1px solid color-mix(in oklab,var(--accent) 18%,transparent)}
.chip b{font-weight:650}
.chip x{border:0;background:none;color:inherit;cursor:pointer;width:17px;height:17px;border-radius:99px;display:grid;place-items:center;opacity:.6;font-size:13px;line-height:1}
.chip x:hover{opacity:1;background:color-mix(in oklab,var(--accent) 16%,transparent)}
.grow{flex:1}
.result{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.result b{color:var(--ink);font-weight:650}

/* 卡片 */
.card{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden;position:relative}
.bulk,.savbar{display:flex;align-items:center;gap:10px;padding:8px 14px;font-size:12.5px;border-bottom:1px solid var(--line)}
.bulk{background:var(--accent-soft);color:var(--accent-ink)}
.bulk b,.savbar b{font-weight:700}
.savbar{background:color-mix(in oklab,var(--warn) 12%,var(--bg-2));color:var(--warn)}
.savbar>span{flex:1}

.gridbox{flex:1;min-height:0;overflow:auto;position:relative;padding-right:6px}
.grid{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.grid.hide{display:none}
.grid thead th{
  position:sticky;top:0;z-index:3;background:var(--bg-2);text-align:left;
  padding:9px 12px;border-bottom:1px solid var(--line);
  font-size:11px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:var(--ink-2);
  white-space:nowrap;cursor:pointer;user-select:none;
}
.grid thead th:hover{color:var(--ink-2);background:var(--bg-3)}
.grid thead th .th{display:inline-flex;align-items:center;gap:5px}
.grid thead th .tm{font-size:9.5px;opacity:.5}
.grid thead th.sorted{color:var(--accent-ink)}
.grid thead th.sorted .tm{opacity:1;color:var(--accent)}
.grid thead th.ck{width:38px;padding-left:14px;cursor:default}
.grid thead th.ck:hover{background:var(--bg-2)}
.grid thead th.nm{width:44px;text-align:right;padding-right:12px}
.grid thead th.flg{text-align:center}

.grid tbody td{
  padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;
  max-width:330px;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;
}
.grid tbody tr{transition:background .1s}
.grid tbody tr:hover{background:var(--bg-3)}
.grid tbody tr.sel{background:var(--accent-soft)}
.grid tbody tr.sel td:first-child{box-shadow:inset 2.5px 0 0 var(--accent)}
.grid tbody tr.dirty td{background:color-mix(in oklab,var(--warn) 9%,transparent)}
.grid tbody td.ck{padding-left:14px}
.grid tbody td.nm{text-align:right;color:var(--ink-3);font-size:11.5px;font-variant-numeric:tabular-nums;padding-right:12px}
.grid tbody td.num{text-align:right;font-variant-numeric:tabular-nums}
.grid tbody td.flg{text-align:center}
.grid tbody td.null{color:color-mix(in oklab,var(--ink-3) 88%,var(--ink));font-style:italic}
.grid tbody td.ed{cursor:cell;position:relative}
.grid tbody td.ed:hover{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--accent) 30%,transparent)}
.grid tbody td.ro{color:var(--ink-2)}
.grid tbody td .badge{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;padding:1px 7px;border-radius:99px;font-weight:560}
.badge.yes{background:color-mix(in oklab,var(--ok) 14%,transparent);color:var(--ok)}
.badge.no{background:var(--bg-3);color:var(--ink-3)}
.badge.warn{background:color-mix(in oklab,var(--warn) 15%,transparent);color:var(--warn)}
.grid input.cellin{width:100%;border:1px solid var(--accent);border-radius:6px;padding:4px 7px;background:var(--bg-2);outline:0;font-size:12.8px;box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 14%,transparent)}
.tck{width:14px;height:14px;accent-color:var(--accent);cursor:pointer}

.skel{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.skel i{display:block;height:13px;border-radius:6px;background:linear-gradient(90deg,var(--bg-3) 25%,var(--line) 50%,var(--bg-3) 75%);background-size:220% 100%;animation:sh 1.1s infinite linear}
@keyframes sh{0%{background-position:120% 0}100%{background-position:-40% 0}}
.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink-3)}
.empty svg{width:30px;height:30px;opacity:.45;margin-bottom:2px}
.empty b{font-size:13.5px;color:var(--ink-2);font-weight:620}
.empty span{font-size:12px}

.pfoot{display:flex;align-items:center;gap:12px;padding:9px 14px;border-top:1px solid var(--line);background:var(--bg-2)}
.pinfo{flex:1;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pctl{display:flex;align-items:center;gap:6px}
.plabel{font-size:12px;color:var(--ink-2);min-width:56px;text-align:center;font-variant-numeric:tabular-nums}
.mini-sel{height:27px;border:1px solid var(--line);border-radius:7px;background:var(--bg-2);font-size:12px;padding:0 6px;cursor:pointer}

/* ---------- 抽屉 ---------- */
.scrim{position:fixed;inset:0;background:rgba(12,16,26,.32);backdrop-filter:blur(2px);z-index:40;animation:fade .16s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(560px,94vw);background:var(--bg-2);z-index:50;
  display:flex;flex-direction:column;border-left:1px solid var(--line);box-shadow:var(--sh-3);
  animation:slide .2s cubic-bezier(.22,.8,.35,1);
}
@keyframes slide{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.drawer-head{display:flex;align-items:flex-start;gap:12px;padding:18px 18px 14px;border-bottom:1px solid var(--line)}
.drawer-head>div{flex:1;min-width:0}
.drawer-head h2{margin:2px 0 0;font-size:17px;font-weight:680;letter-spacing:-.015em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drawer-body{flex:1;overflow:auto;padding:16px 18px;display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;align-content:start}
.drawer-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line);background:var(--bg-2)}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld.wide{grid-column:1/-1}
.fld label{font-size:11.5px;font-weight:620;color:var(--ink-3);letter-spacing:.02em}
.fld input,.fld select{height:33px;border:1px solid var(--line);border-radius:8px;background:var(--bg-3);padding:0 9px;font-size:13px;outline:0;transition:border-color .13s,box-shadow .13s,background .13s}
.fld input:focus,.fld select:focus{border-color:var(--accent);background:var(--bg-2);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 13%,transparent)}
.fld input[readonly]{color:var(--ink-2);background:var(--bg-3);cursor:default}

/* ---------- 命令面板 ---------- */
.cmdk{position:fixed;inset:0;z-index:70;background:rgba(12,16,26,.4);backdrop-filter:blur(3px);display:flex;justify-content:center;padding-top:12vh;animation:fade .14s ease}
.cmdk-box{width:min(560px,92vw);height:fit-content;max-height:60vh;background:var(--bg-2);border-radius:16px;box-shadow:var(--sh-3);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.cmdk-box input{border:0;border-bottom:1px solid var(--line);background:none;outline:0;padding:15px 17px;font-size:15px}
.cmdk-list{overflow:auto;padding:6px}
.cmdk-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px}
.cmdk-item .k{font-size:10.5px;color:var(--ink-3);margin-left:auto;text-transform:uppercase;letter-spacing:.05em}
.cmdk-item.on{background:var(--accent-soft);color:var(--accent-ink)}
.cmdk-foot{padding:7px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-3);display:flex;gap:8px}
.cmdk-foot kbd{font:600 10px/1 ui-monospace,monospace;border:1px solid var(--line-2);border-radius:4px;padding:2px 4px}

/* ---------- 弹层：列 & 筛选 ---------- */
.colpop{position:absolute;top:52px;right:0;z-index:30;width:264px;max-height:52vh;overflow:auto;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);padding:7px}
.colpop label{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:7px;font-size:12.5px;cursor:pointer}
.colpop label:hover{background:var(--bg-3)}
.colpop .cph{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);padding:8px 8px 3px}

.pop{position:fixed;z-index:60;width:min(572px,94vw);max-height:64vh;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-3);display:flex;flex-direction:column;overflow:hidden}
.pop-head{padding:9px;border-bottom:1px solid var(--line)}
.pop-head input{width:100%;height:33px;border:1px solid var(--line);border-radius:8px;background:var(--bg-3);padding:0 10px;outline:0;font-size:13px}
.pop-head input:focus{border-color:var(--accent);background:var(--bg-2)}
.pop-body{overflow:auto;padding:6px}
.pop-row{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:12.8px}
.pop-row:hover,.pop-row.on{background:var(--accent-soft);color:var(--accent-ink)}
.pop-row .t{margin-left:auto;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);border:1px solid var(--line-2);border-radius:4px;padding:1px 4px}
.pop-lab{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);padding:9px 9px 4px}
.pop-form{padding:11px;display:flex;flex-direction:column;gap:9px}
.pop-form .ops{display:flex;gap:5px;flex-wrap:wrap}
.opb{height:27px;padding:0 9px;border:1px solid var(--line);background:var(--bg-2);border-radius:99px;font-size:12px;cursor:pointer;color:var(--ink-2)}
.opb:hover{border-color:var(--line-2)}
.opb.on{background:var(--ink);border-color:var(--ink);color:var(--bg-2)}
.pop-form .vin{display:flex;gap:6px;align-items:center}
.pop-form input[type=text],.pop-form input[type=number],.pop-form input[type=date]{flex:1;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--bg-3);padding:0 9px;outline:0;font-size:13px}
.pop-form input:focus{border-color:var(--accent);background:var(--bg-2)}
.pop-form .hint{font-size:11.5px;color:var(--ink-3)}
.pop-foot{display:flex;justify-content:flex-end;gap:7px;padding:9px 11px;border-top:1px solid var(--line)}
.sug{display:flex;flex-wrap:wrap;gap:5px;max-height:132px;overflow:auto}
.sug button{height:24px;padding:0 8px;border:1px solid var(--line);background:var(--bg-3);border-radius:99px;font-size:11.5px;cursor:pointer;color:var(--ink-2);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sug button:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
.sug button s{text-decoration:none;color:var(--ink-3);margin-left:4px;font-size:10px}

/* toast */
.toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--ink);color:var(--bg-2);padding:9px 15px;border-radius:99px;font-size:12.8px;box-shadow:var(--sh-2);animation:up .2s ease}
.toast.ok{background:var(--ok)}
.toast.bad{background:var(--danger)}
@keyframes up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:900px){
  .rail{position:fixed;left:0;top:0;bottom:0;z-index:45;transform:translateX(-100%);transition:transform .2s}
  .rail.open{transform:none}
  .stage{padding:14px}
  .sbox{width:100%}
  .head-r{padding-top:0}
  .drawer-body{grid-template-columns:1fr}
}
@media print{
  .rail,.filterbar,.head-r,.pfoot,.drawer,.scrim,.bulk,.savbar{display:none!important}
  .stage{padding:0}.card{border:0;box-shadow:none}
}

/* 筛选表单 */
.frow{display:flex;align-items:center;gap:9px;padding:4px 10px}
.frow:hover .flab{color:var(--ink)}
.flab{width:82px;flex:0 0 82px;font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fctl{flex:1;display:flex;gap:5px;align-items:center;min-width:0}
.fin,.fsel{height:31px;border:1px solid var(--line);border-radius:8px;background:var(--bg-3);padding:0 8px;font-size:12.5px;outline:0;min-width:0;flex:1;color:var(--ink)}
.fin::placeholder{color:var(--ink-3)}
.fin:focus,.fsel:focus{border-color:var(--accent);background:var(--bg-2);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 12%,transparent)}
.fsel{flex:0 0 78px;cursor:pointer}
.fops{display:flex;gap:2px;background:var(--bg-3);border-radius:8px;padding:2px;flex:0 0 auto}
.fop{border:0;background:none;border-radius:6px;height:27px;padding:0 9px;font-size:11.5px;cursor:pointer;color:var(--ink-2)}
.fop.on{background:var(--bg-2);color:var(--ink);box-shadow:var(--sh-1);font-weight:620}
.fsep{font-size:11px;color:var(--ink-3);flex:0 0 auto}
.fgroup{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);padding:11px 10px 4px;display:flex;align-items:center;gap:6px}
.fgroup:after{content:"";flex:1;height:1px;background:var(--line)}
.pop-foot{position:sticky;bottom:0;background:var(--bg-2);box-shadow:0 -6px 12px -8px rgba(16,24,40,.14)}
.pop-body{padding-bottom:4px}