/* LiveUnicorn console: one design system for the Admin dashboard and the
   staff/lead panel. Colour carries state only (live / warn / error / idle);
   actions are cobalt, destructive actions red. Light and dark share tokens. */

@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/be-vietnam-pro-vietnamese-400.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/be-vietnam-pro-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/be-vietnam-pro-vietnamese-500.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/be-vietnam-pro-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/be-vietnam-pro-vietnamese-600.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/be-vietnam-pro-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --bg: #e9edf1;
  --surface: #ffffff;
  --surface-2: #f4f6f8;
  --ink: #1b2633;
  --ink-2: #4a5868;
  --line: #cbd3dc;
  --line-strong: #a9b4c0;
  --action: #2a55d1;
  --action-hover: #2148b8;
  --action-ink: #ffffff;
  --action-soft: #e3eafb;
  --live: #12805c;
  --live-soft: #dcf1e7;
  --warn: #8f5e10;
  --warn-fill: #d99a2b;
  --warn-soft: #fbefd9;
  --error: #c62f2f;
  --error-soft: #fbe3e3;
  --idle: #6b7785;
  --idle-soft: #e6eaee;
  --shadow: 0 1px 2px rgb(27 38 51 / 8%), 0 8px 24px rgb(27 38 51 / 8%);
  --radius-box: 10px;
  --radius-control: 7px;
  --sidebar-width: 232px;
  font-family: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #15191e; --surface: #1d232a; --surface-2: #242b33; --ink: #e4e9ee; --ink-2: #a3afbc;
    --line: #323b45; --line-strong: #4a5562; --action: #7593f3; --action-hover: #8fa7f6; --action-ink: #0f1420;
    --action-soft: #243052; --live: #45c693; --live-soft: #173328; --warn: #e6ae52; --warn-fill: #d99a2b;
    --warn-soft: #3a2e17; --error: #f27777; --error-soft: #3d1f22; --idle: #8b97a4; --idle-soft: #2a3139;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 28px rgb(0 0 0 / 35%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15191e; --surface: #1d232a; --surface-2: #242b33; --ink: #e4e9ee; --ink-2: #a3afbc;
  --line: #323b45; --line-strong: #4a5562; --action: #7593f3; --action-hover: #8fa7f6; --action-ink: #0f1420;
  --action-soft: #243052; --live: #45c693; --live-soft: #173328; --warn: #e6ae52; --warn-fill: #d99a2b;
  --warn-soft: #3a2e17; --error: #f27777; --error-soft: #3d1f22; --idle: #8b97a4; --idle-soft: #2a3139;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 28px rgb(0 0 0 / 35%);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 16px; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-variant-numeric: tabular-nums; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
