:root {
  --bg: #f2f5f4;
  --surface: #fff;
  --surface-strong: #f7f9f8;
  --ink: #202b26;
  --muted: #6b7972;
  --line: #e0e7e3;
  --brand: #398221;
  --brand-strong: #276419;
  --accent: #2588b8;
  --danger: #c9414c;
  --ok: #398221;
  --shadow: 0 3px 14px rgba(28, 54, 37, .04);
}
body { background: var(--bg); letter-spacing: 0; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, .btn, input, select, textarea { transition: background .18s, border-color .18s, box-shadow .18s, transform .18s; }
button:focus-visible, .btn:focus-visible { outline: 3px solid #2588b8; outline-offset: 3px; }
.btn { min-height: 42px; font-size: 13px; font-weight: 650; }
.btn svg, .nav svg, .workspace-strip svg, .quick-actions svg, .stat-symbol svg { width: 19px; height: 19px; flex-shrink: 0; }
.btn.primary { box-shadow: 0 3px 7px #39822120; }
.btn:hover { transform: translateY(-1px); }
.btn.ghost { background: white; }
.shell { grid-template-columns: 244px minmax(0, 1fr); }
.sidebar { background: #fff; padding: 26px 16px 18px; z-index: 2; }
.side-head { padding: 0 8px 26px; align-items: center; }
.brand-mark, .side-head .brand-mark { width: 54px; height: 42px; flex-shrink: 0; border: 0; background: #fff; color: #4a9f23; font-size: 23px; font-weight: 900; font-style: italic; border-bottom: 3px solid #4a9f23; border-radius: 0; }
.side-head strong { font-size: 13px; line-height: 1.4; }
.side-head span:not(.brand-mark) { font-size: 11px; }
.nav { gap: 6px; margin-top: 26px; }
.nav button { color: #64736a; font-size: 13px; font-weight: 600; padding: 12px; min-height: 47px; }
.nav button.active { color: #32771e; background: #edf5e9; box-shadow: inset 3px 0 #4a9f23; }
.nav button:hover { background: #f1f6ee; }
.nav-icon { display: flex; align-items: center; }
.user-box { position: relative; padding-left: 44px; padding-top: 18px; }
.user-box small { font-size: 10px; text-transform: uppercase; margin-bottom: 6px; }
.user-row { flex-wrap: wrap; font-size: 12px; }
.user-row .btn { min-height: 28px; padding: 3px 8px; font-size: 11px; }
.profile-avatar { position: absolute; left: 0; top: 22px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ecf4e8; color: #398221; font-weight: 750; font-size: 12px; }
.main { padding: 0 30px 30px; }
.workspace-strip { display: flex; justify-content: space-between; align-items: center; min-height: 67px; gap: 12px; border-bottom: 1px solid var(--line); margin-bottom: 27px; color: #77847d; font-size: 10px; font-weight: 650; }
.workspace-strip > span { display: flex; align-items: center; gap: 9px; }
.workspace-strip svg { width: 15px; height: 15px; color: #4a9f23; }
.strip-divider { color: #c2cbc5; margin: 0 4px; }
.eyebrow { display: block; margin-bottom: 9px; color: #398221; font-size: 10px; font-weight: 800; }
.topbar { align-items: center; margin-bottom: 26px; }
.topbar h1 { font-size: 30px; font-weight: 750; line-height: 1.15; }
.topbar p { font-size: 13px; }
.topbar .filters select { min-width: 195px; font-size: 12px; background: #fff; }
.topbar .field label { font-size: 10px; text-transform: uppercase; color: #718076; }
.content { gap: 24px; animation: arrive .25s ease-out; }
.quick-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.quick-actions > span { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 650; }
.quick-actions > span svg { color: #398221; }
.quick-actions > div { display: flex; gap: 8px; }
.stats-grid { gap: 16px; }
.stat-card { position: relative; padding: 20px; min-height: 151px; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.stat-card small { display: block; max-width: calc(100% - 38px); font-weight: 600; font-size: 12px; color: #6b7972; }
.stat-card strong { font-size: 29px; margin: 22px 0 5px; font-weight: 750; overflow-wrap: anywhere; }
.stat-card > span:not(.stat-symbol) { font-size: 11px; }
.stat-symbol { position: absolute; right: 16px; top: 16px; width: 33px; height: 33px; display: grid; place-items: center; border-radius: 7px; }
.tone-0 { background: #edf5e9; color: #398221; }
.tone-1 { background: #eaf3f9; color: #2588b8; }
.tone-2 { background: #fff5dc; color: #b87c05; }
.tone-3 { background: #fcedee; color: #c9414c; }
.panel { padding: 22px 0; border: 0; border-top: 1px solid #dce5df; border-radius: 0; background: transparent; box-shadow: none; min-width: 0; }
.panel-head { flex-wrap: wrap; }
.panel-head h2, .panel h2 { font-size: 15px; font-weight: 700; }
.panel-head p, .panel p { font-size: 12px; }
.grid-2 { gap: 28px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.grid-3 { gap: 22px; }
.grid-2 .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.table-wrap { border-radius: 8px; background: #fff; border-color: #e0e7e3; }
th { font-size: 10px; color: #7c8880; background: #fafcfb; font-weight: 650; }
td { font-size: 12px; padding: 15px 13px; }
tbody tr:hover { background: #f7fbf5; }
.badge { font-size: 10px; font-weight: 650; padding: 4px 9px; }
input, select, textarea { border-color: #d8e2db; font-size: 13px; min-height: 44px; }
.field label, .checklist-title { font-size: 12px; font-weight: 650; }
.check-item { font-size: 12px; font-weight: 500; background: #fff; }
.asset-card, .maintenance-card { box-shadow: none; background: #fff; }
.asset-card:hover, .maintenance-card:hover { border-color: #acd196; }
.asset-card div { overflow-wrap: anywhere; }
.maintenance-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.bar-label { font-size: 12px; font-weight: 600; }
.bar-track { height: 8px; background: #e0e7e3; }
.bar-fill { background: #4a9f23; }
.analytics-band { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.analytics-band h2 { margin: 0; font-size: 15px; }
.availability > .panel-head > svg { color: #398221; width: 20px; }
.donut-layout { display: flex; align-items: center; gap: 28px; }
.donut { position: relative; width: 156px; height: 156px; flex-shrink: 0; }
.donut svg { width: 100%; height: 100%; }
.donut > div { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.donut strong { font-size: 31px; }
.donut span { font-size: 11px; color: #7b877f; }
.chart-legend { display: grid; gap: 14px; width: 100%; font-size: 12px; }
.chart-legend > div { display: flex; align-items: center; gap: 8px; }
.chart-legend strong { margin-left: auto; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.availability-row { margin: 24px 0 0; }
.availability-row > div:first-child { display: flex; justify-content: space-between; font-size: 12px; }
.availability-row strong { color: #398221; }
.availability-track { height: 9px; background: #e1e9e3; margin: 12px 0 6px; border-radius: 4px; overflow: hidden; }
.availability-track > span { height: 100%; display: block; background: #4a9f23; border-radius: 4px; }
.availability-row:nth-child(3) .availability-track > span { background: #2588b8; }
.availability-row small { color: #7c8880; font-size: 10px; }
.column-chart { height: 242px; border-bottom: 1px solid #dce5df; padding: 18px 8px 0; background: repeating-linear-gradient(to top, transparent 0, transparent 49px, #e4ebe6 49px, #e4ebe6 50px); }
.chart-columns { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 15px; height: 100%; }
.chart-column { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.chart-column strong { font-size: 11px; margin-bottom: 8px; }
.column-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.column-fill { width: 100%; max-width: 44px; margin: 0 auto; min-height: 0; background: #4a9f23; border-radius: 5px 5px 0 0; animation: grow-bar .6s ease-out; transform-origin: bottom; }
.chart-column:nth-child(even) .column-fill { background: #86bd54; }
.chart-column > span { width: 100%; min-height: 36px; padding-top: 10px; background: var(--bg); text-align: center; font-size: 10px; color: #7c8880; }
.battery-controls { display: flex; gap: 4px; padding: 3px; background: #e8eeea; border-radius: 7px; }
.capture-mode { display: flex; flex: 1; align-items: center; justify-content: center; gap: 7px; min-height: 36px; background: transparent; border-radius: 5px; color: #627368; font-size: 12px; }
.capture-mode svg { width: 16px; height: 16px; }
.capture-mode.selected { background: #fff; color: #32771e; box-shadow: 0 1px 3px #19342112; }
.battery-match { color: #398221; font-size: 11px; min-height: 15px; }
.scan-dialog { width: min(95vw, 520px); max-height: 90dvh; overflow-y: auto; padding: 24px; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 20px 90px #13271b30; }
.scan-dialog::backdrop { background: #14271bc9; backdrop-filter: blur(4px); }
.scan-dialog h2 { font-size: 21px; margin: 0; }
#scanReader { min-height: 220px; margin-top: 22px; background: #f0f4f1; overflow: hidden; border-radius: 6px; }
#scanReader video { width: 100% !important; }
#scanStatus { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.login-visual { background: #235e2c; position: relative; padding: 48px; }
.login-visual::after { content: ""; position: absolute; left: 48px; top: 115px; width: 74px; height: 6px; background: #8cc747; }
.login-visual h1 { font-size: 44px; line-height: 1.13; margin-top: 70px; }
.login-visual p { font-size: 15px; }
.login-visual .brand-mark { width: 80px; font-size: 30px; height: 55px; }
.login-panel { background: #f2f5f4; }
.auth-card { box-shadow: none; border: none; background: transparent; }
.auth-card h2 { font-size: 27px; }
.auth-card input { background: #fff; }
@keyframes arrive { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes grow-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 1180px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-2, .analytics-band { grid-template-columns: 1fr; } .donut-layout { max-width: 500px; } }
@media (max-width: 820px) { .shell { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; padding: 12px 14px 0; border-bottom: 1px solid var(--line); } .mobile-top { display: flex; } .nav { margin-top: 8px; gap: 3px; } .nav button { min-height: 44px; padding: 10px; font-size: 12px; } .main { padding: 0 18px 24px; } .workspace-strip { min-height: 49px; margin-bottom: 22px; } .workspace-strip > span:last-child { display: none; } .topbar { flex-direction: row; align-items: flex-start; } .topbar h1 { font-size: 25px; } .topbar p { max-width: 380px; line-height: 1.5; } .topbar .filters select { min-width: 0; width: 160px; } .login-visual { padding: 28px; } .login-visual h1 { font-size: 34px; } .login-visual::after { left: 28px; } }
@media (max-width: 560px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .stat-card { min-height: 153px; padding: 14px; } .stat-card strong { font-size: 24px; margin-top: 26px; } .stat-symbol { right: 10px; top: 12px; width: 27px; height: 27px; } .stat-symbol svg { width: 16px; height: 16px; } .stat-card small { font-size: 11px; } .stat-card > span:not(.stat-symbol) { font-size: 10px; line-height: 1.5; display: block; } .main { padding: 0 14px 20px; } .topbar { flex-direction: column; gap: 15px; } .topbar .filters, .topbar .filters .field, .topbar .filters select { width: 100%; } .quick-actions { flex-direction: column; align-items: stretch; } .quick-actions > div { display: grid; grid-template-columns: 1fr 1fr; } .quick-actions .btn { font-size: 11px; padding: 8px; } .donut-layout { gap: 16px; } .donut { width: 128px; height: 128px; } .chart-legend { font-size: 11px; gap: 12px; } .chart-columns { gap: 9px; } .chart-column > span { font-size: 9px; } .login-visual h1 { font-size: 30px; } .login-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .login-metrics div { padding: 10px; } .login-metrics strong { font-size: 21px; } .login-metrics span { font-size: 10px; } .form-grid .stats-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }