:root {
  --navy: #16213c;
  --navy-soft: #23314e;
  --blue: #2f6be5;
  --blue-light: #edf3ff;
  --green: #19a979;
  --amber: #f2a93b;
  --red: #e45656;
  --purple: #8067d8;
  --cyan: #22a9b7;
  --ink: #17213a;
  --muted: #7b8499;
  --line: #e8ebf2;
  --bg: #f5f7fb;
  --white: #fff;
  --shadow: 0 6px 22px rgba(29, 43, 76, .07);
  --radius: 14px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "DM Sans", sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { cursor: pointer; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; flex-direction: column; width: 238px; background: var(--navy); color: #fff; overflow-y: auto; transition: transform .3s ease; }
.brand { display: flex; align-items: center; gap: 11px; height: 82px; padding: 0 25px; border-bottom: 1px solid rgba(255,255,255,.07); font-family: Manrope, sans-serif; font-size: 20px; letter-spacing: -.8px; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; background: linear-gradient(145deg,#4f87f1,#2e62d0); }
.brand-mark svg { width: 22px; stroke: #fff; stroke-width: 2.7; }
.brand strong { font-weight: 800; }.brand span { color: #65a0ff; font-weight: 600; }
.main-nav { padding: 17px 13px; flex: 1; }
.nav-label { margin: 18px 12px 8px; color: #697795; font-size: 9px; font-weight: 700; letter-spacing: 1.3px; }
.nav-label:first-child { margin-top: 2px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 43px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: #aeb8cc; font-size: 13px; text-align: left; transition: .2s; }
.nav-item:hover { color: white; background: rgba(255,255,255,.055); transform: translateX(2px); }
.nav-item.active { color: #fff; background: linear-gradient(90deg,rgba(58,112,224,.27),rgba(58,112,224,.12)); }
.nav-item.active::before { content: ""; position: absolute; left: -13px; width: 3px; height: 25px; border-radius: 0 3px 3px 0; background: #4b83ee; }
.nav-icon { display: grid; place-items: center; width: 22px; }.nav-icon svg { width: 18px; }
.nav-badge { margin-left: auto; min-width: 22px; padding: 3px 6px; border-radius: 10px; background: #db5a63; color: #fff; font-size: 9px; font-weight: 700; text-align: center; }
.status-dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #31d49a; box-shadow: 0 0 0 3px rgba(49,212,154,.13); }
.sidebar-bottom { padding: 10px 13px 14px; }
.system-card { display: grid; grid-template-columns: 30px 1fr 20px; align-items: center; gap: 8px; padding: 12px 10px; border: 1px solid rgba(118,152,220,.22); border-radius: 10px; background: linear-gradient(145deg,rgba(55,99,185,.22),rgba(31,46,77,.2)); }
.system-card-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 8px; background: rgba(78,133,238,.18); color: #75a5ff; }.system-card-icon svg { width: 17px; }
.system-card b { display: block; font-size: 10px; }.system-card span { color: #7e8ba7; font-size: 8px; white-space: nowrap; }
.system-card button { border: 0; background: none; color: #7898d4; }
.sidebar-footer { display: flex; gap: 4px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar-footer button { display: flex; align-items: center; justify-content: center; gap: 5px; flex: 1; border: 0; background: none; color: #7f8ba3; font-size: 9px; }.sidebar-footer svg { width: 14px; }

.main-content { margin-left: 238px; width: calc(100% - 238px); min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; min-height: 82px; padding: 0 32px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(12px); }
.breadcrumbs { display: flex; gap: 8px; color: #98a0b1; font-size: 10px; }.breadcrumbs b { color: #ccd1dc; }
.topbar h1 { margin: 4px 0 0; font-family: Manrope,sans-serif; font-size: 20px; letter-spacing: -.5px; }
.topbar-left { display: flex; align-items: center; gap: 10px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.search { display: flex; align-items: center; width: 265px; height: 39px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: #f8f9fc; color: #9aa3b5; transition: .2s; }
.search:focus-within { border-color: #9bb8f1; background: #fff; box-shadow: 0 0 0 3px rgba(47,107,229,.08); }
.search svg { width: 17px; }.search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; padding: 0 8px; font-size: 11px; color: var(--ink); }
.search kbd { padding: 3px 5px; border: 1px solid #e0e4ec; border-radius: 4px; background: #fff; color: #9aa2b2; font: 9px "DM Sans"; }
.icon-button { position: relative; display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #647087; }.icon-button svg { width: 18px; }
.notification-btn span { position: absolute; top: 8px; right: 9px; width: 6px; height: 6px; border: 1px solid #fff; border-radius: 50%; background: #e45656; }
.profile-button { display: flex; align-items: center; gap: 8px; padding: 2px 2px 2px 8px; border: 0; border-left: 1px solid var(--line); background: none; text-align: left; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(145deg,#ddedff,#bad5fa); color: #2e5c9c; font-size: 11px; font-weight: 700; }
.profile-button b,.profile-button small { display: block; }.profile-button b { font-size: 10px; }.profile-button small { margin-top: 2px; color: #9099ab; font-size: 8px; }.profile-button svg { width: 15px; color: #9da5b5; }
.mobile-menu { display: none; }

.page-content { padding: 24px 32px 42px; }
.welcome-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 21px; }
.welcome-row p { margin: 0; color: #828b9e; font-size: 12px; }.welcome-row strong { color: #566176; font-weight: 500; }
.welcome-actions { display: flex; gap: 9px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 37px; padding: 0 14px; border-radius: 8px; font-size: 10px; font-weight: 600; transition: .2s; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(34,48,79,.1); }
.btn svg { width: 15px; }.btn-secondary { border: 1px solid var(--line); background: #fff; color: #5d687d; }.btn-primary { border: 1px solid var(--blue); background: var(--blue); color: #fff; box-shadow: 0 4px 9px rgba(47,107,229,.17); }
.metrics-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
.metric-card { min-width: 0; padding: 18px 19px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 2px 8px rgba(31,45,75,.025); }
.metric-top { display: flex; align-items: center; justify-content: space-between; }
.metric-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; font-weight: 700; }.metric-icon svg { width: 17px; }
.metric-icon.blue { color: var(--blue); background: var(--blue-light); }.metric-icon.green { color: var(--green); background: #eaf9f4; }.metric-icon.amber { color: var(--amber); background: #fff6e6; }.metric-icon.purple { color: var(--purple); background: #f2effc; }
.trend,.tag { padding: 4px 6px; border-radius: 5px; font-size: 8px; font-weight: 700; }.trend.up { color: var(--green); background: #e9f8f3; }.trend.down { color: #cf754e; background: #fff2ea; }.tag.neutral { color: #747d91; background: #f1f3f7; }
.metric-card p { margin: 13px 0 4px; color: #858ea0; font-size: 10px; }.metric-card h2 { margin: 0; font-family: Manrope,sans-serif; font-size: 22px; letter-spacing: -.8px; }.metric-card h2 em { color: #7f899c; font: 500 10px "DM Sans"; letter-spacing: 0; }
.metric-card small { display: block; margin-top: 5px; color: #a0a8b7; font-size: 8px; }
.mini-progress { height: 3px; margin-top: 10px; border-radius: 3px; background: #edf0f4; overflow: hidden; }.mini-progress i { display: block; height: 100%; background: var(--green); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0,1.63fr) minmax(310px,.87fr); gap: 15px; margin-top: 15px; }
.lower-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(315px,.95fr); gap: 15px; margin-top: 15px; }
.panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 13px; }
.panel-header h3 { margin: 0; font: 700 13px Manrope,sans-serif; letter-spacing: -.2px; }.panel-header p { margin: 4px 0 0; color: #929bad; font-size: 9px; }
.panel-header select { padding: 7px 24px 7px 9px; border: 1px solid var(--line); border-radius: 7px; outline: none; color: #6d7689; background: #fff; font-size: 9px; }
.text-button { border: 0; background: none; color: var(--blue); font-size: 9px; font-weight: 600; }.text-button span { margin-left: 4px; }
.chart-legend { display: flex; justify-content: flex-end; gap: 14px; padding: 0 25px; color: #6e7789; font-size: 8px; }.chart-legend span { display:flex;align-items:center;gap:5px }.chart-legend i { width:7px;height:7px;border-radius:50% }.sales-dot { background:var(--blue) }.purchases-dot { background:#aab5c7 }
.chart-wrap { display: flex; height: 237px; padding: 16px 20px 16px 14px; }
.y-axis { display: flex; flex-direction: column; justify-content: space-between; width: 39px; padding: 1px 0 20px; color: #a2aaba; font-size: 7px; }
.chart-area { position: relative; flex: 1; min-width: 0; }
.grid-lines { position: absolute; inset: 0 0 20px; display:flex;flex-direction:column;justify-content:space-between }.grid-lines i { display:block;border-top:1px dashed #edf0f5 }
.line-chart { position:absolute;inset:0 0 20px;width:100%;height:calc(100% - 20px);overflow:visible }.area { fill:url(#salesFill);stroke:none }.sales-line { fill:none;stroke:var(--blue);stroke-width:2.3;vector-effect:non-scaling-stroke }.purchase-line { fill:none;stroke:#b7c0d0;stroke-width:1.7;stroke-dasharray:5 5;vector-effect:non-scaling-stroke }.data-points circle { fill:#fff;stroke:var(--blue);stroke-width:2;vector-effect:non-scaling-stroke }
.x-axis { position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;color:#9aa2b3;font-size:7px }
.chart-tooltip { position:absolute;top:8px;right:0;display:flex;flex-wrap:wrap;gap:1px 8px;width:79px;padding:7px 9px;border:1px solid #e4e8f0;border-radius:7px;background:#fff;box-shadow:0 7px 20px rgba(40,55,90,.12) }.chart-tooltip::after { content:"";position:absolute;left:50%;bottom:-4px;width:7px;height:7px;background:#fff;border-right:1px solid #e4e8f0;border-bottom:1px solid #e4e8f0;transform:rotate(45deg) }.chart-tooltip small { width:100%;color:#9ca4b4;font-size:6px }.chart-tooltip b { font-size:9px }.chart-tooltip span { color:var(--green);font-size:7px;font-weight:700 }

.alert-list { padding: 2px 13px 13px; }
.alert-item { display: grid; grid-template-columns: 37px 1fr auto; align-items: center; gap: 9px; width: 100%; padding: 11px 7px; border: 0; border-bottom: 1px solid #f0f2f6; background: #fff; text-align: left; transition: .2s; }.alert-item:last-child { border-bottom:0 }.alert-item:hover { padding-left:11px;background:#fafbfe;border-radius:8px }
.alert-icon { display:grid;place-items:center;width:34px;height:34px;border-radius:9px }.alert-icon svg { width:16px }.alert-icon.red { color:var(--red);background:#fff0f0 }.alert-icon.amber { color:var(--amber);background:#fff6e7 }.alert-icon.purple { color:var(--purple);background:#f2effc }.alert-icon.cyan { color:var(--cyan);background:#e9f8fa }.alert-icon.green { color:var(--green);background:#e9f8f3 }
.alert-item b,.alert-item small { display:block }.alert-item b { font-size:9px }.alert-item small { margin-top:3px;color:#949cad;font-size:7px }
.alert-count { min-width:22px;padding:4px 6px;border-radius:10px;text-align:center;font-size:8px;font-weight:700 }.alert-count.red { color:var(--red);background:#fff0f0 }.alert-count.amber { color:#d58b1a;background:#fff4df }.alert-count.purple { color:var(--purple);background:#f2effc }.alert-count.cyan { color:var(--cyan);background:#e9f8fa }

.table-wrap { overflow-x:auto }.operations-panel table,.module-table-panel table { width:100%;border-collapse:collapse;white-space:nowrap }.operations-panel th,.module-table-panel th { padding:13px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fafbfc;color:#788297;font-size:11px;text-align:left;letter-spacing:.45px }.operations-panel td,.module-table-panel td { padding:15px 20px;border-bottom:1px solid #f0f2f5;color:#59657b;font-size:13px;line-height:1.45 }.operations-panel tbody tr:last-child td,.module-table-panel tbody tr:last-child td { border-bottom:0 }.operations-panel tbody tr:hover,.module-table-panel tbody tr:hover { background:#fafbfe }
.operation-cell { display:flex;align-items:center;gap:8px }.operation-cell .op-symbol { display:grid;place-items:center;width:31px;height:31px;border-radius:7px;font-weight:700 }.op-symbol.in { color:var(--green);background:#e9f8f3 }.op-symbol.out { color:var(--blue);background:#edf3ff }.op-symbol.prod { color:var(--purple);background:#f2effc }.operation-cell b { display:block;color:#364057;font-size:12px }.operation-cell small { color:#929bad;font-size:10px }
.status-pill { display:inline-block;padding:5px 9px;border-radius:10px;font-size:10px;font-weight:700 }.status-pill.done { color:#188762;background:#e8f7f1 }.status-pill.process { color:#386cc1;background:#eaf1fd }.status-pill.pending { color:#b37b24;background:#fff4e2 }.row-more { border:0;background:none;color:#a0a8b7;letter-spacing:1px }
.edit-row-btn { padding:7px 11px;border:1px solid #dce4f2;border-radius:7px;background:#f6f9ff;color:var(--blue);font-size:10px;font-weight:700;transition:.2s }.edit-row-btn:hover { border-color:#a9c0ee;background:#eaf1ff;transform:translateY(-1px) }
.more-button { border:0;background:none;color:#8e97a9;font-weight:700;letter-spacing:1px }
.production-stats { display:grid;grid-template-columns:135px 1fr;align-items:center;padding:5px 22px 15px }.donut { display:grid;place-items:center;width:105px;height:105px;border-radius:50%;background:conic-gradient(var(--blue) 0 44%,var(--purple) 44% 62%,var(--green) 62% 72%,var(--amber) 72% 78%,#edf0f5 78% 100%) }.donut::before { content:"";position:absolute;width:71px;height:71px;border-radius:50%;background:#fff }.donut span { position:relative;text-align:center }.donut b,.donut small { display:block }.donut b { font:700 18px Manrope }.donut small { color:#919aab;font-size:7px }
.area-list { display:grid;gap:10px }.area-list div { display:flex;align-items:center;justify-content:space-between;color:#657084;font-size:8px }.area-list b { color:#303a51 }.area-list span { display:flex;align-items:center;gap:6px }.dot { width:7px;height:7px;border-radius:50% }.dot.blue { background:var(--blue) }.dot.purple { background:var(--purple) }.dot.green { background:var(--green) }.dot.amber { background:var(--amber) }
.ai-insight { display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;margin:0 15px 14px;padding:10px;border:1px solid #e4eaff;border-radius:9px;background:linear-gradient(105deg,#f2f6ff,#faf8ff) }.spark { display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#e2eaff;color:#526fd3 }.ai-insight b { font-size:8px }.ai-insight p { margin:3px 0 0;color:#778196;font-size:7px;line-height:1.4 }.ai-insight button { border:0;background:none;color:var(--blue);font-size:7px;font-weight:700 }

.hidden { display:none!important }
.module-hero { display:flex;align-items:flex-end;justify-content:space-between;padding:7px 0 25px }.module-eyebrow { color:var(--blue);font-size:8px;font-weight:800;letter-spacing:1.2px }.module-hero h2 { margin:6px 0 5px;font:800 27px Manrope;letter-spacing:-.9px }.module-hero p { margin:0;color:#818b9f;font-size:11px }
.module-stats { display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:15px }.module-stat { padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:#fff }.module-stat small { display:block;color:#8f98a9;font-size:9px }.module-stat b { display:block;margin-top:7px;font:700 20px Manrope }.module-stat em { color:var(--green);font:600 8px "DM Sans";font-style:normal }
.module-table-panel .panel-header { padding:20px }.table-actions { display:flex;gap:7px }
.module-table-panel td { padding-top:16px;padding-bottom:16px }.module-table-panel td:first-child { color:#2f3a52;font-weight:700 }

.overlay { position:fixed;inset:0;z-index:40;background:rgba(17,26,45,.3);opacity:0;visibility:hidden;backdrop-filter:blur(2px);transition:.25s }.overlay.show { opacity:1;visibility:visible }
.notification-drawer { position:fixed;z-index:50;top:0;right:0;width:370px;max-width:92vw;height:100vh;padding:23px;background:#fff;box-shadow:-15px 0 40px rgba(21,34,61,.15);transform:translateX(105%);transition:.3s ease }.notification-drawer.show { transform:none }
.drawer-header,.modal-header { display:flex;align-items:flex-start;justify-content:space-between }.drawer-header h3,.modal h3 { margin:0;font:700 18px Manrope }.drawer-header p { margin:5px 0;color:#8b94a6;font-size:10px }.close-btn { display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#7d8799;font-size:19px }.drawer-tabs { display:flex;gap:20px;margin:20px 0 10px;border-bottom:1px solid var(--line) }.drawer-tabs button { padding:9px 0;border:0;border-bottom:2px solid transparent;background:none;color:#8c95a6;font-size:10px }.drawer-tabs button.active { color:var(--blue);border-color:var(--blue) }
.drawer-item { position:relative;display:grid;grid-template-columns:35px 1fr;gap:10px;padding:14px 4px;border-bottom:1px solid var(--line) }.drawer-item.unread::after { content:"";position:absolute;top:18px;right:2px;width:6px;height:6px;border-radius:50%;background:var(--blue) }.drawer-item b { font-size:10px }.drawer-item p { margin:4px 0;color:#727d90;font-size:9px }.drawer-item small { color:#a0a8b6;font-size:8px }
.modal { position:fixed;z-index:50;top:50%;left:50%;width:500px;max-width:92vw;padding:25px;border-radius:16px;background:#fff;box-shadow:0 25px 70px rgba(20,31,54,.23);opacity:0;visibility:hidden;transform:translate(-50%,-46%) scale(.97);transition:.25s }.modal.show { opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1) }.modal h3 { margin-top:4px }.modal>p { color:#7e8798;font-size:11px }
.operation-options { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px }.operation-options button { display:grid;grid-template-columns:38px 1fr;gap:1px 10px;padding:15px;border:1px solid var(--line);border-radius:11px;background:#fff;text-align:left;transition:.2s }.operation-options button:hover { border-color:#a9c0ee;background:#f9fbff;transform:translateY(-2px) }.operation-options .metric-icon { grid-row:1/3 }.operation-options b { align-self:end;font-size:10px }.operation-options small { color:#929aac;font-size:8px }
.form-modal { width:620px;max-height:92vh;overflow-y:auto }
.form-modal form { margin-top:20px }
.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:15px }
.form-group { display:flex;flex-direction:column;gap:6px;min-width:0 }
.form-group.full { grid-column:1/-1 }
.form-group label { color:#505b70;font-size:9px;font-weight:700 }
.form-group label span { color:var(--red) }
.form-group input,.form-group select,.form-group textarea { width:100%;min-height:41px;padding:10px 11px;border:1px solid #dfe4ed;border-radius:8px;outline:none;background:#fafbfc;color:var(--ink);font-size:10px;transition:.2s }
.form-group textarea { min-height:74px;resize:vertical }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:#8caeea;background:#fff;box-shadow:0 0 0 3px rgba(47,107,229,.08) }
.form-group input.invalid,.form-group select.invalid { border-color:#e78787;background:#fff8f8 }
.form-error { min-height:17px;margin-top:10px;color:var(--red);font-size:9px }
.form-actions { display:flex;justify-content:flex-end;gap:9px;margin-top:5px;padding-top:16px;border-top:1px solid var(--line) }
.search-modal { width:650px;max-height:82vh;overflow-y:auto }
.search-results { display:grid;gap:8px;margin-top:16px }
.search-result { display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:left;transition:.2s }
.search-result:hover { border-color:#adc3ee;background:#f8faff;transform:translateY(-1px) }
.search-result b,.search-result small { display:block }.search-result b { color:#303b52;font-size:12px }.search-result small { margin-top:4px;color:#818b9e;font-size:10px;white-space:normal }
.search-result em { padding:5px 8px;border-radius:9px;background:var(--blue-light);color:var(--blue);font-size:9px;font-style:normal;font-weight:700 }
.search-empty { padding:30px 15px;border:1px dashed #dce2ec;border-radius:10px;color:#8791a3;font-size:11px;text-align:center }
.trace-card { padding:17px;border:1px solid var(--line);border-radius:12px;background:#fff }
.trace-card-head { display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:15px }
.trace-card-head h4 { margin:0;font:700 15px Manrope }.trace-card-head p { margin:4px 0 0;color:#7f899c;font-size:10px }
.trace-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:10px }
.trace-field { padding:10px;border-radius:8px;background:#f7f9fc }.trace-field small,.trace-field b { display:block }.trace-field small { color:#929bad;font-size:8px;text-transform:uppercase;letter-spacing:.4px }.trace-field b { margin-top:4px;color:#344057;font-size:11px }
.trace-timeline { margin-top:14px;padding-top:13px;border-top:1px solid var(--line) }.trace-timeline>small { color:#788297;font-size:8px;font-weight:800;letter-spacing:.6px }
.trace-event { position:relative;display:grid;grid-template-columns:9px 1fr auto;gap:9px;align-items:start;margin-top:11px;color:#59657b;font-size:10px }.trace-event i { width:7px;height:7px;margin-top:3px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px var(--blue-light) }.trace-event time { color:#969faf;font-size:8px }
.toast { position:fixed;z-index:100;right:25px;bottom:25px;display:flex;align-items:center;gap:10px;width:290px;padding:13px 15px;border:1px solid #dceee7;border-radius:11px;background:#fff;box-shadow:0 14px 35px rgba(28,47,70,.16);opacity:0;visibility:hidden;transform:translateY(15px);transition:.3s }.toast.show { opacity:1;visibility:visible;transform:none }.toast>span { display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#e8f8f1;color:var(--green);font-weight:700 }.toast b,.toast small { display:block }.toast b { font-size:10px }.toast small { margin-top:3px;color:#8690a2;font-size:8px }

@media (max-width:1100px) {
  .metrics-grid { grid-template-columns:repeat(2,1fr) }
  .dashboard-grid,.lower-grid { grid-template-columns:1fr }
  .module-stats { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:800px) {
  .sidebar { transform:translateX(-100%);box-shadow:12px 0 35px rgba(17,28,51,.2) }.sidebar.open { transform:none }
  .main-content { margin-left:0;width:100% }
  .mobile-menu { display:grid }
  .topbar { padding:0 18px }.search { width:39px;padding:0;justify-content:center;border:0 }.search input,.search kbd { display:none }.profile-button>span:not(.avatar),.profile-button>svg { display:none }
  .page-content { padding:22px 18px 35px }
}
@media (max-width:580px) {
  .topbar h1 { font-size:16px }.breadcrumbs { display:none }
  .welcome-row { align-items:flex-start;gap:14px;flex-direction:column }.welcome-actions { width:100% }.welcome-actions .btn { flex:1 }
  .metrics-grid,.module-stats { grid-template-columns:1fr }
  .chart-wrap { height:210px }.chart-tooltip { display:none }
  .production-stats { grid-template-columns:120px 1fr;padding-left:15px;padding-right:15px }
  .module-hero { align-items:flex-start;gap:16px;flex-direction:column }.module-hero .btn { width:100% }
  .operation-options { grid-template-columns:1fr }
  .form-grid { grid-template-columns:1fr }
  .form-group.full { grid-column:auto }
  .trace-grid { grid-template-columns:1fr 1fr }
}