p { margin: 0; }
a { color: var(--action); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .86em; overflow-wrap: anywhere; }
small { font-size: .85rem; }
.muted, .field-hint, small { color: var(--ink-2); }
.hidden { display: none !important; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 50; padding: 8px 12px; border-radius: var(--radius-control); background: var(--action); color: var(--action-ink); }
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Controls ---------- */
button, .link-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px;
  padding: 7px 14px; border: 1px solid transparent; border-radius: var(--radius-control);
  background: var(--action); color: var(--action-ink); font: inherit; font-weight: 500; line-height: 1.2;
  cursor: pointer; text-decoration: none; touch-action: manipulation; transition: background-color .12s ease, border-color .12s ease;
}
button:hover { background: var(--action-hover); }
button.quiet, .link-button.quiet, button.icon-button, button.logout-button, button[data-refresh-area], #clear-vps-filters, #clear-staff-filters {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
button.quiet:hover, button.icon-button:hover, button.logout-button:hover, button[data-refresh-area]:hover, #clear-vps-filters:hover, #clear-staff-filters:hover { background: var(--surface-2); border-color: var(--line-strong); }
button.danger { background: var(--error); color: #fff; }
button.danger:hover { background: color-mix(in srgb, var(--error) 85%, #000); }
button.danger-outline { background: transparent; color: var(--error); border-color: color-mix(in srgb, var(--error) 45%, transparent); }
button:disabled { cursor: not-allowed; opacity: .45; }
button.icon-button { width: 36px; padding: 0; }
button.icon-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

input, select, textarea {
  width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--surface); color: var(--ink); font: inherit;
}
textarea { min-height: 0; resize: vertical; }
select[multiple] { padding: 4px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px var(--action-soft); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--action); }
label { display: grid; gap: 5px; font-size: .9rem; font-weight: 500; color: var(--ink); }
label > small, .field-hint { font-weight: 400; font-size: .82rem; }
.checkbox-label { display: flex; align-items: center; gap: 9px; font-weight: 400; }
.password-field { display: flex; gap: 6px; }
.password-field input { flex: 1; }
.password-toggle { background: var(--surface); color: var(--ink); border-color: var(--line); }
.password-toggle:hover { background: var(--surface-2); }
progress { width: 100%; height: 6px; border: 0; border-radius: 99px; overflow: hidden; background: var(--idle-soft); accent-color: var(--action); }
progress::-webkit-progress-bar { background: var(--idle-soft); }
progress::-webkit-progress-value { background: var(--action); }

/* ---------- Shell ---------- */
.admin-shell, .management-shell { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; }
.admin-sidebar, .management-sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px;
  padding: 18px 12px; border-right: 1px solid var(--line); background: var(--surface); overflow-y: auto;
}
.brand-block { display: flex; align-items: center; gap: 10px; padding: 2px 8px; }
.brand-block strong { display: block; font-size: 1rem; }
.brand-block small { display: block; font-size: .8rem; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--ink); color: var(--surface); font-weight: 600; font-size: .85rem; }
.admin-nav, .management-nav { display: grid; gap: 2px; }
.nav-group { display: grid; gap: 2px; }
.nav-group + .nav-group { margin-top: 14px; }
.nav-group-label { padding: 0 10px 4px; font-size: .78rem; font-weight: 500; color: var(--ink-2); }
.admin-nav button, .management-nav a {
  justify-content: flex-start; gap: 10px; width: 100%; min-height: 38px; padding: 7px 10px; border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--ink-2); font-weight: 500; text-decoration: none; display: flex; align-items: center;
}
.admin-nav button:hover, .management-nav a:hover { background: var(--surface-2); color: var(--ink); }
.admin-nav button.active, .management-nav a.active { background: var(--action-soft); color: var(--ink); }
.admin-nav button.active .nav-icon, .management-nav a.active .nav-icon { color: var(--action); }
.nav-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-foot { margin-top: auto; display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.sidebar-note { display: flex; align-items: center; gap: 8px; padding: 0 8px; font-size: .8rem; color: var(--ink-2); }
.account-chip, .user-chip { display: grid; padding: 0 8px; font-size: .9rem; font-weight: 500; }
.user-chip small, .account-chip small { font-weight: 400; }
.sidebar-foot button { justify-content: flex-start; width: 100%; }
.theme-toggle { background: transparent; color: var(--ink-2); border-color: transparent; }
.theme-toggle:hover { background: var(--surface-2); color: var(--ink); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.admin-content, .management-content { min-width: 0; display: flex; flex-direction: column; }
.admin-topbar, .topbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 28px 0; min-height: 0; }
.admin-topbar h1, .topbar h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.topbar-actions, .account-actions { display: flex; align-items: center; gap: 10px; }
#global-message:not(:empty) { padding: 6px 12px; border-radius: var(--radius-control); background: var(--surface); border: 1px solid var(--line); font-size: .9rem; }
#global-message.error { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, transparent); }
#global-message.success { color: var(--live); }
.admin-workspace, .workspace { width: 100%; max-width: 1360px; padding: 18px 28px 48px; display: grid; gap: 18px; align-content: start; }
.admin-view { display: none; gap: 16px; }
.admin-view.active { display: grid; }
.panel-section { display: grid; gap: 16px; }
[data-view][hidden] { display: none !important; }
.eyebrow, .section-kicker { display: none; }

/* ---------- Section heading ---------- */
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 4px; }
.section-heading h2 { font-size: 1.6rem; }
.section-heading p { margin-top: 4px; max-width: 70ch; color: var(--ink-2); }
.heading-actions, .section-heading-actions, .form-actions, .modal-actions, .group-actions, .row-actions, .account-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.section-heading .heading-actions, .section-heading .section-heading-actions { justify-content: flex-end; }
.refresh-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-2); }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-heading span { font-size: .85rem; color: var(--ink-2); }
.section-subheading { font-size: 1.05rem; }

