:root {
    --theme-control-height: 46px;
}

*,
*::before,
*::after {
    min-width: 0;
}

body {
    overflow-wrap: anywhere;
}

button,
.btn,
.badge,
.pill,
.theme-toggle,
.portal-entry,
.nav-link,
.sidebar a,
.topbar a,
.data-table th,
.data-table td,
table th,
table td,
input,
select,
textarea {
    max-width: 100%;
}

button,
.btn,
.badge,
.pill {
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
}

.data-table th,
.data-table td,
table th,
table td,
.surface,
.card,
.dash-card,
.dash-panel,
.product-card,
.company-card,
.review-card,
.portal-card,
.market-card {
    overflow-wrap: anywhere;
    word-break: normal;
}

input,
select,
textarea {
    text-overflow: ellipsis;
}

:root[data-theme="gold-premium"],
html:not([data-theme]) {
    color-scheme: dark;
    --theme-name: "Gold Premium";
    --bg-0: #08090d;
    --bg-1: #10131a;
    --bg-2: #171b22;
    --bg: #0b0d12;
    --panel: linear-gradient(180deg, rgba(22, 24, 30, 0.94), rgba(10, 12, 16, 0.97));
    --panel-strong: rgba(16, 18, 24, 0.98);
    --panel-soft: rgba(255, 255, 255, 0.045);
    --panel-raised: linear-gradient(180deg, rgba(28, 30, 37, 0.92), rgba(13, 15, 20, 0.95));
    --surface-flat: rgba(255, 255, 255, 0.045);
    --line: rgba(227, 201, 145, 0.14);
    --line-strong: rgba(227, 201, 145, 0.24);
    --ink: #f5eddf;
    --muted: #b9ad9b;
    --muted-strong: #d7c9b2;
    --brand: #d9af61;
    --brand-strong: #f0d28d;
    --accent: #c79b53;
    --gold-0: #f0d28d;
    --gold-1: #c79b53;
    --gold-2: #8f632b;
    --silver: #aeb6c1;
    --copper: #916348;
    --diamond: #8fc5da;
    --danger: #ff8a8a;
    --success: #7de0aa;
    --warning: #ffd27a;
    --focus-ring: rgba(240, 210, 141, 0.2);
    --sidebar-bg: linear-gradient(180deg, rgba(13, 12, 13, 0.99), rgba(24, 18, 13, 0.99));
    --topbar-bg: linear-gradient(180deg, rgba(10, 12, 16, 0.88), rgba(10, 12, 16, 0.58));
    --hero-bg: radial-gradient(circle at top right, rgba(255, 216, 127, 0.24), transparent 28%),
        linear-gradient(145deg, rgba(42, 30, 16, 0.96), rgba(11, 13, 17, 0.97));
    --body-bg:
        radial-gradient(circle at 12% 8%, rgba(199, 155, 83, 0.13), transparent 24%),
        radial-gradient(circle at 88% 10%, rgba(143, 197, 218, 0.055), transparent 18%),
        radial-gradient(circle at 50% 100%, rgba(145, 99, 72, 0.075), transparent 22%),
        linear-gradient(145deg, var(--bg-0) 0%, var(--bg-1) 46%, var(--bg-2) 100%);
    --button-primary-bg: linear-gradient(135deg, rgba(244, 216, 143, 0.95), rgba(159, 108, 44, 0.9));
    --button-primary-color: #171006;
    --button-secondary-bg: rgba(255, 255, 255, 0.045);
    --button-secondary-color: #f2dfb8;
    --table-head-bg: linear-gradient(180deg, rgba(49, 39, 25, 0.98), rgba(24, 22, 20, 0.98));
    --table-row-hover: rgba(227, 201, 145, 0.08);
    --shadow: 0 30px 90px rgba(0, 0, 0, 0.46);
    --radius-xl: 24px;
    --radius-lg: 18px;
    --transition: 220ms cubic-bezier(.2,.8,.2,1);
}

