/* ============================================================

   UI 风格（高效模式）换肤：仅覆盖 CSS token，不引入组件库。

   暗色 = Material Design（默认 :root 深色，即 MD3 dark）。

   亮色 = Arco Design（淡蓝白底微偏主色，干净简约）；仅 MD3 暗色 / Arco 亮色两态。

   ============================================================ */

/* Arco Design（浅色，淡蓝白底微偏主色，干净简约） */

.theme-arco {

  --surface: #f0f5ff;

  --surface-variant: #e8efff;

  --surface-container: #ffffff;

  --surface-container-high: #f5f8ff;

  --surface-container-highest: #e2e9f7;

  --on-surface: #1d2129;

  --on-surface-variant: #4e5969;

  --outline: #e5e6eb;

  --outline-variant: #e5e6eb;

  --primary: #165dff;

  --on-primary: #ffffff;

  --primary-container: #e8f3ff;

  --on-primary-container: #0e42d2;

  --secondary-container: #e8f3ff;

  --on-secondary-container: #0e42d2;

  --tertiary-container: #ffece8;

  --on-tertiary-container: #cb2604;

  --error: #f53f3f;

  --on-error: #ffffff;

  --error-container: #ffece8;

  --on-error-container: #cb2604;

  --success-container: #e8ffea;

  --on-success-container: #0a6b1e;

  --scrim: rgba(0, 0, 0, 0.4);

  --shadow: 0 2px 10px rgba(0, 0, 0, 0.08);

  --radius-xs: 2px;

  --radius-sm: 4px;

  --radius-md: 6px;

  --radius-lg: 8px;

  --radius-xl: 12px;

  --radius-full: 9999px;

}

/* Arco 下：隐藏自定义主题色与色卡（设计语言自带配色，不允许自定义覆盖） */

.theme-arco label.theme-color,

.theme-arco #themeSwatches,

.theme-arco .swatches {

  display: none !important;

}

/* Arco 下卡片：干净简约、留白充足、圆角统一，避免暗色卡片残留过大 */

.theme-arco .card,

.theme-arco .panel,

.theme-arco .modal,

.theme-arco .dialog {

  background: var(--surface-container);

  border: 1px solid var(--outline-variant);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow);

  padding: 20px;

  margin: 0;

}

.theme-arco .card + .card,

.theme-arco .panel + .panel {

  margin-top: 16px;

}

.theme-arco .list-item,

.theme-arco .row {

  padding: 12px 14px;

}

/* Arco 亮色：隐藏一切主题自定义，仅保留「切回 MD3」的设计语言按钮 */

.theme-arco .theme-color,

.theme-arco #themeSwatches,

.theme-arco .swatches,