/* ---------- Surfaces ---------- */
.panel-card, .table-card, .toolbar-card, .vps-inline-panel, .login-card {
  border: 1px solid var(--line); border-radius: var(--radius-box); background: var(--surface);
}
.panel-card, .vps-inline-panel { padding: 18px; }
.form-card { display: grid; gap: 12px; align-content: start; }
.form-card h3 { margin-bottom: 2px; }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; align-items: start; }
.form-grid.compact { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.span-2 { grid-column: span 2; }
.narrow-form { max-width: 520px; }
.compact-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stack-form { display: grid; gap: 14px; }
.stack-list { display: grid; gap: 6px; }
.form-message, .form-status, .form-error { min-height: 1.2em; font-size: .9rem; }
.form-message.error, .form-error, .form-status.error { color: var(--error); }
.form-message.success, .form-success, .form-status.success { color: var(--live); }
.policy-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; color: var(--ink-2); }
.empty-state { padding: 28px 16px; text-align: center; color: var(--ink-2); }
.token-result { padding: 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-control); background: var(--surface-2); overflow-wrap: anywhere; }

/* Filters: one row of compact fields, search widest. */
.toolbar-card, .vps-filter-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 12px; }
.vps-filter-toolbar { border: 1px solid var(--line); border-radius: var(--radius-box); background: var(--surface); }
.toolbar-card > label, .vps-filter-toolbar > label { flex: 1 1 130px; font-size: .8rem; color: var(--ink-2); }
.toolbar-card > .search-field, .vps-filter-toolbar > .search-control, .staff-filters > label:first-child { flex: 2 1 220px; }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
th { padding: 10px 12px; text-align: left; font-size: .8rem; font-weight: 500; color: var(--ink-2); background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.identity-cell { display: grid; gap: 2px; }
.identity-cell strong, td strong { font-weight: 600; }
.action-stack { display: flex; gap: 6px; flex-wrap: wrap; }
.action-stack button, td button { min-height: 32px; padding: 5px 10px; font-size: .88rem; }
td button:not(.danger):not(.danger-outline):not([data-stream-state]) { background: var(--surface); color: var(--ink); border-color: var(--line); }
td button:not(.danger):not(.danger-outline):not([data-stream-state]):hover { background: var(--surface-2); }

/* Resource meters: number first, bar second, colour only near the limit. */
.resource-block { display: grid; gap: 4px; min-width: 270px; }
.resource-line, .metric[data-resource] { display: grid; grid-template-columns: 34px 46px minmax(60px, 1fr) 84px; align-items: center; gap: 6px; font-size: .82rem; color: var(--ink-2); }
.resource-amount { font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
.resource-line strong, .metric[data-resource] strong { color: var(--ink); font-weight: 500; text-align: right; }
.resource-line .resource-state { display: none; }
.resource-track { position: relative; display: block; width: 100%; height: 5px; border-radius: 99px; background: var(--idle-soft); overflow: hidden; }
.resource-fill { position: absolute; inset: 0 auto 0 0; display: block; border-radius: 99px; background: var(--idle); }
[data-resource-level="warning"] .resource-fill, .resource-state-warning ~ .resource-track .resource-fill, .resource-fill.warning { background: var(--warn-fill); }
[data-resource-level="critical"] .resource-fill, .resource-state-critical ~ .resource-track .resource-fill, .resource-fill.critical { background: var(--error); }
.resource-cell { display: block; }
.metric[data-resource] .resource-cell small, .metric[data-resource] .resource-state { display: none; }

/* Row "⋯" menu: secondary actions of a table row. */
.row-menu { position: relative; }
.row-menu > summary {
  display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: var(--radius-control);
  background: var(--surface); color: var(--ink); font-weight: 600; cursor: pointer; list-style: none; user-select: none;
}
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu > summary:hover, .row-menu[open] > summary { background: var(--surface-2); border-color: var(--line-strong); }
.row-menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: grid; gap: 2px; min-width: 170px; padding: 4px;
  border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--shadow);
}
.row-menu-list button { justify-content: flex-start; width: 100%; border: 0 !important; background: transparent !important; }
.row-menu-list button:hover:not(:disabled) { background: var(--surface-2) !important; }
/* Near the table's bottom the menu opens upward so a scrolling table cannot clip it. */
tbody tr:nth-last-child(-n+2):not(:only-child):not(:nth-child(-n+2)) .row-menu-list { top: auto; bottom: calc(100% + 4px); }
/* Wide screens fit the table, so it need not scroll and cannot clip the menu. */
@media (min-width: 1100px) { .table-scroll { overflow: visible; } }

