/* flexpacksweg.pro control room — dark navy/slate presentation layer.
   Load after assets.css, theme.css, portal.css and redesign-20261017.css. */

:root {
  color-scheme: dark;
  --bg: #111a25;
  --bg2: #152130;
  --panel: #1a2838;
  --panel-solid: #1a2838;
  --border: #304357;
  --border2: #40566d;
  --text: #e6edf4;
  --muted: #a8b7c7;
  --dim: #8294a7;
  --teal: #46b8d4;
  --teal-d: #258aa8;
  --amber: #e5a45a;
  --emerald: #58c59a;
  --rose: #f07878;
  --sky: #63a9e9;
  --violet: #a88bdd;
  --glow-t: rgba(70, 184, 212, .14);
  --glow-a: rgba(229, 164, 90, .12);
  --ink: #e6edf4;
  --paper: #111a25;
  --navy: #111c29;
  --navy-soft: #1a2a3a;
  --line: #304357;
  --accent: #46b8d4;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  background: #111a25 !important;
  color: #e6edf4 !important;
  color-scheme: dark;
}

body { overflow-x: hidden; }
::selection { background: #24607a; color: #fff; }
::-webkit-scrollbar-track { background: #121d29; }
::-webkit-scrollbar-thumb { border-color: #121d29; background: #40566a; }
::-webkit-scrollbar-thumb:hover { background: #58738a; }

:where(a, button, [role="button"], .nav, .toggle, input, select, textarea, summary):focus-visible {
  outline: 2px solid #59c6e2 !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(64, 184, 211, .18) !important;
}

/* Application frame and compact navigation */
#app.portal-shell,
.portal-shell {
  background: #111a25 !important;
  color: #e6edf4 !important;
}
#app:not(.hidden) { display: flex; }
#app.hidden,
#loginScreen.hidden { display: none !important; }
#mainContent,
.workspace {
  background: #111a25 !important;
  color: #e6edf4 !important;
}

#sidebar,
.sidebar {
  border-right: 1px solid #293a4b !important;
  background: #111c29 !important;
  color: #dce5ed !important;
  box-shadow: 7px 0 24px rgba(3, 9, 16, .12) !important;
}
#sidebar > div:first-child,
.sidebar-brand {
  border-bottom-color: #293b4e !important;
  background: #111c29 !important;
}
.brand-mark,
#sidebar > div:first-child > div:first-child {
  border: 1px solid #3b7289 !important;
  border-radius: 7px !important;
  background: #1b3b4d !important;
  color: #7bd2e4 !important;
}
.brand-title,
#sidebar .brand-t > div:first-child { color: #f0f4f6 !important; }
.brand-caption,
#sidebar .brand-t > div:last-child { color: #8398aa !important; }
#sidebarToggle {
  border-color: #30465a !important;
  background: transparent !important;
  color: #9cadbd !important;
}
#sidebarToggle:hover { border-color: #45657d !important; background: #1b3042 !important; color: #fff !important; }
#sidebar nav .sec,
#sidebar .sec { color: #75899c !important; }
#sidebar .nav {
  border-color: transparent !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: #b2c0ce !important;
}
#sidebar .nav:hover {
  border-color: #2e465b !important;
  background: #1a2b3b !important;
  color: #f1f6f8 !important;
}
#sidebar .nav.active {
  border-color: #304b5f !important;
  border-left: 3px solid #50c1dd !important;
  background: #203648 !important;
  color: #f4f8fa !important;
}
#sidebar .nav i { color: #89a1b5 !important; }
#sidebar .nav.active i { color: #63c9e2 !important; }
#sidebar .nav .kbd { border-color: #3b5164; color: #93a5b5 !important; }
#sidebar > div:last-child,
.sidebar-footer { border-top-color: #293b4e !important; }
#sidebar > div:last-child .nav[onclick*="logout"] { color: #efa2a0 !important; }
#sidebar > div:last-child .nav[onclick*="logout"] i { color: #e78685 !important; }

/* Top bar */
#mainContent > header,
.workspace-header {
  border-bottom: 1px solid #2a3a4b !important;
  background: rgba(17, 26, 37, .96) !important;
  color: #e6edf4 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
#viewTitle,
.workspace-context { color: #edf3f7 !important; }
#crumb,
.workspace-status { color: #8094a8 !important; }
#mobileNavToggle {
  border-color: #34495d !important;
  border-radius: 5px !important;
  background: #1a2938 !important;
  color: #c5d4df !important;
}
#paletteTrigger {
  border-color: #34495d !important;
  border-radius: 5px !important;
  background: #172433 !important;
  color: #9aabba !important;
}
#paletteTrigger:hover { border-color: #4b7188 !important; background: #1c3042 !important; }
#paletteTrigger > span { border-color: #3b4e60 !important; background: #1b2b3a !important; color: #91a5b6 !important; }
.chip {
  border-color: #344a5e !important;
  border-radius: 4px !important;
  background: #182737 !important;
  color: #b7c5d1 !important;
}
#notificationButton {
  border-color: #34495d !important;
  border-radius: 5px !important;
  background: #182737 !important;
  color: #adc0ce !important;
}
#notificationButton:hover { background: #20374a !important; color: #fff !important; }
#mainContent > header > div:last-child > div:last-child {
  border-color: #4b6479 !important;
  background: #253c50 !important;
  color: #e5eef4 !important;
}
.dot { box-shadow: none !important; }

