@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap");
/* Motorhome Energy — component styles. Every value reads a token from tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font-sans); font-size: 14px; line-height: 22px; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
.me-num, .me-metric, .me-table td.num { font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--teal-600); outline-offset: 2px; }
.me-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.me-icon { display: inline-block; flex: none; vertical-align: middle; }
.me-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.me-stack { display: flex; flex-direction: column; gap: var(--space-2); }
.me-muted { color: var(--ink-3); }
.me-small { font-size: 13px; line-height: 20px; }
.me-caption { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink-3); }
.me-mono { font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-weight: 500; }
.me-h1 { font-size: 24px; line-height: 34px; font-weight: 600; margin: 0; }
.me-h2 { font-size: 18px; line-height: 28px; font-weight: 600; margin: 0; }
.me-h3 { font-size: 15px; line-height: 24px; font-weight: 600; margin: 0; }
.me-link { color: var(--teal-700); font-weight: 600; text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 4px; }
.me-link:hover { text-decoration: underline; }
.me-divider { height: 1px; background: var(--border); border: 0; margin: var(--space-4) 0; }

/* Buttons */
.me-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 38px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s; }
.me-btn-sm { height: 32px; padding: 0 var(--space-3); font-size: 13px; border-radius: var(--radius-sm); }
.me-btn-lg { height: 44px; padding: 0 var(--space-5); font-size: 15px; }
.me-btn-primary { background: var(--teal-600); color: var(--on-teal); }
.me-btn-primary:hover { background: var(--teal-700); }
.me-btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.me-btn-secondary:hover { background: var(--surface-2); }
.me-btn-ghost { background: transparent; color: var(--ink-2); }
.me-btn-ghost:hover { background: var(--surface-3); color: var(--ink); }
.me-btn-danger { background: var(--crit-500); color: var(--on-teal); }
.me-btn-danger:hover { background: var(--crit-700); }
.me-btn[disabled], .me-btn[aria-disabled="true"]:not([aria-busy]) { background: var(--surface-3); color: var(--ink-disabled); border-color: var(--border); cursor: not-allowed; }
.me-btn[aria-busy="true"] { cursor: progress; opacity: .92; }
.me-btn-block { width: 100%; }
.me-btn-icon { width: 38px; padding: 0; }
.me-btn-icon.me-btn-sm { width: 32px; }
.me-btn .me-spin { animation: me-spin 0.9s linear infinite; }
@keyframes me-spin { to { transform: rotate(360deg); } }
.me-disabled-reason { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 18px; color: var(--ink-3); margin-top: 6px; max-width: 280px; }

/* Badges & status */
.me-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 12px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.me-badge-sm { height: 20px; padding: 0 6px; font-size: 12px; }
.me-tone-ok { background: var(--ok-50); color: var(--ok-700); }
.me-tone-warn { background: var(--warn-50); color: var(--warn-700); }
.me-tone-crit { background: var(--crit-50); color: var(--crit-700); }
.me-tone-neutral { background: var(--neutral-50); color: var(--neutral-700); }
.me-tone-info { background: var(--info-50); color: var(--info-700); }
.me-tone-brand { background: var(--teal-50); color: var(--teal-700); }
.me-badge-outline { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--ink-2); }
.me-badge-hypo { background: var(--surface); color: var(--info-700); box-shadow: none; border: 1px dashed var(--info-500); }
.me-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); display: inline-block; flex: none; }
.me-dot-ok { background: var(--ok-500); } .me-dot-warn { background: var(--warn-500); } .me-dot-crit { background: var(--crit-500); } .me-dot-neutral { background: var(--neutral-400); } .me-dot-info { background: var(--info-500); } .me-dot-brand { background: var(--teal-500); }
.me-dot-hollow { background: transparent; box-shadow: inset 0 0 0 2px var(--neutral-400); }
.me-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; color: var(--ink-2); white-space: nowrap; }
.me-status b { font-weight: 600; color: var(--ink); }
.me-fresh { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; line-height: 18px; color: var(--ink-3); white-space: nowrap; }
.me-fresh-stale { color: var(--warn-700); font-weight: 600; }
.me-fresh-missing { color: var(--neutral-700); font-weight: 600; }
.me-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; background: var(--crit-500); color: var(--on-teal); }
.me-count-neutral { background: var(--surface-3); color: var(--ink-2); }