/* Bulk bar: appears only with a selection and stays at the bottom while scrolling. */
.selection-actions {
  position: sticky; bottom: 16px; z-index: 15; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border: 1px solid var(--action); border-radius: var(--radius-box); background: var(--action-soft); box-shadow: var(--shadow);
}
.selection-actions span { margin-right: auto; font-weight: 500; color: var(--ink); }
.selection-actions button { background: var(--surface); color: var(--ink); border-color: var(--line); }
.selection-actions button.danger { color: var(--error); }

/* Overview: things to act on now. */
.attention-list { display: grid; gap: 6px; }
.attention-item { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-control); background: var(--surface-2); }
.attention-item.critical { background: var(--error-soft); }
.attention-item.warning { background: var(--warn-soft); }
.attention-item strong { display: block; }
.attention-item small { display: block; overflow-wrap: anywhere; }
.attention-clear { padding: 6px 2px; color: var(--live); font-weight: 500; }
#attention-count { font-weight: 600; color: var(--error); }

/* Buttons keep their own width inside stacked forms. */
.form-card > button, .stack-form > button { justify-self: start; }
.login-card form > button { justify-self: stretch; }
.form-grid > h3, .form-grid > .form-actions, .form-grid > .form-status, .form-grid > .checkbox-label { grid-column: 1 / -1; }

/* "Tạo …" forms stay folded until asked for; the list they feed comes first. */
.create-panel { padding: 0; }
.create-panel > summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none; font-weight: 600; }
.create-panel > summary::-webkit-details-marker { display: none; }
.create-panel > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-45deg); transition: transform .15s; }
.create-panel[open] > summary::before { transform: rotate(45deg); }
.create-panel[open] > summary { border-bottom: 1px solid var(--line); }
.create-panel > :not(summary) { padding: 18px; }
.create-panel > .two-column > * { padding: 0; border: 0; }

/* People list (panel "Đội ngũ"). */
.people-card { padding: 4px 0; }
.people-list { display: grid; }
.person-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 18px; border-top: 1px solid var(--line); }
.person-row:first-child { border-top: 0; }
.person-row h3 { font-size: 1rem; }
.people-list > .empty-state { padding: 24px; }
#staff-edit-form:not(.hidden) { padding: 18px; }

/* ---------- Status ---------- */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--idle); flex: none; }
.status-dot.online, .status-dot.healthy, .status-dot.green { background: var(--live); }
.status-dot.warning, .status-dot.yellow, .status-dot.recovering { background: var(--warn-fill); }
.status-dot.critical, .status-dot.red, .status-dot.offline { background: var(--error); }
.status-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; font-size: .8rem; font-weight: 500;
  background: var(--idle-soft); color: var(--idle); white-space: nowrap;
}
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-badge.online, .status-badge.healthy, .status-badge.green, .status-badge.ready { background: var(--live-soft); color: var(--live); }
.status-badge.warning, .status-badge.yellow, .status-badge.recovering, .status-badge.pending, .status-badge.failback { background: var(--warn-soft); color: var(--warn); }
.status-badge.critical, .status-badge.red, .status-badge.offline, .status-badge.error { background: var(--error-soft); color: var(--error); }
.stream-counts { display: inline-flex; align-items: baseline; gap: 3px; font-weight: 600; }
.stream-count.running { color: var(--live); }
.stream-count.scheduled { color: var(--warn); }
.stream-count.error { color: var(--error); }
.stream-count-sep { color: var(--line-strong); font-weight: 400; }

/* ---------- Overview ---------- */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: var(--radius-box); background: var(--line); overflow: hidden; }
.metric-card { display: grid; gap: 2px; padding: 14px 16px; background: var(--surface); }
.metric-card span { font-size: .85rem; color: var(--ink-2); }
.metric-card strong { font-size: 1.7rem; font-weight: 600; line-height: 1.2; }
.summary-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-control); }
.summary-row:hover { background: var(--surface-2); }
.summary-row small { display: block; }

/* ---------- Stream summary line ---------- */
.stream-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: .95rem; color: var(--ink-2); }
.stream-summary strong { color: var(--ink); font-weight: 600; }
.stream-summary [data-signal="live"] strong { color: var(--live); }
.stream-summary [data-signal="warn"] strong, .stream-summary [data-signal="scheduled"] strong { color: var(--warn); }
.summary-jump { min-height: 30px; padding: 3px 10px; gap: 4px; background: var(--error-soft); color: var(--error); font-weight: 500; }
.summary-jump strong { color: var(--error) !important; }
.summary-jump:hover { background: var(--error-soft); text-decoration: underline; }

