:root{
--bg:#07110d;--bg2:#0d1a14;--card:#101c16;--card2:#13241c;--ink:#e7f5ec;--muted:#8fa99a;
--line:#244133;--green:#6ee7a8;--green2:#3fbf7f;--red:#ff7b7b;--blue:#79d7ff;--amber:#f6c96b;
--violet:#b99cff;--soft:#0b1712;--shadow:0 18px 40px rgba(0,0,0,.34);--grid:#1c3529
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 15% 0%,#143223 0,#07110d 42%,#050907 100%);font-family:Inter,Consolas,ui-monospace,system-ui,Segoe UI,Arial,sans-serif;color:var(--ink)}
.app{max-width:1680px;margin:auto;padding:24px}
.top{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}
.brand{display:flex;gap:14px;align-items:center}
.logo{width:50px;height:50px;border-radius:16px;background:radial-gradient(circle at 30% 20%,#9dffbd,#175c38 55%,#06100b);box-shadow:0 0 28px rgba(110,231,168,.28)}
h1{font-size:24px;margin:0;letter-spacing:.02em}.sub,.pill,.help{font-size:12px;color:var(--muted);line-height:1.35}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav button,.btn{border:1px solid var(--line);background:#0c1712;padding:10px 14px;border-radius:999px;font-weight:800;cursor:pointer;color:var(--ink)}
.nav button:hover,.btn:hover{border-color:#4c7f63;box-shadow:0 0 0 3px rgba(110,231,168,.08)}
#langToggle{border-color:#3f7758;color:#aaffc8}.nav button.active,.btn.primary{background:linear-gradient(180deg,#173b2a,#10251b);border-color:#4aae75;color:#d9ffe7}
.btn.danger{background:#251111;color:#ffb2b2;border-color:#673030}.btn.small{padding:6px 9px;font-size:12px}
.card{background:linear-gradient(180deg,rgba(16,28,22,.96),rgba(10,18,14,.96));border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:16px}
.grid{display:grid;gap:14px}.kpis{grid-template-columns:repeat(6,minmax(150px,1fr));margin-bottom:14px}.metricGrid{grid-template-columns:repeat(8,minmax(150px,1fr));margin-bottom:14px}
.kpi .label,.metric .label{font-size:11px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.07em}.kpi .val,.metric .val{font-size:21px;font-weight:900;margin-top:8px}.metric .note{font-size:11px;color:var(--muted);margin-top:4px}
.pos{color:var(--green)}.neg{color:var(--red)}
.page{display:none}.page.active{display:block}.cols{display:grid;grid-template-columns:450px 1fr;gap:14px}.cols2{display:grid;grid-template-columns:1fr 1fr;gap:14px}.cols3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
label{display:block;font-size:12px;color:var(--muted);font-weight:900;margin:10px 0 5px}.req:after{content:" *";color:var(--red)}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:12px;background:#07120d;padding:10px 11px;font-size:14px;color:var(--ink);outline:none}
input:focus,select:focus,textarea:focus{border-color:#6ee7a8;box-shadow:0 0 0 3px rgba(110,231,168,.14)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin:10px 0}
.msg{display:none;padding:10px;border-radius:12px;font-size:13px;margin-top:10px}.msg.ok{display:block;background:#0e2a1b;color:#aaffc8;border:1px solid #235c3c}.msg.err{display:block;background:#2a1111;color:#ffb2b2;border:1px solid #673030}
table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:10px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}th:first-child,td:first-child{text-align:left}th{background:#0a1510;color:#99b8a6;text-transform:uppercase;font-size:11px;position:sticky;top:0}
tr:hover{background:#0c1c14}.badge{display:inline-flex;border-radius:999px;padding:4px 8px;font-size:12px;font-weight:900;background:#12301f;color:#95ffbc;border:1px solid #2d7048}.badge.red{background:#311313;color:#ffb2b2;border-color:#743838}.badge.blue{background:#102530;color:#9be6ff;border-color:#2f6e83}.badge.amber{background:#2d2310;color:#ffd98a;border-color:#735823}
.canvasBox{height:360px;min-height:360px}.canvasBig{height:450px;min-height:450px}
canvas{width:100%!important;height:100%!important;display:block;background:linear-gradient(180deg,#08130e,#060d09);border:1px solid #1b3528;border-radius:14px}
.soft{background:linear-gradient(180deg,#0a1711,#07110d);border:1px solid var(--line);border-radius:14px;padding:12px}
.sectionTitle{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}h2{font-size:17px;margin:0;color:#eafff0}.insight{display:grid;gap:8px}.insight div{background:#0a1711;border:1px solid var(--line);border-radius:12px;padding:10px;font-size:13px}
.bar{height:12px;border-radius:999px;background:#17271f;overflow:hidden}.bar span{display:block;height:100%;background:linear-gradient(90deg,#79d7ff,#6ee7a8)}
pre{white-space:pre-wrap;max-height:320px;overflow:auto}.footer{font-size:12px;color:var(--muted);margin-top:14px}.componentTitle{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:8px}.componentInfo{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.componentInfo div{background:#0a1711;border:1px solid var(--line);border-radius:12px;padding:8px;font-size:12px}.wideTable{overflow:auto;max-height:460px}.navHub button{width:100%}
@media(max-width:1150px){.kpis,.metricGrid{grid-template-columns:repeat(2,1fr)}.cols,.cols2,.cols3,.row,.row3,.componentInfo{grid-template-columns:1fr}}

/* v2.0.0 product hardening */
html{scroll-behavior:smooth}
body{min-height:100vh}
button,input,select,textarea{font:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.btn:focus-visible{outline:3px solid rgba(121,215,255,.8);outline-offset:2px}
.topActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.statusChip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#0a1711;border-radius:999px;padding:8px 11px;font-size:12px;font-weight:800;white-space:nowrap}
.statusDot{width:8px;height:8px;border-radius:50%;background:var(--green)}
.statusChip[data-state="busy"] .statusDot{background:var(--blue);animation:pulse 1s infinite}
.statusChip[data-state="slow"] .statusDot{background:var(--amber);animation:pulse .7s infinite}
.statusChip[data-state="error"] .statusDot{background:var(--red)}
@keyframes pulse{50%{opacity:.35}}
.note{font-size:11px;color:var(--muted);margin-top:4px}
.rowActions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.toolbar.compact{align-items:center}
.toolbar.compact input{min-width:220px;flex:1}
[hidden]{display:none!important}
.badge.amber{background:#2d2310;color:#ffd98a;border-color:#735823}
.pill.pos{color:var(--green)}.pill.neg{color:var(--red)}
.wideTable table{min-width:760px}
#activityTable td:nth-child(6){text-align:left;max-width:420px;white-space:normal}
#ordersTable th:last-child,#ordersTable td:last-child{text-align:right}
canvas{touch-action:pan-y}
.help code{font-family:inherit}
@media(max-width:900px){
  .app{padding:16px 14px 96px}
  .top{align-items:flex-start;flex-direction:column}
  .topActions{width:100%;justify-content:space-between}
  .nav{position:fixed;left:0;right:0;bottom:0;z-index:1000;display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));background:rgba(5,9,7,.96);border-top:1px solid var(--line);backdrop-filter:blur(16px)}
  .nav button{min-width:0;padding:10px 4px;border-radius:10px;font-size:10px;line-height:1.15;min-height:44px}
  #langToggle{font-size:11px}
  .statusChip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  input,select,textarea{font-size:16px}
  .toolbar{align-items:stretch}
  .toolbar>.btn,.toolbar>button,.toolbar>label.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .rowActions .btn{min-height:38px}
  .canvasBox{height:300px;min-height:300px}.canvasBig{height:340px;min-height:340px}
  th,td{padding:9px 8px}
}
@media(max-width:560px){
  .app{padding-left:10px;padding-right:10px}
  h1{font-size:20px}
  .logo{width:42px;height:42px;border-radius:13px}
  .kpis,.metricGrid{grid-template-columns:1fr 1fr}
  .kpi .val,.metric .val{font-size:17px}
  .card{padding:13px;border-radius:15px}
  .nav button{font-size:9px;padding:8px 2px}
  .canvasBox{height:260px;min-height:260px}.canvasBig{height:300px;min-height:300px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

#orderForm [data-mode="estimated"]{border-style:dashed;border-color:#4aae75;background:rgba(63,191,127,.05)}

.cols>*,.cols2>*,.cols3>*,.row>*,.row3>*,.grid>*{min-width:0}
@media(max-width:1150px){
  .cols,.cols2,.cols3,.row,.row3,.componentInfo{grid-template-columns:minmax(0,1fr)}
}