/* Cards */
.me-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.me-card-pad { padding: var(--space-5); }
.me-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.me-card-head .me-sub { font-size: 13px; color: var(--ink-3); }
.me-card-body { padding: var(--space-5); }
.me-card-foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.me-card-interactive { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.me-card-interactive:hover { box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.me-card-selected { border-color: var(--teal-600); box-shadow: 0 0 0 1px var(--teal-600); }

/* Summary card */
.me-sum { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.me-sum-top { display: flex; align-items: center; justify-content: space-between; }
.me-sum-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.me-sum-ico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--teal-50); color: var(--teal-700); }
.me-sum-bar { display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; gap: 2px; background: var(--surface-3); }
.me-sum-bar span { display: block; height: 100%; }
.me-sum-rows { display: grid; gap: 6px; }
.me-sum-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; font-size: 13px; line-height: 20px; color: var(--ink-2); padding: 2px 6px; margin: 0 -6px; border-radius: 6px; border: 0; background: none; text-align: left; cursor: pointer; }
.me-sum-row:hover { background: var(--surface-2); }
.me-sum-row b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.me-sum-row .me-sub { color: var(--ink-3); font-weight: 400; font-size: 12px; margin-left: 4px; }
.me-sum-note { font-size: 12px; line-height: 18px; color: var(--ink-3); display: flex; gap: 6px; }
.me-metric-xl { font-size: 36px; line-height: 40px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.me-metric { font-size: 22px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.me-metric-sm { font-size: 15px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.me-unit { font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 3px; }

/* SoC bar */
.me-soc { display: flex; align-items: center; gap: 8px; }
.me-soc-track { position: relative; flex: 1; height: 8px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; min-width: 40px; }
.me-soc-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill); }
.me-soc-ok .me-soc-fill { background: var(--ok-500); } .me-soc-warn .me-soc-fill { background: var(--warn-500); } .me-soc-crit .me-soc-fill { background: var(--crit-500); }
.me-soc-stale .me-soc-fill { background: repeating-linear-gradient(135deg, var(--neutral-400) 0 4px, var(--surface-3) 4px 7px); }
.me-soc-val { font-weight: 600; font-size: 13px; min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.me-soc-multi { display: grid; gap: 4px; }
.me-soc-mini { display: grid; grid-template-columns: 14px 1fr 36px; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.me-soc-mini .me-soc-track { height: 6px; }
.me-soc-mini .me-soc-val { font-size: 12px; min-width: 0; color: var(--ink); }

/* Battery pack card */
.me-pack { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.me-pack-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.me-pack-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.me-pack-swatch { width: 10px; height: 10px; border-radius: 3px; }
.me-pack-soc { display: flex; align-items: baseline; gap: 6px; }
.me-pack-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; border-top: 1px solid var(--border); padding-top: var(--space-3); }
.me-kv { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.me-kv-label { font-size: 12px; line-height: 18px; color: var(--ink-3); font-weight: 500; }
.me-kv-val { font-size: 15px; line-height: 22px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.me-kv-val.me-na { color: var(--ink-3); font-weight: 500; }
.me-pack-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.me-pack-stale { opacity: 1; }
.me-pack-stale .me-kv-val { color: var(--ink-3); }

/* Power reading */
.me-power { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.me-power-in { color: var(--teal-700); } .me-power-out { color: var(--info-700); } .me-power-idle { color: var(--ink-3); font-weight: 500; }

/* Tabs / segmented / breadcrumb */
.me-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.me-tab { position: relative; height: 44px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: var(--ink-3); background: none; border: 0; padding: 0 2px; cursor: pointer; white-space: nowrap; }
.me-tab:hover { color: var(--ink); }
.me-tab[aria-selected="true"] { color: var(--teal-700); }
.me-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--teal-600); border-radius: 2px; }
.me-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-3); border-radius: var(--radius-md); }
.me-seg button { height: 30px; padding: 0 12px; border: 0; background: none; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.me-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.me-crumb { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; color: var(--ink-3); flex-wrap: wrap; }
.me-crumb a { color: var(--ink-3); text-decoration: none; cursor: pointer; }
.me-crumb a:hover { color: var(--teal-700); text-decoration: underline; }
.me-crumb [aria-current] { color: var(--ink); font-weight: 600; }

/* Forms */
.me-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.me-label { font-size: 13px; line-height: 20px; font-weight: 600; color: var(--ink-2); display: flex; gap: 4px; align-items: center; }
.me-label .me-req { color: var(--crit-700); }
.me-input { height: 38px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); padding: 0 var(--space-3); display: flex; align-items: center; gap: 8px; min-width: 0; }
.me-input input, .me-input select { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; height: 100%; font-size: 14px; }
.me-input select { appearance: none; cursor: pointer; }
.me-input:focus-within { border-color: var(--teal-600); box-shadow: 0 0 0 3px var(--teal-100); }
.me-input-error { border-color: var(--crit-500); }
.me-input-error:focus-within { box-shadow: 0 0 0 3px var(--crit-50); }
.me-input-disabled { background: var(--surface-2); color: var(--ink-disabled); border-color: var(--border); }
.me-input .me-suffix { color: var(--ink-3); font-size: 13px; }
.me-help { font-size: 12px; line-height: 18px; color: var(--ink-3); }
.me-error { font-size: 12px; line-height: 18px; color: var(--crit-700); display: flex; gap: 4px; align-items: flex-start; font-weight: 500; }
.me-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.me-toggle-track { position: relative; width: 40px; height: 24px; border-radius: var(--radius-pill); background: var(--border-strong); transition: background .15s; flex: none; border: 0; padding: 0; cursor: pointer; }
.me-toggle-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.me-toggle-track[aria-checked="true"] { background: var(--teal-600); }
.me-toggle-track[aria-checked="true"]::after { transform: translateX(16px); }
.me-toggle-track[disabled] { background: var(--surface-3); cursor: not-allowed; }
.me-check { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.me-check-box { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-strong); display: grid; place-items: center; background: var(--surface); flex: none; color: var(--on-teal); }
.me-check-box.on { background: var(--teal-600); border-color: var(--teal-600); }
.me-check-box.mixed { background: var(--teal-600); border-color: var(--teal-600); }
.me-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; flex: none; background: var(--surface); }
.me-radio.on { border-color: var(--teal-600); }
.me-radio.on::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--teal-600); }
.me-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: 13px; font-weight: 500; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.me-chip:hover { border-color: var(--ink-3); }
.me-chip-on { background: var(--teal-50); border-color: var(--teal-600); color: var(--teal-700); font-weight: 600; }
.me-chip .me-chip-x { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; }
.me-chip .me-chip-x:hover { background: var(--teal-100); }

