/* =========================================================
АККМИР МП — MARKETPLACE ANALYTICS
style.css
========================================================= */

/* ---------- RESET ---------- */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif;

background: #f5f7fb;
color: #172033;
line-height: 1.5;
min-height: 100vh;

transition:
background 0.25s ease,
color 0.25s ease;
}

button,
input,
select {
font: inherit;
}

button {
cursor: pointer;
}

a {
color: inherit;
text-decoration: none;
}

table {
border-collapse: collapse;
width: 100%;
}


/* =========================================================
APP LAYOUT
========================================================= */

.app {
display: flex;
min-height: 100vh;
}


/* =========================================================
SIDEBAR
========================================================= */

.sidebar {
position: fixed;
left: 0;
top: 0;
bottom: 0;

width: 260px;

background: #ffffff;
border-right: 1px solid #e7eaf0;

display: flex;
flex-direction: column;

padding: 22px 16px;

z-index: 1000;

transition:
transform 0.3s ease,
background 0.25s ease,
border-color 0.25s ease;
}


/* ---------- Logo ---------- */

.logo {
display: flex;
align-items: center;
gap: 12px;

padding: 4px 8px 24px;
}

.logo-mark {
width: 42px;
height: 42px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 13px;

color: #ffffff;
font-size: 16px;
font-weight: 800;

background:
linear-gradient(
135deg,
#10BBD8,
#10BBD8
);

box-shadow:
0 8px 20px rgba(168, 85, 247, 0.25);
}

.logo-text {
display: flex;
flex-direction: column;
}

.logo-title {
font-size: 16px;
font-weight: 800;
letter-spacing: -0.3px;
}

.logo-subtitle {
margin-top: 1px;

color: #8b93a5;
font-size: 11px;
font-weight: 500;
}


/* ---------- Navigation ---------- */

.sidebar-nav {
display: flex;
flex-direction: column;
gap: 5px;

margin-top: 8px;
}

.nav-item {
width: 100%;

display: flex;
align-items: center;
gap: 12px;

padding: 11px 13px;

border: 0;
border-radius: 11px;

background: transparent;
color: #667085;

font-size: 14px;
font-weight: 600;

text-align: left;

transition:
background 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}

.nav-item:hover {
background: #EEF6FF;
color: #1677F2;
}

.nav-item.active {
background:
linear-gradient(
90deg,
rgba(168, 85, 247, 0.12),
rgba(236, 72, 153, 0.06)
);

color: #1677F2;
}

.nav-icon {
width: 20px;
min-width: 20px;

display: flex;
align-items: center;
justify-content: center;

font-size: 17px;
}

.nav-label {
white-space: nowrap;
}


/* ---------- Sidebar bottom ---------- */

.sidebar-bottom {
margin-top: auto;

padding: 14px 10px 4px;
}

.connection-card {
padding: 14px;

background: #f8fafc;
border: 1px solid #edf0f5;
border-radius: 14px;
}

.connection-title {
display: flex;
align-items: center;
gap: 7px;

font-size: 12px;
font-weight: 700;

color: #475467;
}

.connection-dot {
width: 8px;
height: 8px;

border-radius: 50%;

background: #22c55e;

box-shadow:
0 0 0 4px rgba(34, 197, 94, 0.1);
}

.connection-info {
margin-top: 8px;

color: #98a2b3;
font-size: 11px;

line-height: 1.5;
}


/* =========================================================
MAIN
========================================================= */

.main {
width: calc(100% - 260px);
margin-left: 260px;

min-width: 0;

padding: 28px 32px 50px;

transition:
margin-left 0.3s ease,
width 0.3s ease;
}


/* =========================================================
HEADER
========================================================= */

.topbar {
display: flex;
align-items: flex-start;
justify-content: space-between;

gap: 20px;

margin-bottom: 25px;
}

.page-title {
font-size: 29px;
font-weight: 800;
line-height: 1.2;

letter-spacing: -0.8px;

color: #101828;
}

.page-subtitle {
margin-top: 7px;

color: #667085;
font-size: 14px;
}

.topbar-actions {
display: flex;
align-items: center;
gap: 9px;

flex-wrap: wrap;
}


/* =========================================================
BUTTONS
========================================================= */

.btn {
display: inline-flex;
align-items: center;
justify-content: center;

gap: 8px;

min-height: 40px;

padding: 0 15px;

border: 1px solid transparent;
border-radius: 10px;

font-size: 13px;
font-weight: 700;

transition:
transform 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease,
border-color 0.2s ease;
}

.btn:hover {
transform: translateY(-1px);
}

.btn:active {
transform: translateY(0);
}

.btn-primary {
color: #ffffff;

background:
linear-gradient(
135deg,
#1677F2,
#10BBD8
);

box-shadow:
0 6px 18px rgba(139, 92, 246, 0.2);
}

.btn-primary:hover {
box-shadow:
0 9px 24px rgba(139, 92, 246, 0.28);
}

.btn-secondary {
color: #344054;

background: #ffffff;
border-color: #e4e7ec;
}

.btn-secondary:hover {
background: #f9fafb;
border-color: #d0d5dd;
}

.btn-ghost {
color: #667085;

background: transparent;
border-color: transparent;
}

.btn-ghost:hover {
background: #f2f4f7;
}


/* =========================================================
MARKETPLACE SWITCHER
========================================================= */

.marketplace-switcher {
display: flex;
align-items: center;

gap: 5px;

padding: 5px;

margin-bottom: 20px;

width: fit-content;

background: #ffffff;
border: 1px solid #e7eaf0;

border-radius: 12px;

box-shadow:
0 2px 8px rgba(16, 24, 40, 0.03);
}

.marketplace-tab {
min-height: 36px;

padding: 0 14px;

border: 0;
border-radius: 8px;

background: transparent;

color: #667085;

font-size: 12px;
font-weight: 700;

transition:
background 0.2s ease,
color 0.2s ease;
}

.marketplace-tab:hover {
color: #344054;
background: #f8fafc;
}

.marketplace-tab.active {
background: #101828;
color: #ffffff;
}


/* =========================================================
FILTER PANEL
========================================================= */

.filters-card {
padding: 18px;

margin-bottom: 22px;

background: #ffffff;

border: 1px solid #e7eaf0;
border-radius: 16px;

box-shadow:
0 3px 12px rgba(16, 24, 40, 0.035);
}

.filters-header {
display: flex;
align-items: center;
justify-content: space-between;

gap: 15px;

margin-bottom: 15px;
}

.filters-title {
display: flex;
align-items: center;
gap: 9px;

font-size: 14px;
font-weight: 800;

color: #101828;
}

.filters-grid {
display: grid;

grid-template-columns:
repeat(6, minmax(130px, 1fr));

gap: 12px;
}

.filter-group {
min-width: 0;
}

.filter-label {
display: block;

margin-bottom: 6px;

color: #667085;

font-size: 11px;
font-weight: 700;
}

.filter-control {
width: 100%;
height: 40px;

padding: 0 11px;

border: 1px solid #dfe3ea;
border-radius: 9px;

outline: none;

background: #ffffff;
color: #344054;

font-size: 12px;

transition:
border-color 0.2s ease,
box-shadow 0.2s ease;
}

.filter-control:hover {
border-color: #c7ccd6;
}

.filter-control:focus {
border-color: #1677F2;

box-shadow:
0 0 0 3px rgba(139, 92, 246, 0.1);
}


/* =========================================================
KPI CARDS
========================================================= */

.kpi-grid {
display: grid;

grid-template-columns:
repeat(4, minmax(0, 1fr));

gap: 14px;

margin-bottom: 22px;
}

.kpi-card {
position: relative;

min-height: 145px;

padding: 18px;

overflow: hidden;

background: #ffffff;

border: 1px solid #e7eaf0;
border-radius: 16px;

box-shadow:
0 4px 14px rgba(16, 24, 40, 0.035);

transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}

.kpi-card:hover {
transform: translateY(-2px);

box-shadow:
0 10px 28px rgba(16, 24, 40, 0.07);
}

.kpi-card::after {
content: "";

position: absolute;

right: -25px;
bottom: -35px;

width: 100px;
height: 100px;

border-radius: 50%;

background: rgba(139, 92, 246, 0.055);

pointer-events: none;
}

.kpi-label {
color: #667085;

font-size: 12px;
font-weight: 700;
}

.kpi-value {
margin-top: 12px;

color: #101828;

font-size: 25px;
font-weight: 800;

letter-spacing: -0.6px;
}

.kpi-change {
display: inline-flex;
align-items: center;
gap: 4px;

margin-top: 8px;

padding: 3px 7px;

border-radius: 6px;

background: #ecfdf3;
color: #039855;

font-size: 10px;
font-weight: 800;
}

.kpi-change.negative {
background: #fef3f2;
color: #d92d20;
}

.kpi-icon {
position: absolute;

top: 17px;
right: 17px;

width: 34px;
height: 34px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 9px;

background: #EEF6FF;

color: #1677F2;

font-size: 16px;
}


/* =========================================================
DASHBOARD GRID
========================================================= */

.dashboard-grid {
display: grid;

grid-template-columns:
minmax(0, 2fr)
minmax(280px, 1fr);

gap: 18px;

margin-bottom: 18px;
}


/* =========================================================
CARDS
========================================================= */

.card {
min-width: 0;

padding: 20px;

background: #ffffff;

border: 1px solid #e7eaf0;
border-radius: 16px;

box-shadow:
0 3px 12px rgba(16, 24, 40, 0.035);
}

.card-header {
display: flex;
align-items: center;
justify-content: space-between;

gap: 15px;

margin-bottom: 18px;
}

.card-title {
color: #101828;

font-size: 14px;
font-weight: 800;
}

.card-subtitle {
margin-top: 3px;

color: #98a2b3;

font-size: 11px;
}

.card-actions {
display: flex;
align-items: center;
gap: 6px;
}


/* =========================================================
CHART CONTROLS
========================================================= */

.chart-switcher {
display: flex;
align-items: center;
gap: 3px;

padding: 3px;

background: #f2f4f7;

border-radius: 8px;
}

.chart-switch {
padding: 6px 9px;

border: 0;
border-radius: 6px;

background: transparent;

color: #667085;

font-size: 10px;
font-weight: 700;
}

.chart-switch.active {
background: #ffffff;
color: #344054;

box-shadow:
0 1px 3px rgba(16, 24, 40, 0.1);
}

.chart-wrapper {
position: relative;

width: 100%;
height: 310px;
}

.chart-wrapper.small {
height: 260px;
}

.chart-wrapper canvas {
width: 100% !important;
height: 100% !important;
}


/* =========================================================
MARKETPLACE BADGES
========================================================= */

.marketplace-badge {
display: inline-flex;
align-items: center;
gap: 6px;

padding: 5px 8px;

border-radius: 7px;

font-size: 10px;
font-weight: 800;

white-space: nowrap;
}

.marketplace-badge.wb {
color: #1677F2;
background: #f5efff;
}

.marketplace-badge.ozon {
color: #005bff;
background: #edf4ff;
}

.marketplace-badge.yandex {
color: #151515;
background: #fff8d9;
}

.marketplace-logo {
width: 18px;
height: 18px;

display: inline-flex;
align-items: center;
justify-content: center;

border-radius: 5px;

font-size: 8px;
font-weight: 900;
}

.marketplace-logo.wb {
color: #ffffff;
background:
linear-gradient(
135deg,
#10BBD8,
#10BBD8
);
}

.marketplace-logo.ozon {
color: #ffffff;
background: #005bff;
}

.marketplace-logo.yandex {
color: #111111;
background: #ffcc00;
}


/* =========================================================
COMPARISON
========================================================= */

.comparison-grid {
display: grid;

grid-template-columns:
repeat(3, minmax(0, 1fr));

gap: 12px;
}

.marketplace-card {
padding: 16px;

border-radius: 13px;

border: 1px solid #eaecf0;

background: #fcfcfd;

transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}

.marketplace-card:hover {
transform: translateY(-2px);

box-shadow:
0 7px 18px rgba(16, 24, 40, 0.06);
}

.marketplace-card-header {
display: flex;
align-items: center;
justify-content: space-between;

margin-bottom: 15px;
}

.marketplace-name {
display: flex;
align-items: center;
gap: 8px;

font-size: 12px;
font-weight: 800;
}

.marketplace-value {
font-size: 19px;
font-weight: 800;

color: #101828;
}

.marketplace-label {
margin-top: 3px;

color: #98a2b3;

font-size: 10px;
}


/* =========================================================
TABLES
========================================================= */

.table-card {
margin-top: 18px;

overflow: hidden;
}

.table-wrapper {
width: 100%;

overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.data-table {
min-width: 760px;
}

.data-table th {
padding: 11px 14px;

border-bottom: 1px solid #eaecf0;

background: #f9fafb;

color: #667085;

font-size: 10px;
font-weight: 800;

text-align: left;

white-space: nowrap;
}

.data-table td {
padding: 13px 14px;

border-bottom: 1px solid #f0f2f5;

color: #344054;

font-size: 11px;

white-space: nowrap;
}

.data-table tbody tr {
transition:
background 0.15s ease;
}

.data-table tbody tr:hover {
background: #fafaff;
}

.data-table tbody tr:last-child td {
border-bottom: 0;
}

.product-name {
max-width: 250px;

overflow: hidden;

text-overflow: ellipsis;
white-space: nowrap;

color: #101828;
font-weight: 700;
}

.money {
font-weight: 800;
color: #101828;
}

.profit {
color: #039855;
font-weight: 800;
}

.margin {
font-weight: 800;
}

.stock {
font-weight: 700;
}


/* =========================================================
TABLE SEARCH
========================================================= */

.table-toolbar {
display: flex;
align-items: center;
justify-content: space-between;

gap: 12px;

margin-bottom: 14px;
}

.search-box {
position: relative;

width: 240px;
}

.search-box input {
width: 100%;
height: 38px;

padding: 0 12px 0 35px;

border: 1px solid #dfe3ea;
border-radius: 9px;

outline: none;

background: #ffffff;

color: #344054;

font-size: 11px;
}

.search-box input:focus {
border-color: #1677F2;

box-shadow:
0 0 0 3px rgba(139, 92, 246, 0.1);
}

.search-icon {
position: absolute;

left: 12px;
top: 50%;

transform: translateY(-50%);

color: #98a2b3;

font-size: 13px;

pointer-events: none;
}


/* =========================================================
PAGINATION
========================================================= */

.pagination {
display: flex;
align-items: center;
justify-content: flex-end;

gap: 5px;

margin-top: 15px;
}

.page-btn {
min-width: 30px;
height: 30px;

padding: 0 8px;

border: 1px solid #e4e7ec;
border-radius: 7px;

background: #ffffff;

color: #667085;

font-size: 10px;
font-weight: 700;
}

.page-btn:hover {
background: #f9fafb;
}

.page-btn.active {
background: #101828;
border-color: #101828;

color: #ffffff;
}


/* =========================================================
STOCK ANALYTICS
========================================================= */

.stock-grid {
display: grid;

grid-template-columns:
repeat(4, minmax(0, 1fr));

gap: 12px;

margin-bottom: 15px;
}

.stock-stat {
padding: 15px;

border: 1px solid #eaecf0;
border-radius: 12px;

background: #fcfcfd;
}

.stock-stat-label {
color: #667085;

font-size: 10px;
font-weight: 700;
}

.stock-stat-value {
margin-top: 7px;

color: #101828;

font-size: 20px;
font-weight: 800;
}

.stock-stat.warning .stock-stat-value {
color: #dc6803;
}

.stock-stat.danger .stock-stat-value {
color: #d92d20;
}

.stock-stat.success .stock-stat-value {
color: #039855;
}


/* =========================================================
EMPTY STATE
========================================================= */

.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

min-height: 220px;

padding: 30px;

text-align: center;
}

