:root{
  --bg-page:#F5F7FA; --bg-card:#FFF; --bg-side:#1E293B; --bg-side-hover:#273449;
  /* 浅色页面元素（表格行 / 分页 / tab / 标签）的 hover 底色。
     别再拿 --bg-side-hover 用在这些地方：那是侧栏的深色底，
     配 --text-1 的深色文字对比度只有 1.2:1，字直接看不见。 */
  --bg-hover:#F5F7FA;
  --side-text:#94A3B8; --side-text-active:#FFF; --side-active:#1E5EFF;
  --side-group:#64748B;
  --text-1:#1F2937; --text-2:#6B7280; --text-3:#9CA3AF;
  --border:#E8ECF2; --primary:#1E5EFF; --accent:#FF7A45;
  --up:#16A34A; --down:#EF4444; --warn:#F59E0B;
  --shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --radius:10px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
     background:var(--bg-page);color:var(--text-1);font-size:13px}
a{color:inherit;text-decoration:none}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:10px 12px;color:var(--text-2);font-weight:500;font-size:12px;
   border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:11px 12px;border-bottom:1px solid var(--border);color:var(--text-1)}
tbody tr:hover{background:var(--bg-hover)}
tbody tr:last-child td{border-bottom:none}

/* 布局 */
.layout{display:flex;min-height:100vh}
/* 侧栏钉在视口上：height:100vh（不是 max-height）保证深色底一直铺到屏幕底部，
   sticky 保证主内容滚动时它不动。菜单比一屏高时侧栏自己滚。 */
.side{width:220px;background:var(--bg-side);flex-shrink:0;padding:18px 0 24px;
      height:100vh;position:sticky;top:0;overflow-y:auto}
/* 深色底上系统默认滚动条太扎眼，改细、半透明 */
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-track{background:transparent}
.side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
.side::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}
/* 侧栏顶部品牌区：LOGO 占满、居中，文字去掉后只剩图。
   高度 = 上 16 + 图 48（被 max-height 卡住）+ 下 22 = 86px */
.logo{display:flex;align-items:center;justify-content:center;padding:16px 12px 22px}

/* 站点 LOGO（侧栏顶部）。**不加 background 容器** —— 图自带底色，
   有透明区域的话直接透出 .side 的 --bg-side(#1E293B)。
   现图 logo/Satas_Logo.png 是 264×80 的 8-bit RGB PNG，**没有 alpha 通道**
   （全量 21120 像素里 alpha>0 的有 0 个），自带一块**深色渐变底**
   （左上 #374248 → 右上 #54626B，底部约 #2A343A）。它比侧栏底色略浅，
   所以深色侧栏上会看到一块矩形底板 —— 观感是刻意的「logo 底板」，
   不是渲染坏了。要让它彻底融进去，得换一张带 alpha 通道的图。
   max-height 取 60 而不是 48：图是 3.3:1 的横版，48 时只能占 158px 宽、
   左右各空 11px；60 时 height:auto 算出 54.5 够不到上限，宽度吃满 180。
   尺寸怎么来的：220px 侧栏减左右各 12 内边距 = 196，width:100% 被 max-width
   卡到 180；height:auto = 180×80/264 = 54.5；object-fit:contain 不再缩放。 */
.logo-img{width:100%;max-width:180px;height:auto;max-height:60px;
          object-fit:contain;display:block}
/* 分组标题：小号、加粗、压暗，靠左对齐 padding 20px 与菜单项区分，不带圆点 */
.nav-group{padding:16px 20px 6px;font-size:11px;font-weight:600;color:var(--side-group);
           letter-spacing:.8px}
/* 菜单项：字体更亮、带圆点、左边 3px 透明框（active 时染色）。
   圆点用 ::before 而不是往 HTML 里塞 <i class="dot">：_sidebar.php 和
   admin/_header_admin.php 两处菜单都不用改，也不会漏掉哪一个。 */
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 20px;color:var(--side-text);
          cursor:pointer;font-size:13px;border-left:3px solid transparent;
          transition:background .12s,color .12s}
.nav-item::before{content:'';width:5px;height:5px;border-radius:50%;
                  background:currentColor;opacity:.5;flex-shrink:0}
.nav-item:hover{background:var(--bg-side-hover);color:var(--side-text-active)}
.nav-item.active{background:var(--bg-side-hover);color:var(--side-text-active);
                 border-left-color:var(--side-active);font-weight:600}
.nav-item.active::before{opacity:1}
.main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:100vh}
.topbar{height:56px;background:var(--bg-card);border-bottom:1px solid var(--border);
        display:flex;align-items:center;justify-content:space-between;padding:0 24px}