/* Banners / feedback */
.me-banner { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: 14px; line-height: 22px; }
.me-banner-body { flex: 1; min-width: 0; }
.me-banner-title { font-weight: 600; color: var(--ink); }
.me-banner-text { color: var(--ink-2); }
.me-banner.me-tone-ok { box-shadow: inset 0 0 0 1px #BFE3CC; } .me-banner.me-tone-warn { box-shadow: inset 0 0 0 1px #F4D49A; } .me-banner.me-tone-crit { box-shadow: inset 0 0 0 1px #F5C2BD; } .me-banner.me-tone-neutral { box-shadow: inset 0 0 0 1px var(--border); } .me-banner.me-tone-info { box-shadow: inset 0 0 0 1px #C3D6F6; }
.me-banner .me-ic-wrap { padding-top: 1px; }
.me-banner-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.me-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-12) var(--space-6); }
.me-empty-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--border); margin-bottom: var(--space-2); }
.me-empty-title { font-size: 16px; line-height: 24px; font-weight: 600; }
.me-empty-text { color: var(--ink-3); max-width: 420px; }
.me-empty-actions { display: flex; gap: 8px; margin-top: var(--space-2); flex-wrap: wrap; justify-content: center; }
.me-skel { background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%); background-size: 200% 100%; animation: me-shimmer 1.4s ease-in-out infinite; border-radius: 6px; }
@keyframes me-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.me-toast { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); background: var(--navy-950); color: var(--on-navy); border-radius: var(--radius-md); box-shadow: var(--shadow-3); max-width: 420px; font-size: 14px; }
.me-toast .me-toast-sub { color: var(--navy-200); font-size: 13px; }
.me-toast .me-link { color: var(--teal-300); }

