/* 客服独立组件基座：保留现有视图的组件接口与原生弹窗行为；视觉令牌由 support-theme.css 管理。 */




:root {

  --bg:#f1f2f5;
  --bg-wash:radial-gradient(1200px 500px at 20% -10%, rgba(76,110,245,.08), transparent 60%),
            radial-gradient(900px 400px at 100% 0%, rgba(255,171,64,.06), transparent 55%);
  --panel:#fbfbfc;
  --panel-2:#f5f6f8;
  --panel-3:#eceef2;
  --line:rgba(20,26,40,.08);
  --line-strong:rgba(20,26,40,.16);
  --text:#1d2330;
  --text-2:#5b6474;
  --text-3:#8a92a3;
  --text-4:#b3b9c6;


  --side-bg:#ffffff;
  --side-bg-2:#f7f8fb;
  --side-line:rgba(20,26,40,.075);
  --side-text:#5b6474;
  --side-text-strong:#1d2330;
  --side-muted:#a6adba;
  --side-on-bg:#eaeefe;
  --side-on-text:#2f4fd8;


  --accent:#4c6ef5;
  --accent-2:#6d8cff;
  --accent-weak:#e9edfe;
  --accent-text:#2f4fd8;
  --ok:#158f63;      --ok-weak:#e1f4ec;
  --warn:#a56a00;    --warn-weak:#fbf0da;
  --danger:#c93b31;  --danger-weak:#fcebe9;
  --info:#556071;    --info-weak:#eceef2;


  --side-w:240px;
  --top-h:56px;
  --r:8px;
  --r-lg:12px;
  --r-xl:16px;
  --shadow-1:0 1px 1px rgba(20,26,40,.03), 0 1px 2px rgba(20,26,40,.04);
  --shadow-2:0 2px 6px rgba(20,26,40,.06), 0 8px 24px rgba(20,26,40,.06);
  --shadow-3:0 12px 40px rgba(20,26,40,.18);


  --f-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Menlo,Consolas,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",monospace;
}

[data-theme="dark"] {
  --bg:#0f1219;
  --bg-wash:radial-gradient(1200px 500px at 20% -10%, rgba(93,128,255,.10), transparent 60%),
            radial-gradient(900px 400px at 100% 0%, rgba(255,171,64,.05), transparent 55%);
  --panel:#171b25;
  --panel-2:#1c212d;
  --panel-3:#232937;
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.14);
  --text:#e7eaf0;
  --text-2:#a4acbc;
  --text-3:#737c8f;
  --text-4:#4f5768;

  --side-bg:#161a23;
  --side-bg-2:#1b2029;
  --side-line:rgba(255,255,255,.07);
  --side-text:#a4acbc;
  --side-text-strong:#e7eaf0;
  --side-muted:#5c6577;
  --side-on-bg:#1e2947;
  --side-on-text:#9fb4ff;

  --accent:#6d8cff; --accent-2:#8ea6ff; --accent-weak:#1b2440; --accent-text:#9fb4ff;
  --ok:#3fc48f;     --ok-weak:#12301f;
  --warn:#e0a83f;   --warn-weak:#2f2612;
  --danger:#f07067; --danger-weak:#3a1c1a;
  --info:#8e97a8;   --info-weak:#232937;
  --shadow-1:0 1px 2px rgba(0,0,0,.35);
  --shadow-2:0 4px 14px rgba(0,0,0,.4);
  --shadow-3:0 16px 48px rgba(0,0,0,.6);
}


