/* ===== SEO 统计站 · 多页面板公共样式 =====
   从 index.html 的精致深色 v2 设计抽出，供所有独立页面 (traffic.html / data.html 等) 共用。
   布局由原「固定左侧栏 SPA」改为「顶部导航条 + 独立页」。改这一处，全站生效。 */
:root{
  --bg:#0a0e14; --bg2:#0c1118;
  --card:rgba(20,27,36,.72); --card-solid:#141b24;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.13);
  --fg:#e8eef4; --fg2:#c2ccd6; --mut:#7d8a99;
  --acc:#22d3ee; --acc2:#38bdf8; --acc-dim:rgba(34,211,238,.13);
  --ok:#34d399; --warn:#fbbf24; --bad:#f87171;
  --grad:linear-gradient(135deg,#22d3ee,#38bdf8);
  --r:14px; --r2:10px; --pill:999px;
  --sh:0 8px 28px rgba(0,0,0,.4); --sh-sm:0 2px 12px rgba(0,0,0,.28);
}
*{ box-sizing:border-box; }
body{ margin:0; font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Microsoft YaHei",sans-serif;
  color:var(--fg); background:var(--bg);
  background-image:radial-gradient(1100px 560px at 82% -12%,rgba(34,211,238,.07),transparent 60%),radial-gradient(820px 480px at -12% 112%,rgba(56,189,248,.06),transparent 55%);
  background-attachment:fixed; -webkit-font-smoothing:antialiased; }
a{ color:var(--acc); text-decoration:none; } a:hover{ text-decoration:underline; }
::selection{ background:rgba(34,211,238,.26); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#1b2430; border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:#283544; background-clip:padding-box; }

/* ---- 登录 ---- */
input,select,button{ font:inherit; }
#login{ max-width:380px; margin:16vh auto; padding:32px; background:var(--card-solid); border:1px solid var(--line2); border-radius:var(--r); box-shadow:var(--sh); }
#login h1{ font-size:19px; margin:0 0 18px; font-weight:700; }
input[type=password],input[type=text]{ width:100%; padding:11px 13px; background:#070a0f; border:1px solid var(--line2); border-radius:var(--r2); color:var(--fg); outline:none; transition:border-color .15s,box-shadow .15s; }
input[type=password]:focus,input[type=text]:focus{ border-color:var(--acc); box-shadow:0 0 0 3px var(--acc-dim); }
.err{ color:var(--bad); min-height:18px; font-size:13px; margin-top:8px; }
button{ cursor:pointer; padding:10px 15px; background:var(--grad); color:#06121a; font-weight:600; border:none; border-radius:var(--r2); box-shadow:var(--sh-sm); transition:filter .15s,transform .1s; }
button:hover{ filter:brightness(1.08); } button:active{ transform:translateY(1px); }
button.ghost{ background:transparent; border:1px solid var(--line2); color:var(--mut); box-shadow:none; font-weight:500; }
button.ghost:hover{ color:var(--fg); border-color:var(--acc); background:var(--acc-dim); filter:none; }

/* ---- 顶部导航条（替代原左侧栏）---- */
.hide{ display:none; }
#app{ min-height:100vh; }
.appbar{ position:sticky; top:0; z-index:30; background:rgba(10,14,20,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.appbar-row{ display:flex; align-items:center; gap:14px; padding:11px 22px; max-width:1240px; margin:0 auto; }
.appbar-row.nav{ padding-bottom:7px; }
.brandlogo{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:800; letter-spacing:.3px; white-space:nowrap; }
.brandlogo .dot{ width:20px; height:20px; border-radius:6px; background:var(--grad); box-shadow:0 0 14px rgba(34,211,238,.5); flex:none; }
.topnav{ display:flex; gap:2px; overflow-x:auto; flex:1; scrollbar-width:none; }
.topnav::-webkit-scrollbar{ display:none; }
.topnav a{ white-space:nowrap; color:var(--mut); padding:8px 12px; border-radius:var(--r2); font-size:13px; font-weight:500; transition:color .15s,background .15s; }
.topnav a:hover{ color:var(--fg); background:rgba(255,255,255,.05); text-decoration:none; }
.topnav a.active{ color:var(--fg); background:var(--acc-dim); font-weight:600; }
.filterbar{ display:flex; align-items:center; gap:8px; padding:9px 22px; max-width:1240px; margin:0 auto; flex-wrap:wrap; border-top:1px solid var(--line); }
.filterbar select{ padding:8px 11px; background:var(--card-solid); border:1px solid var(--line2); border-radius:var(--r2); color:var(--fg); outline:none; }
.filterbar select:focus{ border-color:var(--acc); }
.filterbar .sp{ flex:1; }

/* ---- 内容容器 ---- */
main{ padding:24px; max-width:1240px; margin:0 auto; }
.pagehead{ margin:2px 0 18px; }
.pagehead h1{ font-size:20px; font-weight:750; margin:0 0 4px; letter-spacing:-.3px; }
.pagehead .sub{ color:var(--mut); font-size:13px; }
.subh{ color:var(--mut); font-size:12px; font-weight:600; margin:16px 0 6px; }
.muted{ color:var(--mut); }
.hint{ color:var(--mut); font-size:12px; line-height:1.6; margin:-4px 0 14px; }

/* ---- 概览卡片 ---- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:22px; }
.card{ position:relative; overflow:hidden; background:var(--card); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--sh-sm); transition:border-color .15s,transform .15s; }
.card:hover{ border-color:var(--line2); transform:translateY(-2px); }
.card::after{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--grad); opacity:0; transition:opacity .2s; }
.card:hover::after{ opacity:.7; }
.card .k{ color:var(--mut); font-size:12px; font-weight:500; }
.card .v{ font-size:28px; font-weight:750; margin-top:8px; letter-spacing:-.5px; font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#ffffff,#b9d6e4); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* ---- 区块 / 表格 ---- */
section{ background:var(--card); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:var(--r); padding:18px; margin-bottom:18px; box-shadow:var(--sh-sm); }
section h2{ display:flex; align-items:center; gap:8px; font-size:13.5px; margin:0 0 14px; color:var(--fg); font-weight:700; }
section h2::before{ content:""; width:4px; height:14px; border-radius:3px; background:var(--grad); flex:none; }
.wrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
th,td{ text-align:left; padding:9px 11px; border-bottom:1px solid var(--line); white-space:nowrap; }
th{ color:var(--mut); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; }
tbody tr{ transition:background .12s; } tbody tr:hover{ background:rgba(255,255,255,.025); } tbody tr:last-child td{ border-bottom:none; }

/* ---- 徽标 / 网格 ---- */
.pill{ padding:2px 9px; border-radius:var(--pill); font-size:12px; font-weight:600; }
.pill.ok{ background:rgba(52,211,153,.15); color:var(--ok); }
.pill.no{ background:rgba(251,191,36,.15); color:var(--warn); }
.pill.info{ background:var(--acc-dim); color:var(--acc); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.rpill{ background:transparent; border:1px solid var(--line2); color:var(--mut); padding:4px 11px; border-radius:var(--pill); font-size:12px; box-shadow:none; cursor:pointer; transition:color .15s,border-color .15s,background .15s; }
.rpill:hover{ filter:none; color:var(--fg); border-color:var(--acc); }
.rpill.on{ background:var(--acc-dim); border-color:var(--acc); color:var(--acc); }

@media (max-width:900px){
  .appbar-row,.filterbar{ padding-left:14px; padding-right:14px; }
  .grid2{ grid-template-columns:1fr; }
}

/* ---- 品牌折叠块（收录排名 / 内链页面用）---- */
.brand{ background:var(--card); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:var(--r); margin-bottom:12px; overflow:hidden; transition:border-color .15s; }
.brand.open{ border-color:var(--line2); }
.brand-hd{ display:flex; align-items:center; gap:10px; padding:14px 16px; cursor:pointer; user-select:none; flex-wrap:wrap; transition:background .15s; }
.brand-hd:hover{ background:rgba(255,255,255,.03); }
.brand .caret{ color:var(--mut); font-size:11px; transition:transform .15s; }
.brand.open .caret{ transform:rotate(90deg); }
.brand-name{ font-size:15px; font-weight:700; }
.brand-doms{ color:var(--mut); font-size:12px; }
.brand-sum{ display:flex; gap:6px; flex-wrap:wrap; margin-left:auto; }
.chip{ font-size:12px; padding:3px 10px; border-radius:var(--pill); border:1px solid var(--line2); color:var(--mut); white-space:nowrap; }
.chip b{ color:var(--fg); }
.chip.good{ border-color:rgba(52,211,153,.45); color:var(--ok); background:rgba(52,211,153,.08); }
.chip.good b{ color:var(--ok); }
.chip.none{ opacity:.55; }
.brand-bd{ padding:4px 16px 16px; border-top:1px solid var(--line); display:none; }
.brand.open .brand-bd{ display:block; }

/* 品牌汇总小网格（收录/SerpApi/GSC/必应 × 核心3词/长尾） */
.sum-grid{ display:grid; grid-template-columns:96px 1fr 1fr 1fr; gap:5px 12px; align-items:baseline; width:100%; margin-top:10px; }
.gcell-h{ font-size:10.5px; color:#5a6776; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.grow{ font-size:11.5px; font-weight:700; color:var(--mut); white-space:nowrap; }
.grow.core{ color:var(--acc); }
.gcell{ font-size:12px; color:var(--mut); white-space:nowrap; }
.gcell.none{ opacity:.4; }
.gcell.good{ color:var(--ok); }
.gcell b{ color:var(--fg); font-weight:700; }
.gcell .gdom{ color:var(--mut); font-weight:400; font-size:11px; }

/* 可折叠明细（未收录页面 / 排名分段） */
details.pendDom{ border:1px solid var(--line); border-radius:var(--r2); margin-bottom:8px; overflow:hidden; }
details.pendDom>summary{ cursor:pointer; padding:11px 14px; user-select:none; list-style:none; }
details.pendDom>summary::-webkit-details-marker{ display:none; }
details.pendDom>summary::before{ content:"▸"; color:var(--mut); margin-right:8px; font-size:11px; }
details.pendDom[open]>summary::before{ content:"▾"; }
details.pendDom[open]>summary{ border-bottom:1px solid var(--line); background:rgba(255,255,255,.02); }
details.pendDom table{ margin:4px 0; }
details.subseg{ margin:7px 0; }
details.subseg>summary{ cursor:pointer; padding:7px 11px; user-select:none; list-style:none; font-size:12px; font-weight:600; color:var(--mut); background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:var(--r2); }
details.subseg>summary::-webkit-details-marker{ display:none; }
details.subseg>summary::before{ content:"▸"; margin-right:7px; font-size:10px; color:var(--mut); }
details.subseg[open]>summary::before{ content:"▾"; }
details.subseg[open]>summary{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
details.subseg table{ margin:0 0 4px; }

/* 设置面板（收录/排名页用） */
#settings label{ font-size:13px; color:var(--fg); }
#settings .muted{ color:var(--mut); }