:root {
  color-scheme: light;
  --canvas: #f5f6f8;
  --surface: #ffffff;
  --text: #242a31;
  --secondary: #5c6672;
  --muted: #7b8590;
  --line: #e4e7eb;
  --line-strong: #ced4db;
  --accent: #cb493d;
  --accent-hover: #b43b31;
  --success: #24734f;
  --success-bg: #eaf5ef;
  --danger: #bd3b38;
  --danger-bg: #fceeee;
  --warning: #986314;
  --warning-bg: #fbf3df;
  --info: #306baa;
  --info-bg: #edf3fa;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--canvas);
}

*, *::before, *::after { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button, select, input[type="checkbox"] { cursor: pointer; }
button { color: inherit; }
button:disabled { cursor: default; opacity: .4; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
h1, h2, h3 { font-weight: 650; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
::selection { color: #8d3029; background: #f9e0dc; }
:focus-visible { outline: 3px solid #83a4ca; outline-offset: 3px; }
input, select { min-width: 0; max-width: 100%; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 5px; }
input:focus, select:focus { border-color: #6e8dae; outline: 2px solid #dce7f2; outline-offset: 0; }
input::placeholder { color: #8a939d; opacity: 1; }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
select { min-height: 34px; padding: 6px 26px 6px 10px; text-overflow: ellipsis; }
button { -webkit-tap-highlight-color: transparent; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 10px; font-weight: 600; color: var(--muted); line-height: 1.5; }

.icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-server { -webkit-mask-image: url("icons/server.svg"); mask-image: url("icons/server.svg"); }
.icon-radio { -webkit-mask-image: url("icons/radio.svg"); mask-image: url("icons/radio.svg"); }
.icon-shield { -webkit-mask-image: url("icons/shield-check.svg"); mask-image: url("icons/shield-check.svg"); }
.icon-lock { -webkit-mask-image: url("icons/lock-keyhole.svg"); mask-image: url("icons/lock-keyhole.svg"); }
.icon-logout { -webkit-mask-image: url("icons/log-out.svg"); mask-image: url("icons/log-out.svg"); }
.icon-refresh { -webkit-mask-image: url("icons/refresh-cw.svg"); mask-image: url("icons/refresh-cw.svg"); }
.icon-search { -webkit-mask-image: url("icons/search.svg"); mask-image: url("icons/search.svg"); }
.icon-chevron-left { -webkit-mask-image: url("icons/chevron-left.svg"); mask-image: url("icons/chevron-left.svg"); }
.icon-chevron-right { -webkit-mask-image: url("icons/chevron-right.svg"); mask-image: url("icons/chevron-right.svg"); }
.icon-arrow-right { -webkit-mask-image: url("icons/arrow-right.svg"); mask-image: url("icons/arrow-right.svg"); }
.icon-braces { -webkit-mask-image: url("icons/braces.svg"); mask-image: url("icons/braces.svg"); }
.icon-close { -webkit-mask-image: url("icons/x.svg"); mask-image: url("icons/x.svg"); }
.icon-alert { -webkit-mask-image: url("icons/circle-alert.svg"); mask-image: url("icons/circle-alert.svg"); }
.icon-settings { -webkit-mask-image: url("icons/sliders-horizontal.svg"); mask-image: url("icons/sliders-horizontal.svg"); }
.icon-pencil { -webkit-mask-image: url("icons/pencil.svg"); mask-image: url("icons/pencil.svg"); }
.icon-trash { -webkit-mask-image: url("icons/trash-2.svg"); mask-image: url("icons/trash-2.svg"); }
.icon-play { -webkit-mask-image: url("icons/play.svg"); mask-image: url("icons/play.svg"); }
.icon-square { -webkit-mask-image: url("icons/square.svg"); mask-image: url("icons/square.svg"); }
.icon-hammer { -webkit-mask-image: url("icons/hammer.svg"); mask-image: url("icons/hammer.svg"); }
.icon-file-text { -webkit-mask-image: url("icons/file-text.svg"); mask-image: url("icons/file-text.svg"); }
.icon-ellipsis { -webkit-mask-image: url("icons/ellipsis.svg"); mask-image: url("icons/ellipsis.svg"); }
.icon-upload { -webkit-mask-image: url("icons/log-out.svg"); mask-image: url("icons/log-out.svg"); transform: rotate(-90deg); }

.button, .icon-button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 8px; min-height: 34px; border: 1px solid transparent; border-radius: 5px; background: transparent; font-weight: 500; transition: background-color 120ms, border-color 120ms, color 120ms; }
.button { padding: 7px 12px; }
.icon-button { position: relative; width: 34px; height: 34px; padding: 7px; color: var(--secondary); }
.button:hover:not(:disabled), .icon-button:hover:not(:disabled) { background: #edf0f3; color: var(--text); }
.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 { background: var(--danger); color: #fff; }
.button-danger:hover:not(:disabled) { background: #a62d2a; color: #fff; }
.delete-record { color: var(--danger); }
.button-outlined { border-color: var(--line-strong); background: var(--surface); }
.button-quiet { font-size: 12px; color: var(--secondary); }
.button-quiet .icon { width: 16px; height: 16px; }
.tooltip-control::after { position: absolute; z-index: 100; top: calc(100% + 8px); right: 0; max-width: 220px; width: max-content; padding: 5px 8px; border-radius: 4px; color: #fff; background: #2a3037; font-size: 11px; font-weight: 400; line-height: 1.5; content: attr(data-tooltip); pointer-events: none; visibility: hidden; opacity: 0; }
@media (hover: hover) { .tooltip-control:hover::after { visibility: visible; opacity: 1; } }
.tooltip-control:focus-visible::after { visibility: visible; opacity: 1; }
.is-refreshing .icon-refresh { animation: rotate 1.1s linear infinite; }

.brand { display: inline-flex; min-width: 0; align-items: center; gap: 11px; }
.brand-mark { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: var(--accent); color: #fff; }
.brand-mark .icon { width: 19px; height: 19px; }
.brand-name { font-size: 18px; font-weight: 750; white-space: nowrap; }
.brand-divider { margin: 0 5px; font-size: 17px; font-weight: 400; color: #b6bdc6; }
.brand-product { font-size: 11px; font-weight: 650; vertical-align: 2px; }
.app-header, .login-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 28px; border-bottom: 1px solid var(--line); background: var(--surface); }
.app-header { position: sticky; z-index: 20; top: 0; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.header-connection { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
.header-connection .status-dot { color: inherit; }
.administrator { display: inline-flex; align-items: center; gap: 8px; padding-left: 18px; border-left: 1px solid var(--line); font-size: 12px; color: var(--secondary); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 50%; color: var(--secondary); background: #f3f5f7; font-family: var(--mono); font-size: 11px; }
.logout-form { display: flex; }
.skip-link { position: fixed; z-index: 100; top: -60px; left: 16px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.skip-link:focus { top: 12px; }

.app-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.sidebar { display: flex; flex-direction: column; min-width: 0; gap: 24px; padding: 28px 20px 24px; border-right: 1px solid var(--line); background: var(--surface); }
.sidebar-section { min-width: 0; }
.section-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; color: var(--muted); }
.section-label h2 { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; }
.section-label .icon { width: 15px; height: 15px; }
.count-chip { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 auto; min-width: 23px; height: 20px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--secondary); background: #f6f7f8; font-family: var(--mono); font-size: 10px; font-variant-numeric: tabular-nums; }
.field-label { display: block; margin-bottom: 7px; color: var(--secondary); font-size: 12px; }
.client-select { width: 100%; height: 36px; }
.scope-caption { margin-top: 9px; overflow-wrap: anywhere; color: var(--muted); font-size: 11px; }
.nav-current { display: flex; align-items: center; gap: 9px; margin-top: 24px; padding: 10px 12px; border-radius: 5px; color: #a53b31; background: #fcf0ed; font-size: 12px; font-weight: 600; }
.nav-current .icon { width: 16px; height: 16px; }
.nav-indicator { width: 4px; height: 4px; margin-left: auto; border-radius: 50%; background: var(--accent); }
.reference-section { border-top: 1px solid var(--line); padding-top: 21px; }
.state-reference { display: grid; gap: 11px; color: var(--secondary); font-size: 11px; }
.state-reference li { display: flex; align-items: center; gap: 8px; }
.state-code { margin-left: auto; color: #929ba4; font-family: var(--mono); font-size: 10px; }
.reference-note { margin-top: 15px; color: var(--muted); font-size: 10px; }
.mqtt-section { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); }
.mqtt-section .section-label { margin-bottom: 11px; }
.mqtt-details { display: grid; gap: 9px; margin-top: 17px; font-size: 11px; }
.mqtt-details > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mqtt-details dt { flex: 0 0 auto; color: var(--muted); }
.mqtt-details dd { min-width: 0; overflow-wrap: anywhere; color: var(--secondary); text-align: right; font-variant-numeric: tabular-nums; }
.mqtt-details .mqtt-last { display: block; padding-top: 10px; margin-top: 3px; border-top: 1px solid var(--line); }
.mqtt-last dd { margin-top: 5px; font-size: 10px; text-align: left; }

.app-main { width: 100%; min-width: 0; max-width: 1720px; margin: 0 auto; padding: 29px 32px 24px; }
.app-main:focus { outline: none; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.page-title { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.page-title h1 { font-size: 25px; line-height: 1.4; }
.readonly-label { padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 4px; color: var(--secondary); font-size: 10px; font-weight: 500; }
.refresh-controls { display: flex; align-items: center; gap: 14px; }
.poll-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--secondary); white-space: nowrap; cursor: pointer; }
.poll-toggle input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.interval-label { padding: 0 4px; border: 1px solid var(--line); border-radius: 3px; color: var(--muted); font-family: var(--mono); font-size: 10px; }
.metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 21px 0 23px; margin-bottom: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric { display: flex; flex-direction: column; min-width: 0; gap: 7px; padding: 0 24px; border-right: 1px solid var(--line); }
.metric:first-child { padding-left: 0; }
.metric:last-child { border-right: 0; padding-right: 0; }
.metric-label { display: flex; align-items: center; gap: 7px; color: var(--secondary); font-size: 12px; }
.metric-value { overflow-wrap: anywhere; font-family: var(--mono); font-size: 32px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.15; }
.metric-online { color: var(--success); }
.metric-offline { color: #6d7885; }
.metric-caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--muted); }

.instances-section { min-width: 0; }
.list-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 13px; }
.list-title { display: flex; align-items: center; gap: 9px; }
.list-title h2 { font-size: 14px; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.search-field { display: flex; flex: 0 1 320px; align-items: center; gap: 8px; min-width: 160px; min-height: 34px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--muted); background: var(--surface); }
.search-field .icon { width: 15px; height: 15px; }
.search-field:focus-within { border-color: #6e8dae; outline: 2px solid #dce7f2; }
.search-field input { width: 100%; height: 32px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 12px; }
.search-field input:focus { outline: none; }
.table-filters { display: flex; flex: 0 0 auto; gap: 8px; }
.table-filters select { width: 132px; font-size: 11px; }
.table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); scrollbar-width: thin; }
.instances-table { width: 100%; min-width: 840px; border-collapse: collapse; table-layout: fixed; text-align: left; }
.col-number { width: 5%; }
.col-instance { width: 11%; }
.col-client { width: 15%; }
.col-persona { width: 21%; }
.col-online { width: 10%; }
.col-auth { width: 14%; }
.col-received { width: 19%; }
.col-action { width: 5%; }
.instances-table th { padding: 11px 14px; border-bottom: 1px solid var(--line); background: #f9fafb; color: var(--muted); font-size: 10px; font-weight: 500; white-space: nowrap; }
.instances-table td { height: 75px; padding: 13px 14px; border-bottom: 1px solid #eceef1; vertical-align: middle; font-size: 12px; }
.instances-table tr:last-child td { border-bottom: 0; }
.instance-row:hover { background: #fafbfd; }
.instance-row.is-offline { background: #fcfcfd; }
.instance-row.is-offline:hover { background: #f6f8fa; }
.instance-identity { display: flex; align-items: center; gap: 7px; min-width: 0; }
.instance-identity .icon { width: 15px; height: 15px; color: var(--muted); }
.instance-number { min-width: 0; overflow-wrap: anywhere; font-family: var(--mono); font-weight: 550; font-variant-numeric: tabular-nums; }
.client-value { overflow-wrap: anywhere; font-family: var(--mono); font-size: 11px; color: var(--secondary); }
.persona-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.persona-id { display: block; margin-top: 4px; overflow-wrap: anywhere; font-family: var(--mono); font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.empty-value { color: var(--muted); font-weight: 400; }
.status-dot { display: inline-block; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; color: #7d8895; background: currentColor; }
.tone-success { color: var(--success); }
.tone-danger { color: var(--danger); }
.tone-warning { color: var(--warning); }
.tone-info { color: var(--info); }
.tone-muted { color: #9099a3; }
.status-badge { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 23px; padding: 3px 6px; border-radius: 4px; font-size: 10px; font-weight: 500; line-height: 1.5; }
.status-badge .status-dot { color: inherit; }
.status-badge > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.status-success { color: var(--success); }
.status-danger { color: var(--danger); }
.status-warning { color: var(--warning); }
.status-info { color: var(--info); }
.status-muted { color: var(--secondary); }
.status-badge.status-success { background: var(--success-bg); }
.status-badge.status-danger { background: var(--danger-bg); }
.status-badge.status-warning { background: var(--warning-bg); }
.status-badge.status-info { background: var(--info-bg); }
.status-badge.status-muted { background: #edf0f3; }
.received-time { display: block; font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.received-relative { display: block; margin-top: 4px; font-size: 10px; color: var(--muted); }
.instances-table .cell-action { padding-right: 9px; padding-left: 0; text-align: right; }
.cell-action .icon-button { width: 29px; height: 29px; }
.cell-action .icon { width: 16px; height: 16px; }
.instances-table .placeholder-row td { height: 280px; padding: 30px 20px; }
.table-placeholder { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 9px; min-height: 210px; text-align: center; }
.table-placeholder strong { font-size: 13px; font-weight: 550; }
.table-placeholder > span:last-child { color: var(--muted); font-size: 11px; }
.empty-symbol { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 8px; background: #f9fafb; color: #929da8; }
.empty-symbol .icon { width: 21px; height: 21px; }
.loading-indicator { display: block; width: 23px; height: 23px; margin-bottom: 6px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: rotate 900ms linear infinite; }
.list-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 63px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.result-count { min-width: 0; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pagination { display: flex; align-items: center; gap: 5px; }
.pagination select { min-height: 29px; margin-right: 9px; padding-top: 3px; padding-bottom: 3px; font-size: 10px; background: transparent; border-color: var(--line); }
.pagination .icon-button { width: 29px; height: 29px; min-height: 29px; }
.pagination .icon { width: 15px; height: 15px; }
.page-number { min-width: 43px; text-align: center; font-family: var(--mono); font-size: 10px; color: var(--secondary); }
.snapshot-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 17px; font-size: 10px; color: var(--muted); }
.snapshot-state { display: inline-flex; align-items: center; gap: 7px; }
.snapshot-state .status-dot { width: 5px; height: 5px; color: inherit; }
.snapshot-time { text-align: right; }
.snapshot-time time { margin-left: 5px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.notice { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 11px 13px; border: 1px solid; border-radius: 5px; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.notice .icon { width: 17px; height: 17px; align-self: flex-start; margin-top: 2px; }
.notice-danger { color: #a83a36; border-color: #f0d1cf; background: #fff4f3; }
.notice-success { color: #286b4d; border-color: #cde5d8; background: #eff8f2; }
.refresh-error, noscript .notice { margin-bottom: 20px; }

.status-dialog { width: calc(100% - 40px); max-width: 720px; max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); background: var(--surface); box-shadow: 0 20px 70px #121a2733; }
.status-dialog[open] { display: flex; flex-direction: column; }
.status-dialog::backdrop { background: #18212e70; }
.dialog-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.dialog-header > div:first-child { min-width: 0; }
.dialog-header .eyebrow { overflow-wrap: anywhere; }
.dialog-header h2 { margin-top: 4px; overflow-wrap: anywhere; font-size: 18px; }
.dialog-actions { display: flex; flex: 0 0 auto; gap: 4px; }
.dialog-body { min-height: 0; padding: 20px 22px 22px; overflow-y: auto; overscroll-behavior: contain; }
.dialog-body .notice { margin-bottom: 15px; }
.instance-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 24px; padding-bottom: 21px; margin-bottom: 21px; border-bottom: 1px solid var(--line); }
.instance-details dt { color: var(--muted); font-size: 11px; }
.instance-details dd { margin-top: 5px; overflow-wrap: anywhere; font-size: 12px; }
.instance-details .detail-wide { grid-column: 1 / -1; }
.raw-heading { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--secondary); }
.raw-heading .icon { width: 15px; height: 15px; }
.raw-heading h3 { font-size: 11px; font-weight: 500; }
.raw-format { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 9px; }
.status-json { min-height: 140px; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 5px; background: #f7f9fb; color: #374451; font-family: var(--mono); font-size: 11px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.status-json code { font: inherit; }
body.dialog-open { overflow: hidden; }

.login-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; background: #f7f8fa; }
.login-header { background: transparent; }
.login-header-label { color: var(--muted); font-size: 11px; }
.login-main { display: flex; flex: 1 0 auto; align-items: center; justify-content: center; padding: 64px 24px 80px; }
.login-content { width: 100%; max-width: 350px; }
.login-emblem { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 29px; border: 1px solid #e5c3be; border-radius: 8px; color: var(--accent); background: #fff0ed; }
.login-emblem .icon { width: 23px; height: 23px; }
.login-content .eyebrow { margin-bottom: 8px; }
.login-content h1 { font-size: 27px; line-height: 1.4; }
.login-subtitle { margin-top: 9px; color: var(--muted); font-size: 12px; }
.login-form { margin-top: 31px; }
.login-form label { display: block; margin-bottom: 9px; color: var(--secondary); font-size: 12px; font-weight: 500; }
.login-form input[type="password"] { width: 100%; height: 44px; padding: 10px 13px; }
.login-submit { display: flex; justify-content: space-between; width: 100%; height: 43px; margin-top: 17px; padding: 9px 14px; font-size: 12px; }
.login-session { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 23px; color: var(--muted); font-size: 10px; }
.login-session .icon { width: 13px; height: 13px; }
.login-notice { margin-top: 23px; }
.login-notice + .login-form { margin-top: 22px; }
.login-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 19px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }

.navigation-sidebar { position: sticky; top: 0; height: calc(100dvh - 64px); align-self: start; overflow-y: auto; }
.main-navigation { display: flex; flex-direction: column; flex: 1; gap: 8px; }
.navigation-settings { margin-top: auto; }
.navigation-link { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 5px; font-size: 13px; color: var(--secondary); }
.navigation-link:hover { background: #f3f5f7; }
.navigation-link.is-active { color: #a53b31; background: #fcf0ed; font-weight: 600; }
.navigation-group { min-width: 0; }
.navigation-group-label { display: flex; align-items: center; gap: 10px; padding: 11px 12px 6px; color: var(--secondary); font-size: 13px; }
.navigation-group .navigation-child { min-height: 34px; margin: 2px 0 0 20px; padding: 7px 12px; border-left: 1px solid var(--line); border-radius: 0 5px 5px 0; }
.client-scope { display: flex; align-items: center; gap: 9px; min-width: 0; }
.client-scope label { flex-shrink: 0; color: var(--secondary); font-size: 12px; }
.client-scope select { width: 180px; }
.list-toolbar { flex-wrap: wrap; }
.mqtt-summary { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--secondary); font-size: 11px; }
.mqtt-summary summary { display: flex; align-items: center; gap: 8px; width: fit-content; cursor: pointer; }
.mqtt-summary .mqtt-details { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 32px; }
.account-feedback { min-height: 0; margin-bottom: 16px; color: var(--success); font-size: 12px; overflow-wrap: anywhere; }
.account-feedback:empty { display: none; }
.accounts-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.accounts-table th { padding: 12px 18px; background: #f9fafb; color: var(--muted); font-weight: 500; font-size: 12px; }
.accounts-table td { padding: 17px 18px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.accounts-table .mono { color: var(--secondary); }
.row-number, .cell-number { font-variant-numeric: tabular-nums; color: var(--muted); }
.accounts-table .row-number-column { width: 64px; }
.accounts-table tbody tr:hover { background: #fafbfd; }
.accounts-table .account-empty { text-align: center; height: 240px; color: var(--muted); }
.accounts-table .actions-column { width: 96px; }
.account-register-table .actions-column { width: 138px; }
.account-check-time, .assignment-client, .assignment-instance { display: block; overflow-wrap: anywhere; }
.account-check-time, .assignment-instance { margin-top: 5px; color: var(--muted); font-size: 11px; }
.assignment-client, .assignment-instance { font-family: var(--mono); }
.row-actions { display: flex; gap: 4px; align-items: center; }
.edit-identity { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.delete-description { overflow-wrap: anywhere; }
.delete-description + .notice { margin-top: 16px; }
.servers-table { font-size: 12px; }
.servers-table th, .servers-table td { padding: 13px 10px; }
.servers-table th:nth-child(2), .servers-table th:nth-child(3) { width: 10%; }
.servers-table th:nth-child(4) { width: 12%; }
.servers-table th:nth-child(12) { width: 9%; }
.software-install { padding: 2px 0; border: 0; background: none; color: var(--warning); text-decoration: underline; text-underline-offset: 3px; font: inherit; }
.software-install:hover:not(:disabled) { color: var(--accent); }
.server-metric { font-variant-numeric: tabular-nums; }
.server-detail { display: block; margin-top: 5px; color: var(--secondary); overflow-wrap: anywhere; font-size: 11px; }
.server-collection .button { margin-top: 6px; min-height: 28px; padding: 4px 7px; font-size: 11px; }
#install-description { overflow-wrap: anywhere; }
#install-error { margin-top: 16px; }
.account-dialog { max-width: 480px; }
.account-form label { display: block; margin-bottom: 8px; color: var(--secondary); }
.account-form input { display: block; width: 100%; height: 40px; padding: 8px 11px; margin-bottom: 20px; }
.account-form select { width: 100%; margin-bottom: 20px; }
.account-group-filter { width: 180px; max-width: 100%; }
.account-selection-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; color: var(--secondary); font-size: 12px; }
.select-visible { display: inline-flex; align-items: center; gap: 8px; }
.account-selection-bar input, .account-select input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.account-selection-bar .button { margin-left: auto; }
.accounts-table .selection-column { width: 36px; padding: 0; }
.accounts-table .account-select { padding-left: 0; padding-right: 0; text-align: center; }
.account-register-table .account-row.is-selected { background: #f0f7f5; }
.group-selection-count { margin-bottom: 18px; color: var(--secondary); }
.group-selection-count:empty { display: none; }
.account-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; }
.account-form-actions .button { min-width: 95px; }
.settings-section { max-width: 540px; padding-top: 20px; border-top: 1px solid var(--line); }
.settings-section h2 { font-size: 15px; }
.settings-section .notice { margin: 16px 0; }
.settings-form { margin-top: 24px; }
.settings-form fieldset { min-width: 0; border: 0; margin: 0; padding: 0; }
.settings-form label { display: block; margin-bottom: 8px; color: var(--secondary); font-size: 12px; }
.settings-form input:not([type=checkbox]) { width: 100%; height: 40px; margin-bottom: 21px; padding: 8px 11px; }
.proxy-endpoint { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 16px; }
.settings-form .clear-password { display: flex; align-items: center; gap: 7px; margin-top: -8px; }
.settings-actions { display: flex; gap: 10px; padding-top: 20px; margin-top: 10px; border-top: 1px solid var(--line); }
.settings-actions .button { min-width: 90px; }
@keyframes rotate { to { transform: rotate(360deg); } }

@media (min-width: 1600px) {
  .app-layout { grid-template-columns: 232px minmax(0, 1fr); }
  .sidebar { padding-right: 24px; padding-left: 24px; }
  .app-main { padding: 35px 40px 28px; }
  .instances-table td { height: 78px; }
}

@media (max-width: 1100px) {
  .app-layout { grid-template-columns: 194px minmax(0, 1fr); }
  .sidebar { padding-right: 15px; padding-left: 15px; }
  .app-main { padding: 25px 22px 22px; }
  .metric { padding-right: 16px; padding-left: 16px; }
  .metric-value { font-size: 29px; }
  .metric-caption { font-size: 9px; }
  .list-toolbar { flex-wrap: wrap; }
  .search-field { flex-grow: 1; flex-basis: 230px; }
}

@media (max-width: 760px) {
  .app-header, .login-header { height: 58px; gap: 10px; padding: 0 18px; }
  .brand { gap: 9px; }
  .brand-name { font-size: 17px; }
  .brand-product { font-size: 9px; vertical-align: 1px; }
  .brand-divider { margin: 0 3px; }
  .brand-mark { width: 29px; height: 29px; }
  .brand-mark .icon { width: 17px; height: 17px; }
  .header-actions { gap: 8px; }
  .header-connection { display: none; }
  .administrator { border-left: 0; padding-left: 0; }
  .administrator > span:last-child { display: none; }
  .avatar { width: 25px; height: 25px; }
  .app-layout { display: flex; flex-direction: column; min-height: calc(100vh - 58px); }
  .sidebar { display: contents; }
  .scope-section { display: grid; order: 0; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
  .scope-section .section-label { margin-bottom: 0; }
  .scope-section .section-label h2 { font-size: 11px; }
  .scope-section .section-label .count-chip { display: none; }
  .scope-section .field-label, .scope-caption, .nav-current { display: none; }
  .client-select { grid-column: 2 / 4; height: 34px; min-height: 34px; font-size: 12px; }
  .app-main { order: 1; max-width: none; padding: 23px 18px 22px; }
  .page-heading { gap: 12px; margin-bottom: 21px; }
  .page-heading .eyebrow { font-size: 9px; }
  .page-title h1 { font-size: 23px; }
  .page-title { gap: 8px; }
  .refresh-controls { gap: 9px; }
  .poll-toggle { gap: 5px; font-size: 11px; }
  .interval-label { display: none; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; padding: 19px 0; margin-bottom: 22px; }
  .metric { gap: 5px; padding: 0 18px; }
  .metric:nth-child(2) { border-right: 0; padding-right: 0; }
  .metric:nth-child(3) { padding-left: 0; }
  .metric-value { font-size: 30px; }
  .metric-label { font-size: 11px; }
  .metric-caption { font-size: 9px; }
  .list-heading { margin-bottom: 12px; }
  .list-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; margin-bottom: 12px; }
  .search-field { min-width: 0; min-height: 38px; }
  .search-field input { height: 36px; font-size: 12px; }
  .table-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .table-filters select { width: 100%; min-height: 36px; font-size: 11px; }
  .table-scroll { overflow-x: visible; }
  .instances-table { display: block; min-width: 0; }
  .instances-table colgroup, .instances-table thead { display: none; }
  .instances-table tbody { display: block; }
  .instances-table .instance-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px; column-gap: 12px; row-gap: 9px; padding: 14px; border-bottom: 1px solid var(--line); }
  .instances-table .instance-row:last-child { border-bottom: 0; }
  .instances-table .instance-row td { display: block; min-width: 0; height: auto; padding: 0; border: 0; font-size: 12px; }
  .instances-table .instance-row td[data-label]::before { display: block; margin-bottom: 4px; color: var(--muted); content: attr(data-label); font-size: 10px; font-weight: 400; }
  .cell-number { grid-column: 1 / 3; grid-row: 1; }
  .instances-table .instance-row .cell-number::before { display: inline; margin-right: 8px; }
  .cell-instance { grid-column: 1 / 3; grid-row: 2; align-self: center; }
  .cell-client { grid-column: 1 / 3; grid-row: 3; }
  .cell-persona { grid-column: 1 / 3; grid-row: 4; }
  .cell-online { grid-column: 1; grid-row: 5; }
  .cell-auth { grid-column: 2 / 4; grid-row: 5; }
  .cell-received { grid-column: 1 / -1; grid-row: 6; }
  .instances-table .instance-row .cell-action { grid-column: 3; grid-row: 1; align-self: start; }
  .instance-number { font-size: 13px; }
  .client-value { display: block; font-size: 11px; }
  .instances-table .instance-row .cell-client::before { display: inline; margin-right: 8px; }
  .cell-client .client-value { display: inline; }
  .instances-table .instance-row .cell-persona::before { display: none; }
  .persona-name { display: inline; white-space: normal; overflow-wrap: anywhere; }
  .persona-id { display: inline; margin-left: 8px; font-size: 10px; }
  .instances-table .instance-row .cell-received::before { display: inline; margin-right: 8px; }
  .received-time, .received-relative { display: inline; }
  .received-relative { margin-left: 8px; }
  .instances-table .placeholder-row, .instances-table .placeholder-row td { display: block; height: auto; }
  .instances-table .placeholder-row td { padding: 24px 16px; }
  .table-placeholder { min-height: 210px; }
  .list-footer { flex-wrap: wrap; gap: 8px; padding: 12px 0; }
  .pagination { margin-left: auto; }
  .pagination select { margin-right: 4px; }
  .pagination .icon-button { width: 32px; height: 32px; }
  .snapshot-footer { align-items: flex-start; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .snapshot-time { margin-left: auto; }
  .mqtt-section { order: 2; margin: 0; padding: 21px 18px; border-top: 1px solid var(--line); background: var(--surface); }
  .mqtt-section .section-label { display: inline-flex; margin-right: 12px; }
  .mqtt-details { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 15px; margin-top: 14px; }
  .mqtt-details > div { display: block; }
  .mqtt-details dd { margin-top: 4px; text-align: left; font-size: 12px; }
  .mqtt-details .mqtt-last { padding: 0; border: 0; margin: 0; }
  .mqtt-last dd { font-size: 10px; }
  .reference-section { order: 3; padding: 20px 18px; border-top: 1px solid var(--line); background: var(--surface); }
  .reference-section .section-label { margin-bottom: 14px; }
  .state-reference { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; gap: 13px 30px; }
  .reference-note { margin-top: 16px; }
  .status-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 32px); }
  .dialog-header { padding: 17px 16px; }
  .dialog-body { padding: 17px 16px; }
  .instance-details { gap: 16px; }
  .status-json { padding: 12px; font-size: 10px; }
  .login-header-label { display: none; }
  .login-main { padding-top: 48px; padding-bottom: 64px; }
  .login-footer { padding: 17px 20px; font-size: 9px; }
}

@media (max-width: 380px) {
  .app-header { padding: 0 13px; }
  .app-main { padding-right: 13px; padding-left: 13px; }
  .scope-section { padding-right: 13px; padding-left: 13px; }
  .page-title h1 { font-size: 21px; }
  .refresh-controls { gap: 6px; }
  .poll-toggle { font-size: 10px; }
  .readonly-label { font-size: 9px; }
  .result-count { width: 100%; }
  .pagination { width: 100%; justify-content: flex-end; }
  .pagination select { margin-right: auto; }
  .instance-details { grid-template-columns: minmax(0, 1fr); }
  .brand-product { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

@media (max-width: 1100px) {
  .servers-table, .servers-table tbody { display: block; width: 100%; }
  .servers-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .servers-table .server-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); padding: 8px; }
  .servers-table .server-row:first-child { border-top: 0; }
  .servers-table .server-row td { display: block; min-width: 0; border: 0; padding: 10px; font-size: 12px; }
  .servers-table .server-row td::before { display: block; content: attr(data-label); color: var(--muted); margin-bottom: 5px; font-size: 11px; }
  .servers-table .server-row td:nth-child(4), .servers-table .server-row td:nth-child(12), .servers-table .server-row td:last-child { grid-column: 1 / -1; }
  .servers-table .server-row td:nth-child(5), .servers-table .server-row .row-number { grid-column: 1 / -1; }
  .servers-table .server-collection .button { margin-left: 10px; }
  .servers-table .account-empty { display: block; width: 100%; }
}

@media (max-width: 1000px) {
  .account-register-table, .account-register-table tbody { display: block; width: 100%; }
  .account-register-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .account-register-table .account-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); padding: 8px; }
  .account-register-table .account-row td { display: block; min-width: 0; border: 0; padding: 10px; }
  .account-register-table .account-row td::before { display: block; content: attr(data-label); color: var(--muted); margin-bottom: 5px; font-size: 11px; }
  .account-register-table .account-row .row-number, .account-register-table .account-name, .account-register-table .account-pid, .account-register-table .account-row td:last-child { grid-column: 1 / -1; }
  .account-register-table .account-row .row-number::before { display: inline; margin-right: 8px; }
  .account-register-table .account-row .row-number { grid-column: 1; grid-row: 1; }
  .account-register-table .account-row .account-select { grid-column: 2; grid-row: 1; text-align: right; }
  .account-register-table .account-row .account-select::before { display: none; }
  .account-register-table .account-empty { display: block; width: 100%; }
}

@media (max-width: 760px) {
  .navigation-sidebar { position: static; align-self: stretch; height: auto; display: block; padding: 10px 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .main-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .navigation-settings { grid-column: 1 / -1; margin-top: 0; }
  .navigation-link { padding: 9px; font-size: 12px; }
  .client-scope select { flex: 1; width: auto; }
  .mqtt-summary .mqtt-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mqtt-summary .mqtt-details > div { display: block; }
  .mqtt-summary .mqtt-details dd { text-align: left; margin-top: 4px; }
  .account-table-container { overflow: hidden; }
  .accounts-table td, .accounts-table th { padding: 12px; font-size: 12px; }
  .navigation-link { gap: 6px; padding: 9px 5px; justify-content: center; }
  .navigation-link .icon { width: 15px; height: 15px; }
}

.aligned-toolbar { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 10px; }
.toolbar-query, .toolbar-actions { display: flex; align-items: center; gap: 8px; min-width: 0; }
.toolbar-query { flex: 1; flex-wrap: wrap; }
.toolbar-actions { flex-shrink: 0; margin-left: auto; }
.selection-actions { display: flex; gap: 8px; margin-left: auto; }
.account-selection-bar .selection-actions .button { margin-left: 0; }
.assignment-pending { display: block; font-size: 10px; color: var(--warning); }
.assignment-dialog { width: min(1140px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); }
.assignment-content { display: flex; flex-direction: column; gap: 14px; padding: 18px; min-height: 0; }
.assignment-columns { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; min-height: 0; height: min(470px, 55dvh); }
.assignment-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.assignment-pane + .assignment-pane { border-left: 1px solid var(--line); padding-left: 20px; }
.assignment-pane-title { display: flex; align-items: center; justify-content: space-between; height: 30px; flex-shrink: 0; }
.assignment-pane-title h3 { font-size: 14px; font-weight: 600; margin: 0; }
.assignment-pane-title span, .assignment-select-all { font-size: 12px; color: var(--secondary); }
.assignment-filters { display: flex; gap: 8px; }
.assignment-filters input { width: 55%; min-width: 0; }
.assignment-filters select { flex: 1; min-width: 0; }
.assignment-filters input, .assignment-filters select { border: 1px solid var(--line); background: white; border-radius: 4px; padding: 6px 8px; height: 34px; }
.assignment-select-all { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.assignment-table-scroll { overflow: auto; min-height: 0; flex: 1; overscroll-behavior: contain; }
.allocation-table { width: 100%; min-width: 460px; table-layout: fixed; border-spacing: 0; text-align: left; font-size: 12px; }
.clients-allocation-table { min-width: 350px; }
.allocation-table th, .allocation-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.allocation-table th { position: sticky; top: 0; background: #f9fafb; font-weight: 500; color: var(--secondary); }
.allocation-table .allocation-selection { width: 30px; }
.allocation-table th:nth-child(3) { width: 120px; }
.clients-allocation-table th:nth-child(n+3) { width: 58px; }
.assignment-content input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }
.allocation-empty { text-align: center; color: var(--muted); height: 80px; }
.assignment-progress { padding: 8px 0; font-size: 12px; color: var(--secondary); overflow-wrap: anywhere; }
.assignment-footer { border-top: 1px solid var(--line); padding-top: 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.assignment-footer > span { font-size: 12px; color: var(--secondary); }
.assignment-actions { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 760px) {
  .assignment-dialog { width: calc(100% - 20px); }
  .assignment-content { padding: 12px; gap: 10px; }
  .assignment-columns { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1.2fr 1fr; height: 55dvh; gap: 12px; }
  .assignment-pane + .assignment-pane { border-left: 0; border-top: 1px solid var(--line); padding: 10px 0 0; }
}
.aligned-toolbar .search-field { flex: 0 1 260px; width: 260px; min-width: 160px; }
.aligned-toolbar .client-scope select { width: 160px; }
.aligned-toolbar .table-filters { display: flex; flex-wrap: wrap; }
.aligned-toolbar .account-group-filter { width: 160px; }
.bounded-list-page { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.bounded-list-page > .app-header { position: static; flex: 0 0 56px; height: 56px; }
.bounded-list-page > .app-layout { flex: 1; min-height: 0; overflow: hidden; }
.bounded-list-page .navigation-sidebar { height: 100%; min-height: 0; position: static; }
.bounded-list-page .app-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 16px 24px 10px; overflow: hidden; }
.bounded-list-page .app-main > :not(.table-scroll) { flex-shrink: 0; }
.bounded-list-page .page-heading { margin-bottom: 12px; min-height: 30px; }
.bounded-list-page .page-title h1 { font-size: 22px; }
.bounded-list-page .list-toolbar { margin-bottom: 8px; }
.bounded-list-page .account-feedback, .bounded-list-page .refresh-error { margin-bottom: 8px; }
.bounded-list-page .account-selection-bar { margin-bottom: 8px; min-height: 28px; }
.bounded-list-page .account-selection-bar .button { min-height: 28px; padding: 4px 10px; font-size: 12px; }
.bounded-list-page .table-scroll { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.bounded-list-page .accounts-table { display: table; width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.bounded-list-page .accounts-table tbody { display: table-row-group; }
.bounded-list-page .accounts-table thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.bounded-list-page .accounts-table th { position: sticky; top: 0; z-index: 2; background: #f9fafb; padding: 7px 8px; font-size: 12px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.bounded-list-page .accounts-table .account-row, .bounded-list-page .accounts-table .server-row { display: table-row; padding: 0; }
.bounded-list-page .accounts-table .account-row td, .bounded-list-page .accounts-table .server-row td { display: table-cell; padding: 3px 8px; height: 36px; border: 0; border-bottom: 1px solid var(--line); font-size: 12px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.bounded-list-page .accounts-table td::before { display: none !important; }
.bounded-list-page .accounts-table .row-number-column { width: 44px; }
.bounded-list-page .accounts-table .selection-column { width: 32px; }
.bounded-list-page .accounts-table .account-select { text-align: center; }
.bounded-list-page .accounts-table .actions-column { width: 104px; }
.bounded-list-page .row-actions { gap: 1px; }
.bounded-list-page .row-actions .icon-button { width: 28px; height: 28px; min-height: 28px; padding: 5px; }
.containers-page .container-table { min-width: 1300px; }
.containers-page .container-table .container-actions-column { width: 156px; }
.containers-page .container-table .row-actions { display: grid; grid-template-columns: repeat(5, 28px); width: 140px; gap: 0; }
@media (max-width: 760px) {
  .containers-page .container-batch-actions .button { flex: 1 0 90px; white-space: nowrap; }
}
.bounded-list-page .account-register-table { min-width: 1100px; }
.bounded-list-page .account-register-table th:nth-child(4) { width: 160px; }
.bounded-list-page .account-register-table th:nth-child(5) { width: 120px; }
.bounded-list-page .account-register-table th:nth-child(6) { width: 155px; }
.bounded-list-page .account-register-table th:nth-child(7) { width: 135px; }
.bounded-list-page .account-register-table .account-server-column { width: 150px; }
.bounded-list-page .account-check-time, .bounded-list-page .assignment-instance { margin-top: 2px; font-size: 10px; line-height: 12px; }
.bounded-list-page .assignment-client, .bounded-list-page .assignment-instance { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bounded-list-page .account-register-table .status-badge { min-height: 16px; vertical-align: top; font-size: 11px; line-height: 13px; padding: 1px 5px; }
.bounded-list-page .servers-table { min-width: 1750px; }
.bounded-list-page .servers-table th:nth-child(3) { width: 145px; }
.bounded-list-page .servers-table th:nth-child(4) { width: 128px; }
.bounded-list-page .servers-table th:nth-child(5) { width: 110px; }
.bounded-list-page .servers-table th:nth-child(6) { width: 160px; }
.bounded-list-page .servers-table th:nth-child(7) { width: 85px; }
.bounded-list-page .servers-table th:nth-child(8) { width: 75px; }
.bounded-list-page .servers-table th:nth-child(12) { width: 76px; }
.bounded-list-page .servers-table th:nth-child(12), .bounded-list-page .servers-table .server-row td:nth-child(12) { padding-left: 6px; padding-right: 6px; }
.bounded-list-page .servers-table th:nth-child(13) { width: 112px; }
.bounded-list-page .servers-table th:nth-child(14) { width: 120px; }
.bounded-list-page .servers-table th:nth-child(15) { width: 140px; }
.bounded-list-page .servers-table .actions-column { width: 170px; right: 0; z-index: 3; box-shadow: -1px 0 0 var(--line); }
.bounded-list-page .servers-table .server-actions { position: sticky; right: 0; z-index: 1; background: #fff; box-shadow: -1px 0 0 var(--line); }
.bounded-list-page .servers-table .server-row:hover .server-actions { background: #fafbfd; }
.bounded-list-page .servers-table .server-row.is-selected .server-actions { background: #f0f7f5; }
.image-version-summary { display: flex; align-items: center; gap: 4px; min-width: 0; }
.image-version-list { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.image-version-line { display: flex; align-items: baseline; gap: 5px; min-width: 0; line-height: 14px; }
.image-version { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.client-images-running .image-version { flex: 0 1 auto; }
.image-version-count { flex-shrink: 0; color: var(--secondary); font-variant-numeric: tabular-nums; font-size: 11px; }
.image-version-state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; line-height: 14px; }
.image-versions-more { width: 28px; height: 28px; min-height: 28px; padding: 5px; }
.image-inventory-dialog { width: min(720px, calc(100% - 24px)); }
.image-inventory-dialog .dialog-header h2 { min-width: 0; margin: 0; }
.image-inventory-body { min-width: 0; display: flex; flex-direction: column; gap: 18px; overflow-wrap: anywhere; }
.image-inventory-server { font-weight: 600; }
.image-inventory-status { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; }
.image-inventory-status p { flex: 1 1 200px; min-width: 0; color: var(--secondary); font-size: 12px; }
.image-inventory-metadata { display: grid; gap: 10px; min-width: 0; font-size: 12px; }
.image-inventory-metadata > div { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 10px; min-width: 0; }
.image-inventory-metadata dt { color: var(--secondary); }
.image-inventory-metadata dd { min-width: 0; white-space: normal; }
.image-inventory-metadata code { display: block; font-family: var(--mono); font-size: 11px; }
.image-inventory-metadata code + code { margin-top: 4px; }
.image-inventory-section { min-width: 0; border-top: 1px solid var(--line); padding-top: 14px; }
.image-inventory-section h3 { font-size: 13px; }
.image-inventory-item { padding: 12px 0; min-width: 0; }
.image-inventory-item + .image-inventory-item { border-top: 1px solid var(--line); }
.image-inventory-item .image-inventory-metadata { margin-top: 8px; }
.image-inventory-version { display: flex; align-items: baseline; gap: 12px; min-width: 0; font-size: 12px; }
.image-inventory-version strong { flex: 1; min-width: 0; font-weight: 600; }
.image-inventory-count { flex-shrink: 0; color: var(--secondary); font-variant-numeric: tabular-nums; }
.image-inventory-empty { padding-top: 10px; color: var(--secondary); font-size: 12px; }
.image-import-dialog { width: min(520px, calc(100% - 24px)); }
.image-import-dialog .dialog-header h2 { min-width: 0; margin: 0; font-size: 18px; }
.image-import-form { display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow-wrap: anywhere; }
.image-import-server { font-weight: 600; }
.image-import-form input[type="file"] { width: 100%; min-width: 0; max-width: 100%; font-size: 12px; }
.image-import-file-name { min-width: 0; font-size: 12px; color: var(--secondary); white-space: normal; overflow-wrap: anywhere; }
.image-import-task { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.image-import-task > * { max-width: 100%; }
.image-import-task p { font-size: 12px; }
.image-import-effect { color: var(--secondary); font-size: 12px; }
.image-import-recovery { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 12px; }
.image-import-recovery p { color: var(--warning); }
.image-import-recovery label { display: flex; align-items: flex-start; gap: 8px; }
.image-import-recovery input { flex: 0 0 auto; margin-top: 3px; }
.image-import-progress { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 12px; }
.image-import-progress progress { display: block; width: 100%; height: 8px; accent-color: var(--accent); }
.image-import-form .account-form-actions { margin-top: 4px; flex-wrap: wrap; }
.image-import-summary { display: block; max-width: 100%; min-width: 0; margin-top: 3px; padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 11px; line-height: 15px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: underline; text-underline-offset: 2px; }
.image-import-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.create-image-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.create-image-heading label { margin: 0; }
.create-image-refresh { flex: 0 0 28px; width: 28px; height: 28px; min-height: 28px; padding: 5px; }
.bounded-list-page .server-detail { margin-top: 2px; font-size: 10px; line-height: 12px; overflow: hidden; text-overflow: ellipsis; }
.bounded-list-page .servers-table .server-row.is-selected { background: #f0f7f5; }
.bounded-list-page .account-empty { display: table-cell; height: 160px; }
.bounded-list-page .compact-footer { min-height: 38px; padding: 5px 0 0; border: 0; }
@media (max-width: 1100px) {
  .aligned-toolbar .toolbar-query { flex-basis: 100%; }
  .aligned-toolbar .toolbar-actions { justify-content: flex-end; }
}
@media (max-width: 760px) {
  .bounded-list-page .app-layout { display: flex; flex-direction: column; }
  .bounded-list-page .navigation-sidebar { flex-shrink: 0; height: auto; padding: 5px 12px; }
  .bounded-list-page .main-navigation { display: flex; flex-direction: row; flex-wrap: wrap; gap: 2px; }
  .bounded-list-page .navigation-link { flex: 1 1 40%; min-height: 30px; padding: 4px; }
  .bounded-list-page .navigation-settings { margin-top: 0; }
  .navigation-group, .bounded-list-page .navigation-group { display: flex; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: 2px; grid-column: 1 / -1; }
  .navigation-group-label { flex: 0 0 100%; justify-content: center; padding: 4px; font-size: 11px; }
  .navigation-group .navigation-child, .bounded-list-page .navigation-group .navigation-child { flex: 1 1 40%; justify-content: center; margin: 0; padding: 5px; border-left: 0; border-radius: 5px; }
  .main-navigation .navigation-settings, .bounded-list-page .main-navigation .navigation-settings { flex: 1 0 100%; }
  .bounded-list-page .app-main { flex: 1; width: 100%; padding: 12px 12px 6px; }
  .bounded-list-page .page-heading { margin-bottom: 8px; }
  .aligned-toolbar .search-field { flex: 1 1 160px; width: auto; }
  .aligned-toolbar .account-group-filter { flex: 1 1 100px; width: auto; }
  .aligned-toolbar .toolbar-query { gap: 6px; }
  .aligned-toolbar .toolbar-actions { gap: 6px; }
  .bounded-list-page .compact-footer { gap: 4px; }
  .bounded-list-page .compact-footer .result-count { width: auto; font-size: 10px; }
  .bounded-list-page .compact-footer .pagination { width: auto; margin-left: auto; }
  .bounded-list-page .compact-footer .pagination select { margin-right: 0; }
}

#accounts .account-import-action { width: 112px; white-space: nowrap; }
#accounts .account-import-action .icon { width: 16px; height: 16px; }
#accounts .account-import-action.is-importing { border-color: #b6cadf; color: var(--info); background: var(--info-bg); }
#accounts .toolbar-actions { max-width: 100%; flex-wrap: wrap; }
.account-import-dialog { width: min(680px, calc(100% - 24px)); max-width: 680px; max-height: calc(100dvh - 32px); }
.account-import-dialog .dialog-header h2 { margin: 0; }
.account-import-form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.account-import-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.account-import-body .notice { margin: 0; overflow-wrap: anywhere; }
.account-import-file-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 8px; }
.account-import-file-heading label { font-weight: 600; }
.account-import-file-heading span, .account-import-upload p, .account-import-query { color: var(--secondary); font-size: 12px; }
.account-import-upload input { display: block; width: 100%; padding: 7px; font-size: 12px; }
.account-import-upload p { margin-top: 8px; overflow-wrap: anywhere; }
.account-import-upload code { font-family: var(--mono); }
.account-import-status { display: flex; flex-direction: column; gap: 12px; min-width: 0; border-top: 1px solid var(--line); padding-top: 16px; }
.account-import-status-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.account-import-status-heading .mono { color: var(--secondary); font-size: 12px; }
.account-import-status progress { width: 100%; height: 8px; accent-color: var(--accent); }
.account-import-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.account-import-totals > div { min-width: 0; }
.account-import-totals dt { color: var(--secondary); font-size: 12px; }
.account-import-totals dd { margin-top: 2px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.account-import-totals > div:first-child dd { color: var(--success); }
.account-import-totals > div:last-child dd { color: var(--danger); }
.account-import-message { font-size: 12px; color: var(--secondary); overflow-wrap: anywhere; }
.account-import-results { max-height: min(280px, 32dvh); min-height: 80px; overflow: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); scrollbar-gutter: stable; }
.account-import-results table { width: 100%; border-spacing: 0; table-layout: fixed; text-align: left; font-size: 12px; }
.account-import-results th, .account-import-results td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.account-import-results th { position: sticky; top: 0; background: #f9fafb; color: var(--secondary); font-weight: 500; }
.account-import-results th:first-child { width: 60px; }
.account-import-results th:nth-child(2) { width: 82px; }
.account-import-results td strong, .account-import-results td .mono { display: block; font-size: 12px; font-weight: 500; }
.account-import-results td .mono { color: var(--secondary); font-size: 11px; }
.account-import-results td p { color: var(--secondary); }
.account-import-results .account-import-empty { padding: 20px 8px; text-align: center; color: var(--muted); }
.account-import-footer { display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); }
.account-import-footer > span { font-size: 12px; color: var(--secondary); }
.account-import-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.account-import-actions .button { white-space: nowrap; }
@media (max-width: 480px) {
  #accounts .toolbar-actions { gap: 6px; }
  #accounts .toolbar-actions .button { padding-right: 8px; padding-left: 8px; }
  #accounts .account-import-action { width: 100px; gap: 6px; }
  .account-import-body { gap: 12px; padding: 14px; }
  .account-import-status { gap: 10px; padding-top: 12px; }
  .account-import-results th:first-child { width: 46px; }
  .account-import-results th:nth-child(2) { width: 74px; }
  .account-import-results th, .account-import-results td { padding: 8px 5px; }
  .account-import-footer { padding: 12px 14px; }
}

.dashboard-page .client-instances-scroll { overflow-x: auto; }
.dashboard-page .instances-table { min-width: 1406px; }
.dashboard-page .col-number { width: 52px; }
.dashboard-page .col-instance { width: 112px; }
.dashboard-page .col-client { width: 145px; }
.dashboard-page .col-persona { width: 175px; }
.dashboard-page .col-online { width: 84px; }
.dashboard-page .col-auth { width: 156px; }
.instance-auth-actions { display: flex; align-items: center; gap: 4px; }
.instance-auth-actions .icon-button { width: 26px; height: 26px; min-height: 26px; padding: 5px; }
.dashboard-page #server-filter { width: 170px; }
.instance-assignment-dialog { width: min(680px, calc(100% - 24px)); }
.instance-assignment-dialog .dialog-header h2 { font-size: 18px; }
.instance-assignment-body { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.instance-assignment-body .assignment-table-scroll { height: min(340px, 40dvh); min-height: 110px; flex: 1 1 auto; }
.instance-assignment-body .allocation-table { min-width: 440px; }
.instance-assignment-body .allocation-table td { overflow-wrap: anywhere; }
.instance-assignment-body .assignment-progress { padding: 0; }
.instance-assignment-body .tone-warning { font-size: 12px; overflow-wrap: anywhere; }
.dashboard-page .col-host { width: 170px; }
.dashboard-page .col-container { width: 122px; }
.dashboard-page .col-received { width: 155px; }
.dashboard-page .col-action { width: 210px; }
.client-host-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.client-host-ip, .client-container-removal { display: block; margin-top: 4px; overflow-wrap: anywhere; font-size: 10px; color: var(--muted); }
.client-container-removal { color: var(--warning); }
.dashboard-page .instances-table .client-actions-heading,
.dashboard-page .instances-table .cell-action { position: sticky; right: 0; z-index: 2; background: var(--surface); box-shadow: -1px 0 var(--line); }
.dashboard-page .instances-table .client-actions-heading { z-index: 3; background: #f9fafb; }
.dashboard-page .instances-table .cell-action { padding: 12px; }
.dashboard-page .instance-row.is-offline .cell-action { background: #fcfcfd; }
.dashboard-page .instance-row:hover .cell-action { background: #fafbfd; }
.dashboard-page .instance-row.is-offline:hover .cell-action { background: #f6f8fa; }
.client-container-actions { display: grid; grid-template-columns: repeat(6, 28px); align-items: center; width: 168px; margin-left: auto; min-height: 28px; white-space: nowrap; }
.dashboard-page .client-container-actions .icon-button { width: 28px; height: 28px; min-height: 28px; padding: 5px; }
.container-operation-actions > button { grid-row: 1; }
.container-operation-actions > [data-action="START"], .container-operation-actions > [data-action="STOP"] { grid-column: 1; }
.container-operation-actions > [data-action="RESTART"] { grid-column: 2; }
.container-operation-actions > [data-action="REBUILD"] { grid-column: 3; }
.container-operation-actions > [data-action="REMOVE"] { grid-column: 4; }
.container-operation-actions > [data-action="LOGS"] { grid-column: 5; }
.client-container-actions > button:last-child { grid-column: 6; }
.container-operation-actions > [data-action="START"], #batch-start-containers .icon { color: var(--success); }
.container-operation-actions > [data-action="STOP"], .container-operation-actions > [data-action="REMOVE"], #batch-stop-containers .icon { color: var(--danger); }
.container-operation-actions > [data-action="START"]:hover:not(:disabled) { color: var(--success); background: var(--success-bg); }
.container-operation-actions > [data-action="STOP"]:hover:not(:disabled), .container-operation-actions > [data-action="REMOVE"]:hover:not(:disabled) { color: var(--danger); background: var(--danger-bg); }
.client-container-feedback { display: block; margin-top: 5px; overflow-wrap: anywhere; text-align: right; font-size: 10px; }
.client-container-jobs { margin-top: 15px; border-bottom: 1px solid var(--line); font-size: 12px; }
.client-container-jobs > summary { display: flex; align-items: center; gap: 8px; padding: 9px 0; cursor: pointer; color: var(--secondary); }
.client-container-jobs > summary .icon { width: 15px; height: 15px; }
.client-container-jobs > summary::after { content: "+"; margin-left: auto; font-family: var(--mono); }
.client-container-jobs[open] > summary::after { content: "-"; }
#client-container-job-list { max-height: min(340px, 45dvh); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.client-container-all-tasks { margin: 10px 0; }
.client-container-jobs-empty { padding: 12px 0; color: var(--muted); }
.client-container-job { padding: 10px 0; border-top: 1px solid var(--line); }
.client-container-job > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; cursor: pointer; }
.client-container-job > summary > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.client-container-job time { margin-left: auto; color: var(--muted); font-size: 10px; }
.client-container-job-body { display: grid; gap: 9px; padding-top: 10px; overflow-wrap: anywhere; }
.client-container-job-body > p:first-child { color: var(--muted); font-size: 11px; }
.client-container-job-body ul { max-height: 180px; overflow-y: auto; overscroll-behavior: contain; }
.client-container-job-body li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0; }
.client-container-job-message { min-width: 0; flex: 1 1 160px; color: var(--secondary); overflow-wrap: anywhere; }
.client-container-uncertain { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.client-container-uncertain > .status-badge { justify-self: start; }
.client-container-task-link { display: inline-flex; align-items: center; justify-self: start; gap: 5px; color: var(--info); text-decoration: underline; text-underline-offset: 3px; }
.client-container-task-link .icon { width: 14px; height: 14px; }
.client-container-action-dialog { max-width: 560px; }
.client-container-action-dialog .dialog-header h2 { font-size: 18px; }
.client-container-action-dialog .dialog-body { display: grid; gap: 16px; }
.client-container-action-dialog .notice { margin: 0; }
.client-container-action-target { display: grid; gap: 10px; }
.client-container-action-target > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
.client-container-action-target dt { color: var(--muted); font-size: 11px; }
.client-container-action-target dd { min-width: 0; overflow-wrap: anywhere; font-size: 12px; }
.client-container-action-footer { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .dashboard-page .instances-table { display: block; min-width: 0; }
  .dashboard-page .client-instances-scroll { overflow: visible; }
  .dashboard-page .instances-table .instance-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-page .instances-table .instance-row .cell-number,
  .dashboard-page .instances-table .instance-row .cell-instance,
  .dashboard-page .instances-table .instance-row .cell-client,
  .dashboard-page .instances-table .instance-row .cell-persona { grid-column: 1 / -1; }
  .dashboard-page .instances-table .instance-row .cell-online { grid-column: 1; grid-row: 5; }
  .dashboard-page .instances-table .instance-row .cell-auth { grid-column: 2; grid-row: 5; }
  .dashboard-page .instances-table .instance-row .cell-host { grid-column: 1; grid-row: 6; }
  .dashboard-page .instances-table .instance-row .cell-container { grid-column: 2; grid-row: 6; }
  .dashboard-page .instances-table .instance-row .cell-received { grid-column: 1 / -1; grid-row: 7; }
  .dashboard-page .instances-table .instance-row .cell-action { grid-column: 1 / -1; grid-row: 8; position: static; padding: 10px 0 0; border-top: 1px solid var(--line); box-shadow: none; background: transparent; }
  .client-container-actions { margin-left: 0; }
  .client-container-feedback { text-align: left; }
  .client-host-name { white-space: normal; overflow-wrap: anywhere; }
  .client-container-action-target > div { grid-template-columns: 65px minmax(0, 1fr); gap: 8px; }
  .client-container-action-footer { padding: 12px 16px; }
}
.container-logs-dialog { width: calc(100% - 24px); max-width: 720px; }
.container-logs-dialog .dialog-header { padding: 12px 16px; }
.container-logs-dialog .dialog-header h2 { min-width: 0; margin: 0; font-size: 15px; }
.container-logs-body { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; overflow: hidden; }
.container-logs-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.container-logs-meta > * { min-width: 0; overflow-wrap: anywhere; }
.container-logs-content { flex: 0 1 auto; min-height: 0; height: min(360px, 50dvh); margin: 0; padding: 12px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 4px; background: var(--canvas); font-size: 11px; line-height: 1.6; white-space: pre; tab-size: 4; direction: ltr; text-align: left; }
.container-logs-status { padding: 24px 0; color: var(--muted); text-align: center; font-size: 12px; }
.container-logs-body .notice { margin: 0; overflow-wrap: anywhere; }
.container-logs-truncated { color: var(--warning); font-size: 11px; }

/* Keep dashboard chrome fixed; the nested instance list owns scrolling. */
.dashboard-page .app-main > .instances-section { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.dashboard-page .instances-section > :not(.client-instances-scroll) { flex-shrink: 0; }
.dashboard-page .client-instances-scroll { overflow: auto; }
.dashboard-page .metrics { padding: 10px 0; margin-bottom: 12px; gap: 0; }
.dashboard-page .metric { gap: 3px; }
.dashboard-page .metric-value { font-size: 26px; }
.dashboard-page .list-heading { margin-bottom: 6px; }
.dashboard-page .instances-table { border-collapse: separate; border-spacing: 0; }
.dashboard-page .instances-table th { position: sticky; top: 0; z-index: 3; }
.dashboard-page .instances-table .client-actions-heading { z-index: 4; }
.dashboard-page .client-dashboard-footer { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 0 18px; min-width: 0; margin-top: 6px; }
.dashboard-page .client-container-jobs, .dashboard-page .mqtt-summary { margin: 0; padding: 0; border: 0; }
.dashboard-page .client-container-jobs > summary, .dashboard-page .mqtt-summary > summary { min-height: 30px; padding: 4px 0; }
.dashboard-page .snapshot-footer { flex: 1; flex-wrap: wrap; gap: 3px 12px; margin: 0; }
.dashboard-page .client-dashboard-detail-panel, .dashboard-page .mqtt-summary > .mqtt-details { position: absolute; z-index: 10; bottom: calc(100% + 6px); left: 0; width: min(560px, 100%); max-height: min(360px, 50dvh); margin: 0; padding: 12px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); box-shadow: 0 4px 16px #242a3120; }
.dashboard-page .mqtt-summary > .mqtt-details { left: auto; right: 0; width: min(360px, 100%); }
.dashboard-page .client-container-jobs[open] > .client-dashboard-detail-panel { display: flex; flex-direction: column; overflow: hidden; }
.dashboard-page #client-container-job-list { min-height: 0; max-height: none; overflow: auto; }
.dashboard-page .client-container-all-tasks { flex-shrink: 0; }
.dashboard-page .client-container-all-tasks { margin-bottom: 0; }
.dashboard-page .refresh-error { max-height: 60px; padding: 6px 10px; overflow: auto; }
@media (max-width: 1100px) {
  .dashboard-page .aligned-toolbar { position: relative; padding-right: 42px; }
  .dashboard-page .toolbar-actions { position: absolute; right: 0; top: 0; }
}
@media (max-width: 760px) {
  .dashboard-page .navigation-sidebar { padding: 4px 12px; }
  .dashboard-page .main-navigation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-page .navigation-link { justify-content: center; gap: 4px; font-size: 11px; }
  .dashboard-page .navigation-link .icon { width: 14px; height: 14px; }
  .dashboard-page .navigation-group { grid-column: 1 / -1; }
  .dashboard-page .navigation-group-label { flex: 0 0 auto; font-size: 10px; }
  .dashboard-page .navigation-group .navigation-child { flex: 1 1 0; }
  .dashboard-page .navigation-settings { grid-column: 1 / -1; }
  .dashboard-page .metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 7px 0; margin-bottom: 6px; }
  .dashboard-page .metric { padding: 0 4px; border: 0; }
  .dashboard-page .metric:first-child { padding-left: 0; }
  .dashboard-page .metric-label { font-size: 10px; }
  .dashboard-page .metric-label .status-dot, .dashboard-page .metric-caption { display: none; }
  .dashboard-page .metric-value { font-family: inherit; font-size: 22px; }
  .dashboard-page .toolbar-query { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .dashboard-page .toolbar-query .search-field { min-width: 0; width: auto; min-height: 32px; }
  .dashboard-page .search-field input { height: 30px; }
  .dashboard-page .table-filters { display: contents; }
  .dashboard-page .toolbar-query select { width: 100%; min-height: 30px; height: 30px; padding-top: 4px; padding-bottom: 4px; }
  .dashboard-page #server-filter { width: 100%; }
  .dashboard-page .compact-footer { gap: 2px; }
  .dashboard-page .compact-footer .result-count { font-size: 9px; }
  .dashboard-page .pagination { gap: 2px; }
  .dashboard-page .pagination select { width: 108px; padding-left: 5px; }
  .dashboard-page .pagination .icon-button { width: 28px; height: 28px; }
  .dashboard-page .page-number { min-width: 34px; }
  .dashboard-page .client-dashboard-footer { gap: 0 12px; }
  .dashboard-page .snapshot-footer { order: 1; flex-basis: 100%; font-size: 9px; }
  .dashboard-page .mqtt-summary { margin-left: auto; }
}
@media (max-height: 650px) {
  .dashboard-page .metrics { padding: 5px 0; }
  .dashboard-page .metric-caption { display: none; }
  .dashboard-page .metric-value { font-size: 20px; }
}
@media (max-width: 760px) and (max-height: 650px) {
  .dashboard-page .app-main { padding-top: 6px; }
  .dashboard-page .page-heading, .dashboard-page .list-toolbar { margin-bottom: 4px; }
  .dashboard-page .list-heading { margin-bottom: 2px; }
  .dashboard-page .refresh-error { max-height: 22px; margin-bottom: 2px; padding: 1px 6px; line-height: 18px; }
  .dashboard-page .refresh-error .icon { width: 14px; height: 14px; margin-top: 2px; }
}

.server-metric-trigger { display: inline-block; padding: 2px 0; border: 0; border-bottom: 1px dotted var(--muted); border-radius: 0; background: transparent; font: inherit; font-variant-numeric: tabular-nums; cursor: help; }
.server-metric-trigger:hover, .server-metric-trigger:focus-visible { color: var(--info); }
.server-metric-tooltip { position: fixed; z-index: 80; width: min(390px, calc(100vw - 16px)); max-height: 360px; padding: 12px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); box-shadow: 0 4px 16px #242a3120; font-size: 12px; scrollbar-width: thin; }
.metric-tooltip-title { display: block; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; margin-bottom: 10px; }
.cpu-core-scale { display: flex; justify-content: space-between; margin: 0 54px 4px 60px; font-family: var(--mono); font-size: 10px; color: var(--muted); }
.cpu-core-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 46px; align-items: center; gap: 8px; min-height: 26px; }
.cpu-core-row > .mono { min-width: 0; overflow-wrap: anywhere; font-size: 11px; }
.cpu-core-value { text-align: right; }
.cpu-core-bar { width: 100%; height: 8px; appearance: none; border: 0; border-radius: 3px; overflow: hidden; background: #edf0f3; --bar-color: var(--success); }
.cpu-core-bar.is-medium { --bar-color: var(--warning); }
.cpu-core-bar.is-high { --bar-color: var(--danger); }
.cpu-core-bar::-webkit-progress-bar { background: #edf0f3; }
.cpu-core-bar::-webkit-progress-value { background: var(--bar-color); }
.cpu-core-bar::-moz-progress-bar { background: var(--bar-color); }
.cpu-core-pending { grid-column: 2 / -1; color: var(--muted); font-size: 11px; }
.metric-tooltip-time { margin-top: 10px; color: var(--muted); font-size: 10px; }
.metric-tooltip-empty { color: var(--muted); }
.metric-memory-details { display: grid; gap: 8px; }
.metric-memory-details > div { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
.metric-memory-details dt { color: var(--secondary); }
.metric-memory-details dd { min-width: 0; overflow-wrap: anywhere; font-size: 11px; }
.delete-client-image { color: var(--danger); }
.image-inventory-version { flex-wrap: wrap; gap: 6px 12px; }
.image-inventory-version .status-badge { font-size: 10px; }
.image-delete-id { margin: 10px 0 16px; overflow-wrap: anywhere; color: var(--secondary); font-size: 11px; }
.image-inventory-body > .account-feedback { margin-bottom: 0; }