*,*::before,*::after { box-sizing:border-box; }
html { height:100%; }
body {
  margin:0; min-height:100%;
  background:var(--bg); color:var(--text);
  font:13.5px/1.6 var(--f-sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"tnum" 1, "cv11" 1;
}
a { color:var(--accent-text); text-decoration:none; }
a:hover { text-decoration:underline; }
code,.mono { font-family:var(--f-mono); font-size:.92em; font-variant-numeric:tabular-nums; }
::selection { background:var(--accent-weak); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

svg.ic { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.75;
         stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }


.app { display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); min-height:100vh; }


.sidebar {
  background:var(--side-bg); color:var(--side-text);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
  border-right:1px solid var(--side-line);
}


.brand {
  height:var(--top-h); display:flex; align-items:center; gap:10px;
  padding:0 16px; border-bottom:1px solid var(--side-line); flex:0 0 auto;
}
.brand .logo {
  width:26px; height:26px; border-radius:8px; flex:0 0 auto; position:relative;
  background:linear-gradient(135deg,var(--accent),#8ea6ff);
  box-shadow:0 2px 8px rgba(76,110,245,.35);
}
.brand .logo::after {
  content:""; position:absolute; inset:7px; border-radius:3px; background:#fff;
  clip-path:polygon(0 30%,100% 0,100% 70%,0 100%);
}
.brand .txt { font-weight:600; letter-spacing:.01em; color:var(--side-text-strong); font-size:14px; }
.brand .env {
  margin-left:auto; font:600 10px var(--f-mono); letter-spacing:.08em; color:var(--ok);
  background:var(--ok-weak); padding:2px 7px; border-radius:99px;
}


.shopsq {
  width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  font:600 12px var(--f-mono); color:#fff; background:linear-gradient(135deg,#5b8cff,#8e6dff); flex:0 0 auto;
}
.shopsq.b { background:linear-gradient(135deg,#f6b26b,#e5646c); }
.shopsq.c { background:linear-gradient(135deg,#3fc48f,#1f8f6a); }

.nav { flex:1; overflow-y:auto; padding:10px 12px 12px; scrollbar-width:thin; }
.nav .group { margin-top:16px; }
.nav .group:first-child { margin-top:2px; }
.nav .group-label {
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--side-muted); padding:0 10px; margin-bottom:5px; font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.nav .group-label::after { content:""; flex:1; height:1px; background:var(--side-line); }
.nav a {
  display:flex; align-items:center; gap:10px; position:relative;
  padding:7px 10px; border-radius:var(--r); color:var(--side-text);
  font-size:13.5px; text-decoration:none; transition:background .12s, color .12s;
}
.nav a svg.ic { color:var(--text-4); transition:color .12s; }
.nav a:hover { background:var(--side-bg-2); color:var(--side-text-strong); text-decoration:none; }
.nav a:hover svg.ic { color:var(--text-3); }
.nav a.on { background:var(--side-on-bg); color:var(--side-on-text); font-weight:600; }
.nav a.on svg.ic { color:var(--side-on-text); }
.nav a.on::before {
  content:""; position:absolute; left:-12px; top:7px; bottom:7px; width:3px;
  border-radius:0 3px 3px 0; background:var(--accent);
}
.nav a .badge {
  margin-left:auto; font:600 11px var(--f-mono); min-width:18px; height:18px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center; border-radius:99px;
  background:var(--danger-weak); color:var(--danger);
}
.nav a .badge.soft { background:var(--panel-3); color:var(--text-3); }
.nav a .dot-warn { margin-left:auto; width:6px; height:6px; border-radius:50%; background:var(--warn); }


.side-foot {
  border-top:1px solid var(--side-line); padding:10px 14px; flex:0 0 auto;
  display:flex; align-items:center; gap:10px; margin-top:10px;
}
.side-foot .avatar {
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(135deg,#f6b26b,#e5646c); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600;
}
.side-foot .who { min-width:0; line-height:1.25; flex:1; }
.side-foot .who b { display:block; color:var(--side-text-strong); font-size:12.5px; font-weight:600;
                    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.side-foot .who span { font-size:11px; color:var(--side-muted); }


.ibtn {
  width:30px; height:30px; border-radius:var(--r); border:1px solid transparent;
  background:transparent; color:inherit; cursor:pointer; display:inline-flex;
  align-items:center; justify-content:center; position:relative;
}
.ibtn:hover { background:var(--panel-3); }
.ibtn .dot { position:absolute; top:6px; right:6px; width:6px; height:6px; border-radius:50%;
             background:var(--danger); box-shadow:0 0 0 2px var(--panel); }


.main { display:flex; flex-direction:column; min-width:0; background:var(--bg-wash), var(--bg); }

.topbar {
  height:var(--top-h);
  background:color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:14px; padding:0 24px;
  position:sticky; top:0; z-index:20;
}
.crumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-3); min-width:0; }
.crumb .sep { opacity:.5; }
.crumb b { color:var(--text); font-weight:600; }
.topbar .spacer { flex:1; }
.search {
  display:flex; align-items:center; gap:8px; height:34px; width:300px; max-width:32vw;
  padding:0 12px; border-radius:var(--r); border:1px solid var(--line-strong);
  background:var(--panel); color:var(--text-3); font-size:13px;
}
.search input { border:0; outline:0; background:transparent; flex:1; min-width:0; color:var(--text); font:inherit; }
.search kbd { font:11px var(--f-mono); color:var(--text-3); border:1px solid var(--line-strong);
              border-radius:4px; padding:0 5px; background:var(--panel-2); }
.topbar .ibtn { color:var(--text-2); }

.content { padding:24px 28px 72px; width:100%; max-width:1760px; margin:0 auto; }


.page-head { margin-bottom:20px; display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.page-head h1 { margin:0 0 4px; font-size:22px; letter-spacing:-.02em; font-weight:600; line-height:1.25; }
.page-head p { margin:0; color:var(--text-2); font-size:13.5px; max-width:70ch; }
.page-head .spacer { flex:1; }
.page-head .kicker { font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
                     color:var(--accent-text); font-weight:600; margin-bottom:6px; }


.grid { display:grid; gap:16px; }
.grid.c2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.c3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid.c4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid.main-rail { grid-template-columns:minmax(0,1fr) 340px; align-items:start; }
.grid.auto { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.span2 { grid-column:span 2; }


.panel {
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-1);
  display:flex; flex-direction:column; min-width:0;
}
.panel.hover:hover { box-shadow:var(--shadow-2); transform:translateY(-1px); transition:all .15s; }
.panel-head {
  padding:14px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px; min-height:52px;
}
.panel-head h2, .panel-head h3 { margin:0; font-size:14px; font-weight:600; letter-spacing:-.005em; }
.panel-head .spacer { flex:1; }
.panel-head .sub { font-size:12px; color:var(--text-3); }
.panel-body { padding:18px; }
.panel-body.tight { padding:0; }
.panel-foot {
  padding:12px 18px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:10px; background:var(--panel-2);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}


.sec { margin:36px 0 14px; display:flex; align-items:baseline; gap:12px; }
.sec .n { font:600 12px var(--f-mono); color:var(--accent-text); background:var(--accent-weak);
          padding:2px 8px; border-radius:99px; }
.sec h2 { margin:0; font-size:16px; font-weight:600; letter-spacing:-.01em; }
.sec p { margin:0; color:var(--text-3); font-size:12.5px; }
.sec::after { content:""; flex:1; height:1px; background:var(--line); margin-left:6px; }


.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:34px; padding:0 13px; border-radius:var(--r);
  border:1px solid var(--line-strong); background:var(--panel); color:var(--text);
  font:500 13px/1 var(--f-sans); cursor:pointer; white-space:nowrap;
  box-shadow:var(--shadow-1); transition:background .12s, box-shadow .12s, transform .05s;
}
.btn:hover { background:var(--panel-2); }
.btn:active { transform:translateY(.5px); box-shadow:none; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.primary { background:linear-gradient(180deg,var(--accent-2),var(--accent)); border-color:var(--accent); color:#fff;
               box-shadow:0 1px 2px rgba(76,110,245,.35), inset 0 1px 0 rgba(255,255,255,.18); }
.btn.primary:hover { filter:brightness(1.05); }
.btn.danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.btn.danger:hover { filter:brightness(1.06); }
.btn.ghost { border-color:transparent; background:transparent; color:var(--text-2); box-shadow:none; }
.btn.ghost:hover { background:var(--panel-3); color:var(--text); }
.btn.soft { background:var(--accent-weak); border-color:transparent; color:var(--accent-text); box-shadow:none; }
.btn.sm { height:28px; padding:0 10px; font-size:12.5px; }
.btn.lg { height:40px; padding:0 18px; font-size:14px; }
.btn-group { display:inline-flex; gap:8px; }


.field { margin-bottom:16px; }
.field > label { display:block; font-size:12.5px; font-weight:500; margin-bottom:6px; color:var(--text-2); }
.field .hint { font-size:12px; color:var(--text-3); margin-top:6px; line-height:1.5; }
.field .err { font-size:12px; color:var(--danger); margin-top:6px; }
.req { color:var(--danger); margin-left:2px; }

.input, .select, .textarea {
  width:100%; height:36px; padding:0 11px; border-radius:var(--r);
  border:1px solid var(--line-strong); background:var(--panel); color:var(--text);
  font:13.5px/1 var(--f-sans); outline:none; transition:border-color .12s, box-shadow .12s;
  box-shadow:inset 0 1px 1px rgba(20,26,40,.03);
}
.textarea { height:auto; padding:9px 11px; line-height:1.6; resize:vertical; min-height:88px; }
.input:focus,.select:focus,.textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak); }
.input.bad,.select.bad { border-color:var(--danger); }
.input.bad:focus { box-shadow:0 0 0 3px var(--danger-weak); }
.input:disabled,.select:disabled { background:var(--panel-2); color:var(--text-3); cursor:not-allowed; }
.select { appearance:none; padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a92a3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 11px center; }

.input-group { display:flex; }
.input-group .input { border-radius:var(--r) 0 0 var(--r); }
.input-group .addon {
  display:flex; align-items:center; padding:0 11px; font-size:12.5px; color:var(--text-2);
  border:1px solid var(--line-strong); border-left:0; border-radius:0 var(--r) var(--r) 0;
  background:var(--panel-2); white-space:nowrap;
}

.switch { display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; font-size:13.5px; }
.switch input { display:none; }
.switch .track { width:38px; height:22px; border-radius:99px; background:var(--text-4);
                 position:relative; transition:background .15s; flex:0 0 auto; }
.switch .track::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
                        border-radius:50%; background:#fff; transition:transform .15s;
                        box-shadow:0 1px 2px rgba(0,0,0,.3); }
.switch input:checked + .track { background:var(--accent); }
.switch input:checked + .track::after { transform:translateX(16px); }

.check { display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13.5px; }
.check input { width:15px; height:15px; accent-color:var(--accent); }

.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; }
.form-grid.c3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.form-grid.c4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.form-grid .full { grid-column:1/-1; }


.tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:2px 9px 2px 8px; border-radius:99px; font-size:12px; font-weight:500;
  background:var(--info-weak); color:var(--info); white-space:nowrap; line-height:1.55;
}
.tag::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.9; }
.tag.plain::before { display:none; }
.tag.plain { padding-left:9px; }
.tag.ok     { background:var(--ok-weak);     color:var(--ok); }
.tag.warn   { background:var(--warn-weak);   color:var(--warn); }
.tag.danger { background:var(--danger-weak); color:var(--danger); }
.tag.accent { background:var(--accent-weak); color:var(--accent-text); }
.tag.sq { border-radius:6px; }
.tag.outline { background:transparent; border:1px solid currentColor; opacity:.85; }


.table-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px; }
table.tbl th {
  text-align:left; font-weight:600; font-size:12px; letter-spacing:.02em; color:var(--text-3);
  padding:10px 14px; border-bottom:1px solid var(--line);
  background:var(--panel-2); white-space:nowrap; position:sticky; top:0; z-index:1;
}
table.tbl td { padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.tbl tbody tr { transition:background .1s; }
table.tbl tbody tr:hover { background:var(--panel-2); }
table.tbl tbody tr:last-child td { border-bottom:0; }
table.tbl .num { text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
table.tbl .actions { text-align:right; white-space:nowrap; }
table.tbl th.sortable { cursor:pointer; user-select:none; }
table.tbl th.sortable::after { content:"↕"; margin-left:5px; opacity:.35; }
table.tbl th.sortable.asc::after  { content:"↑"; opacity:1; color:var(--accent-text); }
table.tbl th.sortable.desc::after { content:"↓"; opacity:1; color:var(--accent-text); }
table.tbl.dense td { padding:7px 14px; }
table.tbl td.primary { font-weight:500; }
table.tbl tr.selected td { background:var(--accent-weak); }

.filterbar {
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--line);
}
.filterbar .field { margin:0; min-width:160px; }
.filterbar .spacer { flex:1; }

.bulkbar {
  display:flex; align-items:center; gap:12px; padding:10px 18px;
  background:var(--accent-weak); color:var(--accent-text);
  border-bottom:1px solid var(--line); font-size:13px;
}
.bulkbar .spacer { flex:1; }

.pager {
  display:flex; align-items:center; gap:10px; padding:12px 18px;
  border-top:1px solid var(--line); font-size:13px; color:var(--text-2);
}
.pager .spacer { flex:1; }
.pager .pg {
  min-width:30px; height:30px; padding:0 8px; display:inline-flex;
  align-items:center; justify-content:center; border-radius:var(--r);
  border:1px solid transparent; background:transparent; cursor:pointer;
  font:13px var(--f-mono); color:var(--text-2);
}
.pager .pg:hover { background:var(--panel-3); color:var(--text); }
.pager .pg.on { background:var(--accent); border-color:var(--accent); color:#fff; }


.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.stat {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 18px 14px; box-shadow:var(--shadow-1); position:relative; overflow:hidden;
}
.stat::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:.0; }
.stat.hl::before { opacity:1; }
.stat.hl.ok::before { background:var(--ok); }
.stat.hl.warn::before { background:var(--warn); }
.stat.hl.danger::before { background:var(--danger); }
.stat .k { font-size:12.5px; color:var(--text-2); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.stat .v { font-size:26px; font-weight:600; letter-spacing:-.03em; font-family:var(--f-mono);
           font-variant-numeric:tabular-nums; line-height:1.1; }
.stat .d { font-size:12px; margin-top:8px; color:var(--text-3); display:flex; align-items:center; gap:5px; }
.stat .d.up { color:var(--ok); }
.stat .d.down { color:var(--danger); }
.stat .spark { position:absolute; right:14px; bottom:12px; width:72px; height:26px; opacity:.55; }


.dl { display:grid; grid-template-columns:auto 1fr; gap:10px 20px; font-size:13.5px; }
.dl dt { color:var(--text-3); white-space:nowrap; }
.dl dd { margin:0; min-width:0; }
.dl.cols2 { grid-template-columns:auto 1fr auto 1fr; }


.amounts { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
           border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--panel-2); }
.amounts .cell { padding:12px 14px; border-right:1px solid var(--line); background:var(--panel); }
.amounts .cell:last-child { border-right:0; }
.amounts .cell.hl { background:var(--accent-weak); }
.amounts .k { font-size:12px; color:var(--text-2); margin-bottom:4px; }
.amounts .v { font-family:var(--f-mono); font-size:18px; font-weight:600; letter-spacing:-.02em; }
.amounts .cell.hl .v { color:var(--accent-text); }
.amounts .cell.diff .v { color:var(--warn); }


.alert {
  display:flex; gap:11px; padding:12px 14px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--panel-2);
  font-size:13.5px; margin-bottom:12px; align-items:flex-start;
}
.alert:last-child { margin-bottom:0; }
.alert .ic { flex:0 0 auto; margin-top:2px; }
.alert .bd { min-width:0; }
.alert .bd > b:first-child { display:block; margin-bottom:2px; }
.alert.ok     { background:var(--ok-weak);     border-color:transparent; color:var(--ok); }
.alert.warn   { background:var(--warn-weak);   border-color:transparent; color:var(--warn); }
.alert.danger { background:var(--danger-weak); border-color:transparent; color:var(--danger); }
.alert.accent { background:var(--accent-weak); border-color:transparent; color:var(--accent-text); }


