/*
 * M3-G peripheral pages — Light structure only (scoped selectors).
 * Theme IDs: dark-default | light · NOT a second theme system.
 * Business/brand hues (--up/--dn, hero icons, card accents) stay frozen.
 */

/* ── Auth (/login /register /change-password /me) ── */
html[data-theme="light"] body.m3g-auth {
  color: var(--color-text-primary);
  background:
    radial-gradient(circle at 16% 0%, rgba(36, 94, 156, 0.08), transparent 28%),
    radial-gradient(circle at 88% 92%, rgba(11, 51, 93, 0.06), transparent 30%),
    linear-gradient(180deg, var(--color-bg-page), var(--color-bg-page-mid) 55%, var(--color-bg-page-deep));
}
html[data-theme="light"] body.m3g-auth .top {
  background: var(--color-bg-topbar);
  border-color: var(--color-border-default);
  color: var(--color-text-bright);
}
html[data-theme="light"] body.m3g-auth .back { color: var(--color-text-primary); }
html[data-theme="light"] body.m3g-auth .title { color: var(--color-text-bright); }
html[data-theme="light"] body.m3g-auth .card {
  background: var(--color-bg-panel);
  border-color: var(--color-border-card);
  box-shadow: 0 10px 28px rgba(30, 60, 100, 0.08);
}
html[data-theme="light"] body.m3g-auth .field label { color: var(--color-text-secondary); }
html[data-theme="light"] body.m3g-auth input {
  background: var(--color-bg-inset);
  border-color: var(--color-border-control);
  color: var(--color-text-primary);
}
html[data-theme="light"] body.m3g-auth input::placeholder { color: var(--color-text-disabled); }
html[data-theme="light"] body.m3g-auth .links { color: var(--color-text-muted); }
html[data-theme="light"] body.m3g-auth .links a { color: var(--color-interactive-primary); }
html[data-theme="light"] body.m3g-auth .agree-row { color: var(--color-text-muted); }
html[data-theme="light"] body.m3g-auth .meta,
html[data-theme="light"] body.m3g-auth .row { color: var(--color-text-secondary); border-color: var(--color-border-subtle); }
html[data-theme="light"] body.m3g-auth .value { color: var(--color-interactive-primary); }
html[data-theme="light"] body.m3g-auth .tabbar {
  background: var(--color-bg-topbar);
  border-color: var(--color-border-default);
}
html[data-theme="light"] body.m3g-auth .tab { color: var(--color-text-muted); }
html[data-theme="light"] body.m3g-auth .tab.active { color: var(--color-interactive-primary); }
html[data-theme="light"] body.m3g-auth .login-keep-hint { color: var(--color-text-muted) !important; }
html[data-theme="light"] body.m3g-auth .secondary {
  background: var(--color-bg-control);
  border-color: var(--color-border-control);
  color: var(--color-text-primary);
  box-shadow: none;
}
html[data-theme="light"] body.m3g-auth .danger {
  background: rgba(255, 113, 136, 0.1);
  border-color: rgba(255, 113, 136, 0.28);
  color: #c23b45;
}

/* ── Legal ── */
html[data-theme="light"] body.m3g-legal {
  color: var(--color-text-primary);
  background:
    radial-gradient(circle at 16% 0%, rgba(36, 94, 156, 0.06), transparent 28%),
    linear-gradient(180deg, var(--color-bg-page), var(--color-bg-page-mid) 55%, var(--color-bg-page-deep));
}
html[data-theme="light"] body.m3g-legal .legal-top {
  background: var(--color-bg-topbar);
  border-color: var(--color-border-default);
  color: var(--color-text-bright);
}
html[data-theme="light"] body.m3g-legal .legal-back {
  color: var(--color-text-primary);
  background: var(--color-bg-control);
  border-color: var(--color-border-control);
}
html[data-theme="light"] body.m3g-legal .legal-page h1 { color: var(--color-text-bright); }
html[data-theme="light"] body.m3g-legal .legal-updated { color: var(--color-text-muted); }
html[data-theme="light"] body.m3g-legal .legal-prose { color: var(--color-text-body); }
html[data-theme="light"] body.m3g-legal .legal-prose h2 { color: var(--color-text-bright); }
html[data-theme="light"] body.m3g-legal .legal-prose a { color: var(--color-interactive-primary); }
html[data-theme="light"] body.m3g-legal .legal-note {
  background: var(--color-bg-elevated-soft);
  border-color: var(--color-border-subtle);
  color: var(--color-text-muted);
}

