:root {
  --page: #aeb4bd;
  --surface: #f8f8f2;
  --card: rgba(255,255,252,.82);
  --ink: #20211f;
  --muted: #7c7e78;
  --line: #e5e5dc;
  --accent: #ffd84f;
  --accent-soft: #fff2a3;
  --danger: #e66852;
  --attention: #e9b73d;
  --success: #6c9a68;
  --shadow: 0 28px 70px rgba(50,55,62,.23), 0 4px 16px rgba(50,55,62,.08);
  --radius-xl: 34px;
  --radius-lg: 24px;
  --radius-md: 16px;
  font-family: "Manrope", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--page); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 85% 12%, #cbd0d5 0, transparent 31%), var(--page); }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(255,216,79,.55); outline-offset: 2px; }

.app-stage { padding: 28px; min-height: 100vh; }
.dashboard-shell, .login-shell {
  position: relative; overflow: hidden; max-width: 1540px; min-height: calc(100vh - 56px); margin: 0 auto;
  padding: 24px 30px 20px; border: 1px solid rgba(255,255,255,.75); border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 88% 8%, rgba(255,238,142,.72), transparent 24%),
    radial-gradient(circle at 4% 93%, rgba(255,242,163,.48), transparent 22%),
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(248,248,242,.93));
  box-shadow: var(--shadow);
}
.dashboard-shell::before, .login-shell::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(32,33,31,.13) .55px, transparent .55px); background-size: 8px 8px;
  mask-image: linear-gradient(to bottom, black, transparent 28%);
}
.topbar, .hero-row, .filter-panel, .kpi-grid, .content-grid, .dashboard-footer { position: relative; z-index: 1; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand-mark { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 760; letter-spacing: -.02em; }
.brand-mark span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--ink); border-radius: 50%; font-size: 11px; }
.topnav { display: flex; align-items: center; gap: 5px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.5); }
.nav-pill { padding: 9px 16px; border-radius: 999px; font-size: 12px; color: var(--muted); }
.nav-pill.active { color: white; background: var(--ink); }
.icon-button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.72); font-size: 18px; transition: transform .2s, background .2s; }
.icon-button:hover { transform: rotate(45deg); background: white; }