/* Overlays */
.me-scrim { position: absolute; inset: 0; background: var(--scrim); }
.me-modal { position: relative; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); width: 100%; max-width: 560px; display: flex; flex-direction: column; overflow: hidden; }
.me-modal-head { padding: var(--space-5) var(--space-6) var(--space-3); display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.me-modal-body { padding: 0 var(--space-6) var(--space-5); }
.me-modal-foot { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: var(--surface-2); }
.me-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100%; background: var(--surface); box-shadow: var(--shadow-3); display: flex; flex-direction: column; }
.me-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-3); display: flex; flex-direction: column; max-height: 86%; }
.me-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 8px auto 4px; }
.me-popover { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-2); }
.me-tooltip { background: var(--navy-900); color: var(--on-navy); border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 18px; box-shadow: var(--shadow-2); pointer-events: none; }
.me-tooltip .me-tt-sub { color: var(--navy-200); }

/* Table */
.me-table-wrap { overflow: auto; border-radius: var(--radius-lg); }
.me-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.me-table th { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface-2); text-align: left; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--ink-3); padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.me-table th.sortable { cursor: pointer; }
.me-table th.sortable:hover { color: var(--ink); }
.me-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--ink-2); }
.me-table tr:last-child td { border-bottom: 0; }
.me-table tbody tr { cursor: pointer; }
.me-table tbody tr:hover td { background: var(--surface-2); }
.me-table tbody tr.sel td { background: var(--teal-50); }
.me-table td.num { text-align: right; }
.me-table .me-cell-title { font-weight: 600; color: var(--ink); white-space: nowrap; }
.me-table .me-cell-sub { font-size: 12px; line-height: 18px; color: var(--ink-3); white-space: nowrap; }
.me-table-dense td { padding: 7px 12px; }

/* App shell */
.me-shell { display: grid; grid-template-columns: 248px 1fr; min-height: 100%; background: var(--bg); }
.me-shell.collapsed { grid-template-columns: 72px 1fr; }
.me-side { background: var(--navy-950); color: var(--on-navy); display: flex; flex-direction: column; padding: var(--space-4) var(--space-3); gap: var(--space-4); min-height: 100%; }
.me-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px; }
.me-brand-mark { width: 32px; height: 32px; border-radius: 9px; background: var(--teal-600); display: grid; place-items: center; color: var(--on-teal); flex: none; }
.me-brand-name { font-weight: 700; font-size: 15px; line-height: 18px; letter-spacing: -0.01em; }
.me-brand-name span { color: var(--teal-300); }
.me-brand-logo { padding: 6px 8px 2px; align-items: flex-start; }
.me-brand-logo .me-brand-sub { margin-top: 4px; }
.me-brand-sub { font-size: 11.5px; color: var(--navy-200); font-weight: 500; line-height: 16px; }
.me-ws { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--navy-900); border: 1px solid var(--navy-800); cursor: pointer; }
.me-ws-label { font-size: 11.5px; color: var(--navy-200); line-height: 16px; }
.me-ws-name { font-size: 13px; font-weight: 600; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-nav { display: flex; flex-direction: column; gap: 2px; }
.me-nav-sec { font-size: 11.5px; font-weight: 600; color: var(--navy-200); padding: 12px 10px 4px; letter-spacing: .02em; }
.me-nav-item { position: relative; display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 10px; border-radius: 8px; color: var(--navy-200); font-size: 14px; font-weight: 500; cursor: pointer; border: 0; background: none; text-align: left; width: 100%; white-space: nowrap; }
.me-nav-item:hover { background: var(--navy-900); color: var(--on-navy); }
.me-nav-item[aria-current="page"] { background: var(--navy-900); color: var(--on-navy); font-weight: 600; }
.me-nav-item[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--teal-300); }
.me-nav-item[aria-current="page"] .me-icon { color: var(--teal-300); }
.me-nav-item .me-count { margin-left: auto; }
.me-nav-item:focus-visible { outline-color: var(--teal-300); }
.me-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--navy-800); padding-top: var(--space-3); }
.me-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--teal-100); color: var(--teal-700); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.me-side .me-avatar { background: var(--navy-800); color: var(--on-navy); }
.me-shell.collapsed .me-side { padding: var(--space-4) var(--space-2); align-items: center; }
.me-main { min-width: 0; display: flex; flex-direction: column; }
.me-top { position: sticky; top: 0; z-index: var(--z-sticky); height: 64px; display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-6); background: var(--surface); border-bottom: 1px solid var(--border); }
.me-top-search { flex: 1; max-width: 440px; }
.me-top-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.me-page { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.me-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.me-page-title { display: flex; flex-direction: column; gap: 4px; }
.me-grid { display: grid; gap: var(--space-6); }

/* Mobile chrome */
.me-mtop { height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 var(--space-2) 0 var(--space-4); background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: var(--z-sticky); }
.me-mtop-title { flex: 1; min-width: 0; font-weight: 600; font-size: 16px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-mtab { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); height: 64px; background: var(--surface); border-top: 1px solid var(--border); padding-bottom: 4px; }
.me-mtab button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); position: relative; cursor: pointer; }
.me-mtab button[aria-current="page"] { color: var(--teal-700); }
.me-mtab .me-count { position: absolute; top: 6px; left: 52%; height: 16px; min-width: 16px; font-size: 10.5px; padding: 0 4px; }

