/* YouTube 数据报表：多频道数据工作台，风格对齐 YouTube Studio。 */
:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-soft: #fafbfc;
  --surface2: #f2f4f7;
  --ink: #172033;
  --muted: #667085;
  --subtle: #98a2b3;
  --line: #e4e9f0;
  --line-strong: #d5dce6;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-soft: #edf4ff;
  --blue-faint: #f6f9ff;
  --accent: var(--blue);
  --up: #087a61;
  --up-bg: #eaf8f3;
  --down: #b5472d;
  --down-bg: #fff1ed;
  --views: #2563eb;
  --money: #d97706;
  --subs: #087a61;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04),
            0 8px 24px rgba(16, 24, 40, .035);
  --shadow-dialog: 0 24px 64px rgba(15, 23, 42, .18);
  --ui-base: 14.5px;
  --ui-line-height: 1.6;
  --ui-small: 12.5px;
  --ui-caption: 11.5px;
  --ui-control: 40px;
  --ui-table-row: 54px;
  --ui-channel-row: 75px;
  --ui-header: 56px;
  --ui-nav: 76px;
  --ui-nav-button: 60px;
  --ui-main-top: 75px;
  --ui-page-pad: 26px;
  --ui-panel-pad: 18px;
  --cm-workbench-offset: 222px;
}

html[data-ui-size="compact"] {
  --ui-base: 14px; --ui-line-height: 1.54; --ui-small: 12px;
  --ui-caption: 11px; --ui-control: 36px; --ui-table-row: 48px;
  --ui-channel-row: 68px; --ui-header: 52px; --ui-nav: 72px;
  --ui-nav-button: 56px; --ui-main-top: 69px; --ui-page-pad: 24px;
  --ui-panel-pad: 16px; --cm-workbench-offset: 212px;
}
html[data-ui-size="comfortable"] {
  --ui-base: 15px; --ui-line-height: 1.66; --ui-small: 13px;
  --ui-caption: 12px; --ui-control: 42px; --ui-table-row: 60px;
  --ui-channel-row: 80px; --ui-header: 60px; --ui-nav: 80px;
  --ui-nav-button: 64px; --ui-main-top: 81px; --ui-page-pad: 28px;
  --ui-panel-pad: 20px; --cm-workbench-offset: 234px;
}