:root[data-theme="diamond-silver"] {
    color-scheme: dark;
    --theme-name: "Diamond Silver";
    --bg-0: #07101a;
    --bg-1: #101b27;
    --bg-2: #e9f3fb;
    --bg: #eef6fb;
    --panel: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(223, 235, 244, 0.88));
    --panel-strong: rgba(248, 253, 255, 0.96);
    --panel-soft: rgba(10, 42, 66, 0.055);
    --panel-raised: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(226, 238, 247, 0.92));
    --surface-flat: rgba(255, 255, 255, 0.74);
    --line: rgba(72, 118, 148, 0.2);
    --line-strong: rgba(56, 158, 218, 0.28);
    --ink: #0d1d2b;
    --muted: #5d7180;
    --muted-strong: #2f4556;
    --brand: #1389d4;
    --brand-strong: #006fb7;
    --accent: #49bff2;
    --gold-0: #006fb7;
    --gold-1: #1599de;
    --gold-2: #6b7f8e;
    --silver: #a8bac8;
    --copper: #71899a;
    --diamond: #41c7ff;
    --danger: #b64258;
    --success: #13885f;
    --warning: #a17312;
    --focus-ring: rgba(65, 199, 255, 0.26);
    --sidebar-bg: linear-gradient(180deg, rgba(237, 247, 252, 0.98), rgba(202, 220, 233, 0.98));
    --topbar-bg: linear-gradient(180deg, rgba(245, 252, 255, 0.86), rgba(229, 241, 248, 0.66));
    --hero-bg: radial-gradient(circle at top right, rgba(65, 199, 255, 0.22), transparent 30%),
        linear-gradient(145deg, rgba(238, 247, 252, 0.96), rgba(194, 216, 231, 0.94));
    --body-bg:
        radial-gradient(circle at 12% 8%, rgba(65, 199, 255, 0.17), transparent 24%),
        radial-gradient(circle at 86% 12%, rgba(255, 255, 255, 0.86), transparent 20%),
        radial-gradient(circle at 50% 100%, rgba(151, 181, 202, 0.24), transparent 28%),
        linear-gradient(145deg, #f8fdff 0%, #e7f2f8 45%, #cadce9 100%);
    --button-primary-bg: linear-gradient(135deg, rgba(252, 254, 255, 0.98), rgba(65, 199, 255, 0.86));
    --button-primary-color: #062132;
    --button-secondary-bg: rgba(255, 255, 255, 0.72);
    --button-secondary-color: #0b527f;
    --table-head-bg: linear-gradient(180deg, rgba(247, 253, 255, 0.98), rgba(210, 230, 242, 0.98));
    --table-row-hover: rgba(65, 199, 255, 0.1);
    --shadow: 0 24px 70px rgba(31, 74, 102, 0.18);
}

html[data-theme] body {
    color: var(--ink) !important;
    background: var(--body-bg) !important;
}

html[data-theme] body::after {
    border-color: var(--line) !important;
}

html[data-theme] a,
html[data-theme] .text-muted,
html[data-theme] .section-copy,
html[data-theme] .topbar-copy p,
html[data-theme] .page-header p,
html[data-theme] .page-copy p {
    text-underline-offset: 3px;
}

html[data-theme] .text-muted,
html[data-theme] .section-copy,
html[data-theme] .topbar-copy p,
html[data-theme] .page-header p,
html[data-theme] .page-copy p,
html[data-theme] .brand-copy span,
html[data-theme] .pill,
html[data-theme] .empty-state,
html[data-theme] .auth-field span,
html[data-theme] .auth-helper,
html[data-theme] .auth-note {
    color: var(--muted) !important;
}

html[data-theme] .sidebar {
    background: var(--sidebar-bg) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

html[data-theme] .topbar::before {
    background: var(--topbar-bg) !important;
    border-color: var(--line) !important;
}

html[data-theme] .surface,
html[data-theme] .hero,
html[data-theme] .auth-card,
html[data-theme] .modal-card,
html[data-theme] .dash-card,
html[data-theme] .dash-panel,
html[data-theme] .metric-card,
html[data-theme] .quick-card,
html[data-theme] .module-card,
html[data-theme] .spotlight-card,
html[data-theme] .panel,
html[data-theme] .card,
html[data-theme] .order-card,
html[data-theme] .favorite-card,
html[data-theme] .product-card,
html[data-theme] .message-card,
html[data-theme] .profile-card,
html[data-theme] .contact-card,
html[data-theme] .review-card,
html[data-theme] .filter-card,
html[data-theme] .filters-card,
html[data-theme] .grid-card,
html[data-theme] .list-card,
html[data-theme] .mini-card,
html[data-theme] .mini-stat,
html[data-theme] .stat,
html[data-theme] .stat-box,
html[data-theme] .portal-card,
html[data-theme] .portal-note,
html[data-theme] .portal-entry,
html[data-theme] .signal-card,
html[data-theme] .wf-card,
html[data-theme] .wf-panel,
html[data-theme] .emp-card,
html[data-theme] .emp-panel,
html[data-theme] .platform-card,
html[data-theme] .platform-panel,
html[data-theme] .platform-list article,
html[data-theme] .wf-list article,
html[data-theme] .emp-list article,
html[data-theme] .breakdown-item,
html[data-theme] .dash-side-list .entry,
html[data-theme] .entry,
html[data-theme] .kv div,
html[data-theme] .meta div,
html[data-theme] .review-comment {
    background: var(--panel-raised) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    box-shadow: var(--shadow) !important;
}

html[data-theme] .surface::before,
html[data-theme] .hero::before {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 30%),
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 18%, transparent), transparent 24%) !important;
}

