:root,
:root[data-skin="sand"] {
  color-scheme: light;
  --skin-name: "warm-sand";
  --skin-bg: #f6f0e5;
  --skin-bg-soft: #fcf8f1;
  --skin-surface: rgba(255, 250, 242, 0.86);
  --skin-surface-strong: #f4ead9;
  --skin-surface-muted: #ebdfcc;
  --skin-border: #d8ccb8;
  --skin-border-strong: #c8b89c;
  --skin-text: #223247;
  --skin-text-soft: #667384;
  --skin-text-faint: #8b94a1;
  --skin-blue: #1f6fd4;
  --skin-teal: #15847c;
  --skin-green: #1f8b62;
  --skin-red: #cf5a4f;
  --skin-yellow: #b9862d;
  --skin-purple: #7a64d7;
  --skin-shadow: 0 18px 45px rgba(113, 92, 67, 0.12);
  --skin-shadow-soft: 0 10px 26px rgba(113, 92, 67, 0.08);
  --skin-shadow-strong: 0 24px 42px rgba(113, 92, 67, 0.14);
  --skin-white-rgb: 255, 255, 255;
  --skin-accent-rgb: 31, 111, 212;
  --skin-accent-strong-rgb: 21, 132, 124;
  --skin-success-rgb: 31, 139, 98;
  --skin-danger-rgb: 207, 90, 79;
  --skin-warning-rgb: 185, 134, 45;
  --skin-neutral-rgb: 102, 115, 132;
  --skin-purple-rgb: 122, 100, 215;
  --skin-bg-spot-a: rgba(31, 111, 212, 0.14);
  --skin-bg-spot-b: rgba(185, 134, 45, 0.14);
  --skin-bg-gradient: linear-gradient(180deg, #fdf9f2 0%, #f6f0e5 55%, #efe5d7 100%);
  --skin-nav-bg: rgba(255, 248, 239, 0.84);
  --skin-tabs-bg: rgba(255, 248, 239, 0.72);
  --skin-title-gradient: linear-gradient(135deg, #25436f 0%, #1f6fd4 52%, #15847c 100%);
  --skin-overlay: linear-gradient(
    135deg,
    rgba(251, 247, 238, 0.84) 0%,
    rgba(244, 236, 223, 0.78) 48%,
    rgba(255, 251, 244, 0.86) 100%
  );
  --skin-primary-button: linear-gradient(135deg, #2e78d8 0%, #17938a 100%);
  --skin-primary-shadow: 0 12px 26px rgba(31, 111, 212, 0.18);
  --skin-panel-hover: #fbf4e8;
  --skin-table-head: #efe4d4;
  --skin-table-head-text: #5a6776;
  --skin-input-bg: #fffdf9;
  --skin-card-strong: rgba(255, 250, 242, 0.78);
}

:root[data-skin="sky"] {
  --skin-name: "sky-lake";
  --skin-bg: #edf6fb;
  --skin-bg-soft: #f8fcff;
  --skin-surface: rgba(248, 253, 255, 0.88);
  --skin-surface-strong: #dfeef8;
  --skin-surface-muted: #cfe3f0;
  --skin-border: #bfd6e6;
  --skin-border-strong: #a5c6dc;
  --skin-text: #193047;
  --skin-text-soft: #557287;
  --skin-text-faint: #7e95a8;
  --skin-blue: #0f6ec4;
  --skin-teal: #0f8e92;
  --skin-green: #24825f;
  --skin-red: #ca6156;
  --skin-yellow: #b98a38;
  --skin-purple: #7569d8;
  --skin-shadow: 0 18px 45px rgba(42, 93, 126, 0.14);
  --skin-shadow-soft: 0 10px 26px rgba(42, 93, 126, 0.09);
  --skin-shadow-strong: 0 24px 42px rgba(42, 93, 126, 0.14);
  --skin-accent-rgb: 15, 110, 196;
  --skin-accent-strong-rgb: 15, 142, 146;
  --skin-success-rgb: 36, 130, 95;
  --skin-danger-rgb: 202, 97, 86;
  --skin-warning-rgb: 185, 138, 56;
  --skin-neutral-rgb: 85, 114, 135;
  --skin-purple-rgb: 117, 105, 216;
  --skin-bg-spot-a: rgba(15, 110, 196, 0.16);
  --skin-bg-spot-b: rgba(78, 190, 225, 0.18);
  --skin-bg-gradient: linear-gradient(180deg, #fbfeff 0%, #edf6fb 52%, #dcecf7 100%);
  --skin-nav-bg: rgba(244, 251, 255, 0.86);
  --skin-tabs-bg: rgba(239, 248, 253, 0.8);
  --skin-title-gradient: linear-gradient(135deg, #1d4160 0%, #0f6ec4 52%, #0f8e92 100%);
  --skin-overlay: linear-gradient(
    135deg,
    rgba(246, 251, 255, 0.86) 0%,
    rgba(225, 241, 250, 0.76) 48%,
    rgba(248, 252, 255, 0.88) 100%
  );
  --skin-primary-button: linear-gradient(135deg, #237ed0 0%, #17a0a7 100%);
  --skin-primary-shadow: 0 12px 26px rgba(15, 110, 196, 0.2);
  --skin-panel-hover: #eef8fd;
  --skin-table-head: #deedf7;
  --skin-table-head-text: #4f6e83;
  --skin-input-bg: #fdfefe;
  --skin-card-strong: rgba(246, 251, 255, 0.82);
}

:root[data-skin="jade"] {
  --skin-name: "jade-garden";
  --skin-bg: #eef6ef;
  --skin-bg-soft: #f8fcf8;
  --skin-surface: rgba(248, 252, 248, 0.88);
  --skin-surface-strong: #e1efe3;
  --skin-surface-muted: #d2e5d6;
  --skin-border: #bfd4c3;
  --skin-border-strong: #a8c4af;
  --skin-text: #203742;
  --skin-text-soft: #5d756f;
  --skin-text-faint: #87988f;
  --skin-blue: #1c7a70;
  --skin-teal: #2e9b73;
  --skin-green: #218954;
  --skin-red: #c96258;
  --skin-yellow: #a88332;
  --skin-purple: #6b76d6;
  --skin-shadow: 0 18px 45px rgba(61, 104, 78, 0.14);
  --skin-shadow-soft: 0 10px 26px rgba(61, 104, 78, 0.08);
  --skin-shadow-strong: 0 24px 42px rgba(61, 104, 78, 0.14);
  --skin-accent-rgb: 28, 122, 112;
  --skin-accent-strong-rgb: 46, 155, 115;
  --skin-success-rgb: 33, 137, 84;
  --skin-danger-rgb: 201, 98, 88;
  --skin-warning-rgb: 168, 131, 50;
  --skin-neutral-rgb: 93, 117, 111;
  --skin-purple-rgb: 107, 118, 214;
  --skin-bg-spot-a: rgba(28, 122, 112, 0.16);
  --skin-bg-spot-b: rgba(73, 177, 115, 0.17);
  --skin-bg-gradient: linear-gradient(180deg, #fcfffb 0%, #eef6ef 52%, #dcebdd 100%);
  --skin-nav-bg: rgba(246, 251, 246, 0.86);
  --skin-tabs-bg: rgba(240, 248, 240, 0.78);
  --skin-title-gradient: linear-gradient(135deg, #21485a 0%, #1c7a70 48%, #2e9b73 100%);
  --skin-overlay: linear-gradient(
    135deg,
    rgba(247, 252, 247, 0.86) 0%,
    rgba(227, 242, 231, 0.76) 48%,
    rgba(250, 253, 250, 0.88) 100%
  );
  --skin-primary-button: linear-gradient(135deg, #218074 0%, #2fa874 100%);
  --skin-primary-shadow: 0 12px 26px rgba(28, 122, 112, 0.18);
  --skin-panel-hover: #eff7f0;
  --skin-table-head: #deece0;
  --skin-table-head-text: #567169;
  --skin-input-bg: #fbfefb;
  --skin-card-strong: rgba(247, 252, 247, 0.8);
}

:root[data-skin="rose"] {
  --skin-name: "rose-dawn";
  --skin-bg: #f9eef1;
  --skin-bg-soft: #fff9fb;
  --skin-surface: rgba(255, 249, 251, 0.88);
  --skin-surface-strong: #f4e1e7;
  --skin-surface-muted: #ebd1db;
  --skin-border: #dec1cd;
  --skin-border-strong: #cea8b7;
  --skin-text: #3b2a3b;
  --skin-text-soft: #7b6474;
  --skin-text-faint: #9c8795;
  --skin-blue: #bb5c86;
  --skin-teal: #7a73cf;
  --skin-green: #31916e;
  --skin-red: #cf5c68;
  --skin-yellow: #b68545;
  --skin-purple: #8b63d9;
  --skin-shadow: 0 18px 45px rgba(132, 82, 103, 0.14);
  --skin-shadow-soft: 0 10px 26px rgba(132, 82, 103, 0.08);
  --skin-shadow-strong: 0 24px 42px rgba(132, 82, 103, 0.14);
  --skin-accent-rgb: 187, 92, 134;
  --skin-accent-strong-rgb: 122, 115, 207;
  --skin-success-rgb: 49, 145, 110;
  --skin-danger-rgb: 207, 92, 104;
  --skin-warning-rgb: 182, 133, 69;
  --skin-neutral-rgb: 123, 100, 116;
  --skin-purple-rgb: 139, 99, 217;
  --skin-bg-spot-a: rgba(187, 92, 134, 0.16);
  --skin-bg-spot-b: rgba(122, 115, 207, 0.16);
  --skin-bg-gradient: linear-gradient(180deg, #fffafc 0%, #f9eef1 55%, #efdce3 100%);
  --skin-nav-bg: rgba(255, 248, 251, 0.86);
  --skin-tabs-bg: rgba(252, 242, 246, 0.8);
  --skin-title-gradient: linear-gradient(135deg, #6d3d5a 0%, #bb5c86 52%, #7a73cf 100%);
  --skin-overlay: linear-gradient(
    135deg,
    rgba(255, 249, 252, 0.86) 0%,
    rgba(248, 232, 239, 0.78) 48%,
    rgba(255, 251, 253, 0.88) 100%
  );
  --skin-primary-button: linear-gradient(135deg, #c45c8f 0%, #7a73cf 100%);
  --skin-primary-shadow: 0 12px 26px rgba(187, 92, 134, 0.18);
  --skin-panel-hover: #fdf0f4;
  --skin-table-head: #f1dde5;
  --skin-table-head-text: #765f70;
  --skin-input-bg: #fffdfd;
  --skin-card-strong: rgba(255, 248, 251, 0.8);
}

:root {
  --bg-primary: var(--skin-bg);
  --bg-secondary: var(--skin-surface);
  --bg-tertiary: var(--skin-surface-strong);
  --bg-main: var(--skin-bg);
  --bg-card: var(--skin-surface);
  --bg-hover: var(--skin-surface-strong);
  --bg: var(--skin-bg);
  --panel: var(--skin-surface);
  --panel-soft: var(--skin-panel-hover);
  --panel-strong: var(--skin-surface-strong);
  --panel-bg: var(--skin-surface);
  --panel-subtle: var(--skin-surface-strong);
  --border: var(--skin-border);
  --border-color: var(--skin-border);
  --line: rgba(var(--skin-neutral-rgb), 0.18);
  --line-strong: rgba(var(--skin-accent-rgb), 0.22);
  --text: var(--skin-text);
  --muted: var(--skin-text-soft);
  --text-primary: var(--skin-text);
  --text-secondary: var(--skin-text-soft);
  --text-secondary-strong: var(--skin-text-soft);
  --accent: var(--skin-blue);
  --accent-2: var(--skin-teal);
  --accent-blue: var(--skin-blue);
  --accent-green: var(--skin-green);
  --accent-red: var(--skin-red);
  --accent-yellow: var(--skin-yellow);
  --blue: var(--skin-blue);
  --green: var(--skin-green);
  --red: var(--skin-red);
  --yellow: var(--skin-yellow);
  --purple: var(--skin-purple);
}

html,
body {
  color: var(--skin-text) !important;
  background:
    radial-gradient(circle at top left, var(--skin-bg-spot-a), transparent 28%),
    radial-gradient(circle at 82% 12%, var(--skin-bg-spot-b), transparent 24%),
    var(--skin-bg-gradient) !important;
}

body {
  background-attachment: fixed !important;
}

.navbar,
.topbar,
.nav-tabs,
.card,
.uc-card,
.section,
.contact-card,
.feature-card,
.login-card,
.error-card,
.sidebar,
.chat-panel,
.decision-card,
.ai-card,
.stat-card,
.table-responsive,
.dropdown-menu,
.modal-content {
  background: var(--skin-surface) !important;
  border-color: var(--skin-border) !important;
  color: var(--skin-text) !important;
  box-shadow: var(--skin-shadow-soft);
}

.navbar,
.topbar,
.nav-tabs,
.dropdown-menu,
.modal-content,
.sidebar,
.chat-panel {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.navbar,
.topbar {
  background: var(--skin-nav-bg) !important;
  border-bottom-color: var(--skin-border) !important;
  box-shadow: 0 10px 30px rgba(var(--skin-neutral-rgb), 0.08);
}

.brand-title,
.navbar-brand .brand-text,
.page-title,
.login-header h1 {
  background: var(--skin-title-gradient) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.navbar-dark .navbar-nav .nav-link,
.nav-link,
.nav-tabs .nav-link,
.sidebar-item,
.main-tab,
.back-home a,
.nav-btn-login,
.hero p,
.section-title p,
.section p,
.section ul,
.subtitle,
.update-date,
.risk-notice p,
.brand-subtitle,
.sidebar-meta,
.chat-meta,
.conversation-preview,
.conversation-time,
.feature-card p,
.contact-card p,
.login-header p,
.form-label,
.form-check-label,
.register-link,
.error-message {
  color: var(--skin-text-soft) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover,
.nav-link:hover,
.navbar-dark .navbar-nav .nav-link:hover,
.sidebar-item.active,
.sidebar-item:hover,
.main-tab.active,
.main-tab:hover,
.back-home a:hover,
.nav-btn-login:hover,
.register-link a,
.register-link a:hover,
.feature-btn,
.risk-notice-title,
.section h2,
.contact-card h3 {
  color: var(--skin-blue) !important;
}

.nav-tabs {
  background: var(--skin-tabs-bg) !important;
  border-bottom-color: var(--skin-border) !important;
}

.nav-tabs .nav-link.active {
  background: rgba(var(--skin-accent-rgb), 0.08) !important;
  border-bottom: 2px solid var(--skin-blue) !important;
  border-radius: 10px 10px 0 0;
}

.sidebar-item.active,
.main-tab.active {
  background: rgba(var(--skin-accent-rgb), 0.1) !important;
  border-color: rgba(var(--skin-accent-rgb), 0.18) !important;
  box-shadow: none !important;
}

.card,
.uc-card,
.section,
.contact-card,
.feature-card,
.login-card,
.error-card,
.sidebar,
.chat-panel,
.decision-card,
.ai-card,
.stat-card {
  border: 1px solid var(--skin-border) !important;
  box-shadow: var(--skin-shadow);
}

.card-header,
.uc-card .card-head,
.sidebar-header,
.chat-header,
.modal-header,
.modal-footer {
  background: rgba(var(--skin-white-rgb), 0.46) !important;
  border-color: var(--skin-border) !important;
  color: var(--skin-text) !important;
}

.table,
.table td,
.table th,
.table-responsive {
  color: var(--skin-text) !important;
}

.table thead th {
  background: var(--skin-table-head) !important;
  color: var(--skin-table-head-text) !important;
  border-color: var(--skin-border) !important;
}

.table tbody td {
  background: transparent !important;
  color: var(--skin-text) !important;
  border-color: rgba(var(--skin-neutral-rgb), 0.2) !important;
}

.table tbody tr:hover,
.table tbody tr:hover td,
.history-item:hover,
.stock-suggest-item:hover,
.stock-suggest-item.active,
.conversation-item:hover {
  background: var(--skin-panel-hover) !important;
}

.table {
  --bs-table-bg: transparent !important;
  --bs-table-color: var(--skin-text) !important;
  --bs-table-border-color: rgba(var(--skin-neutral-rgb), 0.2) !important;
  --bs-table-hover-bg: var(--skin-panel-hover) !important;
  --bs-table-striped-bg: rgba(var(--skin-white-rgb), 0.45) !important;
}

.form-control,
.form-select,
.model-select,
.composer textarea,
.password-wrapper .form-control,
.input-group .form-control {
  background: var(--skin-input-bg) !important;
  color: var(--skin-text) !important;
  border-color: var(--skin-border) !important;
  box-shadow: none !important;
}

.form-control::placeholder,
.form-select::placeholder,
.composer textarea::placeholder {
  color: var(--skin-text-faint) !important;
}

.form-control:focus,
.form-select:focus,
.model-select:focus,
.composer textarea:focus {
  border-color: rgba(var(--skin-accent-rgb), 0.48) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--skin-accent-rgb), 0.12) !important;
}

.btn-outline-secondary,
.btn-secondary,
.btn-home,
.nav-btn-login,
.feature-btn,
.panel-toggle-btn {
  background: rgba(var(--skin-white-rgb), 0.48) !important;
  color: var(--skin-text-soft) !important;
  border-color: var(--skin-border) !important;
  box-shadow: none !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary.active,
.btn-secondary:hover,
.btn-home:hover,
.nav-btn-login:hover,
.feature-btn:hover,
.panel-toggle-btn:hover {
  background: rgba(var(--skin-accent-rgb), 0.08) !important;
  color: var(--skin-blue) !important;
  border-color: rgba(var(--skin-accent-rgb), 0.26) !important;
}

.btn-primary,
.nav-btn-register,
.btn-hero-primary,
.action-btn,
.send-btn {
  background: var(--skin-primary-button) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: var(--skin-primary-shadow) !important;
}

.btn-primary:hover,
.nav-btn-register:hover,
.btn-hero-primary:hover,
.action-btn:hover,
.send-btn:hover {
  filter: brightness(1.03);
}

.btn-hero-secondary {
  background: rgba(var(--skin-accent-rgb), 0.08) !important;
  color: var(--skin-blue) !important;
  border-color: rgba(var(--skin-accent-rgb), 0.24) !important;
}

.btn-hero-secondary:hover {
  background: rgba(var(--skin-accent-rgb), 0.14) !important;
  color: var(--skin-blue) !important;
}

.alert-info,
.notice-banner[data-type="info"] {
  background: rgba(var(--skin-accent-rgb), 0.08) !important;
  border-color: rgba(var(--skin-accent-rgb), 0.22) !important;
  color: var(--skin-blue) !important;
}

.alert-success,
.notice-banner[data-type="success"] {
  background: rgba(var(--skin-success-rgb), 0.08) !important;
  border-color: rgba(var(--skin-success-rgb), 0.22) !important;
  color: var(--skin-green) !important;
}

.alert-warning,
.notice-banner[data-type="warning"] {
  background: rgba(var(--skin-warning-rgb), 0.1) !important;
  border-color: rgba(var(--skin-warning-rgb), 0.24) !important;
  color: var(--skin-yellow) !important;
}

.alert-danger,
.notice-banner[data-type="error"] {
  background: rgba(var(--skin-danger-rgb), 0.1) !important;
  border-color: rgba(var(--skin-danger-rgb), 0.24) !important;
  color: var(--skin-red) !important;
}

.badge.bg-secondary,
.run-off,
.role-user {
  background: rgba(var(--skin-neutral-rgb), 0.12) !important;
  color: var(--skin-text-soft) !important;
  border: 1px solid rgba(var(--skin-neutral-rgb), 0.15) !important;
}

.text-secondary,
.text-muted,
.flat,
.stock-suggest-meta,
.table-hint,
.section-subtitle,
.metric-label,
.event-helper,
.card .text-secondary {
  color: var(--skin-text-soft) !important;
}

.text-primary,
.text-info,
.rating-推荐,
.signal-watch,
.badge-sector {
  color: var(--skin-blue) !important;
}

.text-warning,
.rating-谨慎 {
  color: var(--skin-yellow) !important;
}

.text-danger,
.up,
.signal-bullish,
.rating-回避 {
  color: var(--skin-red) !important;
}

.text-success,
.down,
.signal-bearish,
.rating-强烈推荐 {
  color: var(--skin-green) !important;
}

.signal-bullish,
.signal-bearish,
.signal-warning,
.signal-watch,
.signal-neutral,
.role-admin,
.role-vip,
.role-strategist,
.rating-中性,
.rating-推荐,
.rating-谨慎,
.rating-回避,
.model-pill,
.hint-pill,
.hero-stat,
.risk-notice,
.highlight-box,
.warning-box {
  box-shadow: none !important;
}

.signal-bullish,
.role-admin,
.rating-回避 {
  background: rgba(var(--skin-danger-rgb), 0.1) !important;
  border-color: rgba(var(--skin-danger-rgb), 0.2) !important;
}

.signal-bearish,
.rating-强烈推荐 {
  background: rgba(var(--skin-success-rgb), 0.1) !important;
  border-color: rgba(var(--skin-success-rgb), 0.2) !important;
}

.signal-warning,
.role-vip,
.rating-谨慎,
.hint-pill,
.warning-box {
  background: rgba(var(--skin-warning-rgb), 0.1) !important;
  border-color: rgba(var(--skin-warning-rgb), 0.2) !important;
}

.signal-watch,
.rating-推荐,
.model-pill,
.highlight-box,
.risk-notice {
  background: rgba(var(--skin-accent-rgb), 0.08) !important;
  border-color: rgba(var(--skin-accent-rgb), 0.2) !important;
}

.signal-neutral,
.role-user,
.rating-中性 {
  background: rgba(var(--skin-neutral-rgb), 0.1) !important;
  border-color: rgba(var(--skin-neutral-rgb), 0.16) !important;
}

.role-strategist {
  background: rgba(var(--skin-purple-rgb), 0.1) !important;
  border-color: rgba(var(--skin-purple-rgb), 0.2) !important;
  color: var(--skin-purple) !important;
}

.bg-overlay {
  background: var(--skin-overlay) !important;
}

.bg-image,
.bg-slide {
  filter: saturate(0.82) brightness(1.12) contrast(0.92);
}

.bg-overlay + .glow-effect,
.glow-effect {
  opacity: 0.08 !important;
}

.feature-card,
.login-card,
.contact-card,
.section,
.error-card {
  background: var(--skin-card-strong) !important;
}

.feature-card:hover,
.contact-card:hover,
.decision-card:hover {
  border-color: rgba(var(--skin-accent-rgb), 0.28) !important;
  box-shadow: var(--skin-shadow-strong) !important;
}

.hero-stat,
.risk-notice,
.highlight-box,
.warning-box {
  background: rgba(var(--skin-white-rgb), 0.5) !important;
}

.section-title h2,
.feature-card h3,
.profile-hero .info .name,
.chat-title,
.sidebar-title {
  color: var(--skin-text) !important;
}

.profile-hero,
.vip-bar.normal,
.vip-bar.is-vip,
.vip-bar.is-admin {
  background: linear-gradient(135deg, rgba(var(--skin-white-rgb), 0.94), rgba(var(--skin-white-rgb), 0.56)) !important;
  border-color: var(--skin-border) !important;
}

.avatar,
.brand-mark {
  box-shadow: inset 0 1px 0 rgba(var(--skin-white-rgb), 0.75);
}

.conversation-item {
  background: rgba(var(--skin-white-rgb), 0.42) !important;
  border-color: transparent !important;
}

.conversation-item.active {
  background: linear-gradient(135deg, rgba(var(--skin-accent-rgb), 0.08), rgba(var(--skin-accent-strong-rgb), 0.06)) !important;
  border-color: rgba(var(--skin-accent-rgb), 0.18) !important;
}

.chat-shell .sidebar,
.chat-shell .chat-panel,
.topbar {
  box-shadow: var(--skin-shadow) !important;
}

.btn-close,
.btn-close-white {
  filter: none !important;
  opacity: 0.65;
}

::-webkit-scrollbar-track {
  background: rgba(var(--skin-white-rgb), 0.65) !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--skin-neutral-rgb), 0.55) !important;
}

[style*="background:#0d1117"],
[style*="background: #0d1117"] {
  background: var(--skin-bg) !important;
}

[style*="background:#161b22"],
[style*="background: #161b22"] {
  background: var(--skin-surface) !important;
}

[style*="background:#1c2128"],
[style*="background: #1c2128"],
[style*="background:#21262d"],
[style*="background: #21262d"] {
  background: var(--skin-surface-strong) !important;
}

[style*="color:#e6edf3"],
[style*="color: #e6edf3"],
[style*="color:#ffffff"],
[style*="color: #ffffff"] {
  color: var(--skin-text) !important;
}

[style*="color:#8b949e"],
[style*="color: #8b949e"],
[style*="color:#6e7681"],
[style*="color: #6e7681"],
[style*="color:#c9d1d9"],
[style*="color: #c9d1d9"] {
  color: var(--skin-text-soft) !important;
}

[style*="border-color:#30363d"],
[style*="border-color: #30363d"] {
  border-color: var(--skin-border) !important;
}

[style*="--bs-table-bg:#161b22"],
[style*="--bs-table-bg: #161b22"] {
  --bs-table-bg: transparent !important;
  --bs-table-hover-bg: var(--skin-panel-hover) !important;
  --bs-table-border-color: rgba(var(--skin-neutral-rgb), 0.2) !important;
}

.skin-switcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.skin-switcher__panel {
  width: min(272px, calc(100vw - 24px));
  padding: 14px;
  border-radius: 18px;
  background: var(--skin-surface) !important;
  border: 1px solid var(--skin-border);
  box-shadow: var(--skin-shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.98);
  transition: opacity .18s ease, transform .18s ease;
}

.skin-switcher[data-open="true"] .skin-switcher__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.skin-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: min(212px, calc(100vw - 24px));
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--skin-border);
  background: var(--skin-nav-bg);
  color: var(--skin-text);
  box-shadow: var(--skin-shadow-soft);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.skin-switcher__toggle:hover {
  border-color: rgba(var(--skin-accent-rgb), 0.28);
  background: rgba(var(--skin-white-rgb), 0.7);
  transform: translateY(-1px);
}

.skin-switcher__swatches {
  display: inline-flex;
  gap: 5px;
  flex-shrink: 0;
}

.skin-switcher__swatch {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(var(--skin-white-rgb), 0.8);
  box-shadow: 0 2px 6px rgba(var(--skin-neutral-rgb), 0.16);
}

.skin-switcher__summary-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}

.skin-switcher__title {
  font-size: .88rem;
  font-weight: 700;
  color: var(--skin-text);
}

.skin-switcher__toggle .skin-switcher__title {
  max-width: 100%;
  font-size: .82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skin-switcher__subtitle {
  margin-top: 2px;
  font-size: .74rem;
  color: var(--skin-text-soft);
}

.skin-switcher__toggle .skin-switcher__subtitle {
  display: none;
}

.skin-switcher__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--skin-text-soft);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
  transition: transform .18s ease, color .18s ease;
}

.skin-switcher[data-open="true"] .skin-switcher__chevron {
  color: var(--skin-blue);
  transform: rotate(90deg);
}

.skin-switcher__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.skin-switcher__cycle {
  border: 1px solid var(--skin-border);
  background: rgba(var(--skin-white-rgb), 0.46);
  color: var(--skin-blue);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
}

.skin-switcher__cycle:hover {
  background: rgba(var(--skin-accent-rgb), 0.08);
}

.skin-switcher__list {
  display: grid;
  gap: 8px;
}

.skin-switcher__option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(var(--skin-white-rgb), 0.34);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

.skin-switcher__option:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--skin-accent-rgb), 0.18);
  background: rgba(var(--skin-white-rgb), 0.48);
}

.skin-switcher__option.is-active {
  border-color: rgba(var(--skin-accent-rgb), 0.28);
  background: rgba(var(--skin-accent-rgb), 0.09);
}

.skin-switcher__option-name {
  font-size: .87rem;
  font-weight: 700;
  color: var(--skin-text);
}

.skin-switcher__option-desc {
  margin-top: 2px;
  font-size: .74rem;
  color: var(--skin-text-soft);
}

.skin-switcher__check {
  font-size: .82rem;
  color: var(--skin-blue);
  opacity: 0;
}

.skin-switcher__option.is-active .skin-switcher__check {
  opacity: 1;
}

.skin-switcher__option-swatches {
  display: inline-flex;
  gap: 5px;
}

.skin-switcher__option-swatch {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(var(--skin-white-rgb), 0.82);
  box-shadow: 0 2px 4px rgba(var(--skin-neutral-rgb), 0.16);
}

@media (max-width: 768px) {
  .navbar,
  .topbar,
  .nav-tabs {
    background: var(--skin-nav-bg) !important;
  }

  .card,
  .feature-card,
  .section,
  .login-card,
  .chat-panel,
  .sidebar {
    box-shadow: 0 12px 28px rgba(var(--skin-neutral-rgb), 0.12) !important;
  }

  .skin-switcher {
    right: 12px;
    bottom: 12px;
  }

  .skin-switcher__toggle {
    max-width: min(190px, calc(100vw - 20px));
    padding: 8px 11px;
  }
}