:root {
  color-scheme: light;
  --navy: #14243b;
  --navy-deep: #101e31;
  --navy-soft: #233751;
  --ink: #17283f;
  --muted: #718094;
  --subtle: #9ba7b5;
  --canvas: #f6f7f5;
  --surface: #fff;
  --line: #e6eaf0;
  --line-soft: #f0f2f5;
  --blue: #285bd4;
  --blue-deep: #1949b5;
  --blue-wash: #edf3ff;
  --mint: #168667;
  --mint-wash: #eaf8f2;
  --amber: #a86b20;
  --amber-wash: #fff5e7;
  --red: #bf5a50;
  --shadow: 0 10px 32px rgb(24 42 69 / 4%);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--canvas); color: var(--ink); font-size: 14px; line-height: 1.5; }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid #86a9ff; outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.number, .kpi-value, .change, .period-meta, .chart-value, .drawer-metrics { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; display: flex; flex-direction: column; width: 216px; padding: 28px 15px 19px; background: var(--navy); color: #d8e1ec; }
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 13px 31px; color: #fff; font-size: 17px; font-weight: 700; letter-spacing: .01em; line-height: 1.15; }
.brand-sub { display: block; margin-top: 5px; color: #91a5bf; font-size: 11px; font-weight: 400; letter-spacing: .08em; }
.brand-mark { display: flex; align-items: end; gap: 3px; width: 32px; height: 32px; padding: 8px 7px; border-radius: 7px; background: #3571ed; }
.brand-mark i { display: block; width: 4px; border-radius: 1px; background: #fff; }
.brand-mark i:nth-child(1) { height: 9px; opacity: .7; }
.brand-mark i:nth-child(2) { height: 14px; opacity: .86; }
.brand-mark i:nth-child(3) { height: 18px; }
.nav-caption { padding: 0 14px 11px; color: #8499b4; font-size: 10px; letter-spacing: .13em; }
.sidebar nav { display: grid; gap: 5px; }
.nav-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 41px; padding: 0 14px; border: 0; border-radius: 6px; background: none; color: #b8c6d8; text-align: left; font-size: 13px; }
.nav-item > span:first-child { width: 17px; color: #8ea3bd; text-align: center; font-size: 16px; }
.nav-item:hover, .nav-item:focus-visible { background: #223750; color: #fff; }
.nav-item.active { background: #294663; color: #fff; font-weight: 600; }
.nav-item.active > span:first-child { color: #83aafb; }
.nav-count { margin-left: auto; min-width: 20px; height: 19px; padding: 0 5px; border-radius: 4px; background: #354a64; color: #d9e3ee; text-align: center; font-size: 11px; }
.sidebar-foot { margin-top: auto; padding: 17px 14px 19px; border-top: 1px solid #32445b; }
.sidebar-foot-title { display: flex; align-items: center; gap: 8px; color: #e9eff7; font-size: 12px; font-weight: 600; }
.sidebar-foot p { margin: 9px 0 11px 14px; color: #92a5bc; font-size: 11px; line-height: 1.7; }
.live-dot { display: inline-block; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: #51cba1; vertical-align: 1px; }
.sidebar-link { padding: 0 0 0 14px; border: 0; background: none; color: #b7d0ff; text-align: left; font-size: 11px; }
.sidebar-link:hover { color: #fff; }
.profile { display: flex; align-items: center; gap: 10px; padding: 15px 13px 1px; border-top: 1px solid #32445b; color: #e6edf6; font-size: 12px; font-weight: 600; }
.profile small { display: block; margin-top: 2px; color: #8fa4be; font-size: 10px; font-weight: 400; }
.profile-avatar { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #49627d; border-radius: 50%; background: #334a66; color: #e3edfc; font-size: 12px; }

.main { min-width: 0; min-height: 100vh; margin-left: 216px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 67px; padding: 0 34px; border-bottom: 1px solid var(--line); background: var(--surface); }
.breadcrumb { color: #8490a1; font-size: 12px; white-space: nowrap; }
.breadcrumb span { margin: 0 9px; color: #c0c8d3; }
.breadcrumb strong { color: #34445b; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 0 13px; border: 1px solid #d9e0e9; border-radius: 5px; background: #fff; color: #41536c; font-size: 12px; font-weight: 600; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.button:hover { border-color: #bdc9da; background: #f7f9fc; }
.button.primary { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 2px 5px rgb(40 91 212 / 15%); }
.button.primary:hover { border-color: var(--blue-deep); background: var(--blue-deep); }
.button.icon { width: 31px; height: 31px; min-height: 31px; padding: 0; border-color: transparent; background: transparent; color: #7b8a9c; font-size: 24px; font-weight: 400; line-height: 1; }
.button.icon:hover { background: #edf1f6; color: var(--ink); }
.button.text-button { border-color: transparent; background: transparent; color: var(--blue); }
.button.text-button:hover { background: var(--blue-wash); }
.file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.content { max-width: 1700px; margin: 0 auto; padding: 31px 34px 28px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 25px; }
.eyebrow { color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.page-heading h1 { margin: 5px 0 3px; font-size: clamp(25px, 2.5vw, 31px); font-weight: 700; letter-spacing: -.035em; line-height: 1.35; }
.subtitle { margin: 0; color: var(--muted); font-size: 12px; }
.period-meta { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; color: #7d8998; font-size: 11px; white-space: nowrap; }
.period-meta .tag { background: #e9f7f1; color: #238665; }
.period-meta .live-dot { width: 5px; height: 5px; margin-right: 3px; vertical-align: 2px; }
.filters { display: flex; align-items: end; gap: 12px; min-height: 70px; margin-bottom: 19px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); }
.filter-field { display: grid; gap: 4px; flex: 0 0 auto; color: #77869a; font-size: 10px; font-weight: 600; }
.filter-field select, .table-controls select, .search-input { min-height: 31px; padding: 0 30px 0 10px; border: 1px solid #dfe5eb; border-radius: 4px; background: #fff; color: #33445b; font-size: 12px; outline-offset: 2px; }
.filter-field select { min-width: 160px; max-width: 210px; }
.filters > .muted { margin: 0 auto 6px 3px; font-size: 11px; }
.filters > .button { align-self: end; }

.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; margin-bottom: 15px; }
.kpi-card { min-width: 0; min-height: 128px; padding: 17px 18px 15px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); }
.kpi-card.kpi-primary { border-top: 3px solid var(--blue); padding-top: 15px; }
.kpi-label { display: flex; align-items: center; gap: 4px; color: #66778c; font-size: 12px; font-weight: 600; }
.kpi-label abbr { color: #9aa8bb; font-size: 10px; text-decoration: none; cursor: help; }
.kpi-symbol { display: grid; width: 20px; height: 20px; place-items: center; margin-left: auto; border-radius: 4px; background: #f0f4fb; color: #7f9bd0; font-size: 15px; font-weight: 500; }
.kpi-primary .kpi-symbol { background: var(--blue-wash); color: var(--blue); }
.kpi-value { margin: 12px 0 7px; color: #1c2c44; font-size: clamp(22px, 2.2vw, 31px); font-weight: 700; letter-spacing: -.035em; line-height: 1.12; white-space: nowrap; }
.kpi-primary .kpi-value { color: #214fb7; }
.kpi-value small, .kpi-value .unit, .kpi-unit { margin-left: 3px; color: #718094; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.kpi-foot { color: #8a97a7; font-size: 10px; line-height: 1.45; }
.kpi-foot .change { margin-right: 5px; }
.kpi-secondary { margin-top: 3px; color: #a1abb8; font-size: 10px; }
.change { display: inline-flex; align-items: center; color: #64758a; font-size: 11px; font-weight: 600; white-space: nowrap; }
.change.up { color: var(--mint); }
.change.down { color: var(--red); }
.status-line { display: flex; align-items: center; gap: 7px; min-height: 0; margin-bottom: 15px; color: #7a8899; font-size: 11px; }
.status-line:empty { display: none; }
.status-line .tag { margin-right: 7px; }
.status-dot { display: inline-block; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #e5a355; }
.status-dot.success { background: #4ab98f; }
.inline-link { padding: 0; border: 0; background: transparent; color: var(--blue); text-align: left; font-size: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.inline-link:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 2px; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 20px; margin-bottom: 20px; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); }
.panel-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; min-height: 72px; padding: 17px 18px 13px; }
.section-title { display: flex; align-items: center; gap: 8px; margin: 0; color: #223249; font-size: 16px; font-weight: 700; letter-spacing: -.02em; line-height: 1.35; }
.section-note { margin: 5px 0 0; color: #8a97a7; font-size: 10px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 3px; background: #f0f3f7; color: #68798e; font-size: 10px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.tag.warning { background: var(--amber-wash); color: var(--amber); }
.tag.success { background: var(--mint-wash); color: var(--mint); }
.table-controls { display: flex; align-items: center; gap: 7px; }
.search-input { width: 136px; padding-right: 9px; }
.search-input::placeholder { color: #a7b0bd; }
.table-controls select { width: 105px; padding-right: 17px; }
.table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: #cad3df transparent; }
.group-table { width: 100%; min-width: 680px; border-collapse: collapse; text-align: left; }
.group-table th { padding: 10px 9px; border-block: 1px solid var(--line-soft); background: #fafbfc; color: #8996a5; font-size: 10px; font-weight: 600; white-space: nowrap; }
.group-table td { padding: 13px 9px; border-bottom: 1px solid #edf0f3; color: #3b4b61; font-size: 11px; vertical-align: middle; white-space: nowrap; }
.group-table th:first-child, .group-table td:first-child { padding-left: 18px; }
.group-table th:last-child, .group-table td:last-child { padding-right: 18px; }
.group-table tbody tr:last-child td { border-bottom: 0; }
.group-table tbody tr:hover { background: #fafcff; }
.group-table .number { text-align: right; }
.group-table abbr { text-decoration: none; cursor: help; }
.group-button { display: inline-flex; align-items: center; gap: 7px; max-width: 160px; padding: 0; border: 0; background: transparent; color: #263951; text-align: left; font-weight: 700; }
.group-button:hover { color: var(--blue); }
.group-button .chevron { color: #9aa7b7; font-size: 10px; }
.group-row.expanded { background: #f8faff; }
.group-name { display: grid; min-width: 0; line-height: 1.25; }
.group-name small { margin-top: 3px; color: #9ca8b5; font-size: 9px; font-weight: 400; }
.avatar { display: inline-grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; border-radius: 5px; background: #eaf0fc; color: #4368ad; font-size: 10px; font-weight: 700; }
.avatar[data-color="1"] { background: #e9f5f2; color: #278067; }
.avatar[data-color="2"] { background: #fff2e5; color: #ac7340; }
.avatar[data-color="3"] { background: #f1effa; color: #7b69b3; }
.avatar[data-color="4"] { background: #f6edf1; color: #b06982; }
.contribution-track { width: 58px; height: 3px; margin-top: 5px; overflow: hidden; border-radius: 1px; background: #e9edf3; }
.contribution-fill { height: 100%; min-width: 2px; background: #6691e8; }
.employee-row { background: #fbfcfe; }
.employee-row td { padding-block: 10px; color: #68788c; }
.employee-cell { padding-left: 43px !important; }
.employee-cell button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #315fbd; text-align: left; font-size: 11px; }
.employee-cell button:hover { text-decoration: underline; }
.employee-branch { color: #bdc8d6; font-size: 14px; }
.employee-arrow { color: #9eb1d2; font-size: 11px; }
.roi-cell small { display: block; margin-top: 2px; font-size: 9px; }
.panel-footer { display: flex; justify-content: space-between; gap: 12px; padding: 11px 18px 12px; border-top: 1px solid var(--line-soft); color: #9aa5b2; font-size: 10px; }
/* Give the primary comparison table room and a readable type scale. */
#comparison .panel-head { align-items: center; gap: 20px; padding: 22px; }
#comparison .section-title { font-size: 22px; }
#comparison .section-note { margin-top: 7px; color: #6e7c91; font-size: 14px; }
#comparison .table-controls { gap: 10px; }
#comparison .table-controls input, #comparison .table-controls select { height: 42px; font-size: 14px; }
#comparison .search-input { width: 210px; }
#comparison .table-controls select { width: 150px; }
#comparison .group-table { min-width: 900px; }
#comparison .group-table th { padding: 15px 12px; color: #6b627d; font-size: 14px; }
#comparison .group-table td { padding: 18px 12px; color: #34435b; font-size: 16px; }
#comparison .group-table th:first-child, #comparison .group-table td:first-child { padding-left: 22px; }
#comparison .group-table th:last-child, #comparison .group-table td:last-child { padding-right: 22px; }
#comparison .group-button { gap: 10px; max-width: 240px; font-size: 16px; }
#comparison .group-button .chevron { font-size: 14px; }
#comparison .group-name { line-height: 1.5; }
#comparison .group-name small, #comparison .roi-cell small { margin-top: 4px; color: #6e7c91; font-size: 13px; }
#comparison .avatar { flex-basis: 34px; width: 34px; height: 34px; border-radius: 7px; font-size: 14px; }
#comparison .tag { padding: 5px 8px; font-size: 13px; }
#comparison .change { font-size: 15px; }
#comparison .contribution-track { width: 82px; height: 4px; margin-top: 8px; margin-left: auto; }
#comparison .employee-row td { padding-block: 15px; }
#comparison .employee-cell { padding-left: 56px !important; }
#comparison .employee-cell button { gap: 8px; font-size: 16px; }
#comparison .employee-arrow { font-size: 14px; }
#comparison .panel-footer { flex-wrap: wrap; padding: 15px 22px; color: #6e7c91; font-size: 13px; }
.attention-panel { display: flex; flex-direction: column; }
.attention-panel .panel-head { padding: 20px 22px 15px; }
.attention-panel .section-title { font-size: 20px; }
.attention-panel .section-note { color: #6e7c91; font-size: 13px; }
.attention-icon { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 4px; background: #eaf1ff; color: #5075c3; font-size: 16px; }
.attention-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 24px; padding: 0 22px 8px; }
.attention-item { display: flex; align-items: start; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line-soft); color: #56677b; font-size: 14px; line-height: 1.7; }
.attention-index { display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; border-radius: 5px; background: #edf3ff; color: #4d76cc; font-size: 13px; }
.attention-item.warning .attention-index { background: var(--amber-wash); color: var(--amber); }
.attention-item h3 { margin: 2px 0 6px; color: #293a50; font-size: 16px; font-weight: 650; }
.attention-item p { margin: 3px 0 5px; }
.attention-item .tag { margin-bottom: 5px; }
.attention-link { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 44px); margin: auto 22px 0; padding: 15px 0 18px; border: 0; border-top: 1px solid var(--line-soft); background: transparent; color: #315fc0; text-align: left; font-size: 14px; font-weight: 600; }
.attention-link:hover { color: var(--blue-deep); }

#trends > .panel-head { min-height: 68px; padding-bottom: 7px; }
.trend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 5px 0 17px; }
.chart-card { min-width: 0; padding: 6px 18px 4px; border-right: 1px solid var(--line-soft); }
.chart-card:last-child { border-right: 0; }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 7px; color: #52647b; font-size: 11px; font-weight: 600; }
.chart-head strong { color: #263a52; font-size: 14px; font-weight: 700; }
.chart-head h3 { display: flex; align-items: center; gap: 7px; margin: 0; color: #40536d; font-size: 11px; font-weight: 650; }
.chart-head h3 span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.trend-chart { display: block; width: 100%; min-width: 0; overflow: visible; }
.trend-chart svg { display: block; width: 100%; height: auto; }
.trend-chart text { fill: #718196; font-family: inherit; font-size: 11px; }
.trend-chart .axis-label.selected { fill: var(--blue); font-weight: 700; }
.trend-chart line { stroke: #e7ebf0; }
.trend-chart path { stroke-linecap: round; stroke-linejoin: round; }
.chart-values { display: flex; justify-content: space-between; gap: 2px; margin-top: 2px; color: #718196; font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-values span.selected { color: #285bd4; font-weight: 700; }
.chart-values sup { color: var(--amber); }
.chart-point:focus-visible { outline: none; }
.chart-point:focus-visible circle:first-of-type { stroke-width: 4; }
.footer-note { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 1px; color: #9aa6b4; font-size: 10px; }
.footer-note .button { min-height: auto; padding: 2px 5px; font-size: 10px; }

.empty-state { padding: 35px 18px; color: #8090a2; text-align: center; font-size: 12px; }
.dialog { width: min(590px, calc(100vw - 32px)); max-height: min(88vh, 900px); padding: 0; overflow: hidden; border: 1px solid #e1e6ed; border-radius: 8px; background: #fff; box-shadow: 0 24px 70px rgb(11 24 45 / 20%); color: var(--ink); }
.dialog::backdrop { background: rgb(13 30 51 / 42%); backdrop-filter: blur(2px); }
.dialog-head { display: flex; justify-content: space-between; gap: 20px; padding: 21px 23px 17px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { margin: 4px 0 5px; font-size: 20px; font-weight: 700; }
.dialog-head .subtitle { font-size: 11px; }
.dialog-body { max-height: calc(88vh - 95px); padding: 20px 23px 26px; overflow-y: auto; color: #4b5e74; font-size: 12px; line-height: 1.7; }
.dialog-body h3 { margin: 20px 0 8px; color: var(--ink); font-size: 14px; }
.dialog-body h3:first-child { margin-top: 0; }
.dialog-body p { margin: 0 0 10px; }
.dialog-body ul { padding-left: 1.4em; }
.dialog-body li { margin-bottom: 8px; }
.dialog-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.definitions-body dl { display: grid; grid-template-columns: 95px minmax(0, 1fr); column-gap: 15px; row-gap: 0; margin: 0; }
.definitions-body dt, .definitions-body dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.definitions-body dt { color: #293e5c; font-weight: 700; }
.definitions-body dd { color: #64748a; }
.drawer { position: fixed; inset: 0 0 0 auto; width: min(560px, 100vw); max-width: none; max-height: 100vh; height: 100vh; margin: 0; border-radius: 0; border-block: 0; border-right: 0; }
.drawer .dialog-body { max-height: calc(100vh - 111px); }
.drawer-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-bottom: 18px; }
.drawer-metrics > * { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 5px; background: #fafbfc; }
.drawer-metrics span { color: #8391a1; font-size: 10px; }
.drawer-metrics strong { display: block; margin-top: 5px; color: #213751; font-size: 18px; }
.detail-section-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin: 15px 0 11px; }
.detail-section-head h3 { margin: 0; color: #263a52; font-size: 14px; }
.video-list { display: grid; gap: 9px; }
.video-card { padding: 13px 14px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.video-top { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; gap: 9px; color: #2d3f56; font-weight: 600; }
.video-rank { color: #aab6c3; font-size: 11px; font-variant-numeric: tabular-nums; }
.video-top h4 { margin: 0; color: #283b53; font-size: 12px; }
.video-likes { display: grid; justify-items: end; color: #2e568f; font-variant-numeric: tabular-nums; line-height: 1.2; }
.video-likes strong { font-size: 14px; }
.video-likes small { margin-top: 3px; color: #9aa6b4; font-size: 9px; font-weight: 400; }
.video-meta { display: flex; flex-wrap: wrap; gap: 5px 13px; margin-top: 7px; color: #8793a3; font-size: 10px; }
.video-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 9px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line-soft); color: #8a98a7; font-size: 10px; }
.video-bottom .inline-link { margin-left: auto; }
.video-card a { display: inline-block; font-size: 11px; }
.data-note { margin: 10px 0; padding: 10px 12px; border-left: 3px solid #a8c2fa; background: #f5f8ff; color: #5a6b81; font-size: 11px; }
.data-note.warning { border-color: #e2aa5b; background: #fff8ed; }
.data-note.warning strong { display: block; margin-bottom: 5px; color: #925e25; }
.quality-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0 16px; }
.quality-summary span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 3px; color: #63748a; font-size: 10px; }
.issue-card { padding: 13px 0; border-top: 1px solid var(--line-soft); }
.issue-card > div { display: flex; align-items: center; gap: 8px; }
.issue-card h3 { margin: 0; font-size: 12px; }
.issue-card p { margin: 7px 0 4px; color: #5e6f83; }
.issue-card small { color: #9ba7b3; font-size: 10px; }
.toast { position: fixed; right: 24px; bottom: 22px; z-index: 100; max-width: min(420px, calc(100vw - 48px)); padding: 11px 15px; border: 1px solid #d4e0ed; border-radius: 6px; background: #203954; box-shadow: 0 8px 30px rgb(21 41 65 / 20%); color: #fff; font-size: 12px; }

@media (max-width: 1200px) {
  .content { padding-inline: 24px; }
  .topbar { padding-inline: 24px; }
  .kpi-grid { gap: 9px; }
  .kpi-card { padding-inline: 13px; }
  .table-controls { flex-wrap: wrap; justify-content: end; }
}
@media (max-width: 900px) {
  .sidebar { width: 64px; padding-inline: 9px; }
  .brand { justify-content: center; padding-inline: 0; font-size: 0; }
  .brand > span:last-child, .nav-caption, .nav-item { font-size: 0; }
  .nav-item { justify-content: center; padding: 0; }
  .nav-item > span:first-child { font-size: 19px; }
  .nav-count, .sidebar-foot, .profile > div { display: none; }
  .profile { flex-direction: column; justify-content: center; padding-inline: 0; }
  .main { margin-left: 64px; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .attention-panel { display: block; }
  .attention-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .attention-item { border-top: 1px solid var(--line-soft); }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-value { font-size: 27px; }
}
@media (max-width: 650px) {
  body { font-size: 13px; }
  .sidebar { position: sticky; inset: 0 0 auto; flex-direction: row; align-items: center; width: 100%; height: 54px; padding: 0 11px; }
  .brand { gap: 5px; padding: 0; }
  .brand-mark { width: 27px; height: 27px; padding: 7px 6px; }
  .sidebar nav { display: flex; gap: 2px; margin-left: auto; }
  .nav-item { width: 35px; min-height: 35px; }
  .nav-item > span:first-child { font-size: 16px; }
  .profile { flex-direction: row; padding: 0; margin-left: 8px; border-top: 0; }
  .profile-avatar { display: none; }
  .profile .sidebar-link { min-height: 35px; padding: 0 7px; white-space: nowrap; }
  .main { margin-left: 0; }
  .topbar { min-height: 54px; padding: 0 15px; }
  .breadcrumb { font-size: 11px; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .button { min-height: 30px; padding: 0 8px; font-size: 11px; }
  .content { padding: 24px 14px 20px; }
  .page-heading { display: block; margin-bottom: 20px; }
  .page-heading h1 { font-size: 25px; }
  .period-meta { margin-top: 14px; white-space: normal; }
  .filters { flex-wrap: wrap; gap: 9px; padding: 11px; }
  .filter-field { flex: 1 1 calc(50% - 5px); }
  .filter-field:first-child { flex-basis: 100%; }
  .filter-field select { width: 100%; min-width: 0; max-width: none; }
  .filters > .muted { flex-basis: 100%; order: 3; margin: 0; }
  .filters > .button { order: 2; margin-left: auto; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi-card { min-height: 113px; padding: 13px 12px; }
  .kpi-value { margin-top: 10px; font-size: clamp(21px, 6vw, 27px); }
  .panel-head { flex-wrap: wrap; padding: 15px 14px 12px; }
  .table-controls { justify-content: start; width: 100%; }
  #comparison .panel-head { gap: 14px; padding: 18px 14px; }
  #comparison .section-note { font-size: 13px; }
  #comparison .search-input { width: 0; }
  #comparison .table-controls select { width: 138px; }
  #comparison .panel-footer { padding-inline: 14px; }
  .search-input { flex: 1; min-width: 0; }
  .group-table th:first-child, .group-table td:first-child { padding-left: 14px; }
  .attention-list { grid-template-columns: 1fr; gap: 0; }
  .attention-item { padding-block: 10px; }
  .trend-grid { grid-template-columns: 1fr; padding-top: 0; }
  .chart-card { border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 12px 14px; }
  .chart-card:last-child { border-bottom: 0; }
  .trend-chart { max-height: none; }
  .footer-note { align-items: start; flex-wrap: wrap; }
  .definitions-body dl { grid-template-columns: 1fr; }
  .definitions-body dt { padding-bottom: 0; border-bottom: 0; }
  .definitions-body dd { padding-top: 3px; }
  .drawer-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* AIGC dashboard: indigo output, amber spend, teal efficiency. */
:root { --blue:#6652ce; --blue-deep:#4e3aaf; --blue-wash:#efebff; --mint:#118578; --navy:#20213f; --canvas:#f4f5fa; --line:#e3e5f0; --shadow:0 4px 18px rgb(37 34 81 / 3%); }
body { background:var(--canvas); }
.sidebar { background:linear-gradient(165deg,#282549 0%,#1c203a 72%,#163e43 140%); }
.brand { font-size:23px; letter-spacing:.025em; }
.brand-sub { font-size:12px; letter-spacing:.08em; color:#b8b3d5; }
.brand-mark { background:linear-gradient(145deg,#8b78ee,#4eaaaf); box-shadow:0 4px 15px #12172e55; }
.nav-item.active { background:linear-gradient(100deg,#7864d344,#7864d31a); color:#e8e1ff; box-shadow:inset 3px 0 #a798ff; }
.sidebar-foot { background:#ffffff06; border-color:#ffffff12; border-radius:10px; padding:15px 12px; }
.topbar { background:#ffffffda; border-bottom-color:#e6e5f0; }
.content { background:radial-gradient(ellipse 65% 280px at 5% 0%,#e8e4fb90,transparent),radial-gradient(ellipse 45% 260px at 100% 0%,#dff2ed95,transparent); }
.page-heading { margin-bottom:22px; align-items:center; }
.page-heading h1 { letter-spacing:-.025em; color:#292445; }
.eyebrow { color:#7661bd; letter-spacing:.18em; }
.subtitle { color:#778097; }
.view-switch { display:flex; align-items:center; gap:5px; width:fit-content; max-width:100%; padding:5px; margin-bottom:13px; background:#e9e8f3; border:1px solid #e1deef; border-radius:11px; }
.view-switch button { padding:9px 22px; border:0; border-radius:7px; background:transparent; color:#75738c; font-size:12px; font-weight:650; white-space:nowrap; }
.view-switch button[aria-pressed="true"] { background:#fff; color:#5a45b6; box-shadow:0 2px 6px #37305e10; }
.view-switch button:hover { color:#5138b0; }
.view-switch > span { padding:0 14px; color:#89859c; font-size:10px; }
.filters { border-radius:11px; margin-bottom:17px; flex-wrap:wrap; }
.filter-field select { border-radius:6px; }
.filters > .muted { flex:1 1 230px; line-height:1.7; }
.coverage-note { margin:-5px 0 17px; padding:10px 14px; border-left:3px solid #35a899; border-radius:0 7px 7px 0; background:#eaf5f2; color:#478074; font-size:11px; line-height:1.6; }
.kpi-card { border-radius:11px; min-height:139px; border-top:3px solid #8977da; background:linear-gradient(155deg,#f7f4ff,#fff 75%); }
.kpi-card.tone-1 { border-top-color:#dca15e; background:linear-gradient(155deg,#fff7ec,#fff 75%); }
.kpi-card.tone-3 { border-top-color:#719dd4; background:linear-gradient(155deg,#eef5ff,#fff 75%); }
.kpi-card.tone-4 { border-top-color:#bd85ad; background:linear-gradient(155deg,#fcf1f8,#fff 75%); }
.kpi-symbol { color:#8a6ec5; background:#eee7ff; border-radius:6px; }
.tone-1 .kpi-symbol { color:#bc7c36; background:#f9e9d2; }
.tone-3 .kpi-symbol { color:#5885bd; background:#e1ecfa; }
.tone-4 .kpi-symbol { color:#ad719c; background:#f3e0ed; }
.kpi-card.kpi-primary { border:1px solid #187f7b; border-top:3px solid #64ccbc; background:linear-gradient(125deg,#176d71,#208879); box-shadow:0 7px 18px #187c7820; }
.kpi-primary .kpi-label,.kpi-primary .kpi-label abbr { color:#daf4ed; }
.kpi-primary .kpi-value { color:#fff; }
.kpi-primary .kpi-foot,.kpi-primary .kpi-secondary { color:#d0ebe5; }
.kpi-primary .kpi-symbol { background:#ffffff1c; color:#e3fff8; }
.kpi-primary .change.up { color:#bdffe6; }
.kpi-primary .change.down { color:#ffe0c9; }
.kpi-foot,.kpi-secondary { color:#738096; }
.panel { border-radius:12px; overflow:hidden; }
.panel-head { background:linear-gradient(110deg,#fbfaff,#fff); }
.section-title { color:#342d50; }
.group-table th { background:#f6f4fb; color:#827890; }
.contribution-fill { background:linear-gradient(90deg,#7460cf,#b7a5ec); border-radius:4px; }
.group-row.expanded { background:#f5f1ff; }
.attention-panel { background:linear-gradient(160deg,#fffdf9,#fff); }
.attention-panel .panel-head { background:linear-gradient(110deg,#fff6e9,#fffdf9); }
.attention-icon { color:#b88543; background:#f8e8d0; }
.attention-index { color:#8770bc; background:#f0eafa; }
.attention-item:nth-child(2) .attention-index { color:#278c7e; background:#e4f3ef; }
.chart-card:first-child { background:linear-gradient(180deg,#faf8ff,transparent); }
.chart-card:nth-child(2) { background:linear-gradient(180deg,#fffaf2,transparent); }
.chart-card:last-child { background:linear-gradient(180deg,#f4fbf9,transparent); }
.chart-values:has(>span:only-child) { justify-content:center; }
.dialog-head { background:linear-gradient(110deg,#f7f2ff,#eef8f5); }
.drawer-metrics > :first-child { border-top:3px solid #9b88d8; background:#f9f5ff; }
.drawer-metrics > :nth-child(2) { border-top:3px solid #dca15e; background:#fff9f1; }
.drawer-metrics > :nth-child(3) { border-top:3px solid #43a598; background:#f0f9f6; }
@media (max-width:1100px) { .page-heading { align-items:start; flex-direction:column; gap:12px; } }
@media (max-width:900px) { .brand { font-size:0; } .brand > span:last-child { display:none; } }
@media (max-width:650px) {
  .page-heading h1 { font-size:24px; }
  .view-switch { width:100%; }
  .view-switch button { flex:1; padding:9px 14px; }
  .view-switch > span { display:none; }
  .kpi-card { min-height:125px; }
  .filters > .muted { flex-basis:100%; }
  .coverage-note { font-size:10px; }
}

.platform-bar { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-bottom:16px; }
.platform-switch { display:flex; gap:7px; padding:4px; border:1px solid #e1deef; border-radius:11px; background:#fff9; }
.platform-switch button { display:flex; align-items:center; gap:9px; min-width:115px; padding:9px 17px; border:1px solid transparent; border-radius:8px; background:transparent; color:#817a92; font-size:13px; font-weight:650; }
.platform-switch button[aria-pressed="true"] { border-color:#ddd5f5; color:#493d71; background:#f0ebfb; }
.platform-switch button[data-platform="channels"][aria-pressed="true"] { border-color:#efd8b8; color:#9b671f; background:#fff3df; }
.platform-icon { display:grid; place-items:center; width:22px; height:22px; border-radius:6px; font-size:16px; }
.douyin-icon { background:#28243f; color:#fff; }
.channels-icon { background:#e9a750; color:#fff; }
#platform-caption { color:#898096; font-size:11px; }
.trend-chart { overflow-x:auto; scrollbar-width:thin; }
@media (max-width:650px) {
 .platform-bar { gap:8px; }
 .platform-switch { width:100%; }
 .platform-switch button { flex:1; justify-content:center; }
 #platform-caption { padding-left:3px; }
 .topbar-actions .button { padding-inline:6px; font-size:10px; }
}

/* Identity and administration share the report's indigo / teal palette. */
[hidden]{display:none!important}.auth-screen{min-height:100vh;padding:40px 6vw 24px;background:radial-gradient(ellipse at 18% 76%,#e7e3fb 0,transparent 52%),radial-gradient(ellipse at 92% 8%,#ddf1ed 0,transparent 47%),#f6f7fb;color:#23334b}.auth-brand{display:flex;align-items:center;gap:13px;font-size:19px;font-weight:750}.auth-brand .brand-mark{width:40px;height:40px}.auth-grid{max-width:1240px;margin:80px auto 30px;display:grid;grid-template-columns:1.2fr 1fr;gap:8vw;align-items:center;min-height:570px}.auth-story h1{font-size:clamp(36px,4.5vw,64px);letter-spacing:-2px;line-height:1.28;margin:22px 0;color:#23334b}.auth-story p{font-size:17px;line-height:1.9;color:#718198}.auth-tags{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}.auth-tags span{background:#ffffff99;border:1px solid #ffffff;border-radius:20px;padding:7px 12px;font-size:12px;color:#67768c}.auth-art{position:relative;height:220px;margin-top:30px}.auth-orbit{width:260px;height:180px;border:1px solid #b9b1ed;border-radius:50%;transform:rotate(-24deg);position:absolute;left:50px;top:25px}.art-card{position:absolute;left:70px;top:20px;width:330px;max-width:80%;background:linear-gradient(135deg,#7160ce,#51409c);border-radius:22px;padding:24px 28px;box-shadow:0 25px 60px #6250bc33;transform:rotate(-5deg);color:white}.art-card>span{font-size:10px;letter-spacing:2px;color:#ded8ff}.art-card strong{display:block;font-size:38px;font-weight:600}.art-card i{float:right;font-style:normal;color:#b4eadc}.art-bars{display:flex;gap:12px;align-items:end;height:54px;margin-top:15px}.art-bars b{width:26px;border-radius:5px 5px 0 0;background:#ffffff66;height:35%}.art-bars b:nth-child(2){height:52%}.art-bars b:nth-child(3){height:45%}.art-bars b:nth-child(4){height:72%}.art-bars b:nth-child(5){height:65%}.art-bars b:nth-child(6){height:86%}.art-bars b:nth-child(7){height:100%;background:#aee5cf}.auth-card{padding:44px;background:#ffffffed;border:1px solid white;border-radius:24px;box-shadow:0 20px 70px #2c385314;max-width:480px}.auth-icon{display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:17px;background:#eeeafb;color:#6a55c5;font-size:27px;margin-bottom:28px}.auth-card h2{font-size:29px;margin:12px 0}.auth-card p{line-height:1.9;color:#718198;font-size:14px;margin-bottom:26px}.feishu-login{display:flex;justify-content:space-between;width:100%;padding:16px 20px;text-decoration:none;font-size:15px;box-sizing:border-box}.auth-status{padding:15px;border:1px solid #e6e4f2;border-radius:10px;background:#f7f5fc;font-size:13px;line-height:1.7}.auth-tip{display:block;color:#98a1af;font-size:12px;line-height:1.9;margin-top:24px}.auth-footer{color:#98a1af;font-size:11px;letter-spacing:1px;text-align:center}.profile{gap:10px}.profile>div{flex:1;min-width:0}.profile small{font-size:10px}.profile .sidebar-link{font-size:11px;margin:0}.admin-tabs{display:flex;gap:5px;padding:6px;background:#eaeaf1;border:1px solid #e3e4ed;border-radius:13px;margin:26px 0 22px;width:max-content;max-width:100%;overflow-x:auto}.admin-tabs button{border:0;white-space:nowrap;padding:12px 23px;border-radius:9px;background:transparent;color:#748098;font-size:14px;font-weight:600;cursor:pointer}.admin-tabs button[aria-selected=true]{color:#5543a7;background:#fff;box-shadow:0 2px 6px #2831420c}.admin-status{color:#268379;font-size:13px;line-height:1.6;margin-bottom:14px}.admin-status:empty{display:none}.admin-status.error{color:#b45246;background:#fcefed;padding:12px;border-radius:8px}.admin-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:24px}.admin-kpi{padding:22px;border:1px solid #e5e5ee;border-radius:15px;background:#fff;position:relative;overflow:hidden}.admin-kpi:before{content:'';position:absolute;top:0;left:0;bottom:0;width:4px;background:#a896de}.admin-kpi:nth-child(2):before{background:#68b9a8}.admin-kpi:nth-child(3):before{background:#92a8d8}.admin-kpi:nth-child(4):before{background:#dda55e}.admin-kpi>span{color:#7f899b;font-size:13px}.admin-kpi>strong{display:block;font-size:32px;margin:14px 0 7px}.admin-kpi>small{font-size:11px;color:#98a1af}.upload-panel{margin-bottom:24px}.upload-panel .eyebrow{margin-bottom:10px}.upload-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:40px;padding:8px 26px 28px}.admin-field{display:flex;flex-direction:column;gap:10px;color:#77869c;font-size:13px}.admin-field select{padding:12px;border:1px solid #dfe3ed;border-radius:9px;background:#fff;color:#263851;font-size:14px;max-width:100%;width:100%}.upload-current{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:20px;padding:19px;background:#f6f7fa;border-radius:10px;color:#7f8ca1;font-size:12px}.upload-current strong{color:#35455d;font-size:14px}.upload-current small{color:#97a1b0}.upload-file-box{border:1px dashed #c9c3e3;border-radius:13px;padding:23px;background:#faf9ff}.file-heading{display:block;font-size:14px;font-weight:600;margin-bottom:14px}.upload-file-box input{font-size:12px;max-width:100%;color:#7d8ba1}.upload-file-box input::file-selector-button{border:1px solid #d8d6e8;background:white;padding:9px 12px;border-radius:7px;margin-right:10px;color:#5b4c91;cursor:pointer}.upload-file-box p,#import-preview{font-size:12px;color:#8d99aa;line-height:1.8}#import-preview{color:#746198;margin:12px 0}#import-submit{margin-top:10px}.button:disabled{opacity:.45;cursor:not-allowed}.admin-person{display:flex;align-items:center;gap:10px;min-width:180px}.admin-person .avatar{flex-shrink:0;background:#ece8f9;color:#7561b5}.admin-person strong{display:block;font-size:13px}.admin-person small{display:block;color:#9aa4b2;font-size:10px;margin-top:5px;max-width:240px;overflow:hidden;text-overflow:ellipsis}.admin-table td{padding-top:20px;padding-bottom:20px;font-size:12px}.scope-chip{display:inline-block;font-size:11px;padding:5px 8px;border-radius:5px;color:#5c728c;background:#edf2f8;margin:3px}.scope-chip.all{color:#7b61af;background:#eee8f7}.grant-layout{padding:10px 26px 30px;display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:36px}.grant-person{margin-top:24px;padding:20px 0}.grant-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.grant-heading h3{font-size:14px}.group-check-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}.group-check{display:flex;align-items:center;gap:10px;padding:15px;border:1px solid #e1e4ed;background:#fff;border-radius:9px;font-size:13px;cursor:pointer}.group-check:has(input:checked){border-color:#bdb0e0;background:#f5f1fd;color:#6f58b1}.group-check input{accent-color:#7559ba;width:15px;height:15px}.grant-actions{display:flex;gap:12px;margin-top:23px}.admin-badge{background:#ece7fa;color:#7a60b6}#pending-actions{display:flex;gap:10px}
@media(max-width:1100px){.auth-grid{gap:35px}.auth-card{padding:30px}.admin-tabs button{padding:12px 16px}.admin-kpis{grid-template-columns:repeat(2,1fr)}.grant-layout{grid-template-columns:1fr;gap:10px}}
@media(max-width:700px){.auth-screen{padding:25px}.auth-grid{grid-template-columns:1fr;margin-top:35px;gap:25px}.auth-story h1{font-size:36px}.auth-story p{font-size:14px}.auth-art{display:none}.auth-card{max-width:none}.auth-tags{margin-top:18px}.auth-brand{font-size:16px}.auth-footer{margin-top:28px}.upload-grid{grid-template-columns:1fr;gap:20px;padding:10px 18px 22px}.admin-tabs{width:100%;box-sizing:border-box}.admin-tabs button{padding:11px 13px;font-size:12px}.admin-kpis{gap:10px}.admin-kpi{padding:17px}.admin-kpi>strong{font-size:27px}.admin-kpi>small{font-size:10px}.group-check-grid{grid-template-columns:repeat(2,1fr)}.grant-layout{padding:10px 18px 22px}}

.feishu-login + .auth-status{margin-top:16px}