html[data-theme] .hero,
html[data-theme] .auth-showcase {
    background: var(--hero-bg) !important;
    color: var(--ink) !important;
}

html[data-theme] .hero p,
html[data-theme] .auth-showcase p,
html[data-theme] .brand-copy,
html[data-theme] .nav-copy span {
    color: var(--muted) !important;
}

html[data-theme] .brand,
html[data-theme] .brand-block {
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--accent) 14%, transparent), transparent 30%),
        var(--surface-flat) !important;
    border-color: var(--line) !important;
}

html[data-theme] .brand-copy strong,
html[data-theme] .brand-title,
html[data-theme] .brand-scene-copy strong,
html[data-theme] .page-copy h1,
html[data-theme] .topbar-copy h1,
html[data-theme] .page-header h1,
html[data-theme] .section-title {
    color: var(--brand-strong) !important;
}

html[data-theme] .nav a,
html[data-theme] .nav button,
html[data-theme] .sidebar-link {
    background: var(--surface-flat) !important;
    border-color: var(--line) !important;
    color: var(--muted-strong) !important;
}

html[data-theme] .nav a:hover,
html[data-theme] .nav button:hover,
html[data-theme] .nav a.active,
html[data-theme] .sidebar-link:hover,
html[data-theme] .sidebar-link.active {
    border-color: var(--line-strong) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), var(--surface-flat)) !important;
    color: var(--brand-strong) !important;
}

html[data-theme] .btn,
html[data-theme] button.btn,
html[data-theme] a.btn {
    border: 1px solid var(--line) !important;
    border-radius: 999px;
    color: var(--button-secondary-color) !important;
    background: var(--button-secondary-bg) !important;
}

html[data-theme] .btn-primary,
html[data-theme] button.btn-primary,
html[data-theme] a.btn-primary {
    color: var(--button-primary-color) !important;
    background: var(--button-primary-bg) !important;
    border-color: var(--line-strong) !important;
    box-shadow: 0 16px 42px color-mix(in srgb, var(--accent) 24%, transparent) !important;
}

html[data-theme] .btn-danger {
    color: #fff !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 76%, #fff), var(--danger)) !important;
}

html[data-theme] .badge,
html[data-theme] .live-pill {
    background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
    border: 1px solid var(--line-strong) !important;
    color: var(--brand-strong) !important;
}

html[data-theme] .empty-state,
html[data-theme] .auth-benefit,
html[data-theme] .auth-note,
html[data-theme] .channel-grid label,
html[data-theme] .notice {
    background: var(--surface-flat) !important;
    border: 1px solid var(--line) !important;
}

html[data-theme] input,
html[data-theme] select,
html[data-theme] textarea {
    background: color-mix(in srgb, var(--panel-strong) 78%, transparent) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
    caret-color: var(--brand-strong);
}

html[data-theme] input::placeholder,
html[data-theme] textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 72%, transparent) !important;
}

html[data-theme] input:focus,
html[data-theme] select:focus,
html[data-theme] textarea:focus,
html[data-theme] .btn:focus-visible,
html[data-theme] .nav a:focus-visible,
html[data-theme] .nav button:focus-visible,
html[data-theme] .theme-toggle:focus-visible {
    outline: none !important;
    border-color: var(--line-strong) !important;
    box-shadow: 0 0 0 4px var(--focus-ring) !important;
}

