:root {
  color-scheme: light;
  --bg: #f5f6fb;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-solid: #fff;
  --surface-muted: #f8f9fc;
  --surface-raised: #fff;
  --line: #e5e7f0;
  --line-strong: #d8dbe8;
  --text: #15182a;
  --muted: #696f85;
  --text-tertiary: #8c92a6;
  --purple: #6f4fe8;
  --purple-dark: #5738ce;
  --purple-soft: #eeeaff;
  --blue: #5495e8;
  --green: #39a96b;
  --green-soft: #e9f8ef;
  --orange: #f5a142;
  --red: #e45462;
  --expense-track: #d3dae6;
  --expense-track-border: #c5cedd;
  --shadow: 0 10px 32px rgba(35, 27, 78, 0.055);
  --shadow-sm: 0 3px 12px rgba(35, 27, 78, .055);
  --shadow-lg: 0 20px 55px rgba(35, 27, 78, .1);
  --focus-ring: 0 0 0 3px rgba(111,79,232,.18);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  font-family: Inter, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1120;
  --surface: rgba(24, 27, 47, .94);
  --surface-solid: #181b2f;
  --surface-muted: #1d2137;
  --surface-raised: #20243b;
  --line: #30364f;
  --line-strong: #424962;
  --text: #f4f5fb;
  --muted: #aab0c4;
  --text-tertiary: #858da7;
  --purple: #9a82ff;
  --purple-dark: #b7a7ff;
  --purple-soft: #2b2850;
  --green-soft: #183a2c;
  --expense-track: #3a4158;
  --expense-track-border: #505973;
  --shadow: 0 14px 36px rgba(0, 0, 0, .24);
  --shadow-sm: 0 4px 14px rgba(0,0,0,.2);
  --shadow-lg: 0 22px 60px rgba(0,0,0,.38);
  --focus-ring: 0 0 0 3px rgba(154,130,255,.26);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; background: var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); transition: color .2s ease, background .2s ease; }