/* 频道管理工作台 */
.cm-titlebar{min-height:76px;display:flex;align-items:center;gap:22px;padding:12px 0 10px}.cm-titlebar h1{margin:0;font-size:25px;line-height:1.2;letter-spacing:-.035em}.cm-titlebar p{margin:3px 0 0;color:var(--muted);font-size:11px}.cm-summary{display:flex;gap:6px;margin-left:auto}.cm-summary button{height:34px;display:flex;align-items:center;gap:6px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:11px}.cm-summary button:hover{border-color:#b8c8e7;background:#f9fbff}.cm-summary button.active{border-color:#a9c5fb;background:var(--blue-soft);color:var(--blue-dark)}.cm-summary strong{font-size:12px}.cm-summary button[data-scope=unassigned] strong,.cm-summary button[data-scope=pending] strong{color:#b06000}
.cm-workarea{position:relative}.cm-toolbar{min-height:52px;display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;background:#fff}.cm-search{width:min(340px,29vw);height:36px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface-soft)}.cm-search svg{width:17px;fill:none;stroke:var(--muted);stroke-width:1.8}.cm-search input{min-width:0;width:100%;border:0;outline:0;background:transparent;font-size:12px}.cm-toolbar select,.cm-more,.cm-refresh{height:36px;padding:0 10px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;color:#46536a;font-size:12px}.cm-more.active{border-color:#e8c173;background:#fff7e6;color:#8a580c}.cm-refresh{margin-left:auto;border-color:transparent;color:var(--blue-dark);font-weight:650}
.cm-advanced{position:absolute;z-index:8;top:48px;left:330px;width:470px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:13px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;box-shadow:0 16px 36px rgba(16,24,40,.14)}.cm-advanced label{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:11px}.cm-advanced select{height:34px;min-width:0;border:1px solid var(--line-strong);border-radius:7px;background:var(--surface-soft);font-size:12px}
.cm-workbench{height:calc(100vh - 212px);min-height:430px;display:grid;grid-template-columns:minmax(430px,1fr) clamp(550px,43%,680px);grid-template-rows:minmax(0,1fr);overflow:hidden;border:1px solid var(--line);border-radius:0 0 12px 12px;background:#fff;box-shadow:var(--shadow)}.cm-listpane{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}.cm-listhead,.cm-row{display:grid;grid-template-columns:minmax(225px,1.3fr) minmax(128px,.72fr) minmax(155px,.9fr) 76px;align-items:center;gap:11px}.cm-listhead{flex:0 0 39px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--surface-soft);color:var(--muted);font-size:10px;font-weight:720}.cm-listhead small{margin-left:4px;color:var(--subtle);font-weight:500}.cm-state{display:none;flex:1;place-items:center;padding:30px;color:var(--muted);font-size:12px;text-align:center}.cm-state.show{display:grid}.cm-state.error{color:var(--down)}.cm-list{overflow:auto;scrollbar-gutter:stable}
.cm-row{position:relative;width:100%;min-height:66px;padding:8px 14px;border:0;border-bottom:1px solid #edf0f4;background:#fff;text-align:left}.cm-row:hover{background:#f9fbff}.cm-row.selected{background:var(--blue-soft)}.cm-row.selected:before{content:"";position:absolute;inset:9px auto 9px 0;width:3px;border-radius:0 3px 3px 0;background:var(--blue)}.cm-row.archived{opacity:.62}.cm-identity{min-width:0;display:flex;align-items:center}.cm-rownum{width:24px;flex:0 0 24px;margin-right:8px;color:var(--subtle);font-size:10px;font-variant-numeric:tabular-nums;text-align:right}.cm-row.selected .cm-rownum{color:var(--blue-dark);font-weight:720}.cm-identity .yt-ava{width:42px;height:42px;flex:0 0 42px}.cm-idcopy{min-width:0;margin-left:10px}.cm-name,.cm-meta,.cm-ownername,.cm-ownersub{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cm-name{color:#243044;font-size:13px;font-weight:740}.cm-meta,.cm-ownersub{margin-top:3px;color:var(--muted);font-size:10px}.cm-ownername{color:#344054;font-size:12px;font-weight:700}.cm-ownersub.pending{color:#a86608;font-weight:650}.cm-tags{display:flex;flex-wrap:wrap;color:#536077;font-size:11px}.cm-tag:not(:last-child):after{content:" · ";color:var(--subtle)}.cm-tag.ypp{margin-left:5px;padding:1px 5px;border-radius:4px;background:var(--up-bg);color:var(--up);font-size:10px;font-weight:700}.cm-tag.ypp:after{content:none}.cm-status{justify-self:start;padding:3px 7px;border-radius:999px;font-size:10px;font-weight:720}.cm-status.ok{background:var(--up-bg);color:var(--up)}.cm-status.attention{background:#fff5df;color:#9a620b}.cm-status.archived{background:#eef1f5;color:#667085}
.cm-detail{min-width:0;min-height:0;display:flex;flex-direction:column;border-left:1px solid var(--line)}.cm-detailhead{flex:0 0 auto;display:flex;align-items:center;gap:11px;padding:15px 20px 13px;border-bottom:1px solid var(--line)}.cm-detailhead .yt-ava{width:46px;height:46px;flex:0 0 46px}.cm-detailtitle{min-width:0}.cm-detailtitle h2{overflow:hidden;margin:0;font-size:16px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.cm-detailtitle p{overflow:hidden;margin:4px 0 0;color:var(--muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.cm-recordnav{display:flex;align-items:center;gap:5px;margin-left:auto}.cm-recordnav button,.cm-back{height:31px;padding:0 9px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#536077;font-size:10px;font-weight:680}.cm-recordnav button:not(#cm-focus){width:31px;padding:0;font-size:17px}#cm-position{min-width:42px;color:var(--muted);font-size:10px;text-align:center}.cm-back{display:none}.cm-detailstate{flex:1;display:grid;place-items:center;padding:30px;color:var(--muted);font-size:12px;text-align:center}.cm-detailbody{flex:1;overflow:auto;padding:16px 20px 24px;scrollbar-gutter:stable}
.cm-section{margin:0 0 20px;padding:0;border:0}.cm-sectiontitle{display:flex;align-items:baseline;gap:8px;margin-bottom:9px}.cm-sectiontitle h3{margin:0;font-size:13px;font-weight:760}.cm-sectiontitle span{color:var(--muted);font-size:11px}.cm-owner-card{overflow:hidden;border:1px solid #cfdcf4;border-radius:11px;background:linear-gradient(145deg,#f8fbff,#f2f7ff)}.cm-owner-current{display:flex;align-items:center;gap:12px;padding:13px 14px}.cm-owner-current>div{min-width:0}.cm-owner-label,.cm-owner-current strong,.cm-owner-current small{display:block}.cm-owner-label{color:var(--muted);font-size:11px;font-weight:680}.cm-owner-current strong{margin-top:3px;font-size:13px}.cm-owner-current small{color:var(--muted);font-size:10px}.cm-owner-current button{margin-left:auto;height:33px;padding:0 11px;border:1px solid #aec6f5;border-radius:7px;background:#fff;color:var(--blue-dark);font-size:11px;font-weight:720}.cm-owner-editor{display:grid;grid-template-columns:1.15fr 1fr auto auto;gap:7px;padding:11px 14px;border-top:1px solid #cfdbef;background:#fff}.cm-owner-editor select,.cm-owner-editor input,.cm-owner-editor button{min-width:0;height:34px;border:1px solid var(--line-strong);border-radius:7px;font-size:10px}.cm-owner-editor select,.cm-owner-editor input{padding:0 8px;background:var(--surface-soft)}.cm-owner-editor button{padding:0 10px;border-color:var(--blue);background:var(--blue);color:#fff;font-weight:720}.cm-owner-editor #cm-release-btn{border-color:#e4a49b;background:#fff;color:var(--down)}.cm-pending{padding:8px 14px;border-top:1px solid #e4d4ae;background:#fff5df;color:#7f520d;font-size:11px;font-weight:650}.cm-inline-msg{min-height:17px;margin:5px 0 0;color:var(--muted);font-size:11px}.cm-inline-msg.error{color:var(--down)}
.cm-history{margin-top:6px;padding-bottom:10px;border-bottom:1px solid var(--line);color:#344054;font-size:11px}.cm-history summary,.cm-fieldgroup summary{cursor:pointer;font-weight:700}.cm-history-row{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:7px;color:var(--muted)}.cm-fieldgroup{margin-bottom:12px;padding:2px 0 14px;border-bottom:1px solid var(--line)}.cm-fieldgroup h4{margin:0 0 10px;color:#344054;font-size:12px}.cm-fieldgroup summary{margin-bottom:10px;font-size:12px}.cm-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 11px}.cm-fields label{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:11px;font-weight:650}.cm-fields label.wide{grid-column:span 2}.cm-fields input,.cm-fields select,.cm-fields textarea{width:100%;border:1px solid var(--line-strong);border-radius:7px;background:var(--surface-soft);color:#273449;font-size:12px}.cm-fields input,.cm-fields select{height:34px;padding:0 9px}.cm-fields select{appearance:none;-webkit-appearance:none;padding-right:28px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer}.cm-fields select:hover{border-color:#98a2b3}.cm-fields textarea{min-height:62px;padding:8px 9px;resize:vertical;font:inherit}.cm-danger{display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid #f0cbc6;border-radius:10px;background:#fffafa}.cm-danger strong,.cm-danger span{display:block}.cm-danger strong{color:#7a271a;font-size:11px}.cm-danger span{color:#9b5b51;font-size:10px}.cm-danger button{margin-left:auto;height:32px;padding:0 10px;border:1px solid #e4a49b;border-radius:7px;background:#fff;color:var(--down);font-size:10px;font-weight:720}.cm-danger.restore{border-color:#b8dfd3;background:#f7fcfa}.cm-danger.restore strong,.cm-danger.restore span{color:#176a56}.cm-danger.restore button{border-color:#8ecbb9;color:var(--up)}
.cm-savebar{flex:0 0 58px;display:flex;align-items:center;gap:9px;padding:9px 20px;border-top:1px solid var(--line);background:rgba(255,255,255,.96);box-shadow:0 -8px 24px rgba(16,24,40,.045)}.cm-savebar span{color:var(--muted);font-size:11px}.cm-savebar span.dirty{color:#a86608;font-weight:680}.cm-savebar span.error{color:var(--down)}.cm-savebar button{height:36px;padding:0 13px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;font-size:11px;font-weight:720}.cm-savebar button:first-of-type{margin-left:auto}.cm-savebar button.primary{border-color:var(--blue);background:var(--blue);color:#fff}.cm-workbench.focus-mode{grid-template-columns:1fr}.cm-workbench.focus-mode .cm-listpane{display:none}.cm-workbench.focus-mode .cm-detail{border-left:0}.cm-workbench.focus-mode .cm-detailbody>*{width:min(920px,100%);margin-inline:auto}.cm-workbench.focus-mode .cm-detailhead{padding-inline:max(20px,calc((100% - 920px)/2))}
.cm-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.36)}.cm-modal-card{width:410px;padding:20px;border-radius:12px;background:#fff;box-shadow:var(--shadow-dialog)}.cm-modal-card h3{margin:0;font-size:16px}.cm-modal-card p{margin:8px 0 18px;color:var(--muted);font-size:12px}.cm-modal-card>div{display:flex;justify-content:flex-end;gap:7px}.cm-modal-card button{height:35px;padding:0 11px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;font-size:11px}.cm-modal-card button.primary{border-color:var(--blue);background:var(--blue);color:#fff}.cm-toast{position:fixed;right:24px;bottom:22px;z-index:90;transform:translateY(18px);opacity:0;padding:10px 14px;border-radius:9px;background:#172033;color:#fff;box-shadow:0 12px 32px rgba(16,24,40,.2);font-size:11px;pointer-events:none;transition:.18s ease}.cm-toast.show{transform:translateY(0);opacity:1}
@media(max-width:1180px){.cm-summary button:nth-child(3){display:none}.cm-workbench{position:relative;grid-template-columns:1fr}.cm-detail{display:none;border-left:0}.cm-workbench.detail-open .cm-listpane,.cm-workbench.focus-mode .cm-listpane{display:none}.cm-workbench.detail-open .cm-detail,.cm-workbench.focus-mode .cm-detail{display:flex}.cm-workbench.detail-open .cm-back{display:inline-block}#cm-focus{display:none}.cm-workbench.focus-mode #cm-focus{display:inline-block}.cm-workbench.focus-mode .cm-back{display:none}}@media(max-height:760px){.cm-workbench{height:calc(100vh - 196px)}.cm-titlebar{min-height:64px}}

* { box-sizing: border-box; }
html { color-scheme: light; background: var(--bg); }
body {
  margin: 0;
  min-width: 1024px;
  color: var(--ink);
  background: var(--bg);
  font: var(--ui-base)/var(--ui-line-height) "Microsoft YaHei UI",
        "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible, input:focus-visible, select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #8db8f8;
  outline-offset: 2px;
}
.hidden { display: none !important; }
.muted, .yt-muted { color: var(--muted); font-size: 12px; }
/* 频道 ID 外链 + 复制按钮：和旁边文字同色，悬停变蓝带下划线 */
.yt-chid { display: inline-flex; align-items: center; gap: 6px; }
.yt-handle { color: inherit; text-decoration: none; font-family: Consolas, monospace; }
.yt-handle:hover { color: var(--blue-dark); text-decoration: underline; }
.yt-chid .tk-copy { height: 20px; padding: 0 6px; font-size: 10.5px; }
.error { min-height: 1.4em; margin-top: 8px; color: var(--down); }
canvas { max-width: 100%; }

/* ── 登录 ───────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background:
    radial-gradient(760px 360px at 50% -10%, rgba(37, 99, 235, .10),
                    transparent 70%),
    var(--bg);
}
.login-card {
  width: 390px;
  padding: 38px 42px 34px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.login-eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
}
.login-logo { display: block; max-width: 160px; max-height: 56px; margin: 0 0 10px; object-fit: contain; }
.login-card h1 {
  margin: 5px 0 22px;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -.03em;
}
.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.tab {
  flex: 1;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
}
.tab.active {
  border-color: #a9c5fb;
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-weight: 650;
}
.login-card label {
  display: block;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 12px;
}
.login-card input {
  width: 100%;
  height: 42px;
  margin-top: 5px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #fbfcfd;
}
.login-card button.primary {
  width: 100%;
  height: 42px;
  border: 1px solid var(--blue);
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}
.login-card button.primary:hover { background: var(--blue-dark); }
.hint { margin-top: 10px; color: var(--muted); font-size: 12px; }

/* ── 应用外壳：52px 顶栏 + 72px 左侧导航 ─────────────── */
#view-main::before {
  content: "";
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 42;
  width: 72px;
  height: 52px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}
#view-main > header {
  position: fixed;
  inset: 0 0 auto 72px;
  z-index: 40;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
}
#view-main > .app-logo {
  position: fixed;
  z-index: 43;
  left: 20px;
  top: 14px;
  width: 31px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #ff0033;
  box-shadow: 0 3px 10px rgba(255, 0, 51, .16);
}
#view-main > .app-logo svg { width: 13px; height: 13px; fill: #fff; }
#view-main > .app-logo.has-img { background: none; box-shadow: none; }
#view-main > .app-logo img { max-width: 31px; max-height: 23px; object-fit: contain; }
.brand {
  color: #111827;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -.015em;
  white-space: nowrap;
}
#view-main > header nav {
  position: fixed;
  inset: 52px auto 0 0;
  z-index: 39;
  width: 72px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 8px;
  border-right: 1px solid var(--line);
  background: #fff;
}
#view-main > header nav button {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #7a8496;
  font-size: 10px;
}
#view-main > header nav button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#view-main > header nav button:hover { background: #f5f7fa; color: #43506a; }
#view-main > header nav button.active {
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-weight: 700;
}
#view-main > header nav button.active::before {
  content: "";
  position: absolute;
  left: -8px;
  width: 3px;
  height: 25px;
  border-radius: 0 4px 4px 0;
  background: var(--blue);
}
.legend { display: none; }
.workspace-note {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}
.header-through {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #667085;
  font-size: 11px;
  white-space: nowrap;
}
.header-through:empty::before { display: none; }   /* 后期账号不加载报表，没有截止日 */
.header-through::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3b82f6;
}
.who {
  padding-left: 14px;
  border-left: 1px solid var(--line);
  color: #475467;
  font-size: 12px;
  font-weight: 650;
}
#btn-logout, #btn-lang, #btn-password {
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: #475467;
  font-size: 12px;
}
#btn-logout:hover, #btn-lang:hover, #btn-password:hover { border-color: var(--line-strong); background: var(--surface-soft); }
#view-main > main {
  max-width: none;
  margin: 0 0 0 72px;
  padding: 69px 24px 36px;
}
#page-admin { max-width: 1180px; margin-inline: auto; }

/* ── 通用总览 / 管理组件 ─────────────────────────────── */
.datestamp { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.card, .panel {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.card { padding: 15px 17px; border-top: 3px solid var(--line); }
.card.views { border-top-color: var(--views); }
.card.money { border-top-color: var(--money); }
.card.subs { border-top-color: var(--subs); }
.card .s { color: var(--muted); font-size: 12px; }
.card .v {
  margin-top: 2px;
  font-size: 24px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
}
.card .d { margin-top: 2px; font-size: 12px; }
.trend-up { color: var(--up); }
.trend-down { color: var(--down); }
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.panel { margin-bottom: 14px; padding: 16px 18px; }
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.panel-head h2 { margin: 0; font-size: 14px; font-weight: 700; }
.chart-box { position: relative; height: 240px; }
.chart-box.tall { height: 300px; }
.chart-box.bars { height: 420px; }
/* 总览分组趋势与收益构成同排同高，图例在右侧竖排；标题与按钮各占一头不换行 */
#ov-trend-panel .panel-head, #ov-total-panel .panel-head { flex-wrap: nowrap; }
#ov-total-panel.collapsed .panel-head { margin-bottom: 0; }
#ov-total-panel.collapsed .chart-box { display: none; }
#ov-trend-panel .chart-box, #ov-pie-panel .chart-box { height: 400px; }
.ov-trend-copy { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; min-width: 0; }
.ov-trend-copy .muted { overflow: hidden; text-overflow: ellipsis; }
.ov-trend-ctl { display: flex; gap: 8px; flex-shrink: 0; }
.seg {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.seg button {
  padding: 6px 14px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted);
}
.seg button.active { background: var(--blue-soft); color: var(--blue-dark); }
#hp-table { width: 100%; border-collapse: collapse; }
#hp-table th, #hp-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
#hp-table th { color: var(--muted); font-size: 12px; font-weight: 650; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  background: var(--up-bg);
  color: var(--up);
  font-size: 12px;
}
.badge.bad { background: var(--down-bg); color: var(--down); }
tr.alert td { background: #fff8f5; }
.assign-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr auto;
  gap: 10px;
  align-items: center;
}
.assign-row input, .assign-row select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
}
.assign-row button, #btn-sync-emp {
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
}
.assign-row button.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}
.pf-form { margin-top: 12px; }
.pf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.pf-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}
.pf-grid input, .pf-grid select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
}
.pf-wide { grid-column: span 2; }
.pf-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.pf-actions button {
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--blue);
  border-radius: 7px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}

