@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  color-scheme: dark;
  --brand: #55f28c;
  --brand-deep: #2cc66a;
  --brand-soft: #153a25;
  --cyan: #62d8e8;
  --navy: #090e0b;
  --navy-deep: #060907;
  --page: #0b100d;
  --surface: #141b16;
  --surface-2: #1b251e;
  --ink: #e9f4ec;
  --muted: #9caf9f;
  --line: #2a3b2f;
  --success: #55f28c;
  --success-soft: #153a25;
  --warning: #ffc766;
  --warning-soft: #382c17;
  --danger: #ff6872;
  --danger-soft: #3b1e23;
  --shadow: 10px 10px 24px rgba(2, 5, 3, .52), -7px -7px 20px rgba(150, 255, 182, .045);
  --shadow-inset: inset 5px 5px 12px rgba(2, 5, 3, .4), inset -4px -4px 12px rgba(150, 255, 182, .035);
  --radius: 9px;
  --sidebar-width: 252px;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b100d;
  --surface: #141b16;
  --surface-2: #1b251e;
  --ink: #e9f4ec;
  --muted: #9caf9f;
  --line: #2a3b2f;
  --brand-soft: #153a25;
  --cyan: #62d8e8;
  --success: #55f28c;
  --success-soft: #153a25;
  --warning: #ffc766;
  --warning-soft: #382c17;
  --danger: #ff6872;
  --danger-soft: #3b1e23;
  --shadow: 10px 10px 24px rgba(2, 5, 3, .52), -7px -7px 20px rgba(150, 255, 182, .045);
  --shadow-inset: inset 5px 5px 12px rgba(2, 5, 3, .4), inset -4px -4px 12px rgba(150, 255, 182, .035);
}
:root[data-theme="light"] {
  color-scheme: light;
  --page: #e8efe9;
  --surface: #f3f8f4;
  --surface-2: #e0ebe2;
  --ink: #15251a;
  --muted: #52675a;
  --line: #c9d8cc;
  --brand-soft: #d8efdf;
  --cyan: #087f90;
  --success: #14753d;
  --success-soft: #d8efdf;
  --warning: #8a5700;
  --warning-soft: #f7eacb;
  --danger: #a52f3c;
  --danger-soft: #f6dfe2;
  --shadow: 9px 9px 20px rgba(63, 86, 68, .14), -7px -7px 18px rgba(255, 255, 255, .82);
  --shadow-inset: inset 4px 4px 9px rgba(63, 86, 68, .13), inset -4px -4px 9px rgba(255, 255, 255, .8);
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--page); }
body { min-width: 320px; margin: 0; background: linear-gradient(rgba(85,242,140,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(85,242,140,.025) 1px, transparent 1px), radial-gradient(ellipse at 82% 0%, rgba(34,198,106,.10), transparent 38rem), var(--page); background-size: 32px 32px, 32px 32px, auto, auto; color: var(--ink); font: 400 14px/1.5 'DM Sans', 'Segoe UI', sans-serif; transition: background .2s ease, color .2s ease; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
[hidden] { display: none !important; }
.app-layout { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 10; display: flex; flex-direction: column; width: var(--sidebar-width); padding: 0 13px 18px; border-right: 1px solid var(--line); background: linear-gradient(180deg, #0b100d, #080c09 74%); color: #e9f4ec; }
.sidebar-brand { display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 0 11px; border-bottom: 1px solid rgba(120,255,170,.16); color: #fff; text-decoration: none; font: 600 16px 'DM Mono', monospace; }
.brand-icon { display: inline-flex; width: 38px; height: 34px; align-items: center; justify-content: center; gap: 1px; border: 1px solid rgba(85,242,140,.45); border-radius: 5px; color: var(--brand); background: #101a13; box-shadow: var(--shadow-inset), 0 0 14px rgba(85,242,140,.12); font: 700 12px 'DM Mono', monospace; line-height: 1; }
.brand-monogram { letter-spacing: .04em; }
.brand-cursor { color: var(--cyan); animation: terminal-blink 1.2s steps(2, start) infinite; }
.nav-caption { margin: 28px 12px 10px; color: #75a989; font: 500 9px/1.2 'DM Mono', monospace; letter-spacing: .14em; }
.side-nav { display: grid; gap: 5px; }
.nav-link { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 47px; padding: 0 13px; border: 1px solid transparent; border-radius: 5px; color: #c6d5ca; background: transparent; text-align: left; font-family: 'DM Mono', monospace; font-size: 12px; transition: background .18s ease, color .18s ease; }
.nav-link:hover { background: rgba(85,242,140,.07); color: #f0fff3; }
.nav-link.is-active { border-color: rgba(85,242,140,.28); background: linear-gradient(100deg, rgba(44,198,106,.17), rgba(44,198,106,.055)); box-shadow: inset 2px 0 var(--brand), var(--shadow-inset); color: var(--brand); }
.nav-icon { display: grid; width: 22px; height: 22px; place-items: center; flex: 0 0 22px; color: var(--cyan); font: 600 16px 'DM Mono', monospace; }
.sidebar-bottom { margin-top: auto; }
.sidebar-meter { display: flex; align-items: center; gap: 10px; padding: 13px 9px; border-top: 1px solid rgba(255,255,255,.14); }
.meter-mini-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #91a0b8; }
.sidebar-meter > span:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.sidebar-meter small { color: #75a989; font: 500 9px 'DM Mono', monospace; letter-spacing: .07em; }
.sidebar-meter strong { overflow: hidden; color: white; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-meter button { margin-left: auto; border: 0; color: #d7e4fa; background: transparent; font-size: 17px; transform: rotate(90deg); }
.sidebar-version { display: block; margin: 9px 10px 0; color: #75a989; font: 9px 'DM Mono', monospace; letter-spacing: .07em; }
.workspace { min-height: 100vh; margin-left: var(--sidebar-width); }
.topbar { position: sticky; top: 0; z-index: 8; display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 22px; padding: 12px 32px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(12px); }
.topbar-context { display: grid; gap: 1px; }
.context-kicker { color: var(--brand); font: 500 9px 'DM Mono', monospace; letter-spacing: .11em; }
.context-title { font-size: 15px; font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 11px; }
.connection-status, .header-relay { display: inline-flex; align-items: center; gap: 7px; min-height: 31px; padding: 0 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.status-dot, .header-relay-dot { width: 7px; height: 7px; border-radius: 50%; background: #98a3b1; }
.connection-status[data-state="online"] .status-dot, .header-relay[data-state="on"] .header-relay-dot { background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 15%, transparent); }
.connection-status[data-state="error"] .status-dot, .header-relay[data-state="off"] .header-relay-dot { background: var(--danger); }
.header-relay[data-state="on"] { color: var(--success); }
.topbar-divider { width: 1px; height: 23px; background: var(--line); }
.updated-label { color: var(--muted); font-size: 11px; white-space: nowrap; }
.mobile-brand { display: none; }
.icon-button { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--surface); font-size: 17px; transform: none; }.icon-button:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); color: var(--brand-deep); }
.button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; padding: 0 15px; border: 1px solid transparent; border-radius: 5px; font-weight: 600; transition: background .18s ease, border-color .18s ease, transform .18s ease, filter .18s ease; }
.button:hover { filter: brightness(1.04); transform: translateY(-1px); }
.button:active { transform: translateY(1px); }
.button:disabled { cursor: progress; opacity: .65; transform: none; }
.button:disabled::before { width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; content: ''; }
.button-primary { color: #fff; background: var(--brand); }
.button-primary:hover { background: var(--brand-deep); }
.button-secondary { border-color: var(--line); color: var(--ink); background: var(--surface); }
.button-on { color: #fff; background: #1f9b51; }
.button-off { color: #fff; background: #d96069; }
.button-danger { color: #fff; background: var(--danger); }
.refresh-button { min-height: 35px; padding: 0 11px; font-size: 12px; }
.page-wrap { width: min(1450px, 100%); margin: 0 auto; padding: 27px 32px 30px; }
.view-page { animation: view-in .22s ease both; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.eyebrow { margin: 0 0 6px; color: var(--muted); font: 500 10px/1.25 'DM Mono', monospace; letter-spacing: .1em; }
.page-heading h1 { margin: 0; font: 600 25px/1.25 'DM Mono', monospace; letter-spacing: 0; }
.page-subtitle, .muted-copy { margin: 7px 0 0; color: var(--muted); font-size: 13px; }
.sample-indicator { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--surface); font-size: 11px; white-space: nowrap; }
.sample-indicator span, .live-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(154px, auto); gap: 17px; perspective: 1200px; }
.metric-card, .panel { min-width: 0; border: 1px solid color-mix(in srgb, var(--line) 76%, transparent); border-radius: 13px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 95%, white), var(--surface)); box-shadow: var(--shadow); }
.metric-card { min-height: 174px; padding: 20px; transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transform-style: preserve-3d; transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.metric-card:hover { border-color: color-mix(in srgb, var(--brand) 38%, var(--line)); box-shadow: 13px 15px 28px rgba(2,5,3,.5), -8px -8px 23px rgba(150,255,182,.065); transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-3px); }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #8ca394; font: 500 10px 'DM Mono', monospace; letter-spacing: .06em; }
.metric-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 50%; font-size: 14px; font-weight: 600; }
.icon-rupee { color: white; background: var(--brand); }
.icon-blue { color: #e6fcff; background: #126975; border-radius: 5px; }
.icon-teal { color: #e4ffef; background: #1c6840; border-radius: 5px; }
.icon-amber { color: #fff3d9; background: #75511c; border-radius: 5px; }
.metric-value { display: flex; align-items: baseline; gap: 4px; margin-top: 20px; color: var(--ink); }
:root[data-theme="dark"] .metric-value { color: var(--ink); }
.metric-value strong { font: 600 32px/1 'DM Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.metric-value > span { color: var(--muted); font-size: 13px; }
.metric-card > p { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.balance-card { grid-column: span 2; grid-row: span 2; display: flex; min-height: 365px; flex-direction: column; justify-content: space-between; border-top: 0; border-left: 3px solid var(--brand); padding: 23px; }
.metric-card.balance-card { grid-column: 1 / 3; grid-row: 1 / 3; }
.balance-card .metric-value { margin-top: auto; padding: 0 0 4px 4px; transform: translateZ(24px); }
.balance-card .metric-value strong { font-size: 56px; }
.balance-card .metric-top, .balance-card > p, .balance-card .inline-link { transform: translateZ(14px); }
.inline-link { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 0; border: 0; color: var(--brand-deep); background: transparent; font-size: 12px; font-weight: 600; }
:root[data-theme="dark"] .inline-link { color: var(--brand); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 17px; margin-top: 18px; }
.panel { padding: 22px; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; }
.panel:hover { border-color: color-mix(in srgb, var(--brand) 24%, var(--line)); box-shadow: 8px 10px 22px rgba(2,5,3,.38), -6px -6px 17px rgba(150,255,182,.045); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.section-heading h2, .panel h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.section-heading .eyebrow { margin-bottom: 5px; }
.live-pill { display: flex; align-items: center; gap: 7px; color: var(--success); font: 500 10px 'DM Mono', monospace; }
.status-list { margin-top: 15px; }
.status-row { display: grid; grid-template-columns: 10px minmax(0,1fr) auto; min-height: 48px; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 13px; }
.status-row:last-child { border-bottom: 0; }
.status-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.status-indicator.warning { background: var(--warning); animation: alert-pulse 1.8s ease-in-out infinite; }
.status-indicator.danger { background: var(--danger); animation: alert-pulse 1.5s ease-in-out infinite; }
.status-pill { padding: 4px 9px; border-radius: 99px; color: var(--success); background: var(--success-soft); font-size: 10px; font-weight: 600; white-space: nowrap; }
.status-pill.is-alert { color: var(--warning); background: var(--warning-soft); }
.status-value { font: 500 12px 'DM Mono', monospace; font-variant-numeric: tabular-nums; }
.panel-description { margin: 14px 0; color: var(--muted); font-size: 13px; }
.relay-buttons { display: flex; gap: 10px; }
.relay-buttons .button { flex: 1; }
.action-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.82); }
.quick-account { display: flex; align-items: center; gap: 11px; margin-top: 21px; padding: 13px 0 0; border-top: 1px solid var(--line); }
.quick-account-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 7px; color: var(--brand-deep); background: var(--brand-soft); font-weight: 700; }
.quick-account > span:nth-child(2) { display: grid; gap: 2px; }
.quick-account strong { font-size: 12px; }
.quick-account small { color: var(--muted); font-size: 11px; }
.round-arrow { display: grid; width: 31px; height: 31px; place-items: center; margin-left: auto; border: 1px solid var(--line); border-radius: 50%; color: var(--brand-deep); background: var(--surface); font-size: 17px; }
.trend-panel { margin-top: 16px; }
.trend-range { color: var(--muted); font: 10px 'DM Mono', monospace; }
.trend-summary { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 9px; }
.trend-summary strong { font: 600 23px 'DM Mono', monospace; font-variant-numeric: tabular-nums; }
.trend-summary span { color: var(--muted); font-size: 11px; }
.chart-wrap { overflow: hidden; }
.trend-chart { display: block; width: 100%; height: 145px; }
.chart-line { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-area { fill: url(#chartFill); }
.chart-axis { display: flex; justify-content: space-between; color: var(--muted); font: 10px 'DM Mono', monospace; }
.alert { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--line)); border-radius: 7px; background: var(--danger-soft); }
.alert-icon { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: white; background: var(--danger); font-weight: 700; }
.alert strong { font-size: 13px; }.alert p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }.alert-close { margin-left: auto; border: 0; color: var(--muted); background: transparent; font-size: 21px; }
.account-summary-grid, .report-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.account-balance-panel { display: flex; min-height: 180px; align-items: center; justify-content: space-between; padding: 24px; border-left: 3px solid var(--brand); }
.large-account-balance { display: flex; align-items: baseline; gap: 6px; margin: 13px 0 0; color: var(--navy); }
:root[data-theme="dark"] .large-account-balance { color: var(--ink); }
.large-account-balance > span { font-size: 20px; }
.large-account-balance strong { font-size: 40px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.balance-emblem { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 50%; color: var(--brand-deep); background: var(--brand-soft); font-size: 25px; font-weight: 600; }
.consumption-panel { display: flex; min-height: 180px; flex-direction: column; justify-content: center; }
.consumption-number { display: flex; align-items: baseline; gap: 7px; margin-top: 15px; color: var(--navy); font-size: 34px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
:root[data-theme="dark"] .consumption-number { color: var(--ink); }
.consumption-number small { color: var(--muted); font-size: 14px; font-weight: 400; letter-spacing: 0; }
.consumption-track { height: 5px; overflow: hidden; margin-top: 15px; border-radius: 9px; background: var(--surface-2); }
.consumption-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--brand); transition: width .3s ease; }
.recharge-panel, .activity-panel { margin-top: 15px; }
.secure-note { color: var(--success); font-size: 11px; }
.secure-note span { margin-right: 4px; }
.recharge-form { max-width: 840px; margin-top: 20px; }
.recharge-form label, .field label { display: block; color: var(--ink); font-size: 12px; font-weight: 600; }
.input-action, .field-with-unit { display: flex; min-height: 43px; align-items: center; margin-top: 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); transition: border-color .16s ease, box-shadow .16s ease; }
.input-action:focus-within, .field-with-unit:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }
.input-prefix { padding-left: 13px; color: var(--muted); }
.input-action input, .field-with-unit input { width: 100%; min-width: 0; padding: 10px 11px; border: 0; outline: 0; color: var(--ink); background: transparent; }
.input-suffix, .field-with-unit > span { padding: 0 12px; color: var(--muted); font: 10px 'DM Mono', monospace; white-space: nowrap; }
.recharge-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; }
.form-note { margin: 0; color: var(--muted); font-size: 11px; }
.table-scroll { overflow-x: auto; margin-top: 13px; }
.activity-table { width: 100%; border-collapse: collapse; text-align: left; }
.activity-table th { padding: 10px 11px; color: var(--muted); font: 500 9px 'DM Mono', monospace; letter-spacing: .06em; white-space: nowrap; }
.activity-table td { padding: 12px 11px; border-top: 1px solid var(--line); font-size: 12px; white-space: nowrap; }
.activity-table .empty-row td { color: var(--muted); text-align: center; white-space: normal; }
.activity-status { color: var(--success); font-size: 11px; font-weight: 600; }
.control-page-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 15px; }
.control-panel, .control-health { min-height: 270px; }
.relay-state-badge { padding: 6px 9px; border-radius: 99px; color: var(--muted); background: var(--surface-2); font-size: 10px; font-weight: 600; white-space: nowrap; }
.relay-state-badge[data-state="on"] { color: var(--success); background: var(--success-soft); }
.relay-state-badge[data-state="off"] { color: var(--danger); background: var(--danger-soft); }
.control-buttons { display: flex; gap: 10px; margin-top: 22px; }
.control-buttons .button { flex: 1; min-height: 48px; }
.control-note { display: flex; gap: 10px; margin-top: 25px; padding: 12px; border-radius: 5px; color: var(--muted); background: var(--surface-2); }
.control-note > span { display: grid; width: 18px; height: 18px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 11px; }
.control-note p { margin: 0; font-size: 11px; }
.threshold-form { display: grid; gap: 14px; }
.settings-section { padding: 20px 22px; }
.settings-symbol { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 50%; color: var(--warning); background: var(--warning-soft); font-size: 17px; }
.security-symbol { color: var(--brand-deep); background: var(--brand-soft); }
.billing-symbol { color: var(--success); background: var(--success-soft); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; margin-top: 18px; }
.field-help { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.settings-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.settings-actions .muted-copy { max-width: 520px; }
.reset-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 23px; border-color: color-mix(in srgb, var(--danger) 30%, var(--line)); }
.reset-panel .eyebrow { color: var(--danger); }
.reset-panel .muted-copy { max-width: 650px; }
.report-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 15px; }
.report-summary { display: flex; align-items: center; gap: 15px; }
.report-summary .eyebrow { margin: 0 0 5px; }
.report-summary strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.report-summary strong small { color: var(--muted); font-size: 11px; font-weight: 500; }
.report-chart-panel { min-height: 300px; }
.help-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 15px; }
.help-connection { border-top: 3px solid var(--brand); }
.help-icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 17px; border-radius: 8px; color: var(--brand-deep); background: var(--brand-soft); font-size: 24px; }
.help-connection h2, .help-checklist h2, .help-safety h2, .reset-panel h2 { margin: 0; font-size: 17px; }
.help-connection .button { margin-top: 18px; }
.help-checklist .eyebrow { margin-bottom: 9px; }
.help-step { display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.help-step:last-child { border-bottom: 0; }
.help-step > span { color: var(--brand); font: 500 11px 'DM Mono', monospace; }
.help-step p { margin: 0; color: var(--muted); font-size: 12px; }
.help-safety { display: flex; grid-column: 1 / -1; align-items: start; gap: 14px; background: color-mix(in srgb, var(--warning-soft) 35%, var(--surface)); }
.safety-mark { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--warning); background: var(--warning-soft); font-weight: 700; }
.workspace-footer { display: flex; justify-content: space-between; gap: 15px; margin-top: 24px; padding: 15px 2px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.connection-dialog, .confirmation-dialog { width: min(440px, calc(100% - 28px)); max-width: 440px; padding: 0; border: 0; color: var(--ink); background: transparent; }
.connection-dialog::backdrop, .confirmation-dialog::backdrop { background: rgba(9,20,39,.54); backdrop-filter: blur(3px); }
.dialog-card { display: flex; flex-direction: column; gap: 8px; padding: 27px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 20px 70px rgba(8,24,49,.24); }
.dialog-mark { display: grid; width: 39px; height: 39px; place-items: center; margin-bottom: 5px; border-radius: 8px; color: white; background: var(--brand); font-size: 25px; }
.terminal-mark { display: flex; align-items: baseline; justify-content: center; gap: 1px; border: 1px solid color-mix(in srgb, var(--brand) 55%, var(--line)); border-radius: 5px; color: var(--brand); background: var(--surface-2); font: 700 12px 'DM Mono', monospace; box-shadow: var(--shadow-inset); }
.terminal-mark span { color: var(--cyan); }
.dialog-mark.danger-mark { color: var(--danger); background: var(--danger-soft); font-weight: 700; }
.dialog-card h2 { margin: 0; font-size: 24px; }
.dialog-card .muted-copy { margin: 0 0 8px; }
.dialog-card label { margin-top: 6px; font-size: 11px; font-weight: 600; }
.dialog-card input { min-height: 41px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--surface); }
.dialog-submit { margin-top: 12px; }
.dialog-submit span { margin-left: auto; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.dialog-error { margin: 4px 0 0; color: var(--danger); font-size: 11px; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 20; max-width: min(420px, calc(100% - 28px)); padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--success) 35%, var(--line)); border-radius: 7px; color: var(--success); background: var(--surface); box-shadow: var(--shadow); font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.telemetry-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--line)); border-radius: 7px; color: var(--ink); background: var(--warning-soft); }
.telemetry-banner[data-level="danger"] { border-color: color-mix(in srgb, var(--danger) 42%, var(--line)); background: var(--danger-soft); }
.telemetry-banner-mark { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--warning); font-weight: 700; }
.telemetry-banner[data-level="danger"] .telemetry-banner-mark { background: var(--danger); }
.telemetry-banner strong { font-size: 12px; }
.telemetry-banner p { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.safety-alert-panel { margin-bottom: 15px; border-left: 3px solid var(--warning); }
.safety-alert-panel:has([data-level="danger"]) { border-left-color: var(--danger); }
.alert-count { display: grid; min-width: 25px; height: 25px; place-items: center; padding: 0 6px; border-radius: 99px; color: var(--warning); background: var(--warning-soft); font: 600 11px 'DM Mono', monospace; }
.safety-alert-list { display: grid; gap: 8px; margin: 15px 0 0; padding: 0; list-style: none; }
.safety-alert-list li { padding: 10px 12px; border-radius: 5px; color: var(--warning); background: var(--warning-soft); font-size: 12px; }
.safety-alert-list li[data-level="danger"] { color: var(--danger); background: var(--danger-soft); }
.estimate-copy { margin: 8px 0 0; color: var(--brand); font-size: 11px; font-weight: 600; }
.report-tools { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin: -6px 0 15px; }
.report-period-control { display: grid; gap: 7px; }
.filter-caption { color: var(--muted); font: 500 9px 'DM Mono', monospace; letter-spacing: .1em; }
.report-period-note { margin: 0; color: var(--muted); font-size: 10px; }
.report-actions { display: flex; gap: 8px; }
.report-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.report-summary { min-height: 86px; }
.print-report-meta { display: none; }
.date-filter { display: flex; align-items: center; gap: 8px; }
.date-filter label { color: var(--muted); font-size: 10px; }
.date-filter input { min-height: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--surface); color-scheme: dark; font-size: 11px; }
:root[data-theme="light"] .date-filter input { color-scheme: light; }
.security-note { display: flex; grid-column: 1 / -1; align-items: flex-start; gap: 13px; border-color: color-mix(in srgb, var(--warning) 25%, var(--line)); background: color-mix(in srgb, var(--warning-soft) 25%, var(--surface)); }
.security-note h2 { margin: 0; font-size: 15px; }
.security-note .muted-copy { max-width: 850px; }
body[data-stale="true"] .metric-card { opacity: .68; }
.button:disabled { filter: saturate(.35); }
/* Frosted console surfaces over the terminal grid. */
.sidebar { background: linear-gradient(180deg, rgba(10,17,12,.93), rgba(7,11,8,.87)); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); }
.topbar { background: color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
.metric-card, .panel { border-color: rgba(174,255,198,.23); background: linear-gradient(135deg, rgba(238,255,242,.12), rgba(85,242,140,.04) 36%, rgba(9,17,11,.42)), color-mix(in srgb, var(--surface) 66%, transparent); box-shadow: var(--shadow), inset 1px 1px rgba(255,255,255,.12), inset -1px -1px rgba(85,242,140,.05); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); }
.metric-card.balance-card { border-color: rgba(85,242,140,.42); background: linear-gradient(135deg, rgba(85,242,140,.21), rgba(30,65,41,.56) 48%, rgba(10,18,12,.52)), color-mix(in srgb, var(--surface) 63%, transparent); }
.connection-status, .header-relay, .icon-button, .sample-indicator { background: color-mix(in srgb, var(--surface) 66%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.metric-card:hover { border-color: rgba(115,255,163,.42); box-shadow: 14px 16px 30px rgba(1,4,2,.48), -8px -8px 22px rgba(149,255,179,.075), 0 0 16px rgba(85,242,140,.06); }
:root[data-theme="light"] .metric-card, :root[data-theme="light"] .panel { border-color: rgba(62,120,78,.16); background: linear-gradient(145deg, rgba(255,255,255,.86), rgba(231,246,235,.72)), color-mix(in srgb, var(--surface) 84%, transparent); }
:root[data-theme="light"] .metric-card.balance-card { background: linear-gradient(135deg, rgba(85,242,140,.24), rgba(255,255,255,.78) 68%); }
.button-primary, .button-on, .button-off, .button-danger { box-shadow: 4px 4px 10px rgba(3,2,6,.32), inset 1px 1px rgba(255,255,255,.14); }
.button:active:not(:disabled) { box-shadow: var(--shadow-inset); }
.field-with-unit, .input-action { box-shadow: var(--shadow-inset); }
.field-with-unit:focus-within, .input-action:focus-within { box-shadow: inset 2px 2px 5px rgba(3,2,6,.24), 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); }
.metric-card:nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
.metric-card:nth-child(3) { grid-column: 3; grid-row: 2; }
.metric-card:nth-child(4) { grid-column: 4; grid-row: 2; }
:root[data-theme="dark"] .metric-value, :root[data-theme="dark"] .large-account-balance, :root[data-theme="dark"] .consumption-number { color: var(--ink); }
@media (max-width: 900px) {
  .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-card.balance-card { grid-column: 1 / -1; grid-row: auto; min-height: 220px; }
  .metric-card:nth-child(2), .metric-card:nth-child(3), .metric-card:nth-child(4) { grid-column: auto; grid-row: auto; }
}
@media (max-width: 620px) {
  .metrics-grid { grid-auto-rows: minmax(138px, auto); }
  .metric-card.balance-card { min-height: 205px; }
  .balance-card .metric-value strong { font-size: 44px; }
}
@media (max-width: 620px) {
  .report-tools { align-items: stretch; flex-direction: column; }
  .date-filter { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .report-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .report-actions .button { width: 100%; padding-inline: 8px; font-size: 11px; }
  .report-summary-grid { grid-template-columns: 1fr; }
  .security-note { grid-column: auto; }
}
body .metrics-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(146px, auto); gap: 12px; }
body .metrics-grid .metric-card, body .metrics-grid .metric-card.balance-card { grid-column: auto; grid-row: auto; min-height: 156px; padding: 17px; border-top: 2px solid color-mix(in srgb, var(--brand) 55%, var(--line)); border-left: 1px solid color-mix(in srgb, var(--line) 76%, transparent); }
body .metrics-grid .balance-card .metric-value { margin-top: 17px; padding: 0; transform: none; }
body .metrics-grid .balance-card .metric-value strong { font-size: 32px; }
body .metrics-grid .balance-card .metric-top, body .metrics-grid .balance-card > p, body .metrics-grid .balance-card .inline-link { transform: none; }
.threshold-form { gap: 17px; }
.settings-section { padding: 22px 24px; }
.field-grid { align-items: start; column-gap: 20px; row-gap: 16px; }
.field label { margin-bottom: 3px; }
.field-with-unit { min-height: 46px; }
.field-help { max-width: 52ch; line-height: 1.45; }
.threshold-feedback { margin: 0; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--brand) 38%, var(--line)); border-radius: 6px; color: var(--brand); background: color-mix(in srgb, var(--brand-soft) 72%, var(--surface)); font-size: 12px; }
.threshold-feedback.is-error { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); color: var(--danger); background: var(--danger-soft); }
.threshold-feedback.is-success { border-color: color-mix(in srgb, var(--success) 45%, var(--line)); color: var(--success); background: var(--success-soft); }
@media (max-width: 1180px) { body .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { body .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { body .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.metrics-grid .balance-card { grid-column: 1 / -1 !important; grid-row: auto !important; min-height: 170px !important; } }
@media print {
  @page { size: A4 portrait; margin: 14mm; }
  :root { color-scheme: light; --page: #fff; --surface: #fff; --surface-2: #f5f5f5; --ink: #161616; --muted: #505050; --line: #d3d3d3; --brand: #6d238f; --brand-soft: #eee4f3; --shadow: none; }
  body, html { min-width: 0; background: #fff !important; color: #161616 !important; font-size: 10pt; }
  body * { visibility: hidden !important; }
  #view-reports, #view-reports * { visibility: visible !important; }
  .sidebar, .topbar, .workspace-footer, .alert, .telemetry-banner, .report-tools { display: none !important; }
  .app-layout, .workspace, .page-wrap { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .view-page { display: none !important; animation: none !important; }
  #view-reports { position: static !important; display: block !important; width: 100% !important; }
  #view-reports .page-heading { margin: 0 0 12px !important; }
  #view-reports .page-heading h1 { font-size: 23pt; }
  #view-reports .page-subtitle { margin-top: 4px; }
  .print-report-meta { display: block; margin: 0 0 14px; color: #444; font-size: 9pt; }
  .report-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin-bottom: 9px !important; }
  .report-summary, .panel { border: 1px solid #ccc !important; border-radius: 4px !important; background: #fff !important; box-shadow: none !important; break-inside: avoid; }
  .report-summary { min-height: 64px !important; padding: 10px !important; }
  .report-summary strong { color: #161616 !important; font-size: 16pt !important; }
  .report-chart-panel, .activity-panel { margin-top: 9px !important; padding: 12px !important; }
  .report-chart-panel { min-height: 0 !important; }
  .trend-chart { height: 95px !important; }
  .chart-line { stroke: #6d238f !important; }
  .chart-area { fill: none !important; }
  .table-scroll { overflow: visible !important; }
  .activity-table { min-width: 0 !important; }
  .activity-table th { color: #333 !important; }
  .activity-table td, .activity-table th { padding: 5px 6px !important; font-size: 8pt !important; white-space: normal !important; }
  .workspace { color: #161616 !important; }
}
body[data-loading="true"] .metric-value strong, body[data-loading="true"] .status-pill, body[data-loading="true"] .trend-summary strong { min-width: 48px; border-radius: 4px; color: transparent; background: linear-gradient(100deg, var(--surface-2), color-mix(in srgb, var(--brand) 12%, var(--surface-2)), var(--surface-2)); background-size: 200% 100%; animation: skeleton 1.1s ease-in-out infinite; }
@keyframes skeleton { to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes alert-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 12%, transparent); } }
@keyframes view-in { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
body .sidebar .sidebar-brand .brand-icon, body .workspace .mobile-brand .brand-icon { width: 38px; height: 30px; flex: 0 0 auto; font-size: 12px; }
@keyframes terminal-blink { 50% { opacity: 0; } }
@media (max-width: 900px) {
  body .workspace .topbar { gap: 10px; padding-inline: 16px; }
  body .workspace .topbar-actions { min-width: 0; gap: 7px; }
  body .workspace .updated-label, body .workspace .topbar-divider { display: none; }
}
:root[data-theme="dark"] .metric-value, :root[data-theme="dark"] .large-account-balance, :root[data-theme="dark"] .consumption-number { color: var(--ink); }
:root[data-theme="dark"] .inline-link { color: var(--brand); }
body .metric-top { color: #8ca394; font: 500 10px 'DM Mono', monospace; letter-spacing: .06em; }
body .metric-value strong { font-family: 'DM Mono', monospace; letter-spacing: 0; }
body .icon-blue { color: #e6fcff; background: #126975; border-radius: 5px; }
body .icon-teal { color: #e4ffef; background: #1c6840; border-radius: 5px; }
body .icon-amber { color: #fff3d9; background: #75511c; border-radius: 5px; }
body .sidebar .nav-icon { color: var(--cyan); font: 600 15px 'DM Mono', monospace; }
body .sidebar .sidebar-meter small, body .sidebar .sidebar-version { color: #75a989; }
body .workspace .context-kicker { color: var(--brand); }
body .metric-top { color: #8ca394; font: 500 10px 'DM Mono', monospace; letter-spacing: .06em; }
body .metric-value strong { font-family: 'DM Mono', monospace; letter-spacing: 0; }
body .icon-blue { color: #e6fcff; background: #126975; border-radius: 5px; }
body .icon-teal { color: #e4ffef; background: #1c6840; border-radius: 5px; }
body .icon-amber { color: #fff3d9; background: #75511c; border-radius: 5px; }
:root[data-theme="dark"] .metric-value, :root[data-theme="dark"] .large-account-balance, :root[data-theme="dark"] .consumption-number { color: var(--ink); }
:root[data-theme="dark"] .inline-link { color: var(--brand); }
body .mobile-brand .brand-icon { width: 38px; height: 30px; font-size: 12px; }
body .metrics-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: minmax(146px, auto); gap: 12px; }
body .metrics-grid .metric-card { grid-column: auto; grid-row: auto; min-height: 156px; padding: 16px; }
body .metrics-grid .metric-card.balance-card { grid-column: auto; grid-row: auto; min-height: 156px; border-top: 2px solid var(--brand); border-left: 1px solid color-mix(in srgb, var(--line) 76%, transparent); }
body .metrics-grid .balance-card .metric-value { margin-top: 17px; padding: 0; transform: none; }
body .metrics-grid .balance-card .metric-value strong { font-size: 32px; }
@media (max-width: 1180px) { body .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { body .metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { :root { --brand: #178245; --brand-soft: #e1f3e7; } .chart-line { stroke: #178245 !important; } }
@media (max-width: 1180px) { :root { --sidebar-width: 222px; }.topbar { padding-inline: 24px; }.page-wrap { padding-inline: 24px; }.metric-card { padding: 17px; }.metric-value strong { font-size: 28px; } }
@media (max-width: 900px) { .sidebar { width: 74px; padding-inline: 9px; }.sidebar-brand { justify-content: center; padding-inline: 0; font-size: 0; }.sidebar-brand .brand-icon { font-size: 34px; }.nav-caption, .nav-link > span:last-child, .sidebar-bottom, .nav-link > span:not(.nav-icon) { display: none; }.side-nav { margin-top: 18px; }.nav-link { justify-content: center; padding: 0; }.nav-icon { font-size: 19px; }.workspace { margin-left: 74px; }.metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.metric-card { min-height: 162px; }.dashboard-grid, .control-page-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { :root { --sidebar-width: 0px; }.sidebar { inset: auto 0 0; width: 100%; height: 68px; padding: 5px 6px max(5px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.12); }.sidebar-brand, .nav-caption, .sidebar-bottom { display: none; }.side-nav { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 2px; margin: 0; }.nav-link { display: flex; min-width: 0; min-height: 56px; flex-direction: column; justify-content: center; gap: 2px; padding: 3px 0; border-radius: 5px; }.nav-link > span:last-child { display: block; overflow: hidden; max-width: 100%; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.nav-icon { width: auto; height: 23px; flex-basis: auto; font-size: 16px; }.workspace { margin-left: 0; padding-bottom: 76px; }.topbar { min-height: 60px; gap: 8px; padding: 8px 14px; }.mobile-brand { display: flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 700; white-space: nowrap; }.mobile-brand .brand-icon { width: 20px; height: 24px; font-size: 25px; }.topbar-context { display: none; }.topbar-actions { gap: 6px; }.connection-status { width: 30px; min-height: 30px; justify-content: center; padding: 0; }.connection-status span:last-child, .header-relay, .topbar-divider, .updated-label, .refresh-button > span:last-child { display: none; }.theme-toggle { width: 30px; height: 30px; }.refresh-button { width: 32px; min-height: 32px; padding: 0; }.page-wrap { padding: 19px 14px 22px; }.page-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 17px; }.page-heading h1 { font-size: 25px; }.page-subtitle { max-width: 40ch; font-size: 12px; }.sample-indicator { font-size: 10px; }.metrics-grid { gap: 9px; }.metric-card { min-height: 145px; padding: 14px; }.metric-top { font-size: 9px; }.metric-icon { width: 30px; height: 30px; font-size: 12px; }.metric-value { margin-top: 17px; }.metric-value strong { font-size: 25px; }.metric-card > p { margin-top: 8px; font-size: 10px; }.balance-card .inline-link { margin-top: 7px; font-size: 10px; }.panel { padding: 16px; }.dashboard-grid, .account-summary-grid, .control-page-grid, .report-summary-grid, .help-grid { gap: 10px; margin-top: 10px; }.dashboard-grid { grid-template-columns: 1fr; }.section-heading h2, .panel h2 { font-size: 15px; }.status-row { min-height: 43px; gap: 9px; font-size: 12px; }.status-pill { padding: 4px 7px; font-size: 9px; }.relay-buttons { gap: 7px; }.relay-buttons .button { padding-inline: 8px; font-size: 11px; }.quick-account { margin-top: 15px; }.trend-panel { margin-top: 10px; }.trend-chart { height: 115px; }.trend-summary { margin-top: 14px; }.account-summary-grid, .report-summary-grid { grid-template-columns: 1fr; }.account-balance-panel, .consumption-panel { min-height: 145px; }.large-account-balance strong { font-size: 33px; }.recharge-footer, .settings-actions, .reset-panel { align-items: stretch; flex-direction: column; }.recharge-footer { gap: 11px; }.recharge-footer .button { width: 100%; }.secure-note { font-size: 9px; }.activity-table { min-width: 460px; }.control-buttons { flex-direction: column; }.control-buttons .button { min-height: 44px; }.field-grid { grid-template-columns: 1fr; gap: 13px; }.settings-actions .button, .reset-panel .button { width: 100%; }.help-safety { grid-column: auto; }.workspace-footer { flex-direction: column; gap: 5px; }.toast { right: 14px; bottom: 82px; } }
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }