/* 12px matches backdrop-blur-md; white at 10% matches border-white/10. */
:root {
  --glass-fill: rgba(255,255,255,.72);
  --glass-rim: rgba(255,255,255,.10);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.82), inset 0 0 24px rgba(255,255,255,.34), 0 4px 18px rgba(32,38,52,.045);
}
/* Subtle canvas tint reveals the translucent light surfaces. */
body {
  background-color: #f2f4f7;
  background-image: radial-gradient(ellipse at 15% 5%, rgba(255,102,0,.055), transparent 55%), radial-gradient(ellipse at 90% 85%, rgba(23,111,189,.045), transparent 60%);
  background-attachment: fixed;
}
html body :is(
  .vital,
  .metrics-strip,
  .service-table,
  .activity-panel,
  .laitik-tip,
  .service-current,
  .dedicated-diagnostics,
  .proxy-access-row,
  .public-domain-add,
  .storage-card,
  .share-card,
  .disk-card,
  .user-card,
  .empty-card,
  .catalog-card,
  .service-history,
  .service-facts,
  .service-containers,
  .service-admin,
  .storage-section,
  .storage-health-section,
  .local-disk-card,
  .virtual-machine-vitals,
  .virtual-machine-panel,
  .tailscale-local-card,
  .tailscale-node-list,
  .website-overview,
  .website-panel,
  .battery-health,
  .battery-trends,
  .power-period,
  .power-protection,
  .power-history,
  .power-unconfirmed,
  .camera-readiness,
  .camera-card,
  .printer-panel,
  .printer-status-panel,
  .xerox-ledger,
  .konica-overview,
  .konica-section,
  .konica-ledger,
  .konica-registers,
  .sms-gateway-channels-panel,
  .sms-gateway-stats,
  .sms-gateway-history,
  .sms-gateway-diagnostics,
  .sms-channel-card,
  .sms-channel-inbox,
  .security-summary-grid,
  .security-panel,
  .security-protection,
  .event-summary,
  .event-detail-summary,
  .event-explanation,
  .event-current,
  .event-chronology,
  .monitoring-power-stats,
  .monitoring-event-summary,
  .monitoring-service-compact,
  .backup-active,
  .backup-schedule-panel,
  .backup-protection-panel,
  .cloud-backup-layout,
  .cloud-backup-explainer,
  .cloud-backup-section,
  .crm-backup-controls,
  .monitoring-panel,
  .monitoring-facts,
  .proxy-route-test,
  .login-card,
  .article-aside-card,
  .case-card,
  .monitoring-vitals > div
) {
  background: var(--glass-fill);
  border: 1px solid var(--glass-rim);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
html body .power-unconfirmed { background: rgba(255,244,223,.78); }
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
html body :is(
  .vital,
  .metrics-strip,
  .service-table,
  .activity-panel,
  .laitik-tip,
  .service-current,
  .dedicated-diagnostics,
  .proxy-access-row,
  .public-domain-add,
  .storage-card,
  .share-card,
  .disk-card,
  .user-card,
  .empty-card,
  .catalog-card,
  .service-history,
  .service-facts,
  .service-containers,
  .service-admin,
  .storage-section,
  .storage-health-section,
  .local-disk-card,
  .virtual-machine-vitals,
  .virtual-machine-panel,
  .tailscale-local-card,
  .tailscale-node-list,
  .website-overview,
  .website-panel,
  .battery-health,
  .battery-trends,
  .power-period,
  .power-protection,
  .power-history,
  .power-unconfirmed,
  .camera-readiness,
  .camera-card,
  .printer-panel,
  .printer-status-panel,
  .xerox-ledger,
  .konica-overview,
  .konica-section,
  .konica-ledger,
  .konica-registers,
  .sms-gateway-channels-panel,
  .sms-gateway-stats,
  .sms-gateway-history,
  .sms-gateway-diagnostics,
  .sms-channel-card,
  .sms-channel-inbox,
  .security-summary-grid,
  .security-panel,
  .security-protection,
  .event-summary,
  .event-detail-summary,
  .event-explanation,
  .event-current,
  .event-chronology,
  .monitoring-power-stats,
  .monitoring-event-summary,
  .monitoring-service-compact,
  .backup-active,
  .backup-schedule-panel,
  .backup-protection-panel,
  .cloud-backup-layout,
  .cloud-backup-explainer,
  .cloud-backup-section,
  .crm-backup-controls,
  .monitoring-panel,
  .monitoring-facts,
  .proxy-route-test,
  .login-card,
  .article-aside-card,
  .case-card,
  .monitoring-vitals > div
) { background: #fafbfc; }
}
@media (forced-colors: active) {
html body :is(
  .vital,
  .metrics-strip,
  .service-table,
  .activity-panel,
  .laitik-tip,
  .service-current,
  .dedicated-diagnostics,
  .proxy-access-row,
  .public-domain-add,
  .storage-card,
  .share-card,
  .disk-card,
  .user-card,
  .empty-card,
  .catalog-card,
  .service-history,
  .service-facts,
  .service-containers,
  .service-admin,
  .storage-section,
  .storage-health-section,
  .local-disk-card,
  .virtual-machine-vitals,
  .virtual-machine-panel,
  .tailscale-local-card,
  .tailscale-node-list,
  .website-overview,
  .website-panel,
  .battery-health,
  .battery-trends,
  .power-period,
  .power-protection,
  .power-history,
  .power-unconfirmed,
  .camera-readiness,
  .camera-card,
  .printer-panel,
  .printer-status-panel,
  .xerox-ledger,
  .konica-overview,
  .konica-section,
  .konica-ledger,
  .konica-registers,
  .sms-gateway-channels-panel,
  .sms-gateway-stats,
  .sms-gateway-history,
  .sms-gateway-diagnostics,
  .sms-channel-card,
  .sms-channel-inbox,
  .security-summary-grid,
  .security-panel,
  .security-protection,
  .event-summary,
  .event-detail-summary,
  .event-explanation,
  .event-current,
  .event-chronology,
  .monitoring-power-stats,
  .monitoring-event-summary,
  .monitoring-service-compact,
  .backup-active,
  .backup-schedule-panel,
  .backup-protection-panel,
  .cloud-backup-layout,
  .cloud-backup-explainer,
  .cloud-backup-section,
  .crm-backup-controls,
  .monitoring-panel,
  .monitoring-facts,
  .proxy-route-test,
  .login-card,
  .article-aside-card,
  .case-card,
  .monitoring-vitals > div
) {
  background: Canvas;
  border-color: CanvasText;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
}

/* Sections that used to sit directly on the page need an inset once framed. */
html body :is(.service-history, .service-facts, .service-containers,
  .service-admin, .dedicated-diagnostics, .storage-section,
  .public-domain-add) {
  padding: 24px;
}
html body .proxy-access-row {
  padding-inline: 20px;
}
@media (max-width: 720px) {
  html body :is(.service-history, .service-facts, .service-containers,
    .service-admin, .dedicated-diagnostics, .storage-section,
    .public-domain-add) {
    padding: 16px;
  }
  html body .proxy-access-row {
    padding-inline: 15px;
  }
  html body .service-history > .section-heading {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
  }
  html body .service-history .chart-legend {
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  html body .service-history .chart-legend small {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* PeaNUT uses the same card surface as the surrounding power panels. */
html body .host-beszel:has(#power-peanut-frame) {
  margin-top: 24px;
  padding: 24px;
  min-width: 0;
  border: 1px solid var(--glass-rim);
  border-radius: 16px;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
html body .host-beszel:has(#power-peanut-frame) > .section-heading {
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}
html body #power-peanut-frame {
  display: block;
  max-width: 100%;
  border-radius: 12px;
  background: #f9fafb;
  box-shadow: 0 4px 18px rgba(32,38,52,.06);
}
html body #power-peanut-frame[hidden] { display: none; }
@media (max-width: 640px) {
  html body .host-beszel:has(#power-peanut-frame) { margin-top: 20px; padding: 16px; }
  html body .host-beszel:has(#power-peanut-frame) > .section-heading { flex-wrap: wrap; }
}

/* Brain Bento bundle starts here. */
/* Brain Bento: layout follows content and keeps DOM/keyboard order.
   Bundled at the end of glass-cards.css by scripts/bundle-bento.py. */
:root {
  --bento-gap: clamp(14px, 1.4vw, 24px);
  --bento-pad: clamp(16px, 1.7vw, 26px);
  --bento-radius: 18px;
  --bento-line: #e0e5eb;
  --bento-canvas: #f3f5f8;
}
html body:has(.app-shell), html body:has(.kb-dashboard) { background: var(--bento-canvas); }
html body .shell { min-width: 0; container-type: inline-size; }
html body .app-view:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--bento-gap);
  align-content: start;
  align-items: start;
  padding: var(--bento-pad);
  max-width: 1920px;
  margin-inline: auto;
}
html body .app-view > * { grid-column: 1 / -1; min-width: 0; margin-block: 0; }
html body .app-view > .back-button { justify-self: start; }
html body [hidden] { display: none !important; }
/* The overview is a single grid rather than two independently stacked rails. */
html body #overview-view > :is(.primary-column, .right-rail) { display: contents; }
html body #overview-view :is(.primary-column, .right-rail) > * { min-width: 0; margin: 0; grid-column: 1 / -1; }
html body #overview-view .status-hero { grid-column: 1 / 9; grid-row: 1; }
html body #overview-view .key-metrics { grid-column: 1 / 9; grid-row: 2; }
html body #overview-view .services-section { grid-column: 1 / 9; grid-row: 3 / 5; padding: var(--bento-pad); }
html body #overview-view .activity-panel { grid-column: 9 / 13; grid-row: 1 / 3; }
html body #overview-view .laitik-tip { grid-column: 9 / 13; grid-row: 3; }
/* One quiet surface system, without blur or decorative shadows. */
html body :is(.services-section, .key-metrics, .activity-panel, .laitik-tip,
  .catalog-card, .storage-card, .share-card, .disk-card, .user-card,
  .service-history, .service-facts, .service-containers, .service-admin,
  .dedicated-diagnostics, .storage-section, .storage-health-section,
  .local-disk-card, .virtual-machine-panel, .virtual-machine-console,
  .tailscale-local-card, .tailscale-node-list, .tailscale-health,
  .website-overview, .website-panel, .battery-health, .battery-trends,
  .power-period, .power-protection, .power-history, .host-beszel,
  .camera-readiness, .camera-card, .camera-next-step, .printer-panel,
  .printer-status-panel, .xerox-ledger, .konica-overview, .konica-section,
  .konica-ledger, .konica-registers, .sms-gateway-channels-panel,
  .sms-gateway-stats, .sms-gateway-history, .sms-gateway-diagnostics,
  .sms-channel-card, .security-panel, .security-protection,
  .event-summary, .event-detail-summary, .event-explanation, .event-current,
  .event-chronology, .backup-active, .backup-schedule-panel,
  .backup-protection-panel, .cloud-backup-section, .crm-backup-section,
  .monitoring-panel, .monitoring-facts, .proxy-route-test, .proxy-access,
  .public-domain-add, .proxy-admin, .settings-panel, .service-guide-panel,
  .login-card, .case-card, .article-aside-card) {
  border: 1px solid var(--bento-line);
  border-radius: var(--bento-radius);
  background: #fff;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  min-width: 0;
}
html body :is(.key-metrics, .activity-panel, .proxy-access, .proxy-admin,
  .tailscale-health, .camera-next-step, .crm-backup-section) { padding: var(--bento-pad); }
html body :is(.metrics-strip, .service-table, .service-current, .security-summary-grid,
  .virtual-machine-vitals, .monitoring-vitals) {
  min-width: 0; background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html body .key-metrics .metrics-strip { padding: 0; border: 0; border-radius: 0; }
html body .status-hero { min-height: 240px; border-radius: var(--bento-radius); grid-template-columns: minmax(120px, .7fr) minmax(0, 2fr); }
html body .status-hero .vitals { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); }
html body .status-hero .vital { background: #fff; border: 0; box-shadow: none; backdrop-filter: none; padding: 12px; }
html body .hero-copy { min-width: 0; }
html body .hero-copy h1 { font-size: clamp(21px, 2.1vw, 30px); text-wrap: balance; }
html body .hero-note { display: none; }
html body .metric-item { min-width: 0; }
html body .section-heading { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
html body :is(.form-actions, .virtual-machine-actions, .camera-toolbar,
  .events-toolbar, .calls-toolbar, .printer-actions, .chart-legend) { flex-wrap: wrap; gap: 10px; }
html body .service-table { border-radius: 12px; overflow: hidden; }
html body .services-section .service-table-head,
html body .services-section .service-row { grid-template-columns: minmax(150px,1.3fr) minmax(110px,.85fr) 80px minmax(100px,1fr) 36px; gap: 10px; }
/* Operational pages: content-sized pairs, wide tables and consoles. */
html body #proxy-view > .proxy-route-test { grid-column: span 8; }
html body #proxy-view > .dedicated-diagnostics { grid-column: span 4; }
html body #proxy-view > :is(.proxy-access, .public-domain-add) { grid-column: span 6; }
html body #files-view > .dedicated-diagnostics { grid-column: span 8; }
html body #files-view > .storage-card { grid-column: span 4; }
html body #power-view > .battery-health { grid-column: span 4; }
html body #power-view > .battery-trends { grid-column: span 8; }
html body #tailscale-view > .tailscale-local { grid-column: span 4; }
html body #tailscale-view > .tailscale-nodes { grid-column: span 8; }
html body #service-view > .service-history { grid-column: span 8; }
html body #service-view > .service-facts { grid-column: span 4; }
html body #pbx-view > .storage-section { grid-column: span 6; }
html body #nas-view > .storage-section { grid-column: span 6; }
html body #nas-view > .storage-section:last-child { grid-column: 1 / -1; }
html body :is(.backup-layout, .storage-health-columns, .printer-layout,
  .xerox-bottom-grid, .konica-layout, .sms-gateway-layout, .virtual-machine-grid,
  .website-grid, .network-grid, .security-layout, .event-detail-layout,
  .settings-layout, .service-guide-layout, .power-page-grid, .monitoring-grid) {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--bento-gap); align-items: start; margin: 0;
}
html body :is(.backup-layout, .storage-health-columns, .printer-layout,
  .xerox-bottom-grid, .konica-layout, .sms-gateway-layout, .virtual-machine-grid,
  .website-grid, .network-grid, .security-layout, .event-detail-layout,
  .settings-layout, .service-guide-layout, .power-page-grid, .monitoring-grid) > * { min-width: 0; margin-block: 0; }
html body :is(.virtual-machine-grid, .storage-health-columns, .xerox-bottom-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body :is(.service-catalog, .share-grid, .disk-grid, .local-disk-grid,
  .camera-grid, .sms-channel-grid, .konica-tray-grid) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: var(--bento-gap); align-items: stretch;
}
html body .service-catalog .catalog-card { height: auto; min-height: 190px; }
html body :is(.service-current, .virtual-machine-vitals, .monitoring-vitals, .security-summary-grid) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; border: 0; overflow: visible;
}
html body :is(.service-current, .virtual-machine-vitals, .monitoring-vitals, .security-summary-grid) > div {
  min-width: 0; padding: 18px; border: 1px solid var(--bento-line);
  border-radius: 14px; background: #fff; box-shadow: none; backdrop-filter: none;
}
html body :is(.calls-list, .events-full) { min-width: 0; }
html body :is(.files-hero, .catalog-heading, .security-hero, .event-detail-hero) { min-width: 0; gap: 16px; }
html body :is(.service-facts, .dedicated-diagnostics) :is(strong, dd),
html body :is(.share-card, .catalog-card, .disk-card) :is(h2, h3, p, small) { overflow-wrap: anywhere; }
html body :is(.button, .back-button) { min-height: 44px; }
html body :is(input, select, textarea) { max-width: 100%; min-width: 0; }
/* Knowledge uses the same module rhythm; reading remains a broad column. */
html body .kb-dashboard { grid-template-columns: minmax(190px, 1fr) minmax(0, 4fr); gap: var(--bento-gap); }
html body .kb-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--bento-gap); }
html body .kb-sidebar { padding: 20px; border: 1px solid var(--bento-line); border-radius: var(--bento-radius); background: #fff; }
html body .article-layout { gap: var(--bento-gap); }
html body .login-shell { padding: 20px; }
@container (max-width: 960px) {
  html body #overview-view .status-hero,
  html body #overview-view .key-metrics,
  html body #overview-view .services-section { grid-column: 1 / -1; grid-row: auto; }
  html body #overview-view .activity-panel,
  html body #overview-view .laitik-tip { grid-column: span 6; grid-row: auto; }
  html body #proxy-view > :is(.proxy-route-test, .dedicated-diagnostics),
  html body #files-view > :is(.dedicated-diagnostics, .storage-card),
  html body #service-view > :is(.service-history, .service-facts) { grid-column: 1 / -1; }
  html body :is(.konica-layout, .sms-gateway-layout, .monitoring-grid,
    .printer-layout, .settings-layout, .service-guide-layout) { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 760px) {
  html body .app-view:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  html body .app-view > *,
  html body #overview-view :is(.primary-column, .right-rail) > * { grid-column: 1 / -1 !important; grid-row: auto; }
  html body :is(.backup-layout, .storage-health-columns, .printer-layout,
    .xerox-bottom-grid, .konica-layout, .sms-gateway-layout, .virtual-machine-grid,
    .website-grid, .network-grid, .security-layout, .event-detail-layout,
    .settings-layout, .service-guide-layout, .power-page-grid, .monitoring-grid) { grid-template-columns: minmax(0, 1fr); }
  html body :is(.backup-layout, .printer-layout, .konica-layout, .monitoring-grid,
    .power-page-grid, .security-layout) > * { grid-column: auto; }
  html body .status-hero { grid-template-columns: 90px minmax(0, 1fr); padding: 16px; }
  html body .status-hero .vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .status-hero .vital:last-child { grid-column: 1 / -1; }
  html body .metrics-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  html body .metric-item { border: 0; padding: 8px; }
  html body .metric-item:last-child { grid-column: 1 / -1; }
  html body .services-section .service-table-head { display: none; }
  html body .services-section .service-row { grid-template-columns: minmax(0, 1fr) auto; padding: 14px; }
  html body .services-section .service-row :is(.service-name, .detail-cell) { grid-column: 1; }
  html body .services-section .service-row .status-cell { grid-column: 1; }
  html body .services-section .service-row .availability-cell { grid-column: 2; grid-row: 2; }
  html body .services-section .service-row > button { grid-column: 2; grid-row: 1; }
  html body .proxy-route-test-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  html body .kb-dashboard, html body .article-layout { grid-template-columns: minmax(0, 1fr); }
  html body .kb-sidebar { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 16px; }
  html body .kb-topbar { flex-wrap: wrap; height: auto; min-height: 64px; gap: 10px; padding-block: 10px; }
  html body .sidebar { min-height: 0; overflow-y: auto; }
  html body :is(.files-hero, .catalog-heading) { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html body *, html body *::before, html body *::after { scroll-behavior: auto; transition-duration: 0s; animation-duration: 0s; }
}
@media (forced-colors: active) {
  html body .app-view :is(section, article), html body :is(.catalog-card, .case-card, .login-card) { border-color: CanvasText; background: Canvas; }
}
/* Content remains readable inside a narrow desktop tile. */
html body .sidebar { min-height: 0; overflow-y: auto; }
html body .key-metrics .metrics-strip {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 10px; overflow: visible;
}
html body .metric-item { border: 0; border-radius: 10px; background: var(--bento-canvas); }
html body .metric-item :is(small, strong, em) { white-space: normal; overflow: visible; text-overflow: clip; }
html body .status-hero .vitals { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
html body .vital :is(strong, small) { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
html body .vital-value strong { min-width: 0; }
html body .vital > small { padding-inline-start: 0; margin-top: 5px; }
html body .security-summary-grid > article { min-width: 0; border: 1px solid var(--bento-line); border-radius: 14px; background: #fff; padding: 18px; }
@container (max-width: 760px) {
  html body .status-hero .vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .key-metrics .metrics-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html body .tailscale-local-card { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
html body .tailscale-local-card > .tailscale-device-name { grid-column: 1 / -1; }
html body .tailscale-nodes { container-type: inline-size; }
html body :is(.tailscale-table-head, .tailscale-node) { grid-template-columns: minmax(0, 1.6fr) minmax(0, .65fr) minmax(0, .85fr) minmax(0, 1fr) minmax(0, .85fr); }
@container (max-width: 850px) {
  html body .tailscale-table-head { display: none; }
  html body .tailscale-node { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html body .tailscale-node-device { grid-column: 1 / -1; }
  html body .tailscale-node :is(code, time, strong, small) { overflow-wrap: anywhere; white-space: normal; }
}
html body .share-card { grid-template-columns: auto minmax(0, 1fr); }
html body .share-main, html body .share-main > * { min-width: 0; }
html body .share-main > div { flex-wrap: wrap; }
html body .share-main code { display: block; white-space: normal; overflow-wrap: anywhere; }
html body .storage-card { grid-template-columns: auto minmax(0, 1fr); }
html body .storage-card .storage-meter { grid-column: 1 / -1; text-align: left; }
html body .vital-chevron { display: none; }
html body .key-metrics .metrics-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body .key-metrics .metric-item:last-child { grid-column: span 2; }
@container (max-width: 760px) {
  html body .key-metrics .metrics-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .key-metrics .metric-item:last-child { grid-column: 1 / -1; }
}
/* The mascot owns its grid cell; status tiles never cover the character. */
html body .status-hero {
  grid-template-columns: clamp(140px, 22%, 220px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 16px;
  min-height: 240px;
  align-items: center;
}
html body .status-hero .hero-mascot {
  position: static;
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: end;
  width: 100%;
  height: auto;
  max-height: 280px;
  margin: 0;
  object-fit: contain;
  transform: none;
}
html body .status-hero .hero-copy {
  grid-column: 2;
  grid-row: 1;
  padding: 0;
}
html body .status-hero .vitals {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}
@container (max-width: 760px) {
  html body .status-hero { grid-template-columns: clamp(80px, 24%, 130px) minmax(0, 1fr); min-height: 0; }
  html body .status-hero .hero-mascot { grid-row: 1; align-self: center; max-height: 160px; }
  html body .status-hero .vitals { grid-column: 1 / -1; grid-row: 2; }
}
html body .status-hero .hero-mascot { align-self: center; }
html body .status-hero .vitals { display: flex; flex-wrap: wrap; gap: 8px; }
html body .status-hero .vital { flex: 1 1 140px; }
@container (max-width: 760px) {
  html body .status-hero .vitals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Summary rows are layout containers, never a connected card surface. */
html body .app-view :is(.service-current, .virtual-machine-vitals,
  .monitoring-vitals, .security-summary-grid) {
  gap: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body .app-view :is(.service-current, .virtual-machine-vitals,
  .monitoring-vitals, .security-summary-grid) > :is(div, article) {
  border: 1px solid var(--bento-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(32, 38, 52, .055);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (forced-colors: active) {
  html body .app-view :is(.service-current, .virtual-machine-vitals,
    .monitoring-vitals, .security-summary-grid) > :is(div, article) {
    background: Canvas; border-color: CanvasText; box-shadow: none;
  }
}
/* Anchor the character's cutout to the banner edge, not in mid-air. */
html body .status-hero .hero-mascot {
  align-self: end;
  transform: translateY(16px);
}
@container (max-width: 760px) {
  html body .status-hero .hero-mascot {
    align-self: center;
    transform: none;
  }
}
/* Use the whole monitor; the supporting rail does not grow with the canvas. */
html body .app-view:not([hidden]) { max-width: none; margin-inline: 0; }
@container (min-width: 961px) {
  html body #overview-view { grid-template-columns: minmax(0, 1fr) clamp(300px, 24%, 380px); }
  html body #overview-view :is(.status-hero, .key-metrics, .services-section) { grid-column: 1; }
  html body #overview-view :is(.activity-panel, .laitik-tip) { grid-column: 2; }
}
/* Proxy: four equal work areas instead of an uneven 8+4 composition. */
@container (min-width: 961px) {
  html body #proxy-view > :is(.proxy-route-test, .dedicated-diagnostics,
    .proxy-access, .public-domain-add) {
    grid-column: span 6;
    align-self: stretch;
  }
}
html body #proxy-view > :is(.proxy-route-test, .dedicated-diagnostics,
  .proxy-access, .public-domain-add) {
  padding: var(--bento-pad);
  border: 1px solid var(--bento-line);
  border-radius: var(--bento-radius);
  background: #fff;
  box-shadow: 0 3px 12px rgba(32, 38, 52, .055);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body #proxy-diagnostics .service-current { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html body #proxy-view .public-domain-add { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
html body #proxy-view .public-domain-add form { width: 100%; max-width: none; }
html body #proxy-view .public-domain-add textarea { width: 100%; min-height: 100px; }
html body #proxy-view .public-domain-add .form-actions { justify-content: flex-start; }
@container (max-width: 1120px) {
  html body #proxy-diagnostics .service-current { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Power: a stable six-metric strip and two balanced pairs of work panels. */
html body #power-view .power-current { grid-template-columns: repeat(6, minmax(0, 1fr)); }
html body #power-view > :is(.battery-health, .battery-trends) {
  grid-column: span 6;
  align-self: stretch;
}
html body #power-view :is(.battery-health, .battery-trends, .power-period,
  .power-protection, .power-history, .host-beszel) {
  padding: var(--bento-pad);
  border: 1px solid var(--bento-line);
  border-radius: var(--bento-radius);
  background: #fff;
  box-shadow: 0 3px 12px rgba(32, 38, 52, .055);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body #power-view .battery-health {
  grid-template-columns: 68px minmax(0, 1fr);
  align-content: start;
  align-items: start;
  gap: 20px;
}
html body #power-view .battery-health-copy { min-width: 0; }
html body #power-view .battery-health-copy h2 { font-size: 1.125rem; line-height: 1.4; }
html body #power-view .battery-health-facts {
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--bento-line);
}
html body #power-view .battery-health-facts > div { min-width: 0; padding: 0; border: 0; }
html body #power-view .battery-health-facts dd { overflow-wrap: anywhere; }
html body #power-view .battery-health > .button { grid-column: 1 / -1; justify-self: start; }
html body #power-view .power-page-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
html body #power-view .power-period-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (max-width: 1120px) {
  html body #power-view .power-current { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 960px) {
  html body #power-view > :is(.battery-health, .battery-trends) { grid-column: 1 / -1; }
  html body #power-view .power-page-grid { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 760px) {
  html body #power-view .power-current { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body #power-view .battery-health-facts { grid-template-columns: minmax(0, 1fr); }
  html body #power-view .battery-health-facts > div + div { padding-top: 12px; border-top: 1px solid var(--bento-line); }
  html body #power-view .power-period-stats { grid-template-columns: minmax(0, 1fr); }
  html body #power-view .power-period-stats > span { border: 0; border-bottom: 1px solid var(--bento-line); }
}
/* Keep the full archive, including its heading, on one surface. */
html body #backups-view .backup-files {
  padding: var(--bento-pad);
  border: 1px solid var(--bento-line);
  border-radius: var(--bento-radius);
  background: #fff;
  box-shadow: 0 3px 12px rgba(32, 38, 52, .055);
}
html body #backups-view .backup-files > .section-heading { margin-top: 0; }
/* Reset legacy 12-column spans inside the new two-column security layout. */
html body #security-view .security-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
html body #security-view .security-layout > .security-panel { grid-column: auto; }
html body #security-view > .security-report-panel { grid-column: 1 / -1; }
html body #security-view .security-report-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body #security-view .security-report-search { grid-column: 1 / -1; }
/* A definite plot height lets the percentage-sized columns resolve in Flexbox. */
html body #security-report-chart > button { height: 127px; flex-shrink: 0; }
html body #security-report-chart .security-report-chart-column { flex-shrink: 0; }
@container (max-width: 960px) {
  html body #security-view .security-layout { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 760px) {
  html body #security-view .security-report-filters { grid-template-columns: minmax(0, 1fr); }
}
html body #security-view .security-report-columns > div { min-width: 0; }
html body #security-view .security-report-rank { min-width: 0; max-width: 100%; }
html body #security-view .security-report-rank > span { min-width: 0; overflow-wrap: anywhere; }
/* Connection rows respond to their card width, including desktop split layouts. */
html body #proxy-view .proxy-access { container: proxy-connections / inline-size; }
html body #proxy-view .proxy-access-row {
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 18px;
  align-items: start;
}
html body #proxy-view .proxy-access-row > * { min-width: 0; }
html body #proxy-view .proxy-access-row dl {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}
html body #proxy-view .proxy-access-row dl > div { min-width: 0; }
html body #proxy-view .proxy-access-row dd { overflow-wrap: anywhere; }
html body #proxy-view .proxy-access-copy {
  grid-column: 2 / -1;
  grid-row: auto;
  grid-template-columns: minmax(0, 1fr) auto;
}
html body #proxy-view .proxy-access-copy > code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
html body #proxy-view .proxy-access-copy .button {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  margin-top: 0;
}
@container proxy-connections (max-width: 540px) {
  html body #proxy-view .proxy-access-row { grid-template-columns: 38px minmax(0, 1fr); }
  html body #proxy-view .proxy-access-row dl {
    grid-column: 1 / -1;
    grid-row: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-top: 12px;
    border-top: 1px solid var(--bento-line);
  }
  html body #proxy-view .proxy-access-row dl > div:nth-child(3) { grid-column: 1 / -1; }
  html body #proxy-view .proxy-access-copy { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
  html body #proxy-view .proxy-access-copy .button {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
    margin-top: 8px;
  }
}