.theme-arco .setting-row:has(#spotlightToggle),

.theme-arco .setting-row:has(.uiStyleSeg),

.theme-arco #bgToggle,

.theme-arco #starsBtn,

.theme-arco label[for="bgToggle"],

.theme-arco label[for="starsBtn"],

.theme-arco #spotlightToggleTop,

.theme-arco #bgToggleTop { display: none !important; }

/* Arco：紧凑留白、克制圆角、均匀间距 */

.theme-arco .card,

.theme-arco .panel { border-radius: 8px; padding: 16px; }

.theme-arco .modal { border-radius: 10px; }

.theme-arco .btn { border-radius: 6px; padding: 8px 16px; }

.theme-arco .input,

.theme-arco select,

.theme-arco textarea { border-radius: 6px; }

.theme-arco .top-bar { gap: 8px; padding: 8px 12px; }

.theme-arco .content-area { padding: 20px 28px 28px; display: flex; flex-direction: column; gap: 16px; max-width: 960px; margin: 0 auto; }

.theme-arco .page.active { display: flex; flex-direction: column; gap: 18px; }

.theme-arco .page > .card + .card,
.theme-arco .page > .help-section + .help-section { margin-top: 0; }

.theme-arco .setting-row { padding: 8px 10px; border-radius: 8px; }

.theme-arco .sidebar { padding: 12px; gap: 8px; }

.theme-arco .sidebar-footer { padding-top: 10px; }

/* 强调用颜色深度：Arco 下错误/警告等容器深底亮字，层级最高 */

.theme-arco .banner-error { background: var(--error); color: #fff; border-color: var(--error); }

.theme-arco .banner-warning { background: rgba(251,146,60,0.15); color: #9a3412; border-color: rgba(251,146,60,0.35); border-radius: 10px; padding: 12px 16px; }

.theme-arco .banner-info { background: var(--info); color: #fff; border-color: var(--info); }

.theme-arco .banner-success { background: var(--success); color: #04210f; border-color: var(--success); }

.theme-arco .tag-error { background: var(--error); color: #fff; }

.theme-arco .tag-warning { background: var(--warning); color: #1a1300; }

.theme-arco .tag-info { background: var(--info); color: #fff; }

/* 强调性的「深底亮字」比任何浅色更突出，Arco 下以深色填充表达重点 */

/* Arco 下首页卡片内深色/彩色背景块也保证亮字 */

  .theme-arco .card .feature-card,

  .theme-arco .card [style*="color-mix"] {

    color: #fff !important;

  }

  .theme-arco .card .feature-card .muted,

  .theme-arco .card .feature-card .text-muted { color: rgba(255,255,255,.78) !important; }

/* 已移除：.theme-arco #help1/#help2/#help3 { display:none }
   #help2 内是常规举报的完整表单（含 submitReportBtn），#help3 内是匿名举报的完整表单
   （含 submitAnonBtn）。在亮色(Arco)下隐藏它们会导致这两个页面只剩标题、表单全空。 */

/* Arco 下帮助切换标签：浅色主题用浅蓝底 + 主色蓝字（清晰可读，避免深字叠深底） */
.theme-arco .help-tab {
  background: rgba(22,93,255,0.08);
  border-color: #c5d4ff;
  color: #165dff;
}
.theme-arco .help-tab:hover {
  border-color: #165dff;
  color: #0e42c4;
}
.theme-arco .help-tab.active {
  background: #165dff;
  border-color: #165dff;
  color: #ffffff;
}

/* Arco 下隐藏举报页所有指南区域 */

/* Arco 下左侧功能栏自适应收缩，部件适当缩小 */

  .theme-arco .sidebar { width: 188px; padding: 10px 8px; gap: 6px; }

  .theme-arco .sidebar .logo-img { width: 30px; }

  .theme-arco .sidebar .brand { font-size: 1.05rem; }

  .theme-arco .nav-item { padding: 7px 10px; font-size: 0.82rem; gap: 8px; border-radius: 6px; }

  .theme-arco .nav-item .mdi { font-size: 1.05rem; }

  .theme-arco .sidebar .sidebar-credit { font-size: 0.68rem; }

  .theme-arco #sidebarToggle { font-size: 1rem; width: 26px; height: 26px; }

  .theme-arco .topbar { padding: 8px 14px; }

  .theme-arco .topbar-btn { width: 30px; height: 30px; font-size: 1rem; }

  .theme-arco .content-area { padding: 16px; gap: 14px; }

  .theme-arco .page-header h2 { font-size: 1.3rem; }

  .theme-arco .card, .theme-arco .panel { padding: 14px; }

  .theme-arco .btn { padding: 6px 12px; font-size: 0.84rem; }

  .theme-arco .topbar-user { font-size: 0.82rem; }

/* Arco 下隐藏举报页所有指南区域 */

.theme-arco .sidebar .brand,

  .theme-arco .sidebar .brand-sub { word-break: break-all; overflow-wrap: anywhere; white-space: normal; }

/* Arco 下所有深色/彩色背景卡片文字亮色 */

  .theme-arco .card [style*="background"],

  .theme-arco .card [style*="color-mix"],

  .theme-arco .card .feature-card,

  .theme-arco .card .stat-card,

  .theme-arco .card .info-row,

  .theme-arco .card .anon-banner,

  .theme-arco .panel [style*="background"] {

    color: #f1f5f9 !important;

  }

  .theme-arco .card [style*="background"] *,

  .theme-arco .card [style*="color-mix"] * {

    color: inherit;

  }

  .theme-arco .card .muted,

  .theme-arco .card .text-muted,

  .theme-arco .feature-card .muted { color: rgba(241,245,249,.7) !important; }

/* Arco 下进一步紧凑化 */

  .theme-arco .card { padding: 10px 12px !important; }

  .theme-arco .panel { padding: 10px 12px !important; }

  .theme-arco .feature-card {
    padding: 14px !important;
    color: #14213d !important;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border: 1px solid #c7d2fe;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.12);
    font-weight: 600;
  }

  .theme-arco .feature-card:hover {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.22);
  }

  .theme-arco .feature-card .mdi {
    background: var(--primary);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 6px;
  }

  .theme-arco .feature-card b { color: #14213d; font-size: 15px; }

  .theme-arco .feature-card span { color: rgba(20,33,61,0.6); font-weight: 500; }

  .theme-arco .help-panel { background: rgba(59,130,246,0.07); border-left-color: var(--primary); border-radius: 10px; }

  .theme-arco .help-panel h3 { color: #1a1a2e; }

  .theme-arco .stat-card { padding: 8px 10px !important; }

  .theme-arco .info-row { padding: 6px 8px !important; font-size: 0.8rem; }

  .theme-arco .page-header { margin-bottom: 10px !important; }

  .theme-arco .page-header h2 { font-size: 1.15rem !important; }

  .theme-arco .gap-sm { gap: 6px !important; }

  .theme-arco .gap-md { gap: 10px !important; }

/* Arco 下登录/主要按钮加强 */

  .theme-arco .btn-primary,

  .theme-arco .btn-accent {

    background: linear-gradient(135deg, #165dff, #0e42d2) !important;

    color: #fff !important;

    border: none !important;

    box-shadow: 0 2px 8px rgba(22,93,255,.35) !important;

    font-weight: 600 !important;

  }

  .theme-arco .btn-primary:hover,

  .theme-arco .btn-accent:hover {

    box-shadow: 0 4px 14px rgba(22,93,255,.45) !important;

    transform: translateY(-1px);

  }

/* Brand 文字与 logo 垂直对齐 */

  .theme-arco .sidebar .sidebar-brand {

    display: flex;

    align-items: center;

    gap: 8px;

  }

  .theme-arco .sidebar .logo-img { align-self: center; }

  .theme-arco .sidebar .brand,

  .theme-arco .sidebar .brand-sub {

    line-height: 1.2;

    display: flex;

    flex-direction: column;

    justify-content: center;

  }

/* 主题切换按钮 */

.theme-switch {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  margin-left: auto;

  background: var(--surface-container);

  border: 1px solid var(--outline-variant);

  border-radius: 999px;

  padding: 2px;

}

.theme-switch button {

  border: none;

  background: transparent;

  color: var(--on-surface-variant);

  width: 30px;

  height: 26px;

  border-radius: 999px;

  cursor: pointer;

  font-size: 1rem;

  line-height: 1;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}

.theme-switch button.active {

  background: var(--primary-container);

  color: var(--on-primary-container);

}