.crumb{color:var(--text-2);font-size:13px}
.crumb b{color:var(--text-1);font-weight:600}
.top-right{display:flex;align-items:center;gap:14px}
.content{padding:20px 24px 40px;overflow:auto}

/* 控件 */
.select{height:32px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius);
        background:var(--bg-card);color:var(--text-1);font-size:13px;cursor:pointer;outline:none}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--primary);color:#fff;
        display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
        text-transform:uppercase}
.btn{height:32px;padding:0 14px;border-radius:var(--radius);border:1px solid var(--border);
     background:var(--bg-card);color:var(--text-1);font-size:13px;cursor:pointer;
     font-family:inherit;display:inline-flex;align-items:center;gap:6px}
/* 白底按钮的文字是 --text-1，hover 底色必须用浅色 token。
   ⚠️ 依赖源码顺序：.btn.primary（下面几行）与本规则同特异性 (0,2,0)，
   靠"后者胜"压住背景色，所以主按钮 hover 不受这里影响。
   别把 .btn.primary 挪到本行之前，否则蓝底白字的主按钮会变成浅灰底白字。 */
.btn:hover{background:var(--bg-hover)}
.btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn.sm{height:26px;padding:0 10px;font-size:12px}
.btn.danger{color:var(--down);border-color:var(--down)}
.search-input{height:32px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius);
              background:var(--bg-card);color:var(--text-1);font-size:13px;outline:none;min-width:180px}

/* 卡片与栅格 */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
      box-shadow:var(--shadow);padding:18px}
.card-title{font-size:14px;font-weight:600;margin-bottom:14px;display:flex;
            justify-content:space-between;align-items:center}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:1fr}}
@media(max-width:640px){.side{width:60px}
  .nav-group,.nav-item span{display:none}
  /* 收起后只剩圆点，居中放，别让它在 20px 缩进上歪着 */
  .nav-item{justify-content:center;padding:9px 0}
  /* 侧栏只剩 60px 宽：左右各 8 内边距 = 44px 可用，宽度正好卡在 max-width 上。
     height:auto 跟着比例走（44 × 80/264 ≈ 13px），不再受 max-height 约束。 */
  .logo{padding:12px 8px}
  .logo-img{max-width:44px;max-height:44px}}

/* 标签/徽章 */
.tag,.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:500}
.badge{border-radius:4px}
.tag.new,.badge.on{background:rgba(22,163,74,.12);color:var(--up)}
.tag.old{background:rgba(107,114,128,.12);color:var(--text-2)}
.badge.off{background:rgba(107,114,128,.12);color:var(--text-2)}
.badge.warn{background:rgba(255,122,69,.12);color:var(--accent)}
.badge.info{background:rgba(30,94,255,.12);color:var(--primary)}

.hide{display:none!important}

/* 登录页 */
body.login-page{background:linear-gradient(135deg,#E8EEFF 0%,#F5F7FA 60%,#FFF3EC 100%);
                min-height:100vh;display:flex;align-items:center;justify-content:center}
.login-card{width:360px;background:#fff;border:1px solid var(--border);border-radius:14px;
            box-shadow:0 20px 50px rgba(30,94,255,.08);padding:32px 28px}
.login-card .brand{display:flex;align-items:center;gap:10px;justify-content:center;
                   margin-bottom:8px;font-size:17px;font-weight:700}
/* 登录页保持 v1.0.7 的「LOGO + 文字并排」——白卡片上空间够，不跟着侧栏一起去文字。
   上面那条 .logo-img 是给侧栏写的占满宽度规则，这里必须把
   width / max-width / max-height / object-fit **逐个复位**，
   否则这张图会被撑成 180×48、把旁边的文字挤掉（flex 里 width:100% 是按
   容器 304px 算的，能到 180）。
   box-sizing 显式写 content-box：全局是 border-box，不写的话 30px 会把
   上下内边距（3px）吃掉，图实际只渲染 24px 高。
   登录卡片本身是白的，图上那块浅色底在这里不显眼，但仍补一道描边定边界。 */
.login-card .brand .logo-img{width:auto;height:30px;
  max-width:none;max-height:none;object-fit:fill;box-sizing:content-box;
  border:1px solid var(--border);border-radius:8px;padding:3px 5px}
/* 查看密码页（site_password.php）的 .brand 里是裸 <img>，不带 .logo-img ——
   那条规则是给侧栏写的（width:100% + 复位），那张图干脆不套那个类。
   这条只兜窄屏：卡宽 360px，图按 264×80 等比缩到 40 高（约 132 宽）本来放得下，
   万一以后换更宽的图也不至于撑破卡片。
   特异性 (0,2,1) 低于上面 .logo-img 的 (0,3,0)，登录页那张不受影响。 */
.login-card .brand img{max-width:100%;max-height:40px}
.login-card .sub{text-align:center;color:var(--text-2);font-size:12px;margin-bottom:22px}
.login-card .field{margin-bottom:14px}
.login-card .field label{display:block;font-size:12px;color:var(--text-2);margin-bottom:6px}
.login-card .field input{width:100%;height:38px;padding:0 12px;font-size:13px;
  border:1.5px solid var(--border);border-radius:10px;background:#fff;outline:none;
  font-family:inherit;color:var(--text-1)}
.login-card .field input:focus{border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(30,94,255,.1)}
.login-card .btn-primary-full{width:100%;height:40px;border:none;border-radius:10px;
  background:var(--primary);color:#fff;font-size:14px;font-weight:600;
  cursor:pointer;font-family:inherit;margin-top:6px}
.login-card .btn-primary-full:hover{background:#1750d8}
.login-error{background:rgba(239,68,68,.08);color:var(--down);font-size:12px;
  padding:8px 12px;border-radius:8px;margin-bottom:12px;border:1px solid rgba(239,68,68,.2)}
.login-hint{text-align:center;color:var(--text-3);font-size:11.5px;margin-top:16px;
  padding-top:14px;border-top:1px dashed var(--border)}

/* 指标卡 */
.stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);
      box-shadow:var(--shadow);padding:14px 16px}