/* ── Visual hub ── */
html[data-theme="light"] body.m3g-visual {
  color: var(--color-text-primary);
  background:
    radial-gradient(circle at 12% 0%, rgba(36, 94, 156, 0.1), transparent 28%),
    radial-gradient(circle at 88% 100%, rgba(11, 51, 93, 0.08), transparent 30%),
    linear-gradient(180deg, var(--color-bg-page), var(--color-bg-page-mid) 52%, var(--color-bg-page-deep));
}
html[data-theme="light"] body.m3g-visual .topbar {
  background: var(--color-bg-topbar);
  border-color: var(--color-border-default);
  color: var(--color-text-bright);
}
html[data-theme="light"] body.m3g-visual .group-title { color: var(--color-text-secondary); }
html[data-theme="light"] body.m3g-visual .divider { background: var(--color-border-subtle); }
html[data-theme="light"] body.m3g-visual .card {
  color: var(--color-text-primary);
  border-color: var(--color-border-card);
  box-shadow: 0 8px 22px rgba(30, 60, 100, 0.08);
}
html[data-theme="light"] body.m3g-visual .sub { color: var(--color-text-muted); }
html[data-theme="light"] body.m3g-visual .badge {
  color: var(--color-text-muted);
  background: var(--color-bg-control);
  border-color: var(--color-border-control);
}
html[data-theme="light"] body.m3g-visual .tabbar {
  background: var(--color-bg-topbar);
  border-color: var(--color-border-default);
}
html[data-theme="light"] body.m3g-visual .tab { color: var(--color-text-muted); }
html[data-theme="light"] body.m3g-visual .tab.active { color: var(--color-interactive-primary); }
/* Light: soften card fills but keep category accent strips (brand C) */
html[data-theme="light"] body.m3g-visual .purple {
  background: linear-gradient(105deg, var(--color-bg-panel), var(--color-bg-panel-2));
}
html[data-theme="light"] body.m3g-visual .pink {
  background: linear-gradient(105deg, var(--color-bg-panel), var(--color-bg-panel-2));
}
html[data-theme="light"] body.m3g-visual .blue {
  background: linear-gradient(105deg, var(--color-bg-panel), var(--color-bg-panel-2));
}
html[data-theme="light"] body.m3g-visual .orange {
  background: linear-gradient(105deg, var(--color-bg-panel), var(--color-bg-panel-2));
}

/* ── Mood (sector / market / limit-ladder) ── */
html[data-theme="light"] body.m3g-mood {
  color: var(--color-text-primary);
  background:
    radial-gradient(circle at 10% 0%, rgba(36, 94, 156, 0.08), transparent 28%),
    linear-gradient(180deg, var(--color-bg-page), var(--color-bg-page-mid) 55%, var(--color-bg-page-deep));
}
html[data-theme="light"] body.m3g-mood .top {
  background: var(--color-bg-topbar);
  border-color: var(--color-border-default);
  color: var(--color-text-bright);
}
html[data-theme="light"] body.m3g-mood .back,
html[data-theme="light"] body.m3g-mood .refresh {
  color: var(--color-text-primary);
  background: var(--color-bg-control);
  border-color: var(--color-border-control);
}
html[data-theme="light"] body.m3g-mood .hero {
  background: var(--color-bg-panel);
  border-color: var(--color-border-card);
  box-shadow: 0 10px 28px rgba(30, 60, 100, 0.08);
}
html[data-theme="light"] body.m3g-mood h1 { color: var(--color-text-bright); }
html[data-theme="light"] body.m3g-mood .desc { color: var(--color-text-muted); }
html[data-theme="light"] body.m3g-mood .stat {
  background: var(--color-bg-elevated-soft);
  border-color: var(--color-border-subtle);
}
html[data-theme="light"] body.m3g-mood .stat-label { color: var(--color-text-muted); }
html[data-theme="light"] body.m3g-mood .panel {
  background: var(--color-bg-panel);
  border-color: var(--color-border-card);
}
html[data-theme="light"] body.m3g-mood .panel-title { border-color: var(--color-border-subtle); color: var(--color-text-primary); }
html[data-theme="light"] body.m3g-mood .panel-title span { color: var(--color-text-muted); }
html[data-theme="light"] body.m3g-mood .loading,
html[data-theme="light"] body.m3g-mood .empty { color: var(--color-text-muted); }
html[data-theme="light"] body.m3g-mood .item { border-color: var(--color-border-subtle); }
html[data-theme="light"] body.m3g-mood .name { color: var(--color-text-bright); }
html[data-theme="light"] body.m3g-mood .meta { color: var(--color-text-muted); }

