:root {
  --ink: #17201c; --muted: #6c756f; --line: #dfe5e0; --panel: #fff;
  --canvas: #f3f5f1; --green: #176b4d; --green-2: #2d9570; --mint: #dceee6;
  --orange: #e99556; --red: #bc5c52; --shadow: 0 12px 35px rgba(34, 48, 40, .07);
}
* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--canvas); }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
.shell { min-height: 100vh; display: grid; grid-template-columns: 286px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 24px 20px; background: #fcfdfb; border-right: 1px solid var(--line); z-index: 20; }
.brand-mark { display: flex; align-items: center; gap: 12px; padding: 0 4px 28px; border-bottom: 1px solid var(--line); }
.brand-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: white; background: var(--green); font-size: 13px; font-weight: 800; letter-spacing: .06em; box-shadow: 0 7px 16px rgba(23,107,77,.24); }
.brand-mark strong, .brand-mark small { display: block; }.brand-mark strong { font-size: 17px; }.brand-mark small { margin-top: 2px; color: var(--muted); }
.filter-heading { display: flex; justify-content: space-between; align-items: center; padding: 24px 2px 14px; }.filter-heading h2 { margin: 3px 0 0; font-size: 22px; }
.eyebrow { color: var(--green); font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.field { display: block; margin-bottom: 12px; }.field > span { display: block; color: #626d66; font-size: 11px; font-weight: 700; margin: 0 0 6px; }
.field input, .field select { width: 100%; height: 38px; padding: 0 10px; color: var(--ink); background: #fff; border: 1px solid #dce2dd; border-radius: 8px; outline: none; transition: .18s; font-size: 12px; }
.field input:focus, .field select:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(45,149,112,.12); }
.search-field input { padding-left: 12px; }.date-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filter-section { border-top: 1px solid var(--line); padding-top: 4px; margin-top: 7px; }.section-title { width: 100%; border: 0; padding: 12px 2px 10px; background: none; display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; color: #344039; }
.section-fields.collapsed { display: none; }.filter-actions { position: sticky; bottom: -24px; display: grid; grid-template-columns: 1fr; gap: 8px; padding: 15px 0 22px; background: linear-gradient(transparent, #fcfdfb 15%, #fcfdfb); }
.button { border: 1px solid transparent; border-radius: 9px; height: 40px; padding: 0 16px; font-weight: 750; font-size: 12px; transition: transform .15s, background .15s; }.button:active { transform: scale(.98); }.button:disabled { opacity: .45; cursor: default; }
.button.primary { color: #fff; background: var(--green); }.button.primary:hover { background: #0f5a3f; }.button.ghost { background: #fff; border-color: var(--line); color: #435048; }.button.compact { height: 34px; padding: 0 12px; }
.data-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; line-height: 1.4; padding: 6px 2px; }.status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 0 4px var(--mint); }
.main { min-width: 0; padding: 28px 34px 18px; }.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }.title-row { display: flex; align-items: center; gap: 12px; }.topbar h1 { margin: 5px 0 0; font-family: Georgia, serif; font-size: clamp(28px, 3vw, 40px); font-weight: 500; letter-spacing: -.03em; }.top-actions { display: flex; align-items: center; gap: 10px; }
.period-pill { padding: 8px 12px; color: #486056; background: var(--mint); border-radius: 999px; font-size: 11px; font-weight: 750; white-space: nowrap; }.icon-button { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.active-filters { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; margin: -4px 0 15px; }.filter-chip { display: inline-flex; gap: 6px; align-items: center; padding: 5px 9px; background: #fff; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 10px; }.filter-chip b { color: var(--ink); }
.error-banner { margin-bottom: 14px; padding: 12px 14px; color: #842c24; background: #fbe7e4; border: 1px solid #f4c5bf; border-radius: 10px; font-size: 12px; }.hidden { display: none !important; }
.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(130px, 1fr)); gap: 12px; margin-bottom: 14px; }.kpi { min-height: 124px; padding: 17px; background: var(--panel); border: 1px solid rgba(214,222,216,.86); border-radius: 13px; box-shadow: 0 3px 15px rgba(34,48,40,.035); }.kpi-label { color: var(--muted); font-size: 11px; font-weight: 700; }.kpi-value { margin-top: 12px; font-family: Georgia, serif; font-size: clamp(22px, 2vw, 31px); line-height: 1; white-space: nowrap; }.kpi-foot { display: flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--muted); font-size: 9px; }.kpi-foot.good { color: var(--green); }.kpi-foot.warn { color: var(--red); }.mini-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.skeleton { background: linear-gradient(100deg, #fff 20%, #f1f4f1 40%, #fff 60%); background-size: 200% 100%; animation: shimmer 1.25s infinite; }@keyframes shimmer { to { background-position-x: -200%; } }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(330px, .85fr); gap: 14px; margin-bottom: 14px; }.panel { background: var(--panel); border: 1px solid rgba(214,222,216,.9); border-radius: 14px; box-shadow: var(--shadow); }.panel-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 19px; border-bottom: 1px solid #edf0ed; }.panel-head h3 { margin: 5px 0 0; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.segmented { display: flex; padding: 3px; background: #f1f4f1; border-radius: 8px; }.segmented button { height: 28px; padding: 0 10px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; font-size: 10px; font-weight: 700; }.segmented button.active { color: var(--green); background: #fff; box-shadow: 0 2px 7px rgba(34,48,40,.08); }
.clean-select { height: 34px; max-width: 170px; color: #425047; background: #f7f9f7; border: 1px solid var(--line); border-radius: 8px; padding: 0 9px; font-size: 11px; outline: none; }.chart-wrap { height: 295px; padding: 14px 15px 2px 8px; }.chart-wrap svg { width: 100%; height: 100%; overflow: visible; }.chart-grid { stroke: #e7ebe7; stroke-width: 1; }.chart-label { fill: #879087; font-size: 9px; }.chart-area { fill: url(#areaGradient); }.chart-line { fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }.stock-line { fill: none; stroke: var(--orange); stroke-width: 1.8; stroke-dasharray: 4 4; opacity: .85; }.chart-dot { fill: #fff; stroke: var(--green); stroke-width: 2; }.chart-legend { display: flex; gap: 18px; padding: 0 21px 16px; color: var(--muted); font-size: 10px; }.chart-legend span { display: flex; align-items: center; gap: 6px; }.chart-legend i { width: 16px; height: 2px; display: inline-block; }.legend-main { background: var(--green); }.legend-stock { border-top: 2px dashed var(--orange); }
.breakdown { height: 329px; overflow-y: auto; padding: 11px 18px; }.break-row { padding: 9px 0; border-bottom: 1px solid #f0f2f0; }.break-row:last-child { border-bottom: 0; }.break-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 10px; }.break-label strong { max-width: 68%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.break-label span { color: var(--muted); font-variant-numeric: tabular-nums; }.bar-track { height: 5px; background: #eef1ee; border-radius: 99px; overflow: hidden; }.bar { height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--green-2)); }
.loader { min-height: 100%; display: grid; place-items: center; color: var(--muted); font-size: 11px; }.empty { padding: 30px; text-align: center; color: var(--muted); font-size: 12px; }
.products-head { min-height: 72px; }.table-controls label { color: var(--muted); font-size: 10px; }.table-scroll { overflow-x: auto; }table { width: 100%; border-collapse: collapse; font-size: 11px; }th { padding: 10px 15px; color: #7c857e; background: #fafbfa; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; text-align: left; white-space: nowrap; }td { padding: 11px 15px; border-top: 1px solid #edf0ed; vertical-align: middle; }tbody tr.product-row { cursor: pointer; transition: background .15s; }tbody tr.product-row:hover { background: #f7faf8; }.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }.product-cell { display: flex; align-items: center; min-width: 280px; gap: 10px; }.thumb { width: 42px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: linear-gradient(145deg, #e7eee9, #f7f5ef); color: #9aa49d; }.thumb svg { width: 24px; height: 24px; opacity: .7; }.product-name { max-width: 390px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.product-code, .cell-sub { margin-top: 4px; color: var(--muted); font-size: 9px; }.margin-pill { display: inline-block; min-width: 49px; padding: 4px 7px; text-align: center; border-radius: 99px; color: var(--green); background: var(--mint); font-weight: 750; }.margin-pill.negative { color: #9b3e36; background: #f9e4e1; }.pagination { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
footer { display: flex; justify-content: space-between; padding: 18px 3px 0; color: #8c948e; font-size: 9px; }
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }.modal-backdrop { position: absolute; inset: 0; background: rgba(15,28,21,.48); backdrop-filter: blur(3px); }.modal-card { position: relative; width: min(980px, 96vw); max-height: 90vh; overflow: auto; background: #fff; border-radius: 17px; box-shadow: 0 28px 80px rgba(12,25,18,.27); }.modal-close { position: absolute; z-index: 2; right: 16px; top: 15px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #526058; background: #f0f3f0; font-size: 22px; }.detail-head { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 28px; border-bottom: 1px solid var(--line); }.detail-image { height: 175px; display: grid; place-items: center; border-radius: 13px; color: #91a097; background: linear-gradient(145deg, #e1ebe5, #f7f3ea); }.detail-image svg { width: 62px; height: 62px; opacity: .55; }.detail-head h2 { margin: 7px 45px 8px 0; font-family: Georgia, serif; font-size: 26px; font-weight: 500; }.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }.tag { padding: 5px 8px; border-radius: 6px; color: #536158; background: #f0f4f1; font-size: 10px; }.detail-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; padding: 22px 28px 28px; }.detail-grid h4 { margin: 0 0 12px; font-family: Georgia, serif; font-size: 17px; font-weight: 500; }.mini-chart { height: 230px; }.attributes { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; }.attribute { padding-bottom: 7px; border-bottom: 1px solid #eef1ee; }.attribute span { display: block; color: var(--muted); font-size: 9px; }.attribute b { display: block; margin-top: 3px; font-size: 11px; }.store-list { max-height: 220px; overflow: auto; }.store-line { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 0; border-bottom: 1px solid #eef1ee; font-size: 10px; }.store-line small { display: block; color: var(--muted); margin-top: 2px; }
.mobile-only { display: none; }
@media (max-width: 1260px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); }.dashboard-grid { grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); } }
@media (max-width: 960px) { .shell { grid-template-columns: 1fr; }.sidebar { position: fixed; left: 0; width: 286px; transform: translateX(-105%); transition: transform .25s; box-shadow: 12px 0 40px rgba(0,0,0,.15); }.sidebar.open { transform: translateX(0); }.mobile-only { display: block; }.main { padding: 22px 20px; }.dashboard-grid { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .main { padding: 18px 12px; }.topbar { align-items: flex-start; }.top-actions { flex-direction: column; align-items: flex-end; }.topbar h1 { font-size: 29px; }.kpi-grid { grid-template-columns: repeat(2, 1fr); }.kpi { min-height: 110px; padding: 14px; }.kpi-value { font-size: 23px; }.panel-head { align-items: flex-start; flex-direction: column; }.segmented { width: 100%; }.segmented button { flex: 1; }.chart-wrap { height: 245px; }.detail-head { grid-template-columns: 85px 1fr; padding: 20px; }.detail-image { height: 110px; }.detail-grid { grid-template-columns: 1fr; padding: 20px; }.products-head { flex-direction: row; }.period-pill { display: none; } }