.testbar {
  display:flex; align-items:center; gap:10px; padding:8px 24px;
  background:repeating-linear-gradient(135deg, var(--warn-weak) 0 14px, transparent 14px 28px), var(--panel);
  border-bottom:1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  color:var(--warn); font-size:13px; font-weight:600;
}


.steps { display:flex; align-items:center; overflow-x:auto; padding:4px 2px; gap:0; }
.steps .step { display:flex; align-items:center; gap:9px; white-space:nowrap; }
.steps .step .no {
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font:600 12px var(--f-mono); background:var(--panel-3); color:var(--text-3); flex:0 0 auto;
  border:1px solid var(--line-strong);
}
.steps .step .lb { font-size:13px; color:var(--text-3); }
.steps .step.done .no { background:var(--ok); border-color:var(--ok); color:#fff; }
.steps .step.done .lb { color:var(--text-2); }
.steps .step.on .no { background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 0 0 4px var(--accent-weak); }
.steps .step.on .lb { color:var(--text); font-weight:600; }
.steps .bar { width:32px; height:1px; background:var(--line-strong); flex:0 0 auto; margin:0 12px; }
.steps .bar.done { background:var(--ok); }


.tabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.tabs button {
  border:0; background:transparent; padding:9px 14px; cursor:pointer;
  font:500 13.5px var(--f-sans); color:var(--text-2);
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .12s;
}
.tabs button:hover { color:var(--text); }
.tabs button.on { color:var(--accent-text); border-bottom-color:var(--accent); }
.tabs.pills { border:0; gap:6px; margin-bottom:14px; }
.tabs.pills button { border-radius:99px; padding:6px 12px; border:1px solid transparent; margin:0; }
.tabs.pills button.on { background:var(--accent-weak); border-color:transparent; }


.empty { padding:48px 24px; text-align:center; color:var(--text-3); }
.empty .art { width:56px; height:56px; margin:0 auto 14px; border-radius:16px;
              background:var(--panel-3); display:flex; align-items:center; justify-content:center; }
.empty .art svg.ic { width:24px; height:24px; color:var(--text-3); }
.empty .big { font-size:14.5px; color:var(--text-2); margin-bottom:5px; font-weight:500; }
.empty .sm { font-size:13px; margin-bottom:16px; max-width:44ch; margin-left:auto; margin-right:auto; }


.sk { background:linear-gradient(90deg,var(--panel-3),var(--panel-2),var(--panel-3));
      background-size:200% 100%; animation:sk 1.3s linear infinite; border-radius:5px; height:12px; }
@keyframes sk { 0%{background-position:200% 0} 100%{background-position:-200% 0} }


.feed { list-style:none; margin:0; padding:0; }
.feed li { display:flex; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13px; }
.feed li:last-child { border-bottom:0; }
.feed .pip { width:8px; height:8px; border-radius:50%; margin-top:7px; flex:0 0 auto; background:var(--text-4); }
.feed .pip.ok { background:var(--ok); } .feed .pip.warn { background:var(--warn); }
.feed .pip.danger { background:var(--danger); } .feed .pip.accent { background:var(--accent); }
.feed .t { color:var(--text); }
.feed .m { font-size:12px; color:var(--text-3); margin-top:2px; }


.mask { position:fixed; inset:0; background:rgba(12,16,26,.5); backdrop-filter:blur(2px); z-index:40; }
.drawer {
  position:fixed; top:0; right:0; bottom:0; width:min(560px,94vw); z-index:50;
  background:var(--panel); border-left:1px solid var(--line); box-shadow:var(--shadow-3);
  display:flex; flex-direction:column;
}
.modal {
  position:fixed; z-index:50; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(480px,92vw); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--shadow-3); overflow:hidden;
}
.drawer .hd,.modal .hd {
  padding:14px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px; font-weight:600; font-size:14.5px;
}
.drawer .hd .spacer,.modal .hd .spacer { flex:1; }
.drawer .bd,.modal .bd { padding:18px; overflow-y:auto; flex:1; }
.drawer .ft,.modal .ft {
  padding:12px 18px; border-top:1px solid var(--line);
  display:flex; gap:8px; justify-content:flex-end; background:var(--panel-2);
}


