:root{--bg:#fff;--card:#f6f6f7;--tx:#1b1b1d;--mut:#6b6b72;--br:#dcdce0;--acc:#c62828;--ok:#2e7d32}
@media(prefers-color-scheme:dark){:root{--bg:#161617;--card:#232325;--tx:#f2f2f3;--mut:#a0a0a6;--br:#3a3a3e;--acc:#e0434d}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;max-width:600px;margin-inline:auto;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 130px}
h2{font-size:19px;margin:10px 0;color:var(--acc)}.mut{color:var(--mut);font-size:14px}
input,select,textarea,button{font:inherit;color:inherit;width:100%;min-height:48px;border:1px solid var(--br);border-radius:12px;padding:10px 12px;background:var(--bg);margin:4px 0}
button{background:var(--card);font-weight:600;cursor:pointer}button.p{background:var(--acc);border-color:var(--acc);color:#fff}button.s{width:auto;min-width:48px}
.card{background:var(--card);border-radius:14px;padding:12px;margin:8px 0}.row{display:flex;gap:8px;align-items:center;min-width:0}.row>*{flex:1;min-width:0}.row>.s{flex:0}input[type=date]{display:block;width:100%;min-width:0;max-width:100%;padding-inline:8px;font-size:14px}
.tabs{display:flex;gap:6px;overflow-x:auto;position:sticky;top:0;background:var(--bg);padding:6px 0;z-index:3}.tabs button{width:auto;flex:1;white-space:nowrap;min-height:44px}.tabs .on{background:var(--acc);color:#fff;border-color:var(--acc)}
.seg{display:flex;gap:6px}.seg button.on{background:var(--acc);color:#fff;border-color:var(--acc)}
.bar{position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--br);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));max-width:600px;margin:auto;z-index:4}
.tot{font-size:22px;font-weight:700;display:flex;justify-content:space-between}.msg{padding:10px;border-radius:10px;background:var(--card);border-left:4px solid var(--acc);margin:8px 0}
.ov{position:fixed;inset:0;background:var(--bg);overflow:auto;padding:calc(12px + env(safe-area-inset-top,0px)) 12px 130px;z-index:9;max-width:600px;margin:auto}
.stp b{min-width:34px;text-align:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0}
.kpi{background:var(--card);border-radius:14px;padding:10px;min-width:0}
.kpi b{display:block;font-size:19px;line-height:1.2;margin:2px 0;word-break:break-word}
.kpi span{display:block;font-size:12px;color:var(--mut)}


/* ATLAS modern UI — presentation layer only; business logic untouched */
:root{
  color-scheme:dark;
  --bg:#0d1118;--card:#151c27;--tx:#edf2f8;--mut:#98a5b7;--br:#273344;
  --acc:#df4652;--ok:#36b37e;--surface:#111925;--surface2:#1b2635;
  --shadow:0 12px 32px rgba(0,0,0,.18);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  width:100%;max-width:none;min-height:100vh;margin:0;padding:28px 32px 48px;
  background:
    radial-gradient(ellipse at 85% 0%,rgba(223,70,82,.08),transparent 34%),
    var(--bg);
  color:var(--tx);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
#app{
  width:100%;max-width:1600px;margin:0 auto;min-height:calc(100vh - 76px);
  display:grid;grid-template-columns:248px minmax(0,1fr);column-gap:30px;align-items:start;
}
#app>.tabs{
  grid-column:1;grid-row:1 / span 40;position:sticky;top:24px;z-index:5;
  display:flex;flex-direction:column;align-items:stretch;gap:6px;overflow:visible;
  padding:16px 12px;height:calc(100vh - 48px);border:1px solid var(--br);
  border-radius:20px;background:rgba(17,25,37,.94);box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
}
#app>.tabs:before{
  content:"ATLAS";display:block;padding:8px 12px 22px;margin:0 0 12px;
  color:#fff;font-size:22px;font-weight:800;letter-spacing:.16em;
  border-bottom:1px solid var(--br);
}
#app>.tabs:after{
  content:"Управление бизнесом";display:block;order:99;margin-top:auto;padding:16px 12px 4px;
  border-top:1px solid var(--br);color:var(--mut);font-size:11px;letter-spacing:.04em;
}
#app>.tabs button{
  flex:0 0 auto;width:100%;min-height:44px;margin:0;padding:10px 13px;
  border:1px solid transparent;border-radius:11px;background:transparent;
  color:#aeb9c8;text-align:left;font-size:13px;font-weight:600;white-space:normal;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