.empty-icon {
width: 54px;
height: 54px;

display: flex;
align-items: center;
justify-content: center;

margin-bottom: 12px;

border-radius: 16px;

background: #f2f4f7;

color: #667085;

font-size: 23px;
}

.empty-title {
color: #344054;

font-size: 14px;
font-weight: 800;
}

.empty-text {
max-width: 400px;

margin-top: 5px;

color: #98a2b3;

font-size: 11px;
}


/* =========================================================
EXCEL UPLOAD
========================================================= */

.upload-zone {
position: relative;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

min-height: 210px;

padding: 30px;

border: 2px dashed #d8dce5;
border-radius: 16px;

background: #fafbfc;

text-align: center;

transition:
border-color 0.2s ease,
background 0.2s ease,
transform 0.2s ease;
}

.upload-zone:hover,
.upload-zone.dragover {
border-color: #1677F2;

background: #F4FAFF;

transform: translateY(-1px);
}

.upload-icon {
width: 52px;
height: 52px;

display: flex;
align-items: center;
justify-content: center;

margin-bottom: 12px;

border-radius: 15px;

background:
linear-gradient(
135deg,
#E8F5FF,
#E7FBF6
);

color: #1677F2;

font-size: 23px;
}

.upload-title {
color: #344054;

font-size: 14px;
font-weight: 800;
}

.upload-text {
margin-top: 5px;

color: #98a2b3;

font-size: 11px;
}

.upload-formats {
margin-top: 8px;

color: #98a2b3;

font-size: 10px;
}


/* =========================================================
MODAL
========================================================= */

.modal-overlay {
position: fixed;

inset: 0;

display: none;
align-items: center;
justify-content: center;

padding: 20px;

background: rgba(16, 24, 40, 0.55);

backdrop-filter: blur(5px);

z-index: 3000;
}

.modal-overlay.active {
display: flex;
}

.modal {
width: min(680px, 100%);

max-height: 90vh;

overflow-y: auto;

background: #ffffff;

border-radius: 18px;

box-shadow:
0 25px 70px rgba(16, 24, 40, 0.22);

animation:
modalIn 0.22s ease;
}

@keyframes modalIn {
from {
opacity: 0;
transform: translateY(10px) scale(0.98);
}

to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

.modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;

gap: 15px;

padding: 22px;

border-bottom: 1px solid #eaecf0;
}

.modal-title {
color: #101828;

font-size: 18px;
font-weight: 800;
}

.modal-subtitle {
margin-top: 4px;

color: #98a2b3;

font-size: 11px;
}

.modal-close {
width: 34px;
height: 34px;

display: flex;
align-items: center;
justify-content: center;

border: 0;
border-radius: 9px;

background: #f2f4f7;

color: #667085;

font-size: 17px;
}

.modal-close:hover {
background: #eaecf0;
}

.modal-body {
padding: 22px;
}

.product-info-grid {
display: grid;

grid-template-columns:
repeat(3, minmax(0, 1fr));

gap: 10px;

margin-bottom: 20px;
}

.product-info {
padding: 12px;

border: 1px solid #eaecf0;
border-radius: 10px;

background: #fcfcfd;
}

.product-info-label {
color: #98a2b3;

font-size: 9px;
font-weight: 700;
}

.product-info-value {
margin-top: 4px;

color: #344054;

font-size: 12px;
font-weight: 800;
}


/* =========================================================
TOAST
========================================================= */

.toast-container {
position: fixed;

right: 20px;
bottom: 20px;

display: flex;
flex-direction: column;
gap: 10px;

width: min(360px, calc(100% - 40px));

z-index: 5000;
}

.toast {
display: flex;
align-items: flex-start;

gap: 10px;

padding: 13px 14px;

border-radius: 12px;

background: #ffffff;

border: 1px solid #eaecf0;

box-shadow:
0 12px 35px rgba(16, 24, 40, 0.13);

animation:
toastIn 0.25s ease;
}

@keyframes toastIn {
from {
opacity: 0;
transform: translateX(15px);
}

to {
opacity: 1;
transform: translateX(0);
}
}

.toast.success {
border-left: 4px solid #12b76a;
}

.toast.error {
border-left: 4px solid #f04438;
}

.toast.warning {
border-left: 4px solid #f79009;
}

.toast-icon {
font-size: 15px;
}

.toast-content {
flex: 1;
}

.toast-title {
color: #344054;

font-size: 11px;
font-weight: 800;
}

.toast-message {
margin-top: 2px;

color: #667085;

font-size: 10px;
}


/* =========================================================
LOADER
========================================================= */

.loading-overlay {
position: fixed;

inset: 0;

display: none;
align-items: center;
justify-content: center;

background: rgba(255, 255, 255, 0.7);

backdrop-filter: blur(3px);

z-index: 4000;
}

.loading-overlay.active {
display: flex;
}

.loader-box {
display: flex;
flex-direction: column;
align-items: center;

padding: 25px 35px;

border-radius: 16px;

background: #ffffff;

box-shadow:
0 15px 45px rgba(16, 24, 40, 0.12);
}

.spinner {
width: 32px;
height: 32px;

margin-bottom: 12px;

border: 3px solid #ede9fe;
border-top-color: #1677F2;

border-radius: 50%;

animation:
spin 0.8s linear infinite;
}

@keyframes spin {
to {
transform: rotate(360deg);
}
}

.loader-text {
color: #667085;

font-size: 11px;
font-weight: 700;
}


/* =========================================================
SKELETON
========================================================= */

.skeleton {
position: relative;

overflow: hidden;

background: #eaecf0;

border-radius: 7px;
}

.skeleton::after {
content: "";

position: absolute;

inset: 0;

transform: translateX(-100%);

background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.65),
transparent
);

animation:
skeleton 1.4s infinite;
}

@keyframes skeleton {
100% {
transform: translateX(100%);
}
}


/* =========================================================
FILE STATUS
========================================================= */

.file-status {
display: flex;
align-items: center;

gap: 8px;

padding: 9px 11px;

border-radius: 9px;

background: #f8fafc;

color: #667085;

font-size: 10px;
}

.file-status-dot {
width: 7px;
height: 7px;

border-radius: 50%;

background: #22c55e;
}


/* =========================================================
MOBILE MENU
========================================================= */


.sidebar-overlay {
position: fixed;

inset: 0;

display: none;

background: rgba(16, 24, 40, 0.4);

z-index: 900;
}

.sidebar-overlay.active {
display: block;
}


/* =========================================================
THEME SWITCH
========================================================= */

.theme-switch {
display: inline-flex;
align-items: center;
gap: 7px;

min-height: 38px;

padding: 0 11px;

border: 1px solid #e4e7ec;
border-radius: 9px;

background: #ffffff;

color: #667085;

font-size: 11px;
font-weight: 700;
}

.theme-switch:hover {
background: #f9fafb;
}


/* =========================================================
DARK THEME
========================================================= */

body.dark {
background: #0f1117;
color: #eaecf0;
}

body.dark .sidebar {
background: #151821;
border-color: #272b36;
}

body.dark .logo-title,
body.dark .page-title,
body.dark .card-title,
body.dark .kpi-value,
body.dark .marketplace-value,
body.dark .modal-title,
body.dark .product-name,
body.dark .money,
body.dark .stock-stat-value {
color: #f9fafb;
}

body.dark .logo-subtitle,
body.dark .page-subtitle,
body.dark .card-subtitle,
body.dark .kpi-label,
body.dark .filter-label,
body.dark .sidebar-bottom,
body.dark .connection-info,
body.dark .marketplace-label {
color: #98a2b3;
}

body.dark .nav-item {
color: #98a2b3;
}

body.dark .nav-item:hover {
background: #211c2d;
color: #c4b5fd;
}

body.dark .nav-item.active {
background: rgba(139, 92, 246, 0.15);
color: #c4b5fd;
}

body.dark .connection-card,
body.dark .filters-card,
body.dark .card,
body.dark .kpi-card,
body.dark .marketplace-switcher,
body.dark .marketplace-card,
body.dark .stock-stat,
body.dark .modal,
body.dark .toast,
body.dark .loader-box,
body.dark .theme-switch {
background: #171a23;
border-color: #292e3a;
}

body.dark .connection-title,
body.dark .filters-title,
body.dark .filter-control,
body.dark .data-table td,
body.dark .product-info-value {
color: #d0d5dd;
}

body.dark .filter-control,
body.dark .search-box input {
background: #11141b;
border-color: #303542;
color: #eaecf0;
}

body.dark .filter-control:focus,
body.dark .search-box input:focus {
border-color: #1677F2;
}

body.dark .btn-secondary {
background: #171a23;
border-color: #303542;
color: #d0d5dd;
}

body.dark .btn-secondary:hover {
background: #1d212c;
}

body.dark .btn-ghost:hover {
background: #222733;
}

body.dark .marketplace-tab {
color: #98a2b3;
}

body.dark .marketplace-tab:hover {
background: #222733;
color: #ffffff;
}

body.dark .marketplace-tab.active {
background: #f9fafb;
color: #111827;
}

body.dark .chart-switcher {
background: #222733;
}

body.dark .chart-switch.active {
background: #303542;
color: #f9fafb;
}

body.dark .data-table th {
background: #1d212c;
border-color: #292e3a;
color: #98a2b3;
}

body.dark .data-table td {
border-color: #252a35;
}

body.dark .data-table tbody tr:hover {
background: #1d212c;
}

body.dark .upload-zone {
background: #11141b;
border-color: #303542;
}

body.dark .upload-zone:hover,
body.dark .upload-zone.dragover {
background: #1d1729;
border-color: #1677F2;
}

body.dark .empty-icon {
background: #222733;
}

body.dark .modal-header {
border-color: #292e3a;
}

body.dark .modal-close {
background: #222733;
color: #98a2b3;
}

body.dark .product-info {
background: #11141b;
border-color: #292e3a;
}

body.dark .product-info-label {
color: #667085;
}

body.dark .product-info-value {
color: #d0d5dd;
}

body.dark .file-status {
background: #11141b;
color: #98a2b3;
}

body.dark .loading-overlay {
background: rgba(15, 17, 23, 0.7);
}

body.dark .skeleton {
background: #292e3a;
}

body.dark .skeleton::after {
background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.07),
transparent
);
}


/* =========================================================
RESPONSIVE — 1400px
========================================================= */

@media (max-width: 1400px) {

.main {
padding-left: 25px;
padding-right: 25px;
}

.filters-grid {
grid-template-columns:
repeat(3, minmax(150px, 1fr));
}

.kpi-grid {
grid-template-columns:
repeat(4, minmax(0, 1fr));
}

.kpi-value {
font-size: 22px;
}
}


/* =========================================================
RESPONSIVE — 1100px
========================================================= */

@media (max-width: 1100px) {

.sidebar {
width: 230px;
}

.main {
width: calc(100% - 230px);
margin-left: 230px;
}

.kpi-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}

.dashboard-grid {
grid-template-columns: 1fr;
}

.comparison-grid {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
}


/* =========================================================
RESPONSIVE — 850px
========================================================= */

@media (max-width: 850px) {

.sidebar {
transform: translateX(-100%);

width: 270px;

box-shadow:
15px 0 40px rgba(16, 24, 40, 0.12);
}

.sidebar.open {
transform: translateX(0);
}

.main {
width: 100%;
margin-left: 0;

padding: 20px;
}


.topbar {
align-items: center;
}

.topbar-actions {
justify-content: flex-end;
}

.filters-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}

.comparison-grid {
grid-template-columns: 1fr;
}
}


/* =========================================================
RESPONSIVE — 650px
========================================================= */

@media (max-width: 650px) {

.main {
padding: 16px;
}

.topbar {
flex-direction: column;
align-items: stretch;

gap: 15px;
}

.page-title {
font-size: 24px;
}

.topbar-actions {
justify-content: flex-start;
}

.topbar-actions .btn {
flex: 1;
}

.marketplace-switcher {
width: 100%;
overflow-x: auto;
}

.marketplace-tab {
flex: 1;
white-space: nowrap;
}

.filters-card {
padding: 14px;
}

.filters-header {
align-items: flex-start;
}

.filters-grid {
grid-template-columns: 1fr;
}

.kpi-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));

gap: 10px;
}

.kpi-card {
min-height: 125px;
padding: 14px;
}

.kpi-value {
font-size: 19px;
}

.kpi-icon {
width: 30px;
height: 30px;

top: 13px;
right: 13px;
}

.card {
padding: 15px;
}

.card-header {
align-items: flex-start;
}

.chart-wrapper {
height: 260px;
}

.chart-wrapper.small {
height: 230px;
}

.stock-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}

.table-toolbar {
flex-direction: column;
align-items: stretch;
}

.search-box {
width: 100%;
}

.product-info-grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}

.modal-overlay {
padding: 10px;
}

.modal {
max-height: 94vh;
}

.modal-header,
.modal-body {
padding: 17px;
}
}


/* =========================================================
RESPONSIVE — 390px
========================================================= */

@media (max-width: 390px) {

.main {
padding: 12px;
}

.page-title {
font-size: 21px;
}

.page-subtitle {
font-size: 12px;
}

.topbar-actions {
display: grid;

grid-template-columns:
repeat(2, 1fr);

width: 100%;
}

.topbar-actions .btn {
width: 100%;
padding: 0 8px;

font-size: 11px;
}

.marketplace-tab {
padding: 0 9px;

font-size: 10px;
}

.kpi-card {
min-height: 115px;

padding: 12px;
}

.kpi-label {
font-size: 10px;
}

.kpi-value {
margin-top: 9px;

font-size: 17px;
}

.kpi-change {
font-size: 9px;
}

.chart-wrapper {
height: 230px;
}

.stock-stat {
padding: 12px;
}

.stock-stat-value {
font-size: 17px;
}
}


/* =========================================================
RESPONSIVE — 320px
========================================================= */

@media (max-width: 320px) {

.main {
padding: 9px;
}

.page-title {
font-size: 19px;
}

.kpi-grid {
gap: 7px;
}

.kpi-card {
padding: 10px;
border-radius: 12px;
}

.kpi-value {
font-size: 15px;
}

.kpi-icon {
display: none;
}

.card {
padding: 12px;
border-radius: 13px;
}

.chart-wrapper {
height: 210px;
}

.product-info-grid {
grid-template-columns: 1fr;
}
}


/* =========================================================
ACCESSIBILITY
========================================================= */

button:focus-visible,
input:focus-visible,
select:focus-visible {
outline: 3px solid rgba(139, 92, 246, 0.2);
outline-offset: 2px;
}


/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {
scroll-behavior: auto !important;

animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;

transition-duration: 0.01ms !important;
}
}

/* =========================================================
   АККМИР МП — COMPACT ONE-PAGE REDESIGN
   ========================================================= */
:root{
  --compact-bg:#f5f7ff;
  --compact-card:rgba(255,255,255,.94);
  --compact-text:#111827;
  --compact-muted:#667085;
  --compact-line:#e8eaf2;
  --compact-katiq-blue:#1677F2;
  --compact-pink:#10BBD8;
  --compact-blue:#2563eb;
  --compact-yellow:#f4c400;
  --compact-green:#10b981;
  --compact-red:#ef4444;
  --compact-shadow:0 8px 28px rgba(31,41,55,.07);
}

