:root { --ink:#14233b; --muted:#65758b; --line:#dfe6eb; --canvas:#f3f6f7; --surface:#fff; --navy:#132b44; --navy-soft:#1c3b59; --teal:#087f73; --teal-soft:#e7f5f2; --orange:#ed6c3b; --shadow:0 14px 34px rgba(20,35,59,.08); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--canvas); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:var(--canvas); }
button,input { font:inherit; }
button { cursor:pointer; }
.shell { display:grid; grid-template-columns:260px 1fr; min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:28px 18px 20px; color:#fff; background:linear-gradient(165deg,var(--navy),#0c1f32); }
.brand { display:flex; gap:12px; align-items:center; margin:0 10px 38px; color:#fff; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; color:#fff; background:var(--orange); font-size:24px; font-weight:800; }
.brand strong,.brand small,.sidebar-foot strong,.sidebar-foot small { display:block; }
.brand strong { font-size:20px; letter-spacing:.08em; }
.brand small { margin-top:2px; color:#aebed0; font-size:11px; }
nav { display:grid; gap:7px; }
.nav-item { display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border:0; border-radius:9px; color:#b9c7d4; background:transparent; text-align:left; font-size:14px; }
.nav-item span { width:18px; color:#7894ad; font-size:18px; text-align:center; }
.nav-item:hover,.nav-item.active { color:#fff; background:var(--navy-soft); }
.nav-item.active { box-shadow:inset 3px 0 var(--orange); }
.nav-item.active span { color:#4fd2bf; }
.sidebar-foot { display:flex; gap:10px; align-items:center; margin-top:auto; padding:16px 10px 0; border-top:1px solid rgba(255,255,255,.1); }
.sidebar-foot strong { font-size:11px; }
.sidebar-foot small { margin-top:3px; color:#8fa4b8; font-size:10px; }
.environment-dot { width:9px; height:9px; border-radius:50%; background:#f1b24a; box-shadow:0 0 0 4px rgba(241,178,74,.12); }
main { min-width:0; padding:30px 34px 48px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:28px; }
.eyebrow { margin:0 0 6px; color:var(--teal); font-size:10px; font-weight:800; letter-spacing:.16em; }
.eyebrow.light { color:#86ddd0; }
h1,h2,p { margin-top:0; }
h1 { margin-bottom:0; font-size:26px; letter-spacing:-.03em; }
h2 { margin-bottom:8px; font-size:20px; letter-spacing:-.02em; }
.top-actions { display:flex; align-items:center; gap:10px; }
.connection { padding:7px 10px; border-radius:999px; font-size:11px; font-weight:700; }
.connection.pending { color:#7d6743; background:#fff5df; }
.connection.online { color:#087164; background:var(--teal-soft); }
.connection.error { color:#9f3429; background:#ffebe8; }
.button { min-height:40px; padding:0 16px; border:1px solid transparent; border-radius:8px; font-weight:700; font-size:13px; }
.button.primary { color:#fff; background:var(--teal); }
.button.primary:hover { background:#066b61; }
.button.secondary { color:var(--ink); border-color:var(--line); background:#fff; }
.button.light { align-self:end; color:var(--navy); background:#fff; }
.view { display:none; }
.view.active { display:block; }
.dashboard-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:18px; }
.dashboard-heading h2 { margin-bottom:4px; font-size:25px; }
.dashboard-heading p:not(.eyebrow) { margin:0; color:var(--muted); }
.dashboard-filters { display:flex; gap:7px; }
.filter { min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:8px; color:var(--muted); background:#fff; font-size:11px; font-weight:700; }
.filter.active { color:var(--teal); border-color:#9ed4cc; background:var(--teal-soft); }
.metric-grid.operations { margin-top:0; }
.metric.danger { border-top:3px solid #d85747; }
.metric.warning { border-top:3px solid #e7a833; }
.metric.success { border-top:3px solid var(--teal); }
.metric.danger strong { color:#b33e32; }
.metric.warning strong { color:#a76b00; }
.dashboard-grid { grid-template-columns:minmax(0,1.55fr) minmax(270px,.65fr); }
.panel-head.padded { padding:20px 20px 0; }
.table-scroll { overflow-x:auto; }
.metric-cell { text-align:center; font-weight:800; }
.alerts-panel { min-height:250px; }
.alert-empty { display:grid; place-items:center; min-height:160px; color:var(--muted); text-align:center; }
.alert-empty>span { display:grid; place-items:center; width:38px; height:38px; margin-bottom:10px; border-radius:50%; color:var(--teal); background:var(--teal-soft); font-weight:900; }
.alert-empty strong,.alert-empty small { display:block; }
.alert-empty small { margin-top:5px; font-size:10px; }
.welcome-panel { display:flex; justify-content:space-between; gap:28px; padding:28px 30px; border-radius:15px; color:#fff; background:linear-gradient(115deg,#173f59,#087f73); box-shadow:var(--shadow); }
.welcome-panel h2 { max-width:560px; margin-bottom:10px; font-size:27px; }
.welcome-panel p:not(.eyebrow) { max-width:640px; margin-bottom:0; color:#d5ebe8; line-height:1.55; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:18px 0; }
.metric { padding:18px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.metric span,.metric small { display:block; color:var(--muted); }
.metric span { font-size:12px; font-weight:700; }
.metric strong { display:block; margin:11px 0 4px; font-size:27px; }
.metric small { font-size:10px; }
.content-grid { display:grid; grid-template-columns:1.35fr .85fr; gap:18px; }
.panel { padding:22px; border:1px solid var(--line); border-radius:13px; background:var(--surface); box-shadow:0 7px 18px rgba(20,35,59,.035); }
.panel-head,.section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.panel-head { margin-bottom:16px; }
.panel-head h2 { margin-bottom:0; font-size:17px; }
.text-button { border:0; color:var(--teal); background:transparent; font-size:12px; font-weight:800; }
.shop-list { display:grid; gap:9px; }
.shop-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid #edf1f3; }
.shop-row:first-child { border-top:0; }
.shop-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:var(--teal); background:var(--teal-soft); font-weight:800; }
.shop-row strong,.shop-row small { display:block; }
.shop-row small { margin-top:3px; color:var(--muted); font-size:10px; }
.status-pill { margin-left:auto; padding:5px 9px; border-radius:999px; color:#087164; background:var(--teal-soft); font-size:10px; font-weight:800; }
.next-steps ol { margin:0; padding:0; list-style:none; }
.next-steps li { display:flex; gap:12px; padding:13px 0; border-top:1px solid #edf1f3; }
.next-steps li>span { display:grid; place-items:center; flex:0 0 27px; height:27px; border-radius:8px; color:var(--teal); background:var(--teal-soft); font-size:11px; font-weight:800; }
.next-steps strong,.next-steps small { display:block; }
.next-steps small { margin-top:4px; color:var(--muted); line-height:1.4; }
.section-heading { margin-bottom:20px; }
.section-heading h2 { margin-bottom:5px; font-size:25px; }
.section-heading p:not(.eyebrow) { margin:0; color:var(--muted); }
.table-panel { padding:0; overflow:hidden; }
table { width:100%; border-collapse:collapse; }
th,td { padding:15px 18px; border-bottom:1px solid #e8edef; text-align:left; font-size:13px; }
th { color:var(--muted); background:#f8fafb; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
tbody tr:last-child td { border-bottom:0; }
.empty-state { padding:24px 0; color:var(--muted); text-align:center; font-size:12px; }
.placeholder-card { display:grid; place-items:center; min-height:440px; padding:40px; border:1px dashed #cbd5dc; border-radius:16px; background:rgba(255,255,255,.62); text-align:center; }
.placeholder-card>span { display:grid; place-items:center; width:58px; height:58px; margin-bottom:18px; border-radius:16px; color:var(--teal); background:var(--teal-soft); font-size:27px; }
.placeholder-card p:last-child { max-width:480px; color:var(--muted); }
dialog { width:min(460px,calc(100% - 32px)); padding:0; border:0; border-radius:14px; box-shadow:0 28px 80px rgba(8,24,39,.28); }
dialog::backdrop { background:rgba(10,25,40,.62); backdrop-filter:blur(2px); }
dialog form { padding:24px; }
.dialog-head { display:flex; justify-content:space-between; gap:20px; }
.dialog-head button { align-self:start; border:0; color:var(--muted); background:transparent; font-size:25px; }
dialog p:not(.eyebrow) { color:var(--muted); font-size:13px; line-height:1.5; }
label { display:block; margin-bottom:7px; font-size:12px; font-weight:800; }
input { width:100%; height:44px; padding:0 12px; border:1px solid #cbd6dd; border-radius:8px; outline:none; }
input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(8,127,115,.12); }
.form-error { min-height:18px; margin:7px 0 0; color:#aa382c!important; }
.dialog-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:16px; }
@media (max-width:1050px) { .metric-grid{grid-template-columns:repeat(2,1fr)} .content-grid{grid-template-columns:1fr} .connection{display:none} }
@media (max-width:760px) { .shell{display:block} .sidebar{position:static;width:100%;height:auto;padding:18px} .brand{margin-bottom:18px} nav{grid-template-columns:repeat(2,minmax(0,1fr))} .sidebar-foot{display:none} main{padding:22px 16px 38px} .topbar,.welcome-panel,.section-heading{align-items:stretch;flex-direction:column} .top-actions{flex-wrap:wrap} .welcome-panel .button{align-self:start} .metric-grid{grid-template-columns:1fr 1fr} }
@media (max-width:480px) { nav,.metric-grid{grid-template-columns:1fr} .top-actions .button{flex:1} th:nth-child(3),td:nth-child(3){display:none} }

.selection-bar { display:flex; justify-content:space-between; gap:16px; padding:14px 18px; color:var(--muted); border-bottom:1px solid var(--line); background:#fbfcfc; font-size:12px; }
.selection-bar strong { color:var(--ink); }
.connection-select { min-width:190px; height:38px; padding:0 10px; border:1px solid #cbd6dd; border-radius:8px; background:#fff; }
.button.compact { min-height:36px; padding:0 12px; }
.button:disabled { cursor:not-allowed; opacity:.5; }
td input[type=checkbox], th input[type=checkbox] { width:17px; height:17px; accent-color:var(--teal); }
.process-status { min-height:20px; color:var(--teal)!important; font-weight:700; }
.process-status a { color:var(--teal); }

.order-actions { display:flex; flex-wrap:wrap; gap:5px; min-width:190px; }
.order-actions .text-button { padding:4px 6px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.order-actions .text-button:disabled { opacity:.45; cursor:not-allowed; }