#app>.tabs button:hover{background:#202b3a;color:#fff}
#app>.tabs button.on{
  background:linear-gradient(110deg,rgba(223,70,82,.2),rgba(223,70,82,.08));
  border-color:rgba(223,70,82,.28);color:#fff;box-shadow:inset 3px 0 0 var(--acc);
}
#app>.tabs button.s{width:100%;min-width:0;text-align:left}
#app>.tabs button[data-a=out]{margin-top:0;color:#e4a4a9}
#app>.tabs~:not(.ov):not(.bar){grid-column:2;min-width:0}
#app>h2,#app>h3,#app>.card,#app>.grid2,#app>.seg,#app>.mut,#app>input,
#app>button,#app>.row,#app>.msg,#app>textarea,#app>select{grid-column:2}
h2{margin:0 0 18px;color:var(--tx);font-size:22px;font-weight:750;letter-spacing:-.025em}
h3{margin:26px 0 12px;color:#dce5f0;font-size:15px;font-weight:700}
.mut{color:var(--mut);font-size:12px}
.card,.kpi{
  background:linear-gradient(145deg,rgba(25,35,49,.98),rgba(19,28,40,.98));
  border:1px solid var(--br);border-radius:16px;padding:17px;margin:10px 0;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.grid2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:12px 0 24px}
.kpi{margin:0;min-height:112px;padding:17px}
.kpi span{font-size:11px;letter-spacing:.025em;color:var(--mut)}
.kpi b{font-size:clamp(19px,2vw,27px);font-weight:750;letter-spacing:-.035em;margin:9px 0 4px}
input,select,textarea,button{
  color:var(--tx);background:#111a26;border:1px solid #2b394b;border-radius:10px;
  min-height:42px;padding:9px 12px;font-size:13px;
}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(223,70,82,.28);border-color:var(--acc)}
button{cursor:pointer;font-weight:650;transition:filter .15s ease,transform .15s ease}
button:hover{filter:brightness(1.12)}
button:active{transform:translateY(1px)}
button.p{background:var(--acc);border-color:var(--acc);color:#fff}
button.s{min-width:42px}
.row{gap:10px}
.seg{gap:7px;margin:12px 0}
.seg button{width:auto;min-width:112px}
.seg button.on{background:rgba(223,70,82,.16);border-color:rgba(223,70,82,.45);color:#fff}
.tot{font-size:20px;align-items:center}
.msg{background:rgba(223,70,82,.09);border:1px solid rgba(223,70,82,.25);border-left:3px solid var(--acc);border-radius:12px;padding:13px 16px}
a{color:#f18b93}
.bar{
  left:calc(50% + 124px);right:max(32px,calc((100vw - 1600px)/2));
  bottom:20px;width:auto;max-width:none;margin:0;padding:14px 18px;
  border:1px solid var(--br);border-radius:16px;background:rgba(17,25,37,.96);
  box-shadow:0 16px 40px rgba(0,0,0,.35);backdrop-filter:blur(18px);
}
.ov{
  max-width:760px;width:min(760px,calc(100vw - 32px));padding:28px;
  left:50%;transform:translateX(-50%);border:1px solid var(--br);
  border-radius:20px;background:#0f1722;box-shadow:0 24px 80px rgba(0,0,0,.55);
}
.ov h2{margin-bottom:20px}
#app>.tabs~.msg,#app>.tabs~.card,#app>.tabs~h2,#app>.tabs~h3,
#app>.tabs~.grid2,#app>.tabs~.seg,#app>.tabs~.mut,#app>.tabs~input,
#app>.tabs~button,#app>.tabs~.row,#app>.tabs~textarea,#app>.tabs~select{grid-column:2}
#app>.tabs~.ov{grid-column:1/-1}
@media(max-width:900px){
  body{padding:16px 18px 96px}
  #app{display:block;max-width:100%}
  #app>.tabs{
    position:sticky;top:8px;height:auto;display:flex;flex-direction:row;gap:6px;
    overflow-x:auto;padding:8px;border-radius:14px;margin-bottom:22px;
  }
  #app>.tabs:before,#app>.tabs:after{display:none}
  #app>.tabs button{width:auto;flex:0 0 auto;min-width:max-content;min-height:40px}
  #app>.tabs button.s{width:auto}
  .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bar{left:18px;right:18px;bottom:12px}
}
@media(max-width:560px){
  body{padding:8px 12px 92px}
  h2{font-size:19px}
  .grid2{gap:8px}
  .kpi{min-height:94px;padding:12px}
  .kpi b{font-size:19px}
  .card{padding:13px}
  .row{flex-wrap:wrap}
  .row>*{min-width:0}
  .ov{padding:18px 14px}
}


/* Compact expandable stock rows — presentation only */
.stock-item{
  margin:8px 0;border:1px solid var(--br);border-radius:14px;
  background:linear-gradient(145deg,rgba(25,35,49,.98),rgba(19,28,40,.98));
  box-shadow:0 5px 15px rgba(0,0,0,.08);overflow:hidden;
}
.stock-item summary{
  display:block;list-style:none;cursor:pointer;padding:12px 14px;
}
.stock-item summary::-webkit-details-marker{display:none}
.stock-main,.stock-sub{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.stock-main>b{font-size:14px;line-height:1.35;min-width:0}
.stock-state{flex:0 0 auto;font-size:10px;font-weight:750;letter-spacing:.04em}
.stock-state.is-none{color:#e58b91}
.stock-state.is-low{color:#e8b86b}
.stock-state.is-ok{color:#65c99b}
.stock-sub{margin-top:5px;color:var(--mut);font-size:12px}
.stock-sub>span{min-width:0}
.stock-sub>b{color:var(--tx);white-space:nowrap;font-size:12px}
.stock-details{padding:0 14px 12px;border-top:1px solid rgba(152,165,183,.14)}
.stock-details .mut{margin-top:7px;font-size:11px;line-height:1.45}
.stock-item[open] summary{padding-bottom:10px}
@media(min-width:901px){
  .stock-item summary{padding:13px 16px}
  .stock-main>b{font-size:14px}
}


/* Keep the mobile section navigation pinned without covering page content */
@media(max-width:900px){
  #app{padding-top:58px}
  #app>.tabs{
    position:fixed;top:0;left:0;right:0;z-index:30;
    width:100%;height:auto;margin:0;padding:8px 12px;
    border:0;border-bottom:1px solid var(--br);border-radius:0 0 14px 14px;
    background:rgba(13,17,24,.98);box-shadow:0 8px 22px rgba(0,0,0,.28);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  }
}
@media(max-width:560px){
  #app{padding-top:56px}
}


/* Clickable receivables KPI and client debt breakdown */
.kpi-action{display:block;width:100%;text-align:left;cursor:pointer;color:var(--tx)}
.kpi-action>span{display:block}
.kpi-action:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.debt-list{margin:10px 0 20px;border:1px solid var(--br);border-radius:16px;background:var(--surface);overflow:hidden}
.debt-list-head{display:flex;justify-content:space-between;gap:12px;padding:13px 15px;border-bottom:1px solid var(--br);font-size:13px}
.debt-list-head span{color:var(--mut)}
.debt-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid rgba(152,165,183,.12)}
.debt-row:last-child{border-bottom:0}
.debt-client{display:flex;flex-direction:column;gap:3px;min-width:0}
.debt-client>b{font-size:13px;overflow-wrap:anywhere}
.debt-client a{font-size:11px;color:var(--mut);text-decoration:none}
.debt-warning{font-size:10px;color:#e8b86b}
.debt-amount{font-size:13px;white-space:nowrap}


/* Receivables card: match regular KPI cards, but make the full tile tappable */
.grid2>.kpi-action{
  appearance:none;-webkit-appearance:none;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:5px;
  width:100%;min-height:94px;margin:0;padding:14px 16px;
  border:1px solid var(--br);border-radius:16px;
  background:var(--card);color:var(--tx);text-align:left;
  font:inherit;box-shadow:0 8px 20px rgba(0,0,0,.12);
}
.grid2>.kpi-action>span{display:block;width:100%;font-size:12px;line-height:1.4;color:var(--mut)}
.grid2>.kpi-action>b{display:block;font-size:21px;line-height:1.2;margin:2px 0;color:var(--tx)}
.grid2>.kpi-action:active{transform:scale(.99);border-color:var(--acc)}
.debt-list{display:block;width:100%;margin:12px 0 22px;border:1px solid var(--br);border-radius:16px;background:var(--card);overflow:hidden}
.debt-list-head{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--br);font-size:13px}
.debt-list-head>b{font-size:14px}
.debt-list-head>span{display:block!important;width:auto!important;color:var(--mut);font-size:12px}
.debt-row{display:flex!important;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;border-bottom:1px solid var(--br)}
.debt-row:last-child{border-bottom:0}
.debt-client{display:flex;flex:1;flex-direction:column;gap:3px;min-width:0}
.debt-client>b{font-size:14px;line-height:1.35}
.debt-client a{font-size:12px;color:var(--mut);text-decoration:none}
.debt-warning{font-size:11px;color:#e8b86b}
.debt-amount{flex:0 0 auto;font-size:14px;white-space:nowrap}


/* Customer analytics and profile */
.client-filters{display:flex;gap:7px;overflow-x:auto;padding:4px 0 10px;margin:8px 0;scrollbar-width:none}
.client-filters::-webkit-scrollbar{display:none}
.client-filters button{width:auto;flex:0 0 auto;white-space:nowrap;border:1px solid var(--br);border-radius:999px;background:var(--surface);color:var(--mut);padding:9px 12px;font-size:12px}
.client-filters button.on{background:rgba(223,70,82,.16);border-color:var(--acc);color:var(--tx)}
.client-filters button span{opacity:.75;margin-left:3px}
.client-card-head,.client-profile-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.client-card-head>div{min-width:0}
.client-card-head>div>b{font-size:15px;overflow-wrap:anywhere}
.client-segment{display:inline-flex;align-items:center;flex:0 0 auto;border:1px solid var(--br);border-radius:999px;padding:4px 8px;font-size:10px;font-weight:700;white-space:nowrap}
.client-segment.success{color:#65c99b;border-color:rgba(101,201,155,.3);background:rgba(101,201,155,.08)}
.client-segment.warning{color:#e8b86b;border-color:rgba(232,184,107,.3);background:rgba(232,184,107,.08)}
.client-segment.danger{color:#e58b91;border-color:rgba(229,139,145,.3);background:rgba(229,139,145,.08)}
.client-segment.secondary{color:var(--mut)}
.client-profile-head{margin:12px 0 16px}
.client-profile-title{align-items:center}
.client-profile-title h2{margin:0;min-width:0;overflow-wrap:anywhere}
.client-order-top{display:flex;justify-content:space-between;gap:12px}
.client-order-top b:last-child{white-space:nowrap}
.client-payment-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-bottom:1px solid var(--br);background:var(--card)}
.client-payment-row:first-of-type{border-radius:14px 14px 0 0}
.client-payment-row:last-child{border-radius:0 0 14px 14px;border-bottom:0}
.client-payment-row>div{min-width:0}
.client-payment-row>div>b{font-size:13px}
.client-payment-row> b{white-space:nowrap}
@media(max-width:560px){
 .client-card-head{align-items:flex-start}
 .client-card-head .client-segment{font-size:9px;padding:4px 7px}
 .client-profile-title{align-items:flex-start;flex-direction:column;gap:7px}
 .client-profile-head .mut{font-size:12px}
}

.client-assignee{display:block;margin:10px 0 6px;color:var(--mut);font-size:12px}
.client-assignee select{display:block;margin-top:5px;width:100%;min-width:0}
.client-primary-actions,.client-secondary-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch}
.client-primary-actions>*,.client-secondary-actions>*{width:100%;min-width:0;max-width:100%;margin:0;min-height:46px;padding:9px 8px;font-size:13px;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
.client-secondary-actions{margin-top:7px}
@media(max-width:560px){.client-primary-actions,.client-secondary-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.client-secondary-actions button{font-size:12px;padding-inline:5px;letter-spacing:-.15px}}

/* Customer order/payment reconciliation */
.client-reconcile-row,.client-order-payment{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:7px 0;border-bottom:1px solid var(--br);font-size:12px}
.client-reconcile-row:last-of-type,.client-order-payment:last-child{border-bottom:0}
.client-reconcile-row span,.client-order-payment span{color:var(--mut);flex:1;min-width:0}
.client-reconcile-row b,.client-order-payment b{white-space:nowrap;font-size:13px}
.client-order-payment{margin-top:7px;padding-top:8px}
.client-order-due b{color:#e8b86b}
.client-payment-alert{font-size:11px;color:#e58b91;margin-top:3px}

/* Expandable stock movement cards */
.movement-card{padding:0;overflow:hidden}
.movement-summary{display:block;list-style:none;cursor:pointer;padding:16px}
.movement-summary::-webkit-details-marker{display:none}
.movement-summary::after{content:"";display:block;clear:both}
.movement-summary>b{display:block;margin:5px 0;font-size:15px}
.movement-more{display:block;margin-top:9px;color:var(--acc);font-size:12px;font-weight:600}
.movement-card[open] .movement-more{font-size:0}
.movement-card[open] .movement-more:after{content:"Свернуть⌃";font-size:12px}
.movement-expanded{border-top:1px solid var(--br);padding:10px 16px 14px;display:grid;gap:9px}
.movement-expanded>div{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;font-size:12px}
.movement-expanded span{color:var(--mut);min-width:0;flex:1}
.movement-expanded b{text-align:right;overflow-wrap:anywhere;max-width:58%}
.debt-opening-note{display:block;color:var(--mut);font-size:11px;line-height:1.4;margin-top:5px}


/* ATLAS dark premium theme — one brand mark in navigation; dashboard stays focused on results */
:root{
  color-scheme:dark;
  --bg:#0b1220;--card:#141e2c;--tx:#edf2f8;--mut:#9aa9bb;--br:#2a394c;
  --acc:#d7a45d;--ok:#48b987;--surface:#111b29;--surface2:#1a2737;
  --shadow:0 14px 36px rgba(0,0,0,.28);
}
html{background:var(--bg)}
body{
  background:radial-gradient(ellipse at 82% 0%,rgba(215,164,93,.09),transparent 34%),var(--bg);
  color:var(--tx);
}
#app>.tabs{
  background:rgba(17,27,41,.97);border-color:#2a394c;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
#app>.tabs:before{
  color:#f3f6fa;border-color:#2a394c;
  background-image:url("atlas-cube.svg");background-repeat:no-repeat;
  background-position:10px 5px;background-size:38px 38px;
}
#app>.tabs:after{color:#9aa9bb;border-color:#2a394c}
#app>.tabs button{color:#b9c5d3}
#app>.tabs button:hover{background:#202d3e;color:#fff}
#app>.tabs button.on{
  background:rgba(215,164,93,.14);border-color:rgba(215,164,93,.5);
  color:#fff;box-shadow:inset 3px 0 0 #d7a45d;
}
h2,h3{color:#edf2f8}
.card,.kpi,.stock-item,.debt-list{
  background:linear-gradient(145deg,#172333,#121c2a);
  border-color:#2a394c;box-shadow:0 8px 22px rgba(0,0,0,.18);
}
input,select,textarea,button{background:#111b29;color:var(--tx);border-color:#304156}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(215,164,93,.24);border-color:#d7a45d}
button.p{background:#d7a45d;border-color:#d7a45d;color:#172333}
button.p:hover{filter:brightness(1.06)}
.seg button.on,.client-filters button.on{
  background:rgba(215,164,93,.15);border-color:#d7a45d;color:#fff;
}
a{color:#e5b66f}
.bar{background:rgba(17,27,41,.97);border-color:#2a394c}
.ov{background:#101a28;border-color:#2a394c}
.msg{background:rgba(215,164,93,.09);border-color:rgba(215,164,93,.24);border-left-color:#d7a45d;color:#edf2f8}
.stock-item{background:linear-gradient(145deg,#172333,#121c2a)}
.stock-details,.movement-expanded,.debt-list-head,.debt-row,.client-payment-row{border-color:#2a394c}
.movement-more{color:#e0b36c}
.client-filters button{background:#111b29;color:var(--mut)}
.client-filters button.on{color:#fff}
.atlas-results{
  margin:16px 0 24px;padding:18px;border:1px solid #304156;border-radius:20px;
  background:linear-gradient(135deg,#172333 0%,#121c2a 72%,#211e1b 100%);
  box-shadow:0 14px 34px rgba(0,0,0,.24);
}
.atlas-results-head{display:flex;align-items:center;margin-bottom:14px}
.atlas-results-head b{font-size:18px;font-weight:750;letter-spacing:-.02em;color:#f3f6fa}
.atlas-results .grid2{margin:0;grid-template-columns:repeat(4,minmax(0,1fr))}
.atlas-results .kpi{background:#101a28;border-color:#2a394c;min-height:92px;padding:13px}
.atlas-results .kpi b{font-size:clamp(17px,1.8vw,24px);color:#f3f6fa}
.atlas-directions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:10px 0 24px}
.atlas-direction{padding:16px;border:1px solid #2a394c;border-radius:18px;background:linear-gradient(145deg,#172333,#121c2a);box-shadow:0 8px 22px rgba(0,0,0,.16);min-width:0}
.atlas-direction.paper{border-top:3px solid #527da4}
.atlas-direction.chem{border-top:3px solid #d7a45d}
.atlas-direction-title{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:#f0f4f9}
.atlas-direction-title b{font-size:15px}
.atlas-direction-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#1d3044;color:#8fb3d4;font-size:22px}
.atlas-direction.chem .atlas-direction-icon{background:#33291e;color:#e3b66f}
.atlas-metric{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-top:1px solid #2a394c;font-size:12px}
.atlas-metric span{color:#9aa9bb}
.atlas-metric b{color:#f0f4f9;text-align:right;white-space:nowrap}
@media(max-width:900px){
  #app>.tabs{background:rgba(17,27,41,.98);border-bottom:1px solid #2a394c;box-shadow:0 8px 22px rgba(0,0,0,.3)}
  #app>.tabs:before{
    display:block;flex:0 0 auto;min-height:40px;height:40px;margin:0 5px 0 0;
    padding:4px 4px 4px 43px;border:0;background-position:0 3px;background-size:34px 34px;
    color:#f3f6fa;font-size:18px;line-height:32px;letter-spacing:-.03em;
  }
  #app>.tabs:after{display:none}
  #app>.tabs button{color:#b9c5d3}
  #app>.tabs button.on{background:rgba(215,164,93,.16);border-color:rgba(215,164,93,.5);color:#fff;box-shadow:inset 0 -3px 0 #d7a45d}
}
@media(max-width:560px){
  .atlas-results{padding:13px;border-radius:16px}
  .atlas-results .grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .atlas-results .kpi{min-height:82px;padding:10px}
  .atlas-directions{grid-template-columns:1fr;gap:8px}
  .atlas-direction{padding:14px}
}

/* Modern ATLAS dashboard cards: navy canvas, blue paper and green chemistry */
.atlas-results{
  padding:18px;border:1px solid rgba(105,126,154,.28);border-radius:24px;
  background:linear-gradient(145deg,#111c2d 0%,#0d1727 72%,#17182a 100%);
  box-shadow:0 18px 44px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.035);
}
.atlas-results-head{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.atlas-results-mark{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(145deg,#243b59,#17283e);color:#a9c9e8;font-size:26px}
.atlas-results-head>div{display:flex;flex-direction:column;gap:2px}
.atlas-results-head b{font-size:20px;letter-spacing:-.03em;color:#f4f7fc}
.atlas-results-head span:not(.atlas-results-mark){font-size:12px;color:#9eafc4}
.atlas-total-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.atlas-total-card{min-width:0;min-height:120px;padding:14px 12px;border:1px solid rgba(124,145,174,.2);border-radius:18px;background:linear-gradient(155deg,rgba(31,47,69,.9),rgba(18,29,45,.96));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px}
.atlas-total-icon{font-size:22px;line-height:1;color:#9fc9ec}
.atlas-total-card:nth-child(2) .atlas-total-icon{color:#67c5ed}
.atlas-total-card:nth-child(3) .atlas-total-icon{color:#e2ad60}
.atlas-total-card:nth-child(4) .atlas-total-icon{color:#5bdf91}
.atlas-total-card>span:nth-child(2){font-size:12px;line-height:1.25;color:#aab8ca}
.atlas-total-card b{font-size:clamp(17px,2vw,23px);line-height:1.1;letter-spacing:-.035em;color:#f5f7fb;white-space:nowrap}
.atlas-directions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:12px 0 26px}
.atlas-direction{position:relative;overflow:hidden;isolation:isolate;min-width:0;padding:18px;border-radius:22px;box-shadow:0 14px 32px rgba(0,0,0,.25)}
.atlas-direction.paper{border:1px solid rgba(64,151,230,.55);border-top:3px solid #368bd1;background:linear-gradient(145deg,rgba(20,64,108,.88),rgba(12,32,58,.98) 72%)}
.atlas-direction.chem{border:1px solid rgba(42,187,130,.52);border-top:3px solid #27b981;background:linear-gradient(145deg,rgba(12,79,63,.9),rgba(8,43,39,.98) 72%)}
.atlas-direction-title{position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-height:54px;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid rgba(185,211,239,.18)}
.atlas-direction-icon{width:54px;height:54px;flex:0 0 54px;display:grid;place-items:center;border-radius:16px;background:rgba(143,199,244,.13);font-size:31px;color:#c6e5ff}
.atlas-direction.chem .atlas-direction-icon{background:rgba(105,236,180,.12);color:#75efc0}
.atlas-direction-title b{font-size:clamp(15px,1.6vw,20px);line-height:1.25;color:#f3f7fc}
.atlas-direction-arrow{margin-left:auto;font-size:34px;line-height:1;color:#e5f1ff}
.atlas-direction.chem .atlas-direction-arrow{color:#d4ffeb}
.atlas-direction-metrics{position:relative;z-index:1;display:grid;gap:0}
.atlas-direction-metrics>div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 0}
.atlas-direction-metrics span{font-size:13px;color:rgba(232,241,251,.82)}
.atlas-direction-metrics b{font-size:15px;color:#f5f8fc;text-align:right;white-space:nowrap}
.atlas-direction-metrics .profit b{color:#5ee88e}
.atlas-direction-metrics .profit span{color:#d7f9e4}
.atlas-watermark{position:absolute;z-index:0;right:12px;bottom:-34px;font-size:118px;line-height:1;color:rgba(190,224,255,.07);transform:rotate(-12deg);pointer-events:none}
.atlas-direction.chem .atlas-watermark{color:rgba(114,244,192,.075)}
@media(max-width:760px){
 .atlas-total-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .atlas-total-card{min-height:94px;padding:10px 8px;gap:5px}
 .atlas-total-card b{font-size:19px}
 .atlas-directions{grid-template-columns:1fr;gap:12px}
 .atlas-direction{padding:16px}
 .atlas-direction-title b{font-size:18px}
 .atlas-direction-metrics span{font-size:14px}
 .atlas-direction-metrics b{font-size:16px}
}

/* Keep both direction cards side by side on phone, compact like the reference */
@media(max-width:760px){
 .atlas-directions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
 .atlas-direction{padding:11px 10px 14px;border-radius:17px;min-height:0}
 .atlas-direction-title{gap:7px;min-height:42px;margin-bottom:8px;padding-bottom:9px}
 .atlas-direction-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;font-size:21px}
 .atlas-direction-title b{font-size:clamp(11px,3.1vw,14px);line-height:1.18}
 .atlas-direction-arrow{font-size:24px}
 .atlas-direction-metrics>div{display:block;padding:7px 0}
 .atlas-direction-metrics span{display:block;font-size:10px;line-height:1.2;margin-bottom:3px}
 .atlas-direction-metrics b{display:block;text-align:left;font-size:clamp(12px,3.5vw,15px);white-space:normal;overflow-wrap:anywhere}
 .atlas-watermark{right:0;bottom:-25px;font-size:76px}
}
@media(max-width:370px){
 .atlas-directions{gap:7px}
 .atlas-direction{padding:9px 8px 12px}
 .atlas-direction-title{gap:5px}
 .atlas-direction-title b{font-size:11px}
 .atlas-direction-metrics b{font-size:12px}
}

.payment-breakdown{margin:10px 0 18px;padding:14px 16px;border:1px solid #2a394c;border-radius:15px;background:linear-gradient(145deg,#142235,#101a29);display:grid;gap:0}
.payment-breakdown>b{font-size:14px;color:#eaf1f8;margin-bottom:7px}
.payment-breakdown>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid rgba(130,153,180,.17)}
.payment-breakdown span{font-size:13px;color:#a9b8ca}
.payment-breakdown strong{font-size:14px;color:#f1f5fa;text-align:right;white-space:nowrap}

/* Compact company summary: title only, less vertical space */
.atlas-results{padding:15px 16px 16px;border-radius:22px}
.atlas-results-head{margin:0 0 12px;padding:0;min-height:0}
.atlas-results-head>span{font-size:17px;font-weight:700;line-height:1.2;color:#f3f7fc}
.atlas-results-head>div{display:none}
.atlas-total-grid{gap:8px}
.atlas-total-card{min-height:82px;padding:9px 8px;gap:4px;border-radius:15px}
.atlas-total-icon{font-size:17px}
.atlas-total-card>span:nth-child(2){font-size:11px}
.atlas-total-card b{font-size:clamp(16px,1.8vw,20px)}
@media(max-width:760px){
 .atlas-results{padding:13px 12px 14px;border-radius:18px}
 .atlas-results-head{margin-bottom:9px}
 .atlas-results-head>span{font-size:15px}
 .atlas-total-grid{gap:7px}
 .atlas-total-card{min-height:70px;padding:7px 5px;gap:3px;border-radius:13px}
 .atlas-total-icon{font-size:15px}
 .atlas-total-card>span:nth-child(2){font-size:10px;line-height:1.15}
 .atlas-total-card b{font-size:clamp(14px,4vw,17px)}
}

/* ATLAS home visual refinement — dashboard only */
.atlas-results-head{justify-content:space-between}
.atlas-results-head small{font-size:11px;color:#8fa4bd;font-weight:500}
.atlas-total-card .atlas-total-icon{width:34px;height:30px;display:grid;place-items:center}
.atlas-total-card .atlas-total-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.atlas-total-card.sales .atlas-total-icon{color:#8bc7f5}
.atlas-total-card.profit .atlas-total-icon{color:#65df9b}
.atlas-total-card> b i{display:inline-block;font-style:normal;font-size:12px;line-height:1.2;margin:0 3px;color:#c9d9eb}
.atlas-direction-icon{overflow:hidden}
.atlas-direction-icon svg{width:100%;height:100%;display:block}
.atlas-direction.chem .atlas-direction-icon{background:rgba(105,236,180,.08)}
@media(max-width:760px){
 .atlas-total-card .atlas-total-icon{width:26px;height:23px}
 .atlas-total-card .atlas-total-icon svg{width:24px;height:24px}
 .atlas-total-card> b i{font-size:10px;margin:0 1px}
 .atlas-results-head small{font-size:10px}
}

.atlas-total-card .atlas-tenge-icon{font-size:27px;font-weight:750;line-height:1;letter-spacing:-1px;color:#65df9b}


/* Compact client directory and safer client selection */
.client-directory-card{padding:0;overflow:hidden}
.client-directory-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;padding:14px 15px;cursor:pointer}
.client-directory-summary::-webkit-details-marker{display:none}
.client-summary-main{min-width:0;display:grid;gap:5px}
.client-summary-main>b{font-size:15px;overflow-wrap:anywhere}
.client-summary-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--mut);font-size:11px}
.client-summary-chevron{color:var(--mut);font-size:18px;transition:transform .15s}
.client-directory-card[open] .client-summary-chevron{transform:rotate(180deg)}
.client-directory-expanded{padding:0 14px 14px;border-top:1px solid var(--br)}
.client-pick-result{text-align:left;width:100%;display:block;padding:12px 14px;margin:7px 0}
.client-pick-result .mut{margin-top:3px}

/* Order client picker spacing */
.order-client-tools{display:grid;gap:14px;margin:14px 0 20px}
.order-client-tools>.order-new-client{margin:0 0 2px;min-height:52px}
.order-client-tools>#cs{margin:0}
.order-client-tools>#cl{margin:0}


/* Compact expandable cards in the order journal */
.journal-order-card{padding:0;overflow:hidden}
.journal-order-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;cursor:pointer;list-style:none}
.journal-order-summary::-webkit-details-marker{display:none}
.journal-order-main{min-width:0;flex:1}
.journal-order-title,.journal-order-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}
.journal-order-title{flex-wrap:wrap}
.journal-order-client{margin-top:5px;font-weight:600;overflow-wrap:anywhere}
.journal-order-bottom{margin-top:7px}
.journal-order-total{font-size:20px}
.journal-order-status{font-weight:650;text-align:right}
.journal-order-paid{margin-top:4px}
.journal-order-chevron{flex:none;color:var(--muted,#94a3b8);font-size:22px;transition:transform .18s}
.journal-order-card[open] .journal-order-chevron{transform:rotate(180deg)}
.journal-order-expanded{padding:0 16px 16px;border-top:1px solid var(--line,#2b3a4d);display:grid;gap:9px}
.journal-order-expanded>.tot{margin-top:3px}
.journal-order-expanded>.row{flex-wrap:wrap}
@media(max-width:480px){.journal-order-summary{padding:13px}.journal-order-expanded{padding:0 13px 13px}.journal-order-total{font-size:19px}}

/* Company results: three balanced metrics in one row on mobile and desktop */
.atlas-total-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px}
.atlas-total-grid-three .atlas-total-card{min-width:0}
@media(max-width:600px){
 .atlas-total-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px}
 .atlas-total-grid-three .atlas-total-card{min-height:94px;padding:9px 5px;gap:5px}
 .atlas-total-grid-three .atlas-total-card .atlas-total-icon{width:25px;height:23px}
 .atlas-total-grid-three .atlas-total-card .atlas-total-icon svg{width:23px;height:23px}
 .atlas-total-grid-three .atlas-total-card .atlas-tenge-icon{font-size:23px}
 .atlas-total-grid-three .atlas-total-card>span:nth-child(2){font-size:10px;line-height:1.15}
 .atlas-total-grid-three .atlas-total-card b{font-size:clamp(12px,3.5vw,16px);white-space:nowrap}
}

/* Compact three-metric stock summary on the home dashboard */
.dashboard-stock-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 24px}
.dashboard-stock-summary .kpi{min-width:0;min-height:88px;padding:12px 10px}
.dashboard-stock-summary .kpi span{font-size:clamp(9px,2.6vw,12px);line-height:1.3;overflow-wrap:anywhere}
.dashboard-stock-summary .kpi b{font-size:clamp(14px,4vw,21px);line-height:1.2;overflow-wrap:anywhere;margin:7px 0 2px}

/* Warehouse overview: paper packs, chemistry pieces and total value */
.stock-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:center}
.stock-overview-item{min-width:0}
.stock-overview-item h2{font-size:clamp(15px,4vw,22px);line-height:1.25;margin:8px 0 0;overflow-wrap:anywhere}
.stock-overview-item .mut{font-size:clamp(10px,2.8vw,13px);line-height:1.35}
@media(max-width:390px){.stock-overview{gap:7px}.stock-overview-item h2{font-size:14px}}

/* Align the three warehouse overview values on one baseline */
.stock-overview{align-items:stretch}
.stock-overview-item{display:flex;flex-direction:column;justify-content:flex-start}
.stock-overview-item .mut{min-height:2.7em;display:flex;align-items:flex-start}
.stock-overview-item h2{margin:8px 0 0;white-space:nowrap;overflow-wrap:normal;font-variant-numeric:tabular-nums}
@media(max-width:390px){.stock-overview-item h2{font-size:clamp(13px,3.7vw,15px)}}

/* Keep dashboard warehouse KPI values aligned despite wrapped labels */
.dashboard-stock-summary .kpi{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.dashboard-stock-summary .kpi>span:first-child{display:block;min-height:3.9em;line-height:1.3}
.dashboard-stock-summary .kpi>b{display:block;margin-top:7px;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.2}

/* Website inquiry active/archive switch: always show both options together */
.website-inquiry-filters{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  width:100%;overflow:visible;padding:4px 0 10px;margin:8px 0;
}
.website-inquiry-filters button{
  display:block;width:100%;min-width:0;max-width:100%;flex:none;
  margin:0;padding:11px 8px;white-space:nowrap;text-align:center;
  font-size:13px;border-radius:999px;
}