:root{
  --brand-primary:#1B3A0E;
  --brand-secondary:#2D5016;
  --brand-accent:#8CB34D;
  --brand-text:#251715;
  --brand-cream:#F7F4EE;
  --brand-sand:#E8E2D6;
  --brand-white:#FFFFFF;
  --brand-dark:#1A1A1A;
  --brand-warm:#C4A46C;
  --brand-red:#9D3C2F;
  --brand-ok:#3F6A22;
  --brand-muted:#7B7168;
  --shadow-soft:0 12px 32px rgba(27,58,14,.08);
  --shadow-strong:0 24px 60px rgba(26,26,26,.18);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--brand-dark);
  background:
    radial-gradient(circle at top right, rgba(140,179,77,.10), transparent 24%),
    linear-gradient(180deg, #fbfaf7 0%, var(--brand-cream) 100%);
}

button,input,select{font:inherit}
button{border:none;background:none}

.app-shell{min-height:100vh}

.hdr{
  background:linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  color:var(--brand-white);
  padding:20px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  border-bottom:3px solid var(--brand-accent);
  box-shadow:var(--shadow-soft);
}
.brand{display:flex;align-items:center;gap:14px;min-width:260px;flex:1}
.brand-mark{
  width:48px;height:48px;border-radius:8px;
  display:grid;place-items:center;flex-shrink:0;
  background:rgba(247,244,238,.08);
  border:1px solid rgba(140,179,77,.35);
}
.brand-copy{display:flex;flex-direction:column;gap:2px}
.brand-kicker{
  font-size:.64rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:rgba(247,244,238,.74);
}
.hdr-title{
  font-size:1.45rem;
  line-height:1.05;
  font-weight:700;
}
.hdr-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.month-box{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:8px;
  background:rgba(247,244,238,.08);
  border:1px solid rgba(140,179,77,.28);
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.month-box:focus-within{
  border-color:rgba(140,179,77,.75);
  box-shadow:0 0 0 3px rgba(140,179,77,.16);
  background:rgba(247,244,238,.12);
}
.month-box label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(247,244,238,.76);
}
.month-box select{
  background:transparent;color:var(--brand-white);outline:none;cursor:pointer;
  border:none;
  box-shadow:none;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23F7F4EE' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right center;
}
.month-box select option{background:var(--brand-white);color:var(--brand-dark)}

.nav{
  display:flex;gap:4px;overflow-x:auto;
  padding:0 18px;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--brand-sand);
}
.nav-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 16px;
  font-size:.82rem;font-weight:600;color:var(--brand-muted);
  border-bottom:2px solid transparent;
  white-space:nowrap;cursor:pointer;
}
.nav-btn:hover{color:var(--brand-primary)}
.nav-btn.on{color:var(--brand-primary);border-bottom-color:var(--brand-accent)}

.page{max-width:1200px;margin:0 auto;padding:24px}
.panel-shell{display:flex;flex-direction:column;gap:18px}

.toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.toolbar-title{display:flex;flex-direction:column;gap:4px}
.toolbar-title h2{
  font-size:1.3rem;font-weight:700;color:var(--brand-primary);
}
.toolbar-title p{font-size:.88rem;color:var(--brand-muted)}
.toolbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.input-wrap{
  display:flex;align-items:center;gap:8px;
  min-width:220px;
  padding:0 12px;
  background:rgba(255,255,255,.9);
  border:1px solid var(--brand-sand);
  border-radius:8px;
  box-shadow:none;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.input-wrap:hover{
  background:rgba(255,255,255,.96);
}
.input-wrap:focus-within{
  border-color:rgba(140,179,77,.9);
  box-shadow:0 0 0 3px rgba(140,179,77,.14);
  background:var(--brand-white);
}
.input-wrap input,.input-wrap select{
  width:100%;
  background:transparent;
  outline:none;
  border:none;
  box-shadow:none;
  padding:10px 0;
  color:var(--brand-dark);
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}
.input-wrap input:focus,.input-wrap select:focus,
.month-box select:focus,
.mf input:focus,.mf select:focus,.mf textarea:focus{
  outline:none;
}
.input-wrap select{
  padding-right:18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%237B7168' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right center;
}
.input-wrap input::placeholder{
  color:#9a9086;
}
.input-wrap svg{width:16px;height:16px;stroke:var(--brand-muted)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:8px;
  cursor:pointer;font-size:.82rem;font-weight:700;
  transition:.18s ease;
}
.btn svg{width:16px;height:16px;stroke:currentColor}
.btn-primary{background:var(--brand-secondary);color:var(--brand-white)}
.btn-primary:hover{background:var(--brand-primary)}
.btn-secondary{background:#fbf9f4;color:var(--brand-text);border:1px solid var(--brand-sand)}
.btn-secondary:hover{background:#f2ede4}
.btn-accent{background:var(--brand-accent);color:var(--brand-primary)}
.btn-accent:hover{background:#98bf59}
.btn-danger{background:#f8e3df;color:var(--brand-red);border:1px solid rgba(157,60,47,.15)}
.btn-danger:hover{background:#f4d8d2}

.grid-2,.grid-3,.grid-4{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}

.card{
  background:rgba(255,255,255,.92);
  border:1px solid var(--brand-sand);
  border-radius:8px;
  padding:20px;
  box-shadow:var(--shadow-soft);
}
.kpi{
  background:linear-gradient(180deg, rgba(247,244,238,.92) 0%, rgba(255,255,255,.96) 100%);
  min-height:132px;
}
.kpi-label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--brand-muted);
}
.kpi-value{
  margin-top:14px;
  font-size:1.9rem;
  font-weight:700;
  line-height:1;
}
.kpi-note{
  margin-top:10px;
  font-size:.82rem;
  color:var(--brand-muted);
}
.kpi-positive{color:var(--brand-ok)}
.kpi-negative{color:var(--brand-red)}
.kpi-primary{color:var(--brand-primary)}
.kpi-warm{color:#8c6239}

.section-title{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:14px;
}
.section-title h3{font-size:1.12rem;font-weight:700;color:var(--brand-primary)}
.section-title p{font-size:.84rem;color:var(--brand-muted)}

.card-title{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:16px;
}
.card-title h4{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#8d8378;
}
.card-title .legend{font-size:.7rem;color:var(--brand-muted)}
.chart-legend{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.chart-legend-item{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.chart-legend-swatch{
  width:10px;
  height:10px;
  border-radius:999px;
  flex-shrink:0;
}

.stack{display:flex;flex-direction:column;gap:12px}
.br{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid #f1ebdf;font-size:.84rem;
}
.br.sep{border-top:1px solid var(--brand-sand);border-bottom:none;margin-top:4px;padding-top:13px;font-weight:700}
.br.sm{font-size:.78rem;color:var(--brand-muted)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px}

.verdict{
  margin-top:14px;padding:12px 14px;border-radius:8px;font-size:.86rem;font-weight:700;text-align:center;
}
.verdict.ok{background:#edf5e1;color:var(--brand-primary)}
.verdict.warn{background:#faf1db;color:#7a5a18}
.verdict.bad{background:#f8e3df;color:var(--brand-red)}

.tip{
  margin-top:12px;padding:12px 14px;border-left:3px solid var(--brand-warm);
  background:#fbf6ea;border-radius:0 8px 8px 0;font-size:.8rem;color:#6a5330;line-height:1.6;
}

.info-strip{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 12px;border-radius:8px;
  background:#f4f8ec;border:1px solid rgba(140,179,77,.35);
  color:var(--brand-primary);font-size:.8rem;
}

.table-card{padding:0;overflow:hidden}
.table-scroll{overflow:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.82rem}
.tbl th{
  background:#fcfaf6;
  text-align:left;
  padding:10px 12px;
  font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;
  color:#8d8378;
  border-bottom:1px solid var(--brand-sand);
  white-space:nowrap;
}
.tbl td{
  padding:12px;
  border-bottom:1px solid #f1ebdf;
  color:#3a312e;
  vertical-align:middle;
}
.tbl tbody tr:hover td{background:#fbf9f4}
.tbl tfoot td{
  background:#fcfaf6;
  border-top:1px solid var(--brand-sand);
  font-weight:700;
}

.table-actions{display:flex;align-items:center;gap:6px}
.icon-btn{
  width:32px;height:32px;border-radius:8px;
  display:grid;place-items:center;cursor:pointer;color:var(--brand-muted);
  flex-shrink:0;
}
.icon-btn:hover{background:#f2ede4;color:var(--brand-primary)}
.icon-btn.danger:hover{background:#f9e3de;color:var(--brand-red)}
.icon-btn svg{width:16px;height:16px;stroke:currentColor}

.table-pagination{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-top:1px solid var(--brand-sand);
  background:#fcfaf6;
  flex-wrap:wrap;
}
.pagination-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  font-size:.8rem;
  color:var(--brand-muted);
}
.pagination-size{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.pagination-size select{
  border:1px solid var(--brand-sand);
  border-radius:8px;
  padding:8px 12px;
  background:var(--brand-white);
  color:var(--brand-text);
  outline:none;
}
.pagination-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.badge{
  display:inline-flex;align-items:center;
  padding:3px 10px;border-radius:999px;
  font-size:.72rem;font-weight:700;
  white-space:nowrap;
  line-height:1;
}
.badge-neutral{background:#f3efe6;color:#6b5137;border:1px solid #eadfc9}
.badge-ok{background:#edf5e1;color:var(--brand-primary)}
.badge-warn{background:#faf1db;color:#7a5a18}
.badge-bad{background:#f8e3df;color:var(--brand-red)}

.empty-state{
  min-height:180px;
  display:grid;place-items:center;
  border:1px dashed var(--brand-sand);
  border-radius:8px;
  background:rgba(255,255,255,.72);
  color:var(--brand-muted);
  text-align:center;
  padding:28px;
}

.chart-wrap{overflow:auto}

.top-customers{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #f1ebdf;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.top-customers-title{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:#8d8378;
  font-weight:700;
}
.top-customers-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.top-customer-row{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid #f1ebdf;
  border-radius:8px;
  background:#fcfaf6;
}
.top-customer-rank{
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#edf5e1;
  color:var(--brand-primary);
  font-size:.75rem;
  font-weight:700;
}
.top-customer-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.top-customer-copy strong{
  color:var(--brand-text);
  font-size:.84rem;
}
.top-customer-copy span{
  color:var(--brand-muted);
  font-size:.75rem;
}
.top-customer-value{
  color:var(--brand-primary);
  font-size:.82rem;
  font-weight:700;
  white-space:nowrap;
}
.top-customers-empty{
  padding:12px;
  border:1px dashed var(--brand-sand);
  border-radius:8px;
  color:var(--brand-muted);
  font-size:.8rem;
}

.overview-table tr{cursor:pointer}
.overview-table th,
.overview-table td{
  vertical-align:middle;
}
.overview-table .month-col,
.overview-table .month-cell{
  min-width:150px;
}
.overview-table .month-cell{
  white-space:normal;
  overflow-wrap:anywhere;
}
.overview-table .metric-col,
.overview-table .metric-cell,
.overview-table .badge-col,
.overview-table .badge-cell{
  white-space:nowrap;
}
.overview-table .badge-cell{
  min-width:98px;
}
.overview-section{
  display:grid;
  gap:16px;
}

.ov{
  position:fixed;inset:0;
  display:none;align-items:center;justify-content:center;
  padding:16px;background:rgba(26,26,26,.48);z-index:20;
}
.ov.show{display:flex}
.modal{
  width:min(100%, 460px);
  background:var(--brand-white);
  border-radius:8px;
  border:1px solid var(--brand-sand);
  box-shadow:var(--shadow-strong);
  overflow:hidden;
}
.m-hdr{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;
  background:linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
  color:var(--brand-white);
}
.m-hdr h3{font-size:1.05rem;font-weight:700}
.m-close{color:var(--brand-white);cursor:pointer}
.m-close svg{width:18px;height:18px;stroke:currentColor}
.m-body{padding:18px;background:var(--brand-cream)}
.dialog-copy{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.dialog-copy p{
  font-size:.9rem;
  line-height:1.65;
  color:#4f4540;
}
.dialog-copy strong{
  color:var(--brand-text);
}
.dialog-copy .dialog-note{
  font-size:.8rem;
  color:var(--brand-muted);
}
.dialog-icon{
  width:44px;
  height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#f8e3df;
  color:var(--brand-red);
  margin-bottom:14px;
}
.dialog-icon svg{
  width:20px;
  height:20px;
  stroke:currentColor;
}
.mf{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.mf label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--brand-muted);
  font-weight:600;
}
.mf input,.mf select,.mf textarea{
  width:100%;
  border:1px solid var(--brand-sand);
  border-radius:8px;
  padding:10px 12px;
  background:var(--brand-white);
  color:#312725;
  outline:none;
}
.field-with-action{
  display:flex;
  align-items:center;
  gap:8px;
}
.field-with-action select{
  flex:1;
}
.field-add-btn{
  border:1px solid var(--brand-sand);
  background:#fcfaf6;
}
.field-add-btn:hover{
  background:#edf5e1;
}
.btn:disabled,
.icon-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  pointer-events:none;
}
.mf select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%237B7168' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
.mf input:focus,.mf select:focus,.mf textarea:focus{
  border-color:var(--brand-accent);
  box-shadow:0 0 0 3px rgba(140,179,77,.15);
}
.mf textarea{min-height:88px;resize:vertical}
.m-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.form-error{
  margin-bottom:12px;
  padding:10px 12px;
  border-radius:8px;
  background:#f8e3df;
  color:var(--brand-red);
  font-size:.8rem;
}

.toast-region{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:30;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.toast{
  min-width:260px;max-width:360px;
  padding:12px 14px;border-radius:8px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--brand-sand);
  box-shadow:var(--shadow-soft);
  display:flex;gap:10px;align-items:flex-start;
}
.toast.ok{border-color:rgba(63,106,34,.22)}
.toast.error{border-color:rgba(157,60,47,.22)}
.toast-title{font-size:.82rem;font-weight:700;color:var(--brand-text)}
.toast-body{font-size:.78rem;color:var(--brand-muted);margin-top:3px}
.toast svg{width:18px;height:18px;stroke:currentColor;flex-shrink:0}
.toast.ok svg{color:var(--brand-ok)}
.toast.error svg{color:var(--brand-red)}

.loading-block{
  display:grid;gap:14px;
}
.skeleton{
  border-radius:8px;
  background:linear-gradient(90deg, #f0ebe2 25%, #f7f4ee 37%, #f0ebe2 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;
}
.skeleton.line{height:14px}
.skeleton.card{height:120px}
.skeleton.table{height:260px}

@keyframes shimmer{
  0%{background-position:100% 0}
  100%{background-position:0 0}
}

@media (max-width:900px){
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
}
@media (max-width:720px){
  .page{padding:18px}
  .hdr{padding:18px}
  .brand{min-width:100%}
  .toolbar,.section-title{align-items:stretch}
  .toolbar-actions{width:100%}
  .input-wrap{min-width:0;flex:1}
  .table-pagination{align-items:stretch}
  .top-customer-row{grid-template-columns:28px 1fr}
  .top-customer-value{grid-column:2}
}