:root {
    --ui-accent: #10b981;
    --ui-accent-hover: #059669;
    --ui-accent-soft: rgb(16 185 129 / 12%);
    --ui-accent-border: rgb(16 185 129 / 32%);
    --ui-accent-on: #ffffff;
    --bg-body: #0f172a;
    --bg-card: #1e293b;
    --bg-card-hover: #263449;
    --border-color: #334155;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --ui-input: #111827;
    --bs-body-bg: var(--bg-body);
    --bs-body-color: var(--text-main);
    --bs-border-color: var(--border-color);
}

html[data-palette="amber"] { --ui-accent: #f59e0b; --ui-accent-hover: #d97706; --ui-accent-soft: rgb(245 158 11 / 12%); --ui-accent-border: rgb(245 158 11 / 34%); --ui-accent-on: #111827; }
html[data-palette="rose"] { --ui-accent: #f43f5e; --ui-accent-hover: #e11d48; --ui-accent-soft: rgb(244 63 94 / 12%); --ui-accent-border: rgb(244 63 94 / 34%); }
html[data-palette="sky"] { --ui-accent: #0ea5e9; --ui-accent-hover: #0284c7; --ui-accent-soft: rgb(14 165 233 / 12%); --ui-accent-border: rgb(14 165 233 / 34%); }
html[data-palette="violet"] { --ui-accent: #8b5cf6; --ui-accent-hover: #7c3aed; --ui-accent-soft: rgb(139 92 246 / 12%); --ui-accent-border: rgb(139 92 246 / 34%); }

html[data-theme="light"] {
    --bg-body: #f1f5f9;
    --bg-card: #ffffff;
    --bg-card-hover: #eef2f7;
    --border-color: #d8e0ea;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --ui-input: #ffffff;
    color-scheme: light;
}

html[data-theme="dark"] { color-scheme: dark; }
html, body { background: var(--bg-body) !important; color: var(--text-main) !important; }
body { font-size: .82rem; }

.navbar-custom {
    background: var(--bg-card) !important;
    border-bottom-color: var(--border-color) !important;
    min-height: 52px;
    padding-bottom: 7px !important;
    padding-top: 7px !important;
}

.navbar-custom .navbar-brand { color: var(--text-main); font-size: .95rem; }
.navbar-custom .navbar-brand i { color: var(--ui-accent); }
.navbar-custom .container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
.user-badge { background: var(--ui-input) !important; border-color: var(--border-color) !important; color: var(--text-muted) !important; font-size: .68rem !important; padding: 5px 9px !important; }
.user-badge b { color: var(--text-main) !important; }

.global-appearance { align-items: center; display: flex; gap: 6px; }
.global-appearance label { color: var(--text-muted); font-size: .62rem; }
.global-palette, .global-theme-toggle {
    background: var(--ui-input);
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--text-main);
    font-family: inherit;
    font-size: .66rem;
    min-height: 31px;
    padding: 4px 8px;
}
.global-palette { min-width: 78px; }
.global-theme-toggle { align-items: center; cursor: pointer; display: inline-flex; gap: 5px; }
.global-palette:hover, .global-theme-toggle:hover { border-color: var(--ui-accent); }
.global-palette:focus-visible, .global-theme-toggle:focus-visible { box-shadow: 0 0 0 3px var(--ui-accent-soft); outline: 2px solid var(--ui-accent); }
.standalone-appearance { align-items: center; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 9px; box-shadow: 0 8px 24px rgb(15 23 42 / 18%); display: flex; gap: 6px; padding: 6px; }
.standalone-appearance .global-palette, .standalone-appearance .global-theme-toggle { min-height: 30px; }
.login-appearance { left: 14px; position: fixed; top: 14px; z-index: 20; }

.panel-nav { gap: 5px !important; margin-bottom: 12px !important; }
.panel-nav .btn { border-radius: 7px; font-size: .65rem; line-height: 1.3; padding: 5px 9px; }

.card, .card-custom, .modal-content, .dropdown-menu, .list-group-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
}
.card-custom { border-radius: 10px !important; box-shadow: 0 8px 24px rgb(15 23 42 / 12%) !important; }
.queue-card, .priority-card, .history-card, .sync-card, .commission-card, .import-card, .detail-card,
.admin-tasks .panel, .admin-work .panel, .seller-panel, .cardx, .save-panel, .child-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    border-radius: 10px !important;
    color: var(--text-main) !important;
}
.metric, .stat, .priority-num, .priority-badge, .permission-grid label, .assignee-grid label {
    background: var(--bg-card-hover) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
}
.login-box { background: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; }
.login-box h1, .login-box h1 span { color: var(--ui-accent) !important; }
.login-box input { background: var(--ui-input) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; }
.login-box input:focus { border-color: var(--ui-accent) !important; box-shadow: 0 0 0 3px var(--ui-accent-soft); }
.login-box button[type="submit"] { background: var(--ui-accent) !important; color: var(--ui-accent-on) !important; }
.login-box button[type="submit"]:hover { background: var(--ui-accent-hover) !important; }
.card-header, .card-footer { background-color: var(--bg-card-hover); border-color: var(--border-color); }
.card-body { padding: 12px; }

.table { --bs-table-bg: transparent; --bs-table-color: var(--text-main); --bs-table-border-color: var(--border-color); color: var(--text-main) !important; font-size: .72rem; }
.table thead th { background: var(--bg-card-hover) !important; border-color: var(--border-color) !important; color: var(--text-muted) !important; font-size: .66rem !important; padding: 9px 8px; }
.table tbody td { background: transparent; border-color: var(--border-color) !important; color: var(--text-main); padding: 8px; }
.table tbody tr:hover > * { background: var(--ui-accent-soft) !important; color: var(--text-main); }

.form-control, .form-select, .form-check-input, .input-group-text {
    background-color: var(--ui-input) !important;
    border-color: var(--border-color) !important;
    color: var(--text-main) !important;
    font-size: .72rem;
}
.form-control, .form-select { border-radius: 7px; min-height: 34px; }
.form-control:focus, .form-select:focus { border-color: var(--ui-accent) !important; box-shadow: 0 0 0 3px var(--ui-accent-soft) !important; }
.form-control::placeholder { color: var(--text-muted); }
.form-label { color: var(--text-muted); font-size: .68rem; margin-bottom: 4px; }

.btn { border-radius: 7px; font-size: .7rem; }
.btn-primary { background: var(--ui-accent) !important; border-color: var(--ui-accent) !important; color: var(--ui-accent-on) !important; }
.btn-primary:hover { background: var(--ui-accent-hover) !important; border-color: var(--ui-accent-hover) !important; }
.btn-outline-primary { border-color: var(--ui-accent-border) !important; color: var(--ui-accent) !important; }
.btn-outline-primary:hover, .btn-outline-primary.active { background: var(--ui-accent) !important; border-color: var(--ui-accent) !important; color: var(--ui-accent-on) !important; }
.btn-danger { font-size: .67rem; padding: 5px 9px; }
.badge { font-size: .62rem; padding: 4px 7px; }
.alert { border-radius: 9px; font-size: .72rem; padding: 9px 12px; }

.text-muted { color: var(--text-muted) !important; }
.dropdown-item { color: var(--text-main) !important; font-size: .72rem; }
.dropdown-item:hover { background: var(--ui-accent-soft) !important; }
.detail-item, .details-panel, .raw-box { background: var(--bg-card-hover) !important; border-color: var(--border-color) !important; color: var(--text-main) !important; }
.detail-key { color: var(--text-muted) !important; }
.detail-value { color: var(--text-main) !important; }

html[data-theme="light"] .panel-standalone { background: var(--bg-body) !important; color: var(--text-main) !important; }
html[data-theme="light"] .panel-standalone .bg-slate-900 { background-color: var(--bg-body) !important; }
html[data-theme="light"] .panel-standalone .bg-slate-800 { background-color: var(--bg-card) !important; }
html[data-theme="light"] .panel-standalone .bg-slate-700 { background-color: var(--bg-card-hover) !important; }
html[data-theme="light"] .panel-standalone .border-slate-700,
html[data-theme="light"] .panel-standalone .border-slate-600 { border-color: var(--border-color) !important; }
html[data-theme="light"] .panel-standalone .text-slate-100,
html[data-theme="light"] .panel-standalone .text-slate-200,
html[data-theme="light"] .panel-standalone .text-slate-300 { color: var(--text-main) !important; }
html[data-theme="light"] .panel-standalone .text-slate-400 { color: var(--text-muted) !important; }

body > .container-fluid { padding-left: 16px !important; padding-right: 16px !important; padding-top: 11px !important; }
h1, .h1 { font-size: 1.35rem; }
h2, .h2 { font-size: 1.15rem; }
h3, .h3 { font-size: 1rem; }
h4, .h4 { font-size: .9rem; }
h5, .h5 { font-size: .82rem; }

@media (max-width: 768px) {
    .navbar-custom .container-fluid { align-items: stretch !important; }
    .global-appearance { flex-wrap: wrap; }
    .panel-nav { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 4px; }
    .panel-nav .btn { flex: 0 0 auto; }
    body > .container-fluid { padding-left: 10px !important; padding-right: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}