:root {
  --yg-pref-surface: rgba(255, 255, 255, 0.94);
  --yg-pref-surface-strong: rgba(255, 255, 255, 0.98);
  --yg-pref-line: rgba(15, 23, 42, 0.1);
  --yg-pref-text: #172033;
  --yg-pref-muted: #5f6b7a;
  --yg-pref-brand: #18b7a7;
  --yg-pref-shadow: 0 16px 38px rgba(25, 42, 70, 0.14);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --yg-pref-surface: rgba(17, 24, 39, 0.9);
  --yg-pref-surface-strong: rgba(22, 30, 46, 0.96);
  --yg-pref-line: rgba(148, 163, 184, 0.16);
  --yg-pref-text: #e5edf7;
  --yg-pref-muted: #9aa8bc;
  --yg-pref-brand: #4fd7c9;
  --yg-pref-shadow: 0 20px 48px rgba(2, 8, 23, 0.42);
}

html[data-theme="dark"] body {
  color-scheme: dark;
  background:
    radial-gradient(circle at top left, rgba(28, 196, 170, 0.12), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(69, 125, 255, 0.12), transparent 24%),
    linear-gradient(180deg, #0b1220 0%, #101827 100%) !important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .workspace-topbar,
html[data-theme="dark"] .home-header,
html[data-theme="dark"] .portal-topbar,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .home-footer-inner,
html[data-theme="dark"] .brand-panel,
html[data-theme="dark"] .form-panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .shell,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .mini-card,
html[data-theme="dark"] .provider-card,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .panel-card,
html[data-theme="dark"] .hero-chip,
html[data-theme="dark"] .user-card,
html[data-theme="dark"] .wallet-pill,
html[data-theme="dark"] .subscription-pill,
html[data-theme="dark"] .status-chip,
html[data-theme="dark"] .meta-chip,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .user-pill,
html[data-theme="dark"] .toolbar-link,
html[data-theme="dark"] .toolbar-language,
html[data-theme="dark"] .toolbar-icon,
html[data-theme="dark"] .sidebar-utility,
html[data-theme="dark"] .tab-button,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .captcha-box,
html[data-theme="dark"] .user-menu-panel,
html[data-theme="dark"] .portal-loading-mark {
  background: var(--yg-pref-surface) !important;
  color: var(--yg-pref-text) !important;
  border-color: var(--yg-pref-line) !important;
  box-shadow: var(--yg-pref-shadow) !important;
}

html[data-theme="dark"] .workspace,
html[data-theme="dark"] .portal-shell,
html[data-theme="dark"] .auth-page,
html[data-theme="dark"] .page-root,
html[data-theme="dark"] .portal-app {
  background: transparent !important;
}

html[data-theme="dark"] .brand-logo,
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .portal-loading-mark,
html[data-theme="dark"] .button.primary,
html[data-theme="dark"] .yg-pref-chip.is-active {
  color: #06121a !important;
}

html[data-theme="dark"] .nav-item,
html[data-theme="dark"] .button.ghost,
html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .toolbar-link,
html[data-theme="dark"] .toolbar-language,
html[data-theme="dark"] .toolbar-icon,
html[data-theme="dark"] .sidebar-utility,
html[data-theme="dark"] .tab-button,
html[data-theme="dark"] .text-link,
html[data-theme="dark"] .user-copy span,
html[data-theme="dark"] .brand-tag,
html[data-theme="dark"] .brand-tagline,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .panel-subtitle,
html[data-theme="dark"] .section-copy,
html[data-theme="dark"] .hero-lead,
html[data-theme="dark"] .side-copy,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .message {
  color: inherit;
}

html[data-theme="dark"] .toolbar-link,
html[data-theme="dark"] .toolbar-language,
html[data-theme="dark"] .toolbar-icon,
html[data-theme="dark"] .button.ghost,
html[data-theme="dark"] .button.secondary {
  background: rgba(15, 23, 42, 0.42) !important;
}

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .workspace-topbar,
html[data-theme="dark"] .portal-topbar,
html[data-theme="dark"] .home-header {
  background: rgba(11, 18, 32, 0.78) !important;
  backdrop-filter: blur(18px);
}

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .tag,
html[data-theme="dark"] .loading-badge,
html[data-theme="dark"] .status-chip,
html[data-theme="dark"] .meta-chip {
  background: rgba(79, 215, 201, 0.14) !important;
  color: var(--yg-pref-brand) !important;
}

.yg-pref-dock {
  position: fixed;
  right: 18px;
  top: 18px;
  bottom: auto;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--yg-pref-line);
  background: var(--yg-pref-surface-strong);
  box-shadow: var(--yg-pref-shadow);
  backdrop-filter: blur(18px);
}

.yg-pref-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.yg-pref-label {
  display: none;
}

.yg-pref-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.yg-pref-chip {
  min-width: 76px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--yg-pref-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--yg-pref-text);
  font: inherit;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.yg-pref-chip:hover {
  transform: translateY(-1px);
}

.yg-pref-chip.is-active {
  border-color: rgba(24, 183, 167, 0.22);
  background: linear-gradient(135deg, #18b7a7 0%, #39cbbd 100%);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(24, 183, 167, 0.24);
}

[data-yiguan-pref-role] {
  white-space: nowrap;
}

@media (max-width: 760px) {
  .yg-pref-dock {
    right: 12px;
    top: 12px;
    padding: 10px;
    gap: 6px;
  }

  .yg-pref-chip {
    min-width: 68px;
    min-height: 34px;
    padding: 0 10px;
    font-size: 13px;
  }
}