:root{
  --bg-page:#0F1014;
  --bg-side:#16171D;
  --card:#1E1F27;
  --card-2:#23242C;
  --ink:#FFFFFF;
  --ink-2:#C2C7D2;
  --ink-3:#808692;
  --line:#2B2C34;
  --brand:#FE2C55;
  --brand-2:#E02148;
  --brand-soft:rgba(254,44,85,.14);
  --green:#2DD26A;
  --amber:#FFB020;
  --red:#FF4D4F;
  --radius:16px;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html,body{height:100%}
body{
  font-family:var(--font);background:var(--bg-page);color:var(--ink);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
button:disabled{cursor:not-allowed;opacity:.5}
input,select{outline:none}
svg.ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- brand ---------- */
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#FE2C55,#25F4EE);box-shadow:0 4px 12px rgba(254,44,85,.3);
}
.brand-text h1{font-size:18px;font-weight:600;letter-spacing:.2px;line-height:1.25;display:flex;align-items:center;gap:8px}
.brand-text p{font-size:9px;letter-spacing:2.2px;color:var(--ink-3);font-weight:500}
.tag{
  font-size:11px;font-weight:500;color:var(--ink-2);background:#262832;border:1px solid var(--line);
  padding:2px 7px;border-radius:6px;letter-spacing:.5px;
}

/* ---------- buttons ---------- */
.btn{
  height:36px;padding:0 15px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-size:13.5px;transition:.15s;white-space:nowrap;border:1px solid transparent;
}
.btn-primary{background:var(--brand);color:#fff;font-weight:500;box-shadow:0 4px 14px rgba(254,44,85,.24)}
.btn-primary:hover{background:var(--brand-2)}
.btn-ghost{background:#1F2028;border-color:var(--line);color:var(--ink-2)}
.btn-ghost:hover{background:#282932;color:#fff;border-color:#3A3B45}
.btn-block{width:100%;height:42px;font-size:14.5px;border-radius:10px}
.icon-btn{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--ink-3);transition:.15s;
}
.icon-btn:hover{background:#2A2B34;color:#fff}

/* ---------- login ---------- */
.login-view{min-height:100%;display:grid;place-items:center;padding:24px;
  background:radial-gradient(900px 460px at 50% -10%,rgba(254,44,85,.13),transparent 70%),var(--bg-page)}
.login-card{
  width:100%;max-width:404px;background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:30px 28px 24px;box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.login-card.shake{animation:shake .4s}
@keyframes shake{
  0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}
  60%{transform:translateX(-5px)}80%{transform:translateX(3px)}
}
.login-title{margin-top:26px;font-size:20px;font-weight:600}
.login-sub{margin-top:6px;font-size:12.5px;color:var(--ink-3)}
.login-form{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.login-foot{margin-top:18px;text-align:center;font-size:11.5px;color:var(--ink-3)}

/* ---------- fields ---------- */
.field{display:flex;flex-direction:column;gap:7px}
.f-label{font-size:12.5px;color:var(--ink-2)}
.f-wrap{
  display:flex;align-items:center;height:41px;background:#191A21;border:1px solid var(--line);
  border-radius:10px;padding:0 12px;transition:.15s;
}
.f-wrap:focus-within{border-color:rgba(254,44,85,.65);box-shadow:0 0 0 3px rgba(254,44,85,.1)}
.f-wrap input{flex:1;min-width:0;height:100%;background:none;border:0;font-size:13.5px}
.f-wrap input::placeholder{color:#5E6470}
/* 浏览器自动填充（保存过密码）时会被刷成浅底黑字，这里强制沿用深色 UI */
.f-wrap input{color-scheme:dark}
.f-wrap input:-webkit-autofill,
.f-wrap input:-webkit-autofill:hover,
.f-wrap input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #191A21 inset;
  box-shadow:0 0 0 1000px #191A21 inset;
  transition:background-color 99999s ease-out 0s;
}
.f-wrap input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #191A21 inset;
  box-shadow:0 0 0 1000px #191A21 inset;
}
.f-eye{width:26px;height:26px;display:grid;place-items:center;color:var(--ink-3);border-radius:6px;flex:none}
.f-eye:hover{color:var(--ink-2);background:#24252D}
.f-eye svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.f-eye.on{color:var(--brand)}
.hint{font-size:11.5px;color:var(--ink-3)}
.hint b{color:var(--ink-2);font-weight:500}
.panel-note{padding:9px 20px 0;line-height:1.6}

/* ---------- console ---------- */
.console{min-height:100%;display:flex;flex-direction:column}
.topbar{
  height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 26px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;
  background:rgba(15,16,20,.9);backdrop-filter:saturate(180%) blur(12px);
}
.top-right{display:flex;align-items:center;gap:10px}
.entry-chip{
  height:32px;padding:0 11px;border-radius:8px;background:#1A1B22;border:1px solid var(--line);
  display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3);max-width:340px;
}
.entry-chip:hover{color:var(--ink-2);border-color:#3A3B45}
.entry-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-name{font-size:12.5px;color:var(--ink-2);padding-left:6px}

.main{width:100%;max-width:1280px;margin:0 auto;padding:24px 26px 40px;display:flex;flex-direction:column;gap:18px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;
}
.stat::after{content:"";position:absolute;inset:auto -30% -60% auto;width:120px;height:120px;border-radius:50%;background:var(--accent,rgba(254,44,85,.1));filter:blur(24px)}
.stat-label{font-size:12px;color:var(--ink-3)}
.stat-value{font-size:26px;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.stat-value small{font-size:12px;font-weight:400;color:var(--ink-3);margin-left:4px}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel-title{display:flex;align-items:center;gap:9px}
.panel-title h2{font-size:15px;font-weight:600}
.count{
  font-size:11.5px;color:var(--ink-2);background:#2A2B34;border-radius:999px;padding:1px 8px;font-variant-numeric:tabular-nums;
}
/* COS 配置状态徽标：已启用绿色 / 未启用灰色 */
.count.ok{background:rgba(46,204,113,.16);color:#3ED598}
.count.off{background:#2A2B34;color:var(--ink-3)}
.panel-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search{
  display:flex;align-items:center;gap:8px;height:36px;padding:0 11px;background:#191A21;
  border:1px solid var(--line);border-radius:9px;color:var(--ink-3);transition:.15s;
}
.search:focus-within{border-color:rgba(254,44,85,.55)}
.search input{width:190px;background:none;border:0;font-size:13px;color:var(--ink)}
.search input::placeholder{color:#5E6470}
/* 下拉统一外观：focus 环与 .f-wrap 输入框同一套品牌色提示，color-scheme 保证原生弹层深色 */
.select{
  height:36px;padding:0 28px 0 11px;background:#191A21 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808692' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 8l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 10px center;
  border:1px solid var(--line);border-radius:9px;font-size:13px;color:var(--ink);appearance:none;cursor:pointer;color-scheme:dark;
}
.select:hover{border-color:#3A3B45}
.select:focus{border-color:rgba(254,44,85,.65);box-shadow:0 0 0 3px rgba(254,44,85,.1);outline:none}
.select:disabled{opacity:.45;cursor:not-allowed}
.select:disabled:hover{border-color:var(--line)}
.select option{background:#1C1D24;color:var(--ink)}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;min-width:940px}
.table th{
  text-align:left;font-size:12px;font-weight:500;color:var(--ink-3);padding:11px 18px;
  background:#1A1B22;border-bottom:1px solid var(--line);white-space:nowrap;
}
.table td{padding:14px 18px;border-bottom:1px solid #24252C;vertical-align:middle;font-size:13px}
.table tbody tr:hover{background:#212229}
.table tbody tr:last-child td{border-bottom:0}
.u-name{font-weight:500;letter-spacing:.2px;font-variant-numeric:tabular-nums}
.u-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.cell-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.chip{
  display:inline-flex;align-items:center;gap:5px;height:23px;padding:0 9px;border-radius:999px;
  font-size:11.5px;font-weight:500;white-space:nowrap;
}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.chip-active{color:var(--green);background:rgba(45,210,106,.12)}
.chip-expired{color:var(--red);background:rgba(255,77,79,.13)}
.chip-disabled{color:var(--ink-3);background:#2A2B34}
.chip-soon{color:var(--amber);background:rgba(255,176,32,.13)}
.warn{color:var(--amber)}
.muted{color:var(--ink-3)}
.acts{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.act{
  height:28px;padding:0 9px;border-radius:7px;font-size:12px;color:var(--ink-2);
  border:1px solid transparent;transition:.15s;display:inline-flex;align-items:center;gap:5px;
}
.act:hover{background:#2C2D36;color:#fff}
.act.danger:hover{background:rgba(255,77,79,.14);color:var(--red)}
.act.primary{color:var(--brand);background:var(--brand-soft)}
.act.primary:hover{background:rgba(254,44,85,.22)}
.empty{padding:48px 0;text-align:center;color:var(--ink-3);font-size:13px}
.foot-note{font-size:11.5px;color:#5E6470;text-align:center}

/* ---------- modal ---------- */
.modal{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;
  background:rgba(8,9,12,.66);backdrop-filter:blur(3px);animation:fade .18s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{
  width:100%;max-width:560px;background:#1C1D24;border:1px solid #33343E;border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);animation:pop .2s ease;max-height:90vh;display:flex;flex-direction:column;
}
.modal-card.narrow{max-width:460px}
@keyframes pop{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 12px}
.modal-head h3{font-size:16px;font-weight:600}
.modal-body{padding:6px 20px 18px;display:flex;flex-direction:column;gap:15px;overflow-y:auto}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px 18px;border-top:1px solid var(--line)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}

/* segmented */
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg-btn{
  height:32px;padding:0 12px;border-radius:8px;background:#191A21;border:1px solid var(--line);
  font-size:12.5px;color:var(--ink-2);transition:.15s;
}
.seg-btn:hover{border-color:#3A3B45;color:#fff}
.seg-btn.is-on{background:var(--brand-soft);border-color:rgba(254,44,85,.55);color:var(--brand);font-weight:500}
.custom-date{display:flex;align-items:center;gap:10px}
.date-input{
  height:36px;padding:0 10px;background:#191A21;border:1px solid var(--line);border-radius:9px;
  font-size:13px;color:var(--ink);color-scheme:dark;
}

/* credential */
.cred{background:#141519;border:1px solid var(--line);border-radius:12px;padding:6px 14px}
.cred-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px dashed #26272F}
.cred-row:last-child{border-bottom:0}
.cred-row span{font-size:12.5px;color:var(--ink-3);flex:none}
.cred-row b{font-size:13.5px;font-weight:500;text-align:right;word-break:break-all}
#credPwd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.6px;color:var(--brand)}

/* toast */
.toasts{position:fixed;top:18px;right:18px;z-index:90;display:flex;flex-direction:column;gap:9px}
.toast{
  min-width:180px;max-width:340px;padding:10px 14px;border-radius:10px;background:#25262F;
  border:1px solid #35363F;font-size:13px;box-shadow:0 12px 30px rgba(0,0,0,.4);
  animation:slide .2s ease;display:flex;align-items:center;gap:8px;
}
@keyframes slide{from{transform:translateX(16px);opacity:0}to{transform:none;opacity:1}}
.toast.ok{border-color:rgba(45,210,106,.4)}
.toast.ok::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
.toast.err{border-color:rgba(255,77,79,.45)}
.toast.err::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}

@media (max-width:980px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .main{padding:18px 14px 32px}
  .topbar{padding:0 14px}
  .search input{width:130px}
  .entry-chip{display:none}
}

/* token 上限输入后缀 */
.f-suffix{font-size:12px;color:var(--ink-3);padding-right:6px;white-space:nowrap;flex:none}

/* 消耗详情弹窗 */
.modal-card.wide{max-width:720px}
.usage-summary{display:flex;gap:10px;flex-wrap:wrap}
.us-card{
  flex:1;min-width:140px;background:#191A21;border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;display:flex;flex-direction:column;gap:4px;
}
.us-label{font-size:11.5px;color:var(--ink-3)}
.us-card b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.usage-chart{
  display:flex;align-items:flex-end;gap:2px;height:172px;padding:10px 6px 22px;
  overflow-x:auto;background:#141519;border:1px solid var(--line);border-radius:11px;
}
.bar-col{flex:0 0 26px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:5px}
.bar{width:16px;background:linear-gradient(180deg,#FE2C55,#E02148);border-radius:4px 4px 0 0;transition:height .25s}
.bar.over{background:linear-gradient(180deg,#FF4D4F,#C0392B)}
.bar-date{font-size:9.5px;color:var(--ink-3);white-space:nowrap}
.usage-table{margin-top:6px;min-width:460px}
.usage-table th,.usage-table td{padding:9px 14px}

/* ---------- 顶部页签 ---------- */
.tabs{
  display:flex;gap:4px;margin-left:26px;background:#141519;
  border:1px solid var(--line);border-radius:9px;padding:3px;
}
.tab{
  border:0;background:transparent;color:var(--ink-3);font-size:13px;font-family:inherit;
  padding:6px 14px;border-radius:7px;cursor:pointer;transition:.16s;
}
.tab:hover{color:var(--ink)}
.tab.active{background:#23242C;color:#fff}

/* ---------- 模型与密钥配置 ---------- */
.cfg-body{display:flex;flex-direction:column;gap:16px;padding:18px 20px 4px}
.cfg-group{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#141519}
.cfg-group-title{font-size:12.5px;color:var(--ink-2);margin-bottom:12px;letter-spacing:.02em;display:flex;align-items:center;justify-content:space-between;gap:10px}
.cfg-test{background:transparent;border:1px solid var(--line);border-radius:20px;padding:2px 10px;font-size:11px;color:var(--ink-3);cursor:pointer;font-family:inherit;transition:color .15s,border-color .15s}
.cfg-test:hover{color:var(--ink);border-color:var(--ink-3)}
.cfg-test:disabled{opacity:.5;cursor:default}
.cfg-field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.cfg-field-inline{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
.cfg-field-inline .cfg-label{margin-right:auto}
.cfg-field-inline .cfg-help{flex-basis:100%;margin:0}
.cfg-field:last-child{margin-bottom:0}

/* ---------- COS 入云内容概览（ADR-036） ---------- */
.cos-usage-head{border-top:1px solid var(--line);margin-top:14px}
.cos-usage-head h3{margin:0;font-size:13.5px;font-weight:600}
.cos-usage{padding:0 20px}
.cos-usage-table{width:100%;border-collapse:collapse;font-size:12.5px}
.cos-usage-table th{text-align:left;font-weight:500;color:var(--ink-3);font-size:11.5px;padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.cos-usage-table td{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.cos-usage-table tr:last-child td{border-bottom:none}
.cos-usage-table b{color:var(--ink);font-weight:600}
.cos-prefix{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:9px;background:#1C1D24;color:var(--ink-3);font-size:10.5px;font-family:ui-monospace,monospace}
.cos-usage .empty-state{padding:14px 0}
.cfg-label{font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.cfg-state{font-style:normal;font-size:11px;padding:1px 7px;border-radius:20px;background:#23242C;color:var(--ink-3)}
.cfg-state.on{background:rgba(45,210,106,.14);color:#2DD26A}
.cfg-input{
  width:100%;background:#191A21;border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;color:var(--ink);font-size:13px;font-family:inherit;outline:none;
}
.cfg-input:focus{border-color:rgba(254,44,85,.5)}
.cfg-help{font-size:11.5px;color:var(--ink-3)}

/* ---------- 安全状态 ---------- */
.sec-body{padding:14px 20px 18px;display:flex;flex-direction:column;gap:9px}
.sec-row{display:flex;justify-content:space-between;gap:16px;font-size:12.5px;color:var(--ink-3)}
.sec-row b{color:var(--ink);font-weight:500}
.sec-ok{font-size:12px;color:#2DD26A;margin-top:4px}
.sec-warn{font-size:12px;color:#FFB020;margin-top:4px}

@media (max-width:980px){
  .tabs{margin-left:0;order:3;width:100%;justify-content:center}
}

/* ---------- 模型库 ---------- */
.model-list{display:flex;flex-direction:column;gap:10px;padding:14px 20px 4px}
.model-card{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;
  border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:var(--card-2)}
.model-card.off{opacity:.55}
.model-main{min-width:0;display:flex;flex-direction:column;gap:5px}
.model-name{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);font-weight:500;flex-wrap:wrap}
.model-meta{font-size:12px;color:var(--ink-3);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.model-meta.sub{font-size:11.5px;color:rgba(255,255,255,.38);word-break:break-all}
.model-meta .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.model-meta .sep{opacity:.45}
.model-acts{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.tag{font-size:10.5px;font-style:normal;padding:1px 7px;border-radius:20px;border:1px solid var(--line);color:var(--ink-3)}
.tag.warn{color:var(--amber);border-color:rgba(255,176,32,.4)}
.empty-state{padding:26px 4px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.38)}

/* ---------- 用途路由 ---------- */
.route-body{display:flex;flex-direction:column;padding:6px 20px 4px}
.route-row{display:grid;grid-template-columns:1fr 210px 40px 60px;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.route-row:last-child{border-bottom:none}
.route-label{font-size:13px;color:var(--ink)}
.route-desc{font-size:11.5px;color:rgba(255,255,255,.38);margin-top:2px}
.route-model{width:100%}
.route-state{font-size:11.5px;color:rgba(255,255,255,.38);font-style:normal;text-align:right;white-space:nowrap}
.route-state.on{color:var(--green)}

/* 开关 */
.switch{position:relative;display:inline-block;width:38px;height:21px}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:var(--line);border-radius:20px;transition:.18s;cursor:pointer}
.switch span:before{content:"";position:absolute;width:15px;height:15px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:.18s}
.switch input:checked + span{background:var(--brand)}
.switch input:checked + span:before{transform:translateX(17px)}
.switch input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}

@media (max-width:980px){
  .route-row{grid-template-columns:1fr;gap:8px}
  .route-state{text-align:left}
  .model-card{flex-direction:column}
  .model-acts{justify-content:flex-start}
}

/* ---------- 系统预置素材 ---------- */
.panel-hint{padding:11px 20px 15px;margin-top:11px;border-top:1px solid var(--line);
  font-size:11.5px;color:rgba(255,255,255,.38);line-height:1.6}

.asset-list{display:flex;flex-direction:column;gap:9px;padding:14px 20px 0}
.asset-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;
  padding:10px 13px;background:var(--card-2)}
.asset-row.off{opacity:.5}
.asset-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
.asset-name{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;
  color:var(--ink);flex-wrap:wrap;word-break:break-all}
.asset-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.asset-meta .sep{opacity:.45}
.asset-meta.sub{font-size:11.5px;color:rgba(255,255,255,.38)}
.asset-acts{display:flex;align-items:center;gap:6px;flex:none}
.chip{font-style:normal;font-size:10.5px;padding:1px 7px;border-radius:20px;
  background:rgba(254,44,85,.13);color:#FF7A93}

.bgm-play{width:32px;height:32px;border-radius:50%;background:#262832;border:1px solid var(--line);
  color:var(--ink-2);display:grid;place-items:center;font-size:10px;flex:none;transition:.15s}
.bgm-play:hover{color:#fff;border-color:#3A3B45}
.bgm-play.on{background:var(--brand-soft);color:var(--brand);border-color:rgba(254,44,85,.4)}

.font-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:12px;padding:14px 20px 0}
.font-card{border:1px solid var(--line);border-radius:12px;background:var(--card-2);
  padding:12px 13px;display:flex;flex-direction:column;gap:9px}
.font-card.off{opacity:.5}
.font-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.font-card .asset-acts{justify-content:flex-end}
.font-sample{border:1px dashed var(--line);border-radius:9px;background:#141519;padding:14px 10px;
  text-align:center;font-size:21px;color:var(--ink);line-height:1.35;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

/* 模板列表：一行固定 5 个（ADR-039 后用户明确要求），窄屏依次降为 3/2 列；
   卡片预览按出图模板 750×1334（9:16）等比缩放 */
.style-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;padding:14px 20px 0}
@media (max-width:1360px){.style-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.style-card{border:1px solid var(--line);border-radius:12px;background:var(--card-2);
  overflow:hidden;display:flex;flex-direction:column}
.style-card.off{opacity:.5}
.style-frame{position:relative;aspect-ratio:750/1334;overflow:hidden;
  container-type:inline-size;
  background:linear-gradient(160deg,#2A3140,#14161C 58%,#1E222B)}
.style-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.style-layer{position:absolute;inset:0;display:flex;flex-direction:column;padding:6.67cqi 5.33cqi}   /* 安全边距 上50/左右40，与出图端 MARGIN 一致 */
.style-text{max-width:100%;word-break:break-word}
.style-sub{max-width:100%;word-break:break-word;font-weight:500}
.style-foot{padding:10px 12px 11px;display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line)}
.style-foot .asset-acts{justify-content:flex-end;margin-top:4px}

.style-live{display:flex;flex-direction:column;align-items:center;gap:7px;margin-bottom:16px}
.style-live .style-frame{width:260px;aspect-ratio:750/1334;border-radius:10px;border:1px solid var(--line)}

/* ---------- 标题模板四栏大弹窗（一屏放全，不上下滚动） ---------- */
.modal-card.xl{max-width:1420px}
.modal-card.xl .modal-head{padding:14px 22px 10px}
.modal-card.xl .modal-foot{padding:10px 22px 14px}
.style-modal{display:grid;grid-template-columns:240px repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.style-modal-left{display:flex;flex-direction:column;align-items:center;gap:9px}
/* 弹窗预览：750×1334 等比缩放至 200px 宽（高约 356px），保证一屏放得下 */
.style-modal-left .style-frame{width:100%;max-width:200px;aspect-ratio:750/1334;border-radius:12px;border:1px solid var(--line)}
.style-modal-left .hint{text-align:center}
.style-upload{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;max-width:250px;
  padding:10px 14px;border:1px dashed #3A3B45;border-radius:12px;cursor:pointer;text-align:center;
  color:var(--ink-2);transition:border-color .15s}
.style-upload:hover{border-color:#5A5C6B}
.style-upload b{font-size:13px;color:#E7EAF0;font-weight:600}
.style-modal-col{display:flex;flex-direction:column;gap:11px;min-width:0}
.sm-sec{font-size:11.5px;font-weight:600;letter-spacing:.8px;color:var(--ink-3);
  padding-bottom:7px;border-bottom:1px solid var(--line);margin-bottom:2px}
.style-modal .style-switches{gap:18px}
/* 逐级收窄：1200 以下并三栏（预览跨两行）、1120 以下并两栏、780 以下单栏 */
@media (max-width:1200px){
  .style-modal{grid-template-columns:240px minmax(0,1fr) minmax(0,1fr)}
  .style-modal-left{grid-row:span 2}
}
@media (max-width:1120px){
  .style-modal{grid-template-columns:240px minmax(0,1fr)}
  .style-modal-left{grid-row:span 3}
}
@media (max-width:780px){.style-modal{grid-template-columns:1fr}.style-modal-left{grid-row:auto}}

/* 弹窗内的下拉与系统输入框统一外观（外框由 .f-wrap 提供，select 自身透明 + 自绘箭头） */
.f-wrap select{flex:1;min-width:0;height:100%;border:0;background-color:transparent;
  font-size:13.5px;color:var(--ink);appearance:none;cursor:pointer;padding:0 24px 0 0;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808692' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 8l7 7 7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center}
.f-wrap select:hover{color:#fff}
/* 弹窗内焦点由 .f-wrap:focus-within 统一表达，避免内层再套一圈光晕 */
.f-wrap select:focus{box-shadow:none;border-color:transparent}
.f-wrap select option{background:#1C1D24;color:var(--ink)}
.style-extra{display:flex;flex-direction:column;gap:14px;margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}
.style-switches{display:flex;gap:20px;flex-wrap:wrap}
.inline-check{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.inline-check input{accent-color:var(--brand);width:15px;height:15px}

.f-wrap input[type="color"]{width:46px;height:26px;border:1px solid var(--line);border-radius:6px;
  background:#141519;padding:2px;cursor:pointer;flex:none}
.f-wrap input[type="color"]::-webkit-color-swatch-wrapper{padding:0}
.f-wrap input[type="color"]::-webkit-color-swatch{border:none;border-radius:4px}
.f-wrap input[type="range"]{flex:1;min-width:0;height:auto;accent-color:var(--brand);cursor:pointer}

@media (max-width:980px){
  .asset-row{flex-wrap:wrap}
  .asset-acts{width:100%;justify-content:flex-end}
}

/* ---------- 客户素材库（只读弹窗） ---------- */
.ca-summary{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:14px}
.ca-stat{font-size:12.5px;color:var(--ink-2);background:#191A21;border:1px solid var(--line);
  border-radius:20px;padding:4px 12px}
.ca-stat b{color:#fff;font-weight:600}
.ca-dir{font-size:11px;color:rgba(255,255,255,.38);word-break:break-all}
.ca-err{color:var(--red);font-size:12px}

.ca-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:12px}
.ca-tab{height:34px;padding:0 12px;font-size:12.5px;color:var(--ink-3);border-bottom:2px solid transparent;
  transition:.15s;display:inline-flex;align-items:center;gap:6px}
.ca-tab b{font-weight:500;font-size:11.5px;color:var(--ink-3);background:#23242C;
  border-radius:20px;padding:1px 7px}
.ca-tab.is-on{color:#fff;border-bottom-color:var(--brand)}
.ca-tab.is-on b{background:var(--brand-soft);color:#FF7A93}

.ca-panel{display:flex;flex-direction:column;gap:8px;max-height:44vh;overflow:auto}
.ca-row{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:11px;
  padding:9px 12px;background:var(--card-2)}
.ca-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:#262832;color:var(--ink-2);font-size:11px}
.ca-ico.round{border-radius:50%;color:var(--brand);background:var(--brand-soft)}
.ca-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.ca-name{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink);flex-wrap:wrap;
  word-break:break-all}
.ca-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3)}
.ca-meta .sep{opacity:.45}

.ca-player{border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-bottom:12px;background:#000}
.ca-player-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 8px 6px 12px;background:#16171D;font-size:12px;color:var(--ink-2)}
.ca-player video{display:block;width:100%;max-height:46vh;background:#000}

/* 视频卡片：与工作台「私有素材库」同款——抽帧封面 + 时长角标 + 悬停循环预览 */
.modal-card.ca-wide{max-width:980px}
.ca-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.ca-card{position:relative;display:flex;flex-direction:column;cursor:pointer;text-align:left}
.ca-card .ca-cimg{aspect-ratio:16/10;border-radius:8px;position:relative;overflow:hidden;
  background:linear-gradient(150deg,#2A2B33,#1E1F26);display:grid;place-items:center}
.ca-card .ca-cthumb,.ca-card .ca-clive{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;background:#1E1F26}
.ca-card .ca-clive{opacity:0;pointer-events:none;transition:opacity .18s}
.ca-card .ca-cimg.playing .ca-clive{opacity:1}
/* 抽帧失败（编码不解 / 文件缺失）保留占位底并给个图标提示 */
.ca-card .ca-cimg.no-thumb::after{content:'';width:26px;height:26px;position:absolute;
  background:center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.4)' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M9 8.5v7l6-3.5z'/%3E%3C/svg%3E")}
.ca-card .ca-cdur{position:absolute;left:6px;bottom:6px;padding:1px 5px;border-radius:4px;
  background:rgba(0,0,0,.62);color:#fff;font-size:10px;font-variant-numeric:tabular-nums}
.ca-card .ca-cmiss{position:absolute;top:6px;left:6px;padding:1px 6px;border-radius:4px;
  background:rgba(226,58,78,.88);color:#fff;font-size:10px}
.ca-card .ca-cplay{position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  transition:opacity .18s;background:rgba(0,0,0,.16)}
.ca-card .ca-cplay i{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);
  display:grid;place-items:center}
.ca-card .ca-cplay svg{width:15px;height:15px;fill:#fff}
.ca-card:hover .ca-cplay{opacity:1}
.ca-card .ca-cname{font-size:11.5px;color:var(--ink-2);margin-top:7px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ca-card .ca-cmeta{font-size:10.5px;color:var(--ink-3);margin-top:2px;font-variant-numeric:tabular-nums}
.ca-card .ca-ctags{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:4px}
.ca-card .ca-ctag{font-size:9.5px;color:var(--brand);background:var(--brand-soft);border-radius:4px;
  padding:1px 5px;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-empty{border:1px dashed #3A3B45;border-radius:10px;padding:26px 16px;display:flex;
  align-items:center;justify-content:center;gap:8px;text-align:center;color:var(--ink-3);
  font-size:12.5px;line-height:1.6}