/* =========================================================
   天津信选运营平台 · 控制台
   继承公司官网视觉：深色底、琥珀强调、胶囊按钮、细线分区
   ========================================================= */
:root{
  --ink:#05070c;
  --ink-2:#080c14;
  --surface:#0d121c;
  --surface-2:#111826;
  --surface-3:#151d2c;
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.16);
  --text:#e9eefb;
  --muted:rgba(233,238,251,.62);
  --dim:rgba(233,238,251,.42);
  --accent:#ffb45c;
  /* 同色别名：拖拽区、版式选项、素材选择器、开关这些控件沿用了播放器/配对页的 --amber 写法，
     之前 app.css 里没定义，取色悄悄退化成透明（比如开关圆点看不见） */
  --amber:#ffb45c;
  --accent-ink:#2a1603;
  --accent-soft:rgba(255,180,92,.14);
  --blue:#7aa7ff;
  --green:#5fd6a5;
  --red:#ff6b6b;
  --violet:#a78bfa;
  --r:18px;
  --r-sm:12px;
  --sidebar:250px;
  --font:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 24px 60px -32px rgba(0,0,0,.9);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--ink);color:var(--text);
  -webkit-font-smoothing:antialiased;line-height:1.6;font-size:14px;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
input,select,textarea{font:inherit;color:inherit}
::selection{background:rgba(255,180,92,.28)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 应用框架 ---------- */
.app{min-height:100vh}
.side{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar);z-index:40;
  background:linear-gradient(180deg,#080c14,#060911 60%,#05070c);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
}
.side__brand{display:flex;align-items:center;gap:11px;padding:22px 22px 18px}
.side__brand svg{width:30px;height:30px;flex:none}
.side__brand b{display:block;font-size:15.5px;font-weight:600;letter-spacing:.01em}
.side__brand small{display:block;font-size:9px;letter-spacing:.22em;color:var(--dim);margin-top:3px}
@keyframes pulse{50%{opacity:.35}}
.side__nav{flex:1;overflow-y:auto;padding:4px 12px 20px}
.side__group{font-size:10px;letter-spacing:.2em;color:var(--dim);padding:18px 12px 8px}
/* 侧栏按应用分区：应用名是一行可折叠的按钮，子项缩进挂在下面一条竖线里 */
.side__divider{height:1px;background:var(--line);margin:10px 6px 8px}
.nav-app{
  width:100%;display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:10px;
  color:var(--text);font-size:13px;font-weight:600;letter-spacing:.05em;text-align:left;
  transition:background .2s,color .2s;
}
.nav-app:hover{background:rgba(255,255,255,.05)}
.nav-app.is-active{color:var(--accent)}
.nav-app svg{width:16px;height:16px;flex:none;opacity:.78}
.nav-app__label{flex:1;min-width:0}
.nav-app__count{font-size:10.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.nav-app__chev{display:flex;color:var(--dim);transition:transform .2s var(--ease)}
.nav-app__chev svg{width:13px;height:13px;opacity:.8}
.nav-app[aria-expanded="true"] .nav-app__chev{transform:rotate(90deg)}
.nav-app__items{display:flex;flex-direction:column;gap:2px;margin:2px 0 10px 7px;padding-left:5px;border-left:1px solid var(--line)}
.nav-app__items[hidden]{display:none}
.nav-app__items .nav-item{padding:8px 9px;font-size:13px}
.side__group--sub{padding:10px 6px 5px;font-size:9.5px;letter-spacing:.16em}
.nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;
  color:var(--muted);font-size:13.5px;position:relative;transition:background .2s,color .2s;
  width:100%;text-align:left;
}
.nav-item svg{width:17px;height:17px;flex:none;opacity:.8}
.nav-item:hover{background:rgba(255,255,255,.05);color:var(--text)}
.nav-item.is-active{background:rgba(255,180,92,.10);color:var(--accent)}
.nav-item.is-active::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:2px;height:16px;border-radius:2px;background:var(--accent);
}
.nav-item .count{
  margin-left:auto;font-size:10.5px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  display:grid;place-items:center;background:rgba(255,107,107,.16);color:#ff9a9a;font-variant-numeric:tabular-nums;
}
.side__user{
  position:relative;border-top:1px solid var(--line);padding:14px 16px;display:flex;align-items:center;gap:10px;
}
/* 齿轮按钮打开后亮起来，让人知道菜单是它弹的 */
.side__user .icon-btn.is-open{background:rgba(255,255,255,.09);color:var(--accent)}
/* 浮层朝上弹：侧栏底部没地方往下放 */
.side__menu{
  position:absolute;left:12px;right:12px;bottom:calc(100% - 4px);z-index:60;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:14px;
  box-shadow:var(--shadow);padding:6px;display:flex;flex-direction:column;gap:2px;
}
/* 上面那句 display:flex 会盖掉浏览器默认的 [hidden]{display:none}，得自己补一条 */
.side__menu[hidden]{display:none}
.side__menu a{
  display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;
  color:var(--text);font-size:13px;transition:background .18s var(--ease);
}
.side__menu a:hover{background:rgba(255,255,255,.06)}
.side__menu a svg{width:15px;height:15px;color:var(--accent);flex:none}
.side__menu a span{flex:1;min-width:0}
.side__menu a small{font-size:10.5px;color:var(--dim);letter-spacing:.02em}
/* 菜单分组线：上面是导航类（返回首页/用户管理），下面是系统管理那几栏 */
.side__menu__sep{height:1px;background:var(--line-strong);margin:6px 8px}
/* 退出登录：文字在左、图标在右，占满侧栏宽度，和上面的账号块分开一条线 */
.side__logout{
  display:flex;align-items:center;justify-content:center;gap:8px;margin:0 12px 14px;
  padding:9px 12px;border-radius:11px;border:1px solid var(--line);
  color:var(--dim);font-size:12.5px;transition:background .2s,color .2s,border-color .2s;
}
.side__logout:hover{background:rgba(255,107,107,.10);border-color:rgba(255,107,107,.35);color:#ff9a9a}
.side__logout svg{width:15px;height:15px}
.avatar{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(140deg,rgba(255,180,92,.24),rgba(122,167,255,.18));
  border:1px solid var(--line-strong);font-size:12.5px;font-weight:600;color:var(--text);
}
.side__user .who{flex:1;min-width:0}
.side__user b{display:block;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side__user small{display:block;font-size:11px;color:var(--dim)}
.icon-btn{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  color:var(--dim);transition:background .2s,color .2s;flex:none;
}
.icon-btn:hover{background:rgba(255,255,255,.07);color:var(--text)}
.icon-btn svg{width:16px;height:16px}
/* 置灰的按钮（比如客户账号看公共分类时那个删不掉的垃圾桶）要看得出来是灰的，
   否则点了没反应，人以为是页面坏了。 */
.icon-btn:disabled{opacity:.3;cursor:not-allowed}
.icon-btn:disabled:hover{background:none;color:var(--dim)}

.main{margin-left:var(--sidebar);min-height:100vh;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;
  padding:0 28px;height:62px;border-bottom:1px solid var(--line);
  background:rgba(5,7,12,.78);backdrop-filter:blur(16px) saturate(140%);
}
.topbar .crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--dim);min-width:0}
.topbar .crumb b{color:var(--text);font-weight:500}
.topbar .spacer{flex:1}
.searchbox{
  display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);
  border-radius:99px;background:rgba(255,255,255,.03);min-width:210px;color:var(--dim);
}
.searchbox svg{width:14px;height:14px}
.searchbox input{border:0;background:none;outline:0;width:100%;font-size:12.5px;color:var(--text)}
.topbar__right{display:flex;align-items:center;gap:6px}
.dot-live{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--green);padding:5px 10px;border:1px solid rgba(95,214,165,.22);border-radius:99px;background:rgba(95,214,165,.07)}
.dot-live i{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2.4s infinite}

.content{flex:1;padding:26px 28px 64px;max-width:1560px;width:100%}

/* ---------- 页头 ---------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.75}
.page-head h1{font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.01em}
.page-head .sub{margin-top:6px;font-size:13px;color:var(--muted);max-width:52em}
.page-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 18px;border-radius:99px;font-size:13px;font-weight:500;white-space:nowrap;
  transition:transform .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
  border:1px solid transparent;
}
.btn svg{width:15px;height:15px;flex:none}
.btn--primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 26px -14px rgba(255,180,92,.8)}
.btn--primary:hover{background:#ffc47d;transform:translateY(-1px)}
.btn--ghost{border-color:var(--line-strong);color:var(--text);background:rgba(255,255,255,.02)}
.btn--ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.28)}
.btn--subtle{background:rgba(255,255,255,.05);color:var(--muted)}
.btn--subtle:hover{background:rgba(255,255,255,.09);color:var(--text)}
.btn--danger{background:rgba(255,107,107,.13);color:#ff9c9c;border-color:rgba(255,107,107,.28)}
.btn--danger:hover{background:rgba(255,107,107,.2)}
.btn--sm{padding:6px 13px;font-size:12px}
.btn--block{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.btn--link{padding:0;border:0;background:none;color:var(--accent);font-size:12.5px}
.btn--link:hover{text-decoration:underline}

/* ---------- 卡片 / 面板 ---------- */
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;
}
.panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.panel__head h2{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.panel__head h2 small{font-weight:400;font-size:11.5px;color:var(--dim);letter-spacing:.02em}
.panel__head .tools{display:flex;align-items:center;gap:8px}
.panel__body{padding:18px 20px}
.panel__body--flush{padding:0}
.panel__foot{padding:12px 20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--dim)}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-kpi{grid-template-columns:repeat(4,minmax(0,1fr))}
/* 驾驶舱把信发和 AI 监控的指标并成一行：六张卡排 3×2，比挤成一条好读 */
.g-kpi--6{grid-template-columns:repeat(3,minmax(0,1fr))}
.split-2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.split-3{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.stack{display:grid;gap:16px}

.kpi{
  border:1px solid var(--line);border-radius:16px;padding:17px 18px 15px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  position:relative;overflow:hidden;
}
.kpi::after{
  content:"";position:absolute;right:-40px;bottom:-60px;width:130px;height:130px;
  background:radial-gradient(circle,rgba(255,180,92,.13),transparent 65%);pointer-events:none;
}
.kpi__label{font-size:11.5px;color:var(--dim);letter-spacing:.06em;display:flex;align-items:center;gap:7px}
.kpi__label svg{width:13px;height:13px;color:var(--accent)}
.kpi__num{
  margin-top:8px;font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.kpi__num small{font-size:12px;color:var(--dim);font-weight:400;margin-left:4px;letter-spacing:0}
.kpi__meta{margin-top:6px;font-size:11.5px;color:var(--dim);display:flex;align-items:center;gap:6px}
.trend{font-size:11.5px;padding:2px 7px;border-radius:99px}
.trend--up{color:#8ff0c2;background:rgba(95,214,165,.12)}
.trend--down{color:#ff9c9c;background:rgba(255,107,107,.12)}

/* ---------- 表格 ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:720px}
thead th{
  text-align:left;font-size:10.5px;letter-spacing:.14em;color:var(--dim);font-weight:500;
  padding:11px 16px;border-bottom:1px solid var(--line);white-space:nowrap;
  position:sticky;top:0;background:var(--surface);z-index:1;
}
tbody td{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.055);font-size:13px;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .18s}
tbody tr:hover{background:rgba(255,255,255,.025)}
td.num,th.num{font-variant-numeric:tabular-nums;text-align:right}
.cell-main{display:flex;align-items:center;gap:11px;min-width:0}
.cell-main b{font-weight:500;font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.cell-main small{display:block;font-size:11px;color:var(--dim);margin-top:2px}
.thumb{
  width:52px;height:30px;border-radius:6px;object-fit:cover;flex:none;
  border:1px solid var(--line);background:#0a0f19;
}
.thumb--tall{width:30px;height:52px}
.mono{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.muted{color:var(--muted)}
.dim{color:var(--dim)}
.nowrap{white-space:nowrap}
.row-actions{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap}
.row-actions .btn{padding:5px 11px;font-size:11.5px}

/* ---------- 状态胶囊 ---------- */
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;
  font-size:11px;letter-spacing:.02em;white-space:nowrap;border:1px solid transparent;
}
.pill i{width:5px;height:5px;border-radius:50%;background:currentColor}
.pill svg{width:11px;height:11px;flex:none}
.pill--ok{color:#8ff0c2;background:rgba(95,214,165,.11);border-color:rgba(95,214,165,.22)}
.pill--warn{color:#ffc987;background:rgba(255,180,92,.11);border-color:rgba(255,180,92,.24)}
.pill--danger{color:#ff9c9c;background:rgba(255,107,107,.11);border-color:rgba(255,107,107,.24)}
.pill--info{color:#a9c6ff;background:rgba(122,167,255,.11);border-color:rgba(122,167,255,.22)}
.pill--violet{color:#c9b8ff;background:rgba(167,139,250,.12);border-color:rgba(167,139,250,.24)}
.pill--muted{color:var(--dim);background:rgba(255,255,255,.05);border-color:var(--line)}

/* 可以点开操作菜单的胶囊（列表行的分组） */
.menu-trigger{font-family:inherit;cursor:pointer;border-style:solid;transition:background .15s,border-color .15s,color .15s}
.menu-trigger:hover{background:rgba(255,255,255,.11);border-color:var(--line-strong, rgba(255,255,255,.26));color:var(--text, #e9eefb)}
.menu-trigger svg{width:12px;height:12px;margin-left:1px;opacity:.6}
.menu-trigger:hover svg{opacity:.9}

/* ---------- 行内小操作菜单 ---------- */
.menu-pop{
  position:fixed;z-index:80;min-width:176px;padding:6px;border-radius:12px;
  border:1px solid rgba(255,255,255,.16);background:#171e2b;
  box-shadow:0 18px 44px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.35);
  display:flex;flex-direction:column;gap:2px;
}
.menu-pop__item{
  display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:8px;
  border:0;background:none;color:inherit;font:inherit;font-size:12.5px;text-align:left;cursor:pointer;
}
.menu-pop__item svg{width:15px;height:15px;flex:none;opacity:.7}
.menu-pop__item:hover{background:rgba(255,255,255,.07)}
.menu-pop__item small{margin-left:auto;color:var(--dim);font-size:10.5px}
.menu-pop__item.is-danger{color:#ff9c9c}
.menu-pop__item:disabled{opacity:.45;cursor:not-allowed}
.menu-pop__sep{height:1px;margin:4px 6px;background:var(--line)}

/* ---------- 筛选栏 ---------- */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.chip{
  padding:6px 13px;border-radius:99px;border:1px solid var(--line);font-size:12px;color:var(--muted);
  transition:all .2s var(--ease);white-space:nowrap;
}
.chip:hover{color:var(--text);border-color:var(--line-strong)}
.chip.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:500}
/* 只有图标的小胶囊（素材中心的「改类型名」）：.chip 本身不给 svg 定尺寸，图标会撑成大方块 */
.chip--icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0}
.chip--icon svg{width:13px;height:13px;flex:none}
.search-inline{
  display:flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid var(--line);
  border-radius:99px;background:rgba(255,255,255,.03);color:var(--dim);
}
.search-inline input{border:0;background:none;outline:0;font-size:12.5px;color:var(--text);width:180px}
.toolbar .spacer{flex:1}

/* ---------- 表单 ---------- */
/* align-content:start：同一行里另一个字段更高时（比如分类下面展开了「新建分类」），
   标签和输入框不要被拉成上下两半，粘在顶上就行 */
.field{display:grid;gap:6px;align-content:start}
.field > label{font-size:11.5px;color:var(--dim);letter-spacing:.05em}
.field > label em{color:var(--red);font-style:normal;margin-left:3px}
.input,.select,.textarea{
  width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--line-strong);
  background:rgba(255,255,255,.03);color:var(--text);font-size:13px;outline:0;
  transition:border-color .2s,background .2s;
}
.input::placeholder,.textarea::placeholder{color:rgba(233,238,251,.3)}
.input:focus,.select:focus,.textarea:focus{border-color:rgba(255,180,92,.55);background:rgba(255,255,255,.05)}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5l3-3' fill='none' stroke='%23e9eefb' stroke-opacity='.5' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:12px;padding-right:30px}
.textarea{min-height:92px;resize:vertical;line-height:1.7}
.form-grid{display:grid;gap:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hint{font-size:11.5px;color:var(--dim)}
.hint--warn{color:#ffc987}
/* 输入框里的只读图标（例如客户账号不能改的「归属单位」）：不给尺寸就会撑满整行 */
.field__icon{display:inline-flex;width:14px;height:14px;flex:none;color:var(--muted)}
.field__icon svg{width:100%;height:100%}

/* ---------- 弹窗 / 抽屉 ---------- */
.overlay{
  position:fixed;inset:0;z-index:80;background:rgba(2,4,8,.72);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fade .2s var(--ease);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  width:min(560px,100%);max-height:calc(100vh - 48px);overflow:auto;
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:20px;
  box-shadow:var(--shadow);animation:pop .24s var(--ease);
}
.modal--wide{width:min(880px,100%)}
.modal--player{width:min(1000px,100%)}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.modal__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px 14px}
.modal__head h3{font-size:16px;font-weight:600}
.modal__head p{font-size:12px;color:var(--dim);margin-top:4px}
.modal__body{padding:0 22px 4px;display:grid;gap:14px}
.modal__foot{display:flex;justify-content:flex-end;gap:10px;padding:18px 22px 20px}
.drawer{
  position:fixed;inset:0 0 0 auto;width:min(560px,100%);z-index:80;
  background:var(--surface-2);border-left:1px solid var(--line-strong);
  box-shadow:var(--shadow);display:flex;flex-direction:column;animation:slideIn .26s var(--ease);
}
@keyframes slideIn{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.drawer__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 22px;border-bottom:1px solid var(--line)}
.drawer__body{flex:1;overflow-y:auto;padding:20px 22px;display:grid;gap:18px}
.drawer__foot{padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}

/* ---------- 提示 / 空态 ---------- */
.toast-host{position:fixed;right:22px;bottom:22px;z-index:120;display:grid;gap:10px;max-width:360px}
.toast{
  padding:12px 15px;border-radius:12px;border:1px solid var(--line-strong);
  background:rgba(17,24,38,.96);backdrop-filter:blur(10px);box-shadow:var(--shadow);
  font-size:12.5px;display:flex;gap:10px;align-items:flex-start;animation:toastIn .25s var(--ease);
}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.toast i{width:6px;height:6px;border-radius:50%;margin-top:6px;flex:none;background:var(--accent)}
.toast--ok i{background:var(--green)}
.toast--err i{background:var(--red)}
.toast--err{border-color:rgba(255,107,107,.3)}
.empty{padding:46px 20px;text-align:center;color:var(--dim)}
.empty svg{width:34px;height:34px;margin:0 auto 12px;opacity:.4}
.empty b{display:block;color:var(--muted);font-weight:500;font-size:13.5px;margin-bottom:6px}
.empty p{font-size:12px;max-width:34em;margin:0 auto;line-height:1.7}
.banner{
  display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;
  border:1px solid rgba(255,180,92,.28);background:rgba(255,180,92,.09);font-size:12.5px;color:#ffd7a3;
}
.banner--danger{border-color:rgba(255,107,107,.3);background:rgba(255,107,107,.09);color:#ffb3b3}
.banner svg{width:16px;height:16px;flex:none}
.banner .spacer{flex:1}

/* ---------- 驾驶舱 ---------- */
.chart{width:100%}
.chart svg{width:100%;height:auto;display:block}
.chart__axis{font-size:10px;fill:var(--dim);font-family:var(--font)}
.chart__grid{stroke:rgba(255,255,255,.07);stroke-width:1}
.chart__line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart__area{fill:url(#areaFill)}
.chart__dot{fill:var(--accent);stroke:#0d121c;stroke-width:2}
.chart__bar{fill:rgba(255,180,92,.5);transition:fill .2s}
.chart__bar:hover{fill:var(--accent)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--dim)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:2px}
.chart-wrap{position:relative}
.chart-tip{
  position:absolute;transform:translate(-50%,-118%);pointer-events:none;z-index:4;
  background:rgba(6,10,18,.92);border:1px solid var(--line-strong);border-radius:9px;
  padding:6px 10px;font-size:11px;white-space:nowrap;box-shadow:0 12px 30px -16px #000;
  display:flex;flex-direction:column;gap:1px;text-align:center;
}
.chart-tip b{font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums}
.chart-tip span{color:var(--dim);font-size:10.5px}
.chart-cross{stroke:rgba(255,255,255,.28);stroke-width:1;stroke-dasharray:3 3}
.chart-focus{fill:var(--accent);stroke:#0d121c;stroke-width:2}
.chart-foot{display:flex;justify-content:space-between;gap:12px;font-size:11px;margin-top:2px}
.chart-foot b{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}

.barlist{display:grid;gap:12px}
.barlist__row{display:grid;grid-template-columns:minmax(0,1fr) 110px 78px;gap:12px;align-items:center;font-size:12px}
.barlist__label{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barlist__track{height:8px;border-radius:4px;background:rgba(255,255,255,.05);overflow:hidden}
.barlist__track i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,rgba(255,180,92,.45),var(--accent))}
.barlist__track i.is-blue{background:linear-gradient(90deg,rgba(122,167,255,.4),var(--blue))}
.barlist__val{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}

.group-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.055)}
.group-row:last-child{border-bottom:0}
.group-row .name{width:64px;font-size:12.5px;color:var(--muted)}
.group-row .bar{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden}
.group-row .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,rgba(255,180,92,.5),var(--accent))}
.group-row .val{font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums;width:64px;text-align:right}

/* ---------- 设备管理（MDM） ---------- */
/* 电量 / 存储 / 内存的细进度条：绿色正常、琥珀偏满、红色告急 */
.meter{flex:1;height:6px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden;min-width:70px}
.meter i{display:block;height:100%;border-radius:99px;background:var(--green);transition:width .3s var(--ease)}
.meter--warn i{background:var(--accent)}
.meter--danger i{background:var(--red)}
/* 批量命令条：选中设备后从底部浮出来，和列表一起滚，不遮挡内容 */
.mdm-bulk{
  position:sticky;bottom:12px;z-index:6;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:12px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:14px;
  background:rgba(17,24,38,.94);box-shadow:var(--shadow);backdrop-filter:blur(8px);
}

/* 远程画面弹窗：手机屏是竖的，图按比例缩到整块能看见；点击坐标按这张图的矩形
   换算成比例，所以不能给它固定宽高或 object-fit，否则点位会偏 */
.rv{display:flex;flex-direction:column;gap:10px}
.rv__bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rv__stage{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:220px;padding:10px;border:1px solid var(--line);border-radius:14px;
  background:radial-gradient(circle at 50% 0%,rgba(255,180,92,.06),transparent 60%),rgba(0,0,0,.35);
  touch-action:none;cursor:crosshair;
}
.rv__shot{max-width:100%;max-height:64vh;border-radius:10px;display:block;user-select:none;-webkit-user-drag:none}
.rv__wait{display:flex;align-items:center;justify-content:center;min-height:180px;color:var(--muted);font-size:12.5px}
/* 电脑端被控：光标就是本机那套指针，别画成十字准星；画面自己在吃鼠标事件 */
.rv__stage--win{cursor:default}
/* 吃键盘的隐形输入框：必须真实存在并获得焦点，中文输入法才会把字组完再交出来。
   不占地方、不显示、不参与点击，只负责接收按键。 */
.rv__kbd{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;border:0;outline:0;
  opacity:0;resize:none;overflow:hidden;pointer-events:none;caret-color:transparent;
  font-size:16px;background:transparent;color:transparent;z-index:-1}

/* 远程画面全屏：弹窗铺满视口，画面区吃掉标题栏和底部按钮之外的高度。
   画面本身仍按比例缩放（不改 canvas 实际像素尺寸），否则点击坐标换算会偏。 */
.overlay.is-full{padding:0}
.modal--full{
  width:100vw;height:100vh;max-height:none;border-radius:0;border:none;overflow:hidden;
  display:flex;flex-direction:column;
}
.modal--full .modal__head{padding:8px 14px 4px}
.modal--full .modal__body{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 14px}
/* 全屏时底部那条只有「关闭」，白占一条高度：右上角的 × 和 Esc 都能退，
   省下来的高度全给画面 */
.modal--full .modal__foot{display:none}
/* 副标题那句「点一下画面就能直接操作」全屏时已经用不上了 */
.modal--full .modal__head p{display:none}
.modal--full .rv{flex:1;min-height:0}
.modal--full .rv__stage{flex:1;min-height:0}
.modal--full .rv__shot{max-width:100%;max-height:100%}
.modal--full .rv__wait{flex:1}
/* 全屏时那句说明就没用了（键鼠早就接管了），把高度全留给画面 */
.modal--full [data-hint]{display:none}

/* 清晰度下拉：和旁边的小按钮一样高、一样轻，别抢画面的注意力 */
.rv__q{flex:0 0 auto;width:auto;font-size:12px;padding:4px 26px 4px 9px;min-height:28px}

/* 真全屏：弹窗自己就是全屏元素，100vw/100vh 这时是整块屏幕（不再是浏览器窗口），
   去圆角、去边框、深底，任务栏和地址栏都让开 */
.modal:fullscreen,
.modal:-webkit-full-screen{
  width:100vw;height:100vh;max-height:none;border-radius:0;border:none;overflow:hidden;
  display:flex;flex-direction:column;background:var(--surface-2);
}

/* ---------- 驾驶舱里的 AI 监控块 ---------- */
/* 24 小时通行分布：柱子只标高度，刻度在下面对齐 00/06/12/18/23 */
.hourbars{display:flex;align-items:flex-end;gap:3px;height:132px}
.hourbars i{
  flex:1;min-height:3px;border-radius:3px 3px 2px 2px;
  background:linear-gradient(180deg,rgba(255,180,92,.9),rgba(255,180,92,.18));
}
.hourbars i.is-zero{background:rgba(255,255,255,.06)}
/* 分时客流：每小时两根，蓝=进店、橙=出去，颜色跟监控控制台「客流分析」对齐 */
.hourbars--dual .hb{flex:1;display:flex;align-items:flex-end;gap:2px;height:100%}
.hourbars--dual .hb i{min-width:2px}
.hourbars--dual i.in{background:linear-gradient(180deg,rgba(122,167,255,.95),rgba(122,167,255,.18))}
.hb-legend{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--dim);white-space:nowrap}
.hb-legend i{width:7px;height:7px;border-radius:2px;display:inline-block;background:var(--accent)}
.hb-legend i.in{background:var(--blue)}
.hb-legend i.out{margin-left:7px}
.hourbars__axis{
  display:flex;justify-content:space-between;margin-top:6px;
  font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums;
}
.mon-list{display:flex;flex-direction:column;gap:13px}
.mon-row{display:flex;align-items:center;gap:9px;font-size:12.5px}
.mon-row .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mon-row small{color:var(--dim);font-size:11px;white-space:nowrap}
.mon-dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--green);box-shadow:0 0 8px rgba(95,214,165,.55);
}
.mon-dot.is-off{background:var(--red);box-shadow:none}
/* 方向/审计这行字比面板宽，窄列时让右半边自己掉到第二行，别把面板撑破。
   两半各自不许折行，否则 flex 会把左边压扁、在一句话中间断开。 */
.mon-foot{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 10px;margin-top:14px;
  padding-top:12px;border-top:1px solid var(--line);font-size:11.5px;color:var(--dim);
}
.mon-foot>span{white-space:nowrap}
.mon-foot b{color:var(--text);font-variant-numeric:tabular-nums}

.feed{display:grid}
.feed__item{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12.5px}
.feed__item:last-child{border-bottom:0}
.feed__dot{width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:7px;flex:none}
.feed__dot--info{background:var(--blue)}
.feed__dot--ok{background:var(--green)}
.feed__dot--danger{background:var(--red)}
.feed__body{flex:1;min-width:0}
.feed__body b{font-weight:500}
.feed__body p{color:var(--dim);font-size:11.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed__time{font-size:11px;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}

.quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.quick__item{
  display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);
  border-radius:12px;background:rgba(255,255,255,.02);font-size:12.5px;transition:all .2s var(--ease);
}
.quick__item:hover{border-color:rgba(255,180,92,.35);background:rgba(255,180,92,.06);transform:translateY(-1px)}
.quick__item svg{width:16px;height:16px;color:var(--accent);flex:none}
.quick__item span{color:var(--muted)}
.quick__item b{font-weight:500;font-size:12.5px;display:block}
.quick__item small{display:block;color:var(--dim);font-size:10.5px}

/* ---------- 节目预览 ---------- */
.screen{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;
  background:#060a12;border:1px solid var(--line);display:grid;place-items:center;
  container-type:inline-size;
}
.screen--tall{aspect-ratio:9/16;max-width:230px}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.screen__text{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:8% 9%;background:linear-gradient(120deg,rgba(5,10,18,.94),rgba(5,10,18,.55));
}
.screen__text h4{font-size:clamp(12px,4.4cqw,26px);line-height:1.4;font-weight:600;color:#fff;text-wrap:balance;overflow-wrap:anywhere}
.screen__text p{margin-top:.5em;font-size:clamp(9px,1.9cqw,13px);color:rgba(255,255,255,.7);line-height:1.7}
.screen--split{display:grid;grid-template-columns:1.25fr 1fr;background:#060a12}
.screen--split img{position:relative;inset:auto;width:100%;height:100%}
.screen--split .screen__text{position:relative;inset:auto;background:linear-gradient(160deg,#10202c,#070d15)}
.screen--banner img{object-fit:cover}
.screen--banner .screen__text{
  inset:auto 0 0 0;justify-content:flex-end;background:linear-gradient(0deg,rgba(4,8,14,.94),rgba(4,8,14,.1));
  padding:6% 5%;
}
.screen__idle{color:var(--dim);font-size:12px;text-align:center;padding:20px}
.screen__badge{
  position:absolute;top:8px;left:8px;z-index:2;font-size:9.5px;letter-spacing:.08em;
  color:#ffd7a3;background:rgba(0,0,0,.45);border:1px solid rgba(255,180,92,.3);
  padding:2px 7px;border-radius:5px;backdrop-filter:blur(6px);
}

.prog-card{display:flex;flex-direction:column;gap:10px}
.prog-card .screen{border-radius:12px}
.prog-card h4{font-size:13.5px;font-weight:500;line-height:1.5}
.prog-card .meta{font-size:11.5px;color:var(--dim);display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- 素材网格 ---------- */
.mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.mat{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;transition:border-color .22s var(--ease),transform .22s var(--ease);
  position:relative;
}
.mat:hover{border-color:rgba(255,180,92,.32);transform:translateY(-2px)}
.mat__thumb{position:relative;aspect-ratio:16/9;background:#060a12;overflow:hidden}
.mat__thumb img,.mat__thumb video{width:100%;height:100%;object-fit:cover;display:block}
/* 视频卡片：只读首帧当封面（静音 + preload=metadata），中间盖一个播放标记 */
.mat__play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:linear-gradient(0deg,rgba(3,6,12,.42),rgba(3,6,12,.10));
}
.mat__play svg{
  width:32px;height:32px;padding:9px;border-radius:50%;box-sizing:content-box;
  color:#fff;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(4px);
}
.mat__type{
  position:absolute;top:8px;left:8px;font-size:10px;padding:2px 7px;border-radius:5px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.85);
  backdrop-filter:blur(6px);display:flex;align-items:center;gap:4px;
  /* 类型名能改成「海报」「短片」这类长词，卡片又小，会顶到右上角的归属标：限宽、省略号 */
  max-width:calc(52% - 12px);
}
.mat__type svg{width:10px;height:10px;flex:none}
.mat__type-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 素材归属单位：右上角一枚小标。公共素材低调一点，客户专属带一点强调色 */
.mat__unit{
  position:absolute;top:8px;right:8px;max-width:62%;font-size:10px;padding:2px 7px;border-radius:5px;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.72);
  backdrop-filter:blur(6px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mat__unit.is-own{border-color:rgba(255,180,92,.52);color:#ffd39b}
/* 后台转码中的素材：缩略区盖上说明，左下角一枚状态标，转完自动换成正常封面 */
.mat__wait{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:rgba(255,255,255,.62);background:repeating-linear-gradient(135deg,#0a1220,#0a1220 12px,#0d1726 12px,#0d1726 24px);
}
.mat__state{
  position:absolute;bottom:8px;left:8px;font-size:10px;padding:2px 7px;border-radius:5px;
  background:rgba(0,0,0,.62);border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.82);
  backdrop-filter:blur(6px);white-space:nowrap;
}
.mat__state.is-busy{border-color:rgba(255,180,92,.52);color:#ffd39b}
.mat__state.is-err{border-color:rgba(255,96,96,.55);color:#ffb3b3}
.mat__body{padding:11px 13px 13px;display:flex;flex-direction:column;gap:4px;flex:1}
.mat__body b{font-size:12.8px;font-weight:500;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mat__body small{font-size:11px;color:var(--dim)}
/* 卡片底部：作者一行、按钮一行。按钮组放不下就整体换行靠右，作者名不折行（超长省略）——
   有「下发」按钮的账号多一个按钮，早先这里会把「10-26」拆成两行。 */
.mat__foot{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.mat__foot>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mat__foot .row-actions{flex-wrap:nowrap;margin-left:auto}
.mat__pick{position:absolute;inset:0;border:0;background:none;cursor:pointer}
.mat.is-picked{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.mat.is-picked::after{
  content:"已选";position:absolute;top:8px;right:8px;z-index:3;font-size:10px;
  background:var(--accent);color:var(--accent-ink);padding:2px 8px;border-radius:99px;font-weight:600;
}
.mat__check{display:none}

/* ---------- 分类管理弹窗 ---------- */
/* 新建一行：名称输入占满剩余宽度，单位和按钮按内容宽；手机上整行换行、按钮拉通 */
.catnew{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.catnew .input{flex:1 1 180px;min-width:0;width:auto}
.catnew .select{flex:0 1 auto;width:auto;max-width:100%}
.catlist{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.catrow{display:flex;align-items:center;gap:10px;padding:9px 12px;background:rgba(255,255,255,.015)}
.catrow+.catrow{border-top:1px solid var(--line)}
.catrow__main{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.catrow__main b{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 归属小标：公共的低调，单位分类带强调色（和素材卡片右上角同一套说法） */
.catrow__unit{
  flex:none;font-size:10.5px;padding:1px 7px;border-radius:5px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.14);color:var(--dim);
}
.catrow__unit.is-own{border-color:rgba(255,180,92,.45);color:#ffd39b}
.catrow__used{flex:none;font-size:11.5px;color:var(--dim);white-space:nowrap}
@media (max-width:560px){
  .catnew .input{flex:1 1 100%}
  .catnew .select{flex:1 1 auto}
  .catrow{flex-wrap:wrap}
  .catrow__main{flex:1 1 100%}
}

/* ---------- 审核 ---------- */
.review-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.flow{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.flow__step{
  flex:1;min-width:120px;border:1px solid var(--line);border-radius:10px;padding:9px 12px;
  font-size:11.5px;color:var(--dim);position:relative;background:rgba(255,255,255,.015);
}
.flow__step b{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-bottom:2px}
.flow__step.is-done{border-color:rgba(95,214,165,.28);background:rgba(95,214,165,.06)}
.flow__step.is-done b{color:#8ff0c2}
.flow__step.is-now{border-color:rgba(255,180,92,.45);background:rgba(255,180,92,.08)}
.flow__step.is-now b{color:var(--accent)}
.flow__step.is-reject{border-color:rgba(255,107,107,.32);background:rgba(255,107,107,.07)}
.flow__step.is-reject b{color:#ff9c9c}
.timeline{display:grid;gap:0}
.tl-item{display:flex;gap:12px;padding-bottom:16px;position:relative}
.tl-item::before{content:"";position:absolute;left:7px;top:18px;bottom:0;width:1px;background:var(--line)}
.tl-item:last-child::before{display:none}
.tl-dot{width:15px;height:15px;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface);flex:none;margin-top:2px;position:relative;z-index:1}
.tl-item.is-done .tl-dot{background:rgba(95,214,165,.25);border-color:rgba(95,214,165,.5)}
.tl-item.is-now .tl-dot{background:rgba(255,180,92,.3);border-color:var(--accent);box-shadow:0 0 0 4px rgba(255,180,92,.1)}
.tl-item.is-reject .tl-dot{background:rgba(255,107,107,.3);border-color:var(--red)}
.tl-body b{font-size:12.5px;font-weight:500}
.tl-body p{font-size:11.5px;color:var(--dim);margin-top:1px}
.tl-body q{display:block;font-size:12px;color:var(--muted);margin-top:5px;padding:7px 10px;border-left:2px solid var(--line-strong);background:rgba(255,255,255,.02);border-radius:0 6px 6px 0}

/* ---------- 终端 ---------- */
.dev-list{display:grid;gap:10px}
.dev-row{
  display:flex;align-items:center;gap:13px;padding:11px 13px;border:1px solid var(--line);
  border-radius:12px;background:rgba(255,255,255,.018);transition:border-color .2s;
}
.dev-row:hover{border-color:var(--line-strong)}
.dev-row__dot{width:8px;height:8px;border-radius:50%;flex:none}
.dev-row__dot--on{background:var(--green);box-shadow:0 0 8px rgba(95,214,165,.6)}
.dev-row__dot--off{background:rgba(255,255,255,.22)}
.dev-row__body{flex:1;min-width:0}
.dev-row__body b{font-size:12.5px;font-weight:500;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dev-row__body small{font-size:11px;color:var(--dim)}
.status-dot{display:inline-flex;align-items:center;gap:6px;font-size:11.5px}
.status-dot i{width:6px;height:6px;border-radius:50%}
.status-dot--on{color:#8ff0c2}
.status-dot--on i{background:var(--green)}
.status-dot--off{color:var(--dim)}
.status-dot--off i{background:rgba(255,255,255,.28)}

/* ---------- 排期条 ---------- */
.sched-bars{display:grid;gap:8px}
.sched-bar{display:flex;align-items:center;gap:10px;font-size:11.5px}
.sched-bar .name{width:96px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched-bar .track{flex:1;height:20px;border-radius:5px;background:rgba(255,255,255,.04);position:relative;overflow:hidden}
.sched-bar .track i{
  position:absolute;top:2px;bottom:2px;border-radius:4px;
  background:linear-gradient(90deg,rgba(255,180,92,.45),rgba(255,180,92,.85));
}
.sched-bar .track i.is-off{background:linear-gradient(90deg,rgba(122,167,255,.25),rgba(122,167,255,.4))}
.sched-bar .time{width:96px;text-align:right;color:var(--dim);font-variant-numeric:tabular-nums}

/* ---------- 时间线 / 步骤 ---------- */
.hstat{display:flex;align-items:baseline;gap:8px}
.hstat b{font-size:20px;font-variant-numeric:tabular-nums;font-weight:600}

/* ---------- 登录页 ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr)}
.auth__brand{
  position:relative;padding:56px clamp(32px,5vw,72px);display:flex;flex-direction:column;justify-content:space-between;
  background:
    radial-gradient(70% 60% at 20% 100%,rgba(255,180,92,.16),transparent 70%),
    radial-gradient(60% 60% at 85% 10%,rgba(122,167,255,.12),transparent 70%),
    #070b13;
  border-right:1px solid var(--line);overflow:hidden;
}
.auth__brand::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(70% 70% at 40% 50%,#000,transparent 80%);
}
.auth__brand > *{position:relative;z-index:1}
.auth__logo{display:flex;align-items:center;gap:12px}
.auth__logo svg{width:38px;height:38px}
.auth__logo b{display:block;font-size:18px;font-weight:600}
.auth__logo small{display:block;font-size:9.5px;letter-spacing:.24em;color:var(--dim);margin-top:3px}
.auth__pitch h1{font-size:clamp(28px,3.4vw,46px);line-height:1.18;font-weight:600;letter-spacing:-.02em;max-width:14em;text-wrap:balance}
.auth__pitch h1 em{font-style:normal;color:var(--accent)}
.auth__pitch p{margin-top:18px;font-size:14px;color:var(--muted);max-width:34em;line-height:1.9}
.auth__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:34px;max-width:620px}
.auth__fact b{display:block;font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.auth__fact span{display:block;font-size:11.5px;color:var(--dim);margin-top:3px;letter-spacing:.03em}
.auth__foot{font-size:11.5px;color:var(--dim);display:flex;gap:18px;flex-wrap:wrap}
.auth__panel{display:flex;align-items:center;justify-content:center;padding:40px 28px;background:var(--ink)}
.auth__card{width:min(380px,100%)}
.auth__card h2{font-size:22px;font-weight:600}
.auth__card > p{font-size:12.5px;color:var(--dim);margin-top:6px;margin-bottom:26px}
.auth__card form{display:grid;gap:14px}
.auth__demo{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.auth__demo p{font-size:11px;color:var(--dim);letter-spacing:.14em;margin-bottom:10px}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.demo-btn{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid var(--line);border-radius:9px;padding:7px 10px;font-size:11.5px;color:var(--muted);
  transition:all .2s;
}
.demo-btn:hover{border-color:rgba(255,180,92,.4);color:var(--text);background:rgba(255,180,92,.05)}
.demo-btn small{font-family:var(--mono);font-size:10px;color:var(--dim)}
.auth__err{
  display:none;font-size:12px;color:#ff9c9c;background:rgba(255,107,107,.1);
  border:1px solid rgba(255,107,107,.25);border-radius:9px;padding:8px 11px;
}
.auth__err.is-on{display:block}

/* ---------- 响应式 ---------- */
@media (max-width:1240px){
  .g-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split-2{grid-template-columns:minmax(0,1fr)}
  .review-layout{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1024px){
  :root{--sidebar:0px}
  .side{transform:translateX(-100%);transition:transform .28s var(--ease);width:250px}
  body.side-open .side{transform:none}
  .side__scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:35;display:none}
  body.side-open .side__scrim{display:block}
  .main{margin-left:0}
  .burger{display:grid!important}
  .content{padding:20px 18px 60px}
  .topbar{padding:0 16px}
  .searchbox{display:none}
}
@media (max-width:760px){
  .g2,.g3,.g4,.g-kpi,.split-3,.form-row{grid-template-columns:minmax(0,1fr)}
  .page-head h1{font-size:20px}
  .mat-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .auth{grid-template-columns:1fr}
  .auth__brand{display:none}
  .quick{grid-template-columns:1fr}
  .modal__foot{flex-wrap:wrap}
  .kpi__num{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
.burger{display:none;width:36px;height:36px;place-items:center;border:1px solid var(--line);border-radius:10px}
.burger svg{width:16px;height:16px}

/* ---------- 上传拖拽区 ---------- */
.dropzone{
  display:grid;justify-items:center;gap:7px;padding:26px 20px;margin-bottom:14px;
  border:1px dashed rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.02);
  text-align:center;cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease);
}
.dropzone svg{width:22px;height:22px;color:var(--amber);opacity:.85}
.dropzone b{font-size:13px;font-weight:500;color:var(--text)}
.dropzone span{font-size:11.5px;color:var(--dim)}
.dropzone:hover,.dropzone:focus-visible{border-color:rgba(255,180,92,.5);background:rgba(255,180,92,.05);outline:none}
.dropzone.is-over{border-color:var(--amber);background:rgba(255,180,92,.1)}
/* 选完文件后的那一行：左边 64×36 的小预览（图片截一段，视频放摄像机图标），右边文件名和体积 */
.mat-pick{display:flex;align-items:center;gap:10px;margin:4px 0 12px;font-size:12px;color:var(--text)}
.mat-pick img,.mat-pick__icon{
  width:64px;height:36px;flex:none;border-radius:6px;border:1px solid var(--line);object-fit:cover;
}
.mat-pick__icon{display:grid;place-items:center;background:rgba(255,255,255,.04);color:var(--amber)}
.mat-pick__icon svg{width:16px;height:16px}
.mat-pick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 版式选择 ---------- */
.layout-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.layout-opt{
  display:grid;justify-items:start;gap:4px;padding:11px;text-align:left;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);
  color:var(--muted);transition:border-color .18s var(--ease),background .18s var(--ease);
}
.layout-opt b{font-size:12.5px;font-weight:500;color:var(--text)}
.layout-opt small{font-size:11px;color:var(--dim);line-height:1.5}
.layout-opt:hover:not(:disabled){border-color:var(--line-strong);background:rgba(255,255,255,.04)}
.layout-opt.is-on{border-color:rgba(255,180,92,.55);background:rgba(255,180,92,.07)}
.layout-opt.is-on b{color:var(--amber)}
.layout-opt:disabled{cursor:not-allowed;opacity:.55}
.layout-mini{
  width:100%;aspect-ratio:16/9;border-radius:6px;border:1px solid rgba(255,255,255,.12);
  background:#0a0f18;overflow:hidden;position:relative;
}
.layout-mini::after{content:"";position:absolute;inset:0}
.layout-mini--full::after{background:linear-gradient(135deg,rgba(255,180,92,.35),rgba(122,167,255,.22))}
.layout-mini--split::after{background:linear-gradient(90deg,rgba(255,180,92,.35) 0 58%,#0f1a26 58%)}
.layout-mini--banner::after{background:linear-gradient(0deg,rgba(255,180,92,.42) 0 30%,rgba(122,167,255,.16) 30%)}

/* ---------- 多选标签行 ---------- */
.chip-row{display:flex;flex-wrap:wrap;gap:7px}
.chip-row button.chip{cursor:pointer;font-family:inherit}
.chip-row button.chip:disabled{cursor:default;opacity:.65}

/* ---------- 终端选择器（排期 / 下发共用） ---------- */
.picker{
  display:grid;gap:9px;padding:10px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.02);
}
.picker__bar{display:flex;gap:8px;flex-wrap:wrap}
.picker__search{
  flex:1;min-width:170px;display:flex;align-items:center;gap:8px;padding:7px 12px;
  border:1px solid var(--line-strong);border-radius:9px;background:rgba(255,255,255,.03);
  color:var(--dim);transition:border-color .2s var(--ease);
}
.picker__search:focus-within{border-color:rgba(255,180,92,.55)}
.picker__search svg{width:14px;height:14px;flex:none}
.picker__search input{flex:1;min-width:0;border:0;background:none;outline:0;color:var(--text);font-size:12.5px}
.picker__group{width:auto;min-width:148px;max-width:210px;flex:none;padding-top:7px;padding-bottom:7px;font-size:12.5px}
.picker__info{
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:11.5px;color:var(--muted);
}
.picker__info b{color:var(--amber);font-variant-numeric:tabular-nums}
.picker__acts{display:flex;gap:14px}
.picker__acts button{
  background:none;border:0;padding:0;font-size:11.5px;color:var(--blue);cursor:pointer;
  transition:color .18s var(--ease);
}
.picker__acts button:hover{color:var(--amber);text-decoration:underline}
.picker__list{max-height:236px;overflow:auto;display:grid;gap:2px;padding-right:2px}
.picker__row{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;cursor:pointer}
.picker__row:hover{background:rgba(255,255,255,.04)}
.picker__row input{width:14px;height:14px;flex:none;accent-color:var(--amber);cursor:pointer}
.picker__name{flex:1;min-width:0;display:grid;line-height:1.35}
.picker__name b{font-weight:500;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker__name small{font-size:10.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker__empty{padding:18px 8px;text-align:center;font-size:12px;color:var(--dim)}

/* ---------- 开关 ---------- */
.switch{position:relative;display:inline-flex;width:42px;height:24px;flex:none;cursor:pointer}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch span{
  position:absolute;inset:0;border-radius:99px;background:rgba(255,255,255,.1);
  border:1px solid var(--line);transition:background .2s var(--ease),border-color .2s var(--ease);
}
.switch span::after{
  content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#b8c2d8;transition:transform .2s var(--ease),background .2s var(--ease);
}
.switch input:checked + span{background:rgba(255,180,92,.22);border-color:rgba(255,180,92,.5)}
.switch input:checked + span::after{transform:translateX(18px);background:var(--amber)}
.switch input:focus-visible + span{outline:2px solid var(--amber);outline-offset:2px}

/* ---------- 校验清单 ---------- */
.checkline{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.checkline:last-child{border-bottom:0}
.checkline span:last-child{color:var(--dim)}
.checkline.is-ok span:last-child{color:var(--green)}
.checkline.is-bad span:last-child{color:#ff9c9c}

/* ---------- 分镜文字块 ---------- */
.stage-copy{position:absolute;inset:auto 0 0 0;padding:10px 12px;background:linear-gradient(0deg,rgba(3,6,12,.9),transparent)}
.screen--split .stage-copy{position:relative;inset:auto;display:flex;flex-direction:column;justify-content:center;padding:10% 9%;background:linear-gradient(160deg,#10202c,#070d15)}

@media (max-width:760px){
  .layout-pick{grid-template-columns:1fr}
  .layout-mini{display:none}
}

/* ---------- 手机（≤640px）：管理端 APP 与小屏浏览器共用 ---------- */
@media (max-width:640px){
  .content{padding:16px 14px 84px}
  .page-head{gap:12px;margin-bottom:16px}
  .page-head h1{font-size:19px}
  .page-head .sub{font-size:12px}
  /* 主操作按钮拉满一行并加高：手机上是手指点，不是鼠标点 */
  .page-actions{width:100%}
  .page-actions .btn{flex:1 1 auto;justify-content:center;min-height:42px}
  /* 指标卡两列并排：四张卡竖着摞起来会占掉大半屏，表格要滑很久才看得到。
     :has() 不支持的老内核退回单列，只是变高，不会错位。 */
  .g-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid:has(> .kpi){grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:14px}
  .kpi__num{font-size:24px;margin-top:6px}
  .kpi__meta{font-size:11px}
  .toolbar{gap:8px;margin-bottom:12px}
  .search-inline{flex:1 1 100%;border-radius:12px;padding:9px 12px}
  .search-inline svg{width:15px;height:15px;flex:none}
  .search-inline input{width:100%;font-size:16px}
  .panel__head{flex-wrap:wrap;gap:8px;padding:12px 14px}
  .panel__body{padding:14px}
  .quick,.split-2,.split-3{grid-template-columns:minmax(0,1fr)}

  /* 表格变卡片 —— 表头文字由 ui.js#labelTables 抄到每个 td 的 data-label 上 */
  .table-wrap{overflow-x:visible}
  .table-wrap table{min-width:0;display:block}
  .table-wrap thead{display:none}
  .table-wrap tbody{display:grid;gap:10px}
  .table-wrap tbody tr{
    display:grid;gap:6px;padding:12px 14px;border:1px solid var(--line);
    border-radius:12px;background:rgba(255,255,255,.025);
  }
  .table-wrap tbody tr:hover{background:rgba(255,255,255,.025)}
  .table-wrap tbody td{
    display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:10px;align-items:start;
    max-width:none!important;padding:0;border:0;font-size:12.5px;
  }
  .table-wrap tbody td::before{
    content:attr(data-label);font-size:11px;color:var(--dim);line-height:1.8;letter-spacing:.02em;
  }
  .table-wrap tbody td:not([data-label]){grid-template-columns:minmax(0,1fr)}
  .table-wrap tbody td:not([data-label])::before{content:none}
  .table-wrap tbody td.nowrap{white-space:normal}
  .cell-main b{max-width:none;white-space:normal}
  /* 素材卡：手机上两列并排，作者信息占一行，按钮拉平成一排好点 */
  .mat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mat__foot{flex-direction:column;align-items:stretch;gap:8px}
  .mat__foot .row-actions{justify-content:space-between;flex-wrap:nowrap}
  .mat__foot .btn{flex:1 1 auto;justify-content:center;min-height:38px;padding:6px 8px;font-size:11.5px}
  .row-actions{justify-content:flex-start;gap:8px;margin-top:4px}
  .row-actions .btn{min-height:40px;min-width:44px;padding:8px 14px}
  /* 素材卡两列时卡片只有 ~176px 宽，三个按钮（预览 / 下发 / 删除）按上面的内边距排不下，
     最后一个会被卡片裁掉、点都点不到（.mat 是 overflow:hidden）。这里单给卡片里的按钮收窄，
     万一还是放不下就整组换行，宁可两行也别溢出。 */
  .mat__foot .row-actions{justify-content:flex-end;flex-wrap:wrap;gap:6px}
  .mat__foot .row-actions .btn{min-width:36px;min-height:36px;padding:6px 9px}

  /* 弹窗改成从底部升起的整屏面板，键盘弹出也放得下 */
  .overlay{padding:0;align-items:flex-end}
  .modal,.modal--wide,.modal--player{
    width:100%;max-height:92vh;border-radius:18px 18px 0 0;border-bottom:0;
    animation:sheetUp .24s var(--ease);
  }
  .drawer{width:100%}
  @keyframes sheetUp{from{transform:translateY(20px);opacity:.75}to{transform:none;opacity:1}}
  /* 标题钉住：弹窗里内容一长就要滚动，标题跟着滚走了会不知道自己在填什么 */
  .modal__head{position:sticky;top:0;z-index:2;background:var(--surface-2);
    padding:16px 16px 10px;border-bottom:1px solid var(--line)}
  .modal__body{padding:0 16px;gap:12px}
  .modal__foot{padding:14px 16px 18px;flex-wrap:wrap}
  .modal__foot .btn{flex:1 1 auto;justify-content:center;min-height:42px}

  /* 输入框 16px：小于 16px 时移动端浏览器会自动放大整页 */
  input,select,textarea{font-size:16px}
}

/* 面包屑图标尺寸（否则 svg 会按默认比例撑成 54px） */
.topbar .crumb svg{width:13px;height:13px;flex:none;opacity:.55}
.topbar .crumb span,.topbar .crumb b{white-space:nowrap}

[hidden]{display:none!important}

/* ---------------- AI 监控平台内嵌页 ---------------- */
/* 监控平台是另一个应用，整页嵌进来；高度吃满内容区，内部自己滚动，外层不出现双滚动条 */
/* 高度按外壳尺寸倒推：100vh - 顶栏 - 内容区上下内边距（桌面 26/64）。
   用 dvh 打底，手机地址栏收放时不会多出一截空白 */
.monitor-frame{display:flex;flex-direction:column;gap:10px;height:calc(100vh - 154px);
  height:calc(100dvh - 154px);min-height:520px}
.monitor-frame__bar{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.monitor-frame__bar .dim{display:inline-flex;align-items:center;gap:6px}
.monitor-frame__bar svg{width:13px;height:13px;flex:none;opacity:.7}
.monitor-frame__bar .btn{margin-left:auto}
.monitor-frame__box{position:relative;flex:1;min-height:0;border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden;background:var(--ink)}
.monitor-frame__page{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.monitor-frame__load{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);font-size:12.5px}
/* 售后工单内嵌页：沿用监控那套外壳，只补两点 */
.workorder-frame .monitor-frame__bar i{font-style:normal}
.workorder-frame .monitor-frame__bar .dim{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 工程师手机端是手机版式，嵌在桌面宽度里会被拉成一整片，这里按手机宽度居中，
   两侧留底色，像把手机放在操作台上 */
.workorder-frame.is-phone .monitor-frame__box{display:flex;justify-content:center;
  background:radial-gradient(120% 80% at 50% 0%,rgba(122,167,255,.06),transparent 60%),var(--ink)}
.workorder-frame.is-phone .monitor-frame__page{position:relative;inset:auto;width:390px;max-width:100%;
  height:100%;border-inline:1px solid var(--line);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
@media (max-width:640px){
  /* 手机上就整宽显示，不再留手机框的边 */
  .workorder-frame.is-phone .monitor-frame__page{border-inline:0;box-shadow:none}
}

/* ---------------- 扫码添加设备 ---------------- */
.scan-tabs{display:flex;gap:8px;margin-bottom:14px}
/* 三个入口做成并排的方块按钮：图标在上、文字在下。.chip 本身是文字胶囊，不带图标尺寸，
   不管的话图标会按原尺寸撑开，整排变成三个大圆圈 */
.scan-tabs .chip{flex:1 1 0;min-width:0;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:7px;padding:12px 8px;border-radius:14px;
  font-size:11.5px;line-height:1.3;text-align:center;white-space:normal}
.scan-tabs .chip svg{width:22px;height:22px;flex:none;opacity:.85}
.scan-tabs .chip.is-on svg{opacity:1}
.scan-tabs .chip[disabled]{opacity:.45;cursor:not-allowed}
/* 说明文字和下面的主按钮要留出空隙，否则按钮的圆角会贴到字上，看着像被切了 */
[data-pane] .hint{margin:7px 0 12px;line-height:1.7}
.scan-stage{position:relative;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;
  background:var(--ink);aspect-ratio:4/3;display:grid;place-items:center;margin-bottom:10px}
.scan-stage video{width:100%;height:100%;object-fit:cover;display:block}
.scan-stage__hint{padding:18px;text-align:center;color:var(--dim);font-size:12.5px;line-height:1.8}
.scan-stage__frame{position:absolute;inset:14% 14% 22%;border:2px solid var(--accent);border-radius:12px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.38);pointer-events:none}
.scan-code{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0 4px}
.scan-code b{font-family:var(--mono);font-size:26px;letter-spacing:.32em;color:var(--accent);padding-left:.32em}
.scan-step2 .field{margin-bottom:12px}
@media (max-width:640px){
  /* 手机上内容区是 16/84，顶栏 62 */
  .monitor-frame{height:calc(100vh - 162px);height:calc(100dvh - 162px);min-height:360px}
}

/* ---------- 设备列表：左侧分类文件夹 ---------- */
/* 分类不做成表里一列：设备上千台时那一列又挤又看不出分组。
   改成左边文件夹（带搜索、带台数），右边照常是设备表；点文件夹就等于筛分类。 */
.mdm-split{display:grid;grid-template-columns:236px minmax(0,1fr);gap:16px;align-items:start}
.mdm-main{min-width:0}
.mdm-rail{
  position:sticky;top:16px;display:flex;flex-direction:column;
  max-height:calc(100vh - 92px);overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:linear-gradient(180deg,var(--surface),var(--ink-2));
}
.mdm-rail__head{padding:9px;border-bottom:1px solid var(--line)}
.mdm-rail__head .searchbox{min-width:0;padding:5px 10px}
.mdm-rail__list{flex:1;min-height:0;overflow-y:auto;padding:6px;display:flex;flex-direction:column;gap:2px}
.mdm-rail__group{padding:9px 10px 3px;font-size:10.5px;letter-spacing:.06em;color:var(--dim)}
.mdm-folder{
  display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;
  font-size:12.5px;color:var(--muted);
  transition:background .15s var(--ease),color .15s var(--ease);
}
.mdm-folder svg{width:14px;height:14px;flex:none;opacity:.85}
.mdm-folder span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdm-folder b{font-size:11.5px;font-weight:500;color:var(--dim);font-variant-numeric:tabular-nums}
.mdm-folder:hover{background:rgba(255,255,255,.05);color:var(--text)}
.mdm-folder.is-on{background:var(--accent-soft);color:var(--accent)}
.mdm-folder.is-on b{color:var(--accent)}
.mdm-rail__foot{padding:9px;border-top:1px solid var(--line)}
/* 批量移分类弹窗里的每一行：和分类管理里那行同一套壳，只是整行可点 */
.mvrow{width:100%;text-align:left;cursor:pointer;align-items:center}
.mvrow svg{width:14px;height:14px;flex:none;color:var(--dim)}
.mvrow:hover{background:rgba(255,255,255,.06)}
.mvrow:disabled{opacity:.5;cursor:default}
@media (max-width:1180px){
  /* 窄屏（笔记本 / 手机）不占着一整块竖栏：分类折成一行横着划的胶囊，
     设备表紧跟在下边，不用先滚过一堆文件夹 */
  .mdm-split{grid-template-columns:1fr}
  .mdm-rail{position:static;max-height:none}
  .mdm-rail__head{padding:8px}
  .mdm-rail__list{flex-direction:row;gap:6px;overflow-x:auto;overflow-y:hidden;padding:8px;min-height:0}
  .mdm-rail__group{display:none}
  .mdm-folder{flex:none;padding:5px 11px;border:1px solid var(--line);border-radius:99px}
  .mdm-folder.is-on{border-color:rgba(255,180,92,.5)}
  .mdm-rail__foot{padding:8px}
}