/* ---------- Streams: one row per stream, grouped by VPS ---------- */
.stream-group-list, #stream-list { display: grid; gap: 14px; }
.vps-stream-group { border: 1px solid var(--line); border-radius: var(--radius-box); background: var(--surface); overflow: hidden; }
.vps-stream-group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; cursor: pointer;
  list-style: none; background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.vps-stream-group:not([open]) > summary { border-bottom: 0; }
.vps-stream-group > summary::-webkit-details-marker { display: none; }
.vps-stream-group > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-45deg); transition: transform .15s; flex: none; }
.vps-stream-group[open] > summary::before { transform: rotate(45deg); }
.vps-stream-group-title { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; }
.vps-stream-group-title strong { font-size: 1rem; }
.vps-stream-group-title small { color: var(--ink-2); }
.vps-stream-group-body { display: grid; }
.group-actions { justify-content: flex-end; padding: 8px 16px 0; }
.group-actions button { min-height: 30px; padding: 4px 10px; font-size: .84rem; background: transparent; color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, transparent); }
.vps-stream-group-body > .muted { padding: 14px 16px; }

.stream-row {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: start; gap: 4px 14px;
  padding: 11px 16px; border-top: 1px solid var(--line);
}
.vps-stream-group-body > .stream-row:first-child, .group-actions + .stream-row { border-top: 0; }
.stream-row:target, .stream-row.is-flashed { background: var(--action-soft); }
.signal-dot { width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--idle); }
.stream-row[data-signal="live"] .signal-dot { background: var(--live); box-shadow: 0 0 0 3px var(--live-soft); }
.stream-row[data-signal="warn"] .signal-dot { background: var(--warn-fill); box-shadow: 0 0 0 3px var(--warn-soft); }
.stream-row[data-signal="error"] .signal-dot { background: var(--error); box-shadow: 0 0 0 3px var(--error-soft); }
.stream-row[data-signal="scheduled"] .signal-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--warn-fill); }
.stream-main { min-width: 0; display: grid; gap: 2px; }
.stream-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.stream-title h3 { font-size: 1rem; }
.stream-state { font-size: .88rem; font-weight: 500; color: var(--ink-2); }
.stream-row[data-signal="live"] .stream-state { color: var(--live); }
.stream-row[data-signal="warn"] .stream-state, .stream-row[data-signal="scheduled"] .stream-state { color: var(--warn); }
.stream-row[data-signal="error"] .stream-state { color: var(--error); }
.stream-meta { font-size: .86rem; color: var(--ink-2); }
.stream-problem { font-size: .86rem; color: var(--error); }
.stream-row[data-signal="warn"] .stream-problem { color: var(--warn); }
.stream-row .stream-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.stream-row .stream-actions button { min-height: 32px; padding: 5px 12px; font-size: .88rem; }
.stream-row .download-progress { grid-column: 2 / -1; display: grid; gap: 4px; font-size: .84rem; color: var(--ink-2); max-width: 420px; }
.stream-more { grid-column: 2 / -1; }
.stream-more > summary { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; color: var(--action); cursor: pointer; list-style: none; }
.stream-more > summary::-webkit-details-marker { display: none; }
.stream-more > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.stream-more[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.stream-more-body { display: grid; gap: 8px; margin-top: 10px; padding: 12px; border-radius: var(--radius-control); background: var(--surface-2); }
.secret-line { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: .88rem; }
.secret-line > span:first-child { color: var(--ink-2); }
.secret-line code { padding: 5px 8px; border-radius: 5px; background: var(--surface); border: 1px solid var(--line); }
.secret-line button { min-height: 30px; padding: 4px 10px; font-size: .84rem; }
.stream-more-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.stream-more-foot .muted { font-size: .84rem; }
.finished-streams { border-top: 1px solid var(--line); }
.finished-streams > summary { padding: 10px 16px; cursor: pointer; font-size: .88rem; color: var(--ink-2); }
.finished-streams-body .stream-row { opacity: .8; }

/* ---------- Dialogs and modals ---------- */
dialog { padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
dialog::backdrop, .modal-overlay { background: rgb(15 20 28 / 55%); }
.dialog-content { position: relative; display: grid; gap: 12px; padding: 22px; }
.wide-dialog { width: min(980px, calc(100vw - 32px)); }
dialog:has(.wide-dialog) { width: min(1000px, calc(100vw - 32px)); }
.dialog-close { position: absolute; top: 14px; right: 14px; min-height: 30px; padding: 4px 10px; background: var(--surface); color: var(--ink); border-color: var(--line); }
.modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal, .maintenance-modal { width: min(640px, 100%); max-height: 90vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }
.stream-modal { width: min(820px, 100%); }
.modal-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.modal-body { padding: 18px; display: grid; gap: 12px; }
.maintenance-modal { padding: 0; }
.modal-actions { justify-content: flex-end; padding: 0 18px 18px; }
.modal-facts { display: grid; gap: 6px; margin: 0; }
.modal-facts > div { display: grid; grid-template-columns: 160px 1fr; gap: 10px; padding: 8px 10px; border-radius: var(--radius-control); background: var(--surface-2); }
.modal-facts dt { color: var(--ink-2); }
.modal-facts dd { margin: 0; overflow-wrap: anywhere; }
.maintenance-pending, .source-url-warning, .maintenance-lock-reason { color: var(--warn); font-size: .84rem; }
.source-url-warning { display: block; }

/* Secondary channels inside the stream form */
.secondary-stream-section { display: grid; gap: 10px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: var(--radius-control); }
.secondary-stream-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.secondary-stream-heading p { font-size: .85rem; color: var(--ink-2); }
.secondary-stream-list { display: grid; gap: 8px; }
.secondary-stream-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; }

/* VPS detail panel and inline stream form (panel) */
.vps-inline-heading, .vps-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.detail-stream-list { display: grid; gap: 6px; margin-top: 12px; }
.detail-stream-list article { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; border-radius: var(--radius-control); background: var(--surface-2); }
.inline-stream-form, .inline-stream-row td { background: var(--surface-2); }
.install-row-progress { font-size: .84rem; color: var(--ink-2); }

/* ---------- Login ---------- */
.admin-login-page, .management-login-page { display: grid; place-items: center; padding: 24px 16px; }
.login-card { width: min(420px, 100%); display: grid; gap: 14px; padding: 28px; box-shadow: var(--shadow); }
.login-card h1 { font-size: 1.5rem; }
.login-card form { display: grid; gap: 14px; }
.login-card button[type="submit"] { min-height: 42px; }
#login-error:not(:empty) { color: var(--error); font-size: .9rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .admin-shell, .management-shell { grid-template-columns: 1fr; }
  .admin-sidebar, .management-sidebar { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .admin-nav, .management-nav { order: 3; flex-basis: 100%; display: flex; gap: 4px; overflow-x: auto; padding-bottom: 2px; }
  .nav-group { display: contents; }
  .nav-group-label { display: none; }
  .admin-nav button, .management-nav a { width: auto; flex: none; white-space: nowrap; }
  .sidebar-foot { margin: 0 0 0 auto; padding: 0; border: 0; display: flex; align-items: center; gap: 6px; }
  .sidebar-note, .account-chip, .user-chip { display: none; }
  .sidebar-foot button { width: auto; }
  .theme-toggle [data-theme-label] { display: none; }
  .admin-workspace, .workspace { padding: 14px 16px 40px; }
  .admin-topbar, .topbar { padding: 8px 16px 0; }
  .two-column, .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .stream-row { grid-template-columns: 10px minmax(0, 1fr); }
  .stream-row .stream-actions { grid-column: 2; justify-content: flex-start; }
  .secret-line { grid-template-columns: 1fr auto; }
  .secret-line > span:first-child { grid-column: 1 / -1; }
  .compact-fields { grid-template-columns: 1fr; }
}

/* Admin "+ Thêm luồng" moves #stream-form into this modal: one header, one close button. */
.maintenance-modal > .card-heading { position: sticky; top: 0; z-index: 1; margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--line); background: var(--surface); }
.maintenance-modal > .card-heading h2 { font-size: 1.15rem; }
[data-stream-modal-body] { padding: 18px 20px 20px; }
[data-stream-modal-body] > .panel-card { padding: 0; border: 0; }
[data-stream-modal-body] #stream-form > .card-heading { display: none; }

/* Phones: every control is a 44px touch target. */
@media (max-width: 480px) {
  button, .link-button, input, select { min-height: 44px; }
  .stream-row .stream-actions button, td button, .action-stack button, .secret-line button, .group-actions button { min-height: 44px; }
  .section-heading .heading-actions, .section-heading .section-heading-actions { justify-content: flex-start; }
}