/* Timeline */
.me-tl { display: flex; flex-direction: column; }
.me-tl-item { display: grid; grid-template-columns: 76px 24px 1fr; gap: 8px; padding-bottom: var(--space-4); position: relative; }
.me-tl-time { font-size: 12px; line-height: 20px; color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.me-tl-dot { position: relative; display: flex; justify-content: center; }
.me-tl-dot::before { content: ""; position: absolute; top: 22px; bottom: -16px; width: 2px; background: var(--border); }
.me-tl-item:last-child .me-tl-dot::before { display: none; }
.me-tl-node { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1; }
.me-tl-title { font-weight: 600; font-size: 14px; line-height: 20px; }
.me-tl-text { color: var(--ink-3); font-size: 13px; line-height: 20px; }

/* Charts */
.me-chart { position: relative; width: 100%; }
.me-chart > svg { display: block; width: 100%; overflow: visible; }
.me-chart .axis text { font-size: 11px; fill: var(--ink-3); font-family: var(--font-sans); }
.me-chart .grid line { stroke: var(--border); stroke-width: 1; }
.me-chart-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.me-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.me-chart-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.me-chart-gap-key { width: 14px; height: 10px; border-radius: 2px; background: repeating-linear-gradient(135deg, var(--neutral-400) 0 2px, transparent 2px 5px); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* Energy flow */
.me-flow { position: relative; background: linear-gradient(180deg, var(--teal-50), var(--surface) 70%); border-radius: var(--radius-lg); overflow: hidden; }
.me-flow > svg { display: block; width: 100%; height: auto; }
.me-flow .fl-line { fill: none; stroke-width: 3; stroke-linecap: round; }
.me-flow .fl-base { fill: none; stroke: var(--border); stroke-width: 6; stroke-linecap: round; }
.me-flow .fl-in { stroke: var(--teal-500); stroke-dasharray: 2 12; animation: me-flow 1.1s linear infinite; }
.me-flow .fl-out { stroke: var(--info-500); stroke-dasharray: 2 12; animation: me-flow 1.1s linear infinite; }
.me-flow .fl-idle { stroke: var(--neutral-400); stroke-dasharray: 1 7; opacity: .6; }
.me-flow .fl-stale { stroke: var(--neutral-400); stroke-dasharray: 6 6; opacity: .7; }
@keyframes me-flow { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) { .me-flow .fl-in, .me-flow .fl-out { animation: none; stroke-dasharray: none; } .me-skel { animation: none; } }
.me-flow .node-card { fill: var(--surface); stroke: var(--border); stroke-width: 1.2; }
.me-flow .node-card.on { stroke: var(--teal-500); }
.me-flow .node-card.out { stroke: var(--info-500); }
.me-flow .node-card.off { fill: var(--surface-2); stroke: var(--border-strong); stroke-dasharray: 4 4; } .me-flow .node-card.off ~ text, .me-flow .node-card.off + circle + g { opacity: .6; }
.me-flow .node-card.na { fill: var(--surface-2); stroke-dasharray: 4 4; stroke: var(--border-strong); }
.me-flow text { font-family: var(--font-sans); }
.me-flow .n-title { font-size: 14px; font-weight: 600; fill: var(--ink-2); }
.me-flow .n-val { font-size: 21px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }
.me-flow .n-unit { font-size: 13px; font-weight: 500; fill: var(--ink-3); }
.me-flow .n-sub { font-size: 12.5px; font-weight: 600; }
.me-flow .n-sub.in { fill: var(--teal-700); } .me-flow .n-sub.out { fill: var(--info-700); } .me-flow .n-sub.idle { fill: var(--ink-3); font-weight: 500; }
.me-flow .n-ico-bg { fill: var(--teal-50); }
.me-flow .n-ico-bg.out { fill: var(--info-50); } .me-flow .n-ico-bg.idle { fill: var(--surface-3); }
.me-flow-legend { display: flex; flex-wrap: wrap; margin: 0 16px 14px; width: fit-content; gap: 14px; font-size: 12px; color: var(--ink-2); background: rgba(255,255,255,.86); padding: 4px 10px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--border); }
.me-flow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.me-flow-legend i { width: 18px; height: 0; border-top: 3px dotted; display: inline-block; }
.me-flow-overlay { margin: 12px auto 0; width: fit-content; max-width: min(640px, 94%); }
.me-flow-c { display: flex; flex-direction: column; gap: 8px; padding: var(--space-4); }
.me-flow-c-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.me-flow-c-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.me-flow-c-conn { height: 18px; margin-left: 29px; border-left: 3px dotted var(--teal-500); }
.me-flow-c-conn.out { border-left-color: var(--info-500); } .me-flow-c-conn.idle { border-left-color: var(--neutral-400); border-left-style: dashed; }

/* Map */
.me-map { position: relative; background: var(--map-water); overflow: hidden; border-radius: var(--radius-lg); }
.me-map svg.me-map-base { display: block; width: 100%; height: 100%; }
.me-map .lbl { font-size: 12px; font-weight: 600; fill: var(--ink-3); font-family: var(--font-sans); paint-order: stroke; stroke: var(--map-land); stroke-width: 3px; }
.me-pin { position: absolute; transform: translate(-50%, -100%); cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.me-pin-head { width: 28px; height: 28px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); display: grid; place-items: center; box-shadow: 0 2px 6px rgba(14,27,43,.25); border: 2px solid var(--surface); }
.me-pin-head > * { transform: rotate(45deg); }
.me-pin-ok { background: var(--ok-500); color: var(--on-teal); } .me-pin-warn { background: var(--warn-500); color: var(--ink); } .me-pin-crit { background: var(--crit-500); color: var(--on-teal); } .me-pin-neutral { background: var(--neutral-400); color: var(--on-teal); }
.me-pin-stale .me-pin-head { border-style: dashed; border-color: var(--ink-2); opacity: .9; }
.me-pin-sel .me-pin-head { box-shadow: 0 0 0 4px rgba(10,122,114,.35), 0 2px 6px rgba(14,27,43,.25); }
.me-pin-stale-badge { position: absolute; top: -8px; right: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); color: var(--warn-700); display: grid; place-items: center; box-shadow: 0 0 0 1px var(--border-strong); }
.me-cluster { position: absolute; transform: translate(-50%, -50%); cursor: pointer; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--ink); background: var(--surface); box-shadow: 0 2px 8px rgba(14,27,43,.2); }
.me-cluster svg { position: absolute; inset: 0; }
.me-cluster b { position: relative; font-size: 13px; font-variant-numeric: tabular-nums; }
.me-map-ctrl { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; }
.me-map-ctrl button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-1); color: var(--ink-2); }
.me-map-legend { position: absolute; left: 12px; bottom: 12px; background: rgba(255,255,255,.94); border-radius: var(--radius-md); padding: 8px 12px; display: flex; gap: 12px; font-size: 12px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--border); flex-wrap: wrap; }
.me-map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.me-map-nocoord { position: absolute; left: 12px; top: 12px; }
.me-map-info { position: absolute; width: 300px; padding: var(--space-4); display: flex; flex-direction: column; gap: 10px; }
.me-map-info::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: var(--surface); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transform: translateX(-50%) rotate(45deg); }