.workbench {
  display:grid; grid-template-columns:280px minmax(0,1fr) 320px;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--panel); height:460px;
}
.workbench > * { min-width:0; overflow-y:auto; }
.workbench .wb-list  { border-right:1px solid var(--line); background:var(--panel-2); }
.workbench .wb-aside { border-left:1px solid var(--line); background:var(--panel-2); }
.wb-item { padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer; position:relative; }
.wb-item:hover { background:var(--panel); }
.wb-item.on { background:var(--panel); }
.wb-item.on::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); }
.wb-item .t { font-size:13px; font-weight:500; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wb-item .s { font-size:12px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; gap:6px; align-items:center; }
.wb-item .unread { width:7px; height:7px; border-radius:50%; background:var(--accent); flex:0 0 auto; }


.funnel { display:flex; flex-direction:column; gap:9px; }
.funnel .fr { display:flex; align-items:center; gap:12px; font-size:13px; }
.funnel .fr .lb { width:96px; color:var(--text-2); flex:0 0 auto; }
.funnel .fr .track { display:block; flex:1; height:24px; background:var(--panel-3); border-radius:6px; overflow:hidden; }
.funnel .fr .fill { display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
.funnel .fr .vv { width:118px; text-align:right; font-family:var(--f-mono); font-size:12.5px;
                  font-variant-numeric:tabular-nums; flex:0 0 auto; color:var(--text-2); }
.funnel .fr .vv b { color:var(--text); font-weight:600; }

.bars { display:flex; align-items:flex-end; gap:4px; height:64px; }
.bars i { flex:1; background:linear-gradient(180deg,var(--accent-2),var(--accent)); opacity:.8; border-radius:3px 3px 0 0; min-width:6px; }
.bars i.dim { opacity:.3; }


.muted { color:var(--text-3); }
.small { font-size:12.5px; }
.row { display:flex; align-items:center; gap:10px; }
.row.wrap { flex-wrap:wrap; }
.spacer { flex:1; }
.kv-inline { display:inline-flex; gap:6px; align-items:baseline; }
.kv-inline .k { color:var(--text-3); font-size:12px; }
.mask, .drawer, .modal { display:none; }
.show { display:block !important; }
.show.drawer, .show.modal { display:flex !important; }
.show.modal { flex-direction:column; }
.divider { height:1px; background:var(--line); margin:16px 0; }

@media (max-width:1280px) {
  .grid.main-rail { grid-template-columns:1fr; }
  .grid.c4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid.c3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1080px) {
  .app { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .workbench { grid-template-columns:1fr; height:auto; }
  .form-grid.c4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .form-grid, .form-grid.c3 { grid-template-columns:1fr; }
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns:1fr; }
  .span2 { grid-column:auto; }
  .search { display:none; }
  .content { padding:18px 16px 60px; }
}


.palette {
  position:fixed; z-index:60; top:12vh; left:50%; transform:translateX(-50%);
  width:min(640px,94vw); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--shadow-3); overflow:hidden; display:none; flex-direction:column;
}
.palette.show { display:flex; }
.palette .pin { display:flex; align-items:center; gap:10px; padding:0 16px; height:54px; border-bottom:1px solid var(--line); }
.palette .pin svg.ic { color:var(--text-3); width:18px; height:18px; }
.palette .pin input { flex:1; border:0; outline:0; background:transparent; font:15px var(--f-sans); color:var(--text); }
.palette .pin kbd { font:11px var(--f-mono); border:1px solid var(--line-strong); border-radius:4px; padding:1px 6px; color:var(--text-3); background:var(--panel-2); }
.palette .pl { max-height:420px; overflow-y:auto; padding:8px; }
.palette .pg { font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-4); font-weight:600; padding:10px 10px 4px; }
.palette .pi { display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:var(--r); cursor:pointer; font-size:13.5px; }
.palette .pi svg.ic { color:var(--text-3); }
.palette .pi .t { flex:1; min-width:0; }
.palette .pi .t small { display:block; font-size:12px; color:var(--text-3); }
.palette .pi .k { font:11px var(--f-mono); color:var(--text-4); }
.palette .pi.on, .palette .pi:hover { background:var(--accent-weak); }
.palette .pi.on svg.ic { color:var(--accent-text); }
.palette .pf { border-top:1px solid var(--line); padding:9px 16px; font-size:12px; color:var(--text-3); display:flex; gap:14px; background:var(--panel-2); }
.palette .pf kbd { font:11px var(--f-mono); border:1px solid var(--line-strong); border-radius:4px; padding:0 5px; background:var(--panel); margin-right:4px; }
.palette .none { padding:24px; text-align:center; color:var(--text-3); font-size:13px; }