/* ── 数据页标题 / 时间 ───────────────────────────────── */
#page-table { color: var(--ink); }
.yt-titlebar {
  min-height: 82px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.yt-titlecopy h1 {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 28px;
  font-weight: 740;
  letter-spacing: -.035em;
}
.yt-sp { flex: 1; }
#yt-range, #yt-month, #yt-from, #yt-to, #yt-export,
#ov-range, #ov-month, #ov-from, #ov-to {
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(16, 24, 40, .02);
  font-size: 12px;
  font-weight: 600;
}
#yt-range, #ov-range { min-width: 132px; padding: 0 30px 0 10px; }
#yt-month, #yt-from, #yt-to,
#ov-month, #ov-from, #ov-to { padding: 0 8px; font-weight: 500; }
#yt-from.date-invalid, #ov-from.date-invalid {
  border-color: var(--down);
  background: var(--down-bg);
}
#yt-month-box, #yt-custom-box, #ov-month-box, #ov-custom-box {
  height: 34px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
#yt-export {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
}
#yt-export svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#yt-range:hover, #yt-export:hover, #ov-range:hover {
  border-color: #b9c4d2;
  background: #fcfdff;
}
.yt-periods {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 12px;
  color: #344054;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.yt-periods span { color: var(--muted); }
.yt-periods strong { font-weight: 650; }
.yt-periods .compare, .yt-periods .compare + strong { color: #7c8798; }
.yt-dim { color: var(--subtle); }
.yt-up { color: var(--up); }
.yt-down { color: var(--down); }
.yt-single-day {
  display: inline-flex;
  align-items: center;
  height: 24px;
  color: var(--subtle);
  font-size: 11px;
}

/* ── 指标切换 ────────────────────────────────────────── */
.yt-cards {
  min-height: 92px;
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--shadow);
}
.yt-mcard {
  position: relative;
  min-width: 0;
  padding: 13px 19px 11px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  text-align: left;
}
.yt-mcard:last-child { border-right: 0; }
.yt-mcard:hover { background: #fbfcfe; }
.yt-mcard.on { background: var(--blue-faint); }
.yt-mcard.on::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--blue);
}
.yt-mtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.yt-mcard .lbl { color: #5e6b7f; font-size: 12px; font-weight: 650; }
.yt-mcard.on .lbl { color: var(--blue-dark); }
.yt-mcard .scope { color: var(--subtle); font-size: 10.5px; white-space: nowrap; }
.yt-mbottom {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 13px;
}
.yt-mcard .big {
  font-size: 25px;
  line-height: 30px;
  font-weight: 740;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
}
.yt-mcard .delta { font-size: 11px; font-weight: 700; white-space: nowrap; }
.yt-mcard .caption { margin-top: 0; color: var(--subtle); font-size: 10.5px; }

/* ── 当前指标整体趋势 ────────────────────────────────── */
.yt-trendpanel {
  margin-top: 12px;
  padding: 0 16px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--shadow);
}
.yt-trendhead {
  min-height: 58px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #edf0f4;
}
.yt-trendtitle { display: flex; align-items: baseline; gap: 9px; }
.yt-trendtitle h2 { margin: 0; font-size: 13px; font-weight: 720; }
.yt-trendtitle span { color: var(--muted); font-size: 11px; }
.yt-trendstats { align-self: stretch; display: flex; margin-left: auto; }
.yt-trendstats > div {
  min-width: 116px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 16px;
  border-left: 1px solid #edf0f4;
}
.yt-trendstats span { color: var(--muted); font-size: 10px; }
.yt-trendstats strong {
  color: #273348;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.yt-overall-chart { position: relative; height: 170px; padding-top: 8px; }

/* ── 频道筛选 ────────────────────────────────────────── */
.yt-filterbar {
  min-height: 55px;
  margin-top: 12px;
  padding: 9px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
}
.yt-filterrow { min-width: 0; display: flex; align-items: center; gap: 7px; }
.yt-searchwrap {
  width: 290px;
  height: 33px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fbfcfd;
}
.yt-searchwrap:focus-within {
  border-color: #8db8f8;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .08);
}
.yt-searchwrap svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #7b8798;
  stroke-width: 1.8;
  stroke-linecap: round;
}
#yt-q {
  width: 100%;
  min-width: 0;
  height: 31px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12px;
}
#yt-q::placeholder { color: #98a2b3; }
.yt-filterrow select {
  min-width: 128px;
  height: 33px;
  padding: 0 30px 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: #4d5a70;
  font-size: 12px;
}
.yt-filterrow select:hover { border-color: var(--line-strong); }
.yt-filtergrow { flex: 1; }
.yt-linkbtn {
  height: 30px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: #61708a;
  font-size: 11px;
}
.yt-linkbtn:hover { color: var(--blue-dark); }
.yt-more {
  height: 33px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: #56657b;
  font-size: 11px;
}
.yt-more:hover { border-color: var(--line-strong); background: #fbfcfd; }
.yt-filterbar #yt-count {
  margin-left: auto;
  padding-right: 4px;
  color: #667085;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

/* ── 排行数据表 ──────────────────────────────────────── */
.yt-tablewrap {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  box-shadow: var(--shadow);
}
.yt-tabletoolbar {
  height: 46px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.yt-tabletoolbar h2 { margin: 0 16px 0 0; font-size: 12px; font-weight: 750; }
.yt-view-modes { display: flex; align-items: center; gap: 2px; }
.yt-view-modes button {
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #667085;
  font-size: 11px;
}
.yt-view-modes button:hover { background: #f5f7fa; color: #344054; }
.yt-view-modes button.active {
  background: var(--blue-soft);
  color: var(--blue-dark);
  font-weight: 700;
}
.yt-tablescroll {
  max-height: min(680px, calc(100vh - 170px));
  min-height: 280px;
  overflow: auto;
  scrollbar-color: #cbd3df transparent;
  scrollbar-width: thin;
}
#yt-table {
  width: 100%;
  min-width: 1120px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
#yt-table col.rank { width: 6%; }
#yt-table col.channel { width: 24%; }
#yt-table col.trend { width: 11%; }
#yt-table col.current { width: 19%; }
#yt-table col.delta { width: 12%; }
#yt-table col.publish { width: 14%; }
#yt-table col.total { width: 14%; }
#yt-table th, #yt-table td {
  height: 58px;
  padding: 0 13px;
  border-bottom: 1px solid #edf0f4;
  vertical-align: middle;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#yt-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 40px;
  background: #f8fafc;
  color: #647085;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  border-bottom-color: var(--line-strong);
}
#yt-table thead th.ch, #yt-table tbody td.ch, #yt-table tfoot td.ch {
  text-align: left;
}
#yt-table thead th.rank, #yt-table tbody td.rank, #yt-table tfoot td.rank {
  text-align: center;
}
#yt-table thead th.trend, #yt-table tbody td.trend { text-align: center; }
#yt-table th[data-sort] { cursor: pointer; user-select: none; }
#yt-table th[data-sort]:hover { color: #26364f; background: #f3f6fa; }
#yt-table th[aria-sort] { color: #26364f; }
#yt-table tbody tr { cursor: pointer; }
#yt-table tbody tr:hover { background: #f8fbff; }
#yt-table tbody tr:focus-visible {
  position: relative;
  z-index: 2;
  outline: 2px solid #8db8f8;
  outline-offset: -2px;
}
#yt-table tbody .yt-emptyrow { cursor: default; }
#yt-table tbody .yt-emptyrow:hover { background: #fff; }
#yt-table tbody .yt-emptyrow td {
  height: 112px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.yt-rank { display: block; color: #667085; font-size: 12px; font-weight: 700; }
.yt-rank.top { color: #2f4d78; }
.yt-rankmove {
  display: block;
  margin-top: 1px;
  color: #98a2b3;
  font-size: 9.5px;
  font-weight: 650;
}
.yt-rankmove.up { color: var(--up); }
.yt-rankmove.down { color: var(--down); }
.yt-chcell { min-width: 0; display: flex; align-items: center; }
.yt-ava {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.yt-ava img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ava-indigo { background: linear-gradient(145deg, #4267d5, #243e9f); }
.ava-teal { background: linear-gradient(145deg, #329b92, #176e68); }
.ava-rose { background: linear-gradient(145deg, #d0596f, #9e314c); }
.ava-blue { background: linear-gradient(145deg, #4d78dd, #2d4da8); }
.ava-orange { background: linear-gradient(145deg, #d58645, #a85522); }
.ava-cyan { background: linear-gradient(145deg, #2c9eac, #176472); }
.ava-purple { background: linear-gradient(145deg, #ab5aa8, #713b7c); }
.ava-slate { background: linear-gradient(145deg, #63798f, #34495e); }
.yt-chcopy { min-width: 0; margin-left: 10px; line-height: 1.15; }
.yt-chname {
  max-width: 100%;
  overflow: hidden;
  color: #202b3c;
  font-size: 12.5px;
  font-weight: 680;
  text-overflow: ellipsis;
}
.yt-chmeta {
  margin-top: 3px;
  overflow: hidden;
  color: #7c8799;
  font-size: 11px;
  text-overflow: ellipsis;
}
.yt-chmeta .owner { color: #56657b; font-weight: 650; }
.yt-metadot { margin: 0 4px; color: #c2c8d1; }
.yt-ypp {
  margin-left: 6px;
  padding: 1px 4px;
  border-radius: 3px;
  background: #edf8f4;
  color: var(--up);
  font-size: 9px;
  font-weight: 750;
}
#yt-table td.trend svg { width: 108px; height: 25px; overflow: visible; }
.yt-groupname { display: block; color: #273348; font-size: 12.5px; }
.yt-groupcount {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10.5px;
}
#yt-table tbody tr.yt-group-row { cursor: default; }
.yt-big, .yt-summary {
  color: #172033;
  font-size: 13px;
  font-weight: 720;
  text-align: right;
  letter-spacing: -.01em;
}
.yt-valueblock { text-align: right; }
.yt-share {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 450;
}
/* 是否达到均值：数字前的小圆点，绿=达到，灰=低于 */
.yt-avgdot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: 1px;
}
.yt-avgdot.up { background: var(--up); }
.yt-avgdot.down { background: #c3c9d4; }
.yt-delta-stack > span { display: block; font-size: 11px; font-weight: 720; }
.yt-delta-stack small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
}
.yt-cadence { text-align: right; }
.yt-cadence strong { display: block; color: #344054; font-size: 11.5px; }
.yt-cadence small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 10px;
}
.yt-cadence.stale strong, .yt-cadence.stale small { color: var(--down); }
.yt-gray { color: #667085; font-size: 12px; text-align: right; }
#yt-table tbody tr:not(.yt-emptyrow) td:not(.ch):not(.rank):not(.trend) { text-align: right; }
#yt-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 4;
  height: 45px;
  border-top: 1px solid var(--line-strong);
  border-bottom: 0;
  background: #f9fbfd;
  font-weight: 680;
  text-align: right;
}
#yt-table tfoot tr.yt-filt td {
  position: static;
  background: #fff9ed;
  color: #5d4a1f;
}
.yt-note { margin: 8px 2px 0; color: #7d8797; font-size: 11px; }

/* ── 频道详情 ────────────────────────────────────────── */
.yt-ovl {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 16px;
  background: rgba(15, 23, 42, .46);
  backdrop-filter: blur(2px);
}
.yt-dpanel {
  width: min(900px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 22px 24px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 13px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-dialog);
}
.yt-dhead { display: flex; align-items: center; gap: 14px; }
.yt-dhead .yt-ava { width: 44px; height: 44px; font-size: 16px; }
.yt-dhead h2 { margin: 0; font-size: 20px; font-weight: 720; letter-spacing: -.02em; }
#yd-close {
  height: 32px;
  margin-left: auto;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fafc;
  color: #475467;
}
#yd-close:hover { background: #f1f4f8; }
#yd-sub { margin: 6px 0 0 58px; }
.yt-dstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 8px; }
.yt-dstat {
  position: relative;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  text-align: left;
}
.yt-dstat.on { border-color: #bfd3fb; background: var(--blue-faint); }
.yt-dstat.on::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: 9px 9px 0 0;
  background: var(--blue);
}
.yt-dstat .lbl { color: var(--muted); font-size: 12px; font-weight: 650; }
.yt-dstat .big { margin-top: 2px; font-size: 20px; font-weight: 720; font-variant-numeric: tabular-nums; }
.yt-dstat .sub { margin-top: 3px; color: var(--muted); font-size: 11.5px; }
.yt-chartbox { position: relative; height: 270px; margin-top: 6px; }

/* ── 频道视频信息 ────────────────────────────────────── */
#nav-videos span { line-height: 1.05; }
#page-videos { color: var(--ink); }
.video-page-titlebar { margin-bottom: 12px; }
.video-picker-card,
.video-tablewrap {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.video-picker-card { max-width: 1120px; margin-inline: auto; }
.video-picker-head {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.video-picker-head h2 { margin: 0; font-size: 14px; font-weight: 750; }
.video-channel-search { width: 320px; }
.video-page-state {
  display: none;
  min-height: 74px;
  padding: 24px 18px;
  color: var(--muted);
  text-align: center;
}
.video-page-state.show { display: block; }
.video-page-state.error { color: var(--down); }
.video-channel-list { padding: 4px 16px 12px; }
.video-channel-head,
.video-channel-row {
  display: grid;
  grid-template-columns: minmax(300px, 2fr) minmax(110px, .7fr)
                         minmax(180px, 1fr) 72px;
  align-items: center;
  gap: 12px;
}
.video-channel-head {
  min-height: 38px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 680;
}
.video-channel-row {
  width: 100%;
  min-height: 64px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid #edf0f4;
  border-radius: 0;
  background: transparent;
  text-align: left;
}
.video-channel-row:last-child { border-bottom: 0; }
.video-channel-row:hover { background: #f8faff; }
.video-channel-identity { min-width: 0; display: flex; align-items: center; }
.video-channel-identity .yt-ava { width: 40px; height: 40px; flex: 0 0 auto; }
.video-channel-copy { min-width: 0; margin-left: 10px; }
.video-channel-name {
  display: block;
  overflow: hidden;
  color: #243044;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-channel-alias {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-channel-detail { color: #475467; font-size: 12px; }
.video-channel-detail strong { color: #344054; font-weight: 680; }
.video-channel-enter { justify-self: end; color: var(--blue-dark); font-size: 12px; font-weight: 700; }

.video-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}
.video-breadcrumb button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue-dark);
}
.video-list-titlebar { align-items: center; }
.video-list-titlebar > .yt-ava { width: 42px; height: 42px; flex: 0 0 auto; }
.video-list-titlebar select,
.video-list-titlebar input,
.video-list-titlebar button,
.video-filterbar select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
}
.video-list-titlebar button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
}
.video-list-titlebar button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.video-cadence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.video-cadence-card {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}
.video-cadence-card .label { color: var(--muted); font-size: 11px; font-weight: 650; }
.video-cadence-card .value { margin-top: 1px; font-size: 21px; font-weight: 740; font-variant-numeric: tabular-nums; }
.video-cadence-card .sub { color: var(--muted); font-size: 11px; }
.video-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}
.video-metrics button {
  position: relative;
  min-height: 64px;
  padding: 10px 14px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: #5e6b7f;
  text-align: left;
  font-size: 12px;
  font-weight: 680;
}
.video-metrics button:last-child { border-right: 0; }
.video-metrics button.on { background: var(--blue-faint); color: var(--blue-dark); }
.video-metrics button.on::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--blue);
}
.video-metric-value { display: block; margin-top: 2px; color: var(--ink); font-size: 19px; font-weight: 740; font-variant-numeric: tabular-nums; }
.video-filterbar {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 9px 9px 0 0;
  background: #fff;
}
.video-filterbar .yt-searchwrap { width: 310px; }
.video-tablewrap { border-radius: 0 0 9px 9px; box-shadow: none; }
.video-tablescroll { overflow: auto; }
#video-table { width: 100%; min-width: 1120px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
#video-table col.rank { width: 46px; }
#video-table col.video { width: 390px; }
#video-table col.published { width: 92px; }
#video-table col.duration { width: 70px; }
#video-table col.trend { width: 145px; }
#video-table col.current { width: 110px; }
#video-table col.delta { width: 102px; }
#video-table col.total { width: 115px; }
#video-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 42px;
  padding: 0 9px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--surface-soft);
  color: var(--muted);
  text-align: left;
  font-size: 11px;
  font-weight: 680;
  white-space: nowrap;
}
#video-table th.num,
#video-table td.num { text-align: right; }
#video-table td { height: 72px; padding: 7px 9px; border-bottom: 1px solid #edf0f4; vertical-align: middle; }
#video-table tbody tr:hover td { background: #f9fbff; }
.video-rank { color: var(--muted); text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.video-cell { min-width: 0; display: flex; align-items: center; }
.video-thumb {
  position: relative;
  width: 96px;
  height: 54px;
  flex: 0 0 auto;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #eef1f5;
  color: var(--subtle);
}
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.video-copy { min-width: 0; margin-left: 10px; }
.video-title {
  overflow: hidden;
  color: #243044;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.video-filename { overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.video-performance {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 9px;
  font-weight: 750;
  vertical-align: 1px;
}
.video-performance.good { background: var(--up-bg); color: var(--up); }
.video-performance.attention { background: var(--down-bg); color: var(--down); }
.video-performance.steady { background: #f1f4f8; color: #526077; }
.video-status { margin-left: 5px; color: var(--amber, #b26708); font-size: 10px; }
.video-number { font-weight: 720; font-variant-numeric: tabular-nums; }
.video-pagination {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  padding: 7px 12px;
  background: #fff;
}
.video-pagination button {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  color: #475467;
  font-size: 12px;
}
.video-pagination button.on { border-color: #a9c5fb; background: var(--blue-soft); color: var(--blue-dark); font-weight: 700; }
.video-pagination button:disabled { color: var(--subtle); background: #f8f9fb; }
.video-pagination .summary { margin-right: 5px; color: var(--muted); font-size: 11px; }

/* ── 尺寸与动效 ──────────────────────────────────────── */
@media (max-width: 1180px) {
  #view-main > header { padding-inline: 16px; }
  #view-main > main { padding-inline: 16px; }
  .workspace-note { display: none; }
  .header-through { display: none; }
  /* 截止日隐藏后由「显示」下拉把右侧控件推到最右，不贴着左边的公司名 */
  .ui-size-picker { margin-left: auto; }
  .yt-filterrow select { min-width: 112px; }
  .yt-searchwrap { width: 220px; }
  .video-channel-search { width: 280px; }
  .video-channel-head,
  .video-channel-row { grid-template-columns: minmax(260px, 2fr) 110px minmax(150px, 1fr) 62px; }
}
@media (max-height: 800px) {
  .yt-tablescroll {
    min-height: 192px;
    max-height: calc(100vh - 400px);
  }
}
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .assign-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  button, select, input, #yt-table tbody tr {
    transition: color .12s ease, background-color .12s ease,
                border-color .12s ease, box-shadow .12s ease;
  }
}

/* 数据管道横幅（仅管理员、仅异常时出现）；插在正文区顶部，在固定顶栏之下 */
.pipeline-banner {
  margin-bottom: 12px;
  padding: 8px 16px;
  background: #fef7e0;
  color: #b06000;
  border: 1px solid #f0e0b0;
  border-radius: 8px;
  font-size: 13px;
}

/* ── 频道管理（列表 + 右侧编辑抽屉） ─────────────────── */

/* ── 全站可读性与三档显示大小 ───────────────────────── */
button, input, select, textarea {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI",
               system-ui, sans-serif;
}
.muted, .yt-muted, .hint, .error { font-size: var(--ui-small); }

/* 应用外壳 */
#view-main::before { width: var(--ui-nav); height: var(--ui-header); }
#view-main > header {
  left: var(--ui-nav);
  height: var(--ui-header);
  padding-inline: var(--ui-page-pad);
}
#view-main > .app-logo {
  left: calc((var(--ui-nav) - 31px) / 2);
  top: calc((var(--ui-header) - 23px) / 2);
}
#view-main > header nav {
  inset: var(--ui-header) auto 0 0;
  width: var(--ui-nav);
}
#view-main > header nav button {
  width: calc(var(--ui-nav) - 16px);
  height: var(--ui-nav-button);
  font-size: var(--ui-caption);
}
.brand { font-size: var(--ui-base); font-weight: 700; }
.workspace-note, .who, #btn-logout, #btn-lang, #btn-password { font-size: var(--ui-small); }
.who { font-weight: 600; }
#btn-logout, #btn-lang, #btn-password { height: calc(var(--ui-control) - 4px); }
#view-main > main {
  margin-left: var(--ui-nav);
  padding: var(--ui-main-top) var(--ui-page-pad) 38px;
}
.ui-size-picker {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--ui-caption);
  white-space: nowrap;
}
.ui-size-picker select {
  width: 78px;
  height: calc(var(--ui-control) - 4px);
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  color: #475467;
  font-size: var(--ui-small);
  font-weight: 600;
}
/* 英文选项（Medium）比中文宽，78px 放不下 */
html[lang="en"] .ui-size-picker select { width: 96px; }

/* 登录、卡片、管理表格 */
.login-card { padding: calc(var(--ui-panel-pad) * 2.1) calc(var(--ui-panel-pad) * 2.3); }
.login-card label, .hint { font-size: var(--ui-small); }
.login-eyebrow { font-size: var(--ui-caption); }
.tab.active { font-weight: 600; }
.login-card input, .login-card button.primary, .tab {
  height: calc(var(--ui-control) + 2px);
  font-size: var(--ui-base);
}
.card { padding: var(--ui-panel-pad); }
.panel { padding: var(--ui-panel-pad) calc(var(--ui-panel-pad) + 2px); }
.card .s, .card .d, .datestamp, .panel-head .muted {
  font-size: var(--ui-small);
}
.card .v { font-size: calc(var(--ui-base) * 1.75); font-weight: 700; }
.panel-head h2 { font-size: var(--ui-base); }
#hp-table th { font-size: var(--ui-small); font-weight: 600; }
#hp-table th, #hp-table td { padding: calc(var(--ui-panel-pad) * .55); }
.badge { font-size: var(--ui-small); }
.assign-row input, .assign-row select, .assign-row button, #btn-sync-emp,
.pf-grid input, .pf-grid select, .pf-actions button {
  height: var(--ui-control);
}
.pf-grid label { font-size: var(--ui-small); }
.pf-grid input, .pf-grid select { font-size: var(--ui-base); }

/* 数据页 */
.yt-titlebar { min-height: calc(var(--ui-control) + 48px); }
.yt-titlecopy h1 { font-size: calc(var(--ui-base) * 1.72); font-weight: 700; }
.header-through, .yt-periods { font-size: var(--ui-small); }
#yt-range, #yt-month, #yt-from, #yt-to, #yt-export,
#yt-month-box, #yt-custom-box,
#ov-range, #ov-month, #ov-from, #ov-to, #ov-month-box, #ov-custom-box {
  height: var(--ui-control);
  font-size: var(--ui-small);
}
.yt-cards { min-height: calc(var(--ui-control) * 2.55); }
.yt-mcard { padding: var(--ui-panel-pad) calc(var(--ui-panel-pad) + 2px); }
.yt-mcard .lbl { font-size: var(--ui-small); font-weight: 600; }
.yt-mcard .scope, .yt-mcard .caption { font-size: var(--ui-caption); }
.yt-mcard .big { font-size: calc(var(--ui-base) * 1.82); font-weight: 700; }
.yt-mcard .delta { font-size: var(--ui-caption); }
.yt-trendtitle h2 { font-size: var(--ui-small); }
.yt-trendtitle span, .yt-trendstats span { font-size: var(--ui-caption); }
.yt-trendstats strong { font-size: var(--ui-small); }
.yt-filterbar { min-height: calc(var(--ui-control) + 18px); }
.yt-searchwrap, .yt-filterrow select { height: var(--ui-control); }
#yt-q { height: calc(var(--ui-control) - 2px); font-size: var(--ui-small); }
.yt-filterrow select { font-size: var(--ui-small); }
.yt-more { height: var(--ui-control); font-size: var(--ui-caption); }
.yt-linkbtn, .yt-filterbar #yt-count { font-size: var(--ui-caption); }
.yt-tabletoolbar { height: calc(var(--ui-control) + 10px); }
.yt-tabletoolbar h2 { font-size: var(--ui-small); font-weight: 700; }
.yt-view-modes button { height: calc(var(--ui-control) - 4px); font-size: var(--ui-caption); }
.yt-note { font-size: var(--ui-caption); }
#yt-table th, #yt-table td { height: var(--ui-table-row); }
#yt-table thead th { height: calc(var(--ui-control) + 4px); font-size: var(--ui-small); }
.yt-rank, .yt-gray { font-size: var(--ui-small); }
.yt-rankmove, .yt-share, .yt-delta-stack small, .yt-cadence small,
.yt-groupcount { font-size: var(--ui-caption); }
.yt-chname { font-size: var(--ui-base); font-weight: 600; }
.yt-chmeta { font-size: var(--ui-caption); }
.yt-chmeta .owner { font-weight: 600; }
.yt-chcopy { line-height: 1.25; }
.yt-ypp { font-size: max(10px, var(--ui-caption)); font-weight: 700; }
.yt-big, .yt-summary { font-size: var(--ui-base); font-weight: 700; }
.yt-delta-stack > span, .yt-cadence strong { font-size: var(--ui-small); font-weight: 700; }
#yt-table tfoot td { height: var(--ui-table-row); font-weight: 600; }

/* 详情弹层 */
.yt-dpanel { padding: calc(var(--ui-panel-pad) + 4px); }
.yt-dhead h2 { font-size: calc(var(--ui-base) * 1.4); font-weight: 700; }
#yd-close { height: calc(var(--ui-control) - 4px); }
.yt-dstat { padding: calc(var(--ui-panel-pad) * .75) var(--ui-panel-pad); }
.yt-dstat .lbl { font-size: var(--ui-small); font-weight: 600; }
.yt-dstat .big { font-size: calc(var(--ui-base) * 1.4); font-weight: 700; }
.yt-dstat .sub { font-size: var(--ui-caption); }

/* 视频页 */
.video-picker-head { min-height: calc(var(--ui-control) + 24px); }
.video-picker-head h2 { font-size: var(--ui-base); font-weight: 700; }
.video-page-state, .video-channel-detail, .video-channel-enter,
.video-breadcrumb { font-size: var(--ui-small); }
.video-channel-head { min-height: var(--ui-control); font-size: var(--ui-caption); font-weight: 600; }
.video-channel-row { min-height: var(--ui-channel-row); }
.video-channel-name, .video-title { font-size: var(--ui-base); }
.video-channel-alias, .video-filename { font-size: var(--ui-caption); }
.video-channel-detail strong, .video-list-titlebar button { font-weight: 600; }
.video-list-titlebar select, .video-list-titlebar input,
.video-list-titlebar button, .video-filterbar select { height: var(--ui-control); }
.video-cadence-card .label, .video-cadence-card .sub { font-size: var(--ui-caption); }
.video-cadence-card .value { font-size: calc(var(--ui-base) * 1.5); font-weight: 700; }
.video-metrics button { min-height: calc(var(--ui-channel-row) - 4px); font-size: var(--ui-small); font-weight: 600; }
.video-metric-value { font-size: calc(var(--ui-base) * 1.4); font-weight: 700; }
.video-filterbar { min-height: calc(var(--ui-control) + 16px); }
#video-table th { height: calc(var(--ui-control) + 6px); font-size: var(--ui-caption); font-weight: 600; }
#video-table td { height: calc(var(--ui-channel-row) + 4px); }
.video-rank { font-size: var(--ui-small); }
.video-performance { font-size: max(10px, var(--ui-caption)); font-weight: 700; }
.video-status, .video-pagination .summary { font-size: var(--ui-caption); }
.video-number { font-weight: 700; }
.video-pagination { min-height: calc(var(--ui-control) + 16px); }
.video-pagination button { height: calc(var(--ui-control) - 4px); font-size: var(--ui-small); }

/* 频道管理工作台 */
.cm-titlebar { min-height: calc(var(--ui-control) + 42px); }
.cm-titlebar h1 { font-size: calc(var(--ui-base) * 1.78); }
.cm-titlebar p { font-size: var(--ui-small); }
.cm-summary button {
  height: calc(var(--ui-control) - 4px);
  font-size: var(--ui-small);
}
.cm-summary strong { font-size: var(--ui-small); }
.cm-toolbar { min-height: calc(var(--ui-control) + 16px); }
.cm-search, .cm-toolbar select, .cm-more, .cm-refresh { height: var(--ui-control); }
.cm-search input, .cm-toolbar select, .cm-more, .cm-refresh { font-size: var(--ui-small); }
.cm-advanced label { font-size: var(--ui-caption); }
.cm-advanced select { height: calc(var(--ui-control) - 2px); font-size: var(--ui-small); }
.cm-workbench { height: calc(100vh - var(--cm-workbench-offset)); }
.cm-listhead { flex-basis: calc(var(--ui-control) + 4px); font-size: var(--ui-caption); font-weight: 600; }
.cm-row { min-height: var(--ui-channel-row); }
.cm-state, .cm-detailstate { font-size: var(--ui-small); }
.cm-rownum, .cm-meta, .cm-ownersub { font-size: var(--ui-caption); }
.cm-row.selected .cm-rownum { font-weight: 700; }
.cm-name { font-size: var(--ui-base); font-weight: 700; }
.cm-ownername { font-size: var(--ui-small); font-weight: 600; }
.cm-tags { font-size: var(--ui-small); }
.cm-tag.ypp, .cm-status { font-size: var(--ui-caption); font-weight: 700; }
.cm-detailtitle h2 { font-size: calc(var(--ui-base) * 1.18); }
.cm-detailtitle p, #cm-position { font-size: var(--ui-caption); }
.cm-recordnav button, .cm-back {
  height: calc(var(--ui-control) - 4px);
  font-size: var(--ui-caption);
  font-weight: 600;
}
.cm-sectiontitle h3 { font-size: var(--ui-base); font-weight: 700; }
.cm-sectiontitle span, .cm-owner-label, .cm-owner-current small,
.cm-pending, .cm-inline-msg, .cm-history, .cm-fields label,
.cm-savebar span { font-size: var(--ui-small); }
.cm-owner-label, .cm-fields label { font-weight: 600; }
.cm-owner-current strong { font-size: var(--ui-base); }
.cm-fieldgroup h4,
.cm-fieldgroup summary { font-size: var(--ui-small); }
.cm-owner-current button, .cm-owner-editor select,
.cm-owner-editor input, .cm-owner-editor button,
.cm-fields input, .cm-fields select, .cm-savebar button {
  height: var(--ui-control);
  font-size: var(--ui-small);
}
.cm-owner-current button, .cm-owner-editor button, .cm-savebar button {
  font-weight: 700;
}
.cm-fields textarea { font-size: var(--ui-small); }
.cm-danger strong { font-size: var(--ui-small); }
.cm-danger span, .cm-danger button { font-size: var(--ui-caption); }
.cm-danger button { height: calc(var(--ui-control) - 2px); font-weight: 700; }
.cm-savebar { flex-basis: calc(var(--ui-control) + 22px); }
.cm-modal-card h3 { font-size: calc(var(--ui-base) * 1.15); }
.cm-modal-card p, .cm-modal-card button, .cm-toast { font-size: var(--ui-small); }
.cm-modal-card button { height: var(--ui-control); }
.pw-card label { display: block; margin-top: 12px; color: var(--muted); font-size: var(--ui-small); }
.pw-card input { width: 100%; height: var(--ui-control); margin-top: 5px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 7px; }
.pw-card p.error { margin: 10px 0 12px; color: var(--down); }

@media (max-width: 1180px) {
  #view-main > header, #view-main > main { padding-inline: 16px; }
  .ui-size-picker > span { display: none; }
}
@media (max-height: 760px) {
  .cm-workbench { height: calc(100vh - var(--cm-workbench-offset) + 16px); }
}

/* 频道授权（员工自助，docs\设计稿-频道授权页.html） */
.ag-warnbar{margin:14px 0 0;padding:11px 15px;border:1px solid #ecd096;border-radius:10px;background:#fff6e7;color:#7a530a;font-size:var(--ui-small);font-weight:600}
.ag-card{margin-top:16px;padding:22px 24px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow)}
.ag-steps{display:flex;gap:8px;margin-bottom:20px}
.ag-step{flex:1;display:flex;gap:9px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface-soft);color:var(--muted);font-size:var(--ui-small)}
.ag-step b{width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center;border-radius:999px;background:#e7ecf3;font-size:11.5px}
.ag-step.on{border-color:#a9c5fb;background:var(--blue-soft);color:var(--blue-dark);font-weight:650}
.ag-step.on b{background:var(--blue);color:#fff}
.ag-step.done{color:var(--up)}
.ag-step.done b{background:var(--up-bg);color:var(--up)}
.ag-field{display:block;max-width:460px;margin:0 0 18px;color:var(--muted);font-size:var(--ui-small);font-weight:650}
.ag-field input,.ag-field select{width:100%;height:var(--ui-control);margin-top:6px;padding:0 12px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface-soft);font-size:var(--ui-base)}
.ag-bigbtn{height:46px;padding:0 26px;border:0;border-radius:10px;background:var(--blue);color:#fff;font-size:15px;font-weight:700}
.ag-bigbtn:hover{background:var(--blue-dark)}
.ag-hint{margin-top:18px;padding:13px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);color:#46536a;font-size:var(--ui-small)}
.ag-hint ol{margin:8px 0 0;padding-left:20px}
.ag-hint li{margin:5px 0}
.ag-hint summary{cursor:pointer;font-weight:700;color:var(--ink)}
.ag-hint p{margin:8px 0 0}
.ag-lead{margin:0 0 6px;font-size:var(--ui-base)}
.ag-fakebrowser{max-width:560px;margin:12px 0 16px;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden;box-shadow:var(--shadow)}
.ag-fb-bar{display:flex;align-items:center;gap:6px;height:38px;padding:0 10px;background:#eef1f5;border-bottom:1px solid var(--line)}
.ag-fb-bar i{width:9px;height:9px;border-radius:999px;background:#c7cfda}
.ag-fb-url{flex:1;height:26px;display:flex;align-items:center;padding:0 10px;margin-left:4px;border-radius:999px;background:#fff;border:2px solid var(--blue);font:12px Consolas,monospace;color:#333;white-space:nowrap;overflow:hidden}
.ag-fb-tip{padding:2px 8px;border-radius:6px;background:var(--blue);color:#fff;font-size:11px;font-weight:700;white-space:nowrap}
.ag-fb-body{padding:18px;background:#fff;color:var(--muted);font-size:var(--ui-small)}
.ag-fb-body b{display:block;margin-bottom:4px;color:#444;font-size:15px}
.ag-pastebar{display:flex;gap:10px;max-width:640px}
.ag-pastebar input{flex:1;height:44px;padding:0 13px;border:1.5px dashed var(--line-strong);border-radius:10px;background:var(--surface-soft);font:12.5px Consolas,monospace}
.ag-pastebar .ag-bigbtn{height:44px;font-size:14px}
.ag-note-line{margin:8px 0 0;color:var(--muted);font-size:var(--ui-caption)}
.ag-err{min-height:18px;margin:8px 0 0;color:var(--down);font-size:var(--ui-small);font-weight:600}
.ag-err:empty{margin:0}
.ag-actions{display:flex;gap:10px;margin-top:14px}
.ag-actions button:not(.ag-bigbtn){height:40px;padding:0 16px;border:1px solid var(--line-strong);border-radius:9px;background:#fff;font-size:var(--ui-small);font-weight:600}
.ag-spin{display:inline-block;width:18px;height:18px;margin-right:9px;border-radius:999px;border:3px solid #cfe0ff;border-top-color:var(--blue);vertical-align:-4px;animation:ag-rot .8s linear infinite}
@keyframes ag-rot{to{transform:rotate(360deg)}}
.ag-result{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:12px}
.ag-result.ok{border:1px solid #b7e3d4;background:var(--up-bg)}
.ag-result.err{border:1px solid #efc4bd;background:var(--down-bg)}
.ag-result-ico{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:999px;color:#fff;font-size:20px;font-weight:800}
.ag-result.ok .ag-result-ico{background:var(--up)}
.ag-result.err .ag-result-ico{background:var(--down)}
.ag-result h3{margin:2px 0 4px;font-size:15px}
.ag-result.ok h3{color:#0b5f4c}
.ag-result.err h3{color:#8b1d13}
.ag-result p{margin:0;font-size:var(--ui-small)}
.ag-result.ok p{color:#2c6e5d}
.ag-result.err p{color:#a04a40}
.ag-rec{width:100%;border-collapse:collapse;font-size:var(--ui-small)}
.ag-rec th{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);background:var(--surface-soft);color:var(--muted);font-size:var(--ui-caption)}
.ag-rec td{padding:10px;border-bottom:1px solid #eef1f5}
.ag-tag{padding:2px 8px;border-radius:999px;font-size:var(--ui-caption);font-weight:700}
.ag-tag.ok{background:var(--up-bg);color:var(--up)}
.ag-tag.fail{background:var(--down-bg);color:var(--down)}
.ag-tag.run{background:var(--blue-soft);color:var(--blue-dark)}

/* 账号与设置页员工表 */
#emp-table{margin-top:4px}
.emp-job{height:30px;padding:0 8px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;font-size:var(--ui-small)}
.emp-job.post{border-color:#a9c5fb;background:var(--blue-soft);color:var(--blue-dark);font-weight:700}
#emp-msg{min-height:1.4em;margin:8px 0 0}
/* 账号管理：表头按钮靠右、新建表单、密码一次性展示、机器展开行、行内小按钮 */
.emp-head-sp{flex:1}
#page-admin .panel-head{align-items:center}
/* 管理页按钮统一：普通白底圆角，主操作蓝底（与登录按钮、保存栏一致） */
#page-admin .panel-head button,#page-admin .emp-form button{height:var(--ui-control);padding:0 16px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;font-size:var(--ui-small);font-weight:600;color:var(--ink)}
#page-admin .panel-head button:hover,#page-admin .emp-form button:hover{background:var(--surface-soft)}
#page-admin button.primary{border-color:var(--blue);background:var(--blue);color:#fff}
#page-admin button.primary:hover{border-color:var(--blue-dark);background:var(--blue-dark)}
.emp-form{display:grid;grid-template-columns:200px 130px 110px 1fr auto auto;gap:10px;align-items:end;padding:12px 14px;margin-bottom:12px;border:1px solid #cfdcf4;border-radius:10px;background:var(--blue-soft)}
.emp-form label{display:grid;gap:4px;font-size:var(--ui-caption);color:var(--muted);font-weight:600}
.emp-form input,.emp-form select{height:30px;padding:0 10px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;font-size:var(--ui-small);font-weight:400;color:var(--ink)}
.emp-pw{display:flex;align-items:center;gap:14px;padding:10px 16px;margin-bottom:12px;border:1px solid #b7e3d4;border-radius:10px;background:var(--up-bg)}
.emp-pw>span:first-child{color:var(--up);font-weight:700}
.emp-pw code{padding:4px 10px;border-radius:7px;background:#fff;border:1px solid #b7e3d4;font:15px Consolas,monospace;letter-spacing:.04em;user-select:all}
.emp-btn{height:24px;padding:0 8px;border:1px solid var(--line-strong);border-radius:6px;background:#fff;font-size:var(--ui-caption);white-space:nowrap}
.emp-btn.danger{color:var(--down);border-color:#efc4bd}
.emp-btn.link{border-color:transparent;background:transparent;color:var(--blue-dark);border-bottom:1px dashed var(--line-strong);border-radius:0;padding:0 2px;font-variant-numeric:tabular-nums}
.emp-btn.link.full{color:#a96008}
.emp-ops{white-space:nowrap}
.emp-ops .emp-btn+.emp-btn{margin-left:6px}
#emp-table tr.off td{color:var(--subtle)}
#emp-table tr.emp-sub>td{background:var(--surface-soft);padding:6px 10px 10px 40px}
#co-table tr.co-sub>td{background:var(--surface-soft);padding:8px 10px 12px 40px}
#co-table tr.off td{color:var(--subtle)}
.co-features{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:8px}
.co-features label{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.co-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}
.co-row input[type=number]{width:90px}
.emp-btn.danger{color:#b42318;border-color:#f0b4ae}
.emp-machines{border-collapse:collapse;font-size:var(--ui-caption)}
.emp-machines th{text-align:left;padding:3px 14px 3px 0;color:var(--subtle);font-weight:500}
.emp-machines td{padding:3px 14px 3px 0;border:0}
.emp-max{width:52px;height:24px;padding:0 6px;border:1px solid var(--line-strong);border-radius:6px}
/* 翻译 Key：表单沿用 emp-form，列数不同 */
.key-form{grid-template-columns:1fr auto;margin:12px 0 0}
.key-form.bl{grid-template-columns:1fr auto auto}
.key-form textarea{min-height:56px;padding:6px 10px;border:1px solid var(--line-strong);border-radius:7px;background:#fff;font:var(--ui-small)/1.5 Consolas,monospace;color:var(--ink);resize:vertical}
#key-msg{min-height:1.4em;margin:8px 0 0}

/* 展示模式：隐藏收益/发布/筛选等界面残留（数据已在服务端脱敏，
   这里只是不显示空控件；权限出口在服务端 /api/demo/table） */
body.demo-mode #yt-export,
body.demo-mode #yt-f-op,
body.demo-mode #yt-more,
body.demo-mode #yt-extra-filters,
body.demo-mode #yt-view-modes button[data-mode="owner"],
body.demo-mode #yt-view-modes button[data-mode="content_type"],
body.demo-mode #ov-pie-panel,
body.demo-mode #ov-total-panel,
body.demo-mode #ov-dim-seg,
body.demo-mode #trend-metric-seg,
body.demo-mode #bar-seg button[data-metric="revenue"],
body.demo-mode #yt-table th:nth-child(6),
body.demo-mode #yt-table td:nth-child(6){display:none}
/* 第 6 列单元格隐藏后其余单元格左移一格，colgroup 最后一列空出来，归零防右侧空白条 */
body.demo-mode #yt-table col.total{width:0}
body.demo-mode .grid-2{grid-template-columns:1fr}

/* 商务模式：比展示模式多保留 收益、类型/男女频 筛选、内容类型汇总、总览的
   全部图表；同样只是不显示，权限出口在服务端 /api/biz/* */
body.biz-mode #yt-export,
body.biz-mode #yt-f-op,
body.biz-mode #yt-more,
body.biz-mode #yt-f-set,
body.biz-mode #yt-f-ypp,
body.biz-mode #yt-f-dub,
body.biz-mode #yt-f-pub,
body.biz-mode #yt-f-delta,
body.biz-mode #yt-f-avg,
body.biz-mode #yt-view-modes button[data-mode="owner"],
body.biz-mode #ov-dim-seg button[data-dim="owner"],
body.biz-mode #yt-table th:nth-child(6),
body.biz-mode #yt-table td:nth-child(6){display:none}
body.biz-mode #yt-table col.total{width:0}
/* 显示频道名的商务账号：频道名 / 频道 ID / 标签三行，上下留白不贴格线 */
body.biz-mode #yt-table tbody td.ch{padding-top:7px;padding-bottom:7px}
/* 商务模式只剩语种、类型、男女频三个下拉，与搜索框排成一行；计数与清除仍在最右 */
body.biz-mode .yt-filterbar{flex-direction:row;align-items:center;gap:7px}
body.biz-mode .yt-filterbar .yt-filterrow{display:contents}
body.biz-mode .yt-filtergrow,body.biz-mode #yt-count,body.biz-mode #yt-clear{order:1}
body.biz-mode .grid-2{grid-template-columns:1fr}

/* 频道名下的标签：小色块。语种用固定标志色（app.js 的 LANG_COLORS，--lc / --lc-bg），
   类型灰、女频粉、男频青、混合紫；排名放大，前三名金银铜 */
.yt-chmeta { display: flex; align-items: center; gap: 4px; margin-top: 4px; overflow: hidden; }
.yt-metadot { display: none; }
.yt-chmeta .owner { margin-right: 2px; color: #344054; font-weight: 700; }
.yt-chmeta .lang, .yt-chmeta .ctype, .yt-chmeta .gender {
  padding: 1px 5px; border-radius: 4px; font-size: 10px; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.yt-chmeta .lang { background: var(--lc-bg); color: var(--lc); }
.yt-chmeta .ctype { background: #f0f2f5; color: #4b5565; }
.yt-chmeta .gender-female { background: #fdeaf1; color: #b03a63; }
.yt-chmeta .gender-male { background: #e6f4f9; color: #1f6f8b; }
.yt-chmeta .gender-mixed { background: #f3eefc; color: #6b4ba3; }
.yt-ypp { margin-left: 0; padding: 1px 5px; font-size: 10px; }
.yt-rank { font-size: 15px; font-weight: 800; color: #98a2b3; }
.yt-rank.r1 { color: #c9a227; }
.yt-rank.r2 { color: #8c96a5; }
.yt-rank.r3 { color: #b87333; }