/* Evidence / AI */
.me-ev { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 6px; }
.me-ev-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; }
.me-ev ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; color: var(--ink-2); font-size: 14px; }
.me-ev-evidence { background: var(--surface); border: 1px solid var(--border); }
.me-ev-evidence .me-ev-head { color: var(--ok-700); }
.me-ev-hypo { background: var(--info-50); border: 1px dashed var(--info-500); }
.me-ev-hypo .me-ev-head { color: var(--info-700); }
.me-ev-missing { background: var(--surface-2); border: 1px solid var(--border); }
.me-ev-missing .me-ev-head { color: var(--neutral-700); }
.me-ev-next { background: var(--teal-50); border: 1px solid var(--teal-100); }
.me-ev-next .me-ev-head { color: var(--teal-700); }
.me-ev-ref { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; color: var(--teal-700); font-weight: 600; margin-left: 4px; cursor: pointer; }
.me-conf { display: inline-flex; gap: 3px; align-items: center; }
.me-conf i { width: 6px; height: 12px; border-radius: 2px; background: var(--surface-3); display: inline-block; }
.me-conf i.on { background: var(--info-500); }

/* Rule builder */
.me-cond { display: grid; grid-template-columns: 1.6fr 0.8fr 1fr 40px; gap: 8px; align-items: start; }
.me-logic { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0; }
.me-logic-line { flex: 1; height: 1px; background: var(--border); }
.me-rule-summary { background: var(--navy-950); color: var(--on-navy); border-radius: var(--radius-md); padding: var(--space-4); font-size: 14px; line-height: 24px; }
.me-rule-summary b { color: var(--teal-300); font-weight: 600; }
.me-rule-summary .me-tok { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--navy-800); font-family: var(--font-mono); font-size: 12.5px; color: var(--on-navy); }

