*{box-sizing:border-box}
body{
  margin:0;
  color:#202a32;
  font:14px -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:#abd4ed url('background.svg') center center/cover fixed no-repeat;
  min-height:100vh;
}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid #398ad2;outline-offset:3px;
}
.workspace{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  max-width:1580px;
  width:calc(100% - 80px);
  margin:40px auto;
  border:1px solid #ffffffbd;
  border-radius:23px;
  background:#ffffffb8;
  box-shadow:0 24px 80px #11374a26;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  min-height:calc(100vh - 80px);
  overflow:hidden;
}
aside{
  padding:26px 16px;
  display:flex;
  flex-direction:column;
  border-right:1px solid #fff6;
  background:#ffffff66;
}
.brand{
  display:flex;align-items:center;gap:8px;
  font-size:16px;font-weight:620;letter-spacing:-.4px;
  white-space:nowrap;padding:4px 6px;
}
.brand .mark{
  width:26px;height:26px;border-radius:8px;
  background:linear-gradient(145deg,#5ea6d4,#2f6f9a);
  color:#fff;display:grid;place-items:center;font-size:12px;font-weight:700;
}
.brand small{display:block;font-size:10px;color:#6a7d8c;font-weight:500;margin-top:2px;letter-spacing:0}
.navs{margin-top:28px;display:flex;flex-direction:column;gap:4px}
.nav{
  display:flex;gap:10px;align-items:center;width:100%;
  text-align:left;border:0;background:transparent;border-radius:8px;
  padding:11px 11px;color:#657484;font-size:12.5px;line-height:1.35;
}
.nav.active{background:#edf6fccc;color:#27445c;font-weight:560}
.nav .ico{font-size:14px;width:18px;text-align:center;flex-shrink:0}
.sidebar-foot{margin-top:auto;padding-top:28px;color:#677a88;font-size:11px;line-height:1.8}
.sidebar-foot b{font-weight:560;color:#3f596a}
main{padding:22px 24px 24px;min-width:0;display:flex;flex-direction:column}
.top{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;margin-bottom:18px;flex-wrap:wrap;
}
.breadcrumb{color:#738292;font-size:12px}
.breadcrumb b{color:#2e4a5c;font-weight:600}
.top-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.country-switch{
  display:inline-flex;background:#ffffffce;border:1px solid #d9e3e9;
  border-radius:9px;overflow:hidden;padding:2px;
}
.country-switch button{
  border:0;background:transparent;padding:8px 14px;font-size:12px;
  border-radius:7px;color:#5c7080;
}
.country-switch button.active{
  background:#e5f2fa;color:#27445c;font-weight:600;border:1px solid #c4dce9;
}
.datebar{display:flex;gap:6px;align-items:center;font-size:11px;flex-wrap:wrap}
.datebar input[type=date]{
  width:128px;padding:8px 7px;border:1px solid #dce6ec;border-radius:7px;
  background:#ffffffe0;font-size:11px;
}
.button{
  border:1px solid #d9e3e9;border-radius:7px;background:#ffffffa8;
  padding:8px 11px;font-size:12px;color:#3f5566;
}
.button.active{background:#e5f2fa;border-color:#c4dce9;color:#27445c;font-weight:560}
.button.primary{background:#3d7eab;border-color:#3d7eab;color:#fff}
.button.primary:hover{background:#356e96}
#content{flex:1;min-width:0}
.surface{
  background:#ffffffee;border:1px solid #fff;border-radius:13px;
  padding:20px;min-width:0;margin-bottom:16px;
}
.section-title{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-bottom:14px;flex-wrap:wrap;
}
h1,h2,h3,p{margin:0}
h1{font-size:19px;font-weight:600;letter-spacing:-.4px;color:#243846}
h2{font-size:16px;font-weight:600;letter-spacing:-.3px;color:#243846}
.tiny{font-size:11px;color:#82909c;line-height:1.6}
.kpi-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
.kpi{
  background:#ffffffed;border:1px solid #fff;border-radius:13px;
  padding:16px 16px 12px;min-width:0;
  border-left:3px solid #85a7bc;
}
.kpi .label{font-size:11px;color:#708190;margin-bottom:8px}
.kpi .value{font-size:26px;font-weight:650;letter-spacing:-.8px;color:#1f3342;line-height:1.1}
.kpi .delta{font-size:12px;margin-top:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kpi .delta.up{color:#1a7a45}
.kpi .delta.down{color:#b42318}
.kpi .delta.flat{color:#6b7c8a}
.kpi .sub{font-size:10px;color:#8a9aa6;margin-top:4px}
.kpi canvas{width:100%!important;height:42px!important;margin-top:10px}
.toolbar{
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  margin:0 0 14px;border-bottom:1px solid #eaf0f3;padding-bottom:10px;flex-wrap:wrap;
}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{
  border:1px solid transparent;background:none;padding:7px 10px;
  font-size:12px;color:#85909e;border-radius:7px;
}
.tab.active{color:#2e516b;background:#e8f3fa;border-color:#c4dce9;font-weight:560}
.controls{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.controls label{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#5f7384;
  background:#f5f9fb;border:1px solid #e1e9ee;border-radius:6px;padding:6px 9px;
}
.controls input[type=checkbox]{accent-color:#3d7eab}
.chart-wrap{position:relative;height:300px;width:100%}
.chart-wrap.sm{height:220px}
.note{
  font-size:11px;color:#6e8190;line-height:1.7;margin-top:10px;
  padding:10px 12px;background:#f3f8fb;border-radius:8px;
}
.wow{width:100%;border-collapse:collapse;font-size:12px;margin-top:14px}
.wow th,.wow td{
  padding:8px 10px;border-bottom:1px solid #eaf0f3;text-align:right;white-space:nowrap;
}
.wow th:first-child,.wow td:first-child{text-align:left}
.wow th{color:#6a7d8c;font-weight:560;background:#f7fafc}
.wow .up{color:#1a7a45}
.wow .down{color:#b42318}
.wow .imm{color:#9aa8b4;font-style:italic}
.empty{padding:40px 15px;text-align:center;color:#8a9aa6;font-size:12px;line-height:2}
.method h3{font-size:14px;margin:22px 0 8px;color:#2e4a5c}
.method p,.method li{font-size:12.5px;color:#5f7384;line-height:1.9}
.method ul{margin:6px 0 0;padding-left:18px}
.method code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;background:#eef4f8;padding:1px 5px;border-radius:4px;
}
.foot{
  font-size:10px;color:#58758a;margin:8px 2px 0;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.legend-hint{font-size:10px;color:#82909c;margin-top:6px}
.badge{
  display:inline-block;font-size:10px;padding:2px 7px;border-radius:999px;
  background:#e8f3fa;color:#3d6280;margin-left:6px;
}
.err-banner{
  background:#fff1f0;border:1px solid #ffccc7;color:#a8071a;
  padding:12px 14px;border-radius:10px;margin-bottom:14px;font-size:13px;
}
.hidden{display:none!important}


/* —— 各广告渠道首次听写率（总览 + 专页） —— */
.channel-home{margin-top:16px;padding-top:18px}
.channel-board{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  margin:4px 0 18px;
}
.ch-card{
  position:relative;
  background:linear-gradient(180deg,#ffffff,#f7fbfe);
  border:1px solid #e2eef5;
  border-radius:12px;
  padding:12px 12px 8px;
  min-width:0;
  box-shadow:0 8px 20px #1a3a4e0d;
  border-top:3px solid var(--ch,#85a7bc);
  transition:transform .15s ease, box-shadow .15s ease;
}
.ch-card:hover{transform:translateY(-1px);box-shadow:0 12px 28px #1a3a4e14}
.ch-card.is-low{
  background:#f4f6f8;
  border-color:#e5eaee;
  opacity:.78;
  border-top-color:#c5ced6;
}
.ch-card.is-low .ch-value{color:#8a97a3;font-size:16px;letter-spacing:0;font-weight:600}
.ch-top{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:6px}
.ch-name{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#2e4a5c}
.ch-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--ch,#85a7bc);display:inline-block;flex-shrink:0;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ch) 22%, transparent);
}
.ch-rank{font-size:10px;color:#90a0ac;font-weight:560}
.ch-value{font-size:22px;font-weight:700;letter-spacing:-.6px;color:#1f3342;line-height:1.15}
.ch-card .delta{font-size:11px;margin-top:6px;font-weight:560}
.ch-card .delta.up{color:#1a7a45}
.ch-card .delta.down{color:#b42318}
.ch-card .delta.flat{color:#6b7c8a}
.ch-meta{
  display:flex;flex-direction:column;gap:2px;
  font-size:10px;color:#80919e;margin-top:8px;line-height:1.45
}
.ch-meta b{color:#3f5566;font-weight:620}
.ch-spark{width:100%!important;height:36px!important;margin-top:6px}
.channel-trend-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;margin:4px 0 10px;flex-wrap:wrap;
}
.channel-trend-head h3{font-size:14px;font-weight:600;color:#243846;margin:0}

@media(max-width:1200px){
  .channel-board{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .channel-board{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1100px){
  .workspace{width:calc(100% - 36px);margin:24px auto;grid-template-columns:168px minmax(0,1fr)}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  main{padding:18px}
}
@media(max-width:760px){
  .workspace{display:block;width:calc(100% - 16px);margin:12px auto;border-radius:16px}
  aside{padding:14px;border-right:0}
  .navs{flex-direction:row;flex-wrap:wrap;margin-top:12px;gap:4px}
  .nav{width:auto;font-size:11px;padding:8px 9px}
  .nav .ico{display:none}
  .sidebar-foot{display:none}
  main{padding:0 12px 16px}
  .kpi-grid{grid-template-columns:1fr}
  .chart-wrap{height:240px}
  .datebar input[type=date]{width:110px}
  .top{gap:10px}
}

/* —— 广告周报 —— */
.datebar.dimmed,.button.dimmed{opacity:.38;pointer-events:none;filter:grayscale(.2)}
.ads-board{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:4px 0 8px;
}
.ads-card{
  background:linear-gradient(180deg,#ffffff,#f7fbfe);
  border:1px solid #e2eef5;
  border-radius:12px;
  padding:14px 14px 10px;
  min-width:0;
  box-shadow:0 8px 20px #1a3a4e0d;
  border-top:3px solid var(--ch,#85a7bc);
}
.ads-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.ads-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 12px;
}
.ads-metric .label{font-size:10px;color:#708190;margin-bottom:4px}
.ads-metric .value{font-size:18px;font-weight:700;letter-spacing:-.4px;color:#1f3342;line-height:1.15}
.ads-metric .delta{font-size:11px;margin-top:5px;font-weight:560}
.ads-metric .delta.up{color:#1a7a45}
.ads-metric .delta.down{color:#b42318}
.ads-metric .delta.flat{color:#6b7c8a}
.ads-foot{margin-top:12px;padding-top:8px;border-top:1px solid #eaf0f3}
@media(max-width:1100px){
  .ads-board{grid-template-columns:1fr}
}
@media(max-width:760px){
  .ads-metrics{grid-template-columns:1fr 1fr}
}

/* 2026-11-06 audited independent registrations and advertising drill-down */
.registration-summary { margin-bottom:16px; }
.registration-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }
.registration-kpi .value { font-size:32px; }
.ad-groups { margin-top:24px;border-top:1px solid #dce5ec;padding-top:20px; }
.ad-platform { margin:16px 0;border:1px solid #dce5ec;border-radius:10px;padding:12px; }
.ad-platform summary { cursor:pointer;font-weight:700;color:#23445a; }
.table-scroll { overflow-x:auto;margin-top:12px; }
.ad-group-table { min-width:1400px; }
.ad-group-table th,.ad-group-table td { vertical-align:top;white-space:nowrap; }
.ad-group-table td.group-name { min-width:260px;max-width:360px;white-space:normal;word-break:break-word; }
.ad-group-table td.group-goal { min-width:180px;max-width:260px;white-space:normal; }
.ad-group-table small { display:block;font-size:10px;margin-top:5px; }
.ad-group-table .group-name small { color:#7b8d9c; }
@media(max-width:900px) { .registration-grid {grid-template-columns:repeat(2,minmax(0,1fr));} }

/* Period selector: week-first, single day and arbitrary range. */
.datebar select {padding:8px 7px;border:1px solid #dce6ec;border-radius:7px;background:#ffffffe0;font-size:11px;}
.datebar label {display:inline-flex;align-items:center;gap:5px;}
#custom-range {display:inline-flex;gap:6px;align-items:center;}
[hidden] {display:none!important;}
#period-summary {flex-basis:100%;text-align:right;}
.datebar :disabled {opacity:.55;cursor:default;}