.stat .label{font-size:12px;color:var(--text-2);margin-bottom:8px}
.stat .value{font-size:22px;font-weight:700;letter-spacing:-.5px;
      font-variant-numeric:tabular-nums}

/* 提示条 */
.tips-box{background:linear-gradient(135deg,rgba(30,94,255,.06),rgba(255,122,69,.04));
          border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:16px}

.pagination{display:flex;justify-content:flex-end;align-items:center;gap:8px;
            margin-top:14px;font-size:13px;color:var(--text-2);flex-wrap:wrap}
.pagination .pg{padding:5px 10px;border:1px solid var(--border);border-radius:var(--radius);
                cursor:pointer;background:var(--bg-card);color:var(--text-1)}
.pagination .pg:hover{background:var(--bg-hover)}
.pagination .pg.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.url{color:var(--primary);cursor:pointer;max-width:280px;overflow:hidden;
     text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
.url:hover{text-decoration:underline}

/* 过滤条 */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
.date-range{display:flex;align-items:center;gap:8px;background:var(--bg-card);
            border:1px solid var(--border);border-radius:var(--radius);padding:6px 12px;
            color:var(--text-2);font-size:13px}
.tabs{display:flex;background:var(--bg-card);border:1px solid var(--border);
      border-radius:var(--radius);overflow:hidden}
.tab{padding:7px 15px;font-size:13px;color:var(--text-2);cursor:pointer;
     border-right:1px solid var(--border);white-space:nowrap}
.tab:last-child{border-right:none}
.tab.active{background:var(--primary);color:#fff;font-weight:600}
.tab:hover:not(.active){background:var(--bg-hover)}

/* 6 列指标卡网格 */
.grid-6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:16px}
@media(max-width:1100px){.grid-6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.grid-6{grid-template-columns:repeat(2,1fr)}}

/* 首页国家列表 */
.country-list{display:flex;flex-direction:column;gap:14px;padding:4px 0}
.country-item{display:flex;align-items:center;gap:12px}
.country-flag{font-size:22px;line-height:1;width:28px;text-align:center;flex-shrink:0}
.country-info{flex:1;min-width:0}
.country-name{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;margin-bottom:6px}
.country-name b{font-weight:600}
.country-name span{color:var(--text-2);font-size:12px;font-variant-numeric:tabular-nums}
.country-name span em{color:var(--text-3);font-style:normal;margin-left:6px}
.bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden;min-width:60px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:3px}

/* 涨跌 */
.stat .delta{font-size:12px;margin-top:6px}
.stat .delta.up{color:var(--up)}
.stat .delta.down{color:var(--down)}
.card-title .more{font-size:12px;color:var(--text-3);font-weight:400;cursor:pointer}

.grid-2e{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:1100px){.grid-2e{grid-template-columns:1fr}}

/* 引擎卡片 */
.engine-card{display:flex;align-items:center;gap:10px;padding:14px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow)}
.engine-icon{width:32px;height:32px;border-radius:8px;display:flex;
  align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:15px}
.engine-info b{display:block;font-size:13px;font-weight:600}
.engine-info span{font-size:11px;color:var(--text-2)}

/* 关键词云 */
.kw-cloud{display:flex;flex-wrap:wrap;gap:10px;padding:8px 0;line-height:1.6}
.kw-cloud span{padding:4px 12px;border-radius:20px;background:#F0F2F5;
  color:var(--text-1);cursor:pointer;transition:background .15s}
