:root {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body {
  --bg: #f4f7f8; --surface: #fff; --subtle: #f8fafb; --line: #dce6e8;
  --ink: #16282f; --muted: #556972; --accent: #087e69; --accent-hover: #086755;
  --accent-ink: #045f50; --accent-light: #e5f4ee; --sidebar: #142c32;
  --side-ink: #edf7f5; --side-muted: #a9c6c7; --side-active: #23504f;
  --chart-fill: #b4ebd5b0; --chart-end: #e9f7f300; --chart-bar: #a7cfc8;
  --ok: #176049; --ok-bg: #e5f6ee; --info: #254fa4; --info-bg: #edf2ff;
  --warn: #865916; --warn-bg: #fff3d9; --bad: #9d353a; --bad-bg: #fdf0f1;
  --radius: 13px;
  margin: 0; min-width: 320px; color: var(--ink); background: var(--bg);
  color-scheme: light;
}
button, input, select, textarea { font: inherit; color: inherit; }
button, summary { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a, button, input, select, textarea, summary { outline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); }
button:disabled { opacity: .55; cursor: default; }
[hidden] { display: none !important; }
h1, h2, h3, p, dl { margin: 0; }
h1 { font-size: clamp(26px, 3vw, 34px); line-height: 1.18; font-weight: 680; letter-spacing: -.045em; }
h2 { font-size: 17px; font-weight: 680; line-height: 1.4; letter-spacing: -.02em; }
small { font-size: 12px; }
strong { font-weight: 670; }
.mono { font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted); }
.strong { font-weight: 650; }
.shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100dvh; }
.sidebar {
  display: flex; flex-direction: column; height: 100dvh; position: sticky; top: 0;
  background: var(--sidebar); color: var(--side-ink); min-height: 0; z-index: 2;
}
.brand { display: flex; align-items: center; gap: 12px; width: max-content; }
.sidebar .brand { margin: 26px 20px 24px; }
.brand-mark {
  display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px;
  border-radius: 9px; background: #67deac; color: #12392d;
}
.brand-mark .ico { width: 22px; height: 22px; }
.brand-name { display: grid; gap: 3px; font-weight: 680; font-size: 16px; line-height: 1.15; letter-spacing: .03em; }
.brand-name > span { color: var(--side-muted); font-size: 12px; font-weight: 520; }
.side-nav { padding: 1px 12px 20px; flex: 1; overflow: auto; scrollbar-width: thin; }
.nav-group { margin: 0 0 13px; }
.nav-group h2 { color: var(--side-muted); margin: 0 0 4px; padding: 4px 11px; font-size: 12px; font-weight: 540; letter-spacing: .04em; }
.nav-link { display: flex; gap: 11px; align-items: center; min-height: 43px; border-radius: 7px; padding: 8px 11px; color: var(--side-ink); white-space: nowrap; }
.nav-link:hover, .nav-link.current { background: var(--side-active); }
.nav-link.current { font-weight: 680; }
.nav-link.current .ico { color: #84e7bc; }
.sidebar-footer { margin: auto 15px 14px; }
.sidebar-footer a { display: flex; align-items: center; gap: 10px; padding: 11px 8px; min-height: 44px; border-top: 1px solid #ffffff22; font-size: 13px; color: var(--side-muted); }
.sidebar-footer a:hover { color: var(--side-ink); }
.rail-nav, .horizontal-nav, .context-nav, .top-brand, .menu-mobile { display: none; }
.workspace { min-width: 0; }
.topbar { display: flex; height: 72px; padding: 0 34px; align-items: center; justify-content: space-between; background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 4; gap: 12px; }
.bar-start, .bar-end { display: flex; align-items: center; min-width: 0; gap: 19px; }
.merchant-name { font-size: 17px; font-weight: 690; letter-spacing: -.025em; white-space: nowrap; }
.mock-indicator, .zone { color: var(--muted); font-size: 12px; white-space: nowrap; }
.mock-indicator { display: inline-flex; align-items: center; gap: 7px; }
.mock-indicator i, .trend-footer i { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
.account { position: relative; }
.account summary { display: flex; gap: 9px; align-items: center; min-height: 44px; list-style: none; }
.account summary::-webkit-details-marker { display: none; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--accent-light); color: var(--accent-ink); font-weight: 700; }
.avatar.mini { width: 31px; height: 31px; flex-basis: 31px; }
.account-name { display: grid; gap: 2px; line-height: 1.15; white-space: nowrap; }
.account-name strong { font-size: 13px; }
.account-name small { color: var(--muted); }
.account-menu { position: absolute; top: calc(100% + 10px); right: 0; width: 174px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 12px 28px #091f3129; }
.account-menu .btn { width: 100%; justify-content: flex-start; }
.main { max-width: 1740px; margin: 0 auto; padding: 34px 36px 56px; min-width: 0; }
.page-heading { margin-bottom: 23px; }
.heading-row, .panel-heading, .table-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.heading-row { flex-wrap: wrap; min-height: 48px; }
.subback { margin-bottom: 10px; }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; color: var(--muted); font-weight: 550; }
.back::before { content: "‹"; font-size: 24px; line-height: 0; }
.back:hover, .text-link:hover { text-decoration: underline; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btn, .primary-link, .close-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; }
.btn {
  padding: 8px 14px; border-radius: 8px; border: 1px solid transparent; background: transparent;
  line-height: 1.28; font-weight: 610; white-space: nowrap;
}
.btn:hover { background: var(--subtle); }
.btn.outline { border-color: var(--line); background: var(--surface); }
.btn.outline:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn.primary { color: #fff; background: var(--accent-hover); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad), var(--surface) 78%); background: var(--bad-bg); }
.btn.danger:hover { border-color: var(--bad); }
.quiet { color: var(--muted); }
.is-selected { background: var(--accent-light); color: var(--accent-ink); }
.is-selected:hover { background: var(--accent-light); }
.table-btn { color: var(--accent-ink); padding-left: 0; padding-right: 0; }
.table-btn:hover { background: transparent; text-decoration: underline; }
input:not([type=checkbox]), select, textarea {
  min-height: 44px; min-width: 0; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 8px; background-color: var(--surface); color: var(--ink);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
textarea { resize: vertical; }
select { max-width: 100%; }
.report-filters, .filter, .date-range, .filter-site { display: flex; align-items: center; gap: 10px; }
.report-filters { flex-wrap: wrap; margin-bottom: 25px; }
.filter-site, .date-range {
  background: var(--surface); color: var(--muted); border: 1px solid var(--line); border-radius: 8px;
  padding-left: 12px; min-width: 0;
}
.date-range { padding-right: 6px; gap: 2px; }
.filter-site select, .date-range input { border: 0; background: transparent; padding-left: 4px; }
.date-range input { min-width: 123px; }
.filter-site select { padding-right: 15px; min-width: 138px; }
.report-grid { display: grid; grid-template-columns: 1fr; gap: 23px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.metric-card {
  position: relative; display: grid; text-align: left; gap: 14px; width: 100%; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 21px; min-width: 0;
  --metric-ink: var(--accent-ink); --metric-bg: var(--accent-light);
}
.metric-card.blue { --metric-ink: var(--info); --metric-bg: var(--info-bg); }
.metric-card.gold { --metric-ink: var(--warn); --metric-bg: var(--warn-bg); }
.metric-card:hover { border-color: var(--accent); }
.metric-card.current-metric { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.metric-label { display: flex; align-items: center; gap: 10px; font-weight: 650; }
.metric-label .ico { height: 35px; width: 35px; border-radius: 8px; background: var(--metric-bg); color: var(--metric-ink); }
.metric-reading { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 9px; line-height: 1.05; }
.metric-reading strong { font-size: clamp(23px, 3.05vw, 43px); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.055em; }
.metric-reading small { font-size: 13px; font-weight: 580; color: var(--muted); }
.metric-rule { font-size: 12px; color: var(--muted); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; overflow: hidden; }
.panel + .panel, .detail-grid + .panel, .notice + .panel, .notice + .detail-grid { margin-top: 17px; }
.panel-heading { padding: 17px 19px; flex-wrap: wrap; }
.panel-heading p { margin-top: 3px; font-size: 13px; color: var(--muted); }
.panel-body { padding: 10px 19px 19px; }
.trend .panel-heading { padding: 21px 23px 10px; }
.trend .panel-heading h2 { font-size: 19px; }
.segmented { display: flex; background: var(--subtle); border: 1px solid var(--line); border-radius: 9px; padding: 3px; gap: 3px; flex-wrap: wrap; width: max-content; max-width: 100%; }
.segmented .btn { min-height: 42px; }
.section-tabs { margin: 18px 0 13px; }
.chart-box { height: clamp(245px, 34vh, 350px); margin: 0 17px; position: relative; min-width: 0; }
.chart-box canvas { display: block; width: 100%; height: 100%; }
.chart-tip { position: absolute; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 4px 12px #142f4920; border-radius: 7px; pointer-events: none; display: grid; gap: 6px; white-space: nowrap; }
.chart-tip span { color: var(--muted); font-size: 12px; }
.trend-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 23px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.trend-footer span { display: inline-flex; align-items: center; gap: 7px; }
.list-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.list-controls.split { border-bottom: 0; padding-bottom: 0; }
.filter { flex-wrap: wrap; }
.list-controls .filter { flex: 1 1 350px; justify-content: flex-end; }
.filter.order-filter { padding: 13px 16px; border-bottom: 1px solid var(--line); }
.filter > input { width: 144px; }
.search-box { position: relative; flex: 1 1 205px; min-width: 0; }
.search-box .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-box input { width: 100%; padding-left: 35px; }
.table-scroll { overflow: auto; width: 100%; }
table { width: 100%; text-align: left; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 17px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th { background: var(--subtle); font-size: 12px; font-weight: 660; color: var(--muted); white-space: nowrap; height: 41px; }
td { height: 62px; }
td.first-cell { font-weight: 620; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--subtle); }
.table-footer { min-height: 53px; padding: 10px 17px; background: var(--surface); font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
.text-link { color: var(--accent-ink); font-weight: 620; display: inline-block; padding: 5px 0; }
.subject { display: flex; gap: 10px; align-items: center; }
.subject > div, .stack { display: grid; gap: 4px; }
.subject .text-link, .stack .text-link { padding: 0; }
.subject small, .stack small { display: block; color: var(--muted); font-weight: 500; white-space: nowrap; }
.object-mark { width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; color: var(--accent-ink); background: var(--subtle); }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; font-weight: 620; font-size: 12px; white-space: nowrap; }
.status::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status.neutral { color: var(--muted); background: var(--subtle); }
.status.ok { color: var(--ok); background: var(--ok-bg); }
.status.warn { color: var(--warn); background: var(--warn-bg); }
.status.info { color: var(--info); background: var(--info-bg); }
.status.bad { color: var(--bad); background: var(--bad-bg); }
.empty { min-height: 135px; display: grid; place-content: center; justify-items: center; gap: 11px; padding: 20px; color: var(--muted); }
.empty .ico { opacity: .75; height: 23px; width: 23px; }
.page-tabs { display: flex; gap: 17px; border-bottom: 1px solid var(--line); margin: -3px 0 18px; flex-wrap: wrap; }
.page-tabs a { min-height: 46px; display: inline-flex; align-items: center; font-weight: 650; color: var(--muted); border-bottom: 2px solid transparent; padding: 6px 4px; }
.page-tabs a.selected { border-color: var(--accent); color: var(--accent-ink); }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .95fr); gap: 16px; margin-bottom: 17px; }
.detail-grid > .panel { margin: 0; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; padding: 6px 19px 21px; }
.facts dt { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.facts dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.facts dd .mono { white-space: normal; }
.capacity { display: flex; align-items: baseline; gap: 6px; margin: 4px 19px 8px; font-variant-numeric: tabular-nums; }
.capacity strong { font-size: 37px; }
.capacity span { color: var(--muted); }
.capacity-bar { height: 8px; margin: 0 19px; border-radius: 5px; background: var(--line); overflow: hidden; }
.capacity-bar i { display: block; height: 100%; background: var(--accent); }
.capacity-link { margin: 12px 19px 14px; }
.inline-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bottom-actions { display: flex; justify-content: flex-end; margin-top: 16px; }
.notice { border-radius: 8px; padding: 12px 15px; margin: 0 0 16px; background: var(--info-bg); color: var(--info); }
.notice.warn { color: var(--warn); background: var(--warn-bg); }
.money-highlight { display: grid; gap: 6px; padding: 2px 19px 20px; }
.money-highlight span { color: var(--muted); font-size: 12px; }
.money-highlight strong { color: var(--accent-ink); font-size: 28px; }
.notes { display: grid; gap: 16px; padding: 0 19px 19px; }
.notes span { font-weight: 670; }
.notes time { color: var(--muted); margin-left: 12px; font-size: 12px; }
.notes p { margin-top: 6px; line-height: 1.6; }
.pause-copy { margin-top: 12px; }
.permission-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 19px 19px; }
dialog { width: min(620px, calc(100% - 24px)); max-height: min(90dvh, 850px); border: 1px solid var(--line); padding: 0; border-radius: 14px; background: var(--surface); color: var(--ink); box-shadow: 0 22px 80px #1026314d; }
dialog::backdrop { background: #10242c88; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 19px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { font-size: 20px; }
.close-button, .menu-mobile { min-width: 44px; border: 0; border-radius: 8px; font-size: 22px; background: transparent; color: var(--muted); }
.close-button:hover, .menu-mobile:hover { background: var(--subtle); }
.dialog-form { display: grid; }
.dialog-body { display: grid; gap: 13px; padding: 16px 19px; }
.dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; position: sticky; bottom: 0; padding: 12px 19px; background: var(--surface); border-top: 1px solid var(--line); }
.dialog-copy { line-height: 1.65; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; font-weight: 640; }
.field > span { font-size: 13px; }
.field input, .field select, .field textarea { font-weight: 480; }
.form-grid, .check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid .wide { grid-column: 1 / -1; }
.check-grid { border: 1px solid var(--line); border-radius: 8px; padding: 10px; min-width: 0; margin: 0; }
.check-grid legend { font-weight: 650; color: var(--muted); }
.check { display: flex; align-items: center; gap: 7px; min-height: 37px; line-height: 1.3; }
.static-field { padding: 11px; background: var(--subtle); border-radius: 8px; }
.error { color: var(--bad); background: var(--bad-bg); padding: 11px 14px; border-radius: 8px; line-height: 1.5; }
.qr-preview { text-align: center; display: grid; justify-items: center; gap: 12px; }
.qr-preview img { width: 176px; height: 176px; border-radius: 6px; image-rendering: pixelated; }
.mock-map {
  position: relative; height: 119px; overflow: hidden; padding: 12px; border-radius: 8px; color: #25584d;
  background: repeating-linear-gradient(39deg, transparent 0 23px, #fff 23px 25px, transparent 25px 50px),
    repeating-linear-gradient(-32deg, #dcebd9 0 30px, #fff 30px 33px, #e5eee1 33px 55px);
}
.mock-map > span { font-weight: 650; }
.mock-map small { position: absolute; right: 7px; bottom: 6px; background: #fff; padding: 2px 5px; border-radius: 3px; }
.map-marker { display: grid; place-items: center; position: absolute; top: 38%; left: 49%; width: 44px; height: 44px; border: 0; border-radius: 50%; color: #fff; background: #08755c; }
.toast { position: fixed; max-width: min(425px, calc(100vw - 30px)); bottom: 23px; right: 22px; z-index: 10; background: #163a32; color: #fff; border-radius: 9px; box-shadow: 0 8px 25px #0b291f38; padding: 13px 17px; line-height: 1.5; }
.toast.failed { background: #792c35; }
.login-screen { min-height: 100dvh; display: grid; place-items: center; padding: 18px; }
.login-card { width: min(450px, 100%); padding: 25px; display: grid; gap: 23px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.login-card .brand-name > span { color: var(--muted); }
.login-card form { display: grid; gap: 15px; }

.ico {
  display: inline-grid; place-items: center; position: relative; width: 17px; height: 17px;
  min-width: 17px; flex-shrink: 0; vertical-align: middle;
}
.ico::before, .ico::after { content: ""; display: block; position: absolute; }
.i-bolt::before { width: 16px; height: 18px; background: currentColor; clip-path: polygon(56% 1%, 91% 1%, 65% 40%, 94% 40%, 41% 99%, 50% 55%, 13% 55%); }
.i-pin::before { width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 62% 59% 60% 0; transform: translateY(-2px) rotate(-45deg); }
.i-pin::after { width: 3px; height: 3px; border-radius: 50%; background: currentColor; transform: translateY(-2px); }
.i-chart::before { width: 14px; height: 13px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; }
.i-chart::after { width: 2px; height: 5px; background: currentColor; transform: translate(-3px, 2px); box-shadow: 4px -2px, 8px -4px; }
.i-orders::before, .i-device::before { width: 10px; height: 13px; border: 1.5px solid currentColor; border-radius: 2px; }
.i-orders::after { width: 5px; height: 1.4px; background: currentColor; box-shadow: 0 3px, 0 -3px; }
.i-device::after { width: 4px; height: 3px; border: 1.3px solid currentColor; transform: translateY(-2px); }
.i-wallet::before { width: 15px; height: 11px; border: 1.7px solid currentColor; border-radius: 2px; }
.i-wallet::after { right: 1px; width: 6px; height: 4px; background: var(--metric-bg, var(--surface)); border: 1.5px solid currentColor; border-radius: 2px; }
.i-search::before { width: 8px; height: 8px; border: 1.5px solid currentColor; border-radius: 50%; transform: translate(-2px, -2px); }
.i-search::after { width: 6px; height: 1.5px; background: currentColor; transform: translate(4px, 4px) rotate(45deg); }
.i-calendar::before { width: 13px; height: 12px; border: 1.5px solid currentColor; border-radius: 2px; }
.i-calendar::after { width: 12px; height: 1.5px; background: currentColor; transform: translateY(-2px); }
.i-download::before { width: 13px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px; bottom: 1px; border-radius: 2px; }
.i-download::after { width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.i-control::before { width: 15px; height: 7px; border: 1.5px solid currentColor; border-radius: 8px; }
.i-control::after { width: 5px; height: 5px; border-radius: 50%; background: currentColor; transform: translateX(3px); }
.i-setting::before, .i-history::before, .i-refresh::before { width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 50%; }
.i-setting::after { width: 4px; height: 4px; border: 1.4px solid currentColor; border-radius: 50%; }
.i-history::after { width: 3.5px; height: 5px; border: solid currentColor; border-width: 0 0 1.5px 1.5px; transform: translate(2px, -2px); }
.i-refresh::before { border-right-color: transparent; }
.i-refresh::after { right: 0; top: 1px; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; }
.i-list::before { width: 13px; height: 1.5px; background: currentColor; box-shadow: 0 -4px currentColor, 0 4px currentColor; }
.i-people::before { width: 5px; height: 5px; border: 1.45px solid currentColor; border-radius: 50%; transform: translateY(-4px); }
.i-people::after { width: 12px; height: 5px; border: 1.45px solid currentColor; border-radius: 7px 7px 2px 2px; transform: translateY(4px); }
.i-chevron::before { width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.i-box::before, .i-layers::before, .i-grid::before { width: 13px; height: 12px; border: 1.5px solid currentColor; border-radius: 2px; }
.i-grid::after { width: 8px; height: 8px; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; transform: translate(4px, 4px); }
.i-layers::after, .i-box::after { width: 12px; height: 1.5px; background: currentColor; }
.i-plus::before, .i-plus::after { width: 11px; height: 1.5px; background: currentColor; }
.i-plus::after { transform: rotate(90deg); }

body[data-view="watch"], body[data-view="compact"] {
  --bg: #101820; --surface: #18232e; --subtle: #1d2b37; --line: #304452;
  --ink: #e9f4f8; --muted: #acc1cf; --accent: #80e0cc; --accent-hover: #126c5c;
  --accent-ink: #9fe9d8; --accent-light: #243f40; --sidebar: #131d27;
  --side-ink: #e9f4f8; --side-muted: #a6b8c7; --side-active: #24414a;
  --chart-fill: #477d8350; --chart-end: #203b4b00; --chart-bar: #467b8a;
  --ok: #b3e9d2; --ok-bg: #1d413e; --info: #c0d7ff; --info-bg: #273c57;
  --warn: #f4d7a1; --warn-bg: #493921; --bad: #f7bfc7; --bad-bg: #552c38; --radius: 9px;
  color-scheme: dark;
}
body[data-view="watch"] .shell { display: block; }
body[data-view="watch"] .sidebar { display: none; }
body[data-view="watch"] .top-brand, body[data-view="watch"] .horizontal-nav,
body[data-view="watch"] .context-nav { display: flex; }
body[data-view="watch"] .topbar, body[data-view="watch"] .horizontal-nav, body[data-view="watch"] .context-nav { padding-inline: 5vw; }
body[data-view="watch"] .merchant-name { border-left: 1px solid var(--line); padding-left: 18px; }
body[data-view="watch"] .horizontal-nav { gap: 16px; border-bottom: 1px solid var(--line); background: var(--sidebar); }
.primary-link { justify-content: flex-start; padding: 10px 13px; color: var(--muted); white-space: nowrap; }
.primary-link.current { color: var(--accent-ink); background: var(--accent-light); }
.context-nav { min-height: 54px; border-bottom: 1px solid var(--line); padding: 4px 24px; }
.context-nav .nav-group { display: flex; gap: 5px; margin: 0; }
.context-nav .nav-group h2 { display: none; }
.context-nav .nav-link { color: var(--muted); font-size: 13px; min-height: 44px; }
.context-nav .nav-link.current { color: var(--accent-ink); background: var(--accent-light); }
body[data-view="watch"] .main { padding-inline: 5vw; }
body[data-view="watch"] .report-grid { grid-template-columns: minmax(0, 1fr) minmax(220px, 28%); gap: 18px; }
body[data-view="watch"] .metric-grid { grid-column: 2; grid-row: 1; grid-template-columns: 1fr; gap: 9px; }
body[data-view="watch"] .metric-card { padding: 13px 16px; gap: 8px; }
body[data-view="watch"] .metric-reading strong { font-size: clamp(22px, 2.5vw, 36px); }
body[data-view="watch"] .trend { grid-column: 1; grid-row: 1; align-self: stretch; }
body[data-view="watch"] .chart-box { height: clamp(255px, 39vh, 385px); }

body[data-view="report"], body[data-view="paper"] {
  --bg: #f6f4ed; --surface: #fffefa; --subtle: #faf8f2; --line: #e6ddd0;
  --ink: #28251f; --muted: #665b4f; --accent: #a05234; --accent-hover: #8c452c;
  --accent-ink: #8e3e24; --accent-light: #f6e8de; --sidebar: #eee8dc;
  --side-ink: #3b3128; --side-muted: #665b4f; --side-active: #e6d7c5;
  --chart-fill: #e8b49875; --chart-end: #fff4eb00; --chart-bar: #dec5ac; --radius: 5px;
}
body[data-view="report"] .shell { grid-template-columns: 86px minmax(0, 1fr); }
body[data-view="report"] .sidebar .brand { margin: 20px auto; }
body[data-view="report"] .sidebar .brand-name, body[data-view="report"] .side-nav { display: none; }
body[data-view="report"] .brand-mark, body[data-view="paper"] .brand-mark { background: #8c452c; color: white; }
body[data-view="report"] .rail-nav { display: grid; gap: 5px; padding: 0 7px; }
body[data-view="report"] .primary-link { flex-direction: column; font-size: 12px; padding: 10px 0; border-radius: 8px; }
body[data-view="report"] .primary-link.current { background: var(--side-active); }
body[data-view="report"] .context-nav { display: flex; padding-inline: 36px; background: var(--surface); }
body[data-view="report"] .context-nav .nav-link.current .ico { color: currentColor; }
body[data-view="report"] .sidebar-footer { margin-inline: 7px; }
body[data-view="report"] .sidebar-footer a { flex-direction: column; font-size: 12px; }
body[data-view="report"] .metric-grid { gap: 0; border-block: 1px solid var(--line); }
body[data-view="report"] .metric-card { background: transparent; border: 0; border-radius: 0; }
body[data-view="report"] .metric-card + .metric-card { border-left: 1px solid var(--line); }
body[data-view="report"] .metric-card.current-metric { background: var(--surface); }
body[data-view="report"] .metric-label .ico { background: transparent; margin-left: -6px; }
body[data-view="report"] .metric-reading strong { letter-spacing: -.065em; }
body[data-view="report"] .report-grid { gap: 30px; }
body[data-view="report"] .trend { border-radius: 2px; }
body[data-view="report"] .chart-box { height: clamp(230px, 32vh, 330px); }
body[data-view="compact"] .shell { grid-template-columns: 196px minmax(0, 1fr); }
body[data-view="compact"] .chart-box { height: 240px; }
body[data-view="compact"] .metric-grid { gap: 8px; }
body[data-view="compact"] .metric-card { padding: 12px; }
body[data-view="coast"] { --sidebar: #eef5f8; --side-ink: #244158; --side-muted: #536f84; --side-active: #d6e7f3; --accent: #297bb0; --accent-ink: #1e608a; --accent-hover: #206a9b; --accent-light: #e6f1f9; --chart-fill: #c3e4f7; --chart-end: #edfaff00; }
body[data-view="coast"] .report-grid { grid-template-columns: minmax(185px, .35fr) minmax(0, 1fr); }
body[data-view="coast"] .metric-grid { grid-template-columns: 1fr; }
body[data-view="coast"] .metric-card { padding: 10px 14px; gap: 6px; }
body[data-view="coast"] .metric-reading strong { font-size: 30px; }
body[data-view="paper"] .sidebar { border-right: 1px solid var(--line); }
body[data-view="paper"] .trend { grid-row: 1; }
body[data-view="paper"] .chart-box { height: 255px; }
body[data-view="paper"] .metric-card { border-radius: 3px; }
body[data-view="coast"] .nav-link.current .ico, body[data-view="paper"] .nav-link.current .ico { color: var(--accent); }
@media (max-width: 1120px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .main { padding-inline: 23px; }
  .topbar { padding-inline: 23px; }
  .metric-card { padding: 14px; }
}
@media (max-width: 900px) {
  .shell, body[data-view="compact"] .shell { grid-template-columns: 181px minmax(0, 1fr); }
  .sidebar .brand { margin-inline: 16px; }
  .metric-grid { gap: 8px; }
  .detail-grid { grid-template-columns: 1fr; }
  .trend .panel-heading { align-items: start; }
  .topbar .zone { display: none; }
  body[data-view="watch"] .report-grid, body[data-view="coast"] .report-grid { grid-template-columns: 1fr; }
  body[data-view="watch"] .metric-grid, body[data-view="coast"] .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column: 1; }
  body[data-view="watch"] .trend { grid-row: 2; }
  #order-filter ~ .table-scroll table { min-width: 930px; }
}
@media (max-width: 650px) {
  .shell, body[data-view="compact"] .shell, body[data-view="report"] .shell { display: block; }
  .sidebar, body[data-view="watch"] .sidebar, body[data-view="report"] .sidebar {
    display: none; position: fixed; top: 60px; bottom: 0; left: 0; height: auto; width: min(250px, 75vw); box-shadow: 12px 0 36px #10263135; z-index: 6;
  }
  .show-navigation .sidebar, body[data-view="watch"] .show-navigation .sidebar, body[data-view="report"] .show-navigation .sidebar { display: flex; }
  .sidebar .brand { display: none; }
  .sidebar .side-nav, body[data-view="report"] .sidebar .side-nav { display: block; padding-top: 13px; }
  body[data-view="report"] .rail-nav, body[data-view="report"] .context-nav, body[data-view="watch"] .horizontal-nav, body[data-view="watch"] .context-nav, body[data-view="watch"] .top-brand { display: none; }
  body[data-view="watch"] .merchant-name { padding: 0; border: 0; }
  .menu-mobile { display: grid; place-items: center; width: 44px; height: 44px; }
  .topbar { height: 60px; padding: 0 9px; }
  .bar-start, .bar-end { gap: 7px; }
  .merchant-name { font-size: 15px; }
  .account-name { display: none; }
  .account summary { gap: 0; }
  .main, body[data-view="watch"] .main { padding: 20px 14px 33px; }
  .page-heading { margin-bottom: 15px; }
  .report-filters { gap: 7px; margin-bottom: 16px; }
  .date-range input { min-width: 99px; width: auto; padding-inline: 3px; }
  .report-grid { gap: 12px; }
  .metric-card { padding: 10px 8px; gap: 9px; }
  .metric-label { line-height: 1.25; gap: 4px; align-items: center; font-size: 12px; }
  .metric-label .ico { width: 21px; height: 22px; min-width: 17px; border-radius: 4px; }
  .metric-reading { column-gap: 4px; row-gap: 4px; }
  .metric-reading strong { font-size: clamp(15px, 4.2vw, 24px); }
  .metric-reading small, .metric-rule { font-size: 12px; }
  body[data-view="watch"] .metric-card, body[data-view="coast"] .metric-card { padding: 9px 7px; }
  body[data-view="watch"] .metric-reading strong, body[data-view="coast"] .metric-reading strong { font-size: clamp(15px, 4.2vw, 24px); }
  .trend .panel-heading { padding: 13px 12px 6px; }
  .segmented { gap: 2px; padding: 2px; }
  .segmented .btn { font-size: 12px; padding-inline: 7px; }
  .chart-box { margin-inline: 6px; }
  .trend-footer { padding-inline: 13px; }
  .list-controls .filter { flex-basis: 100%; }
  .content-sites table, .content-devices table, .content-staff table, .content-audit table { min-width: 620px; }
  .table-scroll { scrollbar-width: thin; }
  .form-grid, .check-grid, .facts { gap: 12px 10px; }
  .facts { padding-inline: 14px; }
  .heading-row > .actions { gap: 5px; }
  .heading-row > .actions .btn { padding-inline: 8px; font-size: 13px; }
  .toast { right: 11px; bottom: 12px; }
}

.photo-editor { border-top: 1px solid var(--line); padding-top: 13px; }
.photo-editor-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.photo-editor-title .muted, .photo-count { font-size: 12px; }
.photo-grid, .site-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.site-gallery { padding: 0 19px 19px; max-width: 900px; }
.photo-tile, .photo-picker { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; margin: 0; padding: 0; min-width: 0; border-radius: 8px; overflow: hidden; background: var(--subtle); }
.photo-tile { border: 1px solid var(--line); }
.photo-tile img { width: 100%; height: 100%; min-height: 0; position: absolute; inset: 0; object-fit: cover; }
.photo-tile:is(button):hover { border-color: var(--accent); }
.photo-remove { position: absolute; top: 5px; right: 5px; width: 44px; height: 44px; display: grid; place-items: center; font-size: 22px; line-height: 1; border-radius: 7px; border: 0; background: #152a32d9; color: white; }
.photo-picker { border: 1px dashed var(--line); align-content: center; gap: 7px; color: var(--accent-ink); font-weight: 650; cursor: pointer; }
.photo-picker:hover, .photo-picker:focus-within { border-color: var(--accent); background: var(--accent-light); }
.photo-picker input[type=file] { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; min-height: 0; cursor: pointer; }
.photo-count { margin-top: 6px; text-align: right; font-variant-numeric: tabular-nums; }
.photo-blank { padding: 0 19px 19px; }
.photo-large { max-width: 100%; max-height: 68dvh; object-fit: contain; margin: auto; border-radius: 8px; }

.list-description { padding: 0 19px 15px; color: var(--muted); line-height: 1.55; }
.template-rate-grid, .tariff-editors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.template-rate-grid { margin: 0 0 17px; }
.template-rate-grid > .panel { margin-top: 0; }
.template-draft { margin: 0 0 17px; }
.template-draft summary { margin-bottom: 10px; color: var(--accent-ink); font-weight: 650; }
.fee-editor { display: grid; gap: 9px; align-content: start; min-width: 0; margin: 0; padding: 10px 10px 12px; border: 1px solid var(--line); border-radius: 9px; }
.fee-editor legend { font-weight: 680; padding: 0 5px; }
.fee-editor .btn { justify-self: start; }
.fee-band-rows { display: grid; gap: 6px; }
.fee-band-labels, .fee-band-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 6px; align-items: center; }
.fee-band-labels { color: var(--muted); font-size: 12px; }
.fee-band-row input { padding-inline: 7px; font-variant-numeric: tabular-nums; }
.fee-band-row input[readonly] { background: var(--subtle); color: var(--muted); }
.fee-band-remove { height: 44px; padding: 0; font-size: 20px; border-radius: 7px; border: 0; background: transparent; color: var(--muted); }
.fee-band-remove:hover { color: var(--bad); background: var(--bad-bg); }

#order-filter ~ .table-scroll td, #order-filter ~ .table-scroll th { padding-inline: 12px; }
#order-filter ~ .table-scroll td:last-child { white-space: nowrap; }
.order-data { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.order-data .table-scroll table { min-width: 410px; }
.order-data th, .order-data td { padding-inline: 12px; }
@media (max-width: 1100px) {
  .order-data { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .tariff-editors, .template-rate-grid { grid-template-columns: 1fr; }
  .content-sites .template-rate-grid table { min-width: 0; }
  .photo-grid, .site-gallery { gap: 6px; }
  .photo-remove { top: 3px; right: 3px; }
}