html[data-theme] .data-table-wrap,
html[data-theme] table {
    background: color-mix(in srgb, var(--panel-strong) 82%, transparent) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

html[data-theme] .data-table th,
html[data-theme] .data-table td,
html[data-theme] table th,
html[data-theme] table td {
    border-color: color-mix(in srgb, var(--line) 72%, transparent) !important;
}

html[data-theme] .data-table thead th,
html[data-theme] table thead th {
    background: var(--table-head-bg) !important;
    color: var(--brand-strong) !important;
}

html[data-theme] .data-table tbody tr:hover,
html[data-theme] table tbody tr:hover {
    background: var(--table-row-hover) !important;
}

html[data-theme] .chart-host {
    background: var(--surface-flat) !important;
    border-color: var(--line) !important;
}

html[data-theme] .chart-axis text {
    fill: color-mix(in srgb, var(--muted) 88%, transparent) !important;
}

html[data-theme] .chart-grid-lines line {
    stroke: color-mix(in srgb, var(--line) 70%, transparent) !important;
}

html[data-theme] .chart-tooltip {
    background: var(--panel-strong) !important;
    border-color: var(--line-strong) !important;
    color: var(--ink) !important;
}

html[data-theme] .breakdown-bar {
    background: color-mix(in srgb, var(--muted) 16%, transparent) !important;
}

html[data-theme] .breakdown-bar i,
html[data-theme] .chart-legend-swatch {
    background: linear-gradient(90deg, var(--brand-strong), var(--accent)) !important;
}

html[data-theme] .text-danger,
html[data-theme] .field-validation-error,
html[data-theme] .validation-summary-errors,
html[data-theme] .auth-errors,
html[data-theme] .notice.err {
    color: var(--danger) !important;
}

html[data-theme] .text-success,
html[data-theme] .notice.ok {
    color: var(--success) !important;
}

html[data-theme] .validation-summary-errors,
html[data-theme] .auth-errors {
    background: color-mix(in srgb, var(--danger) 12%, var(--panel-strong)) !important;
    border-color: color-mix(in srgb, var(--danger) 26%, transparent) !important;
}

html[data-theme] .app-loader {
    background:
        radial-gradient(circle at center, color-mix(in srgb, var(--accent) 13%, transparent), transparent 28%),
        color-mix(in srgb, var(--bg-0) 94%, transparent) !important;
}

.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.theme-switcher {
    display: inline-flex;
    align-items: center;
}

.theme-toggle {
    min-height: var(--theme-control-height);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--button-secondary-bg);
    color: var(--button-secondary-color);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 12%, transparent);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.theme-toggle:hover {
    transform: translateY(-2px);
    border-color: var(--line-strong);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--accent) 18%, transparent);
}

.theme-toggle-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex: 0 0 auto;
    background:
        radial-gradient(circle at 32% 28%, #fff 0 10%, transparent 11%),
        conic-gradient(from 20deg, var(--brand-strong), var(--silver), var(--diamond), var(--accent), var(--brand-strong));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.38), 0 0 20px color-mix(in srgb, var(--accent) 28%, transparent);
}

.theme-toggle-copy {
    display: grid;
    gap: 1px;
    text-align: left;
    line-height: 1.05;
}

.theme-toggle-kicker {
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

.theme-toggle [data-theme-label] {
    font-size: 13px;
    color: var(--brand-strong);
}

:root[data-theme="diamond-silver"] .brand-coin-aura,
:root[data-theme="diamond-silver"] .brand-glow-ring-outer {
    border-color: rgba(65, 199, 255, 0.2) !important;
    box-shadow: 0 0 36px rgba(65, 199, 255, 0.18), inset 0 0 26px rgba(255,255,255,0.14) !important;
}

:root[data-theme="diamond-silver"] .brand-coin-front,
:root[data-theme="diamond-silver"] .brand-coin-back,
:root[data-theme="diamond-silver"] .brand-coin-side {
    background:
        radial-gradient(circle at 25% 18%, rgba(255,255,255,0.98), rgba(200,225,240,0.92) 18%, rgba(130,163,184,0.9) 52%, rgba(70,94,110,0.88) 78%, rgba(21,39,52,0.96) 100%) !important;
}

:root[data-theme="diamond-silver"] .brand-coin-engrave {
    color: rgba(9, 44, 65, 0.9) !important;
}

@media (max-width: 760px) {
    .topbar-actions {
        justify-content: stretch;
    }

    .topbar-actions > *,
    .theme-switcher,
    .theme-toggle {
        width: 100%;
    }

    .theme-toggle {
        justify-content: center;
    }
}