/* ══════════════════════════════════════════════════════════
       CSS 设计令牌 (Design Tokens)
    ══════════════════════════════════════════════════════════ */
    :root {
      /* 主色调 */
      --primary:         #1a5fd8;
      --primary-dark:    #0e47b0;
      --primary-light:   #e8f0fd;
      --primary-rgb:     26, 95, 216;

      /* 辅助色 */
      --success:         #12a05c;
      --success-light:   #e6f7ef;
      --info:            #0891b2;
      --info-light:      #e0f5fa;
      --warning:         #d97706;
      --warning-light:   #fef3c7;
      --danger:          #dc2626;
      --danger-light:    #fef2f2;

      /* 中性色阶 */
      --gray-50:         #f8fafc;
      --gray-100:        #f1f5f9;
      --gray-200:        #e2e8f0;
      --gray-300:        #cbd5e1;
      --gray-400:        #94a3b8;
      --gray-500:        #64748b;
      --gray-600:        #475569;
      --gray-700:        #334155;
      --gray-800:        #1e293b;
      --gray-900:        #0f172a;

      /* 卡片 & 背景 */
      --bg-page:         #f1f5f9;
      --bg-card:         #ffffff;
      --border-color:    #e2e8f0;

      /* 圆角 */
      --radius-sm:       0.5rem;
      --radius-md:       0.75rem;
      --radius-lg:       1rem;

      /* 阴影 */
      --shadow-xs:       0 1px 2px rgba(0,0,0,.06);
      --shadow-sm:       0 2px 8px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
      --shadow-md:       0 4px 16px rgba(0,0,0,.09), 0 2px 4px rgba(0,0,0,.05);
      --shadow-lg:       0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);

      /* 过渡 */
      --ease:            cubic-bezier(0.4, 0, 0.2, 1);
      --duration-fast:   150ms;
      --duration-normal: 220ms;
      --duration-slow:   350ms;
    }

    /* ══════════════════════════════════════════════════════════
       基础样式
    ══════════════════════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; }

    body {
      background-color: var(--bg-page);
      /* 系统字体：macOS→San Francisco，Windows→Segoe UI，Android→Roboto，fallback→sans-serif */
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
      font-size: 1rem;        /* 16px — 浏览器默认基准，+1号后的合理字号 */
      color: var(--gray-800);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* ══════════════════════════════════════════════════════════
       导航栏
    ══════════════════════════════════════════════════════════ */
    .navbar {
      background: linear-gradient(135deg, #1a5fd8 0%, #0e3fa8 100%) !important;
      padding-top: 0.625rem;
      padding-bottom: 0.625rem;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 4px 24px rgba(14,63,168,.35);
    }

    .navbar-brand {
      font-weight: 700;
      letter-spacing: -0.01em;
      font-size: 1.125rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: #fff !important;
    }

    .brand-icon {
      width: 32px;
      height: 32px;
      background: rgba(255,255,255,0.18);
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
      border: 1px solid rgba(255,255,255,0.2);
      vertical-align: middle;
    }

    .brand-sub {
      font-size: 0.75rem;
      font-weight: 400;
      color: rgba(255,255,255,0.5);
      letter-spacing: 0;
    }

    #siteSwitcherBtn {
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.9375rem;
      font-weight: 500;
    }

    /* 导航栏按钮统一风格 */
    .navbar .btn-outline-light {
      border-color: rgba(255,255,255,0.3);
      color: rgba(255,255,255,0.9);
      font-size: 0.875rem;
      font-weight: 500;
      transition: background var(--duration-fast) var(--ease),
                  border-color var(--duration-fast) var(--ease),
                  color var(--duration-fast) var(--ease),
                  transform var(--duration-fast) var(--ease);
    }
    .navbar .btn-outline-light:hover {
      background: rgba(255,255,255,0.18);
      border-color: rgba(255,255,255,0.55);
      color: #fff;
      transform: translateY(-1px);
    }
    .navbar .btn-outline-light:active { transform: translateY(0); }

    /* 移动端导航栏右侧工具栏占满剩余宽度时保持右对齐 */
    @media (max-width: 576px) {
      .navbar .container-fluid { flex-wrap: wrap; row-gap: 0.5rem; }
      .navbar .d-flex.ms-auto { flex-grow: 1; justify-content: flex-end; }
      #siteSwitcherBtn { max-width: 140px; }
    }


    /* ══════════════════════════════════════════════════════════
       全局卡片样式
    ══════════════════════════════════════════════════════════ */
    .card {
      border: 1px solid var(--border-color) !important;
      border-radius: var(--radius-md) !important;
      box-shadow: var(--shadow-sm) !important;
      background: var(--bg-card);
    }

    .card-header {
      background: var(--bg-card) !important;
      border-bottom: 1px solid var(--border-color) !important;
      padding: 0.875rem 1.25rem !important;
      font-size: 1rem;
      font-weight: 600;
      color: var(--gray-800);
    }

    .card-body { padding: 1.25rem; }

    .card-footer {
      background: var(--gray-50) !important;
      border-top: 1px solid var(--border-color) !important;
      padding: 0.75rem 1.25rem !important;
    }

    /* ══════════════════════════════════════════════════════════
       统计卡片
    ══════════════════════════════════════════════════════════ */
    .stat-card {
      border-left: 4px solid transparent !important;
      border-radius: var(--radius-md) !important;
      transition: transform var(--duration-normal) var(--ease),
                  box-shadow var(--duration-normal) var(--ease);
      overflow: hidden;
    }

    .stat-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md) !important;
    }

    .stat-card .card-body { padding: 1.1rem 1.25rem; }

    .stat-card.c-blue   { border-left-color: var(--primary) !important; }
    .stat-card.c-green  { border-left-color: var(--success) !important; }
    .stat-card.c-cyan   { border-left-color: var(--info) !important; }
    .stat-card.c-yellow { border-left-color: var(--warning) !important; }

    /* stat-label 替代原来的 text-muted small mb-1 */
    .stat-card .text-muted.small {
      font-size: 0.875rem !important;    /* 14px — +1号 */
      font-weight: 500;
      letter-spacing: 0.01em;
      margin-bottom: 0.375rem !important;
    }

    .stat-number {
      font-size: 2.25rem;     /* 36px — +1号 */
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    .stat-icon {
      font-size: 2.5rem;
      opacity: 0.12;
      transition: opacity var(--duration-normal) var(--ease);
    }
    .stat-card:hover .stat-icon { opacity: 0.22; }

    /* 入场动画 */
    @keyframes statCardIn {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .stat-card { animation: statCardIn 0.4s var(--ease) both; }
    .row .col-6:nth-child(1) .stat-card { animation-delay: 0.05s; }
    .row .col-6:nth-child(2) .stat-card { animation-delay: 0.10s; }
    .row .col-6:nth-child(3) .stat-card { animation-delay: 0.15s; }
    .row .col-6:nth-child(4) .stat-card { animation-delay: 0.20s; }

    /* ══════════════════════════════════════════════════════════
       站点标题行
    ══════════════════════════════════════════════════════════ */
    #siteCurrentTitleRow {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.625rem;
      min-width: 0;
    }
    #siteCurrentTitleRow > i { flex-shrink: 0; }
    #currentSiteTitle {
      font-size: 1.125rem;
      font-weight: 700;
      color: var(--gray-800);
      letter-spacing: -0.01em;
      margin: 0;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ══════════════════════════════════════════════════════════
       分布卡片（热门页面 & 来源）
    ══════════════════════════════════════════════════════════ */
    .dist-card .card-header {
      padding: 0.625rem 1.125rem !important;
      font-size: 0.9375rem;
    }
    .dist-card .card-body {
      padding: 0.625rem 1.125rem !important;
      min-height: 120px;
    }
    .dist-item {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.25rem 0;
      min-width: 0;
    }
    .dist-item + .dist-item { border-top: 1px solid var(--gray-100); }
    /* label 占剩余空间，bar 区域限制为容器的 25% */
    .dist-label {
      flex: 1 1 0;
      min-width: 0;
      font-size: 0.8125rem;
      color: var(--gray-700);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .dist-label a {
      color: inherit;
      text-decoration: none;
    }
    .dist-label a:hover {
      color: var(--primary);
      text-decoration: underline;
    }
    .dist-bar-wrap {
      flex: 0 0 25%;
      background: var(--gray-100);
      border-radius: 99px;
      height: 7px;
      overflow: hidden;
    }
    .dist-bar {
      height: 7px;
      border-radius: 99px;
      transition: width 0.5s var(--ease);
      min-width: 2px;
    }
    .dist-pct {
      flex: 0 0 36px;
      text-align: right;
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--gray-500);
    }
    .dist-count {
      flex: 0 0 52px;
      text-align: right;
      font-size: 0.8125rem;
      color: var(--gray-500);
      white-space: nowrap;
    }

    /* ══════════════════════════════════════════════════════════
       图表区
    ══════════════════════════════════════════════════════════ */
    .chart-wrap { position: relative; height: 240px; }

    /* 周/月切换按钮组 */
    .btn-group .btn-outline-secondary {
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--gray-500);
      border-color: var(--gray-300);
      transition: background var(--duration-fast) var(--ease),
                  color var(--duration-fast) var(--ease),
                  border-color var(--duration-fast) var(--ease);
      padding: 0.25rem 0.65rem;
    }
    .btn-group .btn-outline-secondary:hover {
      background: var(--primary-light);
      color: var(--primary);
      border-color: var(--primary);
    }
    .btn-group .btn-outline-secondary.active {
      background: var(--primary) !important;
      color: #fff !important;
      border-color: var(--primary) !important;
      box-shadow: 0 2px 8px rgba(26,95,216,.35);
    }

    /* ══════════════════════════════════════════════════════════
       表格
    ══════════════════════════════════════════════════════════ */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    .table {
      font-size: 0.9375rem;   /* 15px — +1号 */
      border-color: var(--border-color) !important;
    }

    .table thead th {
      font-size: 0.8125rem;   /* 13px — 表头 +1号 */
      font-weight: 600;
      letter-spacing: 0.055em;
      text-transform: uppercase;
      white-space: nowrap;
      vertical-align: middle;
      background: var(--gray-800) !important;
      color: rgba(255,255,255,0.88) !important;
      border-color: var(--gray-700) !important;
      padding: 0.7rem 0.875rem;
    }

    .table tbody td {
      vertical-align: middle;
      padding: 0.6rem 0.875rem;
      border-color: var(--gray-100) !important;
      color: var(--gray-700);
      transition: background var(--duration-fast) var(--ease);
    }

    .table tbody tr:nth-child(odd)  { background-color: var(--gray-50); }
    .table tbody tr:hover           { background-color: rgba(26,95,216,0.05) !important; }

    /* ══════════════════════════════════════════════════════════
       徽章 (Badge)
    ══════════════════════════════════════════════════════════ */
    .badge {
      font-size: 0.75rem;
      font-weight: 600;
      padding: 0.3em 0.6em;
      border-radius: 0.375rem;
      letter-spacing: 0.01em;
    }

    /* ══════════════════════════════════════════════════════════
       按钮全局优化
    ══════════════════════════════════════════════════════════ */
    .btn {
      font-size: 0.9375rem;
      font-weight: 500;
      border-radius: var(--radius-sm);
      transition: background var(--duration-fast) var(--ease),
                  border-color var(--duration-fast) var(--ease),
                  color var(--duration-fast) var(--ease),
                  box-shadow var(--duration-fast) var(--ease),
                  transform var(--duration-fast) var(--ease);
    }

    .btn:not(:disabled):active { transform: scale(0.97); }

    .btn-primary { background: var(--primary); border-color: var(--primary); }
    .btn-primary:hover {
      background: var(--primary-dark);
      border-color: var(--primary-dark);
      box-shadow: 0 4px 12px rgba(26,95,216,.35);
      transform: translateY(-1px);
    }
    .btn-primary:not(:disabled):active { transform: scale(0.97) translateY(0); box-shadow: none; }

    .btn-danger:hover {
      box-shadow: 0 4px 12px rgba(220,38,38,.35);
      transform: translateY(-1px);
    }
    .btn-danger:not(:disabled):active { transform: scale(0.97) translateY(0); box-shadow: none; }

    .btn-outline-secondary:hover,
    .btn-outline-info:hover,
    .btn-outline-danger:hover,
    .btn-success:hover { transform: translateY(-1px); }

    .btn-sm {
      font-size: 0.875rem;
      padding: 0.32rem 0.7rem;
      border-radius: 0.4rem;
    }

    /* ══════════════════════════════════════════════════════════
       表单控件
    ══════════════════════════════════════════════════════════ */
    .form-control,
    .form-select {
      font-size: 0.9375rem;
      border-color: var(--gray-300);
      border-radius: var(--radius-sm);
      color: var(--gray-800);
      transition: border-color var(--duration-fast) var(--ease),
                  box-shadow var(--duration-fast) var(--ease);
      background-color: #fff;
    }
    .form-control:focus,
    .form-select:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(26,95,216,.15);
    }
    .form-control-sm,
    .form-select-sm {
      font-size: 0.9rem;
      border-radius: 0.4rem;
    }
    .form-label {
      font-size: 0.9375rem;
      font-weight: 500;
      color: var(--gray-600);
      margin-bottom: 0.35rem;
    }
    .form-text { font-size: 0.875rem; color: var(--gray-400); }

    /* ══════════════════════════════════════════════════════════
       过滤器面板（事件记录卡片内嵌）
    ══════════════════════════════════════════════════════════ */
    .filter-panel {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--border-color);
      background: var(--gray-50);
    }

    /* ══════════════════════════════════════════════════════════
       分页
    ══════════════════════════════════════════════════════════ */
    .pagination-sm .page-link {
      font-size: 0.875rem;
      padding: 0.38rem 0.72rem;
      color: var(--gray-600);
      border-color: var(--border-color);
      transition: background var(--duration-fast) var(--ease),
                  color var(--duration-fast) var(--ease),
                  border-color var(--duration-fast) var(--ease);
    }
    .pagination-sm .page-link:hover {
      background: var(--primary-light);
      color: var(--primary);
      border-color: var(--primary);
    }
    .pagination-sm .page-item.active .page-link {
      background: var(--primary);
      border-color: var(--primary);
      box-shadow: 0 2px 8px rgba(26,95,216,.3);
    }
    .pagination-sm .page-item.disabled .page-link { color: var(--gray-300); }

    /* ══════════════════════════════════════════════════════════
       危险操作区
    ══════════════════════════════════════════════════════════ */
    .danger-card {
      border: 1px solid #fca5a5 !important;
      border-radius: var(--radius-md) !important;
      overflow: hidden;
    }
    .danger-card .card-header {
      background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
      border-bottom: none !important;
      border-radius: 0 !important;
      padding: 0.75rem 1.25rem !important;
      font-size: 0.9375rem;
      font-weight: 600;
    }

    /* ══════════════════════════════════════════════════════════
       站点管理列表
    ══════════════════════════════════════════════════════════ */
    .site-list-item {
      transition: background var(--duration-fast) var(--ease);
      border-bottom: 1px solid var(--border-color);
    }
    .site-list-item:last-child { border-bottom: none; }
    .site-list-item:hover { background: var(--primary-light); }

    .site-list-item .fw-semibold { font-size: 0.9375rem; }
    .site-list-item .text-muted  { font-size: 0.8125rem; }

    /* ══════════════════════════════════════════════════════════
       代码块
    ══════════════════════════════════════════════════════════ */
    .api-code {
      background: #0f1117;
      color: #c9d1d9;
      border-radius: var(--radius-sm);
      font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', 'Consolas', 'Courier New', monospace;
      font-size: 0.875rem;    /* 14px — +1号 */
      padding: 1.125rem 1.25rem;
      overflow-x: auto;
      white-space: pre;
      line-height: 1.75;
      border: 1px solid rgba(255,255,255,0.07);
    }

    /* ══════════════════════════════════════════════════════════
       卡片级加载遮罩
    ══════════════════════════════════════════════════════════ */
    .card-loading-overlay {
      position: absolute;
      inset: 0;
      background: rgba(255,255,255,0.82);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-md);
      z-index: 10;
      pointer-events: none;
    }
    .card-loading-overlay .spinner-border {
      width: 1.75rem;
      height: 1.75rem;
      border-width: 0.18rem;
    }

    /* ══════════════════════════════════════════════════════════
       表格加载状态
    ══════════════════════════════════════════════════════════ */
    .table-loading-row td {
      padding: 2rem 0 !important;
    }

    /* ══════════════════════════════════════════════════════════
       加载遮罩层
    ══════════════════════════════════════════════════════════ */
    #loadingOverlay {
      position: fixed;
      inset: 0;
      background: rgba(255,255,255,0.82);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }
    #loadingOverlay .spinner-border {
      width: 2.5rem;
      height: 2.5rem;
      border-width: 0.22rem;
    }

    /* ══════════════════════════════════════════════════════════
       Toast 提示容器
    ══════════════════════════════════════════════════════════ */
    #toastContainer { z-index: 11000; }

    .toast {
      border-radius: 0.625rem !important;
      box-shadow: var(--shadow-lg) !important;
      font-size: 0.9375rem;
      border: none !important;
      min-width: 280px;
      animation: toastIn 0.25s var(--ease);
    }
    @keyframes toastIn {
      from { opacity: 0; transform: translateY(8px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .toast-body { padding: 0.75rem 1rem; font-weight: 500; }

    /* ══════════════════════════════════════════════════════════
       模态框
    ══════════════════════════════════════════════════════════ */
    .modal-content {
      border: none !important;
      border-radius: var(--radius-lg) !important;
      box-shadow: var(--shadow-lg) !important;
      overflow: hidden;
    }
    .modal-header {
      padding: 1.125rem 1.5rem !important;
      border-bottom: 1px solid var(--border-color) !important;
    }
    .modal-title {
      font-size: 1.125rem;    /* 18px — +1号 */
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .modal-body   { padding: 1.5rem !important; }
    .modal-footer {
      padding: 1rem 1.5rem !important;
      border-top: 1px solid var(--border-color) !important;
      background: var(--gray-50);
    }
    .btn-close {
      opacity: 0.5;
      transition: opacity var(--duration-fast) var(--ease),
                  transform var(--duration-fast) var(--ease);
    }
    .btn-close:hover { opacity: 1; transform: rotate(90deg); }

    /* ══════════════════════════════════════════════════════════
       Dropdown 下拉菜单
    ══════════════════════════════════════════════════════════ */
    .dropdown-menu {
      border: 1px solid var(--border-color) !important;
      box-shadow: var(--shadow-md) !important;
      border-radius: var(--radius-md) !important;
      padding: 0.375rem !important;
      animation: dropdownIn 0.18s var(--ease);
    }
    @keyframes dropdownIn {
      from { opacity: 0; transform: translateY(-6px) scale(0.98); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .dropdown-item {
      border-radius: 0.375rem;
      font-size: 0.9375rem;
      padding: 0.5rem 0.75rem;
      transition: background var(--duration-fast) var(--ease),
                  color var(--duration-fast) var(--ease);
    }
    .dropdown-item:hover  { background: var(--primary-light); color: var(--primary); }
    .dropdown-item.active { background: var(--primary) !important; color: #fff !important; }
    .dropdown-divider { border-color: var(--border-color) !important; margin: 0.25rem 0 !important; }

    /* ══════════════════════════════════════════════════════════
       空状态
    ══════════════════════════════════════════════════════════ */
    .empty-state { color: var(--gray-400); }
    .empty-state .bi { font-size: 3rem; }
    .empty-state span { font-size: 0.9375rem; }

    /* ══════════════════════════════════════════════════════════
       复制按钮激活状态
    ══════════════════════════════════════════════════════════ */
    .btn-copied {
      color: var(--success) !important;
      border-color: var(--success) !important;
      background: var(--success-light) !important;
    }

    /* ══════════════════════════════════════════════════════════
       数据骨架屏加载动画
    ══════════════════════════════════════════════════════════ */
    .skeleton {
      display: inline-block;
      height: 2.25rem;
      width: 4.5rem;
      background: linear-gradient(90deg,
        var(--gray-200) 25%,
        var(--gray-100) 50%,
        var(--gray-200) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s ease-in-out infinite;
      border-radius: 0.375rem;
      vertical-align: middle;
    }
    @keyframes shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* ══════════════════════════════════════════════════════════
       Alert 提示框
    ══════════════════════════════════════════════════════════ */
    .alert {
      border-radius: var(--radius-sm) !important;
      font-size: 0.9375rem;
      border: none !important;
    }
    .alert-danger  { background: var(--danger-light);  color: #991b1b; }
    .alert-success { background: var(--success-light); color: #065f46; }
    .alert-warning { background: var(--warning-light); color: #92400e; }

    /* ══════════════════════════════════════════════════════════
       预览模式横幅
    ══════════════════════════════════════════════════════════ */
    #previewModeBanner {
      background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
      color: #fff;
      text-align: center;
      font-size: 0.875rem;
      font-weight: 600;
      padding: 0.45rem 1rem;
      letter-spacing: 0.03em;
      position: sticky;
      top: 0;
      z-index: 1040;
      box-shadow: 0 2px 8px rgba(180,83,9,.35);
    }

    /* ══════════════════════════════════════════════════════════
       确认删除弹窗确保置于最上层
    ══════════════════════════════════════════════════════════ */
    #confirmModal { z-index: 1090 !important; }
    .modal-backdrop:last-of-type { z-index: 1085 !important; }

    /* ══════════════════════════════════════════════════════════
       站点编辑 & 分享 Modal 内分区标题
    ══════════════════════════════════════════════════════════ */
    .section-divider {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin: 1.5rem 0 1rem;
    }
    .section-divider::before,
    .section-divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border-color);
    }
    .section-divider span {
      font-size: 0.8125rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--gray-500);
      white-space: nowrap;
    }

    /* 分享链接展示框 */
    .share-link-box {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--gray-50);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      padding: 0.5rem 0.875rem;
      font-family: ui-monospace, monospace;
      font-size: 0.8125rem;
      word-break: break-all;
      color: var(--gray-700);
    }
    .share-link-box .share-url {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ══════════════════════════════════════════════════════════
       页脚
    ══════════════════════════════════════════════════════════ */
    footer {
      background: var(--bg-card) !important;
      border-top: 1px solid var(--border-color) !important;
      padding: 1rem 0 !important;
    }
    footer .text-muted { font-size: 0.875rem; color: var(--gray-400) !important; }
    footer a { color: var(--gray-500) !important; transition: color var(--duration-fast) var(--ease); }
    footer a:hover { color: var(--primary) !important; }

    /* ══════════════════════════════════════════════════════════
       添加新站点卡片
    ══════════════════════════════════════════════════════════ */
    .card.border-primary-subtle { border-color: rgba(26,95,216,0.25) !important; }
    .bg-primary-subtle { background: rgba(26,95,216,0.04) !important; }
    .card.border-primary-subtle .card-title { font-size: 0.9375rem; font-weight: 600; }

    /* ══════════════════════════════════════════════════════════
       Scrollbar 美化 (Webkit)
    ══════════════════════════════════════════════════════════ */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: var(--gray-100); }
    ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 99px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

    /* 站点切换菜单尺寸 */
    #siteSwitcherMenu { min-width: 220px; max-height: 320px; overflow-y: auto; }

    /* ══════════════════════════════════════════════════════════
       改动2：站点管理弹窗 —— 图标 & 表单文字再大1号
    ══════════════════════════════════════════════════════════ */
    #siteManagerModal .form-label         { font-size: 1.0625rem; }
    #siteManagerModal .form-control,
    #siteManagerModal .form-select        { font-size: 1.0625rem; }
    #siteManagerModal .form-control-sm,
    #siteManagerModal .form-select-sm     { font-size: 1rem; }
    #siteManagerModal .card-title         { font-size: 1.0625rem; }
    #siteManagerModal .form-text          { font-size: 0.9375rem; }
    #siteManagerModal .btn                { font-size: 1rem; }
    #siteManagerModal .btn-sm             { font-size: 0.9375rem; }
    /* 站点列表行的文字 */
    #siteManagerModal .site-list-item .fw-semibold { font-size: 1.0625rem; }
    #siteManagerModal .site-list-item .text-muted  { font-size: 0.9375rem; }
    /* 操作按钮图标：通过让整个按钮字号更大带动图标 */
    #siteManagerModal .site-list-item .btn-sm { font-size: 1rem; padding: 0.35rem 0.75rem; }
    /* 添加站点区标题 */
    #siteManagerModal .card-body h6 { font-size: 1.0625rem; }

    /* ══════════════════════════════════════════════════════════
       移动端适配
    ══════════════════════════════════════════════════════════ */
    @media (max-width: 576px) {
      body { font-size: 0.9375rem; }
      .container-fluid { padding-left: 1rem !important; padding-right: 1rem !important; }
      .stat-number { font-size: 1.75rem; }
      .stat-icon   { font-size: 2rem; }
      .stat-card .card-body { padding: 0.875rem 1rem; }
      .card-header { padding: 0.75rem 1rem !important; font-size: 0.9rem; }
      .card-body   { padding: 1rem; }
      .chart-wrap  { height: 200px; }
      .modal-body   { padding: 1.125rem !important; }
      .modal-header { padding: 1rem 1.125rem !important; }
      .modal-footer { padding: 0.875rem 1.125rem !important; }
      .modal-title  { font-size: 1rem; }
      .table { font-size: 0.875rem; }
      .table thead th { font-size: 0.75rem; padding: 0.5rem 0.625rem; }
      .table tbody td { padding: 0.5rem 0.625rem; }
      .brand-sub { display: none !important; }
      .api-code { font-size: 0.8125rem; padding: 0.875rem 1rem; }
    }
    @media (max-width: 768px) {
      .stat-number { font-size: 1.875rem; }
      .chart-wrap  { height: 220px; }
    }
    /* 中等屏幕（平板）：位置图 & 平台图并排时适当降低高度 */
    @media (min-width: 768px) and (max-width: 991px) {
      .chart-wrap { height: 200px; }
    }
    @media (min-width: 1400px) {
      .container-fluid { padding-left: 2rem !important; padding-right: 2rem !important; }
    }