/* ── Public (/wechat-safe /mini) ── */
html[data-theme="light"] body.m3g-public {
  color: var(--color-text-primary);
  background:
    radial-gradient(circle at 16% 0%, rgba(36, 94, 156, 0.08), transparent 28%),
    linear-gradient(180deg, var(--color-bg-page), var(--color-bg-page-deep));
}
html[data-theme="light"] body.m3g-public .public-back {
  color: var(--color-text-primary);
  background: var(--color-bg-control);
  border-color: var(--color-border-control);
}
html[data-theme="light"] body.m3g-public .public-hero {
  background: var(--color-bg-panel);
  border-color: var(--color-border-card);
  box-shadow: 0 10px 28px rgba(30, 60, 100, 0.08);
}
html[data-theme="light"] body.m3g-public .public-eyebrow { color: var(--color-interactive-primary); }
html[data-theme="light"] body.m3g-public h1 { color: var(--color-text-bright); }
html[data-theme="light"] body.m3g-public .public-desc { color: var(--color-text-muted); }
html[data-theme="light"] body.m3g-public .public-card {
  background: var(--color-bg-elevated-soft);
  border-color: var(--color-border-subtle);
}
html[data-theme="light"] body.m3g-public .public-card b { color: var(--color-text-bright); }
html[data-theme="light"] body.m3g-public .public-card span { color: var(--color-text-muted); }
html[data-theme="light"] body.m3g-public .public-note {
  background: var(--color-bg-selected-soft);
  border-color: var(--color-border-selected);
  color: var(--color-text-muted);
}

/* ── Activate ── */
html[data-theme="light"] body.m3g-activate {
  color: var(--color-text-primary);
  background: linear-gradient(180deg, var(--color-bg-page), var(--color-bg-page-deep));
}
html[data-theme="light"] body.m3g-activate .top {
  background: var(--color-bg-topbar);
  border-color: var(--color-border-default);
  color: var(--color-text-bright);
}
html[data-theme="light"] body.m3g-activate .back {
  color: var(--color-text-primary);
  background: var(--color-bg-control);
  border-color: var(--color-border-control);
}
html[data-theme="light"] body.m3g-activate .hero p { color: var(--color-text-muted); }
html[data-theme="light"] body.m3g-activate .card {
  background: var(--color-bg-panel);
  border-color: var(--color-border-card);
}
html[data-theme="light"] body.m3g-activate .card-title { color: var(--color-interactive-primary); }
html[data-theme="light"] body.m3g-activate .row { border-color: var(--color-border-subtle); }
html[data-theme="light"] body.m3g-activate .row span:first-child { color: var(--color-text-muted); }
html[data-theme="light"] body.m3g-activate .row .value { color: var(--color-text-bright); }
html[data-theme="light"] body.m3g-activate .field label { color: var(--color-text-muted); }
html[data-theme="light"] body.m3g-activate .field input {
  background: var(--color-bg-inset);
  border-color: var(--color-border-control);
  color: var(--color-text-primary);
}
html[data-theme="light"] body.m3g-activate .btn.secondary {
  background: var(--color-bg-control);
  border-color: var(--color-border-control);
  color: var(--color-text-primary);
}
html[data-theme="light"] body.m3g-activate .risk {
  color: var(--color-text-muted);
  border-color: var(--color-border-subtle);
}
html[data-theme="light"] body.m3g-activate .tenant-support {
  background: var(--color-bg-selected-soft);
  border-color: var(--color-border-selected);
}
html[data-theme="light"] body.m3g-activate .tenant-support p { color: var(--color-text-muted); }

/* ── Access denied / login required ── */
html[data-theme="light"] body.m3g-access {
  color: var(--color-text-primary);
  background:
    radial-gradient(circle at 16% 0%, rgba(36, 94, 156, 0.08), transparent 28%),
    linear-gradient(180deg, var(--color-bg-page), var(--color-bg-page-deep));
}
html[data-theme="light"] body.m3g-access .box {
  background: var(--color-bg-panel);
  border-color: var(--color-border-card);
  box-shadow: 0 12px 32px rgba(30, 60, 100, 0.1);
}
html[data-theme="light"] body.m3g-access h1 { color: var(--color-text-bright); }
html[data-theme="light"] body.m3g-access p { color: var(--color-text-muted); }
html[data-theme="light"] body.m3g-access .contact { color: var(--color-text-secondary); }
html[data-theme="light"] body.m3g-access .official-account-name { color: var(--color-interactive-primary); text-shadow: none; }
html[data-theme="light"] body.m3g-access .contact-values strong { color: var(--color-interactive-primary); }
html[data-theme="light"] body.m3g-access .secondary {
  background: var(--color-bg-control);
  border-color: var(--color-border-control);
  color: var(--color-text-primary);
}