button, input, select { font: inherit; }
button { color: inherit; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 226px minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; width: 226px; display: flex; flex-direction: column; padding: 24px 14px 18px; background: rgba(255,255,255,.82); border-right: 1px solid var(--line); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 12px 27px; font-size: 14px; font-weight: 750; letter-spacing: -.02em; }
.brand-mark { display: inline-grid; place-items: center; width: 35px; height: 35px; border-radius: 9px; color: white; font-size: 13px; font-weight: 800; background: linear-gradient(145deg, #8a6cf3, #6744da); box-shadow: 0 7px 16px rgba(113, 83, 226, .25); }
.nav { display: grid; gap: 5px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 0; border-radius: 9px; color: #596075; background: transparent; font-size: 12.5px; text-align: left; cursor: pointer; transition: .18s ease; }
.nav-item:hover { color: var(--purple-dark); background: #f7f4ff; transform: translateX(1px); }
.nav-item.is-active { color: var(--purple-dark); background: linear-gradient(90deg, #ede8ff, #f4f0ff); font-weight: 650; }
.nav-item.is-active svg { stroke-width: 2; }
.sidebar-footer { display: grid; gap: 5px; margin-top: auto; }
.sidebar-user { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 8px 0; padding-top:12px; border-top:1px solid var(--line); color:var(--muted); font-size:9px; }
.sidebar-user span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-user button { flex:0 0 auto; display:grid; place-items:center; width:29px; height:29px; padding:0; border:1px solid var(--line); border-radius:7px; color:var(--text); background:var(--surface-solid); cursor:pointer; }

.main { grid-column: 2; min-width: 0; padding: 30px clamp(18px, 2.2vw, 38px) 44px; }
.page-header, .page { width: 100%; max-width: 1600px; margin-left: auto; margin-right: auto; }
.page-header { min-height: 50px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-header h1 { margin: 2px 0 0; font-size: clamp(23px, 2vw, 30px); letter-spacing: -.035em; }
.eyebrow { display: none; margin: 0; color: var(--purple); font-size: 11px; font-weight: 650; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.sync-badge { display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:0 10px; border-radius:99px; color:#26734a; background:#eaf8ef; font-size:10px; font-weight:650; white-space:nowrap; }
.sync-badge::before { content:""; width:6px; height:6px; border-radius:50%; background:#35a86c; box-shadow:0 0 0 3px rgba(53,168,108,.12); }
.control, .button, .icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 37px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.82); font-size: 11px; cursor: pointer; transition: .18s ease; }
.control:hover, .button:hover { border-color: #cec7f4; box-shadow: 0 5px 14px rgba(64,45,124,.06); }
.control svg { width: 14px; height: 14px; }
.button--primary { color: white; border-color: var(--purple); background: linear-gradient(135deg, #8266ed, #6545d9); box-shadow: 0 7px 16px rgba(105,72,217,.2); }
.button--ghost { color: var(--purple-dark); border-color: transparent; background: var(--purple-soft); }
.page-header { position:relative; }
.popover { position:absolute; z-index:15; top:48px; right:0; width:310px; padding:16px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 18px 45px rgba(30,25,70,.14); }
.date-popover { width:min(760px,calc(100vw - 36px)); padding:18px; }
.range-calendar-head { display:grid; gap:12px; }
.calendar-nav { display:grid; grid-template-columns:36px 1fr 36px; align-items:center; gap:9px; }
.calendar-nav strong { text-align:center; font-size:11px; }
.calendar-nav button { width:36px; height:32px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--surface-solid); font-size:20px; cursor:pointer; }
.calendar-months { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:15px; }
.calendar-month h3 { margin:0 0 11px; text-align:center; font-size:12px; }
.calendar-weekdays,.calendar-days { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.calendar-weekdays span { padding:5px 0; color:var(--muted); text-align:center; font-size:9px; font-weight:650; }
.calendar-day { position:relative; height:34px; border:0; border-radius:8px; color:var(--text); background:transparent; font-size:10px; cursor:pointer; }
.calendar-day:hover { color:var(--purple-dark); background:var(--purple-soft); }
.calendar-day.is-outside { color:#b8bcc9; }
.calendar-day.is-placeholder { visibility:hidden; pointer-events:none; }
.calendar-day.is-in-range { border-radius:0; color:var(--purple-dark); background:#e9e3ff; }
.calendar-day.is-start,.calendar-day.is-end { z-index:1; color:#fff; background:linear-gradient(135deg,#876bf2,#6747da); box-shadow:0 6px 14px rgba(105,72,217,.24); font-weight:750; }
.calendar-day.is-start { border-radius:9px 0 0 9px; }
.calendar-day.is-end { border-radius:0 9px 9px 0; }
.calendar-day.is-start.is-end { border-radius:9px; }
.date-presets { display:flex; gap:7px; margin-bottom:15px; flex-wrap:wrap; }
.date-presets button { min-height:32px; padding:0 11px; border:1px solid var(--line); border-radius:7px; color:#625d76; background:#f7f7fa; font-size:10px; cursor:pointer; }
.date-presets button:hover { color:var(--purple-dark); border-color:#d8d0f8; background:var(--purple-soft); }
.date-fields { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:10px; }
.date-fields label { margin:0; }
.date-fields > span { padding-bottom:11px; color:var(--muted); }
.date-hint { margin:12px 0 0; color:var(--muted); font-size:10px; line-height:1.45; }
.popover[hidden] { display:none; }
.popover label { display:grid; gap:7px; margin-bottom:12px; color:var(--muted); font-size:10px; }
.popover input, .popover select, .select-control { width:100%; height:37px; padding:0 10px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#fff; font-size:11px; outline:none; }
.popover input:focus, .popover select:focus, .select-control:focus { border-color:#a995f1; box-shadow:0 0 0 3px #f0ecff; }
.popover-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:15px; }

.page { display: grid; gap: 16px; animation: page-in .24s ease; }
@keyframes page-in { from { opacity: 0; transform: translateY(5px); } }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.metric-card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); }
.metric-card { position: relative; min-height: 138px; padding: 20px 20px 14px; overflow: hidden; }
.metric-label { color: var(--muted); font-size: 12px; }
.metric-value { margin-top: 9px; font-size: clamp(22px, 1.7vw, 27px); font-weight: 740; letter-spacing: -.035em; }
.metric-change { display: inline-flex; align-items: center; gap: 3px; margin-top: 7px; color: var(--green); font-size: 11px; font-weight: 650; }
.metric-change.is-negative { color: var(--red); }
.metric-spark { position: absolute; right: 8px; bottom: 5px; width: 48%; height: 45px; opacity: .9; }
.metric-spark path.line { fill: none; stroke: var(--spark, var(--purple)); stroke-width: 2.2; }
.metric-spark path.area { fill: url(#sparkFade); stroke: none; opacity: .3; }

.dashboard-main { display: grid; grid-template-columns: .88fr 1.12fr; gap: 14px; }
.dashboard-bottom { display: grid; grid-template-columns: .82fr 1.26fr .92fr; gap: 14px; }
.inventory-layout { display: grid; grid-template-columns: .68fr 1.32fr; gap: 14px; }
.panel { min-width: 0; padding: 21px 22px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.panel-title { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.panel-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.panel-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 17px; border: 0; padding: 0; color: var(--purple); background: none; font-size: 11px; font-weight: 650; cursor: pointer; }
.panel-link svg { width: 13px; height: 13px; }

.donut-layout { display: grid; grid-template-columns: 155px 1fr; align-items: center; gap: 18px; min-height: 188px; }
.donut { position: relative; width: 142px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--purple) 0 56%, var(--blue) 56% 74%, #f5b65d 74% 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.02); }
.donut::before { content: ""; position: absolute; inset: 20px; border-radius: 50%; background: white; }
.donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; z-index: 1; }
.donut-center strong { font-size: 17px; }
.donut-center span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.legend { display: grid; gap: 14px; }
.legend-item { display: grid; grid-template-columns: 9px 1fr; gap: 8px; align-items: start; color: #53586b; font-size: 10px; }
.legend-dot { width: 8px; height: 8px; margin-top: 2px; border-radius: 50%; background: var(--dot); }
.legend-item strong { display: block; margin-top: 4px; color: var(--text); font-size: 11px; }

.chart-panel { overflow: hidden; }
.chart-frame { width: 100%; max-width: 1100px; min-height: 250px; margin:0 auto; display: grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; overflow: hidden; }
.chart-canvas { position:relative; width:100%; min-width:0; height:auto; min-height:220px; max-height:330px; aspect-ratio:8 / 3; }
.dashboard-main .chart-canvas { height:auto; max-height:260px; }
.line-chart { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-y-axis { position:absolute; z-index:1; inset:12.5% auto 7% 0; width:48px; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; }
.chart-y-axis span { color:#777d91; font-size:10px; font-weight:500; text-align:right; white-space:nowrap; }
.chart-x-axis { display:flex; justify-content:space-between; gap:8px; padding:7px 4% 0 10%; color:#777d91; font-size:10px; font-weight:500; }
.chart-x-axis span { min-width:0; white-space:nowrap; }
.line-chart .gridline { stroke: #eceef4; stroke-width: 1; }
.line-chart .axis { stroke: #dfe2ea; stroke-width: 1; }
.line-chart .series { fill: none; stroke-width: 2.2; }
.line-chart .point { stroke: white; stroke-width: 1.5; }
.line-chart .point-hit { fill:transparent; stroke:none; cursor:pointer; }
.chart-point { outline:none; cursor:pointer; }
.chart-point:hover .point, .chart-point:focus .point, .chart-point.is-pinned .point { r:6px; stroke-width:2.5; filter:drop-shadow(0 2px 4px rgba(61,47,120,.3)); }
.chart-tooltip { position:absolute; z-index:5; min-width:150px; padding:9px 11px; border:1px solid #ded8f7; border-radius:9px; background:rgba(255,255,255,.98); box-shadow:0 10px 30px rgba(31,25,72,.14); transform:translate(-50%,-100%); pointer-events:none; }
.chart-tooltip[hidden] { display:none; }
.chart-tooltip strong, .chart-tooltip span { display:block; white-space:nowrap; }
.chart-tooltip strong { color:var(--text); font-size:11px; }
.chart-tooltip strong::before { content:""; display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--point-color); }
.chart-tooltip span { margin-top:4px; color:var(--muted); font-size:10px; }
.chart-legend { display: flex; justify-content: flex-end; gap: 15px; flex-wrap: wrap; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; }
.chart-legend i { width: 11px; height: 2px; border-radius: 2px; background: var(--color); }

.scatter { position: relative; min-height: 142px; background-image: linear-gradient(#eef0f5 1px, transparent 1px), linear-gradient(90deg, #eef0f5 1px, transparent 1px); background-size: 25% 33.333%; border-left: 1px solid #dfe2ea; border-bottom: 1px solid #dfe2ea; }
.bubble { position: absolute; width: var(--size); height: var(--size); left: var(--x); bottom: var(--y); border-radius: 50%; background: var(--color); opacity: .78; border: 2px solid white; box-shadow: 0 2px 7px rgba(28,30,52,.12); }
.economics { display: grid; grid-template-columns: 1fr 118px; gap: 12px; align-items: center; }
.economics-list { display: grid; gap: 10px; }
.economics-row { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; }
.economics-row span { color: var(--muted); }
.economics-row strong { font-size: 11px; }
.margin-donut { position: relative; width: 105px; aspect-ratio:1; border-radius:50%; background: conic-gradient(#60c2af 0 31%, #5e91e8 31% 61%, #8a6ee8 61% 100%); }
.margin-donut::before { content:""; position:absolute; inset:15px; border-radius:50%; background:#fff; }
.margin-donut .donut-center strong { font-size: 19px; }

.forecast-value { font-size: 22px; font-weight: 700; }
.forecast-label { color: var(--muted); font-size: 10px; margin-bottom: 7px; }
.mini-chart { width: 100%; height: 94px; margin-top: 13px; }
.mini-chart polyline { fill: none; stroke: var(--purple); stroke-width: 2; }

.table-panel { padding: 0; overflow: hidden; }
.table-toolbar { display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.tabs, .filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tab, .filter-chip { border: 1px solid transparent; border-radius: 7px; padding: 7px 10px; color: #666b7d; background: #f6f7fa; font-size: 10px; cursor: pointer; }
.tab.is-active, .filter-chip.is-active { color: var(--purple-dark); border-color: #dfd8ff; background: var(--purple-soft); font-weight: 650; }
.search-box { display: flex; align-items: center; min-width: 210px; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.search-box svg { width: 13px; height: 13px; color: var(--muted); }
.search-box input { width: 100%; height: 33px; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 10px; }
.data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 10px; white-space: nowrap; }
.data-table th { padding: 11px 14px; color: #868b9d; background: #fafbfc; font-size: 9px; font-weight: 600; text-align: left; }
.data-table td { padding: 13px 14px; border-top: 1px solid #eef0f4; color: #4d5265; }
.data-table td:first-child { color: var(--text); font-weight: 520; }
.data-table tbody tr { transition: .15s; }
.data-table tbody tr:hover { background: #fbfaff; }
.product { display: flex; align-items: center; gap: 9px; min-width: 210px; }
.product-link { color:inherit; text-decoration:none; border-radius:7px; }
.product-link:hover span:not(.product-thumb) { color:var(--purple-dark); text-decoration:underline; text-decoration-color:#d7cff8; text-underline-offset:2px; }
.product-thumb { position:relative; display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 37px; overflow:hidden; border-radius: 7px; background: linear-gradient(145deg, #f5f0ff, #e7e9f3); font-size: 17px; }
.product-thumb img { position:relative; z-index:1; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.product-thumb-fallback { position:absolute; inset:0; display:grid; place-items:center; }
.product-thumb.has-image-error img { display:none; }
.product small { display: block; margin-top: 3px; color: #969aaa; font-size: 8px; font-weight: 400; }
.status-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 99px; color: var(--green); background: var(--green-soft); font-size: 9px; font-weight: 650; }
.status-pill.is-orange { color: #bc6a20; background: #fff2e5; }
.status-pill.is-purple { color: var(--purple-dark); background: var(--purple-soft); }
.status-pill.abc-class-pill { color:var(--abc-pill-color); background:color-mix(in srgb,var(--abc-pill-color) 16%,var(--surface-raised)); border:1px solid color-mix(in srgb,var(--abc-pill-color) 34%,transparent); }
.text-positive { color: var(--green) !important; font-weight: 650; }
.text-negative { color: var(--red) !important; font-weight: 650; }

.summary-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.summary-item { min-height: 92px; padding: 20px 22px; border-right: 1px solid var(--line); }
.summary-item:last-child { border-right: 0; }
.summary-item span { color: var(--muted); font-size: 11px; }
.summary-item strong { display: block; margin-top: 8px; font-size: clamp(18px, 1.5vw, 23px); }
.toolbar-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.upload-action { display: inline-flex; align-items:center; gap:6px; color: var(--purple); border:0; background:transparent; font-size:10px; cursor:pointer; }
.upload-action svg { width: 13px; height: 13px; }
.section-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.section-toolbar__group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.segmented { display:inline-flex; gap:3px; padding:3px; border-radius:9px; background:#f1f2f6; }
.segmented button { min-height:31px; padding:0 11px; border:0; border-radius:7px; color:#6d7180; background:transparent; font-size:10px; cursor:pointer; }
.segmented button.is-active { color:var(--text); background:#fff; box-shadow:0 2px 8px rgba(31,27,58,.08); font-weight:650; }
.info-banner { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 15px; border:1px solid #ded8f7; border-radius:10px; color:#595d70; background:linear-gradient(90deg,#faf9ff,#fff); font-size:11px; }
.activity-filter, .priority-filter { width:max-content; max-width:100%; overflow-x:auto; }
.data-source-banner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 16px; border:1px solid #cce9da; border-radius:10px; color:#326a4b; background:#f2fbf6; font-size:11px; }
.data-source-banner.has-warning { color:#7c5a1e; border-color:#efdfb8; background:#fffaf0; }
.data-source-banner span { color:inherit; opacity:.85; }
.finance-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.finance-overview { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(310px,.55fr); gap:16px; }
.finance-breakdown .stacked-bar { height:22px; margin-top:22px; }
.finance-breakdown .finance-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 28px; }
.finance-breakdown .finance-line { min-height:27px; font-size:12px; }
.finance-breakdown .finance-line strong { font-size:12px; }
.finance-result { display:flex; align-items:center; justify-content:space-between; gap:24px; background:linear-gradient(135deg,#fff,#f5f1ff); }
.finance-result__label { color:var(--muted); font-size:12px; }
.finance-result > div > strong { display:block; margin-top:8px; font-size:clamp(30px,3vw,46px); letter-spacing:-.05em; }
.finance-result p { max-width:220px; margin:12px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.finance-result .margin-donut { flex:0 0 120px; width:120px; }
.finance-chart .chart-frame { min-height:420px; }
.finance-chart .chart-canvas { height:auto; min-height:340px; max-height:420px; }
.finance-list { display:grid; gap:12px; }
.finance-line { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:8px; font-size:10px; }
.finance-line > i,.finance-key > i { width:8px; height:8px; border-radius:50%; background:var(--color); }
.finance-line span { display:inline-flex; min-width:0; align-items:center; gap:5px; color:var(--muted); line-height:1.35; }
.finance-line strong { font-size:11px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.finance-line small { min-width:40px; color:var(--muted); text-align:right; }
.finance-key { align-self:center; gap:6px !important; }
.finance-key > i { flex:0 0 auto; width:10px; height:10px; }
.finance-category-label { min-width:0; overflow-wrap:anywhere; }
.stacked-bar { display:flex; height:18px; margin:16px 0 20px; overflow:hidden; border-radius:5px; background:#eee; }
.stacked-bar i { height:100%; width:var(--width); background:var(--color); }
.selection-control { display:flex; align-items:center; gap:8px; }
.selection-control select { min-height:33px; padding:0 9px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:10px; }
.selection-control input, .row-checkbox { width:16px; height:16px; accent-color:var(--purple); cursor:pointer; }
.selection-count { display:inline-flex; min-width:23px; height:22px; align-items:center; justify-content:center; padding:0 7px; border-radius:99px; color:#fff; background:#999daf; font-size:9px; }
.table-action { min-height:33px; padding:0 10px; border:1px solid var(--line); border-radius:8px; background:#fff; font-size:10px; cursor:pointer; }
.table-action:disabled { opacity:.42; cursor:not-allowed; }
.sortable { border:0; padding:0; color:inherit; background:transparent; font:inherit; cursor:pointer; }
.sortable.is-active { color:var(--purple-dark); font-weight:700; }
.column-title { display:inline-flex; align-items:center; gap:5px; }
.info-tip { position:relative; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; flex:0 0 auto; width:18px; height:18px; padding:0; border:1px solid #c9ccda; border-radius:50%; color:#868b9d; font-size:9px; font-weight:750; line-height:1; text-align:center; cursor:help; outline:none; }
.info-tip::after { content:attr(data-tip); position:absolute; z-index:40; left:50%; bottom:calc(100% + 8px); width:240px; padding:9px 11px; border-radius:8px; color:#fff; background:#252339; box-shadow:0 10px 25px rgba(23,20,47,.2); font-size:10px; font-weight:450; line-height:1.45; white-space:normal; transform:translate(-50%,5px); opacity:0; visibility:hidden; pointer-events:none; transition:.15s ease; }
.info-tip::before { content:""; position:absolute; z-index:41; left:50%; bottom:calc(100% + 3px); border:5px solid transparent; border-top-color:#252339; transform:translateX(-50%); opacity:0; visibility:hidden; }
.info-tip:hover::after, .info-tip:focus::after, .info-tip:hover::before, .info-tip:focus::before { opacity:1; visibility:visible; transform:translate(-50%,0); }
.info-tip:hover::before, .info-tip:focus::before { transform:translateX(-50%); }
.data-table th .info-tip::after { top:calc(100% + 8px); bottom:auto; }
.data-table th .info-tip::before { top:calc(100% + 3px); bottom:auto; border-top-color:transparent; border-bottom-color:#252339; }
.data-table--wide { min-width:1500px; }
.pagination { display:flex; align-items:center; justify-content:center; gap:7px; padding:14px; border-top:1px solid var(--line); }
.page-button { width:32px; height:32px; border:0; border-radius:8px; background:transparent; font-size:10px; cursor:pointer; }
.page-button:disabled { opacity:.35; cursor:not-allowed; }
.page-button.is-active { color:var(--purple-dark); background:var(--purple-soft); font-weight:700; }
.page-gap { color:var(--muted); font-size:11px; }
.page-size-control { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:10px; white-space:nowrap; }
.page-size-control select { height:34px; padding:0 8px; border:1px solid var(--line); border-radius:7px; background:#fff; font-size:10px; }
.warehouse-chips { display:flex; align-items:center; gap:5px; max-width:620px; flex-wrap:wrap; white-space:normal; }
.warehouse-chips span { padding:4px 6px; border-radius:6px; color:#5b6072; background:#f2f3f7; font-size:8px; }
.warehouse-chips small { color:var(--muted); }
.warehouse-empty { color:var(--muted); font-size:9px; white-space:normal; }
.warehouse-chips--recommended span { color:#236447; background:#e8f8ef; }
.abc-table th:nth-child(2), .abc-table td:nth-child(2) { width:92px; max-width:92px; }
.abc-table th:nth-child(3), .abc-table td:nth-child(3) { width:110px; max-width:110px; overflow:hidden; text-overflow:ellipsis; }
.forecast-table { min-width:1760px; }
.supply-cell { min-width:110px; background:#ecfbf4; }
.column-settings { position:fixed; z-index:45; top:0; right:0; width:min(390px,100vw); height:100vh; padding:24px; overflow-y:auto; border-left:1px solid var(--line); background:#fff; box-shadow:-20px 0 50px rgba(28,24,62,.13); }
.column-settings-list { display:grid; gap:4px; }
.density-toggle { display:flex; align-items:center; gap:10px; margin:8px 0 18px; padding:12px; border:1px solid var(--line); border-radius:9px; cursor:pointer; }
.density-toggle input { width:17px; height:17px; accent-color:var(--purple); }
.density-toggle span { display:grid; gap:3px; }
.density-toggle small { color:var(--muted); font-size:9px; }
.data-table.is-compact th,.data-table.is-compact td { padding-top:7px; padding-bottom:7px; }
.data-table.is-compact .product { min-width:155px; }
.data-table.is-compact .product-thumb { width:27px; height:31px; }

:root[data-theme="dark"] .sidebar,
:root[data-theme="dark"] .popover,
:root[data-theme="dark"] .column-settings { background:rgba(20,23,40,.96); }
:root[data-theme="dark"] .control,
:root[data-theme="dark"] .button,
:root[data-theme="dark"] .table-action,
:root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] .search-box,
:root[data-theme="dark"] .popover input,
:root[data-theme="dark"] .popover select,
:root[data-theme="dark"] .select-control,
:root[data-theme="dark"] .page-size-control select,
:root[data-theme="dark"] .selection-control select { color:var(--text); background:#1d2138; }
:root[data-theme="dark"] .table-action { border-color:#444b6b; color:#f1f3fb; background:#252a43; }
:root[data-theme="dark"] .button--primary { color:#fff; border-color:#8f75f3; background:linear-gradient(135deg,#8c70f2,#6847db); }
:root[data-theme="dark"] .button--ghost { color:#d9d1ff; border-color:transparent; background:#302c55; }
:root[data-theme="dark"] .table-action:hover { border-color:#7665c9; background:#302d52; }
:root[data-theme="dark"] .upload-action,
:root[data-theme="dark"] .panel-link { color:#c5b9ff; }
:root[data-theme="dark"] .upload-action:hover,
:root[data-theme="dark"] .panel-link:hover { color:#fff; }
:root[data-theme="dark"] .segmented { background:#20243a; }
:root[data-theme="dark"] .segmented button { color:#c1c6d8; }
:root[data-theme="dark"] .segmented button.is-active { color:#fff; background:#363250; }
:root[data-theme="dark"] .calendar-nav button,
:root[data-theme="dark"] .calendar-day { color:#eef0f8; }
:root[data-theme="dark"] .calendar-day.is-outside { color:#646c87; }
:root[data-theme="dark"] .calendar-day.is-in-range { color:#ded7ff; background:#39345f; }
:root[data-theme="dark"] .calendar-day.is-start,
:root[data-theme="dark"] .calendar-day.is-end { color:#fff; background:linear-gradient(135deg,#9b83ff,#7357e8); }
:root[data-theme="dark"] .integration-summary,
:root[data-theme="dark"] .sync-log { color:var(--text); border-color:var(--line-strong); background:#1c2034; }
:root[data-theme="dark"] .token-input-row input,
:root[data-theme="dark"] .password-form input,
:root[data-theme="dark"] .invite-form input,
:root[data-theme="dark"] .invite-form select,
:root[data-theme="dark"] .access-select,
:root[data-theme="dark"] .invite-result input { color:#f4f5fb; border-color:var(--line-strong); background:#1d2138; }
:root[data-theme="dark"] .token-input-row input:focus,
:root[data-theme="dark"] .password-form input:focus { border-color:#8f75f3; box-shadow:0 0 0 3px rgba(143,117,243,.2); }
:root[data-theme="dark"] .connection-status { color:#ffd98e; background:#4a391b; }
:root[data-theme="dark"] .connection-status.is-connected { color:#9ae2bc; background:#193b2c; }
:root[data-theme="dark"] .data-source-banner { color:#9fe0bd; border-color:#315846; background:#183326; }
:root[data-theme="dark"] .data-source-banner.has-warning { color:#f4d28f; border-color:#69542b; background:#3c301a; }
:root[data-theme="dark"] .density-toggle { color:var(--text); background:#20243a; }
:root[data-theme="dark"] .column-settings-list label:hover { background:#272b43; }
:root[data-theme="dark"] .sync-wizard { background:linear-gradient(145deg,rgba(115,87,232,.15),rgba(66,166,108,.07)); }
:root[data-theme="dark"] .integration-warning { color:#ffd58a; background:rgba(139,92,20,.25); }
:root[data-theme="dark"] .icon-close { color:#e4e6f0; background:#282c43; }
:root[data-theme="dark"] .nav-item { color:#aab0c5; }
:root[data-theme="dark"] .nav-item:hover { color:#d5ccff; background:#272542; }
:root[data-theme="dark"] .nav-item.is-active { color:#d9d2ff; background:linear-gradient(90deg,#322c5c,#252342); }
:root[data-theme="dark"] .sync-badge { color:#86ddb0; background:#173527; }
:root[data-theme="dark"] .metric-card,
:root[data-theme="dark"] .panel { background:var(--surface); }
:root[data-theme="dark"] .donut::before,
:root[data-theme="dark"] .margin-donut::before { background:var(--surface-solid); }
:root[data-theme="dark"] .data-table th { color:#a1a8bd; background:#1c2034; }
:root[data-theme="dark"] .data-table td { color:#c4c9d8; border-color:#2b3047; }
:root[data-theme="dark"] .data-table tbody tr:hover { background:#232640; }
:root[data-theme="dark"] .tab,
:root[data-theme="dark"] .filter-chip,
:root[data-theme="dark"] .date-presets button,
:root[data-theme="dark"] .warehouse-chips span { color:#bfc5d7; background:#252940; }
:root[data-theme="dark"] .warehouse-chips--recommended span { color:#9ee5bd; background:#193c2d; }
:root[data-theme="dark"] .line-chart .gridline { stroke:#30364d; }
:root[data-theme="dark"] .line-chart .axis { stroke:#41475f; }
:root[data-theme="dark"] .line-chart .point { stroke:#181b2f; }
:root[data-theme="dark"] .chart-tooltip { color:var(--text); border-color:#464b68; background:rgba(23,26,45,.98); }
:root[data-theme="dark"] .summary-strip,
:root[data-theme="dark"] .info-banner,
:root[data-theme="dark"] .abc-group-card { background:var(--surface); border-color:var(--line); }
:root[data-theme="dark"] .supply-cell { background:#18372c; }
:root[data-theme="dark"] input::placeholder { color:#737b96; }
.column-settings-list label { display:flex; align-items:center; gap:10px; min-height:39px; padding:0 8px; border-radius:7px; font-size:11px; cursor:pointer; }
.column-settings-list label:hover { background:#f8f7fc; }
.column-settings-list input { width:16px; height:16px; accent-color:var(--purple); }
.icon-close { width:32px; height:32px; border:0; border-radius:7px; color:var(--muted); background:#f4f4f7; font-size:22px; cursor:pointer; }
.economics-charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.summary-strip--finance { grid-template-columns:repeat(6,minmax(0,1fr)); overflow:visible; }
.summary-strip--finance .summary-item { display:grid; grid-template-rows:minmax(34px,auto) auto; align-content:start; gap:7px; min-height:82px; padding:17px 18px; }
.summary-strip--finance .summary-item > span { display:flex; min-width:0; min-height:34px; align-items:flex-start; justify-content:flex-start; gap:7px; line-height:1.35; }
.summary-strip--finance .summary-item > span .info-tip { margin-top:0; }
.summary-strip--finance .summary-item > strong { align-self:start; margin:0; white-space:nowrap; line-height:1.15; }
.finance-summary-card .setting-row { padding:12px 0; }
.logistics-widget { display:flex; flex-direction:column; }
.expense-donut { position:relative; display:grid; place-items:center; width:150px; height:150px; margin:5px auto 20px; border-radius:50%; background:conic-gradient(#77cda8 0 var(--expense-share),var(--expense-track) var(--expense-share) 360deg); box-shadow:inset 0 0 0 1px var(--expense-track-border); }
.expense-donut::before { content:""; position:absolute; inset:18px; border-radius:50%; background:#fff; }
.expense-donut > div { position:relative; z-index:1; text-align:center; }
.expense-donut strong,.expense-donut span { display:block; }
.expense-donut strong { font-size:15px; }
.expense-donut span { margin-top:4px; color:var(--muted); font-size:9px; }
.abc-group-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.abc-group-card { position:relative; padding:17px 18px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.abc-group-card span { color:var(--muted); font-size:10px; }
.abc-group-card strong { display:block; margin:7px 0 4px; font-size:20px; }
.abc-group-card small { color:var(--muted); }
.abc-letter { position:absolute; right:18px; top:18px; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:#fff; background:var(--letter-color); font-weight:750; }
.settings-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
.setting-row:first-of-type { border-top:0; }
.setting-row span { color:var(--muted); font-size:10px; }
.setting-row strong { display:block; margin-top:3px; font-size:12px; }
.connection-status { display:inline-flex; align-items:center; padding:6px 9px; border-radius:99px; color:#9b6d19; background:#fff4d9; font-size:9px; font-weight:650; }
.connection-status.is-connected { color:#26734a; background:#eaf8ef; }
.integration-card { grid-column:1 / -1; }
.integration-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:16px; border:1px solid var(--line); border-radius:10px; background:#fafbfe; }
.integration-summary span { color:var(--muted); font-size:10px; }
.integration-summary strong { display:block; margin-top:5px; font-size:12px; }
.integration-warning { margin-top:14px; padding:11px 13px; border-radius:8px; color:#8b5c14; background:#fff5dc; font-size:11px; line-height:1.45; }
.integration-warning strong, .integration-warning span { display:block; }
.integration-warning span { margin-top:5px; }
.sync-wizard { margin-top:16px; padding:18px; border:1px solid rgba(115,87,232,.25); border-radius:12px; background:linear-gradient(145deg,rgba(115,87,232,.06),rgba(66,166,108,.035)); }
.sync-wizard--waiting { width:min(860px,100%); margin:0 auto; padding:28px; }
.connection-waiting { min-height:480px; display:grid; place-items:center; }
.sync-wizard__header { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; }
.sync-wizard__header h2 { margin:3px 0 6px; font-size:20px; }
.sync-wizard__header p:not(.eyebrow) { margin:0; color:var(--muted); font-size:11px; }
.sync-percent { flex:0 0 auto; color:var(--purple); font-size:26px; line-height:1; }
.sync-percent.is-error { color:#d34e5c; }
.sync-progress { height:10px; margin:18px 0; overflow:hidden; border-radius:999px; background:var(--line); }
.sync-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#7357e8,#9a78f2); transition:width .35s ease; }
.sync-stages { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; }
.sync-stage { display:grid; gap:6px; justify-items:center; color:var(--muted); text-align:center; font-size:9px; }
.sync-stage span { display:grid; width:25px; height:25px; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--surface-solid); font-size:9px; }
.sync-stage.is-current span { border-color:var(--purple); color:var(--purple); box-shadow:0 0 0 4px rgba(115,87,232,.1); }
.sync-stage.is-done span { border-color:var(--purple); color:#fff; background:var(--purple); }
.sync-stage.is-done strong { color:var(--text); }
.sync-log { margin-top:16px; padding:12px 14px; border:1px solid var(--line); border-radius:9px; background:var(--surface-solid); }
.sync-log > strong { font-size:10px; }
.sync-log ol { max-height:130px; margin:8px 0 0; padding-left:18px; overflow:auto; color:var(--muted); font-size:9px; line-height:1.65; }
.sync-wizard > .button { margin-top:14px; }
.token-form { margin-top:18px; }
.token-form label { display:grid; gap:8px; color:var(--muted); font-size:11px; }
.token-input-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
.token-input-row input { min-width:0; height:41px; padding:0 12px; border:1px solid var(--line); border-radius:8px; outline:none; background:#fff; }
.token-input-row input:focus { border-color:#a995f1; box-shadow:0 0 0 3px #f0ecff; }
.token-form small { display:block; margin-top:8px; color:var(--muted); font-size:10px; line-height:1.45; }
.integration-actions { display:flex; align-items:center; gap:12px; margin-top:16px; }
.integration-actions span { color:var(--muted); font-size:10px; }
.profile-card { grid-column:1 / -1; }
.password-form { display:grid; grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto; align-items:end; gap:12px; }
.password-form label, .invite-form label { display:grid; gap:7px; color:var(--muted); font-size:10px; }
.password-form input, .invite-form input, .invite-form select, .access-select, .invite-result input { height:39px; padding:0 11px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:var(--surface-solid); outline:none; }

.auth-screen { min-height:100vh; display:grid; grid-template-columns:minmax(320px,1.1fr) minmax(380px,.9fr); background:var(--bg); }
.auth-visual { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:100vh; padding:clamp(34px,6vw,88px); overflow:hidden; color:white; background:radial-gradient(circle at 78% 18%,rgba(255,255,255,.18),transparent 22rem),linear-gradient(145deg,#2d2459,#7554e4 58%,#4b9dd4); }
.auth-visual::after { content:""; position:absolute; right:-12%; bottom:-17%; width:48vw; aspect-ratio:1; border:1px solid rgba(255,255,255,.24); border-radius:50%; box-shadow:0 0 0 70px rgba(255,255,255,.035),0 0 0 150px rgba(255,255,255,.025); }
.auth-brand { position:relative; z-index:1; display:flex; align-items:center; gap:12px; font-weight:750; }
.auth-visual > div { position:relative; z-index:1; }
.auth-visual .eyebrow { display:block; color:#dfd7ff; letter-spacing:.08em; text-transform:uppercase; }
.auth-visual h1 { max-width:760px; margin:15px 0 18px; font-size:clamp(38px,5vw,72px); line-height:1.02; letter-spacing:-.055em; }
.auth-visual p { max-width:640px; color:rgba(255,255,255,.8); font-size:clamp(14px,1.4vw,19px); line-height:1.65; }
.auth-points { display:flex; flex-wrap:wrap; gap:10px; }
.auth-points span { padding:9px 12px; border:1px solid rgba(255,255,255,.18); border-radius:99px; background:rgba(255,255,255,.08); font-size:10px; backdrop-filter:blur(8px); }
.auth-panel { display:grid; place-items:center; padding:30px; }
.auth-card { position:relative; width:min(440px,100%); padding:36px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 30px 90px rgba(27,22,61,.12); }
.auth-card .eyebrow { display:block; }
.auth-card h2 { margin:9px 0 8px; font-size:29px; letter-spacing:-.035em; }
.auth-note, .auth-security { color:var(--muted); font-size:11px; line-height:1.55; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:22px 0 16px; padding:4px; border-radius:9px; background:var(--purple-soft); }
.auth-tabs button { min-height:34px; border:0; border-radius:7px; color:var(--muted); background:transparent; cursor:pointer; }
.auth-tabs button.is-active { color:var(--text); background:var(--surface-solid); box-shadow:0 4px 12px rgba(28,23,57,.08); }
#authForm { display:grid; gap:15px; margin:20px 0 16px; }
#authForm label { display:grid; gap:7px; color:var(--muted); font-size:10px; }
#authForm input { height:44px; padding:0 13px; border:1px solid var(--line); border-radius:9px; color:var(--text); background:var(--surface-solid); outline:none; }
#authForm input:focus { border-color:var(--purple); box-shadow:0 0 0 3px var(--purple-soft); }
.auth-theme { position:absolute; top:20px; right:20px; display:flex; align-items:center; gap:6px; padding:0; border:0; color:var(--muted); background:none; font-size:9px; cursor:pointer; }
.auth-message { margin:14px 0 0; padding:11px 13px; border-radius:8px; color:var(--purple-dark); background:var(--purple-soft); font-size:11px; line-height:1.45; }

.admin-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.invite-form { display:grid; grid-template-columns:minmax(210px,1fr) 130px 150px auto; align-items:end; gap:12px; }
.invite-result { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; margin-top:16px; }
.invite-result small { grid-column:1 / -1; color:var(--muted); font-size:9px; }
.admin-users td:first-child strong, .admin-label { display:block; }
.admin-label { margin-top:4px; color:var(--purple); font-size:8px; font-weight:600; }
.access-select { min-width:130px; }
.admin-table { min-width:980px; }
.admin-table td { vertical-align:top; }
.admin-connection { display:grid; gap:4px; min-width:190px; }
.admin-connection small { color:var(--muted); line-height:1.35; }
.admin-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:180px; }
.admin-actions .table-action { white-space:nowrap; }
.text-negative.table-action { color:var(--negative); }

.toast { position: fixed; z-index: 50; right: 25px; bottom: 25px; padding: 12px 17px; border-radius: 9px; color: white; background: #252339; box-shadow: 0 10px 35px rgba(17,15,35,.22); font-size: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .25s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.loading-panel, .error-panel { min-height: 360px; display: grid; place-content: center; justify-items: center; text-align: center; }
.loading-panel h2, .error-panel h2 { margin: 18px 0 6px; font-size: 18px; }
.loading-panel p, .error-panel p, .empty-state { margin: 0; color: var(--muted); font-size: 12px; }
.error-panel .button { margin-top: 18px; }
.loading-spinner { width: 34px; height: 34px; border: 3px solid #e6e0ff; border-top-color: var(--purple); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mobile-bar, .sidebar-backdrop { display: none; }

@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dashboard-main, .inventory-layout { grid-template-columns: 1fr; }
  .dashboard-bottom { grid-template-columns: 1fr 1fr; }
  .dashboard-bottom .panel:last-child { grid-column: 1 / -1; }
  .finance-grid, .finance-overview { grid-template-columns:1fr; }
  .summary-strip--finance { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .economics-charts { grid-template-columns:1fr; }
  .page-header { flex-wrap:wrap; }
  .header-actions { width:100%; flex-wrap:wrap; }
}

@media (max-width: 960px) {
  .app-shell { display: block; }
  .mobile-bar { position: sticky; top: 0; z-index: 16; display: flex; align-items: center; gap: 9px; height: 60px; padding: 0 15px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.9); backdrop-filter: blur(14px); }
  .brand--mobile { padding: 0; font-size: 13px; }
  .brand--mobile .brand-mark { width: 30px; height: 30px; font-size: 11px; }
  .icon-button { width: 34px; height: 34px; padding: 0; background: white; }
  .sidebar { transform: translateX(-102%); transition: transform .25s ease; box-shadow: 15px 0 45px rgba(33,28,72,.14); }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 19; border: 0; background: rgba(19,18,32,.24); }
  .sidebar-backdrop.is-visible { display: block; }
  .main { padding: 20px 14px 30px; }
  .date-popover { left:0; right:auto; width:calc(100vw - 28px); }
  .calendar-months { grid-template-columns:1fr; }
  .calendar-month:nth-child(2) { display:none; }
  .page-header { display: grid; }
  .header-actions { overflow-x: auto; padding-bottom: 2px; }
  .date-control span { white-space: nowrap; }
  .sync-badge { display:none; }
  .popover { position:fixed; top:68px; left:14px; right:14px; width:auto; }
  .date-fields { grid-template-columns:1fr; }
  .date-fields > span { display:none; }
  .metric-grid, .dashboard-bottom, .summary-strip { grid-template-columns: 1fr; }
  .summary-strip--finance { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-bottom .panel:last-child { grid-column: auto; }
  .summary-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .summary-item:last-child { border-bottom: 0; }
  .donut-layout { grid-template-columns: 1fr; justify-items: center; }
  .legend { width: 100%; grid-template-columns: repeat(3, 1fr); }
  .table-toolbar { align-items: stretch; flex-direction: column; }
  .search-box { min-width: 0; }
  .abc-group-grid, .settings-grid { grid-template-columns:1fr; }
  .integration-summary { grid-template-columns:1fr; }
  .finance-breakdown .finance-list { grid-template-columns:1fr; }
  .finance-chart-switch { width:100%; overflow-x:auto; }
  .chart-frame { min-height:200px; }
  .chart-canvas, .dashboard-main .chart-canvas, .finance-chart .chart-canvas { height:auto; min-height:220px; max-height:300px; }
  .chart-x-axis { font-size:9px; }
  .data-source-banner { align-items:flex-start; flex-direction:column; }
  .warehouse-chips { flex-wrap:wrap; }
  .auth-screen { grid-template-columns:1fr; }
  .auth-visual { min-height:330px; padding:34px 24px; }
  .auth-visual h1 { font-size:38px; }
  .auth-points { display:none; }
  .auth-panel { padding:18px; }
  .auth-card { padding:30px 22px; }
  .password-form, .invite-form { grid-template-columns:1fr; }
  .sync-stages { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (max-width: 460px) {
  .metric-value { font-size: 19px; }
  .economics { grid-template-columns: 1fr; justify-items: center; }
  .economics-list { width: 100%; }
  .legend { grid-template-columns: 1fr; }
  .header-actions .button--primary { display: none; }
  .token-input-row { grid-template-columns:1fr; }
  .summary-strip--finance { grid-template-columns:1fr; }
  .token-input-row .button--primary { display:inline-flex; }
  .finance-result { align-items:flex-start; }
  .finance-result .margin-donut { flex-basis:92px; width:92px; }
  .sync-wizard, .sync-wizard--waiting { padding:18px; }
  .sync-stages { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* WibeAnal 3.0 — unified SaaS polish layer */
html { scroll-behavior:smooth; }
body { min-height:100vh; font-feature-settings:"kern" 1,"liga" 1; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection { color:#fff; background:rgba(111,79,232,.82); }
button, a, select, input { -webkit-tap-highlight-color:transparent; }
button:not(:disabled), select:not(:disabled), [role="button"] { cursor:pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline:2px solid transparent; box-shadow:var(--focus-ring); }
button:disabled { cursor:not-allowed; }

.app-shell { grid-template-columns:238px minmax(0,1fr); }
.sidebar { width:238px; padding:22px 15px 18px; background:rgba(255,255,255,.88); box-shadow:1px 0 0 rgba(255,255,255,.5); }
.main { grid-column:2; padding-top:27px; }
.brand-button { width:100%; border:0; color:var(--text); background:transparent; text-align:left; }
.brand { min-height:48px; gap:11px; padding:0 10px 25px; font-size:14px; }
.brand-mark { position:relative; width:38px; height:38px; border-radius:12px; background:linear-gradient(145deg,#9b7cff 0%,#7150ec 55%,#5139ca 100%); box-shadow:0 9px 24px rgba(92,61,205,.28),inset 0 1px 0 rgba(255,255,255,.32); font-size:16px; font-weight:850; letter-spacing:-.08em; }
.brand-mark::after { content:""; position:absolute; right:-2px; top:-2px; width:8px; height:8px; border:2px solid var(--surface-solid); border-radius:50%; background:#5fd8b3; }
.brand-wordmark { white-space:nowrap; font-size:14px; font-weight:760; letter-spacing:-.03em; }
.brand-wordmark b { margin-left:3px; padding:2px 5px; border-radius:99px; color:var(--purple-dark); background:var(--purple-soft); font-size:8px; font-weight:800; letter-spacing:.04em; vertical-align:2px; }
.brand-button:hover .brand-wordmark { color:var(--purple-dark); }

.nav { gap:4px; }
.nav-item { min-height:42px; padding:10px 11px; border-radius:10px; color:#5d6378; font-size:12px; font-weight:520; transform:none; transition:color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease; }
.nav-item svg { width:17px; height:17px; transition:transform .18s ease; }
.nav-item:hover { color:var(--purple-dark); background:rgba(111,79,232,.07); transform:translateX(2px); }
.nav-item:hover svg { transform:scale(1.06); }
.nav-item.is-active { color:var(--purple-dark); background:linear-gradient(90deg,rgba(111,79,232,.14),rgba(111,79,232,.07)); box-shadow:inset 3px 0 0 var(--purple); font-weight:680; }
.sidebar-user { font-size:10px; }
.sidebar-user button:hover { color:var(--purple-dark); border-color:rgba(111,79,232,.35); background:var(--purple-soft); }

.page-header { min-height:54px; margin-bottom:23px; }
.page-header h1 { font-weight:760; letter-spacing:-.045em; }
.header-actions { gap:8px; }
.control, .button, .icon-button, .table-action { border-color:var(--line); border-radius:var(--radius-sm); color:var(--text); background:var(--surface); box-shadow:0 1px 2px rgba(27,22,61,.025); font-weight:570; transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease; }
.control:hover, .button:hover, .table-action:hover, .icon-button:hover { border-color:rgba(111,79,232,.36); background:var(--surface-raised); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.control:active, .button:active, .table-action:active, .icon-button:active { transform:translateY(0) scale(.985); }
.button--primary { color:#fff; border-color:transparent; background:linear-gradient(135deg,#8366f3 0%,#6746dc 62%,#5737ca 100%); box-shadow:0 8px 20px rgba(92,61,205,.24),inset 0 1px 0 rgba(255,255,255,.22); }
.button--primary:hover { color:#fff; border-color:transparent; background:linear-gradient(135deg,#8e73f5,#6848df 62%,#5737ca); box-shadow:0 11px 26px rgba(92,61,205,.3); }
.button--ghost { color:var(--purple-dark); background:var(--purple-soft); }
.sync-badge { border:1px solid rgba(53,168,108,.12); }

.popover, .column-settings { border-color:var(--line); border-radius:var(--radius-lg); background:var(--surface-raised); box-shadow:var(--shadow-lg); backdrop-filter:blur(20px); }
.date-popover { padding:20px; }
.calendar-months { gap:28px; }
.calendar-day { border-radius:9px; font-size:10.5px; transition:color .14s ease,background .14s ease,transform .14s ease; }
.calendar-day:hover { transform:translateY(-1px); }
.calendar-day.is-in-range { color:var(--purple-dark); background:rgba(111,79,232,.13); }
.calendar-day.is-start,.calendar-day.is-end { background:linear-gradient(135deg,#8d6ff2,#6746dc); box-shadow:0 7px 16px rgba(92,61,205,.26); }
.date-presets button, .calendar-nav button { border-color:var(--line); background:var(--surface-muted); }

.page { gap:17px; animation:page-in .3s cubic-bezier(.22,.8,.3,1); }
.metric-card, .panel, .summary-strip { border-color:var(--line); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow); }
.metric-card { min-height:136px; padding:20px 21px 15px; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.metric-card:hover { border-color:rgba(111,79,232,.22); box-shadow:0 14px 38px rgba(35,27,78,.08); transform:translateY(-2px); }
.metric-label { color:var(--muted); font-size:11.5px; font-weight:560; }
.metric-value { color:var(--text); font-weight:770; font-variant-numeric:tabular-nums; }
.metric-change { font-variant-numeric:tabular-nums; }
.metric-spark { opacity:.95; }
.panel { padding:22px 23px; }
.panel-title { font-size:15px; font-weight:730; letter-spacing:-.025em; }
.panel-subtitle { color:var(--muted); font-size:10.5px; }
.panel-link { border-radius:6px; transition:gap .18s ease,color .18s ease; }
.panel-link:hover { gap:9px; color:var(--purple-dark); }

.summary-strip { overflow:hidden; }
.summary-item { min-width:0; }
.summary-item span { color:var(--muted); font-weight:550; }
.summary-item strong { font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.info-banner { border-color:rgba(111,79,232,.2); border-radius:var(--radius-md); color:var(--muted); background:linear-gradient(100deg,rgba(111,79,232,.055),rgba(255,255,255,.82)); box-shadow:0 4px 16px rgba(35,27,78,.025); line-height:1.5; }
.segmented { border:1px solid rgba(0,0,0,.02); border-radius:10px; background:var(--surface-muted); }
.segmented button { color:var(--muted); font-weight:560; transition:background .16s ease,color .16s ease,box-shadow .16s ease; }
.segmented button:hover:not(.is-active) { color:var(--text); background:rgba(111,79,232,.07); }
.segmented button.is-active { color:var(--text); background:var(--surface-raised); box-shadow:0 3px 10px rgba(35,27,78,.08); font-weight:680; }

.chart-frame { max-width:none; }
.chart-canvas { isolation:isolate; }
.line-chart .gridline { stroke:var(--line); stroke-dasharray:3 4; opacity:.8; }
.line-chart .axis { stroke:var(--line-strong); }
.line-chart .series-area { opacity:0; stroke:none; animation:chart-area-in .75s .18s ease forwards; }
.line-chart .series { stroke-width:2.35; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 4px 5px rgba(70,51,150,.12)); stroke-dasharray:none; stroke-dashoffset:0; animation:chart-line-in .38s ease both; }
.line-chart .point { stroke:var(--surface-solid); stroke-width:1.8; transition:r .15s ease,opacity .15s ease; }
.line-chart.is-dense .point { opacity:0; }
.line-chart.is-dense .chart-point:hover .point,.line-chart.is-dense .chart-point:focus .point,.line-chart.is-dense .chart-point.is-pinned .point { opacity:1; }
.chart-y-axis span,.chart-x-axis { color:var(--text-tertiary); font-size:9.5px; font-weight:540; font-variant-numeric:tabular-nums; }
.chart-tooltip { min-width:170px; padding:11px 13px; border-color:var(--line-strong); border-radius:11px; background:rgba(255,255,255,.96); box-shadow:0 16px 40px rgba(29,23,68,.17); backdrop-filter:blur(16px); }
.chart-tooltip strong { font-size:11px; }
.chart-tooltip span { margin-top:6px; color:var(--muted); font-size:10.5px; font-variant-numeric:tabular-nums; }
.chart-tooltip--global { position:fixed; z-index:10001; transform:none; }
@keyframes chart-line-in { from { opacity:0; } to { opacity:1; } }
@keyframes chart-area-in { to { opacity:1; } }

.donut,.margin-donut,.expense-donut { filter:drop-shadow(0 9px 16px rgba(47,36,96,.1)); }
.donut::before,.margin-donut::before,.expense-donut::before { background:var(--surface-solid); box-shadow:inset 0 0 0 1px var(--line); }
.legend-item { color:var(--muted); font-size:10.5px; }
.legend-item strong { font-variant-numeric:tabular-nums; }
.dashboard-main .legend-item:nth-child(3) { display:none; }
.finance-result { background:linear-gradient(135deg,var(--surface-raised),rgba(111,79,232,.07)); }

.table-panel { padding:0; overflow:hidden; }
.table-panel > .table-toolbar { padding:16px 18px; border-bottom:1px solid var(--line); }
.data-table-wrap { overscroll-behavior-inline:contain; scrollbar-color:rgba(111,79,232,.35) transparent; scrollbar-width:thin; }
.data-table-wrap::-webkit-scrollbar { height:9px; width:9px; }
.data-table-wrap::-webkit-scrollbar-thumb { border:2px solid transparent; border-radius:99px; background:rgba(111,79,232,.32); background-clip:padding-box; }
.data-table { font-size:10.5px; font-variant-numeric:tabular-nums; }
.data-table th { position:sticky; top:0; z-index:3; padding:11px 13px; color:var(--muted); border-bottom:1px solid var(--line); background:rgba(248,249,252,.95); backdrop-filter:blur(12px); font-size:9.5px; font-weight:680; letter-spacing:.005em; }
.data-table td { padding:12px 13px; color:#4c5266; border-color:var(--line); line-height:1.4; }
.data-table tbody tr { transition:background .15s ease,box-shadow .15s ease; }
.data-table tbody tr:hover { background:rgba(111,79,232,.035); box-shadow:inset 3px 0 0 rgba(111,79,232,.32); }
.data-table.is-compact { font-size:10px; }
.data-table.is-compact th,.data-table.is-compact td { padding-top:8px; padding-bottom:8px; }
.abc-table th:nth-child(2),.abc-table td:nth-child(2) { max-width:82px; }
.abc-table th:nth-child(3),.abc-table td:nth-child(3) { width:92px; max-width:92px; overflow:hidden; text-overflow:ellipsis; }
.product { min-width:225px; gap:10px; }
.product-copy { min-width:0; }
.product-name { display:block; max-width:270px; overflow:hidden; color:var(--text); font-weight:640; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.product-identifiers { display:flex !important; flex-wrap:wrap; gap:4px 8px; margin-top:5px !important; color:var(--text-tertiary) !important; font-size:9px !important; line-height:1.2; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.product-identifiers span { white-space:nowrap; }
.product-link:hover .product-name { color:var(--purple-dark); text-decoration:none; }
.product-thumb { width:34px; height:40px; border:1px solid rgba(111,79,232,.09); border-radius:9px; background:linear-gradient(145deg,var(--purple-soft),var(--surface-muted)); box-shadow:0 3px 9px rgba(30,25,70,.06); }
.sortable { color:inherit; font-weight:inherit; }
.sortable:hover { color:var(--purple-dark); }
.column-title { min-height:18px; gap:6px; }
.info-tip { width:18px; height:18px; border-color:var(--line-strong); color:var(--text-tertiary); background:var(--surface-raised); font-size:9px; line-height:1; vertical-align:middle; transition:border-color .15s ease,color .15s ease,background .15s ease; }
.info-tip > span { display:flex; align-items:center; justify-content:center; width:100%; height:100%; line-height:1; text-align:center; transform:none; }
.info-tip:hover,.info-tip:focus { color:#fff; border-color:var(--purple); background:var(--purple); }
.info-tip::before,.info-tip::after { content:none; }
.global-info-tooltip { position:fixed; z-index:10000; width:max-content; max-width:min(280px,calc(100vw - 24px)); padding:11px 13px; border:1px solid rgba(255,255,255,.12); border-radius:10px; color:#fff; background:#25233b; box-shadow:0 16px 38px rgba(18,15,41,.3); font-size:10.5px; font-weight:500; line-height:1.5; overflow-wrap:anywhere; pointer-events:none; }
.global-info-tooltip[hidden] { display:none; }
.global-info-tooltip::after { content:""; position:absolute; left:var(--tooltip-arrow-x,50%); width:9px; height:9px; background:inherit; border:inherit; transform:translateX(-50%) rotate(45deg); }
.global-info-tooltip[data-placement="top"]::after { bottom:-5px; border-left:0; border-top:0; }
.global-info-tooltip[data-placement="bottom"]::after { top:-5px; border-right:0; border-bottom:0; }
.table-action { min-height:34px; padding:0 11px; font-size:10.5px; }
.filter-chip,.tab { font-weight:570; }
.warehouse-chips span { border:1px solid rgba(111,79,232,.08); }
.empty-table-row:hover { background:transparent !important; box-shadow:none !important; }
.empty-table-row td { height:220px; text-align:center; }
.empty-state { display:grid; justify-items:center; gap:7px; color:var(--muted); }
.empty-state__icon { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; color:var(--purple); background:var(--purple-soft); font-size:23px; }
.empty-state strong { color:var(--text); font-size:12px; }
.empty-state small { font-size:10px; font-weight:450; }

.system-page { display:grid; gap:16px; }
.system-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:4px 2px; }
.system-toolbar > div { display:grid; gap:4px; }
.system-toolbar span { color:var(--muted); font-size:10.5px; }
.system-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.system-metric { position:relative; display:grid; min-height:112px; align-content:center; gap:7px; padding:17px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); box-shadow:var(--shadow-sm); }
.system-metric::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--metric-color,var(--purple)); }
.system-metric--purple { --metric-color:#7457e8; }
.system-metric--blue { --metric-color:#438fe1; }
.system-metric--green { --metric-color:#45ad7c; }
.system-metric--orange { --metric-color:#ed9958; }
.system-metric span,.system-metric small { color:var(--muted); font-size:9.5px; }
.system-metric strong { color:var(--text); font-size:18px; font-variant-numeric:tabular-nums; }
.system-two-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.system-services { display:grid; gap:2px; }
.system-service { display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line); }
.system-service:last-child { border-bottom:0; }
.system-service div { display:grid; gap:3px; }
.system-service small { color:var(--muted); font-size:9.5px; }
.system-service b { color:var(--muted); font-size:9px; }
.system-dot { width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px color-mix(in srgb,var(--orange) 12%,transparent); }
.system-dot.is-ok { background:var(--green); box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 12%,transparent); }
.system-dot.is-error { background:#da5364; box-shadow:0 0 0 4px rgba(218,83,100,.12); }
.security-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.security-check { display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:7px; min-height:39px; padding:7px 9px; border:1px solid var(--line); border-radius:9px; color:var(--muted); font-size:9.5px; }
.security-check b { display:grid; place-items:center; width:20px; height:20px; border-radius:7px; color:#237652; background:var(--green-soft); }
.security-check strong { color:var(--text); }
.security-check strong { min-width:0; overflow-wrap:anywhere; text-align:right; }
.security-check.is-error { border-color:rgba(218,83,100,.28); }
.security-check.is-error b { color:#a52d40; background:rgba(218,83,100,.12); }
.system-api-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.system-api-summary div { display:grid; gap:5px; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--surface-muted); }
.system-api-summary span { color:var(--muted); font-size:9.5px; }
.system-api-summary strong { font-size:17px; font-variant-numeric:tabular-nums; }
.system-sql-table { min-width:900px; }
.system-sql-table .sql-statement { display:block; width:min(42vw,650px); overflow:hidden; color:var(--muted); font:9px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; text-overflow:ellipsis; white-space:nowrap; }

.abc-group-grid { gap:12px; }
.abc-group-grid--combined { grid-template-columns:repeat(3,minmax(0,1fr)); }
.abc-group-card { width:100%; min-height:104px; padding:16px 17px; border-color:var(--line); border-radius:var(--radius-md); color:var(--text); background:var(--surface); box-shadow:var(--shadow-sm); text-align:left; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.abc-group-card:hover { border-color:rgba(111,79,232,.38); box-shadow:0 11px 28px rgba(35,27,78,.09); transform:translateY(-2px); }
.abc-group-card.is-active { border-color:var(--purple); background:linear-gradient(135deg,var(--surface-raised),var(--purple-soft)); box-shadow:var(--focus-ring),var(--shadow-sm); }
.abc-group-card strong { font-size:18px; font-variant-numeric:tabular-nums; }
.abc-letter { width:38px; height:38px; box-shadow:0 6px 14px color-mix(in srgb,var(--letter-color) 28%,transparent); font-style:normal; }

.loading-panel,.error-panel { min-height:430px; border-style:dashed; background:linear-gradient(145deg,var(--surface),rgba(111,79,232,.025)); }
.loading-orbit { position:relative; display:grid; place-items:center; width:54px; height:54px; border-radius:17px; color:#fff; background:linear-gradient(145deg,#9275f5,#6041d2); box-shadow:0 12px 28px rgba(92,61,205,.25); font-size:19px; font-weight:820; }
.loading-orbit::before { content:""; position:absolute; inset:-9px; border:2px solid transparent; border-top-color:var(--purple); border-right-color:rgba(111,79,232,.28); border-radius:50%; animation:spin .9s linear infinite; }
.loading-lines { display:flex; gap:6px; margin-top:20px; }
.loading-lines i { width:28px; height:4px; border-radius:99px; background:var(--line); animation:loading-pulse 1.2s ease-in-out infinite; }
.loading-lines i:nth-child(2) { animation-delay:.14s; }
.loading-lines i:nth-child(3) { animation-delay:.28s; }
@keyframes loading-pulse { 50% { background:var(--purple); transform:scaleX(.75); } }
.error-state-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; color:#fff; background:linear-gradient(145deg,#ee7180,#bd3f52); box-shadow:0 11px 25px rgba(190,63,82,.22); font-size:20px; font-weight:800; }

.toast { display:flex; align-items:center; gap:9px; min-height:44px; padding:0 16px; border:1px solid rgba(255,255,255,.1); border-radius:11px; background:#26243c; box-shadow:0 16px 42px rgba(17,15,35,.28); font-weight:580; }
.toast::before { content:"✓"; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; color:#123f2f; background:#7ce0b4; font-size:11px; font-weight:850; }
.toast.is-error { background:#7e2938; }
.toast.is-error::before { content:"!"; color:#7e2938; background:#ffd5da; }

.auth-visual { background:radial-gradient(circle at 78% 18%,rgba(255,255,255,.2),transparent 22rem),radial-gradient(circle at 18% 82%,rgba(93,217,184,.16),transparent 20rem),linear-gradient(145deg,#211a46,#704fe0 58%,#3f8ec7); }
.auth-visual h1 { max-width:800px; font-weight:780; }
.auth-card { border-radius:var(--radius-xl); box-shadow:0 30px 90px rgba(27,22,61,.14); }
.auth-tabs,.auth-card input { border-radius:10px; }

:root[data-theme="dark"] .sidebar { background:rgba(18,21,37,.9); box-shadow:1px 0 0 rgba(255,255,255,.02); }
:root[data-theme="dark"] .brand-wordmark b { color:#d8d0ff; background:#302b59; }
:root[data-theme="dark"] .nav-item { color:#b3b9cc; }
:root[data-theme="dark"] .nav-item:hover { color:#e4dfff; background:rgba(154,130,255,.1); }
:root[data-theme="dark"] .nav-item.is-active { color:#e4dfff; background:linear-gradient(90deg,rgba(154,130,255,.2),rgba(154,130,255,.08)); box-shadow:inset 3px 0 0 var(--purple); }
:root[data-theme="dark"] .control,
:root[data-theme="dark"] .button,
:root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] .table-action,
:root[data-theme="dark"] .search-box,
:root[data-theme="dark"] .select-control,
:root[data-theme="dark"] .selection-control select,
:root[data-theme="dark"] .page-size-control select { color:#f3f4fa; border-color:var(--line-strong); background:var(--surface-raised); }
:root[data-theme="dark"] .control:hover,
:root[data-theme="dark"] .button:hover,
:root[data-theme="dark"] .table-action:hover { color:#fff; border-color:#7665c9; background:#2b304b; }
:root[data-theme="dark"] .button--primary { color:#fff; border-color:transparent; background:linear-gradient(135deg,#9278f6,#6c4ce2); }
:root[data-theme="dark"] .info-banner { color:#c1c6d6; background:linear-gradient(100deg,rgba(154,130,255,.12),rgba(24,27,47,.9)); }
:root[data-theme="dark"] .segmented { border-color:#333950; background:#1d2135; }
:root[data-theme="dark"] .segmented button { color:#b5bbce; }
:root[data-theme="dark"] .segmented button:hover:not(.is-active) { color:#fff; background:rgba(154,130,255,.11); }
:root[data-theme="dark"] .segmented button.is-active { color:#fff; background:#363c59; }
:root[data-theme="dark"] .data-table th { color:#b7bdcf; border-color:#363c55; background:rgba(28,32,52,.96); }
:root[data-theme="dark"] .data-table td { color:#d1d5e2; border-color:#2f354c; }
:root[data-theme="dark"] .data-table tbody tr:hover { background:rgba(154,130,255,.07); }
:root[data-theme="dark"] .product-name { color:#f2f3f8; }
:root[data-theme="dark"] .product-identifiers { color:#9da5ba !important; }
:root[data-theme="dark"] .chart-tooltip { color:#f4f5fb; border-color:#4b526e; background:rgba(27,31,50,.97); }
:root[data-theme="dark"] .line-chart .series { filter:drop-shadow(0 4px 6px rgba(0,0,0,.28)); }
:root[data-theme="dark"] .info-tip { color:#aeb5c9; border-color:#515974; background:#232840; }
:root[data-theme="dark"] .info-tip:hover,:root[data-theme="dark"] .info-tip:focus { color:#fff; border-color:var(--purple); background:var(--purple); }
:root[data-theme="dark"] .global-info-tooltip { color:#f5f6fb; border-color:#555d78; background:#101424; box-shadow:0 18px 44px rgba(0,0,0,.48); }
:root[data-theme="dark"] .abc-group-card { color:var(--text); background:var(--surface); }
:root[data-theme="dark"] .abc-group-card.is-active { background:linear-gradient(135deg,#252942,#302b57); }
:root[data-theme="dark"] .finance-result { background:linear-gradient(135deg,#1c2035,#272344); }
:root[data-theme="dark"] .expense-donut::before { background:var(--surface-solid); }
:root[data-theme="dark"] .auth-card { background:#181b2f; }
:root[data-theme="dark"] .mobile-bar { background:rgba(15,17,32,.92); }
:root[data-theme="dark"] .empty-state__icon { color:#d9d2ff; background:#302b59; }
:root[data-theme="dark"] .system-metric,
:root[data-theme="dark"] .security-check { background:var(--surface); }
:root[data-theme="dark"] .system-api-summary div { background:var(--surface-muted); }

@media (max-width:1100px) {
  .app-shell { grid-template-columns:218px minmax(0,1fr); }
  .sidebar { width:218px; }
  .main { grid-column:2; }
  .abc-group-grid--combined { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .system-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:960px) {
  .app-shell { display:block; }
  .brand--mobile { width:auto; min-height:0; padding:0; }
  .brand--mobile .brand-wordmark { font-size:13px; }
  .main { padding:20px 14px 32px; }
  .page-header h1 { font-size:25px; }
  .metric-card { min-height:124px; }
  .abc-group-grid--combined { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .data-table { font-size:10px; }
  .product { min-width:190px; }
  .product-name { max-width:205px; }
  .system-toolbar { align-items:stretch; flex-direction:column; }
  .system-toolbar .button { align-self:flex-start; }
  .system-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .system-two-columns { grid-template-columns:1fr; }
}
@media (max-width:460px) {
  .abc-group-grid--combined { grid-template-columns:1fr; }
  .brand-wordmark b { display:none; }
  .panel { padding:18px; }
  .table-panel { padding:0; }
  .system-metrics,.security-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}