/* Stepper */
.me-steps { display: flex; gap: 0; align-items: center; }
.me-step { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.me-step-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; border: 1.5px solid var(--border-strong); background: var(--surface); }
.me-step.done .me-step-n { background: var(--teal-600); border-color: var(--teal-600); color: var(--on-teal); }
.me-step.cur { color: var(--ink); }
.me-step.cur .me-step-n { border-color: var(--teal-600); color: var(--teal-700); box-shadow: 0 0 0 3px var(--teal-100); }
.me-step-line { width: 40px; height: 2px; background: var(--border); margin: 0 10px; }
.me-step-line.done { background: var(--teal-600); }

/* Lifecycle */
.me-life { display: flex; align-items: flex-start; }
.me-life-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; line-height: 16px; color: var(--ink-3); position: relative; }
.me-life-step::before { content: ""; position: absolute; top: 11px; right: 50%; left: -50%; height: 2px; background: var(--border); }
.me-life-step:first-child::before { display: none; }
.me-life-step.done::before, .me-life-step.cur::before { background: var(--teal-600); }
.me-life-node { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--border-strong); position: relative; z-index: 1; }
.me-life-step.done .me-life-node { background: var(--teal-600); border-color: var(--teal-600); color: var(--on-teal); }
.me-life-step.cur .me-life-node { border-color: var(--info-500); color: var(--info-700); }
.me-life-step.fail .me-life-node { border-color: var(--crit-500); background: var(--crit-500); color: var(--on-teal); }
.me-life-step.fail::before { background: var(--crit-500); }
.me-life-step b { color: var(--ink); font-weight: 600; font-size: 12.5px; }

/* Misc layout helpers */
.me-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.me-split { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-6); }
.me-list-row { display: flex; gap: 12px; align-items: flex-start; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border); cursor: pointer; }
.me-list-row:hover { background: var(--surface-2); }
.me-list-row:last-child { border-bottom: 0; }
.me-sev-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.me-annot { position: absolute; background: var(--navy-950); color: var(--on-navy); font-size: 11.5px; line-height: 16px; padding: 6px 9px; border-radius: 8px; max-width: 220px; box-shadow: var(--shadow-2); }
.me-annot b { color: var(--teal-300); }

.me-trunc { max-width: 200px; overflow: hidden; text-overflow: ellipsis; display: inline-flex; }
.me-trunc > :last-child { overflow: hidden; text-overflow: ellipsis; }