:root{
  --bg:#f5f6f8;--panel:#fff;--text:#17191d;--muted:#6f7682;--line:#e3e7ed;
  --dark:#111827;--dark2:#1f2937;--soft:#eef2f7;--ok:#067647;--warn:#b54708;
  --bad:#b42318;--blue:#175cd3;--shadow:0 12px 34px rgba(15,23,42,.08);
  --radius:17px
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Tahoma,Arial,sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}.hidden{display:none!important}.mobile-only{display:none}
.muted{color:var(--muted)}.small{font-size:12px}.center{text-align:center}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 15% 12%,#e7ebf1,transparent 35%),var(--bg)}
.login-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:var(--shadow)}
.brand,.sidebar-brand{display:flex;align-items:center;gap:13px}.brand{margin-bottom:26px}.brand h1{margin:0;font-size:28px}.brand p{margin:5px 0 0;color:var(--muted);font-size:12px}
.brand-mark{width:52px;height:52px;border-radius:16px;background:var(--dark);color:#fff;display:grid;place-items:center;font-size:24px;font-weight:800}
.small-mark{width:39px;height:39px;border-radius:11px;font-size:18px}
label{display:block;font-size:12px;font-weight:700;margin-bottom:14px}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:11px;background:#fff;padding:11px 12px;outline:none}
label input,label select,label textarea{margin-top:7px}textarea{min-height:84px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:#98a2b3;box-shadow:0 0 0 3px rgba(152,162,179,.13)}
.primary,.secondary,.danger,.success,.warning,.ghost{border:0;border-radius:10px;padding:10px 13px;font-weight:700;font-size:12px}
.primary{background:var(--dark);color:#fff}.secondary{background:#fff;border:1px solid var(--line);color:var(--text)}
.danger{background:#fee4e2;color:var(--bad)}.success{background:#dcfae6;color:var(--ok)}.warning{background:#fef0c7;color:var(--warn)}.ghost{background:var(--soft);color:var(--dark)}
.primary:disabled,.secondary:disabled{opacity:.5;cursor:not-allowed}
.login-card .primary{width:100%}
.app-shell{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr)}
.sidebar{height:100vh;position:sticky;top:0;background:var(--dark);color:#fff;padding:18px 13px;display:flex;flex-direction:column;overflow:auto}
.sidebar-brand{padding:4px 6px 19px}.sidebar-brand strong{display:block;font-size:18px}.sidebar-brand span{display:block;color:#98a2b3;font-size:10px;margin-top:3px}
#nav{display:flex;flex-direction:column;gap:4px}
.nav-item{border:0;background:transparent;color:#cbd5e1;text-align:right;border-radius:10px;padding:10px 11px;font-size:12px;display:flex;justify-content:space-between;align-items:center}
.nav-item:hover{background:rgba(255,255,255,.07)}.nav-item.active{background:#fff;color:#101828;font-weight:800}
.nav-group{color:#667085;font-size:10px;padding:14px 10px 6px}
.sidebar-footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.09);padding-top:13px}
.user-mini{font-size:11px;line-height:1.7;color:#d0d5dd;margin-bottom:9px}.side-logout{width:100%;border:1px solid rgba(255,255,255,.12);background:transparent;color:#fecaca;border-radius:10px;padding:9px;font-size:11px}
.main{padding:25px;min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.top-title{display:flex;align-items:center;gap:10px}
.topbar h2{margin:0;font-size:24px}.topbar p{margin:5px 0 0;color:var(--muted);font-size:11px}.top-actions{display:flex;gap:8px}.top-actions select{width:95px}
.icon-btn{border:0;background:var(--soft);border-radius:9px;width:36px;height:36px}
.toolbar{display:flex;gap:9px;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap}
.toolbar-left,.toolbar-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.search{width:min(310px,75vw)}.page-note{font-size:11px;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:15px}
.card,.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 4px 15px rgba(15,23,42,.025)}
.card{padding:17px}.card span{display:block;color:var(--muted);font-size:11px;margin-bottom:8px}.card strong{display:block;font-size:22px}.card small{display:block;color:var(--muted);font-size:10px;margin-top:7px}
.panel{padding:17px;margin-bottom:15px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}.panel h3{margin:0;font-size:15px}
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;background:var(--soft);font-size:10px;font-weight:700}
.badge.ok{background:#dcfae6;color:var(--ok)}.badge.bad{background:#fee4e2;color:var(--bad)}.badge.warn{background:#fef0c7;color:var(--warn)}.badge.blue{background:#dbeafe;color:#1d4ed8}
.grid-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}.grid-three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:13px}
table{width:100%;border-collapse:collapse;min-width:780px;background:#fff}th,td{padding:10px 9px;border-bottom:1px solid var(--line);text-align:right;font-size:11px;white-space:nowrap}
th{background:#fafbfc;color:#667085;font-weight:800;position:sticky;top:0}tbody tr:hover{background:#fafafa}tbody tr:last-child td{border-bottom:0}
.actions{display:flex;gap:5px;flex-wrap:wrap}.action-btn{border:0;border-radius:8px;padding:6px 8px;font-size:10px;background:var(--soft);color:#344054}.action-btn.good{background:#dcfae6;color:var(--ok)}.action-btn.bad{background:#fee4e2;color:var(--bad)}.action-btn.warn{background:#fef0c7;color:var(--warn)}
.empty{padding:35px;text-align:center;color:var(--muted);font-size:12px}
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.mini-kpi{background:var(--soft);border-radius:12px;padding:12px}.mini-kpi span{display:block;color:var(--muted);font-size:10px}.mini-kpi strong{display:block;margin-top:6px;font-size:17px}
.status-list,.summary-list{display:grid;gap:0}.status-row,.summary-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:9px 0;font-size:11px}.status-row:last-child,.summary-row:last-child{border-bottom:0}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.48);z-index:80;display:grid;place-items:center;padding:18px}
.modal{width:min(900px,100%);max-height:92vh;overflow:hidden;background:#fff;border-radius:20px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:17px 19px;border-bottom:1px solid var(--line)}.modal-head h3{margin:0;font-size:17px}.modal-head p{margin:5px 0 0;color:var(--muted);font-size:10px}
.modal-body{padding:18px;overflow:auto}.modal-footer{padding:13px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-start}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-grid .full{grid-column:1/-1}.form-section{grid-column:1/-1;border-top:1px solid var(--line);padding-top:13px;margin-top:2px}
.form-section h4{margin:0 0 10px;font-size:13px}.item-row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;align-items:end;margin-bottom:8px}.item-row label{margin:0}.remove-line{height:40px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.tab-btn{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 11px;font-size:10px}.tab-btn.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.toast{position:fixed;left:20px;bottom:20px;z-index:120;max-width:430px;background:#111827;color:#fff;border-radius:11px;padding:12px 15px;font-size:11px;box-shadow:var(--shadow)}.toast.error{background:#7f1d1d}.toast.ok{background:#065f46}
.loading{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:130;background:#111827;color:#fff;border-radius:999px;padding:9px 15px;font-size:11px;box-shadow:var(--shadow)}
.code-box{white-space:pre-wrap;word-break:break-word;background:#101828;color:#e5e7eb;border-radius:12px;padding:13px;font-size:10px;direction:ltr;text-align:left;max-height:350px;overflow:auto}
@media(max-width:1180px){.cards{grid-template-columns:repeat(2,1fr)}.kpi-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;right:-270px;width:250px;z-index:70;transition:right .2s}.sidebar.open{right:0}.main{padding:17px}.mobile-only{display:inline-grid;place-items:center}.grid-two,.grid-three{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%}.top-actions select,.top-actions button{flex:1}.kpi-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cards{grid-template-columns:1fr}.item-row{grid-template-columns:1fr}.remove-line{height:auto}.login-card{padding:23px}}


/* SELLA v0.27 - simple order wizard + delivery board */
.wizard-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.wizard-head>div{text-align:left}
.wizard-head strong{display:block;font-size:15px}.wizard-head small{display:block;color:var(--muted);margin-top:4px}
.wizard-step{display:grid;gap:15px}
.wizard-title{display:flex;align-items:center;gap:10px}
.wizard-title>div strong{display:block;font-size:14px}.wizard-title>div small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.step-no{width:30px;height:30px;border-radius:10px;background:var(--dark);color:#fff;display:grid;place-items:center;font-weight:800}
.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.choice-card{border:1px solid var(--line);background:#fff;border-radius:14px;padding:18px;text-align:right;min-height:92px;transition:.15s}
.choice-card:hover{border-color:#98a2b3;transform:translateY(-1px);box-shadow:0 8px 20px rgba(15,23,42,.06)}
.choice-card strong{display:block;font-size:14px}.choice-card span{display:block;color:var(--muted);font-size:10px;margin-top:8px}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.product-choice{border:1px solid var(--line);background:#fff;border-radius:14px;padding:15px;text-align:right;min-height:90px}
.product-choice:hover{border-color:#667085;background:#fafafa}
.product-choice-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}.product-choice-top strong{font-size:13px}.product-choice-top span{font-size:12px;font-weight:800;white-space:nowrap}
.product-choice small{display:block;color:var(--muted);margin-top:10px}
.simple-order-layout{display:grid;grid-template-columns:320px 1fr;gap:20px}
.simple-product-summary,.simple-customer-form{border:1px solid var(--line);border-radius:16px;padding:16px}
.simple-product-summary>span{font-size:10px;color:var(--muted)}.simple-product-summary>strong{display:block;font-size:17px;margin-top:5px}.simple-product-summary>small{display:block;color:var(--muted);margin-top:5px}
.qty-price-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.qty-control{display:grid;grid-template-columns:38px 1fr 38px;gap:5px;margin-top:7px}
.qty-control input{margin:0;text-align:center}.qty-control button{border:1px solid var(--line);background:var(--soft);border-radius:9px}
.simple-total{margin-top:16px;background:var(--dark);color:#fff;border-radius:13px;padding:14px;display:flex;justify-content:space-between;align-items:center}.simple-total span{font-size:11px;color:#d0d5dd}.simple-total strong{font-size:17px}
.field-label{display:block;font-size:12px;font-weight:700;margin-bottom:7px}
.delivery-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.delivery-choice{border:1px solid var(--line);background:#fff;border-radius:11px;padding:12px;font-weight:700}
.delivery-choice.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.auto-info{background:#ecfdf3;color:#067647;border-radius:11px;padding:10px;font-size:10px}
.warning-box{background:#fff4ed;color:#b54708;border-radius:11px;padding:10px;font-size:10px}
.delivery-board-head{display:flex;justify-content:space-between;gap:15px;align-items:flex-start;margin-bottom:14px}.delivery-board-head h3{margin:0 0 5px;font-size:17px}
.delivery-company-tabs{display:flex;gap:8px;overflow:auto;padding-bottom:8px;margin-bottom:12px}
.company-tab{min-width:150px;border:1px solid var(--line);background:#fff;border-radius:13px;padding:12px;text-align:right}
.company-tab span{display:block;font-size:11px}.company-tab strong{display:block;font-size:18px;margin-top:6px}
.company-tab.active{background:var(--dark);color:#fff;border-color:var(--dark)}
.delivery-select-head{align-items:flex-start}
@media(max-width:900px){
  .choice-grid,.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .simple-order-layout{grid-template-columns:1fr}
}
@media(max-width:540px){
  .choice-grid,.product-grid{grid-template-columns:1fr}
  .qty-price-grid{grid-template-columns:1fr}
  .delivery-board-head{flex-direction:column}
}

/* SELLA v0.28 - delivery API integration */
.integration-on{display:block;margin-top:6px;font-size:9px;color:#6ce9a6}
.company-tab.active .integration-on{color:#a6f4c5}
.integration-banner{border-radius:12px;padding:12px 14px;margin-bottom:14px;display:flex;gap:8px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.integration-banner strong{font-size:12px}.integration-banner span{font-size:10px}
.ok-banner{background:#ecfdf3;color:#067647;border:1px solid #abefc6}

/* SELLA v0.30 */
.purchase-cost-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0}
.purchase-cost-summary>div{background:#f8fafc;border:1px solid #e5e7eb;border-radius:12px;padding:12px}
.purchase-cost-summary span{display:block;font-size:11px;color:#667085;margin-bottom:5px}
.purchase-cost-summary strong{font-size:15px}
.edit-lines{display:grid;gap:12px}.edit-line{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;align-items:end;padding:12px;border:1px solid #e5e7eb;border-radius:14px}
@media(max-width:800px){.edit-line{grid-template-columns:1fr}}

/* SELLA v0.31 management UX */
.purchase-warehouse-box{border:1px solid #e5e7eb;border-radius:14px;padding:12px;background:#fafbfc}
.field-with-action{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.compact-btn{height:44px;white-space:nowrap}
.inline-hint{font-size:12px;color:#667085;margin-top:7px}
.inline-hint.warning{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;border-radius:10px;padding:9px 11px}
.mini-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.mini-stats>div{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:13px}
.mini-stats span{display:block;color:#667085;font-size:12px;margin-bottom:5px}
.mini-stats strong{font-size:18px}
@media(max-width:760px){.field-with-action,.mini-stats{grid-template-columns:1fr}}

/* SELLA v0.32 */
.empty-state{padding:28px;text-align:center;color:#667085}
button:disabled{opacity:.55;cursor:not-allowed}

/* SELLA v0.33 navigation + management */
.nav-section{margin:4px 0}
.nav-section-head{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;background:transparent;color:#d7deea;padding:11px 13px;border-radius:10px;font:inherit;font-weight:700;cursor:pointer}
.nav-section-head:hover{background:rgba(255,255,255,.06)}
.nav-chevron{font-size:16px;transition:transform .18s ease}
.nav-section.open .nav-chevron{transform:rotate(180deg)}
.nav-section-body{display:none;padding:2px 0 5px}
.nav-section.open .nav-section-body{display:block}
.nav-section-body .nav-item{margin:2px 8px;width:calc(100% - 16px);font-size:13px;padding:9px 12px}
.nav-solo{font-weight:800}
.row-actions{display:flex;gap:5px;flex-wrap:wrap}
.danger-lite{color:#b42318!important;background:#fff5f4!important;border-color:#fecdca!important}
#purchasePaymentHint{background:#f8fafc;border-radius:9px;padding:8px 10px}

/* SELLA v0.35 */
.compact-kpis{margin:12px 0 16px}
.stock-positive{display:inline-flex;min-width:54px;justify-content:center;padding:5px 10px;border-radius:999px;background:#ecfdf3;color:#027a48}
.stock-zero{display:inline-flex;min-width:54px;justify-content:center;padding:5px 10px;border-radius:999px;background:#f2f4f7;color:#667085}
.muted{font-size:12px;color:#98a2b3;margin-top:3px}


/* SELLA v0.36.1 - synchronization, current-balance and deployment UX */
.app-version{margin:0 0 9px;color:#667085;font-size:9px;text-align:center;letter-spacing:.02em}
.health-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.health-card{border:1px solid var(--line);border-radius:14px;padding:15px;background:#fff}
.health-card span{display:block;color:var(--muted);font-size:11px}
.health-card strong{display:block;margin-top:8px;font-size:24px}
.health-card small{display:block;margin-top:5px;font-size:10px}
.health-card-ok{border-color:#abefc6;background:#f6fef9}
.health-card-ok strong,.health-card-ok small{color:var(--ok)}
.health-card-bad{border-color:#fecdca;background:#fff7f6}
.health-card-bad strong,.health-card-bad small{color:var(--bad)}
.system-health-banner{border-radius:14px;padding:15px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.system-health-banner strong{display:block;font-size:15px}
.system-health-banner span{display:block;margin-top:5px;font-size:11px}
.health-ok{background:#ecfdf3;border:1px solid #abefc6;color:#067647}
.health-bad{background:#fff4ed;border:1px solid #fedf89;color:#b54708}
.system-health-note{box-shadow:none;margin-top:10px}
.field-disabled{opacity:.5}
code{direction:ltr;unicode-bidi:embed;font-family:monospace}
@media(max-width:900px){.health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.health-grid{grid-template-columns:1fr}}


.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px}
.kpi span{display:block;color:var(--muted);font-size:11px;margin-bottom:6px}
.kpi strong{font-size:18px}
@media(max-width:900px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.kpi-grid{grid-template-columns:1fr}}


/* SELLA v0.36.2 - purchase creates product atomically */
.purchase-line-card{
  display:block;
  border:1px solid var(--line);
  border-radius:14px;
  padding:13px;
  margin-bottom:12px;
  background:#fff
}
.purchase-line-head{
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto;
  gap:10px;
  align-items:end;
  margin-bottom:10px
}
.purchase-line-head label{margin:0}
.purchase-line-head .remove-line{height:40px}
.line-existing-product{margin-bottom:10px}
.purchase-new-product-fields{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:10px;
  margin-bottom:10px
}
.purchase-line-values{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px
}
@media(max-width:850px){
  .purchase-new-product-fields{grid-template-columns:1fr 1fr}
}
@media(max-width:540px){
  .purchase-line-head,
  .purchase-new-product-fields,
  .purchase-line-values{grid-template-columns:1fr}
  .purchase-line-head .remove-line{height:auto}
}

/* SELLA v0.36.2 - purchase/product synchronization UX */
.purchase-items-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.purchase-items-head h4{margin:0}
.product-zero-warning{margin:10px 0 14px}
@media(max-width:540px){.purchase-items-head{align-items:stretch;flex-direction:column}}

/* SELLA v0.36.4 - product edit schema compatibility hotfix */