.hero-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin: 40px 0 24px; }
.eyebrow { margin: 0 0 8px; color: var(--muted); font-size: 10px; font-weight: 760; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(38px, 4.2vw, 67px); line-height: .98; letter-spacing: -.065em; font-weight: 520; }
h1 span { color: #8c8d87; }
.hero-note { max-width: 660px; margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.live-stamp { display: grid; grid-template-columns: 10px auto; gap: 1px 9px; min-width: 190px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.7); border-radius: 17px; background: rgba(255,255,255,.48); backdrop-filter: blur(12px); }
.live-stamp i { grid-row: 1 / 3; align-self: center; width: 9px; height: 9px; border-radius: 50%; background: #7ab574; box-shadow: 0 0 0 5px rgba(122,181,116,.14); }
.live-stamp span { color: var(--muted); font-size: 10px; }
.live-stamp strong { font-size: 13px; font-weight: 700; }

.filter-panel { display: grid; grid-template-columns: minmax(150px,.65fr) minmax(220px,1.2fr) repeat(2,minmax(145px,.68fr)) auto; align-items: end; gap: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.76); border-radius: 22px; background: rgba(255,255,252,.62); box-shadow: 0 8px 28px rgba(50,55,62,.06); }
.field { display: grid; gap: 6px; }
.field > span { padding-left: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
.field input, .field select, .table-tools select, .search-box { min-height: 45px; border: 1px solid var(--line); border-radius: 12px; background: rgba(250,250,247,.88); color: var(--ink); }
.field input, .field select, .table-tools select { width: 100%; padding: 0 13px; }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 45px; padding: 0 20px; border: 0; border-radius: 13px; background: var(--ink); color: white; font-weight: 720; font-size: 13px; box-shadow: 0 7px 15px rgba(32,33,31,.16); transition: transform .18s, box-shadow .18s; }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 10px 21px rgba(32,33,31,.2); }
.primary-button:disabled { opacity: .58; cursor: wait; transform: none; }
.refresh-icon { font-size: 18px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)) 1.18fr; gap: 10px; margin-top: 12px; }
.kpi-card { min-height: 137px; padding: 18px; border: 1px solid rgba(255,255,255,.78); border-radius: var(--radius-lg); background: var(--card); box-shadow: 0 8px 25px rgba(50,55,62,.05); }
.kpi-card > span { display: block; min-height: 28px; color: var(--muted); font-size: 11px; }
.kpi-card > strong, .supply-value strong { display: block; margin: 7px 0 9px; font-size: clamp(23px,2.1vw,35px); line-height: 1; letter-spacing: -.045em; font-weight: 520; font-variant-numeric: tabular-nums; }
.kpi-card small { color: var(--muted); font-size: 10px; }
.kpi-card small b { color: inherit; font-weight: 650; }
.kpi-card .positive { color: #628d61; }
.kpi-dark { color: white; border-color: var(--ink); background: var(--ink); }
.kpi-dark > span, .kpi-dark small { color: #bdbeb8; }
.kpi-accent { background: linear-gradient(145deg, #ffe779, var(--accent)); }
.kpi-accent > span, .kpi-accent small { color: #5f5628; }
.supply-card { background: linear-gradient(145deg, rgba(255,255,252,.9), rgba(255,247,195,.72)); }
.supply-value { display: flex; align-items: baseline; gap: 7px; }
.supply-value strong { margin: 7px 0 11px; }
.supply-value em { color: var(--muted); font-size: 11px; font-style: normal; }
.supply-track { height: 6px; overflow: hidden; border-radius: 999px; background: #e8e6d8; }
.supply-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ink); transition: width .5s ease; }

.content-grid { display: grid; grid-template-columns: minmax(0,1fr) 270px; gap: 10px; margin-top: 12px; }
.table-card, .insight-card { border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius-lg); background: rgba(255,255,252,.74); box-shadow: 0 8px 25px rgba(50,55,62,.05); }
.table-card { min-width: 0; overflow: hidden; }
.table-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 18px 18px 14px; border-bottom: 1px solid var(--line); }
h2 { margin: 0; font-size: 20px; letter-spacing: -.035em; font-weight: 600; }
h2 span { margin-left: 8px; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.table-tools { display: flex; gap: 8px; }
.search-box { display: flex; align-items: center; gap: 8px; width: 210px; padding: 0 12px; }
.search-box span { color: var(--muted); font-size: 18px; }
.search-box input { width: 100%; border: 0; outline: none; background: transparent; font-size: 12px; }
.table-tools select { width: 145px; font-size: 11px; }
.table-wrap { overflow: auto; scrollbar-gutter: stable; scrollbar-color: #b7b7ae #efefe8; scrollbar-width: thin; }
.table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.table-wrap::-webkit-scrollbar-track { background: #efefe8; }
.table-wrap::-webkit-scrollbar-thumb { border: 2px solid #efefe8; border-radius: 999px; background: #b7b7ae; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
thead { position: sticky; top: 0; z-index: 2; background: #f5f5ef; }
th { padding: 12px 14px; color: var(--muted); font-size: 10px; text-align: left; font-weight: 700; white-space: nowrap; cursor: pointer; }
th:hover { color: var(--ink); }
td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
tbody tr { transition: background .15s; }
tbody tr:hover { background: rgba(255,239,142,.22); }
.numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-cell { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; min-width: 230px; }
.product-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #62635e; background: #eeeee7; font-size: 10px; font-weight: 750; }
.product-cell strong { display: -webkit-box; max-width: 390px; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.35; font-size: 12px; font-weight: 650; }
.product-cell small { color: #73756f; font-size: 10px; }
.qty-positive { color: #56835a; }
.qty-negative { color: var(--danger); font-weight: 700; }
.supply-badge { display: inline-flex; align-items: center; gap: 6px; min-width: 78px; justify-content: flex-end; }
.supply-badge i { width: 7px; height: 7px; border-radius: 50%; }
.supply-badge.critical i, .dot.critical { background: var(--danger); }
.supply-badge.attention i, .dot.attention { background: var(--attention); }
.supply-badge.stable i, .dot.stable { background: var(--success); }
.supply-badge.no-sales i, .supply-badge.empty i, .dot.muted { background: #babbb5; }
.supply-badge.deficit i { background: #a33d34; }

.insight-card { padding: 19px; background: linear-gradient(160deg, #2a2b28, #1f201e); color: white; }
.insight-top { display: flex; justify-content: space-between; align-items: start; }
.insight-top .eyebrow { color: #a9aaa4; }
.insight-top > span { color: #b8b9b4; font-size: 10px; }
.donut { display: grid; place-items: center; width: 164px; height: 164px; margin: 18px auto 24px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--value)*1%), #484944 0); position: relative; }
.donut::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: #242522; }
.donut div { position: relative; z-index: 1; text-align: center; }
.donut strong { display: block; font-size: 32px; font-weight: 500; letter-spacing: -.05em; }
.donut span { color: #aeb0aa; font-size: 9px; line-height: 1.25; }
.legend { display: grid; gap: 10px; }
.legend > div { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 9px; }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.legend span { color: #c4c5bf; font-size: 10px; }
.legend strong { font-size: 11px; font-weight: 650; }
.formula-note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #40413d; color: #b4b5af; font-size: 10px; line-height: 1.55; }
.formula-note b { color: #e1e2dc; }

.state-panel { margin: 14px 18px; padding: 14px 16px; border-radius: 14px; background: #f1f1eb; }
.state-panel strong, .state-panel span { display: block; }
.state-panel strong { margin-bottom: 3px; font-size: 12px; }
.state-panel span { color: var(--muted); font-size: 10px; }
.error-panel { background: #fff0eb; color: #963e32; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 16px; border-top: 1px solid var(--line); color: #73756f; font-size: 10px; }
.pagination > div { display: flex; align-items: center; gap: 9px; }
.pagination button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: white; }
.pagination button:disabled { opacity: .34; cursor: not-allowed; }
.pagination strong { min-width: 48px; text-align: center; color: var(--ink); font-size: 10px; }
.dashboard-footer { display: flex; justify-content: space-between; gap: 12px; padding: 13px 5px 0; color: #73756f; font-size: 10px; }

.loading-layer { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(142,148,157,.42); backdrop-filter: blur(8px); }
.loading-layer[hidden] { display: none; }
.loader-card { display: grid; justify-items: center; min-width: 280px; padding: 27px; border: 1px solid rgba(255,255,255,.78); border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.loader-card i { width: 38px; height: 38px; margin-bottom: 16px; border: 4px solid #e5e4da; border-top-color: var(--ink); border-radius: 50%; animation: spin .85s linear infinite; }
.loader-card strong { font-size: 14px; }
.loader-card span { margin-top: 5px; color: var(--muted); font-size: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }

.login-stage { min-height: 100vh; display: grid; place-items: center; padding: 28px; }
.login-shell { width: min(1080px, 100%); min-height: 630px; padding: 30px 38px; display: flex; flex-direction: column; justify-content: space-between; }
.login-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .8fr; align-items: center; gap: 80px; }
.login-copy h1 { font-size: clamp(48px, 6vw, 82px); }
.login-copy > p:last-child { max-width: 480px; color: var(--muted); line-height: 1.6; }
.login-card { padding: 28px; border: 1px solid rgba(255,255,255,.8); border-radius: 28px; background: rgba(255,255,252,.76); box-shadow: 0 20px 50px rgba(40,44,50,.11); backdrop-filter: blur(15px); }
.login-card h2 { margin-top: 28px; font-size: 25px; }
.login-card > p { margin: 7px 0 24px; color: var(--muted); font-size: 12px; }
.login-card label { display: block; margin: 0 0 7px 3px; color: var(--muted); font-size: 10px; }
.login-card input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 13px; background: white; }
.login-icon { display: grid; place-items: center; width: 42px; height: 42px; margin-left: auto; border-radius: 50%; color: white; background: var(--ink); font-size: 18px; }
.form-error { margin: 10px 0 0; padding: 10px 12px; border-radius: 11px; background: #fff0eb; color: #963e32; font-size: 11px; }
.wide { width: 100%; margin-top: 14px; }
.login-footer { position: relative; z-index: 1; color: var(--muted); font-size: 10px; }
.login-footer span { padding: 0 8px; }

@media (max-width: 1100px) {
  .kpi-grid { grid-template-columns: repeat(3,1fr); }
  .supply-card { grid-column: span 2; }
  .content-grid { grid-template-columns: 1fr; }
  .insight-card { display: grid; grid-template-columns: auto 180px 1fr; align-items: center; gap: 18px; }
  .insight-top { display: block; }
  .donut { width: 140px; height: 140px; margin: 0; }
  .formula-note { grid-column: 1 / -1; margin-top: 0; }
}
@media (max-width: 760px) {
  .app-stage, .login-stage { padding: 0; }
  .dashboard-shell, .login-shell { min-height: 100vh; padding: 18px 15px; border: 0; border-radius: 0; }
  .topnav { display: none; }
  .hero-row { align-items: start; margin-top: 30px; }
  .live-stamp { display: none; }
  .filter-panel { grid-template-columns: 1fr 1fr; }
  .region-field, .warehouse-field { grid-column: 1 / -1; }
  .primary-button { grid-column: 1 / -1; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .supply-card { grid-column: 1 / -1; }
  .kpi-card { min-height: 124px; padding: 15px; border-radius: 20px; }
  .table-head { align-items: stretch; flex-direction: column; }
  .table-tools { display: grid; grid-template-columns: 1fr 130px; }
  .search-box { width: auto; }
  .insight-card { display: block; }
  .donut { margin: 18px auto 24px; }
  .table-wrap { max-height: none; overflow: visible; padding: 0 10px 10px; }
  table, tbody { display: block; }
  thead { display: none; }
  tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.7); }
  td { display: flex; justify-content: space-between; gap: 10px; padding: 0; border: 0; text-align: right; }
  td::before { content: attr(data-label); color: var(--muted); font-size: 9px; }
  td:first-child { grid-column: 1 / -1; display: block; padding-bottom: 10px; border-bottom: 1px solid var(--line); text-align: left; }
  td:first-child::before { display: none; }
  .product-cell { min-width: 0; }
  .product-cell strong { white-space: normal; }
  .supply-badge { min-width: 0; }
  .dashboard-footer { flex-direction: column; }
  .login-grid { grid-template-columns: 1fr; gap: 28px; }
  .login-copy h1 { font-size: 52px; }
  .login-copy > p:last-child { display: none; }
  .login-shell { justify-content: flex-start; gap: 40px; }
}
@media (max-width: 430px) {
  h1 { font-size: 42px; }
  .hero-note { font-size: 12px; }
  .filter-panel { grid-template-columns: 1fr; }
  .region-field, .warehouse-field, .primary-button { grid-column: auto; }
  .kpi-grid { grid-template-columns: 1fr; }
  .supply-card { grid-column: auto; }
  .table-tools { grid-template-columns: 1fr; }
  .table-tools select { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}