/* hover 时把文字压深，别去调底色 alpha：底色就是 primary 叠白，
   alpha 越大约接近纯 primary，和同色文字越像 → 对比度反而降到 4.13:1。
   #1750D8 是登录页按钮 hover 已在用的深主色，5.59:1。 */
.kw-cloud span:hover{background:rgba(30,94,255,.12);color:#1750D8}

.tag.goal{background:rgba(255,122,69,.15);color:var(--accent)}
.code-block{background:var(--bg-page);padding:12px;border-radius:var(--radius);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
  color:var(--text-1);word-break:break-all;border:1px solid var(--border);
  line-height:1.6;white-space:pre-wrap}

/* 区块小标题：左边标题、右边浅色提示。setting.php 里已有内联写法，
   这里落成类，新代码直接用 .sec-title 即可。 */
.sec-title{display:flex;align-items:baseline;justify-content:space-between;
  font-size:14px;font-weight:600;margin-bottom:12px}

/* 统计图标 6 选 1（参数设置 → 统计图标）：6 张现成 PNG，选了就整页 POST 存下来。
   隐藏原生 radio 用 .switch 那套（position:absolute + opacity:0），不是 display:none，
   这样键盘还能 Tab 到、方向键也能换选项。 */
.icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.icon-pick{position:relative;display:block;cursor:pointer;padding:16px;
  border:2px solid var(--border);border-radius:10px;text-align:center;
  background:var(--bg-page);transition:border-color .15s,background .15s}
.icon-pick input{opacity:0;width:0;height:0;position:absolute}
.icon-pick:hover{border-color:var(--text-3)}
.icon-pick:focus-within{border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(30,94,255,.15)}
.icon-pick.is-on{border-color:var(--primary);background:rgba(30,94,255,.04)}
.icon-pick img{max-width:100%;max-height:48px;display:block;margin:0 auto 8px}
.icon-pick .pick-name{font-size:12px;color:var(--text-2)}

/* 开关控件（参数设置 → 统计图标 的显示开关） */
.switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .slider{position:absolute;inset:0;cursor:pointer;border-radius:22px;
  background:var(--border);transition:background .2s}
.switch .slider::before{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;
  border-radius:50%;background:#fff;box-shadow:var(--shadow);transition:transform .2s}
.switch input:checked + .slider{background:var(--primary)}
.switch input:checked + .slider::before{transform:translateX(18px)}
.switch input:focus-visible + .slider{outline:2px solid var(--primary);outline-offset:2px}

.funnel{display:flex;flex-direction:column;gap:8px;padding:10px 0}
.funnel-row{display:flex;align-items:center;gap:14px}
.funnel-label{width:160px;font-size:13px;font-weight:500;flex-shrink:0}

.retention-table td{font-variant-numeric:tabular-nums;text-align:center;padding:8px 10px}
.retention-table td:first-child{text-align:left;font-family:ui-monospace,monospace;font-size:12px}
.retention-table td:nth-child(2){color:var(--text-2)}

.timeline{padding:4px 0}
.timeline .tl-item::before{content:'';position:absolute;left:-7px;top:0;
  width:12px;height:12px;border-radius:50%;background:var(--primary);
  border:3px solid var(--bg-card);box-shadow:0 0 0 1px var(--primary)}
.timeline .tl-item.old::before{background:var(--text-3);box-shadow:0 0 0 1px var(--text-3)}

/* 弹窗 */
.modal-bg{position:fixed;inset:0;background:rgba(17,24,39,.45);display:none;
          align-items:flex-start;justify-content:center;padding:56px 16px 24px;
          overflow-y:auto;z-index:1000}
.modal-bg.show{display:flex}
.modal{background:var(--bg-card);border-radius:var(--radius);width:100%;max-width:460px;
       padding:20px 22px;box-shadow:0 20px 48px rgba(16,24,40,.22)}
.modal h3{margin:0 0 16px;font-size:15px;display:flex;align-items:center;
          justify-content:space-between}
.modal .row{margin-bottom:14px}
.modal .row label{display:block;font-size:12px;color:var(--text-2);margin-bottom:6px}
.modal .row input[type=text],.modal .row input[type=password]{width:100%;height:34px;
       padding:0 10px;border:1px solid var(--border);border-radius:var(--radius);
       font-size:13px;font-family:inherit;color:var(--text-1);background:var(--bg-card)}
.modal .row select{width:100%;height:34px;padding:0 10px;border:1px solid var(--border);
       border-radius:var(--radius);font-size:13px;font-family:inherit;
       color:var(--text-1);background:var(--bg-card)}
.modal .row input:focus,.modal .row select:focus{border-color:var(--primary);outline:none}
.modal .row input[readonly]{background:var(--bg-page);color:var(--text-2)}
.modal .row .btn{flex-shrink:0}
.modal .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}