.kbtn {
  display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 10px 0 12px;
  border:1px solid var(--line-strong); border-radius:var(--r); background:var(--panel);
  color:var(--text-3); font:inherit; cursor:pointer; width:260px; max-width:26vw;
  box-shadow:var(--shadow-1);
}
.kbtn:hover { background:var(--panel-2); color:var(--text-2); }
.kbtn span { flex:1; text-align:left; font-size:13px; }
.kbtn kbd {
  font:11px var(--f-mono); border:1px solid var(--line-strong); border-radius:4px;
  padding:0 5px; background:var(--panel-2);
}
@media (max-width:1080px) { .kbtn { width:auto; } .kbtn span { display:none; } }

.shopsq.xs { width:19px; height:19px; border-radius:5px; font-size:9.5px; }
.shopcell { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }


.dl dt .shopcell { color:var(--text); font-weight:500; }






.login-wrap {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background-image:var(--bg-wash);
}

.login-card {
  width:100%; max-width:380px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-xl); box-shadow:var(--shadow-2);
  padding:28px 28px 24px;
}

.login-brand { display:flex; align-items:center; gap:10px; margin-bottom:22px; }
.login-brand .logo {
  width:26px; height:26px; border-radius:8px; flex:0 0 auto; position:relative;
  background:linear-gradient(135deg,var(--accent),#8ea6ff);
  box-shadow:0 2px 8px rgba(76,110,245,.35);
}
.login-brand .logo::after {
  content:""; position:absolute; inset:7px; border-radius:3px; background:#fff;
  clip-path:polygon(0 30%,100% 0,100% 70%,0 100%);
}
.login-brand .txt { font-weight:600; font-size:14px; color:var(--text); }

.login-card h1 { margin:0 0 6px; font-size:19px; font-weight:600; }
.login-sub { margin:0 0 22px; font-size:12.5px; color:var(--text-3); line-height:1.6; }


.login-err:empty,
.login-err.validation-summary-valid { display:none; }
.login-err {
  margin:0 0 14px; padding:9px 12px; border-radius:var(--r);
  background:var(--danger-weak); color:var(--danger); font-size:12.5px; line-height:1.5;
}
.login-err ul { margin:0; padding-left:16px; }
.login-err li { list-style:none; margin-left:-16px; }

.login-submit { width:100%; justify-content:center; }
.login-note { margin:16px 0 0; font-size:11.5px; color:var(--text-4); text-align:center; }
.login-note a { color:var(--text-3); }


.tag.mini { font-size:11px; padding:0 6px; color:var(--text-3); }


.filterbar .filter-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; flex:1 1 100%; }
.filterbar .filter-row .field { flex:1 1 0; min-width:150px; }
.filterbar .filter-row .field.fit { flex:0 0 auto; }
.filterbar .filter-row .field.grow { flex:1 1 320px; }