html,body{min-height:100%;}
body{
  background:
    radial-gradient(circle at 8% 0%,rgba(168,85,247,.10),transparent 28%),
    radial-gradient(circle at 92% 4%,rgba(37,99,235,.09),transparent 25%),
    var(--compact-bg);
}

/* One-screen dashboard: remove navigation and secondary analytics */
.sidebar,.sidebar-overlay{display:none!important;}
.main{width:100%!important;margin:0!important;padding:14px 18px 18px!important;max-width:none!important;}
.content{max-width:1600px;margin:0 auto!important;padding:0!important;}

/* Header */
.topbar{
  min-height:58px!important;
  padding:8px 12px!important;
  margin-bottom:10px!important;
  border:1px solid rgba(255,255,255,.7)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.82)!important;
  box-shadow:var(--compact-shadow)!important;
  backdrop-filter:blur(14px);
}
.topbar-left{gap:10px!important;}
.page-title,h1{font-size:22px!important;letter-spacing:-.6px!important;}
.page-subtitle{font-size:11px!important;margin-top:2px!important;}
.topbar-actions{gap:6px!important;}
.topbar-actions .primary-button,.topbar-actions .secondary-button,.topbar-actions .icon-button,.theme-button{
  height:34px!important;min-height:34px!important;border-radius:9px!important;
}
.topbar-actions .primary-button{background:linear-gradient(135deg,#1677F2,#10BBD8)!important;border:0!important;box-shadow:0 5px 14px rgba(139,92,246,.22);}
.topbar-actions .secondary-button{background:#fff!important;border-color:#e6e8ef!important;}

/* Marketplace filter */
.marketplace-switcher{
  width:100%!important;display:flex!important;justify-content:space-between!important;align-items:center!important;
  padding:5px!important;margin:0 0 10px!important;border-radius:12px!important;
  background:rgba(255,255,255,.9)!important;border:1px solid var(--compact-line)!important;
  box-shadow:0 4px 16px rgba(31,41,55,.045)!important;
}
.marketplace-tabs{display:flex;gap:4px!important;flex-wrap:wrap;}
.switcher-label{font-size:10px!important;font-weight:800!important;text-transform:uppercase;letter-spacing:.08em;color:#98a2b3;padding:0 7px!important;}
.marketplace-tab{height:32px!important;min-height:32px!important;padding:0 12px!important;border-radius:8px!important;font-size:11px!important;}
.marketplace-tab.active{background:#111827!important;box-shadow:0 4px 10px rgba(17,24,39,.15);}
.marketplace-tab[data-marketplace="Wildberries"]:not(.active):hover{background:linear-gradient(135deg,#E8F5FF,#E7FBF6)!important;color:#1677F2!important;}
.marketplace-tab[data-marketplace="Ozon"]:not(.active):hover{background:#eaf2ff!important;color:#005bff!important;}
.marketplace-tab[data-marketplace="Яндекс Маркет"]:not(.active):hover{background:#fff8d6!important;color:#171717!important;}
.market-logo{width:21px!important;height:21px!important;}
.data-status{font-size:10px!important;padding-right:7px;}

/* Hide all secondary page sections */
section.filters-panel,section.upload-panel,section.panel,section.stock-grid{display:none!important;}
.charts-grid{display:block!important;margin:0!important;}
.charts-grid>.chart-panel:not(.large-chart){display:none!important;}
.large-chart{display:block!important;width:100%!important;margin:0!important;}

/* KPI */
.kpi-grid{
  display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:9px!important;
  margin:0 0 10px!important;
}
.kpi-card{
  min-height:92px!important;height:92px!important;padding:11px 12px!important;border-radius:13px!important;
  background:var(--compact-card)!important;border:1px solid rgba(255,255,255,.9)!important;
  box-shadow:0 6px 18px rgba(31,41,55,.055)!important;overflow:hidden!important;
}
.kpi-card:nth-child(1){border-top:3px solid #1677F2!important;}
.kpi-card:nth-child(2){border-top:3px solid #2563eb!important;}
.kpi-card:nth-child(3){border-top:3px solid #06b6d4!important;}
.kpi-card:nth-child(4){border-top:3px solid #10b981!important;}
.kpi-card:nth-child(5){border-top:3px solid #22c55e!important;}
.kpi-card:nth-child(6){border-top:3px solid #f59e0b!important;}
.kpi-card:nth-child(7){border-top:3px solid #10BBD8!important;}
.kpi-card:nth-child(8){border-top:3px solid #f97316!important;}
.kpi-title,.kpi-label{font-size:10px!important;color:#667085!important;}
.kpi-value{font-size:18px!important;margin-top:7px!important;letter-spacing:-.45px!important;}
.kpi-change{font-size:8px!important;margin-top:4px!important;padding:2px 5px!important;}
.kpi-description{display:none!important;}
.kpi-icon{width:26px!important;height:26px!important;top:9px!important;right:9px!important;border-radius:8px!important;font-size:12px!important;}

/* Chart */
.chart-panel,.panel{border-radius:14px!important;}
.large-chart{background:rgba(255,255,255,.96)!important;border:1px solid var(--compact-line)!important;box-shadow:var(--compact-shadow)!important;}
.large-chart .panel-header{padding:12px 14px!important;margin-bottom:0!important;}
.large-chart .panel-header h2{font-size:14px!important;}
.large-chart .panel-header p{font-size:10px!important;margin-top:1px!important;}
.chart-switcher{padding:2px!important;border-radius:8px!important;}
.chart-switch{height:27px!important;padding:0 9px!important;font-size:10px!important;}
.chart-wrapper{height:320px!important;padding:0 8px 8px!important;}

/* Colorful chart accents */
.large-chart:before{
  content:"";display:block;height:3px;border-radius:14px 14px 0 0;
  background:linear-gradient(90deg,#1677F2 0%,#10BBD8 38%,#2563eb 72%,#06b6d4 100%);
}

/* Remove accidental empty blocks / spacing */
.content>section{margin-bottom:10px!important;}
.dashboard-grid,.comparison-grid,.table-container,.stock-grid,.low-stock-panel{display:none!important;}

/* Dark mode */
body.dark{
  background:radial-gradient(circle at 8% 0%,rgba(139,92,246,.14),transparent 28%),#0d1017!important;
}
body.dark .topbar,body.dark .marketplace-switcher,body.dark .kpi-card,body.dark .large-chart{
  background:rgba(20,24,34,.94)!important;border-color:#252b38!important;color:#f8fafc!important;
}
body.dark .kpi-title,body.dark .kpi-label,body.dark .page-subtitle,body.dark .switcher-label{color:#98a2b3!important;}
body.dark .kpi-value,body.dark .large-chart .panel-header h2{color:#f8fafc!important;}
body.dark .secondary-button,body.dark .icon-button{background:#171b25!important;color:#e5e7eb!important;border-color:#2a3040!important;}
body.dark .marketplace-switcher{box-shadow:none!important;}

@media (max-width:1250px){
  .kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}
@media (max-width:760px){
  .main{padding:8px!important;}
  .topbar{min-height:auto!important;padding:9px!important;}
  .topbar-left{width:100%;}
  .page-title,h1{font-size:19px!important;}
  .topbar-actions{width:100%;display:grid!important;grid-template-columns:1fr 1fr 38px!important;}
  .topbar-actions .upload-button{grid-column:1/3;grid-row:1;}
  .topbar-actions .secondary-button{grid-column:1/2;grid-row:2;}
  .topbar-actions .icon-button{grid-column:3;grid-row:2;}
  .theme-button{grid-column:2/3;grid-row:2;}
  .marketplace-switcher{overflow-x:auto;}
  .switcher-label{display:none;}
  .marketplace-tabs{min-width:max-content;}
  .marketplace-tab{padding:0 9px!important;}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;}
  .kpi-card{height:82px!important;min-height:82px!important;padding:9px!important;}
  .kpi-value{font-size:16px!important;}
  .kpi-icon{display:none!important;}
  .chart-wrapper{height:245px!important;}
}
@media (max-width:360px){
  .page-title,h1{font-size:17px!important;}
  .kpi-value{font-size:14px!important;}
  .kpi-title{font-size:9px!important;}
  .chart-wrapper{height:220px!important;}
}

/* =========================================================
   AKKMIR — REFERENCE UI PASS
   Visual system inspired by the supplied MP Control reference:
   dark navigation, crisp white workspace, compact cards,
   marketplace accents, outlined icons and dense information layout.
   ========================================================= */
:root{
  --ui-bg:#f4f6fa;
  --ui-surface:#ffffff;
  --ui-surface-2:#f8fafc;
  --ui-line:#e6eaf0;
  --ui-text:#111827;
  --ui-muted:#667085;
  --ui-soft:#98a2b3;
  --ui-blue:#2f6df6;
  --ui-blue-soft:#edf3ff;
  --ui-green:#20b15a;
  --ui-green-soft:#eaf8f0;
  --ui-katiq-blue:#1677F2;
  --ui-katiq-blue-soft:#E8F5FF;
  --ui-orange:#f59e0b;
  --ui-orange-soft:#fff6df;
  --ui-red:#e5484d;
  --ui-red-soft:#fff0f1;
  --ui-teal:#12b8a6;
  --ui-teal-soft:#e8faf7;
  --ui-sidebar:#0b1220;
  --ui-sidebar-2:#101a2d;
  --ui-shadow:0 8px 28px rgba(15,23,42,.055);
}

html,body{background:var(--ui-bg)!important;color:var(--ui-text)!important;}
body{font-size:13px;}

/* ---------- Sidebar ---------- */
.sidebar{
  display:flex!important;
  width:214px!important;
  padding:16px 10px 12px!important;
  background:linear-gradient(180deg,#0a1220 0%,#0c1628 58%,#0a1220 100%)!important;
  border-right:1px solid #18243a!important;
  color:#dce4f4!important;
  box-shadow:10px 0 28px rgba(15,23,42,.08)!important;
}
.sidebar-header{padding:4px 7px 18px!important;border-bottom:1px solid rgba(255,255,255,.07)!important;}
.brand{gap:10px!important;}
.brand-logo{
  width:36px!important;height:36px!important;border-radius:10px!important;
  background:linear-gradient(135deg,#ffffff 0%,#dbe6ff 100%)!important;
  color:#1f5fe8!important;box-shadow:0 7px 18px rgba(0,0,0,.18)!important;
}
.brand-logo span{font-size:15px!important;font-weight:900!important;}
.brand-text strong{color:#fff!important;font-size:15px!important;}
.brand-text small{color:#7f8da6!important;font-size:9px!important;}
.sidebar-close{color:#91a0b9!important;}
.nav-section-title{color:#61708a!important;font-size:9px!important;letter-spacing:.11em!important;margin:14px 10px 7px!important;}
.sidebar-nav{gap:3px!important;margin-top:4px!important;}
.nav-item{
  padding:9px 11px!important;border-radius:9px!important;gap:10px!important;
  color:#9aa8be!important;font-size:12px!important;font-weight:600!important;
}
.nav-item:hover{background:rgba(255,255,255,.055)!important;color:#fff!important;}
.nav-item.active{
  color:#fff!important;
  background:linear-gradient(135deg,#326df5 0%,#2857db 100%)!important;
  box-shadow:0 7px 18px rgba(47,109,246,.22)!important;
}
.nav-icon{width:18px!important;min-width:18px!important;height:18px!important;}
.nav-icon svg{width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
.sidebar-bottom{padding:10px 5px 2px!important;}
.connection-card{padding:10px!important;border-radius:10px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.07)!important;}
.connection-title,.connection-top{color:#dce4f4!important;font-size:10px!important;}
.connection-info{color:#73829b!important;font-size:9px!important;}
.sidebar-version{color:#53627a!important;font-size:9px!important;}

/* ---------- Main shell ---------- */
.main{
  width:calc(100% - 214px)!important;
  margin-left:214px!important;
  padding:14px 16px 20px!important;
  background:var(--ui-bg)!important;
}
.content{max-width:1700px!important;margin:0 auto!important;padding:0!important;}

/* ---------- Header ---------- */
.topbar{
  min-height:58px!important;
  margin-bottom:9px!important;
  padding:8px 10px 8px 7px!important;
  border:1px solid var(--ui-line)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.97)!important;
  box-shadow:0 2px 10px rgba(15,23,42,.035)!important;
  backdrop-filter:none!important;
}
.topbar-left{gap:10px!important;}
.mobile-menu{
  width:34px!important;height:34px!important;display:flex!important;align-items:center!important;justify-content:center!important;
  border:0!important;background:transparent!important;color:#475467!important;border-radius:8px!important;
}
.mobile-menu:hover{background:#f1f4f9!important;color:#1f5fe8!important;}
.mobile-menu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
.topbar h1,.page-title{font-size:21px!important;line-height:1.15!important;letter-spacing:-.55px!important;color:#101828!important;}
.topbar p,.page-subtitle{font-size:10px!important;color:#8a94a6!important;margin-top:2px!important;}
.topbar-actions{gap:6px!important;align-items:center!important;}
.quick-period,.topbar-updated{
  height:34px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--ui-line);background:#fff;border-radius:8px;color:#475467;
}
.quick-period{padding:0 9px;}
.quick-period-icon{display:flex;color:#6b7280;}
.quick-period select{border:0;outline:0;background:transparent;color:#344054;font-size:11px;font-weight:600;min-width:116px;}
.topbar-updated{border:0;background:transparent;padding:0 5px;font-size:10px;color:#8b95a7;}
.topbar-live-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.11);}
.topbar-actions .primary-button,.topbar-actions .secondary-button,.topbar-actions .icon-button,.theme-button{height:34px!important;min-height:34px!important;border-radius:8px!important;font-size:11px!important;}
.topbar-actions .primary-button{background:var(--ui-blue)!important;box-shadow:0 6px 15px rgba(47,109,246,.18)!important;}
.topbar-actions .secondary-button{background:#fff!important;border-color:var(--ui-line)!important;color:#475467!important;}
.topbar-actions .icon-button,.theme-button{width:34px!important;padding:0!important;background:#fff!important;border:1px solid var(--ui-line)!important;color:#667085!important;}

/* ---------- Marketplace row ---------- */
.marketplace-switcher{
  width:100%!important;margin:0 0 9px!important;padding:4px!important;border-radius:10px!important;
  background:#fff!important;border:1px solid var(--ui-line)!important;box-shadow:0 2px 8px rgba(15,23,42,.025)!important;
}
.marketplace-switcher-left{display:flex;align-items:center;gap:7px;}
.switcher-label{font-size:9px!important;color:#98a2b3!important;letter-spacing:.1em!important;}
.marketplace-tabs{gap:3px!important;}
.marketplace-tab{height:31px!important;min-height:31px!important;padding:0 11px!important;border-radius:7px!important;font-size:10px!important;color:#667085!important;}
.marketplace-tab.active{background:#111827!important;color:#fff!important;box-shadow:0 3px 9px rgba(17,24,39,.12)!important;}
.market-logo{width:20px!important;height:20px!important;border-radius:6px!important;font-size:8px!important;}
.data-status{font-size:9px!important;color:#8b95a7!important;}

/* ---------- Hide bulky filter/upload areas ---------- */
section.filters-panel,section.upload-panel{display:none!important;}

/* ---------- KPI ---------- */
.kpi-grid{display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:8px!important;margin:0 0 9px!important;}
.kpi-card{
  min-width:0!important;min-height:91px!important;height:91px!important;padding:12px!important;border-radius:11px!important;
  background:#fff!important;border:1px solid var(--ui-line)!important;box-shadow:0 2px 9px rgba(15,23,42,.035)!important;
}
.kpi-card:hover{transform:translateY(-1px)!important;box-shadow:0 7px 18px rgba(15,23,42,.07)!important;}
.kpi-card:nth-child(1){border-top:2px solid #2f6df6!important}.kpi-card:nth-child(2){border-top:2px solid #20b15a!important}.kpi-card:nth-child(3){border-top:2px solid #1677F2!important}.kpi-card:nth-child(4){border-top:2px solid #f59e0b!important}.kpi-card:nth-child(5){border-top:2px solid #12b8a6!important}.kpi-card:nth-child(6){border-top:2px solid #f59e0b!important}.kpi-card:nth-child(7){border-top:2px solid #10BBD8!important}.kpi-card:nth-child(8){border-top:2px solid #ef4444!important}
.kpi-title{font-size:10px!important;color:#667085!important;font-weight:600!important;}
.kpi-value{font-size:18px!important;line-height:1.05!important;margin-top:8px!important;color:#111827!important;font-weight:800!important;letter-spacing:-.45px!important;white-space:nowrap!important;}
.kpi-change{font-size:8px!important;margin-top:5px!important;padding:2px 5px!important;border-radius:5px!important;}
.kpi-icon{width:28px!important;height:28px!important;top:9px!important;right:9px!important;border-radius:7px!important;opacity:.95;}

/* ---------- Content grid ---------- */
.content{display:grid!important;grid-template-columns:minmax(0,1.72fr) minmax(300px,.78fr)!important;gap:9px!important;align-items:start!important;}
.marketplace-switcher,.kpi-grid{grid-column:1 / -1!important;}
.charts-grid{grid-column:1 / -1!important;display:grid!important;grid-template-columns:minmax(0,1.8fr) minmax(300px,.8fr)!important;gap:9px!important;margin:0!important;}
.large-chart{width:auto!important;margin:0!important;}
.charts-grid>.chart-panel:not(.large-chart){display:block!important;}

/* ---------- Panels ---------- */
.panel,.chart-panel,.card{
  background:#fff!important;border:1px solid var(--ui-line)!important;border-radius:11px!important;box-shadow:0 2px 9px rgba(15,23,42,.03)!important;
}
.panel-header{padding:11px 13px!important;margin-bottom:0!important;}
.panel-header h2,.card-title{font-size:13px!important;color:#101828!important;letter-spacing:-.1px!important;}
.panel-header p,.card-subtitle{font-size:9px!important;color:#98a2b3!important;margin-top:2px!important;}
.chart-switcher{background:#f1f4f8!important;border-radius:7px!important;padding:2px!important;}
.chart-switch{height:26px!important;padding:0 9px!important;font-size:9px!important;border-radius:5px!important;}
.chart-switch.active{background:#fff!important;color:#1f5fe8!important;box-shadow:0 1px 3px rgba(15,23,42,.09)!important;}
.chart-wrapper{height:285px!important;padding:0 8px 8px!important;}
.doughnut-wrapper{height:185px!important;padding:5px 22px 0!important;}
.marketplace-legend{padding:0 13px 11px!important;}

/* ---------- Insight panel ---------- */
.insight-panel{grid-column:2!important;display:none!important;}
.insight-list{padding:0 12px 8px;display:flex;flex-direction:column;}
.insight-item{display:flex;gap:9px;padding:11px 0;border-bottom:1px solid #eef1f5;}
.insight-item:last-child{border-bottom:0;}
.insight-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 28px;font-weight:800;font-size:12px;}
.insight-item.good .insight-icon{background:#eaf8f0;color:#20b15a}.insight-item.warn .insight-icon{background:#fff4d8;color:#d58b00}.insight-item.info .insight-icon{background:#edf3ff;color:#2f6df6}
.insight-item strong{display:block;font-size:10px;color:#1f2937;margin-bottom:3px}.insight-item p{font-size:9px;line-height:1.45;color:#8a94a6}.insight-link{width:100%;border:0;border-top:1px solid #eef1f5;background:#fff;color:#2862d8;padding:10px 12px;text-align:left;font-size:10px;font-weight:700;border-radius:0 0 11px 11px;}

/* ---------- Lower information row ---------- */
section.panel:has(#marketplaceTableBody){grid-column:2!important;display:block!important;margin:0!important;}
section.panel:has(#productsTable){grid-column:1!important;display:block!important;margin:0!important;}
section.panel:has(#profitChart){display:none!important;}
.stock-grid{grid-column:1 / -1!important;display:grid!important;grid-template-columns:1fr 1.4fr!important;gap:9px!important;margin:0!important;}
.stock-grid .panel{min-width:0;}
.data-table{font-size:10px!important;}
.data-table th{font-size:9px!important;padding:8px 9px!important;color:#8b95a7!important;background:#fafbfc!important;}
.data-table td{padding:8px 9px!important;border-bottom:1px solid #eef1f5!important;color:#344054!important;}
.table-container{overflow:auto!important;border-top:1px solid #eef1f5!important;}
.table-actions{gap:5px!important;}
.table-search{height:30px!important;border-radius:7px!important;}
.table-search input{font-size:10px!important;}
.pagination{padding:8px 11px!important;font-size:9px!important;}

/* ---------- Stock widgets ---------- */
.stock-stats{gap:6px!important;padding:10px!important;}
.stock-stat{padding:10px!important;border-radius:8px!important;background:#fafbfc!important;border:1px solid #edf0f4!important;}
.stock-stat strong{font-size:18px!important;}

/* ---------- Reference-style accents ---------- */
.large-chart:before{height:2px!important;background:linear-gradient(90deg,#2f6df6 0%,#20b15a 52%,#1677F2 100%)!important;}
.marketplace-badge{font-size:9px!important;padding:4px 7px!important;border-radius:6px!important;}

/* ---------- Responsive ---------- */
@media(max-width:1450px){
  .kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  .content{grid-template-columns:minmax(0,1.6fr) minmax(280px,.85fr)!important;}
}
@media(max-width:1100px){
  .sidebar{width:200px!important;}.main{width:calc(100% - 200px)!important;margin-left:200px!important;}
  .charts-grid{grid-template-columns:1fr!important;}
  .charts-grid>.chart-panel:not(.large-chart){display:block!important;}
  section.panel:has(#marketplaceTableBody),section.panel:has(#productsTable){grid-column:1!important;}
  .stock-grid{grid-template-columns:1fr!important;}
  .topbar-updated{display:none!important;}
}
@media(max-width:820px){
  .sidebar{transform:translateX(-105%)!important;}.sidebar.open{transform:translateX(0)!important;}
  .main{width:100%!important;margin-left:0!important;padding:9px!important;}
  .sidebar-overlay.active{display:block!important;}
  .topbar{flex-direction:column;align-items:stretch!important;}
  .topbar-actions{width:100%;display:grid!important;grid-template-columns:1fr 1fr 38px!important;}
  .quick-period{grid-column:1/3;}.topbar-actions .primary-button{grid-column:1/3;}.topbar-actions .secondary-button{grid-column:1/2;}.topbar-actions .icon-button{grid-column:3;grid-row:2;}.theme-button{grid-column:2;grid-row:2;}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .content{display:block!important;}
  .marketplace-switcher,.kpi-grid,.charts-grid,section.panel:has(#marketplaceTableBody),section.panel:has(#productsTable),.stock-grid{margin-bottom:9px!important;}
}
@media(max-width:420px){
  .kpi-card{height:82px!important;min-height:82px!important;padding:9px!important}.kpi-value{font-size:15px!important}.kpi-icon{display:none!important}
  .marketplace-tab{padding:0 8px!important}.marketplace-tab .market-logo{display:none!important}
  .chart-wrapper{height:230px!important}.doughnut-wrapper{height:170px!important}
}
/* Three-column hero row like the reference: trend + marketplace mix + decisions */
.charts-grid{grid-template-columns:minmax(0,1.9fr) minmax(250px,.75fr) minmax(250px,.72fr)!important;}
.insight-panel{grid-column:auto!important;display:block!important;min-width:0!important;}
@media(max-width:1250px){.charts-grid{grid-template-columns:minmax(0,1.65fr) minmax(260px,.8fr)!important}.insight-panel{grid-column:1 / -1!important;display:block!important}}
@media(max-width:820px){.charts-grid{grid-template-columns:1fr!important}.insight-panel{grid-column:auto!important}}


/* =========================================================
   FINAL KPI / ANNUAL PLAN OVERRIDES
   ========================================================= */
.kpi-change{display:inline-flex;align-items:center;gap:4px;min-height:18px;margin-top:5px;font-size:10px!important;font-weight:800;padding:3px 7px;border-radius:999px;background:#edf8f1;color:#159447;white-space:nowrap}
.kpi-change.negative{background:#fff0f0;color:#d84b4b}
.kpi-change.neutral{background:#f2f4f7;color:#667085}
.annual-plan-panel{min-width:0;overflow:hidden}
.annual-plan-total{font-size:14px;font-weight:900;color:#2563eb;background:#eef4ff;border-radius:999px;padding:5px 9px;white-space:nowrap}
.annual-plan-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;padding:4px 12px 14px}
.annual-month{min-width:0;background:#f8fafc;border:1px solid #edf1f6;border-radius:10px;padding:8px 7px}
.annual-month-name{font-size:9px;font-weight:800;color:#667085;margin-bottom:5px}
.annual-month-values{font-size:10px;font-weight:800;color:#101828;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.annual-month-plan{font-size:8px;color:#98a2b3;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.annual-progress{height:5px;border-radius:999px;background:#e8edf5;overflow:hidden;margin-top:7px}
.annual-progress > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#2563eb,#6d5dfc);width:0}
.annual-month-percent{font-size:9px;font-weight:900;color:#2563eb;margin-top:4px}
body.dark .annual-month{background:#111827;border-color:#263244}
body.dark .annual-month-name,body.dark .annual-month-plan{color:#94a3b8}
body.dark .annual-month-values{color:#f8fafc}
body.dark .annual-plan-total{background:#16233d;color:#8fb2ff}
@media(max-width:1100px){.annual-plan-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:640px){.annual-plan-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:4px 8px 10px}.annual-month{padding:7px 6px}}


/* =========================================================
   DARK/LIGHT THEME — CONTRAST & TYPOGRAPHY
   ========================================================= */

/* Keep text readable in both themes and avoid inherited low-contrast colors. */
body,
.sidebar,
.main,
.panel,
.kpi-card,
.chart-card,
.filters-panel,
.connection-card,
.table-wrap,
.annual-plan,
.product-card,
.marketplace-card,
.modal-content {
    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

body.dark {
    background: #0b1020;
    color: #e8edf7;
}

body.dark .sidebar {
    background: #0f172a;
    border-right-color: #202b3d;
}

body.dark .logo-title,
body.dark .page-title,
body.dark h1,
body.dark h2,
body.dark h3,
body.dark .panel-title,
body.dark .kpi-value,
body.dark .kpi-title,
body.dark .table-title,
body.dark .section-title {
    color: #f8fafc !important;
}

body.dark .logo-subtitle,
body.dark .page-subtitle,
body.dark .panel-subtitle,
body.dark .kpi-description,
body.dark .muted,
body.dark .hint,
body.dark .filter-label {
    color: #a9b5c8 !important;
}

body.dark .nav-item {
    color: #b8c3d4;
}

body.dark .nav-item:hover {
    background: #172136;
    color: #c7d2fe;
}

body.dark .nav-item.active {
    background: linear-gradient(135deg, #3346a8, #5b3aa8);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(79, 70, 229, .20);
}

body.dark .connection-card,
body.dark .panel,
body.dark .kpi-card,
body.dark .chart-card,
body.dark .table-wrap,
body.dark .filters-panel,
body.dark .annual-plan,
body.dark .product-card,
body.dark .marketplace-card {
    background: #111827;
    border-color: #253247;
    color: #e8edf7;
}

body.dark .connection-title {
    color: #dbe5f2;
}

body.dark .connection-info {
    color: #91a0b5;
}

body.dark .btn-secondary,
body.dark .btn-ghost,
body.dark .icon-button,
body.dark .theme-button,
body.dark .select-control,
body.dark select,
body.dark input {
    background: #151f31 !important;
    color: #edf2f7 !important;
    border-color: #304057 !important;
}

body.dark .btn-secondary:hover,
body.dark .btn-ghost:hover,
body.dark .icon-button:hover,
body.dark .theme-button:hover {
    background: #1b2940 !important;
    color: #ffffff !important;
    border-color: #40516d !important;
}

body.dark input::placeholder {
    color: #718096 !important;
}

body.dark table thead th {
    background: #151f31;
    color: #aebbd0;
    border-bottom-color: #2a3850;
}

body.dark table tbody td {
    color: #dce5f2;
    border-bottom-color: #202d42;
}

body.dark table tbody tr:hover {
    background: #151f31;
}

body.dark .kpi-change {
    color: #67e8a5;
}

body.dark .kpi-change.negative,
body.dark .negative {
    color: #fb7185;
}

body.dark .marketplace-switcher {
    background: #101827 !important;
    border-color: #2b3950 !important;
}

body.dark .marketplace-tab {
    color: #b8c4d5 !important;
}

body.dark .marketplace-tab:hover {
    color: #ffffff !important;
}

body.dark .marketplace-tab.active {
    color: #ffffff !important;
}

body.dark .chart-switch {
    color: #aebbd0;
    background: #151f31;
    border-color: #2b3950;
}

body.dark .chart-switch.active {
    color: #ffffff;
    background: #25385c;
    border-color: #45618f;
}

body.dark .chart-empty,
body.dark .empty-state {
    color: #9aa8bc;
}

body.dark .annual-month {
    background: #111827;
    border-color: #2a3950;
}

body.dark .annual-month-name,
body.dark .annual-month-plan {
    color: #aebbd0;
}

body.dark .annual-month-values {
    color: #f8fafc;
}

body.dark .annual-month-percent {
    color: #8fb4ff;
}

body.dark .annual-plan-total {
    background: #17253d;
    color: #dce8ff;
    border-color: #30486f;
}

/* Light theme: explicit contrast rather than relying on browser defaults. */
body:not(.dark) .page-title,
body:not(.dark) .kpi-title,
body:not(.dark) .kpi-value,
body:not(.dark) h1,
body:not(.dark) h2,
body:not(.dark) h3 {
    color: #101828;
}

body:not(.dark) .page-subtitle,
body:not(.dark) .kpi-description,
body:not(.dark) .panel-subtitle,
body:not(.dark) .filter-label {
    color: #667085;
}

body:not(.dark) .marketplace-tab {
    color: #475467 !important;
}

body:not(.dark) .marketplace-tab.active {
    color: #ffffff !important;
}

body:not(.dark) .btn-secondary,
body:not(.dark) .theme-button,
body:not(.dark) .icon-button {
    color: #344054 !important;
    background: #ffffff !important;
}

body:not(.dark) input,
body:not(.dark) select {
    color: #1d2939;
    background: #ffffff;
}

body.dark .topbar-actions .secondary-button,
body.dark .topbar-actions .icon-button,
body.dark .topbar-actions .theme-button {
    background: #151f31 !important;
    color: #edf2f7 !important;
    border-color: #304057 !important;
}

.kpi-clickable{cursor:pointer}.kpi-detail-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:24px}.kpi-detail-modal.open{display:flex}.kpi-detail-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.48);backdrop-filter:blur(5px)}.kpi-detail-dialog{position:relative;z-index:1;width:min(560px,calc(100vw - 32px));min-height:300px;padding:30px 32px 28px;border:1px solid #e7eaf0;border-radius:20px;background:#fff;box-shadow:0 24px 70px rgba(16,24,40,.22);animation:kpiModalIn .18s ease-out}.kpi-detail-close{position:absolute;top:14px;right:16px;width:34px;height:34px;border:0;border-radius:10px;background:#f2f4f7;color:#667085;font-size:24px;line-height:1;cursor:pointer}.kpi-detail-eyebrow{margin-bottom:8px;color:#1677F2;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.kpi-detail-dialog h3{margin:0;color:#101828;font-size:24px;font-weight:800}.kpi-detail-value{margin-top:22px;color:#101828;font-size:34px;line-height:1.1;font-weight:900}.kpi-detail-change{display:inline-flex;margin-top:10px;padding:4px 9px;border-radius:999px;background:#f2f4f7;color:#667085;font-size:11px;font-weight:800}.kpi-detail-change.positive{background:#ecfdf3;color:#039855}.kpi-detail-change.negative{background:#fef3f2;color:#d92d20}.kpi-detail-description{margin:22px 0 18px;color:#667085;font-size:14px;line-height:1.6}.kpi-detail-formula{padding:14px 16px;border:1px solid #edf0f5;border-radius:12px;background:#f8fafc}.kpi-detail-formula span{display:block;margin-bottom:6px;color:#98a2b3;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.kpi-detail-formula strong{color:#344054;font-size:13px}body.kpi-modal-open{overflow:hidden}body.dark .kpi-detail-dialog{background:#151f31;border-color:#304057;box-shadow:0 24px 70px rgba(0,0,0,.45)}body.dark .kpi-detail-close{background:#202c40;color:#aebbd0}body.dark .kpi-detail-eyebrow{color:#a78bfa}body.dark .kpi-detail-dialog h3,body.dark .kpi-detail-value{color:#f8fafc}body.dark .kpi-detail-description{color:#aebbd0}body.dark .kpi-detail-formula{background:#111827;border-color:#2a3950}body.dark .kpi-detail-formula strong{color:#dce8ff}@keyframes kpiModalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:600px){.kpi-detail-modal{padding:14px}.kpi-detail-dialog{width:100%;padding:26px 22px 22px}.kpi-detail-value{font-size:28px}}


/* =========================================================
   ADDITIONS: custom period, live clocks, annual plan
   ========================================================= */
.custom-period-box{
    height:34px;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:0 8px;
    border:1px solid var(--ui-line);
    background:#fff;
    border-radius:8px;
    color:#667085;
    box-shadow:0 1px 2px rgba(16,24,40,.03);
}
.custom-period-icon{font-size:13px;font-weight:800;color:#1677F2}
.custom-period-dash{font-size:10px;color:#98a2b3}
.custom-period-box input{
    width:104px;
    height:25px;
    border:0;
    outline:0;
    background:transparent;
    color:#344054;
    font:600 10px Inter,sans-serif;
    cursor:pointer;
}
.custom-period-box input::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}
.custom-period-box input.active{color:#2563eb}
.sidebar-clocks{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin:9px 0 8px;
}
.sidebar-clock{
    min-width:0;
    padding:8px 8px 7px;
    border:1px solid rgba(148,163,184,.22);
    border-radius:10px;
    background:rgba(248,250,252,.72);
}
.clock-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:4px;
    color:#667085;
    font-size:8px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.03em;
}
.clock-head span:last-child{color:#2563eb}
.sidebar-clock strong{
    display:block;
    margin-top:4px;
    color:#101828;
    font-size:15px;
    line-height:1;
    letter-spacing:-.03em;
}
.sidebar-clock small{
    display:block;
    margin-top:4px;
    color:#98a2b3;
    font-size:8px;
    font-weight:600;
}
.annual-plan-panel .panel-header{padding-bottom:8px}
.annual-plan-total{font-size:11px!important;padding:6px 10px!important}
.annual-plan-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:7px!important;
    padding:2px 12px 12px!important;
}
.annual-month{
    padding:9px!important;
    border-radius:11px!important;
}
.annual-month-name{
    font-size:10px!important;
    color:#475467!important;
}
.annual-month-values{
    font-size:11px!important;
    margin-top:2px;
}
.annual-month-plan{
    font-size:9px!important;
    margin-top:3px!important;
}
.annual-progress{
    height:6px!important;
    margin-top:8px!important;
}
.annual-month-percent{
    font-size:10px!important;
    margin-top:5px!important;
}
body.dark .custom-period-box{background:#111827;border-color:#2d3b51;color:#aebbd0}
body.dark .custom-period-box input{color:#dce8ff}
body.dark .custom-period-box input.active{color:#8fb2ff}
body.dark .sidebar-clock{background:rgba(17,24,39,.72);border-color:#2a3950}
body.dark .clock-head{color:#94a3b8}
body.dark .clock-head span:last-child{color:#8fb2ff}
body.dark .sidebar-clock strong{color:#f8fafc}
body.dark .sidebar-clock small{color:#64748b}
@media(max-width:1200px){
    .custom-period-box{display:none}
    .annual-plan-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:760px){
    .sidebar-clocks{grid-template-columns:1fr}
    .annual-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Requested: preset period + custom range in one row */
.filter-field.custom-date-inline { display:flex; }
.custom-date-inline { min-width:125px; }
.custom-date-inline input { height:38px; }
#customDateFromWrapper, #customDateToWrapper { display:flex; }
@media (max-width: 900px) {
  #customDateFromWrapper, #customDateToWrapper { min-width:0; }
}
/* Requested: annual plan month details */
.annual-month { cursor:pointer; transition:transform .16s ease, box-shadow .16s ease; }
.annual-month:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(16,24,40,.08); }
.annual-plan-month-modal { position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; padding:20px; }
.annual-plan-month-modal.open { display:flex; }
.annual-plan-month-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.48); backdrop-filter:blur(5px); }
.annual-plan-month-dialog { position:relative; z-index:1; width:min(520px,calc(100vw - 30px)); padding:30px; border:1px solid #e7ebf2; border-radius:20px; background:#fff; box-shadow:0 24px 70px rgba(16,24,40,.22); }
.annual-plan-month-close { position:absolute; top:14px; right:16px; width:34px; height:34px; border:0; border-radius:10px; background:#f3f5f8; color:#667085; font-size:24px; cursor:pointer; }
.annual-plan-month-kicker { color:#1677F2; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.annual-plan-month-dialog h3 { margin:6px 0 14px; color:#101828; font-size:24px; }
.annual-plan-month-main { margin-bottom:20px; color:#101828; font-size:34px; font-weight:900; }
.annual-plan-month-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.annual-plan-month-grid > div { padding:14px; border:1px solid #edf0f4; border-radius:12px; background:#f8fafc; }
.annual-plan-month-grid span { display:block; margin-bottom:5px; color:#98a2b3; font-size:10px; font-weight:800; text-transform:uppercase; }
.annual-plan-month-grid strong { color:#344054; font-size:15px; }
.annual-plan-month-progress { height:8px; margin-top:18px; overflow:hidden; border-radius:99px; background:#edf0f4; }
.annual-plan-month-progress i { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,#1677F2,#10BBD8); }
body.annual-plan-modal-open { overflow:hidden; }
body.dark .annual-plan-month-dialog { background:#151f31; border-color:#304057; }
body.dark .annual-plan-month-dialog h3, body.dark .annual-plan-month-main { color:#f8fafc; }
body.dark .annual-plan-month-close { background:#202c40; color:#c5d0df; }
body.dark .annual-plan-month-grid > div { background:#111827; border-color:#2a3950; }
body.dark .annual-plan-month-grid strong { color:#dce8ff; }
@media (max-width:700px) { .annual-plan-month-grid { grid-template-columns:1fr; } }

.kpi-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; }
.kpi-card { min-width: 0; }
@media (max-width: 1400px) { .kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 800px) { .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.upload-password-overlay{position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:20px}
.upload-password-overlay[hidden]{display:none}
.upload-password-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.48);backdrop-filter:blur(5px)}
.upload-password-dialog{position:relative;z-index:1;width:min(440px,calc(100vw - 30px));padding:30px;border:1px solid rgba(124,58,237,.16);border-radius:24px;background:var(--card,#fff);box-shadow:0 30px 90px rgba(16,24,40,.28),0 8px 30px rgba(124,58,237,.08);color:var(--text,#101828);animation:uploadPasswordIn .2s ease-out}
.upload-password-hero{display:flex;align-items:center;justify-content:center;width:54px;height:54px;margin:0 0 18px;border-radius:16px;background:linear-gradient(135deg,#eef2ff,#E8F5FF);box-shadow:inset 0 0 0 1px rgba(124,58,237,.08)}
.upload-password-hero-icon{font-size:24px;font-weight:800;color:#6d4aff;transform:translateY(-1px)}
.upload-password-kicker{color:#6d4aff;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.upload-password-dialog h2{margin:7px 0 8px;font-size:25px;letter-spacing:-.02em}
.upload-password-dialog p{margin:0 0 18px;color:var(--muted,#667085);font-size:13px;line-height:1.55}
.upload-password-label{display:block;margin:0 0 7px;color:var(--text,#344054);font-size:11px;font-weight:750}
.upload-password-dialog input{width:100%;height:48px;box-sizing:border-box;padding:0 14px;border:1px solid var(--border,#d0d5dd);border-radius:12px;background:var(--input,#fff);color:var(--text,#101828);font:inherit;font-size:17px;letter-spacing:.28em;outline:none;margin-bottom:7px;transition:border-color .18s,box-shadow .18s,background .18s}
.upload-password-dialog input:focus{border-color:#1677F2;box-shadow:0 0 0 4px rgba(124,58,237,.11);background:#fff}
.upload-password-dialog .primary-button{width:100%;min-height:46px;justify-content:space-between;padding:0 15px;border-radius:12px}
.upload-password-close{position:absolute;right:15px;top:15px;width:34px;height:34px;border:1px solid rgba(102,112,133,.12);border-radius:10px;background:#f6f7fa;color:#667085;font-size:22px;line-height:1;cursor:pointer;transition:.18s}
.upload-password-close:hover{background:#eceef3;transform:rotate(3deg)}
.upload-password-error{min-height:19px;color:#dc2626;font-size:11px;font-weight:600;margin-bottom:8px}
.upload-password-hint{margin-top:11px;color:#98a2b3;font-size:10px;text-align:center}
.upload-panel.dragover{border-color:#1677F2!important;background:#F4FAFF!important;box-shadow:0 0 0 4px rgba(124,58,237,.07)}
@keyframes uploadPasswordIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
body.dark .upload-password-backdrop{background:rgba(2,6,23,.68)}
body.dark .upload-password-dialog{background:#151f31;border-color:#35435a;color:#f8fafc;box-shadow:0 30px 90px rgba(0,0,0,.45),0 8px 30px rgba(99,102,241,.1)}
body.dark .upload-password-hero{background:linear-gradient(135deg,#1d2840,#2a1f45);box-shadow:inset 0 0 0 1px rgba(139,92,246,.15)}
body.dark .upload-password-dialog p{color:#aebbd0}
body.dark .upload-password-label{color:#dce4f4}
body.dark .upload-password-dialog input{background:#111827;border-color:#304057;color:#f8fafc}
body.dark .upload-password-dialog input:focus{background:#0f1724}
body.dark .upload-password-close{background:#202c40;color:#c5d0df;border-color:#304057}
body.dark .upload-password-hint{color:#7f8da6}
body.dark .upload-panel.dragover{background:#17132a!important}


/* Final dark-theme readability pass */
body.dark {
  background: #0b1020;
  color: #eef2ff;
}
body.dark .main-content,
body.dark .content,
body.dark .workspace { background: #0b1020; color: #eef2ff; }
body.dark .sidebar { background: #10172a; border-color: #24304a; }
body.dark .topbar { background: #0f1628; border-color: #24304a; }
body.dark .card,
body.dark .kpi-card,
body.dark .large-chart,
body.dark .marketplace-switcher,
body.dark .marketplace-card,
body.dark .filters-card,
body.dark .connection-card,
body.dark .stock-stat,
body.dark .modal,
body.dark .upload-password-dialog {
  background: #121a2d;
  border-color: #2a3958;
  color: #eef2ff;
  box-shadow: 0 16px 45px rgba(0,0,0,.28);
}
body.dark h1, body.dark h2, body.dark h3,
body.dark .page-title, body.dark .card-title,
body.dark .panel-title, body.dark .kpi-value,
body.dark .kpi-title, body.dark .marketplace-value,
body.dark .money, body.dark .product-name,
body.dark .stock-stat-value { color: #f8fafc !important; }
body.dark p, body.dark .page-subtitle, body.dark .card-subtitle,
body.dark .kpi-label, body.dark .filter-label,
body.dark .marketplace-label, body.dark .connection-info,
body.dark .sidebar-bottom, body.dark .modal-subtitle,
body.dark .product-info-label { color: #aebbd1 !important; }
body.dark .filter-control,
body.dark .search-box input,
body.dark input, body.dark select {
  background: #0c1425 !important;
  color: #f8fafc !important;
  border-color: #334463 !important;
}
body.dark .filter-control::placeholder,
body.dark input::placeholder { color: #71809a !important; }
body.dark .data-table th { background: #18243a; color: #c7d2e6; border-color: #2a3958; }
body.dark .data-table td { color: #dce5f5; border-color: #24304a; }
body.dark .data-table tbody tr:hover { background: #18243a; }
body.dark .marketplace-tab { color: #aebbd1; }
body.dark .marketplace-tab.active { background: #1677F2; color: #fff; box-shadow: 0 5px 18px rgba(139,92,246,.28); }
body.dark .btn-secondary, body.dark .secondary-button,
body.dark .icon-button { background: #17233a !important; color: #e7edfa !important; border-color: #334463 !important; }
body.dark .btn-secondary:hover, body.dark .secondary-button:hover,
body.dark .icon-button:hover { background: #20304d !important; border-color: #667eea !important; }
body.dark .chart-switcher { background: #0c1425; border-color: #263754; }
body.dark .chart-switch.active { background: #27385a; color: #fff; }
body.dark .upload-password-overlay { background: rgba(2,6,23,.78); backdrop-filter: blur(8px); }
body.dark .upload-password-dialog {
  background: linear-gradient(145deg,#141f36 0%,#10182b 100%);
  border: 1px solid #344766;
  box-shadow: 0 28px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(139,92,246,.08);
}
body.dark .upload-password-hero { background: linear-gradient(135deg,#6d5dfb,#1677F2); }
body.dark .upload-password-kicker { color: #aeb8ff; }
body.dark .upload-password-label { color: #dbe5f5; }
body.dark #uploadPasswordInput { background: #0a1222 !important; color: #fff !important; border-color: #3c4f73 !important; }
body.dark #uploadPasswordInput:focus { border-color: #9b8cff !important; box-shadow: 0 0 0 4px rgba(139,92,246,.16); }
body.dark .upload-password-hint { color: #8fa0ba; }
body.dark .upload-password-close { background: #1a2740; color: #dbe5f5; }
body.dark .upload-password-close:hover { background: #263754; color: #fff; }
body.dark .upload-password-error { color: #ff8f9b; }


/* Final requested visual pass: softer grey sidebar + cohesive graphite dark theme */
.sidebar{
  background:linear-gradient(180deg,#66707b 0%,#5e6873 52%,#56616c 100%)!important;
  border-right:1px solid #4e5862!important;
  box-shadow:8px 0 26px rgba(31,41,55,.10)!important;
  color:#f4f6f8!important;
}
.sidebar-header{border-bottom-color:rgba(255,255,255,.14)!important;}
.brand-logo{background:linear-gradient(135deg,#f5f7f9,#dfe4e8)!important;color:#4f5b66!important;}
.brand-text strong,.nav-item:hover,.nav-item.active{color:#fff!important;}
.brand-text small,.nav-section-title,.sidebar-version{color:#d0d6dc!important;}
.nav-item{color:#e1e5e9!important;}
.nav-item:hover{background:rgba(255,255,255,.10)!important;}
.nav-item.active{background:rgba(255,255,255,.18)!important;box-shadow:inset 3px 0 0 #fff,0 6px 18px rgba(31,41,55,.12)!important;}
.connection-card{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.14)!important;}
.connection-title,.connection-top{color:#f1f4f6!important;}
.connection-info{color:#d0d6dc!important;}

body.dark{
  background:#252a30!important;
  color:#edf1f4!important;
}
body.dark .main,body.dark .main-content,body.dark .content,body.dark .workspace{
  background:#252a30!important;color:#edf1f4!important;
}
body.dark .sidebar{
  background:linear-gradient(180deg,#3f464d 0%,#383f46 52%,#333a41 100%)!important;
  border-right-color:#4c545c!important;
}
body.dark .topbar,body.dark .marketplace-switcher,body.dark .kpi-card,body.dark .large-chart,
body.dark .card,body.dark .filters-card,body.dark .marketplace-card,body.dark .stock-stat,
body.dark .connection-card,body.dark .modal,body.dark .upload-password-dialog{
  background:#30363d!important;
  border-color:#454d55!important;
  color:#edf1f4!important;
  box-shadow:0 12px 32px rgba(0,0,0,.18)!important;
}
body.dark h1,body.dark h2,body.dark h3,body.dark .page-title,body.dark .card-title,
body.dark .panel-title,body.dark .kpi-value,body.dark .kpi-title,body.dark .marketplace-value,
body.dark .money,body.dark .product-name,body.dark .stock-stat-value{color:#f5f7f9!important;}
body.dark p,body.dark .page-subtitle,body.dark .card-subtitle,body.dark .kpi-label,
body.dark .filter-label,body.dark .marketplace-label,body.dark .connection-info,
body.dark .sidebar-bottom,body.dark .modal-subtitle,body.dark .product-info-label,
body.dark .switcher-label{color:#b9c1c8!important;}
body.dark .filter-control,body.dark .search-box input,body.dark input,body.dark select{
  background:#292f35!important;color:#f2f5f7!important;border-color:#505860!important;
}
body.dark .filter-control::placeholder,body.dark input::placeholder{color:#8f99a2!important;}
body.dark .data-table th{background:#383f46!important;color:#dce2e6!important;border-color:#4b535b!important;}
body.dark .data-table td{background:#30363d!important;color:#e1e6ea!important;border-color:#454d55!important;}
body.dark .data-table tbody tr:hover{background:#3a4249!important;}
body.dark .marketplace-tab{color:#c0c7cd!important;}
body.dark .marketplace-tab.active{background:#7c6ce8!important;color:#fff!important;box-shadow:0 5px 18px rgba(124,108,232,.25)!important;}
body.dark .btn-secondary,body.dark .secondary-button,body.dark .icon-button{
  background:#3a4249!important;color:#edf1f4!important;border-color:#555e66!important;
}
body.dark .btn-secondary:hover,body.dark .secondary-button:hover,body.dark .icon-button:hover{background:#444d55!important;border-color:#727c85!important;}
body.dark .chart-switcher{background:#292f35!important;border-color:#454d55!important;}
body.dark .chart-switch.active{background:#48515a!important;color:#fff!important;}
body.dark .upload-zone{background:#292f35!important;border-color:#505860!important;color:#dce2e6!important;}
body.dark .empty-icon{background:#3b434a!important;color:#dce2e6!important;}
body.dark .modal-header{border-color:#454d55!important;}
body.dark .modal-close{background:#3a4249!important;color:#dce2e6!important;}
body.dark .product-info{background:#292f35!important;border-color:#454d55!important;}
body.dark .product-info-value{color:#edf1f4!important;}
body.dark .file-status{background:#292f35!important;color:#b9c1c8!important;}
body.dark .loading-overlay{background:rgba(37,42,48,.82)!important;}
body.dark .skeleton{background:#454d55!important;}
/* Keep chart areas readable without introducing white blocks. */
body.dark canvas{filter:none!important;}
body.dark .annual-month{background:#343b42!important;border-color:#4a535b!important;color:#edf1f4!important;}
body.dark .annual-month-name,body.dark .annual-month-values,body.dark .annual-month-percent{color:#f1f4f6!important;}
body.dark .annual-month-plan{color:#b9c1c8!important;}

/* Final graphite dark theme: no white surfaces, readable contrast. */
body.dark {
  background: #252a30 !important;
  color: #e7ebef !important;
  --dark-bg: #252a30;
  --dark-panel: #30363d;
  --dark-panel-2: #343b42;
  --dark-border: #48515a;
  --dark-text: #f0f3f5;
  --dark-muted: #aeb7bf;
}
body.dark .main, body.dark .main-content, body.dark .content, body.dark .workspace,
body.dark .page, body.dark .dashboard, body.dark .section, body.dark .chart-wrap {
  background: #252a30 !important;
  color: #e7ebef !important;
}
body.dark .card, body.dark .kpi-card, body.dark .filters-card, body.dark .marketplace-card,
body.dark .marketplace-switcher, body.dark .stock-stat, body.dark .large-chart,
body.dark .connection-card, body.dark .modal, body.dark .toast, body.dark .loader-box,
body.dark .upload-password-dialog, body.dark .annual-month, body.dark .product-info,
body.dark .file-status, body.dark .chart-switcher {
  background: #30363d !important;
  border-color: #48515a !important;
  color: #e7ebef !important;
}
body.dark input, body.dark select, body.dark textarea, body.dark .filter-control,
body.dark .search-box input, body.dark .upload-zone {
  background: #292f35 !important;
  color: #edf1f4 !important;
  border-color: #505a63 !important;
}
body.dark input::placeholder, body.dark textarea::placeholder { color: #8f99a2 !important; }
body.dark .card-title, body.dark .panel-title, body.dark .page-title, body.dark .kpi-value,
body.dark .kpi-title, body.dark .marketplace-value, body.dark .money, body.dark .product-name,
body.dark .modal-title, body.dark .annual-month-name, body.dark .annual-month-values,
body.dark .annual-month-percent, body.dark .stock-stat-value { color: #f0f3f5 !important; }
body.dark .page-subtitle, body.dark .card-subtitle, body.dark .kpi-label, body.dark .filter-label,
body.dark .marketplace-label, body.dark .connection-info, body.dark .modal-subtitle,
body.dark .product-info-label, body.dark .product-info-value, body.dark .annual-month-plan,
body.dark .switcher-label { color: #aeb7bf !important; }
body.dark .data-table, body.dark .data-table table { background: #30363d !important; color: #e7ebef !important; }
body.dark .data-table th { background: #3a4249 !important; color: #e6ebef !important; border-color: #4b545c !important; }
body.dark .data-table td { background: #30363d !important; color: #e0e6ea !important; border-color: #454e56 !important; }
body.dark .data-table tbody tr:hover td { background: #394148 !important; }
body.dark .btn-secondary, body.dark .secondary-button, body.dark .icon-button,
body.dark .modal-close, body.dark .upload-password-close {
  background: #3a4249 !important; color: #e7ebef !important; border-color: #555f67 !important;
}
body.dark .btn-secondary:hover, body.dark .secondary-button:hover, body.dark .icon-button:hover,
body.dark .modal-close:hover { background: #454e56 !important; }
body.dark .marketplace-tab { color: #b9c1c8 !important; }
body.dark .marketplace-tab:hover { background: #3a4249 !important; color: #f0f3f5 !important; }
body.dark .marketplace-tab.active { background: #7465d8 !important; color: #fff !important; }
body.dark .nav-item { color: #c3cad0 !important; }
body.dark .nav-item:hover { background: rgba(255,255,255,.06) !important; color: #edf1f4 !important; }
body.dark .nav-item.active { background: rgba(255,255,255,.10) !important; color: #fff !important; box-shadow: inset 3px 0 0 #cfd5da !important; }
body.dark .empty-icon, body.dark .skeleton { background: #3b434a !important; color: #dfe5e9 !important; }
body.dark .modal-header { border-color: #48515a !important; }
body.dark .loading-overlay { background: rgba(37,42,48,.92) !important; }
body.dark .annual-month { box-shadow: 0 8px 22px rgba(0,0,0,.12) !important; }


/* =========================================================
   IMPORT DATA — source selection + compact button
   ========================================================= */
.upload-button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:38px!important;
  padding:0 13px!important;
  border-radius:10px!important;
  border:1px solid var(--ui-line,#e6eaf0)!important;
  background:var(--ui-surface,#fff)!important;
  color:var(--ui-text,#111827)!important;
  box-shadow:0 2px 8px rgba(15,23,42,.04)!important;
  font-weight:700!important;
  transition:background .18s,border-color .18s,box-shadow .18s,transform .18s,color .18s!important;
}
.upload-button:hover{
  background:var(--ui-surface-2,#f8fafc)!important;
  border-color:#cbd5e1!important;
  box-shadow:0 6px 18px rgba(15,23,42,.07)!important;
  transform:translateY(-1px);
}
.upload-button:active{transform:translateY(0)}
.upload-button-icon{display:flex;align-items:center;justify-content:center;color:#475467}

.upload-source-overlay{
  position:fixed;inset:0;z-index:11990;display:flex;align-items:center;justify-content:center;padding:20px;
}
.upload-source-overlay[hidden]{display:none}
.upload-source-backdrop{
  position:absolute;inset:0;background:rgba(15,23,42,.48);backdrop-filter:blur(5px);
}
.upload-source-dialog{
  position:relative;z-index:1;width:min(500px,calc(100vw - 30px));
  padding:28px;border:1px solid rgba(47,109,246,.13);border-radius:22px;
  background:var(--card,#fff);color:var(--text,#101828);
  box-shadow:0 30px 90px rgba(16,24,40,.28),0 8px 30px rgba(47,109,246,.06);
  animation:uploadSourceIn .2s ease-out;
}
.upload-source-close{
  position:absolute;right:14px;top:14px;width:34px;height:34px;border:1px solid rgba(102,112,133,.12);
  border-radius:10px;background:#f6f7fa;color:#667085;font-size:22px;line-height:1;cursor:pointer;transition:.18s;
}
.upload-source-close:hover{background:#eceef3;transform:rotate(3deg)}
.upload-source-hero{
  display:flex;align-items:center;justify-content:center;width:50px;height:50px;margin:0 0 17px;
  border-radius:15px;background:#edf3ff;box-shadow:inset 0 0 0 1px rgba(47,109,246,.08);
}
.upload-source-hero-icon{display:flex;color:#2f6df6}
.upload-source-kicker{
  color:#2f6df6;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.upload-source-dialog h2{margin:7px 0 7px;font-size:24px;letter-spacing:-.02em}
.upload-source-dialog p{margin:0 0 18px;color:var(--muted,#667085);font-size:13px;line-height:1.5}
.upload-source-options{display:grid;gap:8px}
.upload-source-option{
  width:100%;display:grid;grid-template-columns:38px 1fr 20px;align-items:center;gap:11px;
  padding:11px 12px;border:1px solid var(--border,#e6eaf0);border-radius:13px;
  background:var(--input,#fff);color:var(--text,#101828);text-align:left;cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;
}
.upload-source-option:hover{
  background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(15,23,42,.055);
}
.upload-source-option strong{display:block;font-size:12px;font-weight:750}
.upload-source-option small{display:block;margin-top:3px;color:var(--muted,#667085);font-size:10px}
.upload-source-option-icon{
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:11px;
  font-size:12px;font-weight:850;
}
.upload-source-option-icon.ozon{background:#eef2ff;color:#4f46e5}
.upload-source-option-icon.wb{background:#E8F5FF;color:#1677F2}
.upload-source-option-icon.yandex{background:#fff4df;color:#b45309}
.upload-source-option-icon.expenses{background:#eaf8f0;color:#16834b}
.upload-source-arrow{color:#98a2b3;font-size:18px;text-align:right}
@keyframes uploadSourceIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}

body.dark .upload-button{
  background:#151f31!important;color:#dce4f4!important;border-color:#304057!important;
  box-shadow:0 2px 8px rgba(0,0,0,.12)!important;
}
body.dark .upload-button:hover{background:#1b273b!important;border-color:#40516b!important}
body.dark .upload-button-icon{color:#aebbd0}
body.dark .upload-source-backdrop{background:rgba(2,6,23,.68)}
body.dark .upload-source-dialog{
  background:#151f31;border-color:#35435a;color:#f8fafc;
  box-shadow:0 30px 90px rgba(0,0,0,.45),0 8px 30px rgba(99,102,241,.1);
}
body.dark .upload-source-hero{background:#1c2a44;box-shadow:inset 0 0 0 1px rgba(96,165,250,.12)}
body.dark .upload-source-kicker{color:#7aa7ff}
body.dark .upload-source-dialog p{color:#aebbd0}
body.dark .upload-source-close{background:#202c40;color:#c5d0df;border-color:#304057}
body.dark .upload-source-option{
  background:#111827;color:#f8fafc;border-color:#304057;
}
body.dark .upload-source-option:hover{background:#182235;border-color:#40516b}
body.dark .upload-source-option small{color:#91a0b9}
body.dark .upload-source-option-icon.ozon{background:#202747;color:#9aa7ff}
body.dark .upload-source-option-icon.wb{background:#2a2140;color:#b58cff}
body.dark .upload-source-option-icon.yandex{background:#3a2e1d;color:#f4b84e}
body.dark .upload-source-option-icon.expenses{background:#18352a;color:#62d69b}


/* =========================================================
   FINAL REQUESTED VISUAL PASS — GRAPHITE IMPORT + DARK MODE
   ========================================================= */
.upload-button,
.topbar-actions .primary-button.upload-button{
  background:#3b424c!important;
  background-image:none!important;
  border:1px solid #4b5563!important;
  color:#f3f4f6!important;
  box-shadow:0 5px 14px rgba(31,41,55,.16)!important;
}
.upload-button:hover,
.topbar-actions .primary-button.upload-button:hover{
  background:#464e59!important;
  border-color:#596474!important;
  color:#ffffff!important;
}
.upload-button-icon{color:#e5e7eb!important}

/* Dark theme: graphite surfaces, no white cards/controls */
body.dark{
  background:#0b0f14!important;
  color:#e6ebf2!important;
}
body.dark .main{
  background:#0b0f14!important;
}
body.dark .topbar,
body.dark .marketplace-switcher,
body.dark .kpi-card,
body.dark .panel,
body.dark .chart-panel,
body.dark .card,
body.dark .connection-card,
body.dark .stock-stat,
body.dark .annual-month,
body.dark .filters-card,
body.dark .modal,
body.dark .loader-box,
body.dark .theme-switch,
body.dark .upload-zone,
body.dark .file-status,
body.dark .product-info,
body.dark .table-container,
body.dark .search-box,
body.dark .chart-switcher{
  background:#151a21!important;
  border-color:#29313b!important;
  color:#e6ebf2!important;
  box-shadow:0 3px 14px rgba(0,0,0,.20)!important;
}
body.dark .topbar{
  background:#151a21!important;
}
body.dark .marketplace-switcher{
  background:#12171e!important;
}
body.dark .marketplace-tab.active{
  background:#303944!important;
  color:#f8fafc!important;
  box-shadow:none!important;
}
body.dark .marketplace-tab:hover{
  background:#202731!important;
  color:#f8fafc!important;
}
body.dark .panel-header,
body.dark .card-header{
  color:#eef2f7!important;
}
body.dark .panel-header h2,
body.dark .panel-header p,
body.dark .card-title,
body.dark .card-subtitle{
  color:inherit!important;
}
body.dark .kpi-card{
  background:#151a21!important;
}
body.dark .kpi-title,
body.dark .kpi-label{
  color:#aeb8c6!important;
}
body.dark .kpi-value,
body.dark .kpi-title,
body.dark .kpi-label,
body.dark .page-title,
body.dark .page-subtitle,
body.dark h1,body.dark h2,body.dark h3,
body.dark .product-name,
body.dark .money,
body.dark .stock-stat-value{
  text-shadow:none!important;
}
body.dark .kpi-value,
body.dark .page-title,
body.dark h1,body.dark h2,body.dark h3,
body.dark .product-name,
body.dark .money,
body.dark .stock-stat-value{
  color:#f4f7fb!important;
}
body.dark .page-subtitle,
body.dark .card-subtitle,
body.dark .panel-header p,
body.dark .data-status,
body.dark .filter-label,
body.dark .switcher-label,
body.dark .marketplace-label,
body.dark .connection-info{
  color:#8995a5!important;
}
body.dark .secondary-button,
body.dark .icon-button,
body.dark .theme-button,
body.dark .btn-secondary,
body.dark .btn-ghost,
body.dark .quick-period,
body.dark .quick-period select,
body.dark .custom-period-box,
body.dark .filter-control,
body.dark select,
body.dark input,
body.dark textarea{
  background:#1b222c!important;
  color:#e8edf4!important;
  border-color:#34404d!important;
}
body.dark .secondary-button:hover,
body.dark .icon-button:hover,
body.dark .theme-button:hover,
body.dark .btn-secondary:hover,
body.dark .btn-ghost:hover{
  background:#252e39!important;
  border-color:#465362!important;
  color:#fff!important;
}
body.dark input::placeholder{color:#687588!important}
body.dark .chart-switcher{background:#1b222c!important}
body.dark .chart-switch{
  background:#1b222c!important;
  color:#aeb8c6!important;
  border-color:#303a47!important;
}
body.dark .chart-switch.active{
  background:#303a47!important;
  color:#f8fafc!important;
}
body.dark .data-table th,
body.dark table thead th{
  background:#1b222c!important;
  color:#aeb8c6!important;
  border-color:#303a47!important;
}
body.dark .data-table td,
body.dark table tbody td{
  background:#151a21!important;
  color:#dbe3ed!important;
  border-color:#28313c!important;
}
body.dark .data-table tbody tr:hover,
body.dark table tbody tr:hover{
  background:#1d252f!important;
}
body.dark .empty-icon,
body.dark .file-status,
body.dark .product-info{
  background:#1b222c!important;
}
body.dark .product-info-label{color:#8290a3!important}
body.dark .product-info-value{color:#dbe3ed!important}
body.dark .modal-header{border-color:#2b3440!important}
body.dark .modal-close{
  background:#202832!important;
  color:#aeb8c6!important;
}
body.dark .kpi-change.neutral{background:#252d37!important;color:#aeb8c6!important}
body.dark .kpi-change.positive{background:#123523!important;color:#69dda0!important}
body.dark .kpi-change.negative{background:#3a1d24!important;color:#ff8b9b!important}
body.dark .annual-month{
  background:#151a21!important;
  border-color:#2b3440!important;
}
body.dark .annual-month-name,
body.dark .annual-month-plan{color:#8f9bad!important}
body.dark .annual-month-values{color:#f2f5f9!important}
body.dark .annual-progress{background:#2a333f!important}
body.dark .annual-plan-total{background:#1d2b44!important;color:#9fc0ff!important}
body.dark .sidebar-clock{background:#151a21!important;border-color:#2b3440!important}
body.dark .sidebar-clock strong{color:#f4f7fb!important}
body.dark .sidebar-clock small{color:#77869a!important}
body.dark .clock-head{color:#8f9bad!important}
body.dark .upload-source-dialog,
body.dark .kpi-detail-dialog,
body.dark .annual-plan-month-dialog{
  background:#151a21!important;
  border-color:#303a47!important;
  color:#edf2f7!important;
}
body.dark .upload-source-close,
body.dark .kpi-detail-close,
body.dark .annual-plan-month-close{
  background:#202832!important;
  color:#b4bfce!important;
  border-color:#303a47!important;
}
body.dark .upload-source-dialog p,
body.dark .kpi-detail-description{
  color:#aeb8c6!important;
}
body.dark .upload-source-option{
  background:#1b222c!important;
  color:#edf2f7!important;
  border-color:#303a47!important;
}
body.dark .upload-source-option:hover{
  background:#232c37!important;
  border-color:#465362!important;
}
body.dark .upload-source-option small{color:#8996a8!important}
body.dark .upload-source-hero{background:#202a37!important}
body.dark .upload-source-kicker{color:#9ebcff!important}
body.dark .upload-source-option-icon.ozon{background:#202b48!important;color:#9ebcff!important}
body.dark .upload-source-option-icon.wb{background:#30243f!important;color:#c0a2ff!important}
body.dark .upload-source-option-icon.yandex{background:#3a301f!important;color:#f3c66a!important}
body.dark .upload-source-option-icon.expenses{background:#1c382b!important;color:#72dca1!important}
body.dark .kpi-detail-formula{background:#1b222c!important;border-color:#303a47!important}
body.dark .kpi-detail-formula strong{color:#dce5ef!important}
body.dark .upload-password-dialog{
  background:#151a21!important;
  color:#edf2f7!important;
  border-color:#303a47!important;
}
body.dark .upload-password-dialog input{
  background:#1b222c!important;color:#f3f6fa!important;border-color:#34404d!important;
}
body.dark .upload-password-dialog button{
  background:#3b424c!important;color:#f3f6fa!important;border-color:#4b5563!important;
}

/* KPI importance order: revenue → profit → margin → orders → average check → DRR → expenses → returns → stock → Moscow stock */
.kpi-grid .kpi-card{order:initial!important;}
.kpi-grid .kpi-card:nth-child(1){order:1!important}
.kpi-grid .kpi-card:nth-child(2){order:2!important}
.kpi-grid .kpi-card:nth-child(3){order:3!important}
.kpi-grid .kpi-card:nth-child(4){order:4!important}
.kpi-grid .kpi-card:nth-child(5){order:5!important}
.kpi-grid .kpi-card:nth-child(6){order:6!important}
.kpi-grid .kpi-card:nth-child(7){order:7!important}
.kpi-grid .kpi-card:nth-child(8){order:8!important}
.kpi-grid .kpi-card:nth-child(9){order:9!important}
.kpi-grid .kpi-card:nth-child(10){order:10!important}

@media(max-width:1250px){
  .kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;}
}
@media(max-width:820px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* Requested visual pass: graphite import + matching sidebar */
.upload-button{
  background:#3b4350!important;
  border-color:#3b4350!important;
  color:#f4f6f8!important;
  box-shadow:0 5px 16px rgba(32,39,50,.14)!important;
}
.upload-button:hover{
  background:#454e5d!important;
  border-color:#454e5d!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(32,39,50,.18)!important;
}
.upload-button-icon{color:#dce2e8!important}

/* Sidebar uses the same graphite tone as the import action */
.sidebar{
  background:#3b4350!important;
  border-right-color:#4b5563!important;
  color:#edf1f5!important;
  box-shadow:10px 0 28px rgba(15,23,42,.12)!important;
}
.sidebar-header{border-bottom-color:rgba(255,255,255,.10)!important}
.nav-item{color:#d1d7df!important}
.nav-item:hover{background:rgba(255,255,255,.08)!important;color:#fff!important}
.nav-item.active{background:rgba(255,255,255,.12)!important;color:#fff!important}
.logo-subtitle{color:#b7c0cb!important}
.sidebar-bottom{color:#dce2e8!important}

/* Stock shortage section in KPI details */
.kpi-stock-shortage{margin-top:16px;padding-top:16px;border-top:1px solid var(--ui-line,#e6eaf0)}
.kpi-stock-shortage-title{font-size:12px;font-weight:800;margin-bottom:10px;color:var(--ui-text,#111827)}
.stock-shortage-head,.stock-shortage-row{display:grid;grid-template-columns:minmax(0,1fr) 88px 78px;gap:10px;align-items:center}
.stock-shortage-head{padding:0 10px 7px;color:#98a2b3;font-size:10px}
.stock-shortage-list{max-height:250px;overflow:auto}
.stock-shortage-row{padding:9px 10px;border-top:1px solid var(--ui-line,#e6eaf0);font-size:11px}
.stock-product{min-width:0}.stock-product strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stock-product small{display:block;margin-top:2px;color:#98a2b3;font-size:9px}
.stock-days{font-weight:800;text-align:right}.stock-days.warning{color:#d97706}.stock-days.critical{color:#dc3b45}
.stock-shortage-empty{padding:12px;border-radius:10px;background:var(--ui-surface-2,#f8fafc);color:#667085;font-size:11px}

body.dark .kpi-stock-shortage{border-top-color:#304057}
body.dark .kpi-stock-shortage-title{color:#f1f5f9}
body.dark .stock-shortage-head{color:#8493a8}
body.dark .stock-shortage-row{border-top-color:#27364b}
body.dark .stock-product small{color:#8493a8}
body.dark .stock-shortage-empty{background:#111827;color:#aebbd0}


/* =========================================================
   MOBILE OPTIMIZATION — final responsive layer
   Desktop layout remains unchanged.
   ========================================================= */
.mobile-menu-button{
  display:none;
  width:40px;height:40px;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
  border:1px solid var(--ui-line,#e6eaf0);
  border-radius:11px;
  background:var(--ui-surface,#fff);
  color:var(--ui-text,#111827);
  cursor:pointer;
}
.mobile-menu-button span{
  width:17px;height:1.8px;border-radius:2px;background:currentColor;
}

@media (max-width:820px){
  body{overflow-x:hidden}
  .app{min-width:0!important}
  .sidebar{
    position:fixed!important;
    z-index:1100!important;
    top:0!important;bottom:0!important;left:0!important;
    width:min(290px,86vw)!important;
    height:100dvh!important;
    min-height:100dvh!important;
    overflow-y:auto!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
  }
  .sidebar.open{transform:translateX(0)!important}
  .sidebar-overlay{
    position:fixed!important;inset:0!important;z-index:1090!important;
    background:rgba(15,23,42,.48)!important;
    backdrop-filter:blur(2px)!important;
    display:none!important;
  }
  .sidebar-overlay.active{display:block!important}

  .main{
    width:100%!important;
    margin-left:0!important;
    padding:10px!important;
    min-width:0!important;
  }

  .topbar{
    width:100%!important;
    min-width:0!important;
    padding:11px!important;
    gap:10px!important;
    border-radius:14px!important;
    flex-wrap:wrap!important;
  }
  .topbar-left{width:100%!important;min-width:0!important}
  .topbar-left h1,.page-title{
    font-size:20px!important;
    line-height:1.15!important;
    margin-bottom:4px!important;
  }
  .topbar-left p,.page-subtitle{
    font-size:11px!important;
    line-height:1.35!important;
  }
  .topbar-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:auto auto minmax(0,1fr) auto!important;
    gap:7px!important;
    align-items:center!important;
    min-width:0!important;
  }
  .mobile-menu-button{display:flex!important}
  .topbar-actions .quick-period{
    min-width:0!important;
    overflow:hidden!important;
  }
  .quick-period select{
    max-width:100%!important;
    min-width:0!important;
    height:40px!important;
    font-size:11px!important;
  }
  .topbar-updated{display:none!important}
  .topbar-actions .upload-button{
    min-width:0!important;
    width:auto!important;
    min-height:40px!important;
    padding:0 10px!important;
  }
  .upload-button > span:last-child{
    white-space:nowrap!important;
  }
  .topbar-actions .theme-button,
  .topbar-actions .icon-button{
    width:40px!important;height:40px!important;
    min-width:40px!important;
  }

  .content{
    width:100%!important;
    min-width:0!important;
    padding:0!important;
  }

  .marketplace-switcher{
    margin-top:9px!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .marketplace-switcher-left{
    min-width:0!important;
    width:100%!important;
  }
  .marketplace-tabs{
    max-width:100%!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .marketplace-tabs::-webkit-scrollbar{display:none}
  .marketplace-tab{
    flex:0 0 auto!important;
    min-height:38px!important;
    padding:0 12px!important;
  }

  .filters-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
  }
  .filter-field{
    min-width:0!important;
  }
  .filter-field.custom-date-inline{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:7px!important;
  }
  .filter-field.custom-date-inline > *{min-width:0!important}

  .kpi-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
  }
  .kpi-card{
    min-width:0!important;
    width:100%!important;
    height:auto!important;
    min-height:86px!important;
    padding:10px!important;
    border-radius:13px!important;
  }
  .kpi-header{min-width:0!important}
  .kpi-title{
    font-size:9.5px!important;
    line-height:1.25!important;
    white-space:normal!important;
  }
  .kpi-value{
    font-size:clamp(16px,5vw,23px)!important;
    line-height:1.15!important;
    overflow-wrap:anywhere!important;
  }
  .kpi-change{font-size:9px!important}

  .charts-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:9px!important;
    width:100%!important;
    min-width:0!important;
  }
  .chart-panel,.panel{
    min-width:0!important;
    width:100%!important;
    overflow:hidden!important;
  }
  .panel-header{
    gap:8px!important;
    flex-wrap:wrap!important;
  }
  .chart-switcher{
    max-width:100%!important;
    overflow-x:auto!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    scrollbar-width:none!important;
  }
  .chart-switcher::-webkit-scrollbar{display:none}
  .chart-switch{flex:0 0 auto!important;min-height:34px!important}

  .chart-wrapper,.chart-container{
    height:250px!important;
    min-height:250px!important;
    width:100%!important;
    overflow:hidden!important;
  }

  .content-grid,.dashboard-grid{
    width:100%!important;
    min-width:0!important;
  }

  .annual-plan-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:6px!important;
  }

  .kpi-detail-dialog{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    max-height:calc(100dvh - 24px)!important;
    overflow-y:auto!important;
  }

  .upload-source-dialog{
    width:calc(100vw - 24px)!important;
    max-width:500px!important;
    max-height:calc(100dvh - 24px)!important;
    overflow-y:auto!important;
  }
}

@media (max-width:520px){
  .main{padding:7px!important}
  .topbar{padding:9px!important}
  .topbar-actions{
    grid-template-columns:40px minmax(0,1fr) 40px!important;
  }
  .topbar-actions .quick-period{grid-column:2!important;grid-row:1!important}
  .topbar-actions .icon-button{grid-column:3!important;grid-row:1!important}
  .topbar-actions .theme-button{grid-column:1!important;grid-row:2!important}
  .topbar-actions .upload-button{
    grid-column:2 / 4!important;grid-row:2!important;
    width:100%!important;
  }
  .kpi-card{min-height:82px!important;padding:9px!important}
  .kpi-icon{display:none!important}
  .chart-wrapper,.chart-container{height:220px!important;min-height:220px!important}
  .annual-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media (max-width:370px){
  .topbar-left h1,.page-title{font-size:18px!important}
  .topbar-actions{grid-template-columns:38px minmax(0,1fr) 38px!important}
  .topbar-actions .icon-button,.topbar-actions .theme-button,.mobile-menu-button{
    width:38px!important;min-width:38px!important;height:38px!important
  }
  .kpi-grid{grid-template-columns:minmax(0,1fr)!important}
  .kpi-card{min-height:76px!important}
}



/* =========================================================
   KATIQ Analytics — clean final overrides
   ========================================================= */
:root{
  --kq-blue:#1677F2; --kq-cyan:#10BBD8; --kq-teal:#14D8B4;
  --kq-green:#55D56B; --kq-bg:#F6F8FB; --kq-surface:#FFFFFF;
  --kq-border:#E4EAF2; --kq-text:#10264A; --kq-muted:#667085;
}
.katiq-top-brand{display:flex;align-items:center;width:260px;min-width:260px;height:58px}
.katiq-top-brand picture,.katiq-top-brand img{display:block;width:100%;height:auto}
.katiq-top-brand img{max-height:58px;object-fit:contain;object-position:left center}
.topbar-updated{white-space:nowrap}
#topCustomPeriodBox{display:flex;align-items:center;gap:7px}
#topCustomPeriodBox[hidden]{display:none!important}
#topCustomPeriodBox input[type="date"]{width:126px;min-width:0}
button.primary,.btn-primary,.import-btn,.active,.period-btn.active,.marketplace-switcher .active{
  background:linear-gradient(135deg,var(--kq-blue),var(--kq-cyan))!important;
  color:#fff!important;border-color:transparent!important;
}
button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--kq-cyan);outline-offset:2px
}
body.dark,body[data-theme="dark"]{
  --kq-bg:#0B111C;--kq-surface:#121A27;--kq-border:#263348;
  --kq-text:#EAF2FF;--kq-muted:#A8B5C8;background:var(--kq-bg);color:var(--kq-text)
}
body.dark .katiq-top-brand img,body[data-theme="dark"] .katiq-top-brand img{
  content:url("assets/katiq-logo-dark.svg")
}
body.dark .card,body.dark .kpi-card,body.dark .panel,
body[data-theme="dark"] .card,body[data-theme="dark"] .kpi-card,body[data-theme="dark"] .panel{
  background:var(--kq-surface);border-color:var(--kq-border)
}
@media(max-width:760px){
  .katiq-top-brand{width:44px;min-width:44px;height:44px}
  .katiq-top-brand img{width:42px;height:42px;content:url("assets/katiq-icon.svg")}
  #topCustomPeriodBox{width:100%;justify-content:center}
  #topCustomPeriodBox input[type="date"]{flex:1;width:auto;min-width:0}
}
@media(max-width:520px){
  #topCustomPeriodBox{gap:5px}
  #topCustomPeriodBox input[type="date"]{font-size:12px}
}
@media(max-width:370px){
  .katiq-top-brand{width:38px;min-width:38px}
  .katiq-top-brand img{width:36px;height:36px}
}

/* KATIQ v7 — final cleanup */
:root{
  --kq-blue:#1677F2;--kq-cyan:#10BBD8;--kq-teal:#14D8B4;--kq-green:#55D56B;
  --kq-bg:#F6F8FB;--kq-surface:#FFFFFF;--kq-border:#E4EAF2;--kq-text:#10264A;--kq-muted:#667085;
  --kq-blue-soft:#E8F5FF;
}
.katiq-top-brand{width:100%;min-width:0;height:auto;display:flex;align-items:center}
.katiq-top-brand img{width:min(250px,100%);max-height:62px;object-fit:contain;object-position:left center}
.sidebar-header{padding:18px 18px 16px}
body.dark .katiq-top-brand img,body[data-theme="dark"] .katiq-top-brand img{content:url("assets/katiq-logo-dark.svg")}
body.dark{background:#0B111C;color:#EAF2FF}
body.dark .sidebar,body.dark .topbar,body.dark .card,body.dark .kpi-card,body.dark .panel,
body[data-theme="dark"] .sidebar,body[data-theme="dark"] .topbar,body[data-theme="dark"] .card,body[data-theme="dark"] .kpi-card,body[data-theme="dark"] .panel{
 background:#121A27;border-color:#263348;color:#EAF2FF
}
@media(max-width:760px){
 .sidebar-header{padding:14px 16px}
 .katiq-top-brand img{content:url("assets/katiq-icon.svg");width:42px;height:42px}
 .topbar{gap:10px}
 .topbar-left h1{font-size:18px}
 .topbar-left p{display:none}
 .topbar-actions{gap:6px}
 .quick-period{max-width:100%;flex:1 1 auto;min-width:0}
 .quick-period select{min-width:0;width:100%}
 .topbar-actions .upload-button span:last-child{display:none}
 .topbar-actions .upload-button{width:40px;min-width:40px;padding:0;justify-content:center}
 .custom-period-box{width:100%;display:none;flex-wrap:wrap;gap:6px}
 .custom-period-box input{min-width:0;flex:1 1 110px}
 .quick-period:has(select option[value="custom"]:checked) .custom-period-box{display:flex}
}

/* Final responsive corrections */
@media (max-width:820px){
  .mobile-menu-button{display:flex!important;flex:0 0 38px!important}
  .sidebar.mobile-open{transform:translateX(0)!important}
  .sidebar-overlay.active{display:block!important;position:fixed!important;inset:0!important;z-index:1090!important;background:rgba(11,31,68,.42)!important}
  #topCustomPeriodBox{width:min(100%,290px);flex-wrap:wrap;align-items:center}
  #topCustomPeriodBox[hidden]{display:none!important}
  #topCustomPeriodBox input[type="date"]{width:110px;flex:1 1 110px}
}

/* KATIQ AUTH / ACCOUNT */
.katiq-user-menu{display:flex;align-items:center;gap:8px;margin-left:4px}
.katiq-user-name{font-size:12px;font-weight:700;color:#667085;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.katiq-logout-button{height:36px;padding:0 11px;border:1px solid #e4eaf2;border-radius:10px;background:transparent;color:#667085;font-size:12px;font-weight:700}
.katiq-logout-button:hover{border-color:#10bbd8;color:#1677f2}
body.dark .katiq-logout-button,body[data-theme="dark"] .katiq-logout-button{border-color:#263348;color:#a8b5c8}
@media(max-width:760px){.katiq-user-name{display:none}.katiq-logout-button{font-size:0;width:36px;padding:0}.katiq-logout-button:after{content:"↪";font-size:16px}}

/* =========================================================
   KATIQ ANALYTICS — FINAL UI CLEANUP v10
   Single brand token layer; accessibility-first colors;
   unified dark theme; mobile menu uses mobile-open only.
   ========================================================= */
:root{
  --kq-blue:#1677F2;
  --kq-blue-dark:#0F5FD6;
  --kq-cyan:#10BBD8;
  --kq-teal:#14D8B4;
  --kq-green:#55D56B;
  --kq-bg:#F6F8FB;
  --kq-surface:#FFFFFF;
  --kq-surface-2:#F8FAFC;
  --kq-line:#E3E8F0;
  --kq-text:#10264A;
  --kq-muted:#667085;
  --kq-soft:#98A2B3;
  --kq-dark-bg:#0B111C;
  --kq-dark-surface:#121A27;
  --kq-dark-surface-2:#172131;
  --kq-dark-line:#263348;
  --kq-dark-text:#EAF2FF;
  --kq-dark-muted:#A8B5C8;
  --kq-shadow:0 8px 24px rgba(16,38,74,.07);
}

html,body{background:var(--kq-bg)!important;color:var(--kq-text)!important;}
body{
  background:var(--kq-bg)!important;
  color:var(--kq-text)!important;
}

/* No purple/pink branding remnants. */
.topbar-actions .primary-button,
.btn-primary,
.upload-button{
  background:linear-gradient(135deg,var(--kq-blue),var(--kq-cyan))!important;
  border-color:transparent!important;
  box-shadow:0 5px 14px rgba(22,119,242,.18)!important;
}
.topbar-actions .primary-button:hover,
.btn-primary:hover,
.upload-button:hover{background:linear-gradient(135deg,var(--kq-blue-dark),var(--kq-teal))!important;}

.topbar,.marketplace-switcher,.card,.kpi-card,.large-chart,.filters-card,.connection-card,.modal{
  border-color:var(--kq-line)!important;
}
.topbar,.marketplace-switcher,.card,.kpi-card,.large-chart{background:var(--kq-surface)!important;}
.page-title,h1,.card-title,.kpi-value,.modal-title,.product-name,.money,.stock-stat-value{color:var(--kq-text)!important;}
.page-subtitle,.card-subtitle,.kpi-label,.kpi-title,.filter-label,.switcher-label,.data-status,.connection-info,.sidebar-bottom{color:var(--kq-muted)!important;}

/* Brand accents only: blue/cyan/teal/green. */
.kpi-card:nth-child(1){border-top-color:var(--kq-blue)!important;}
.kpi-card:nth-child(2){border-top-color:var(--kq-blue)!important;}
.kpi-card:nth-child(3){border-top-color:var(--kq-cyan)!important;}
.kpi-card:nth-child(4){border-top-color:var(--kq-teal)!important;}
.kpi-card:nth-child(5){border-top-color:var(--kq-green)!important;}
.kpi-card:nth-child(6){border-top-color:var(--kq-blue)!important;}
.kpi-card:nth-child(7){border-top-color:var(--kq-cyan)!important;}
.kpi-card:nth-child(8){border-top-color:var(--kq-teal)!important;}
.large-chart:before{background:linear-gradient(90deg,var(--kq-blue),var(--kq-cyan),var(--kq-teal),var(--kq-green))!important;}

/* Marketplace tabs stay neutral; marketplace colors are not used as global UI colors. */
.marketplace-tab.active{background:var(--kq-blue)!important;color:#fff!important;}
.marketplace-tab[data-marketplace="Wildberries"]:not(.active):hover,
.marketplace-tab[data-marketplace="Ozon"]:not(.active):hover,
.marketplace-tab[data-marketplace="Яндекс Маркет"]:not(.active):hover{
  background:#EEF7FB!important;color:var(--kq-blue-dark)!important;
}

/* Dark theme: one source of truth. */
body.dark,body[data-theme="dark"]{
  background:var(--kq-dark-bg)!important;
  color:var(--kq-dark-text)!important;
}
body.dark .topbar,body.dark .marketplace-switcher,body.dark .card,body.dark .kpi-card,
body.dark .large-chart,body.dark .filters-card,body.dark .connection-card,body.dark .modal{
  background:var(--kq-dark-surface)!important;
  border-color:var(--kq-dark-line)!important;
  color:var(--kq-dark-text)!important;
}
body.dark .page-title,body.dark h1,body.dark .card-title,body.dark .kpi-value,
body.dark .modal-title,body.dark .product-name,body.dark .money,body.dark .stock-stat-value,
body.dark .large-chart .panel-header h2{color:var(--kq-dark-text)!important;}
body.dark .page-subtitle,body.dark .card-subtitle,body.dark .kpi-label,body.dark .kpi-title,
body.dark .filter-label,body.dark .switcher-label,body.dark .data-status,body.dark .connection-info,
body.dark .sidebar-bottom,body.dark .marketplace-label{color:var(--kq-dark-muted)!important;}
body.dark .secondary-button,body.dark .icon-button,body.dark .theme-button{
  background:var(--kq-dark-surface-2)!important;color:var(--kq-dark-text)!important;border-color:var(--kq-dark-line)!important;
}
body.dark .marketplace-tab.active{background:var(--kq-blue)!important;color:#fff!important;}
body.dark .marketplace-tab:not(.active){color:var(--kq-dark-muted)!important;background:transparent!important;}
body.dark .marketplace-tab:not(.active):hover{background:#1B2A3B!important;color:var(--kq-dark-text)!important;}
body.dark .large-chart .panel-header p,body.dark .chart-switch{color:var(--kq-dark-muted)!important;}
body.dark .chart-switch.active{background:#1B3556!important;color:#DCEBFF!important;}

/* Mobile menu: one class only. */
.mobile-menu-button{display:none;}
.sidebar-overlay{display:none;}
@media(max-width:760px){
  .mobile-menu-button{
    display:flex!important;width:38px;height:38px;align-items:center;justify-content:center;
    border:1px solid var(--kq-line);border-radius:10px;background:var(--kq-surface);color:var(--kq-text);
    flex:0 0 38px;cursor:pointer;
  }
  .sidebar{transform:translateX(-105%)!important;transition:transform .22s ease!important;z-index:1000!important;}
  .sidebar.mobile-open{transform:translateX(0)!important;}
  .sidebar-overlay{display:none!important;position:fixed!important;inset:0!important;background:rgba(7,16,29,.48)!important;z-index:999!important;}
  .sidebar-overlay.active{display:block!important;}
  body.dark .mobile-menu-button{background:var(--kq-dark-surface)!important;border-color:var(--kq-dark-line)!important;color:var(--kq-dark-text)!important;}

  .topbar{display:grid!important;grid-template-columns:38px minmax(0,1fr) auto!important;align-items:center!important;gap:8px!important;}
  .topbar-left{min-width:0!important;width:auto!important;}
  .topbar-left .katiq-top-brand img{max-width:150px!important;height:auto!important;}
  .topbar-actions{width:auto!important;display:flex!important;gap:6px!important;align-items:center!important;}
  .topbar-actions .upload-button,.topbar-actions .secondary-button{min-width:0!important;}
  .topbar-actions .upload-button{font-size:0!important;padding:0 10px!important;}
  .topbar-actions .upload-button::before{content:'↑';font-size:15px;}
  .topbar-actions .secondary-button{font-size:0!important;padding:0 10px!important;}
  .topbar-actions .secondary-button::before{content:'↻';font-size:16px;}
  .topbar-actions .theme-button,.topbar-actions .icon-button{width:38px!important;min-width:38px!important;padding:0!important;}

  .marketplace-switcher{overflow-x:auto!important;scrollbar-width:none;}
  .marketplace-switcher::-webkit-scrollbar{display:none;}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:390px){
  .topbar-left .katiq-top-brand img{max-width:118px!important;}
  .topbar{padding:7px!important;gap:5px!important;}
  .topbar-actions{gap:4px!important;}
  .topbar-actions .theme-button,.topbar-actions .icon-button,.mobile-menu-button{width:36px!important;min-width:36px!important;height:36px!important;}
  .kpi-grid{grid-template-columns:1fr!important;}
  .kpi-card{height:82px!important;min-height:82px!important;}
}

/* Accessibility: cyan/teal/green are accents, not small body text. */
a,.text-link{color:var(--kq-blue-dark);}
body.dark a,body.dark .text-link{color:#69A5FF;}

/* Remove obsolete mobile-menu class visuals. */
.mobile-menu-btn{display:none!important;}