#mainContent > .p-6,
.workspace-body { color: #e2eaf1 !important; }
.view { color: #e2eaf1 !important; }
.view > h1 {
  color: #f0f4f7 !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  letter-spacing: -.025em;
}
.view > h1 + p { color: #9babb9 !important; }
.page-kicker,
.sect { color: #8ea2b4 !important; }
.view p { color: #aab8c6 !important; }
.view .text-gray-400 { color: #94a5b5 !important; }
.view .text-white { color: #edf3f7 !important; }
.view .mono,
.view code,
.view kbd { color: #c3d2dd; }

/* Existing feature panels across every view */
.glass {
  border: 1px solid #304255 !important;
  border-radius: 7px !important;
  background: #192737 !important;
  color: #e0e9f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .13) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.glass-hover:hover {
  transform: none !important;
  border-color: #49647b !important;
  background: #1c2c3c !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .2) !important;
}
.view > .glass { padding: 17px 18px !important; }
.view > .glass > h3 {
  border-bottom: 1px solid #2c3f52;
  color: #dce8f0 !important;
}
.view > .glass > h4 { color: #adc0ce !important; }

/* Tables stay dense and scroll inside their own frame. */
.view .overflow-x-auto {
  border-color: #304457;
  border-radius: 5px;
  background: #172433;
}
.view table {
  background: #172433;
  color: #dce6ee;
}
.view th {
  border-bottom-color: #354a5e !important;
  background: #223548 !important;
  color: #aebfcd !important;
}
.view td {
  border-bottom-color: #293c4e !important;
  color: #c4d1dc !important;
}
.view tbody tr { background: #192737; }
.view tbody tr:nth-child(even) { background: #1c2b3b; }
.view tbody tr:hover { background: #24384b; }
.view td:first-child { color: #e1eaf0 !important; }

/* Inputs, actions, toggles, and status controls */
input,
select,
textarea {
  border-color: #405367 !important;
  border-radius: 5px !important;
  background: #111e2b !important;
  color: #e1eaf0 !important;
  color-scheme: dark;
}
select option { background: #172433 !important; color: #e1eaf0 !important; }
input::placeholder,
textarea::placeholder { color: #8092a3 !important; }
input:focus,
select:focus,
textarea:focus { border-color: #4db9d4 !important; box-shadow: 0 0 0 2px rgba(77, 185, 212, .16) !important; }
.btn {
  border-color: #40566b !important;
  border-radius: 5px !important;
  background: #223447 !important;
  color: #d8e4ec !important;
  box-shadow: none !important;
}
.btn:hover { border-color: #5a7891 !important; background: #2a4358 !important; color: #fff !important; }
.btn:active { background: #304a5e !important; }
.btn-teal {
  border-color: #2e92ac !important;
  background: #187b96 !important;
  color: #fff !important;
}
.btn-teal:hover { border-color: #54bfd9 !important; background: #2091ad !important; }
.btn-ghost { border-color: #3b5063 !important; background: transparent !important; }
.btn-rose { border-color: #704449 !important; background: #3b2931 !important; color: #ffb1a9 !important; }
.btn-rose:hover { border-color: #a65d61 !important; background: #503139 !important; color: #ffd3cc !important; }
.btn-active-start { border-color: #376950 !important; background: #1d3d35 !important; color: #91dfb9 !important; }
.btn-active-stop { border-color: #78464a !important; background: #432c34 !important; color: #ffb2aa !important; }
.toggle { border-color: #546678; background: #344558; }
.toggle.on { border-color: #258fa9; background: #258fa9; }
.statnum { color: #79cce0; }
.gauge { color: #58bed5; }
.gauge .track { stroke: #304355 !important; }
.gauge .fill { stroke: #55bcd4; }
.gauge .val { color: #dceaf1; }
progress { border-color: #34495d; background: #111e2b; accent-color: #48b6d1; }
progress::-webkit-progress-bar { background: #111e2b; }
progress::-webkit-progress-value { background: #48b6d1; }
progress::-moz-progress-bar { background: #48b6d1; }

/* New monitoring overview */
.monitor-overview {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 20px;
}
.monitor-overview h1,
.monitor-overview .monitor-title {
  margin: 0 0 5px !important;
  color: #f0f5f8 !important;
  font-size: clamp(24px, 2.4vw, 32px) !important;
  font-weight: 700 !important;
  letter-spacing: -.035em;
  line-height: 1.15;
}
.monitor-overview p,
.monitor-overview .monitor-detail {
  margin: 0 !important;
  color: #92a4b5 !important;
  font-size: 12px !important;
  line-height: 1.5;
}
.monitor-overview .page-kicker { margin-bottom: 6px; color: #66c4d9 !important; }

.monitor-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.monitor-summary > * {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #304457;
  border-radius: 6px;
  background: #192737;
}
.monitor-summary strong,
.monitor-summary b { color: #edf3f7; font-size: 14px; font-weight: 650; }
.monitor-summary small,
.monitor-summary .summary-label { color: #91a3b4; font-size: 10px; }
.monitor-summary i { color: #63c6dc; }
.monitor-summary .summary-value { margin-left: auto; color: #e9f0f5; font-variant-numeric: tabular-nums; }

.monitor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 16px;
}
.host-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #32485b;
  border-radius: 7px;
  background: #1a2939;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
}
.host-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #304356;
}
.host-card-title {
  margin: 0;
  color: #eef4f7;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
}
.host-card-meta {
  margin-top: 4px;
  color: #8297a9;
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 10px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.host-card-state {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid #315b50;
  border-radius: 4px;
  background: #1b3934;
  color: #8fdbb8;
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}
.host-card-state::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #63d2a1;
  content: "";
}
.host-card-state.is-warning,
.host-card-state.warning { border-color: #6b573b; background: #3b3225; color: #edc385; }
.host-card-state.is-warning::before,
.host-card-state.warning::before { background: #e5ad5c; }
.host-card-state.is-down,
.host-card-state.down,
.host-card-state.is-error { border-color: #70454b; background: #402c34; color: #f2a6a4; }
.host-card-state.is-down::before,
.host-card-state.down::before,
.host-card-state.is-error::before { background: #ec777a; }
.host-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.host-metric {
  min-width: 0;
  padding: 10px;
  border: 1px solid #2d4255;
  border-radius: 5px;
  background: #142231;
}
.metric-label {
  display: block;
  margin-bottom: 5px;
  color: #91a5b7;
  font-size: 9px;
  font-weight: 650;
  letter-spacing: .075em;
  line-height: 1.35;
  text-transform: uppercase;
}
.metric-value {
  display: block;
  color: #edf4f7;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.meter {
  display: block;
  height: 4px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: #2c3e50;
}
.meter > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #49b7d2;
  transition: width .3s ease;
}
.host-card:nth-child(2n) .meter > span { background: #43d9b1; }
.host-metric[data-state="warning"] .meter > span { background: #e4a651; }
.host-metric[data-state="critical"] .meter > span { background: #e87677; }
.host-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 7px 14px;
  padding-top: 10px;
  border-top: 1px solid #2d4153;
  color: #91a3b4;
  font-size: 10px;
}
.host-card-footer a { color: #67c5dc; text-decoration: none; }
.host-card-footer a:hover { color: #a5e8f5; text-decoration: underline; }

.monitor-chart {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid #32475a;
  border-radius: 7px;
  background: #1a2939;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}
.chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}
.chart-toolbar h2,
.chart-toolbar h3,
.chart-toolbar .chart-title {
  margin: 0;
  color: #e8f0f4;
  font-size: 14px;
  font-weight: 650;
}
.chart-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.chart-controls button,
.chart-controls [role="button"] {
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #3c5165;
  border-radius: 4px;
  background: #203246;
  color: #aebdca;
  font-size: 10px;
  cursor: pointer;
}
.chart-controls button:hover,
.chart-controls [role="button"]:hover { border-color: #588097; background: #294155; color: #eff6f8; }
.chart-controls button.active,
.chart-controls button[aria-pressed="true"],
.chart-controls .active {
  border-color: #348ca6 !important;
  background: #1f566b !important;
  color: #e9faff !important;
}
.chart-controls select { min-height: 30px; padding: 4px 8px !important; font-size: 10px !important; }
.chart-plot {
  min-height: 215px;
  padding: 8px 8px 2px;
  overflow: hidden;
  border: 1px solid #2d4052;
  border-radius: 5px;
  background: #142231;
}
.chart-plot svg { display: block; width: 100%; height: 230px; min-height: 190px; overflow: visible; }
.chart-plot svg text { fill: #8fa2b4 !important; font-size: 10px; }
.chart-plot svg line,
.chart-plot svg .grid,
.chart-plot svg .gridline { stroke: #2b3d4e; }
.chart-plot svg circle { stroke: #142231; stroke-width: 2; }
.chart-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px 18px;
  padding: 10px 2px 2px;
  color: #a7b6c3;
  font-size: 10px;
}
.chart-legend > * { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i,
.chart-legend .legend-dot { width: 8px; height: 8px; border-radius: 50%; background: #51bdd4; }
.chart-note { margin: 8px 0 0 !important; color: #7f93a6 !important; font-size: 10px !important; }

.monitor-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.monitor-bottom > .glass,
.monitor-bottom > section,
.monitor-bottom > article {
  min-width: 0;
  margin: 0 !important;
  padding: 15px !important;
  border: 1px solid #304457 !important;
  border-radius: 7px !important;
  background: #192737 !important;
}
.monitor-tools { margin-top: 14px; }

/* Terminal, logs, and Ollama remain readable as focused work surfaces. */
.term,
.admin-terminal {
  border-color: #2c4358 !important;
  border-radius: 5px !important;
  background: #0d1722 !important;
  color: #d8e4ec !important;
}
.admin-terminal-bar { border-color: #30465a !important; background: #1a2b3c !important; }
.admin-terminal-tab,
.admin-terminal-host.active { background: #101d2b !important; color: #ecf3f7 !important; }
.admin-terminal-host { color: #a6b5c2 !important; }
.admin-terminal-output,
.admin-terminal-inputbar { background: #101923 !important; color: #d9e4eb !important; }
.admin-terminal-input { background: transparent !important; color: #f0f5f7 !important; }
.admin-terminal-prompt { color: #69c8dd !important; }
.ollama-app {
  border-color: #304456;
  border-radius: 6px;
  background: #172433;
  color: #dce7ee;
}
.ollama-side { border-right-color: #2d4052; background: #142230 !important; color: #c7d4df !important; }
.ollama-side-title { color: #e0eaf0 !important; }
.ollama-new-chat { border-color: #40566a !important; background: #1e3144 !important; color: #dce8ef !important; }
.ollama-history-title { color: #8094a6 !important; }
.ollama-history-row.active,
.ollama-history-row:hover { background: #23374a !important; }
.ollama-history-open,
.ollama-history-remove { color: #a8bac8 !important; }
.ollama-main,
.ollama-chat-pane { background: #172433 !important; }
.ollama-toolbar { border-bottom-color: #2d4052 !important; background: #192939; }
.ollama-toolbar .btn { color: #bdccd6 !important; }
.ollama-status,
.ollama-empty,
.ollama-empty p { color: #9aabba !important; }
.ollama-empty h2 { color: #e4edf2 !important; }
.ollama-emblem { border-color: #3b5266; background: #203548 !important; color: #6bc7dc !important; }
.ollama-message { color: #d9e4eb; }
.ollama-message.user { border-color: #355267; background: #1d3548 !important; color: #e3edf2; }
.ollama-message-role { color: #8094a7 !important; }
.ollama-message-body { color: #d4e0e8; }
.ollama-thinking,
.ollama-thinking-text { color: #9babb9 !important; }
.ollama-thinking-details { border-color: #364b5e !important; background: #1b2a3a !important; }
.ollama-thinking-details summary { color: #bdcbd5 !important; }
.ollama-composer { border-color: #40576b !important; background: #111e2b !important; box-shadow: none; }
.ollama-chat-input { background: transparent !important; color: #e2ebf0 !important; }
.ollama-model-select { border-color: #3c5266 !important; background: #1a2a3a !important; color: #cad8e2 !important; }
.ollama-send { background: #187b96 !important; color: #fff !important; }

/* Harmonized secure login */
#loginScreen:not(.hidden) {
  display: grid;
  min-height: 100dvh;
  padding: 28px !important;
  background: #111a25 !important;
  color: #e6edf4 !important;
}
.login-layout {
  width: min(100%, 1000px);
  min-height: 500px;
  border: 1px solid #304457;
  border-radius: 8px;
  background: #172433;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .28);
}
.login-story {
  background: #142638;
  color: #e9f0f4;
}
.login-story .login-monogram,
.login-story .brand-mark {
  border-color: #3c7186 !important;
  background: #1c3c50 !important;
  color: #81d5e5 !important;
}
.login-eyebrow { color: #71c9de; }
.login-heading { color: #f1f6f8; }
.login-description { color: #aabcc9; }
.login-story-grid { border-color: #344e62; background: #344e62; }
.login-story-grid > * { background: #183044; color: #d6e2e9; }
.login-panel { background: #192837; }
.login-panel .login-eyebrow { color: #83a0b3; }
.login-panel .login-heading,
#loginScreen .login-card h1 { color: #edf3f6 !important; }
.login-panel .login-description,
#loginScreen .login-card .text-center p { color: #a2b2bf !important; }
#loginScreen .login-card h1 span { color: #63c9df !important; }
#loginScreen .login-card .space-y-4 { color: #a7b8c5; }
#loginScreen .login-card .space-y-4 label { color: #b4c2cc !important; }
#loginScreen .login-card .space-y-4 > p { color: #91a4b3 !important; }
#loginScreen .login-card .space-y-4 form > p[role="alert"] { color: #ff9e9a !important; }
.login-footnote { color: #8ea1af; }

/* Palette, dialog, toast and runtime-created notices */
#palette { background: rgba(5, 11, 18, .7) !important; }
#palette > .glass {
  border-color: #40576b !important;
  border-radius: 7px !important;
  background: #172433 !important;
  color: #e3edf2 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .42) !important;
}
#palette > .glass > div:first-child { border-color: #304457 !important; }
#palette > .glass > div:first-child > i { color: #64c8dc !important; }
.pal-item { color: #c0cfda !important; }
.pal-item:hover,
.pal-item.sel { background: #22384b !important; color: #eff8fb !important; }
.pal-item .tag { border-color: #3a4e61; color: #92a5b5; }
dialog.glass {
  border-color: #3a5064 !important;
  border-radius: 7px !important;
  background: #192838 !important;
  color: #dfe8ee !important;
  box-shadow: 0 20px 65px rgba(0, 0, 0, .48) !important;
}
dialog.glass::backdrop { background: rgba(3, 9, 16, .7); }
dialog.glass h3 { color: #edf3f6 !important; }
dialog.glass label { color: #b5c3ce; }
dialog.glass .text-white { color: #e4edf2 !important; }
dialog.glass code { border-color: #3b5164; background: #111e2b; color: #74cde0; }
#toasts .toast,
.toast {
  border-color: #3b5265;
  border-left-color: #55bfd8;
  border-radius: 5px;
  background: #1c2d3e;
  color: #e2ebf0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.notification {
  border: 1px solid #40566b !important;
  border-radius: 6px !important;
  background: #1a2a39 !important;
  color: #e4edf2 !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45) !important;
}
.notification-title { color: #edf4f7 !important; }
.notification-body { color: #c0cdd6 !important; }
.notification-close { color: #b6c4ce !important; }

@media (max-width: 1023px) {
  #sidebar {
    border-right-color: #30465b !important;
    background: #111c29 !important;
    box-shadow: 15px 0 38px rgba(0, 0, 0, .4) !important;
  }
  #sidebarBackdrop { background: rgba(4, 10, 16, .66) !important; }
  #monitorSummary,
  .monitor-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .monitor-bottom { grid-template-columns: 1fr; }
  #mainContent > header,
  .workspace-header { background: rgba(17, 26, 37, .97) !important; }
}

@media (max-width: 767px) {
  #loginScreen:not(.hidden) { padding: 16px !important; }
  .login-layout { min-height: 0; grid-template-columns: 1fr; }
  .login-story { min-height: 205px; }
  .monitor-overview { align-items: flex-start; flex-direction: column; gap: 8px; margin-bottom: 15px; }
  .monitor-summary { gap: 8px; }
  .monitor-summary > * { padding: 10px 11px; }
  .monitor-grid { grid-template-columns: 1fr; gap: 10px; }
  .host-card { padding: 13px; }
  .host-metric { padding: 8px; }
  .metric-value { font-size: 18px; }
  .monitor-chart { padding: 12px; }
  .chart-toolbar { align-items: flex-start; flex-direction: column; }
  .chart-plot { min-height: 180px; }
  .chart-plot svg { min-height: 165px; }
}

@media (max-width: 420px) {
  .monitor-summary > * { padding: 9px; }
  .host-card-header { gap: 7px; }
  .host-card-title { font-size: 14px; }
  .host-card-state { gap: 5px; padding: 4px 6px; font-size: 9px; }
  .host-metrics { gap: 6px; }
  .host-metric { padding: 7px; }
  .metric-label { font-size: 8px; letter-spacing: .04em; }
  .metric-value { font-size: 16px; }
  .chart-controls { gap: 4px; }
  .chart-controls button,
  .chart-controls [role="button"] { padding-right: 7px; padding-left: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}