.filter-range { display:flex; align-items:center; gap:6px; }
.filter-range .input { width:150px; }
.filter-find { display:flex; }
.filter-find .select { width:auto; flex:0 0 auto; border-radius:var(--r) 0 0 var(--r); border-right:0; }
.filter-find .input { flex:1; min-width:0; border-radius:0 var(--r) var(--r) 0; }

.label-toggle { display:inline-block; margin-bottom:6px; padding:0; border:0; background:none; cursor:pointer;
                font:500 12.5px var(--f-sans); color:var(--text-2); border-bottom:1px dashed var(--text-4); }
.label-toggle::after { content:" ⇄"; color:var(--text-3); }
.label-toggle:hover { color:var(--accent-text); border-bottom-color:currentColor; }


.tbl.nowrap th, .tbl.nowrap td { white-space:nowrap; }



.tbl td.break, .tbl.nowrap td.break { white-space:normal; overflow-wrap:anywhere; }

.cell-clip { display:inline-block; max-width:380px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }



.filterbar .filter-row .field:not(.fit) { max-width:340px; }

.filterbar .filter-row .btn-group { margin-left:auto; }
.chips { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.chip {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none;
  padding:6px 12px; border-radius:99px; border:1px solid var(--line-strong);
  background:var(--panel); color:var(--text-2); font-size:13px; line-height:1.2;
  transition:background .12s, border-color .12s, color .12s;
}
.chip input { position:absolute; width:1px; height:1px; opacity:0; }
.chip .dot { width:8px; height:8px; border-radius:50%; border:1.5px solid currentColor; opacity:.55; }
.chip input:checked ~ .dot { background:currentColor; opacity:1; }
.chip:hover { border-color:var(--accent); color:var(--accent-text); }
.chip:has(input:checked) { background:var(--accent-weak); border-color:var(--accent); color:var(--accent-text); font-weight:600; }
.chip:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.chip:has(input:disabled) { opacity:.5; cursor:not-allowed; border-style:dashed; }


a.tag { text-decoration:none; cursor:pointer; }
a.tag:hover { filter:brightness(.96); text-decoration:underline; }


.tbl.nowrap th.actions, .tbl.nowrap td.actions {
  position:sticky; right:0; z-index:2;
  background:var(--panel); box-shadow:-10px 0 10px -10px rgb(0 0 0 / .25);
}
.tbl.nowrap th.actions { z-index:3; background:var(--panel-2); }
.tbl.nowrap tbody tr:hover > td.actions { background:var(--panel-2); }

.tbl tr.row-upsell > td:first-child { box-shadow:inset 3px 0 0 var(--accent); }

.tbl tr.row-renewal > td:first-child { box-shadow:inset 3px 0 0 var(--ok); }


.col-stack { display:flex; flex-direction:column; gap:16px; min-width:0; }
.col-stack > .sec { margin:8px 0 -4px; }

.split2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.split2 > div { padding:16px 18px; min-width:0; }
.split2 > div + div { border-left:1px solid var(--line); }
.split-title { margin:0 0 12px; font-size:14px; font-weight:600; }
@media (max-width:1080px) {
  .split2 { grid-template-columns:1fr; }
  .split2 > div + div { border-left:0; border-top:1px solid var(--line); }
}

.dl.money dd { text-align:right; }
.dl.money .total { font-weight:600; color:var(--text); }
.dl .sep { grid-column:1 / -1; border-top:1px solid var(--line); }

.item-total { display:flex; justify-content:space-between; gap:12px; margin-top:10px; padding-top:10px;
              border-top:1px solid var(--line); font-size:13.5px; font-weight:600; }

.item-list { list-style:none; margin:0; padding:0; }
.item-list li { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
.item-list li:first-child { padding-top:0; }
.item-list li:last-child { border-bottom:0; }
.item-list .thumb { flex:0 0 auto; width:72px; height:72px; border-radius:8px; object-fit:cover; background:var(--panel-2); }

.item-list span.thumb { border:1px solid var(--line); }
.item-list .thumb-btn { flex:0 0 auto; padding:0; border:0; background:none; cursor:zoom-in; line-height:0; }
.item-list .thumb-btn .thumb { display:block; }

.img-pop { padding:0; border:0; background:transparent; overflow:visible; }
.img-pop::backdrop { background:rgba(0,0,0,.6); }
.img-pop button { padding:0; border:0; background:none; cursor:zoom-out; line-height:0; }
.img-pop img { display:block; max-width:min(90vw, 900px); max-height:90vh; border-radius:10px; background:#fff; }
.item-list .nm { flex:1; min-width:0; }
.item-list .sub { font-size:12px; color:var(--text-3); margin-top:2px; }
.item-list .qty { flex:0 0 auto; color:var(--text-2); }
.item-list .sum { flex:0 0 auto; min-width:64px; text-align:right; }

.dl dd.break { word-break:break-all; }


.timeline { list-style:none; margin:0; padding:6px 0; position:relative; }
.timeline::before { content:""; position:absolute; left:23px; top:0; bottom:0; width:2px; background:var(--line); }
.timeline li { position:relative; display:flex; align-items:flex-start; gap:12px; padding:9px 18px 9px 44px; font-size:13px; }
.timeline li.day { padding:14px 18px 2px 44px; font-size:12px; color:var(--text-3); }
.timeline .pip { position:absolute; left:19px; top:14px; width:10px; height:10px; border-radius:50%;
                 background:var(--text-4); box-shadow:0 0 0 3px var(--panel); }
.timeline .pip.ok { background:var(--ok); }
.timeline .pip.danger { background:var(--danger); }
.timeline .pip.accent { background:var(--accent); }
.timeline .body { flex:1; min-width:0; }
.timeline .t { color:var(--text); }
.timeline .m { font-size:12px; color:var(--text-3); margin-top:2px; word-break:break-all; }
.timeline .time { flex:0 0 auto; font-size:12px; color:var(--text-3); }



.stat.has-spark { padding-right:96px; }

.stat.has-spark .d { display:block; }
.stat .spark polyline { fill:none; stroke:var(--accent); stroke-width:1.6;
                        stroke-linejoin:round; stroke-linecap:round; }
.stat .spark circle { fill:var(--accent); }


.txt-up   { color:var(--ok); }
.txt-down { color:var(--danger); }


.topbar-meta b { color:var(--text-2); font-weight:600; }
.topbar-meta { display:inline-flex; align-items:center; gap:8px; min-width:0; }

.topbar-actions { display:inline-flex; align-items:center; gap:6px; }
@media (max-width:900px) { .topbar-meta { display:none; } }


.chart { width:100%; height:auto; display:block; overflow:visible; }
.chart .axis { stroke:var(--line); stroke-width:1; }
.chart .line { fill:none; stroke:var(--accent); stroke-width:2;
               stroke-linejoin:round; stroke-linecap:round; }
.chart .dot  { fill:var(--accent); }
.chart .lbl  { font:10px var(--f-mono); fill:var(--text-3); }

.chart .line.cmp { stroke:var(--text-3); stroke-width:1.5; stroke-dasharray:4 4; }
.chart .dot.cmp  { fill:var(--text-3); }
.chart .grid-line { stroke:var(--line); stroke-width:1; stroke-dasharray:2 4; }

.chart-x { display:flex; justify-content:space-between; margin-top:6px;
           font:11px var(--f-mono); color:var(--text-3); }
.chart-legend { display:flex; gap:18px; justify-content:center; margin-top:10px;
                font-size:12px; color:var(--text-2); }
.chart-legend .sw { display:inline-block; width:16px; height:0; vertical-align:middle;
                    margin-right:6px; border-top:2px solid var(--accent); }
.chart-legend .sw.cmp { border-top:2px dashed var(--text-3); }


.donut-wrap { position:relative; max-width:170px; margin:0 auto; }
.donut-wrap .ctr { position:absolute; inset:0; display:flex; flex-direction:column;
                   align-items:center; justify-content:center; pointer-events:none; }
.donut-wrap .ctr b { font:600 17px var(--f-mono); letter-spacing:-.02em; }
.donut-wrap .ctr span { font-size:11px; color:var(--text-3); margin-top:2px; }


.funnel.rank .fr .lb { width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }


.pie { transform:rotate(-90deg); transform-origin:50% 50%; }
.pie circle { fill:none; stroke-width:22; }
.pie-legend { display:flex; flex-direction:column; gap:7px; margin-top:12px; font-size:12.5px; }
.pie-legend .it { display:flex; align-items:center; gap:8px; }
.pie-legend .sw { width:9px; height:9px; border-radius:2px; flex:0 0 auto; }
.pie-legend .nm { font-family:var(--f-mono); }
.pie-legend .vv { margin-left:auto; font-family:var(--f-mono); color:var(--text-2);
                  font-variant-numeric:tabular-nums; }



.side-foot .logout-form { display:flex; margin-left:auto; }


.dict-icon { display:inline-block; height:24px; width:auto; max-width:80px; object-fit:contain; vertical-align:middle; }
.dict-icon.lg { height:40px; max-width:160px; }


.modal[popover] { inset:0; margin:auto; transform:none; height:fit-content; max-height:90vh; padding:0; color:inherit; }
.modal[popover]:popover-open { display:flex; flex-direction:column; }
.modal[popover]::backdrop { background:rgba(12,16,26,.5); }
.modal.wide { width:min(640px,92vw); }
.modal form { display:flex; flex-direction:column; min-height:0; }


.split-cols { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; }
@media (max-width:1080px) { .split-cols { grid-template-columns:1fr; } }
.dl.compact { row-gap:6px; }


.tabs a {
  padding:9px 14px; font:500 13.5px var(--f-sans); color:var(--text-2); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .12s;
}
.tabs a:hover { color:var(--text); }
.tabs a.on { color:var(--accent-text); border-bottom-color:var(--accent); }


.menu[popover] { padding:4px; min-width:120px; border:1px solid var(--line-strong); border-radius:var(--r);
                 background:var(--panel); color:var(--text); box-shadow:var(--shadow-2); }
@supports (position-area: bottom) {
  .menu[popover] { inset:auto; margin:4px 0 0; position-area:bottom span-left; position-try-fallbacks:flip-block; }
}
.menu a { display:block; padding:6px 12px; border-radius:6px; color:var(--text); text-decoration:none; font-size:13px; text-align:left; }
.menu a:hover { background:var(--panel-3); }


.fold > summary {
  list-style:none; cursor:pointer; user-select:none;
  padding:11px 18px; font-size:13px; color:var(--text-2);
  display:flex; align-items:center; gap:8px;
}
.fold > summary::-webkit-details-marker { display:none; }
.fold > summary::before { content:"▸"; color:var(--text-3); font-size:11px; }
.fold[open] > summary::before { content:"▾"; }
.fold > summary:hover { color:var(--text); background:var(--panel-2); }
.fold[open] > summary { border-bottom:1px solid var(--line); }


.btn-link { border:0; background:none; padding:0; font:inherit; color:var(--accent-text); cursor:pointer; }
.btn-link:hover { text-decoration:underline; }


.modal.wider { width:min(940px,94vw); }