@charset "UTF-8";
/* leoe admin. One neutral canvas, one accent and status colours that mean the same thing everywhere.
   Body text is never below 12px, and secondary text meets WCAG AA on white. */
:root {
  --bg: #f3f4f6;
  --surface: #fff;
  --surface-2: #f8f9fa;
  --ink: #14171c;
  --ink-2: #454c59;
  --ink-3: #697181;
  --line: #e2e5ea;
  --line-2: #eef0f3;
  --rail: #11161c;
  --rail-2: #1b222b;
  --rail-ink: #aab3c0;
  --accent: #0a7286;
  --accent-hover: #085e6f;
  --accent-tint: #e4f4f7;
  --brand: #19d3e6;
  --live: #d42a2a;
  --live-tint: #fdecec;
  --online: #128044;
  --online-tint: #e6f5ec;
  --amber: #a85b06;
  --amber-tint: #fdf1df;
  --danger: #c02626;
  --danger-tint: #fdeeee;
  --blue: #2559b5;
  --blue-tint: #e9f0fb;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow-1: 0 1px 2px #14171c0d;
  --shadow-2: 0 8px 28px #14171c24, 0 1px 3px #14171c14;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  font-family: "Segoe UI", -apple-system, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
  font-synthesis: none;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; font-size: 14px; line-height: 1.45; background: var(--bg); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
a { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: 20px; font-weight: 650; letter-spacing: -.2px; }
h2 { font-size: 16px; font-weight: 650; }
h3 { font-size: 14px; font-weight: 650; }
.hidden { display: none !important; }
.muted { color: var(--ink-3); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
svg { display: block; }

/* Brand */
.brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 700; letter-spacing: -.4px; color: var(--ink); }
.brand-mark { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--brand); color: #06262b; font: 800 20px/1 Arial, sans-serif; padding-bottom: 1px; }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 6px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-2); font-size: 13.5px; font-weight: 550; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
.button:hover:not(:disabled) { background: var(--surface-2); border-color: #cdd2da; color: var(--ink); }
.button svg { width: 16px; height: 16px; }
.button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.button.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.button.danger { color: var(--danger); border-color: #efcfcf; }
.button.danger:hover:not(:disabled) { background: var(--danger-tint); border-color: #e5b1b1; color: var(--danger); }
.button.danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.button.danger-solid:hover:not(:disabled) { background: #a51f1f; border-color: #a51f1f; color: #fff; }
.button.ghost { background: transparent; border-color: transparent; }
.button.ghost:hover:not(:disabled) { background: #14171c0a; border-color: transparent; }
.button.small-button { min-height: 28px; padding: 3px 10px; font-size: 13px; }
.button.full, .full { width: 100%; }
.icon-button { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-3); }
.icon-button:hover { background: #14171c0d; color: var(--ink); }
.icon-button svg { width: 18px; height: 18px; }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.link-button { border: 0; background: none; padding: 0; color: var(--accent); font-size: 13px; font-weight: 550; }
.link-button:hover { color: var(--accent-hover); text-decoration: underline; }

/* Forms */
input, select, textarea { width: 100%; min-height: 34px; padding: 6px 10px; border: 1px solid #d5d9e0; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 14px; transition: border-color .12s, box-shadow .12s; }
input::placeholder, textarea::placeholder { color: #8a92a0; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #0a728622; outline: none; }
textarea { min-height: 74px; resize: vertical; line-height: 1.5; }
label { display: block; margin-bottom: 14px; color: var(--ink-2); font-size: 13px; font-weight: 550; }
label > input, label > select, label > textarea { display: block; margin-top: 5px; font-weight: 400; }
.hint { display: block; margin-top: 5px; color: var(--ink-3); font-size: 12.5px; font-weight: 400; line-height: 1.5; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: var(--accent); cursor: pointer; }
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-2); font-size: 13.5px; font-weight: 450; cursor: pointer; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.field-grid .span-2 { grid-column: 1 / -1; }
.form-error { margin: 8px 0; color: var(--danger); font-size: 13px; white-space: pre-wrap; }
.form-error:empty { display: none; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.switch { position: relative; display: inline-block; flex: none; width: 36px; height: 20px; margin: 0; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 10px; background: #c5cad3; transition: background .14s; pointer-events: none; }
.switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #14171c40; transition: transform .14s; }
.switch input:checked + i { background: var(--accent); }
.switch input:checked + i::after { transform: translateX(16px); }
.switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch input:disabled + i { opacity: .5; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 30px; padding: 3px 11px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 500; white-space: nowrap; }
.chip:hover:not(:disabled) { border-color: #c4c9d2; background: var(--surface-2); }
.chip.on { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-hover); font-weight: 600; }

/* Status vocabulary */
.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 1px 8px; border-radius: 11px; background: #eef0f3; color: var(--ink-2); font-size: 12.5px; font-weight: 550; white-space: nowrap; }
.badge.green { background: var(--online-tint); color: var(--online); }
.badge.amber { background: var(--amber-tint); color: var(--amber); }
.badge.red { background: var(--danger-tint); color: var(--danger); }
.badge.blue { background: var(--blue-tint); color: var(--blue); }
.badge.accent { background: var(--accent-tint); color: var(--accent-hover); }
.presence { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 550; white-space: nowrap; }
.presence i { width: 8px; height: 8px; border-radius: 50%; background: #b8bec9; flex: none; }
.presence.online { color: var(--online); }
.presence.online i { background: var(--online); }
.presence.live { color: var(--live); }
.presence.live i { background: var(--live); animation: live-pulse 1.8s ease-out infinite; }
.presence.offline { color: var(--ink-3); font-weight: 450; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 #d42a2a66; } 70% { box-shadow: 0 0 0 6px #d42a2a00; } 100% { box-shadow: 0 0 0 0 #d42a2a00; } }

/* Shell */
.shell { min-height: 100vh; }
.rail { position: fixed; inset: 0 auto 0 0; z-index: 10; display: flex; flex-direction: column; width: 204px; padding: 16px 10px 10px; background: var(--rail); color: var(--rail-ink); }
.rail .brand { padding: 2px 8px 18px; color: #fff; }
.nav-label { display: block; margin: 14px 10px 6px; color: #7d8795; font-size: 12px; font-weight: 500; }
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; margin-bottom: 2px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--rail-ink); font-size: 14px; font-weight: 500; text-align: left; transition: background .12s, color .12s; }
.nav-item svg { width: 18px; height: 18px; flex: none; }
.nav-item:hover { background: var(--rail-2); color: #fff; }
.nav-item.active { background: #24303b; color: #fff; }
.nav-item.active svg { color: var(--brand); }
.nav-item:focus-visible { outline-color: var(--brand); }
.nav-count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; background: #f0a93a; color: #2b1a02; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.rail-foot { margin-top: auto; }
.sync-state { display: flex; align-items: center; gap: 8px; padding: 8px 10px; color: #8d97a5; font-size: 12.5px; }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex: none; }
.sync-state.bad { color: #f0a93a; }
.sync-state.bad .sync-dot { background: #f0a93a; }
.account { display: flex; align-items: center; gap: 8px; padding: 8px 6px 2px 10px; border-top: 1px solid #ffffff14; }
.account strong { flex: 1; min-width: 0; overflow: hidden; color: #dfe4ea; font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #2b3641; color: #fff; font-size: 13px; font-weight: 600; }
.account .icon-button { color: #8d97a5; }
.account .icon-button:hover { background: var(--rail-2); color: #fff; }
.main { margin-left: 204px; min-width: 0; padding: 18px 24px 40px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; margin-bottom: 14px; }

/* Surfaces */
.card { margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line-2); }
.card-head p { margin-top: 2px; color: var(--ink-3); font-size: 12.5px; }
.card-body { padding: 16px; }
.empty { display: grid; justify-items: center; gap: 6px; padding: 52px 20px; color: var(--ink-3); text-align: center; }
.empty svg { width: 30px; height: 30px; margin-bottom: 6px; color: #aeb4bf; }
.empty h3 { color: var(--ink-2); font-size: 14.5px; }
.empty p { max-width: 420px; font-size: 13px; }
.notice { display: flex; gap: 8px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--blue-tint); color: #2b4a80; font-size: 13px; line-height: 1.55; }
.notice svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.notice.warning { background: var(--amber-tint); color: #7a4304; }
.notice + * { margin-top: 12px; }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.kv:last-child { border-bottom: 0; }
.kv > span:first-child { flex: none; color: var(--ink-3); }
.kv > span:last-child { min-width: 0; color: var(--ink); text-align: right; word-break: break-all; }

/* Metric cards: each one is also the filter for its own number. */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.metric { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); text-align: left; transition: border-color .12s, background .12s; }
.metric:hover { border-color: #c9ced6; }
.metric[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.metric-label { display: flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 13.5px; font-weight: 550; }
.metric-label i { width: 8px; height: 8px; border-radius: 50%; background: #b8bec9; }
.metric-value { color: var(--ink); font-size: 26px; font-weight: 650; line-height: 1.15; letter-spacing: -.5px; }
.metric.pending .metric-label i { background: #e39317; }
.metric.pending.has .metric-value { color: var(--amber); }
.metric.active .metric-label i { background: var(--accent); }
.metric.online .metric-label i { background: var(--online); }
.metric.live .metric-label i { background: var(--live); }
.metric.live.has .metric-label i { animation: live-pulse 1.8s ease-out infinite; }
.metric.live.has .metric-value { color: var(--live); }

/* Device toolbar */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--line-2); }
.group-tabs { display: flex; align-items: center; gap: 2px; flex: 1 1 320px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.group-tabs::-webkit-scrollbar { display: none; }
.group-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-2); font-size: 13.5px; font-weight: 550; white-space: nowrap; }
.group-tab small { color: var(--ink-3); font-size: 12.5px; font-weight: 450; }
.group-tab:hover { background: #14171c0a; }
.group-tab.on { background: var(--accent-tint); color: var(--accent-hover); }
.group-tab.on small { color: var(--accent-hover); }
.group-tab.manage { color: var(--ink-3); }
.search { position: relative; flex: 0 1 240px; min-width: 170px; }
.search svg { position: absolute; top: 9px; left: 9px; width: 16px; height: 16px; color: #8a92a0; pointer-events: none; }
.search input { padding-left: 31px; }
.toolbar select { width: auto; min-width: 104px; }

/* Device table */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th { padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3); font-size: 12.5px; font-weight: 550; white-space: nowrap; }
td { padding: 7px 10px; border-bottom: 1px solid var(--line-2); color: var(--ink); font-size: 13.5px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fafbfc; }
tbody tr.selected { background: #f0f9fb; }
th:first-child, td:first-child { padding-left: 14px; }
th:last-child, td:last-child { padding-right: 14px; }
.devices-wrap { overflow: visible; }
.devices-table { table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.devices-table th { position: sticky; top: 0; z-index: 2; }
.devices-table .c-select { width: 40px; }
.devices-table .c-group { width: 15%; }
.devices-table .c-device { width: 21%; }
.devices-table .c-presence { width: 100px; }
.devices-table .c-features { width: 18%; }
.devices-table .c-ip { width: 14%; }
.devices-table .c-expiry { width: 12%; }
.devices-table .c-ops { width: 148px; }
.sort-head { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: inherit; font-weight: inherit; }
.sort-head:hover { color: var(--ink); }
.sort-head.on { color: var(--accent-hover); }
.sort-head svg { width: 12px; height: 12px; }
.sort-head.desc svg { transform: rotate(180deg); }
.primary-line { display: block; overflow: hidden; color: var(--ink); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.primary-line.plain { font-weight: 450; }
.primary-line.none { color: var(--ink-3); font-weight: 450; }
.sub-line { display: block; overflow: hidden; margin-top: 1px; color: var(--ink-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.sub-line.warn { color: var(--amber); }
.sub-line.mono { font-size: 12px; word-break: normal; }
/* A cell that opens an editor keeps its shape and only gains a hover surface. */
.cell-edit { display: block; width: calc(100% + 14px); min-height: 36px; margin: -3px -7px; padding: 3px 7px; border: 0; border-radius: var(--radius-sm); background: transparent; text-align: left; }
.cell-edit:hover, .cell-edit[aria-expanded="true"] { background: #14171c0b; }
.feature-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.copy-id { display: inline; padding: 0; border: 0; background: none; color: var(--ink-3); font-family: var(--mono); font-size: 12px; }
.copy-id:hover { color: var(--accent-hover); }
.row-actions { display: flex; align-items: center; gap: 2px; margin: 0 -7px; }
.row-action { padding: 4px 7px; border: 0; border-radius: 6px; background: none; color: var(--ink-2); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.row-action:hover { background: #14171c0d; color: var(--ink); }
.row-action.primary { color: var(--accent); font-weight: 600; }
.row-action.primary:hover { background: var(--accent-tint); color: var(--accent-hover); }
.row-action.risky:hover { background: var(--danger-tint); color: var(--danger); }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--line-2); color: var(--ink-3); font-size: 13px; }
.pagination { display: flex; align-items: center; gap: 8px; }
.pagination .button { width: 30px; min-height: 28px; padding: 0; }
.pagination .button svg { width: 15px; height: 15px; }
@keyframes cell-flash { 0% { background-color: #bdeaf1; } 100% { background-color: transparent; } }
.flash { animation: cell-flash 1.1s ease-out; }
@media (prefers-reduced-motion: reduce) { .flash, .presence.live i, .metric.live.has .metric-label i { animation: none; } }

/* Floating selection bar: appears over content so the table never jumps. */
.selection-bar { position: fixed; bottom: 18px; left: calc(50% + 102px); z-index: 20; display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 244px); padding: 7px 8px 7px 14px; border-radius: 12px; background: var(--rail); box-shadow: var(--shadow-2); color: #fff; font-size: 13.5px; transform: translateX(-50%); }
.selection-bar strong { margin-right: 8px; font-weight: 600; white-space: nowrap; }
.selection-bar .button { min-height: 30px; border-color: transparent; background: #ffffff14; color: #fff; }
.selection-bar .button:hover:not(:disabled) { background: #ffffff26; color: #fff; border-color: transparent; }
.selection-bar .button.danger { color: #ffb4b4; }
.selection-bar .button.danger:hover:not(:disabled) { background: #d42a2a; color: #fff; }
.selection-bar .icon-button { color: #aab3c0; }
.selection-bar .icon-button:hover { background: #ffffff1a; color: #fff; }

/* Popover */
.popover { position: fixed; z-index: 40; width: 300px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-2); }
.popover-head { padding: 11px 14px 8px; }
.popover-head h3 { font-size: 13.5px; }
.popover-head p { overflow: hidden; margin-top: 1px; color: var(--ink-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.popover-body { padding: 0 14px 12px; }
.popover-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 14px; border-top: 1px solid var(--line-2); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-weight: 450; cursor: pointer; }
.toggle-row:last-child { border-bottom: 0; }
.toggle-row strong { display: block; color: var(--ink); font-size: 14px; font-weight: 550; }
.toggle-row small { display: block; color: var(--ink-3); font-size: 12.5px; }
.popover-section { margin-top: 10px; }
.popover-section > span { display: block; margin-bottom: 6px; color: var(--ink-3); font-size: 12.5px; }
.pick-list { display: grid; gap: 1px; max-height: 208px; margin: 0 -6px; overflow-y: auto; }
.pick-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 4px 8px; border: 0; border-radius: 6px; background: none; color: var(--ink); font-size: 14px; text-align: left; }
.pick-item:hover { background: #14171c0b; }
.pick-item.on { color: var(--accent-hover); font-weight: 600; }
.pick-item svg { width: 15px; height: 15px; }
.inline-field { display: flex; gap: 6px; }
.inline-field input { flex: 1; min-width: 0; }
.ip-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.ip-row:last-child { border-bottom: 0; }
.ip-row small { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }

/* Drawer */
.shade { position: fixed; inset: 0; z-index: 30; background: #14171c2e; }
.drawer { position: fixed; inset: 0 0 0 auto; z-index: 31; width: 460px; max-width: 100%; overflow-y: auto; background: var(--surface); box-shadow: -8px 0 30px #14171c1f; }
.drawer > header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.drawer-section { padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.drawer-section > h3 { margin-bottom: 8px; color: var(--ink-3); font-size: 12.5px; font-weight: 550; }
.drawer-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.drawer-summary .feature-badges { justify-content: flex-end; }
.drawer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.drawer-row > span:first-child { color: var(--ink-3); font-size: 13px; }
.drawer-danger { display: flex; flex-wrap: wrap; gap: 8px; }
.thumb-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-bottom: 8px; }
.thumb-strip button { aspect-ratio: 9 / 16; padding: 0; border: 0; border-radius: 5px; background: #11161c; overflow: hidden; }
.thumb-strip img { display: block; width: 100%; height: 100%; object-fit: contain; }
details.fold > summary { color: var(--ink-3); font-size: 12.5px; font-weight: 550; cursor: pointer; }
details.fold[open] > summary { margin-bottom: 8px; }
.scope-summary { padding: 5px 0 0; }
.scope-summary .mono { display: block; margin-top: 4px; color: var(--ink-3); }

/* Dialog */
dialog { width: 520px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: 12px; background: var(--surface); box-shadow: 0 24px 70px #14171c40; color: var(--ink); }
dialog::backdrop { background: #14171c52; }
dialog > header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line-2); background: var(--surface); }
#modal-content { padding: 16px 18px 18px; }
.feature-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.feature-tile { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); cursor: pointer; }
.feature-tile:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.feature-tile > svg { width: 20px; height: 20px; flex: none; color: var(--ink-3); }
.feature-tile span { font-size: 14px; font-weight: 550; }
.feature-tile small { display: block; color: var(--ink-3); font-size: 12.5px; font-weight: 400; }
.feature-tile:has(input:checked) > svg { color: var(--accent); }
.group-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.group-row strong { flex: 1; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.group-row small { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.template-list { max-height: 44vh; margin-bottom: 12px; overflow: auto; }
.template-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.template-row strong { flex: 1; min-width: 0; font-weight: 550; overflow-wrap: anywhere; }
.scope-row-preview { flex-basis: 100%; color: var(--ink-3); font-size: 12.5px; overflow-wrap: anywhere; }
.scope-editor { margin-top: 2px; }
.scope-editor > h3 { margin-bottom: 8px; }
.scope-picker { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.scope-template-list { display: flex; flex-wrap: wrap; gap: 6px 14px; max-height: 10rem; margin-bottom: 10px; overflow: auto; }
.scope-resolved { max-height: 8rem; margin: 6px 0 10px; overflow: auto; overflow-wrap: anywhere; }
.scope-pause { margin-bottom: 10px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--amber-tint); color: #7a4304; font-size: 13px; }
.scope-pause .check { margin-top: 6px; }
.delete-targets { max-height: 190px; margin: 12px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.delete-targets li { display: grid; gap: 2px; padding: 7px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.delete-targets .mono { color: var(--ink-3); font-size: 12px; overflow-wrap: anywhere; }
.history-table td, .history-table th { padding: 7px 8px; font-size: 13px; white-space: nowrap; }
.preset-row { margin: -6px 0 12px; }
.profile-fingerprint { margin: -6px 0 14px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-3); font-size: 12px; grid-column: 1 / -1; }
.upload-progress { width: 100%; height: 8px; margin-top: 10px; accent-color: var(--accent); }

/* Live review wall */
.audit-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.audit-toolbar select { width: auto; min-width: 130px; }
.audit-toolbar .count { margin-left: auto; color: var(--ink-3); font-size: 13px; white-space: nowrap; }
.segmented { display: inline-flex; padding: 2px; border-radius: 8px; background: #e7e9ed; }
.segmented button { min-height: 28px; padding: 2px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink-2); font-size: 13px; font-weight: 500; }
.segmented button.on { background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); font-weight: 600; }
.audit-wall { --tile: 128px; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tile), 1fr)); gap: 10px; }
.audit-wall.dense { --tile: 100px; gap: 8px; }
.audit-wall.large { --tile: 176px; gap: 12px; }
.tile { min-width: 0; }
.tile.fresh { animation: tile-in .32s ease-out; }
@keyframes tile-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.tile-frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 8px; background: #11161c; container-type: size; }
.tile-open { position: absolute; inset: 0; padding: 0; border: 0; background: none; cursor: zoom-in; }
.tile-open img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: contain; transform: translate(-50%, -50%); }
.tile-open img.rotation-90, .tile-open img.rotation-270 { width: 100cqh; height: 100cqw; }
.tile-open img.rotation-90 { transform: translate(-50%, -50%) rotate(90deg); }
.tile-open img.rotation-180 { transform: translate(-50%, -50%) rotate(180deg); }
.tile-open img.rotation-270 { transform: translate(-50%, -50%) rotate(270deg); }
.tile-open img.mirrored { transform: translate(-50%, -50%) scaleX(-1); }
.tile-open img.rotation-90.mirrored { transform: translate(-50%, -50%) rotate(90deg) scaleX(-1); }
.tile-open img.rotation-180.mirrored { transform: translate(-50%, -50%) rotate(180deg) scaleX(-1); }
.tile-open img.rotation-270.mirrored { transform: translate(-50%, -50%) rotate(270deg) scaleX(-1); }
.tile-select { position: absolute; top: 5px; left: 5px; z-index: 2; display: grid; place-items: center; width: 24px; height: 24px; margin: 0; border-radius: 5px; background: #11161c8c; opacity: 0; transition: opacity .1s; cursor: pointer; }
.tile:hover .tile-select, .tile-select:focus-within, .tile.selected .tile-select, .audit-wall.selecting .tile-select { opacity: 1; }
.tile.selected .tile-frame { outline: 2px solid var(--brand); outline-offset: 1px; }
.tile-actions { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; gap: 4px; padding: 16px 5px 5px; background: linear-gradient(transparent, #0b0e12d9); opacity: 0; transition: opacity .1s; pointer-events: none; }
.tile:hover .tile-actions, .tile:focus-within .tile-actions { opacity: 1; pointer-events: auto; }
.tile-actions button { flex: 1; min-width: 0; min-height: 26px; padding: 0 2px; border: 0; border-radius: 5px; background: #ffffff24; color: #fff; font-size: 12.5px; }
.tile-actions button:hover { background: #ffffff3d; }
.tile-actions button.risky:hover { background: var(--live); }
.tile-meta { padding: 5px 1px 0; }
.tile-meta strong { display: block; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tile-meta span { display: block; overflow: hidden; color: var(--ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.new-frames { position: fixed; top: 16px; left: calc(50% + 102px); z-index: 15; padding: 6px 14px; border: 0; border-radius: 16px; background: var(--rail); box-shadow: var(--shadow-2); color: #fff; font-size: 13px; font-weight: 550; transform: translateX(-50%); }
.audit-surface { min-height: 200px; }
.audit-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.audit-pager select { width: auto; min-width: 110px; }
.pager-pages { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager-pages .button { min-width: 32px; padding: 3px 8px; }
.pager-pages .button svg { width: 15px; height: 15px; }
.pager-number.on { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-hover); font-weight: 650; }
.pager-gap { padding: 0 4px; color: var(--ink-3); }
.marquee { position: fixed; z-index: 25; border: 1px solid var(--accent); border-radius: 2px; background: #0a72862b; pointer-events: none; }
body.marquee-active { cursor: crosshair; user-select: none; }
body.marquee-active .tile-open { cursor: crosshair; }

/* Lightbox */
dialog.audit-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; overflow: hidden; border-radius: 0; background: #0b0e12f2; box-shadow: none; color: #fff; }
dialog.audit-lightbox::backdrop { background: #0b0e12; }
.lightbox-shell { display: flex; flex-direction: column; height: 100%; }
.lightbox-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 16px; }
.lightbox-header h2 { font-size: 15px; }
.lightbox-header p { margin-top: 2px; color: #9aa3b0; font-size: 12.5px; word-break: break-all; }
.lightbox-header .icon-button { color: #dfe4ea; }
.lightbox-header .icon-button:hover { background: #ffffff1a; color: #fff; }
.lightbox-stage { position: relative; display: flex; flex: 1; align-items: center; justify-content: center; min-height: 0; cursor: zoom-out; }
.lightbox-stage img { max-width: calc(100vw - 150px); max-height: calc(100dvh - 130px); object-fit: contain; cursor: default; }
.lightbox-stage img.rotation-90 { transform: rotate(90deg); }
.lightbox-stage img.rotation-180 { transform: rotate(180deg); }
.lightbox-stage img.rotation-270 { transform: rotate(270deg); }
.lightbox-stage img.mirrored { transform: scaleX(-1); }
.lightbox-stage img.rotation-90.mirrored { transform: rotate(90deg) scaleX(-1); }
.lightbox-stage img.rotation-180.mirrored { transform: rotate(180deg) scaleX(-1); }
.lightbox-stage img.rotation-270.mirrored { transform: rotate(270deg) scaleX(-1); }
.lightbox-stage img.rotation-90, .lightbox-stage img.rotation-270 { max-width: calc(100dvh - 130px); max-height: calc(100vw - 150px); }
.lightbox-arrow { position: absolute; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #ffffff1a; color: #fff; transform: translateY(-50%); }
.lightbox-arrow:hover:not(:disabled) { background: #ffffff33; }
.lightbox-arrow svg { width: 22px; height: 22px; }
.lightbox-arrow.previous { left: 16px; }
.lightbox-arrow.next { right: 16px; }
.lightbox-arrow:disabled { opacity: .25; }
.lightbox-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; color: #9aa3b0; font-size: 13px; }
.lightbox-footer .button { border-color: #ffffff2b; background: #ffffff12; color: #e5e9ee; }
.lightbox-footer .button:hover:not(:disabled) { background: #ffffff26; color: #fff; border-color: #ffffff2b; }
.lightbox-footer .button.danger { color: #ffb4b4; }
.lightbox-footer .button.danger:hover:not(:disabled) { background: var(--live); color: #fff; }

/* Settings */
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; align-items: start; max-width: 1240px; }
.settings .card { margin: 0; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.setting-row:first-child { padding-top: 0; }
.setting-row:last-child { padding-bottom: 0; border-bottom: 0; }
.setting-row > div:first-child { min-width: 0; }
.setting-row strong { display: block; font-size: 14px; font-weight: 550; }
.setting-row small { display: block; margin-top: 1px; color: var(--ink-3); font-size: 12.5px; }
.number-unit { display: flex; align-items: center; gap: 6px; flex: none; color: var(--ink-3); font-size: 13px; }
.number-unit input { width: 84px; text-align: right; }
.save-state { margin-left: auto; color: var(--online); font-size: 12.5px; opacity: 0; transition: opacity .2s; }
.save-state.on { opacity: 1; }
.save-state.error { color: var(--danger); }
.list-editor-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.list-editor-row span { min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.list-editor-empty { padding: 4px 0 10px; color: var(--ink-3); font-size: 13px; }
.list-editor-add { display: flex; gap: 6px; margin-top: 10px; }
.list-editor-add input { flex: 1; min-width: 0; }
.profile-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.profile-row:first-child { padding-top: 0; }
.profile-row:last-child { padding-bottom: 0; border-bottom: 0; }
.profile-row strong { font-size: 14px; font-weight: 550; }
.profile-row code { color: var(--ink-3); font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.profile-row small { grid-column: 1 / -1; overflow: hidden; color: var(--ink-3); font-family: var(--mono); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

/* Releases, keys, events */
.release-row, .key-row { display: grid; gap: 4px; padding: 13px 16px; border-bottom: 1px solid var(--line-2); }
.release-row:last-child, .key-row:last-child { border-bottom: 0; }
.release-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.release-title strong { font-size: 14.5px; font-weight: 600; }
.release-row p { color: var(--ink-2); font-size: 13.5px; white-space: pre-wrap; }
.release-row .mono, .key-row .mono { color: var(--ink-3); font-size: 12px; }
.release-row .actions, .key-row .actions { margin-top: 6px; }
.key-row .kv { padding: 5px 0; }
.event-detail { max-width: 640px; color: var(--ink-2); overflow-wrap: anywhere; white-space: normal; }
.events-table th:first-child, .events-table td:first-child { width: 150px; white-space: nowrap; }
.events-table td:nth-child(2) { width: 110px; white-space: nowrap; }
.events-table td:nth-child(3) { width: 170px; white-space: nowrap; }
.modules-table td { white-space: normal; }
.modules-table .actions { gap: 4px; flex-wrap: nowrap; }
.toolbar-title { color: var(--ink-3); font-size: 13px; }

/* Toasts */
.toasts { position: fixed; bottom: 70px; left: calc(50% + 102px); z-index: 60; display: grid; justify-items: center; gap: 6px; max-width: 80vw; transform: translateX(-50%); pointer-events: none; }
.toast { padding: 8px 14px; border-radius: 8px; background: var(--rail); box-shadow: var(--shadow-2); color: #fff; font-size: 13.5px; }
.toast.error { background: #a51f1f; }

/* Auth */
.auth { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: var(--rail); }
.auth-card { width: 360px; max-width: 100%; padding: 26px; border-radius: 14px; background: var(--surface); box-shadow: 0 24px 70px #0000004d; }
.auth-card .brand { margin-bottom: 20px; }
.auth-card h1 { margin-bottom: 16px; font-size: 19px; }
.auth-card > .muted { margin: -10px 0 14px; font-size: 13.5px; }
.auth-card input { min-height: 38px; }
.auth-card .button { min-height: 38px; margin-top: 4px; }
.boot { display: grid; place-content: center; justify-items: center; gap: 12px; min-height: 100vh; background: var(--rail); color: #aab3c0; font-size: 13.5px; }

/* Narrower laptops: rail becomes icons. */
@media (max-width: 1240px) {
  .rail { width: 60px; padding: 14px 8px 8px; }
  .rail .brand { justify-content: center; padding: 0 0 14px; }
  .brand-word, .nav-text, .nav-label, .rail-foot #account-avatar { display: none; }
  .nav-item { justify-content: center; height: 40px; padding: 0; }
  .nav-item svg { width: 20px; height: 20px; }
  .nav-count { position: absolute; top: 2px; right: 2px; min-width: 16px; padding: 0 3px; font-size: 11px; line-height: 16px; }
  .sync-state { justify-content: center; padding: 8px 0; }
  .account { justify-content: center; padding: 8px 0 0; }
  .main { margin-left: 60px; padding: 14px 16px 40px; }
  .selection-bar, .toasts, .new-frames { left: calc(50% + 30px); }
  .selection-bar { max-width: calc(100vw - 90px); flex-wrap: wrap; }
}
/* Below the width the table can hold, each device becomes a card so nothing scrolls sideways. */
@media (max-width: 1040px) {
  .devices-table, .devices-table tbody { display: block; }
  .devices-table thead { display: none; }
  .devices-table tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "group presence" "device device" "features expiry" "ip ip" "ops ops"; gap: 6px 12px; padding: 12px 14px 8px 42px; border-bottom: 1px solid var(--line); }
  .devices-table tbody tr:last-child { border-bottom: 0; }
  .devices-table tbody td[class] { display: block; width: auto; min-width: 0; padding: 0; border: 0; }
  .devices-table tbody td.c-select { position: absolute; top: 14px; left: 14px; }
  .devices-table tbody td.c-group { grid-area: group; }
  .devices-table tbody td.c-presence { grid-area: presence; justify-self: end; text-align: right; }
  .devices-table tbody td.c-device { grid-area: device; }
  .devices-table tbody td.c-features { grid-area: features; }
  .devices-table tbody td.c-expiry { grid-area: expiry; }
  .devices-table tbody td.c-ip { grid-area: ip; }
  .devices-table tbody td.c-ops { grid-area: ops; padding-top: 5px; border-top: 1px solid var(--line-2); }
  .devices-table td.c-ops .row-actions { justify-content: flex-end; margin: 0; }
  .cell-edit { margin: 0 -7px; }
  .settings { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .rail { top: auto; right: 0; bottom: 0; flex-direction: row; align-items: center; width: auto; height: 54px; padding: 4px 6px; }
  .rail .brand, .rail-foot .sync-state, .nav-label { display: none; }
  #nav { display: flex; flex: 1; justify-content: space-around; gap: 2px; }
  .nav-item { width: 44px; margin: 0; }
  .rail-foot { margin: 0; }
  .account { padding: 0; border: 0; }
  .main { margin-left: 0; padding: 12px 16px 76px; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric { padding: 9px 12px; }
  .metric-value { font-size: 22px; }
  .search { flex: 1 1 55%; }
  .toolbar .search + select { flex: 0 0 auto; }
  .group-tabs { flex-basis: 100%; }
  .selection-bar, .toasts, .new-frames { left: 50%; }
  .selection-bar { bottom: 62px; max-width: calc(100vw - 16px); }
  .toasts { bottom: 112px; }
  .field-grid { grid-template-columns: 1fr; }
  .audit-wall { --tile: 96px; gap: 7px; }
  .audit-wall.dense { --tile: 78px; }
  .audit-wall.large { --tile: 140px; }
  .audit-toolbar .count { margin-left: 0; }
  .lightbox-stage img { max-width: calc(100vw - 24px); max-height: calc(100dvh - 190px); }
  .lightbox-stage img.rotation-90, .lightbox-stage img.rotation-270 { max-width: calc(100dvh - 190px); max-height: calc(100vw - 24px); }
  .lightbox-arrow { width: 36px; height: 36px; }
  .lightbox-arrow.previous { left: 4px; }
  .lightbox-arrow.next { right: 4px; }
  .lightbox-footer { flex-direction: column; }
  .drawer { width: 100%; }
}

/* Component import report */
.badge-stack { white-space: nowrap; }
.badge-stack .badge + .badge { margin-left: 6px; }
.profile-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inspection-host:empty { display: none; }
.inspection-host { margin-top: 12px; }
.inspection { display: grid; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--line); }
.inspection.pass { border-color: var(--online); background: var(--online-tint); }
.inspection.fail { border-color: var(--danger); background: var(--danger-tint); }
.inspection-title { font-weight: 600; }
.inspection-failures { margin: 0; padding-left: 18px; }
.inspection-failures li + li { margin-top: 3px; }
.inspection-files { display: grid; gap: 6px; }
.inspection-file { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 2px 8px; align-items: center; }
.inspection-role { font-size: 12.5px; color: var(--ink-2); }
.inspection-file code { overflow-wrap: anywhere; font-size: 12.5px; }
.inspection-marks { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; }

/* Review by phone */
.audit-title { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.phone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.phone-grid.compact { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.phone-section { margin: 18px 0 8px; color: var(--ink-3); font-size: 13px; }
.phone-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
.phone-card .tile-frame { border-radius: 0; }
.phone-open { cursor: pointer; }
.phone-chip { position: absolute; top: 6px; left: 6px; z-index: 2; padding: 1px 7px; border-radius: 9px; background: #11161cb3; color: #fff; font-size: 12px; font-weight: 550; pointer-events: none; }
.phone-chip.live { background: var(--live); }
.phone-chip.online { background: var(--online); }
.phone-chip.blocked { background: #454c59; }
.phone-body { display: flex; min-width: 0; flex-direction: column; gap: 2px; padding: 8px 10px 10px; }
.phone-title { overflow: hidden; padding: 0; border: 0; background: none; color: var(--ink); font-size: 14px; font-weight: 600; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.phone-title:hover { text-decoration: underline; }
.phone-sub, .phone-when { overflow: hidden; color: var(--ink-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.phone-status { display: flex; flex-direction: column; gap: 1px; margin-top: 3px; }
.phone-note { overflow: hidden; color: var(--ink-2); font-size: 12.5px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.phone-note.waiting { color: var(--amber); }
.phone-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.phone-actions .button { flex: 1 1 auto; min-width: 0; padding-right: 6px; padding-left: 6px; }
.phone-card.reviewed .tile-frame { opacity: .82; }
.phone-card.reviewed .phone-note { font-weight: 500; }
.phone-grid.compact .phone-sub { display: none; }
.phone-grid.compact .phone-actions .danger { display: none; }
@media (max-width: 720px) {
  .phone-grid { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 8px; }
  .phone-grid.compact { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 7px; }
}

/* Monitor */
.monitor { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.monitor .card { margin-bottom: 0; }
.stat-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.stat { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-1); }
.stat-label { overflow: hidden; color: var(--ink-2); font-size: 13px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.stat-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-height: 34px; }
.stat-value { color: var(--ink); font-size: 26px; font-weight: 650; line-height: 1.15; letter-spacing: -.5px; white-space: nowrap; }
.stat-trend { flex: none; line-height: 0; }
.stat-spark { width: 72px; height: 24px; }
.stat-sub { color: var(--ink-3); font-size: 12px; line-height: 1.4; }
.card-body.flow-body { padding: 0; }
.flow-stage { border-radius: 0 0 var(--radius) var(--radius); background: #11161c; color: #d7dde6; }
.flow { display: grid; grid-template-columns: 124px minmax(0, 1fr) 124px; align-items: stretch; gap: 0; padding: 14px 14px 6px; }
.flow-node { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px; border: 1px solid #2a323d; border-radius: 8px; background: #1b222b; font-size: 12.5px; }
.flow-node svg { width: 20px; height: 20px; color: #8b95a3; }
.flow-node strong { color: #fff; font-size: 22px; font-weight: 650; line-height: 1.2; }
.flow-node small { color: #8b95a3; font-size: 12px; }
.flow-lanes { position: relative; min-width: 0; margin: 0 8px; }
.flow-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.flow-lane { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; height: 31px; padding: 1px 6px 0; font-size: 12px; }
.flow-name { color: #d7dde6; white-space: nowrap; }
.flow-rate { overflow: hidden; color: #8b95a3; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.flow-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 6px 14px 12px; color: #aab3c0; font-size: 12px; }
.flow-key { display: inline-flex; align-items: center; gap: 6px; }
.flow-mark { position: relative; display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.flow-mark.request { width: 6px; height: 6px; background: #8b95a3; }
.flow-mark.ok { background: #3987e5; }
.flow-mark.reject { border: 2px solid #c98500; }
.flow-mark.error { border-radius: 0; background: linear-gradient(45deg, transparent 42%, #d03b3b 42%, #d03b3b 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, #d03b3b 42%, #d03b3b 58%, transparent 58%); }
.flow-note { margin-left: auto; color: #8b95a3; }
.flow-toggle { min-height: 24px; padding: 1px 10px; border: 1px solid #2a323d; border-radius: 6px; background: #1b222b; color: #d7dde6; font-size: 12px; cursor: pointer; }
.flow-toggle:hover { border-color: #8b95a3; }
.viz-grid-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; transition: opacity .15s; }
.viz-grid-row.refreshing { opacity: .55; }
.viz-card { min-width: 0; }
.viz-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 6px; }
.viz-head h4 { margin: 0; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--ink-2); font-size: 12px; }
.viz-key { display: inline-flex; align-items: center; gap: 5px; }
.viz-line { display: inline-block; width: 14px; height: 2px; border-radius: 1px; }
.viz-plot { position: relative; min-width: 0; }
.viz-svg { display: block; width: 100%; height: auto; outline: 0; touch-action: pan-y; }
.viz-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.viz-grid { stroke: var(--line-2); stroke-width: 1; }
.viz-axis { stroke: var(--line); stroke-width: 1; }
.viz-cross { stroke: #8b95a3; stroke-width: 1; }
.viz-svg .hidden { display: none; }
.viz-tick { fill: var(--ink-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-value { fill: var(--ink-2); font-size: 11.5px; font-weight: 550; }
.viz-tip { position: absolute; top: 4px; z-index: 3; min-width: 136px; padding: 7px 9px; border-radius: 7px; background: var(--rail); box-shadow: var(--shadow-2); color: #fff; font-size: 12px; pointer-events: none; }
.viz-tip-time { margin-bottom: 3px; color: #aab3c0; }
.viz-tip-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.viz-tip-row strong { font-weight: 650; }
.viz-tip-row span { color: #aab3c0; }
.viz-table { margin-top: 10px; font-size: 13px; }
.viz-table summary { color: var(--ink-2); cursor: pointer; }
.viz-table-body { max-height: 280px; margin-top: 8px; overflow: auto; }
.monitor-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.monitor-table th { padding: 7px 12px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 12px; font-weight: 550; text-align: left; white-space: nowrap; }
.monitor-table td { padding: 7px 12px; border-bottom: 1px solid var(--line-2); color: var(--ink); white-space: nowrap; }
.monitor-table tr:last-child td { border-bottom: 0; }
.monitor-table .num { font-variant-numeric: tabular-nums; text-align: right; }
.monitor .table-wrap { overflow-x: auto; }
.bar-cell { width: 22%; min-width: 90px; }
.bar-track { display: block; height: 8px; }
.bar-track i { display: block; height: 8px; min-width: 0; border-radius: 0 4px 4px 0; background: #2a78d6; transition: width .3s; }
.monitor-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.meter { margin-bottom: 12px; }
.meter-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; margin-bottom: 5px; color: var(--ink-3); font-size: 13px; }
.meter-text { color: var(--ink); }
.meter-track { height: 8px; overflow: hidden; border-radius: 4px; background: #d9e6f6; }
.meter-track i { display: block; height: 100%; border-radius: 4px; background: #2a78d6; transition: width .3s; }
.meter-track i.warn { background: #eb6834; }
.meter-track i.danger { background: #d03b3b; }
.protect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
.protect-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin-bottom: 12px; }
.protect-note { margin-top: 10px; }
@media (max-width: 1240px) {
  .stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .viz-grid-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .monitor-pair, .protect-grid, .protect-facts { grid-template-columns: minmax(0, 1fr); }
  .viz-grid-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-value { font-size: 22px; }
  .stat-spark { width: 48px; }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
  .flow-lanes { grid-column: 1 / -1; grid-row: 2; margin: 0; }
  .flow-note { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bar-track i, .meter-track i, .viz-grid-row { transition: none; }
}

/* 授权码 */
.metric.code-total .metric-label i { background: #8a92a0; }
.metric.code-unused .metric-label i { background: var(--online); }
.metric.code-used .metric-label i { background: var(--accent); }
.metric.code-disabled .metric-label i { background: var(--danger); }
.code-search { flex: 1 1 320px; max-width: 420px; }
.codes-table { table-layout: fixed; }
.codes-table .c-select { width: 40px; }
.codes-table .c-code { width: 11%; }
.codes-table .c-group { width: 13%; }
.codes-table .c-features { width: 10%; }
.codes-table .c-duration { width: 13%; }
.codes-table .c-status { width: 78px; }
.codes-table .c-phone { width: 15%; }
.codes-table .c-ops { width: 218px; }
.code-hint { font-family: var(--mono); letter-spacing: .5px; }
/* How a phone was authorized, under its features: a 授权码 activation stands out from grants made by hand. */
.sub-line.by-code { color: var(--accent-hover); }
.form-section { margin: 4px 0 8px; color: var(--ink-3); font-size: 12.5px; font-weight: 550; }
dialog.wide { width: 860px; }
.code-sheet-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.code-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); gap: 10px; max-height: 56vh; overflow-x: hidden; overflow-y: auto; }
.code-card { display: grid; justify-items: center; gap: 6px; padding: 12px 10px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-align: center; }
.code-qr { width: 132px; height: 132px; image-rendering: pixelated; }
.code-text { padding: 2px 4px; border: 0; border-radius: 5px; background: none; color: var(--ink); font-family: var(--mono); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.code-text:hover { background: var(--accent-tint); color: var(--accent-hover); }
.code-meta { color: var(--ink-3); font-size: 12px; line-height: 1.35; }
.effect-choice { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; border: 0; }
.effect-choice legend { margin-bottom: 6px; color: var(--ink-3); font-size: 12.5px; font-weight: 550; }
.effect-option { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.effect-option:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.effect-option input { margin-top: 3px; }
.effect-option strong { display: block; font-size: 14px; font-weight: 550; }
.effect-option small { display: block; color: var(--ink-3); font-size: 12.5px; }
#print-root { display: none; }
@media (max-width: 1040px) {
  .codes-table, .codes-table tbody { display: block; }
  .codes-table thead { display: none; }
  .codes-table tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "code status" "group duration" "features phone" "note note" "ops ops"; gap: 6px 12px; padding: 12px 14px 8px 42px; border-bottom: 1px solid var(--line); }
  .codes-table tbody tr:last-child { border-bottom: 0; }
  .codes-table tbody td[class] { display: block; width: auto; min-width: 0; padding: 0; border: 0; }
  .codes-table tbody td.c-select { position: absolute; top: 14px; left: 14px; }
  .codes-table tbody td.c-code { grid-area: code; }
  .codes-table tbody td.c-status { grid-area: status; justify-self: end; text-align: right; }
  .codes-table tbody td.c-group { grid-area: group; }
  .codes-table tbody td.c-duration { grid-area: duration; text-align: right; }
  .codes-table tbody td.c-features { grid-area: features; }
  .codes-table tbody td.c-phone { grid-area: phone; text-align: right; }
  .codes-table tbody td.c-note { grid-area: note; }
  .codes-table tbody td.c-ops { grid-area: ops; padding-top: 5px; border-top: 1px solid var(--line-2); }
  .codes-table td.c-ops .row-actions { justify-content: flex-end; margin: 0; }
}
@media (max-width: 400px) {
  .nav-item { width: 40px; }
  .code-grid { grid-template-columns: 1fr; }
  .code-qr { width: 112px; height: 112px; }
}
/* Printing the code sheet: only the cards, four to a row on A4, never split across pages. */
@media print {
  @page { size: A4; margin: 10mm; }
  body.printing { background: #fff; }
  body.printing > :not(#print-root) { display: none !important; }
  body.printing #print-root { display: block; }
  .print-sheet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5mm; }
  .print-card { display: grid; justify-items: center; gap: 1.5mm; padding: 3mm; border: .3mm solid #000; border-radius: 2mm; break-inside: avoid; color: #000; text-align: center; }
  .print-qr { width: 32mm; height: 32mm; }
  .print-card strong { font-family: var(--mono); font-size: 9pt; letter-spacing: .2px; white-space: nowrap; }
  .print-card span { font-size: 7.5pt; line-height: 1.3; }
}