styles.css

@import url("website/anxos-design-system.css");

:root {
  color-scheme: dark;
  --anx-font-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --titlebar-height: 42px;
  --shell-gap: 10px;
  --shell-radius: 18px;
  --sidebar-expanded-width: 248px;
  --sidebar-collapsed-width: 72px;
  --sidebar-transition: 220ms var(--anx-ease-standard);
  --app-section-gap: 16px;
  --app-card-padding: 16px;
  --app-control-min-height: 34px;
  --scrollbar-track: rgba(11, 8, 18, 0.9);
  --scrollbar-thumb: rgba(182, 108, 255, 0.72);
  --scrollbar-thumb-hover: rgba(206, 150, 255, 0.9);
  font-family: var(--anx-font-sans);
  font-size: var(--app-font-scale, 100%);
}

* {
  box-sizing: border-box;
}

::selection {
  background: rgba(182, 108, 255, 0.34);
  color: var(--text);
}

html,
body {
  height: 100%;
  min-height: 100vh;
  scroll-behavior: smooth;
}

html[data-ui-density="compact"] .settings-section,
html[data-ui-density="compact"] .panel,
html[data-ui-density="compact"] .card {
  padding-block: 12px;
}

html[data-sidebar-density="compact"] .nav-item {
  min-height: 34px;
}

html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.01ms !important;
}

body {
  margin: 0;
  overflow: hidden;
  background: var(--anx-bg-app);
  color: var(--text);
  font-family: var(--anx-font-sans);
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  font: inherit;
  font-family: var(--anx-font-sans);
}

button {
  min-width: 0;
}

button svg,
a svg {
  flex: 0 0 auto;
}

button,
a,
input,
select,
textarea,
[role="button"] {
  transition-duration: 140ms;
  transition-timing-function: ease;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(206, 150, 255, 0.88);
  outline-offset: 2px;
  box-shadow: var(--anx-focus-ring);
}

.startup-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 35%, rgba(182, 108, 255, 0.24), transparent 24rem),
    var(--anx-bg-app);
  opacity: 1;
  transition: opacity 220ms ease, visibility 220ms ease;
  font-family: var(--anx-font-sans);
}

.startup-screen.is-exiting {
  visibility: hidden;
  opacity: 0;
}

.startup-card {
  display: grid;
  justify-items: center;
  width: min(420px, 100%);
  padding: 28px;
  border: 1px solid var(--anx-color-border-strong);
  border-radius: var(--anx-radius-lg);
  background: var(--anx-surface-panel-subtle);
  box-shadow: var(--anx-shadow-dialog), var(--anx-shadow-inset), var(--anx-glow-sm);
  text-align: center;
}

.security-gate,
.local-setup-gate {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 2, 15, 0.94);
}

.security-gate-card,
.local-setup-card {
  display: grid;
  gap: 14px;
  width: min(440px, 100%);
  padding: 24px;
  border: 1px solid var(--anx-color-border-strong);
  border-radius: var(--anx-radius-lg);
  background: var(--anx-surface-glass-strong);
  box-shadow: var(--anx-shadow-dialog), var(--anx-shadow-inset);
}

.security-gate-card h1,
.security-gate-card p,
.local-setup-card h1,
.local-setup-card p {
  margin: 0;
}

.local-setup-card {
  justify-items: start;
  width: min(520px, 100%);
}

.local-setup-card .startup-logo {
  justify-self: start;
}

.security-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.9rem;
}

.security-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.nav-section {
  display: grid;
  gap: 6px;
  margin: 8px 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-section__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.nav-section__title small {
  border: 1px solid rgba(245, 196, 81, 0.45);
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--caution);
  font-size: 0.62rem;
}

.nav-item--owner {
  border-color: rgba(245, 196, 81, 0.28);
}

.startup-logo {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  box-shadow: 0 0 0 10px rgba(182, 108, 255, 0.08);
}

.startup-logo img {
  width: 48px;
  height: 48px;
  display: block;
}

.startup-card h1 {
  margin-bottom: 24px;
  font-size: 3rem;
}

.startup-status {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 22px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 10, 15, 0.48);
  text-align: left;
}

.startup-status strong,
.startup-status span:last-child {
  display: block;
}

.startup-status span:last-child {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.86rem;
}

.startup-spinner {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-soft);
  animation: startup-pulse 1.1s ease-out infinite;
}

@keyframes startup-pulse {
  70% {
    box-shadow: 0 0 0 12px rgba(182, 108, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(182, 108, 255, 0);
  }
}

.startup-steps {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 0.9rem;
  list-style: none;
  text-align: left;
}

.startup-steps li {
  display: flex;
  gap: 10px;
  align-items: center;
}

.startup-steps li::before {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  content: "";
}

.startup-steps li.is-active {
  color: var(--text);
}

.startup-steps li.is-active::before,
.startup-steps li.is-complete::before {
  background: var(--accent);
}

.startup-steps li.is-complete {
  color: var(--accent);
}

.app-shell {
  display: grid;
  grid-template-rows: var(--titlebar-height) minmax(0, 1fr);
  height: 100vh;
  min-height: 100vh;
  padding: var(--shell-gap);
  overflow: hidden;
  opacity: 1;
  transition: opacity 180ms ease;
}

.app-shell.is-loading {
  opacity: 0;
}

.app-titlebar {
  display: flex;
  align-items: stretch;
  min-height: var(--titlebar-height);
  overflow: hidden;
  border: 1px solid var(--anx-color-border-strong);
  border-bottom: none;
  border-radius: var(--shell-radius) var(--shell-radius) 0 0;
  background:
    linear-gradient(180deg, rgba(34, 16, 54, 0.92), rgba(13, 7, 24, 0.88)),
    var(--anx-surface-glass);
  box-shadow:
    var(--anx-shadow-inset),
    0 24px 72px rgba(0, 0, 0, 0.26),
    var(--anx-glow-xs);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  user-select: none;
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

.app-titlebar__drag {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 0 10px 0 12px;
}

.app-titlebar__brand {
  display: flex;
  flex: 0 1 190px;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.app-titlebar__brand-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(182, 108, 255, 0.24), rgba(182, 108, 255, 0.1));
  box-shadow: 0 0 0 1px rgba(182, 108, 255, 0.22), var(--anx-glow-xs);
}

.app-titlebar__brand-mark img {
  width: 18px;
  height: 18px;
  display: block;
}

.app-titlebar__brand-copy {
  min-width: 0;
}

.app-titlebar__brand-copy strong,
.app-titlebar__brand-copy span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-titlebar__brand-copy strong {
  font-size: 0.92rem;
  line-height: 1.1;
}

.app-titlebar__brand-copy span {
  margin-top: 2px;
  color: rgba(248, 245, 255, 0.58);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-titlebar__context {
  display: flex;
  flex: 1 1 auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  color: rgba(248, 245, 255, 0.9);
}

.app-titlebar__label {
  color: rgba(248, 245, 255, 0.5);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.app-titlebar__context strong {
  flex: 0 1 180px;
  min-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 700;
}

.app-titlebar__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 18px;
  background: rgba(182, 108, 255, 0.24);
}

.app-titlebar__search {
  display: inline-flex;
  flex: 0 1 210px;
  align-items: center;
  gap: 8px;
  min-width: 168px;
  max-width: 240px;
  min-height: 30px;
  padding: 4px 8px 4px 10px;
  border: 1px solid rgba(182, 108, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(248, 245, 255, 0.78);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  -webkit-app-region: no-drag;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.app-titlebar__search:hover,
.app-titlebar__search:focus-visible {
  border-color: rgba(206, 150, 255, 0.48);
  background: rgba(182, 108, 255, 0.14);
  color: var(--text);
  outline: none;
}

.app-titlebar__search svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-titlebar__search span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-titlebar__search kbd {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid rgba(248, 245, 255, 0.13);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  color: rgba(248, 245, 255, 0.58);
  font: 0.68rem/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.app-titlebar__search--command {
  flex-basis: 220px;
  min-width: 188px;
}

.app-titlebar__connection {
  display: inline-flex;
  flex: 0 1 auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid rgba(182, 108, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(248, 245, 255, 0.8);
  font-size: 0.76rem;
  font-weight: 700;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease;
}

.app-titlebar__connection-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 0 5px rgba(69, 224, 143, 0.12);
  transition:
    background 160ms ease,
    box-shadow 160ms ease;
}

.app-titlebar__connection.is-disconnected {
  border-color: rgba(255, 107, 138, 0.22);
  color: rgba(255, 214, 224, 0.92);
}

.app-titlebar__connection.is-disconnected .app-titlebar__connection-dot {
  background: var(--danger);
  box-shadow: 0 0 0 5px rgba(255, 107, 138, 0.14);
}

.app-titlebar__dev-badge {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
  align-items: center;
  min-width: max-content;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(182, 108, 255, 0.24);
  border-radius: 999px;
  background: rgba(182, 108, 255, 0.1);
  color: rgba(239, 228, 255, 0.92);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  -webkit-app-region: no-drag;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.app-titlebar__dev-badge:hover,
.app-titlebar__dev-badge:focus-visible {
  border-color: rgba(206, 150, 255, 0.48);
  background: rgba(182, 108, 255, 0.16);
  color: rgba(255, 255, 255, 0.96);
}

.app-titlebar__dev-icon {
  color: rgba(206, 150, 255, 0.95);
  font-size: 0.72rem;
  font-weight: 900;
}

.app-titlebar__dev-badge[data-dev-state="available"] {
  position: relative;
  border-color: rgba(245, 197, 92, 0.38);
  background: rgba(245, 197, 92, 0.13);
  color: #f8d990;
}

.app-titlebar__dev-badge[data-dev-state="available"]::after {
  position: absolute;
  top: 3px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #f5c55c;
  box-shadow: 0 0 0 0 rgba(245, 197, 92, 0.34);
  content: "";
  animation: devBadgePulse 1800ms ease-out infinite;
}

.app-titlebar__dev-badge[data-dev-state="updating"] {
  border-color: rgba(90, 199, 255, 0.34);
  background: rgba(90, 199, 255, 0.12);
  color: rgba(202, 236, 255, 0.96);
}

.app-titlebar__dev-badge[data-dev-state="restart-required"] {
  border-color: rgba(69, 224, 143, 0.36);
  background: rgba(69, 224, 143, 0.12);
  color: rgba(188, 255, 219, 0.96);
}

.app-titlebar__dev-badge[data-dev-state="error"] {
  border-color: rgba(255, 107, 138, 0.34);
  background: rgba(112, 26, 52, 0.24);
  color: rgba(255, 214, 224, 0.96);
}

.app-titlebar__dev-badge[hidden] {
  display: none;
}

@keyframes devBadgePulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 197, 92, 0.34); }
  80%, 100% { box-shadow: 0 0 0 7px rgba(245, 197, 92, 0); }
}

.app-titlebar__controls {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  margin-left: auto;
  -webkit-app-region: no-drag;
}

.app-titlebar__control {
  display: inline-grid;
  place-items: center;
  width: 46px;
  min-width: 46px;
  border: none;
  background: transparent;
  color: rgba(248, 245, 255, 0.72);
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.app-titlebar__control:hover,
.app-titlebar__control:focus-visible {
  background: rgba(182, 108, 255, 0.16);
  color: var(--text);
  outline: none;
}

.app-titlebar__control:active {
  transform: scale(0.96);
}

.app-titlebar__control svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.2;
}

.app-titlebar__control--maximize .app-titlebar__control-icon--restore {
  display: none;
}

.app-titlebar__control--maximize.is-maximized .app-titlebar__control-icon--maximize {
  display: none;
}

.app-titlebar__control--maximize.is-maximized .app-titlebar__control-icon--restore {
  display: block;
}

.app-titlebar__control--close:hover,
.app-titlebar__control--close:focus-visible {
  background: #e04a68;
  color: #fff4f7;
}

.app-workspace {
  display: flex;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--anx-color-border-strong);
  border-top: none;
  border-radius: 0 0 var(--shell-radius) var(--shell-radius);
  overflow: hidden;
  background:
    var(--anx-bg-circuit),
    rgba(7, 2, 15, 0.62);
  background-size: 34px 34px, 34px 34px, auto;
  box-shadow: var(--anx-shadow-dialog);
}

.sidebar {
  display: flex;
  flex-direction: column;
  flex: 0 0 var(--sidebar-expanded-width);
  min-width: 0;
  height: 100%;
  min-height: 0;
  width: var(--sidebar-expanded-width);
  overflow: visible;
  padding: 18px;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 0%, rgba(182, 108, 255, 0.12), transparent 18rem),
    rgba(8, 7, 15, 0.96);
  transition:
    width var(--sidebar-transition),
    flex-basis var(--sidebar-transition),
    max-width var(--sidebar-transition),
    min-width var(--sidebar-transition),
    padding var(--sidebar-transition),
    border-color var(--sidebar-transition),
    background var(--sidebar-transition);
}

.sidebar-header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 54px;
}

.brand-copy,
.sidebar-footer__copy,
.nav-item__label {
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  transition:
    max-width var(--sidebar-transition),
    opacity 160ms ease,
    transform 160ms ease,
    margin var(--sidebar-transition);
}

.brand-copy strong,
.brand-copy span,
.sidebar-footer__copy strong,
.sidebar-footer__copy span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(182, 108, 255, 0.22);
  border-radius: var(--anx-radius-md);
  background: linear-gradient(180deg, rgba(182, 108, 255, 0.2), rgba(182, 108, 255, 0.08));
  color: var(--accent);
  box-shadow: var(--anx-glow-ring);
  font-weight: 900;
}

.brand-mark img {
  width: 28px;
  height: 28px;
  display: block;
}

.sidebar-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(182, 108, 255, 0.18);
  border-radius: 12px;
  background: rgba(22, 12, 35, 0.82);
  color: rgba(248, 245, 255, 0.74);
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus-visible {
  border-color: rgba(182, 108, 255, 0.38);
  background: rgba(41, 20, 63, 0.92);
  color: var(--text);
  box-shadow: 0 0 20px rgba(182, 108, 255, 0.16);
  outline: none;
}

.sidebar-toggle:active {
  transform: translateY(1px);
}

.sidebar-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--sidebar-transition);
}

.brand strong,
.brand span,
.sidebar-footer strong,
.sidebar-footer span:last-child {
  display: block;
}

.brand span,
.sidebar-footer span:last-child {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
}

.nav-menu {
  display: grid;
  gap: 6px;
  flex: 1 1 auto;
  align-content: start;
  min-height: 0;
}

.nav-item {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--anx-radius-md);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.nav-item__icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: currentColor;
}

.nav-item__icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-item[data-nav-description] .nav-item__label {
  display: grid;
  gap: 2px;
}

.nav-item[data-nav-description] .nav-item__label::after {
  content: attr(data-nav-description);
  max-width: 150px;
  overflow: hidden;
  color: rgba(222, 212, 238, .58);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.nav-item:hover,
.nav-item:focus-visible,
.nav-item.is-active {
  border-color: var(--line);
  background: var(--anx-surface-control-hover);
  color: var(--text);
  outline: none;
}

.nav-item:hover,
.nav-item:focus-visible {
  box-shadow: 0 0 18px rgba(182, 108, 255, 0.16);
  transform: translateX(3px);
}

.nav-item.is-active {
  border-color: rgba(182, 108, 255, 0.42);
  background:
    linear-gradient(90deg, rgba(182, 108, 255, 0.18), rgba(182, 108, 255, 0.06)),
    rgba(21, 10, 36, 0.84);
  color: var(--accent);
}

.sidebar-footer {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  margin-top: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-glass);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.sidebar-footer:hover,
.sidebar-footer:focus-visible,
.sidebar-footer.is-node-picker-open {
  border-color: rgba(182, 108, 255, 0.42);
  background: rgba(31, 18, 48, 0.92);
  box-shadow: 0 0 20px rgba(182, 108, 255, 0.16);
  outline: none;
}

.sidebar-footer[data-agent-state="online"] .pulse {
  background: var(--success);
  box-shadow: 0 0 0 8px rgba(69, 224, 143, 0.14);
}

.sidebar-footer[data-agent-state="offline"] .pulse {
  background: var(--neutral);
  box-shadow: 0 0 0 8px rgba(168, 161, 181, 0.12);
}

.sidebar-footer[data-agent-state="error"] .pulse {
  background: var(--danger);
  box-shadow: 0 0 0 8px rgba(255, 107, 138, 0.14);
}

.sidebar-footer[data-agent-state="installing"] .pulse {
  background: var(--caution);
  box-shadow: 0 0 0 8px rgba(245, 196, 81, 0.14);
}

.node-picker-popover {
  position: fixed;
  z-index: 80;
  display: grid;
  gap: 10px;
  max-height: min(420px, calc(100vh - 28px));
  padding: 12px;
  border: 1px solid rgba(182, 108, 255, 0.32);
  border-radius: 12px;
  background: rgba(15, 10, 26, 0.98);
  box-shadow: 0 26px 72px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(18px);
}

.node-picker-popover__header {
  display: grid;
  gap: 3px;
  padding: 2px 4px 8px;
  border-bottom: 1px solid rgba(190, 170, 220, 0.12);
}

.node-picker-popover__header strong {
  color: var(--text);
  font-size: 0.92rem;
}

.node-picker-popover__header span,
.node-picker-empty {
  color: var(--muted);
  font-size: 0.78rem;
}

.node-picker-popover__list {
  display: grid;
  gap: 6px;
  overflow: auto;
  padding-right: 2px;
}

.node-picker-empty {
  padding: 10px 4px 4px;
  line-height: 1.45;
}

.node-picker-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 9px 10px;
  border: 1px solid rgba(190, 170, 220, 0.12);
  border-radius: 10px;
  background: rgba(7, 9, 14, 0.44);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.node-picker-option:hover,
.node-picker-option:focus-visible,
.node-picker-option.is-active {
  border-color: rgba(182, 108, 255, 0.34);
  background: rgba(41, 20, 63, 0.62);
  outline: none;
}

.node-picker-option[aria-selected="true"] {
  border-color: rgba(69, 224, 143, 0.34);
  background: rgba(69, 224, 143, 0.08);
}

.node-picker-option__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.node-picker-option__copy strong,
.node-picker-option__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-picker-option__copy strong {
  font-size: 0.86rem;
}

.node-picker-option__copy small,
.node-picker-option__badge {
  color: var(--muted);
  font-size: 0.72rem;
}

.node-picker-option__badge {
  max-width: 78px;
  overflow: hidden;
  border: 1px solid rgba(190, 170, 220, 0.14);
  border-radius: 999px;
  padding: 3px 7px;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

.pulse {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 8px var(--accent-soft);
}

.main-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 34px;
  scrollbar-gutter: stable;
  transition: padding var(--sidebar-transition);
}

@media (min-width: 981px) {
  .sidebar[data-sidebar-state="collapsed"] {
    padding-inline: 10px;
  }

  .sidebar[data-sidebar-state="collapsed"] .sidebar-header {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .sidebar[data-sidebar-state="collapsed"] .brand {
    justify-content: center;
  }

  .sidebar[data-sidebar-state="collapsed"] .sidebar-toggle svg {
    transform: rotate(180deg);
  }

  .sidebar[data-sidebar-state="collapsed"] .brand,
  .sidebar[data-sidebar-state="collapsed"] .nav-item,
  .sidebar[data-sidebar-state="collapsed"] .sidebar-footer {
    gap: 0;
  }

  .sidebar[data-sidebar-state="collapsed"] .brand-copy,
  .sidebar[data-sidebar-state="collapsed"] .nav-item__label,
  .sidebar[data-sidebar-state="collapsed"] .sidebar-footer__copy {
    max-width: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-8px);
  }

  .sidebar[data-sidebar-state="collapsed"] .nav-item,
  .sidebar[data-sidebar-state="collapsed"] .sidebar-footer {
    justify-content: center;
  }

  .sidebar[data-sidebar-state="collapsed"] .nav-item {
    padding-inline: 0;
    text-align: center;
  }

  .sidebar[data-sidebar-state="collapsed"] .nav-item:hover,
  .sidebar[data-sidebar-state="collapsed"] .nav-item:focus-visible {
    transform: none;
  }

  .sidebar[data-sidebar-state="collapsed"] .sidebar-footer {
    padding-inline: 0;
  }

  .sidebar[data-sidebar-state="collapsed"] .nav-item::after,
  .sidebar[data-sidebar-state="collapsed"] .sidebar-footer::after {
    position: absolute;
    top: 50%;
    left: calc(100% + 12px);
    z-index: 5;
    padding: 7px 10px;
    border: 1px solid rgba(182, 108, 255, 0.28);
    border-radius: 10px;
    background: rgba(15, 10, 26, 0.96);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
    color: var(--text);
    content: attr(data-tooltip);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) translateX(-6px);
    transition: opacity 140ms ease, transform 140ms ease;
  }

  .sidebar[data-sidebar-state="collapsed"] .nav-item:hover::after,
  .sidebar[data-sidebar-state="collapsed"] .nav-item:focus-visible::after,
  .sidebar[data-sidebar-state="collapsed"] .sidebar-footer:hover::after,
  .sidebar[data-sidebar-state="collapsed"] .sidebar-footer:focus-within::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

.main-content,
.console-log-viewer,
.instance-console-viewer,
.file-table-wrap,
.file-editor-surface textarea,
.ssh-terminal-window,
.docker-log-viewer,
.docker-table-wrap,
.coolpals-table-wrap,
.coolpals-log-viewer,
.backup-table-wrap,
.ssh-session-tabs,
.node-picker-popover__list,
.global-search-results,
.command-palette-results,
.app-modal {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.main-content::-webkit-scrollbar,
.console-log-viewer::-webkit-scrollbar,
.instance-console-viewer::-webkit-scrollbar,
.file-table-wrap::-webkit-scrollbar,
.file-editor-surface textarea::-webkit-scrollbar,
.ssh-terminal-window::-webkit-scrollbar,
.docker-log-viewer::-webkit-scrollbar,
.docker-table-wrap::-webkit-scrollbar,
.coolpals-table-wrap::-webkit-scrollbar,
.coolpals-log-viewer::-webkit-scrollbar,
.backup-table-wrap::-webkit-scrollbar,
.ssh-session-tabs::-webkit-scrollbar,
.node-picker-popover__list::-webkit-scrollbar,
.global-search-results::-webkit-scrollbar,
.command-palette-results::-webkit-scrollbar,
.app-modal::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.main-content::-webkit-scrollbar-track,
.console-log-viewer::-webkit-scrollbar-track,
.instance-console-viewer::-webkit-scrollbar-track,
.file-table-wrap::-webkit-scrollbar-track,
.file-editor-surface textarea::-webkit-scrollbar-track,
.ssh-terminal-window::-webkit-scrollbar-track,
.docker-log-viewer::-webkit-scrollbar-track,
.docker-table-wrap::-webkit-scrollbar-track,
.coolpals-table-wrap::-webkit-scrollbar-track,
.coolpals-log-viewer::-webkit-scrollbar-track,
.backup-table-wrap::-webkit-scrollbar-track,
.ssh-session-tabs::-webkit-scrollbar-track,
.node-picker-popover__list::-webkit-scrollbar-track,
.global-search-results::-webkit-scrollbar-track,
.command-palette-results::-webkit-scrollbar-track,
.app-modal::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
}

.main-content::-webkit-scrollbar-thumb,
.console-log-viewer::-webkit-scrollbar-thumb,
.instance-console-viewer::-webkit-scrollbar-thumb,
.file-table-wrap::-webkit-scrollbar-thumb,
.file-editor-surface textarea::-webkit-scrollbar-thumb,
.ssh-terminal-window::-webkit-scrollbar-thumb,
.docker-log-viewer::-webkit-scrollbar-thumb,
.docker-table-wrap::-webkit-scrollbar-thumb,
.coolpals-table-wrap::-webkit-scrollbar-thumb,
.coolpals-log-viewer::-webkit-scrollbar-thumb,
.backup-table-wrap::-webkit-scrollbar-thumb,
.ssh-session-tabs::-webkit-scrollbar-thumb,
.node-picker-popover__list::-webkit-scrollbar-thumb,
.global-search-results::-webkit-scrollbar-thumb,
.command-palette-results::-webkit-scrollbar-thumb,
.app-modal::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--scrollbar-thumb), rgba(124, 63, 196, 0.88));
  background-clip: padding-box;
}

.main-content::-webkit-scrollbar-thumb:hover,
.console-log-viewer::-webkit-scrollbar-thumb:hover,
.instance-console-viewer::-webkit-scrollbar-thumb:hover,
.file-table-wrap::-webkit-scrollbar-thumb:hover,
.file-editor-surface textarea::-webkit-scrollbar-thumb:hover,
.ssh-terminal-window::-webkit-scrollbar-thumb:hover,
.docker-log-viewer::-webkit-scrollbar-thumb:hover,
.docker-table-wrap::-webkit-scrollbar-thumb:hover,
.coolpals-table-wrap::-webkit-scrollbar-thumb:hover,
.coolpals-log-viewer::-webkit-scrollbar-thumb:hover,
.backup-table-wrap::-webkit-scrollbar-thumb:hover,
.ssh-session-tabs::-webkit-scrollbar-thumb:hover,
.node-picker-popover__list::-webkit-scrollbar-thumb:hover,
.global-search-results::-webkit-scrollbar-thumb:hover,
.command-palette-results::-webkit-scrollbar-thumb:hover,
.app-modal::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--scrollbar-thumb-hover), rgba(152, 85, 228, 0.96));
  background-clip: padding-box;
}

body.window-is-maximized .app-shell {
  padding: 0;
}

body.window-is-maximized .app-titlebar,
body.window-is-maximized .app-workspace {
  border-radius: 0;
}

.page {
  display: none;
  min-width: 0;
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: 10px;
}

.page.is-active {
  display: block;
  animation: page-in 200ms ease both;
  will-change: opacity, transform;
}

.page.is-active > .page-header {
  animation: page-header-in 260ms ease both;
}

.page[data-page="instances"] {
  max-width: none;
}

.page[data-page="dashboard"] {
  max-width: 1320px;
}

.page[data-page="instances"] .page-header {
  margin-bottom: 18px;
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes page-header-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 28px;
}

.page-header > * {
  min-width: 0;
}

.page-header h1,
.page-header h2,
.page-header p {
  overflow-wrap: anywhere;
}

.page-introduction {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  padding: 13px 14px;
  border: 1px solid rgba(190, 170, 220, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
}

.page-introduction strong {
  color: var(--text);
}

.page-introduction p {
  max-width: 860px;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.page-introduction .inline-action {
  justify-self: start;
}

.help-topic-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.help-topic-grid button {
  border: 1px solid rgba(190, 170, 220, .16);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .045);
  color: var(--text);
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
  cursor: pointer;
}

.help-topic-grid button:hover,
.help-topic-grid button:focus-visible {
  border-color: rgba(182, 108, 255, .46);
  background: rgba(182, 108, 255, .12);
  outline: none;
}

.settings-actions--wrap {
  flex-wrap: wrap;
}

.app-modal--contextual-help {
  width: min(620px, 100%);
}

.contextual-help-body p {
  color: rgba(237, 230, 247, .88);
  line-height: 1.55;
}

html[data-guided-mode="true"] .onboarding-technical-details:not([open]),
html[data-guided-mode="true"] .node-technical-details:not([open]) {
  opacity: .86;
}

html[data-advanced-mode="true"] .onboarding-technical-details,
html[data-advanced-mode="true"] .node-technical-details,
html[data-advanced-mode="true"] .marketplace-progress-debug {
  border-color: rgba(182, 108, 255, .34);
}

.app-modal--first-server {
  width: min(880px, 100%);
}

.first-server-body {
  display: grid;
  gap: 18px;
}

.first-server-section {
  display: grid;
  gap: 10px;
}

.first-server-section h3,
.first-server-section p {
  margin: 0;
}

.first-server-section p {
  color: var(--muted);
}

.first-server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.first-server-card {
  display: grid;
  gap: 7px;
  min-height: 132px;
  padding: 14px;
  border: 1px solid rgba(190, 170, 220, .16);
  border-radius: 8px;
  background: rgba(18, 14, 28, .72);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.first-server-card:hover,
.first-server-card:focus-visible {
  border-color: rgba(182, 108, 255, .56);
  outline: none;
  box-shadow: 0 0 0 3px rgba(182, 108, 255, .14);
}

.first-server-card:disabled {
  cursor: not-allowed;
  opacity: .54;
}

.first-server-card span,
.first-server-card small {
  color: var(--muted);
  line-height: 1.45;
}

[aria-busy="true"] {
  cursor: progress;
}

@media (max-width: 760px) {
  .page-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
  }

  .page-header > :last-child:not(:first-child) {
    max-width: 100%;
  }
}

.dashboard-ops-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: var(--app-section-gap);
}

.dashboard-ops-grid article {
  padding: 14px;
  border: 1px solid var(--anx-color-border-soft);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-panel);
  box-shadow: var(--panel-shadow);
}

.dashboard-ops-grid span,
.dashboard-ops-grid small {
  display: block;
  color: var(--muted);
}

.dashboard-ops-grid strong {
  display: block;
  margin: 6px 0 4px;
  color: var(--text);
  font-size: 1.05rem;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 12px;
  font-size: clamp(2.2rem, 5vw, 4.1rem);
  line-height: 0.98;
}

h3 {
  margin-bottom: 10px;
  font-size: 1.08rem;
}

.lede {
  max-width: 720px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.status-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.status-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 260px;
  min-width: 0;
  padding: var(--app-card-padding);
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-panel);
  box-shadow: var(--panel-shadow), var(--anx-shadow-inset);
  overflow: hidden;
}

.status-card--wide {
  max-width: 720px;
}

.minecraft-page-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1.45fr) repeat(2, minmax(180px, 0.8fr));
  gap: 16px;
  align-items: stretch;
}

.minecraft-overview-card {
  grid-row: span 2;
}

.minecraft-detail-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.minecraft-metric-card {
  min-height: 190px;
}

.minecraft-metric-card .status-card__top {
  margin-bottom: 20px;
}

.metric-value {
  min-height: 0;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
}

.metric-caption {
  display: block;
  color: var(--muted);
  font-size: 0.84rem;
}

.console-shell {
  display: grid;
  gap: 14px;
}

.console-toolbar {
  display: flex;
  gap: 12px;
  align-items: end;
  justify-content: space-between;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.74);
}

.console-search {
  display: grid;
  flex: 1 1 360px;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.console-search input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.console-search input:focus {
  border-color: var(--accent);
  outline: none;
}

.console-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.console-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.console-toggle input {
  accent-color: var(--accent);
}

.inline-action:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.console-window {
  min-height: min(560px, calc(100vh - 250px));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #07090d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.console-titlebar {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(23, 29, 42, 0.82);
  color: var(--muted);
  font-size: 0.82rem;
}

.console-titlebar strong {
  margin-left: 4px;
  color: var(--text);
}

.console-titlebar span:last-child {
  margin-left: auto;
}

.console-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--line);
}

.console-dot:nth-child(1) {
  background: #ff6b6b;
}

.console-dot:nth-child(2) {
  background: var(--warning);
}

.console-dot:nth-child(3) {
  background: var(--accent);
}

.console-log-viewer {
  position: relative;
  min-height: calc(min(560px, calc(100vh - 250px)) - 42px);
  max-height: calc(100vh - 250px);
  overflow: auto;
  padding: 14px;
  color: #d7deea;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.9rem;
  line-height: 1.55;
}

.console-log-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.console-empty-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.console-empty-state strong {
  color: var(--text);
  font-size: 1rem;
}

.console-ops-shell {
  grid-template-columns: minmax(250px, 0.48fr) minmax(640px, 1.42fr) minmax(280px, 0.58fr);
  align-items: stretch;
}

.console-source-panel,
.console-main-panel,
.console-status-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(17, 21, 31, 0.78);
  overflow: hidden;
}

.console-source-panel,
.console-status-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px;
  min-height: clamp(560px, 70vh, 840px);
}

.console-main-panel {
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px;
  min-height: clamp(560px, 70vh, 840px);
}

.console-source-panel .panel-heading,
.console-status-panel .panel-heading,
.console-activity .panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

.console-source-panel .panel-heading h3,
.console-status-panel .panel-heading h3,
.console-activity .panel-heading h3 {
  margin: 0;
}

.console-source-search {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.console-source-search input,
.console-command-row input {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.console-source-list {
  display: grid;
  gap: 6px;
  overflow: auto;
  max-height: calc(100vh - 300px);
  padding-right: 2px;
}

.console-source-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(8, 10, 15, 0.34);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.console-source-row:hover,
.console-source-row.is-active {
  border-color: rgba(182, 108, 255, 0.4);
  background: rgba(182, 108, 255, 0.12);
}

.console-source-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #7f8797;
  box-shadow: 0 0 0 5px rgba(127, 135, 151, 0.13);
}

.console-source-dot.is-running {
  background: var(--success);
  box-shadow: 0 0 0 5px rgba(69, 224, 143, 0.13);
}

.console-source-dot.is-starting,
.console-source-dot.is-restarting,
.console-source-dot.is-stopping {
  background: #f5c451;
  box-shadow: 0 0 0 5px rgba(245, 196, 81, 0.13);
}

.console-source-dot.is-failed {
  background: var(--danger);
  box-shadow: 0 0 0 5px rgba(255, 107, 138, 0.13);
}

.console-source-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.console-source-copy strong,
.console-source-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-source-copy small {
  color: var(--muted);
  font-size: 0.76rem;
}

.console-source-empty {
  display: grid;
  place-items: center;
  gap: 10px;
  min-height: 220px;
  padding: 18px;
  border: 1px dashed rgba(185, 148, 255, 0.22);
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

.console-source-empty[hidden] {
  display: none;
}

.console-source-empty strong {
  color: var(--text);
}

.console-empty-actions,
.console-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.console-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
}

.console-tab,
.console-tab-empty {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 10, 15, 0.4);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.console-tab {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}

.console-tab.is-active {
  border-color: rgba(182, 108, 255, 0.45);
  background: rgba(182, 108, 255, 0.13);
  color: var(--text);
}

.console-tab-close {
  color: var(--muted);
  font-size: 0.76rem;
}

.console-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.console-filter-chip {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 10, 15, 0.36);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.console-filter-chip:hover,
.console-filter-chip.is-active {
  border-color: rgba(182, 108, 255, 0.45);
  background: var(--accent-soft);
  color: var(--text);
}

.console-alert {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 32px;
  max-height: 36px;
  padding: 4px 8px 4px 10px;
  border: 1px solid rgba(255, 107, 138, 0.34);
  border-radius: 8px;
  background: rgba(255, 107, 138, 0.08);
  color: #ffb3c3;
  opacity: 1;
  overflow: hidden;
  transition: opacity 260ms ease, border-color 180ms ease, background 180ms ease;
  white-space: nowrap;
}

.console-alert.is-muted {
  opacity: 0.5;
}

.console-alert-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 107, 138, 0.16);
  color: #ffd5dd;
  font-size: 0.74rem;
  font-weight: 900;
}

.console-alert strong {
  overflow: hidden;
  min-width: 0;
  color: #ffd5dd;
  font-size: 0.82rem;
  text-overflow: ellipsis;
}

.console-alert-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.console-alert .inline-action {
  min-height: 24px;
  padding: 0 8px;
  font-size: 0.76rem;
}

.console-alert-dismiss {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 107, 138, 0.24);
  border-radius: 6px;
  background: rgba(8, 10, 15, 0.32);
  color: #ffd5dd;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 900;
  cursor: pointer;
}

.console-alert-dismiss:hover,
.console-alert-dismiss:focus-visible {
  border-color: rgba(255, 107, 138, 0.5);
  background: rgba(255, 107, 138, 0.13);
  outline: none;
}

.console-alert[hidden] {
  display: none;
}

.console-main-panel .console-window {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: clamp(420px, 58vh, 680px);
  min-height: 0;
  overflow: hidden;
}

.console-main-panel .console-log-viewer {
  min-height: 0;
  max-height: none;
  overflow: auto;
}

.console-jump-latest {
  position: sticky;
  right: 14px;
  bottom: 12px;
  z-index: 4;
  float: right;
  min-height: 30px;
  margin: 8px 0 0 auto;
  padding: 0 11px;
  border: 1px solid rgba(182, 108, 255, 0.38);
  border-radius: 999px;
  background: rgba(24, 11, 43, 0.94);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.console-jump-latest[hidden] {
  display: none;
}

.console-jump-latest:hover,
.console-jump-latest:focus-visible {
  border-color: rgba(199, 161, 255, 0.65);
  background: rgba(64, 26, 104, 0.96);
  outline: none;
}

.console-log-list li {
  display: grid;
  grid-template-columns: 155px 58px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  color: #d8d0e4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.console-log-list li > span:last-child {
  min-width: 0;
}

.console-log-list li.is-stderr,
.console-log-list li.is-error {
  color: #ff8fa3;
}

.console-log-list li.is-warn {
  color: #ffd166;
}

.console-log-list li.is-stdin,
.console-log-list li.is-chat {
  color: #c7a1ff;
}

.console-log-list li.is-debug {
  color: #93c5fd;
}

.console-log-list time,
.console-log-list .instance-log-stream {
  color: #8e7aa7;
}

.console-command-row {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: rgba(8, 10, 15, 0.74);
}

.console-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 10, 15, 0.42);
  color: var(--muted);
  font-size: 0.78rem;
}

.console-status-bar strong {
  color: var(--text);
}

.console-metric-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.console-metric-grid article {
  padding: 10px;
  border: 1px solid rgba(185, 148, 255, 0.14);
  border-radius: 8px;
  background: rgba(12, 4, 24, 0.44);
}

.console-metric-grid span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.console-metric-grid strong {
  color: var(--text);
}

.console-details-list {
  margin: 0;
}

.console-activity {
  display: grid;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.console-activity ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.console-activity li {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(185, 148, 255, 0.09);
  color: var(--muted);
  font-size: 0.82rem;
}

.console-activity li strong {
  color: var(--text);
}

.file-manager-shell {
  display: grid;
  grid-template-columns: var(--files-storage-width, 260px) 10px minmax(0, 1fr);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 10px;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  --files-explorer-width: 320px;
  --files-details-width: 260px;
}

.storage-manager-panel {
  display: grid;
  grid-row: 1 / -1;
  grid-column: 1;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.82);
  box-shadow: var(--shadow-soft);
}

.storage-manager-divider,
.file-panel-divider {
  position: relative;
  cursor: col-resize;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(182, 108, 255, 0.05), rgba(182, 108, 255, 0.11));
  user-select: none;
  touch-action: none;
}

.storage-manager-divider {
  grid-row: 1 / -1;
  grid-column: 2;
}

.storage-manager-divider::before,
.file-panel-divider::before {
  position: absolute;
  inset: 18px 3px;
  border-radius: 999px;
  background: rgba(182, 108, 255, 0.55);
  content: "";
  opacity: 0.58;
  transition: opacity 160ms ease, transform 160ms ease;
}

.storage-manager-divider:hover::before,
.storage-manager-divider.is-dragging::before,
.file-panel-divider:hover::before,
.file-panel-divider.is-dragging::before {
  opacity: 1;
  transform: scaleX(1.08);
}

.storage-active-card,
.storage-connection-item {
  display: grid;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.storage-active-card span,
.storage-connection-item span {
  width: max-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(182, 108, 255, 0.18);
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
}

.storage-active-card small,
.storage-connection-item small {
  min-width: 0;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storage-connection-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}

.storage-connection-item {
  width: 100%;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.storage-connection-item.is-active,
.storage-connection-item:hover {
  border-color: rgba(182, 108, 255, 0.42);
  background: rgba(182, 108, 255, 0.12);
}

.storage-actions {
  display: grid;
  gap: 8px;
}

.transfer-manager,
.transfer-list,
.transfer-item {
  display: grid;
  gap: 8px;
}

.transfer-item {
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.transfer-item strong,
.transfer-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transfer-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.transfer-progress span {
  display: block;
  height: 100%;
  width: var(--transfer-progress, 0%);
  background: linear-gradient(90deg, var(--accent), #62e0ff);
}

.transfer-progress.is-indeterminate span,
.operation-progress.is-indeterminate span {
  width: 42%;
  animation: operationIndeterminate 1.1s ease-in-out infinite;
}

.transfer-item .inline-action {
  justify-self: start;
  min-height: 28px;
  padding: 5px 10px;
  font-size: 0.74rem;
}

.transfer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.transfer-item.is-complete .transfer-progress span {
  background: linear-gradient(90deg, #38d996, #62e0ff);
}

.transfer-item.is-failed .transfer-progress span,
.transfer-item.is-canceled .transfer-progress span {
  background: linear-gradient(90deg, #ff5c7a, #ff9b6a);
}

.files-context-menu {
  position: fixed;
  z-index: 10000;
  display: grid;
  min-width: 190px;
  max-width: min(280px, calc(100vw - 16px));
  padding: 6px;
  border: 1px solid rgba(185, 171, 200, 0.18);
  border-radius: 8px;
  background: rgba(17, 21, 31, 0.98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
}

.files-context-menu__item {
  min-height: 32px;
  padding: 7px 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}

.files-context-menu__item:hover,
.files-context-menu__item:focus-visible {
  background: rgba(182, 108, 255, 0.14);
  outline: none;
}

.files-context-menu__item:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.58;
}

.operations-shell,
.operations-list-panel,
.operations-detail-panel,
.operation-list,
.operation-detail {
  display: grid;
  gap: 12px;
}

.operations-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.operations-summary-card,
.operations-list-panel,
.operations-detail-panel {
  border: 1px solid var(--anx-color-border-soft);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-panel);
  box-shadow: var(--panel-shadow), var(--anx-shadow-inset);
}

.operations-summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.operations-summary-card div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.operations-summary-card span:not(.service-icon) {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.operations-summary-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operations-toolbar,
.operations-panel-header,
.operation-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.operations-toolbar {
  flex-wrap: wrap;
}

.operations-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: 14px;
  align-items: start;
}

.operations-list-panel,
.operations-detail-panel {
  padding: 14px;
  min-width: 0;
}

.operations-panel-header h3 {
  margin: 0;
  font-size: 0.92rem;
}

.operation-list {
  max-height: min(62vh, 680px);
  overflow: auto;
  padding-right: 2px;
}

.operation-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--anx-color-border-soft);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-control);
}

.operation-item.is-selected {
  border-color: rgba(182, 108, 255, 0.42);
  background: var(--anx-surface-control-active);
}

.operation-item__main {
  min-width: 0;
  display: grid;
  gap: 7px;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.operation-item__main strong,
.operation-item__main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-item__main small,
.operation-detail span {
  color: var(--muted);
}

.operation-progress {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.operation-progress span {
  display: block;
  height: 100%;
  width: var(--operation-progress, 0%);
  background: linear-gradient(90deg, var(--accent), #62e0ff);
}

.operation-item[data-status="completed"] .operation-progress span {
  background: linear-gradient(90deg, #38d996, #62e0ff);
}

.operation-item[data-status="failed"] .operation-progress span,
.operation-detail__error {
  color: #ff8fa3;
}

.operation-item[data-status="failed"] .operation-progress span {
  background: linear-gradient(90deg, #ff5c7a, #ff9b6a);
}

.operation-empty-state {
  min-height: 160px;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed rgba(182, 108, 255, 0.24);
  border-radius: var(--anx-radius-md);
  background: rgba(182, 108, 255, 0.045);
}

.operation-empty-state strong {
  color: var(--text);
}

.operation-detail pre {
  max-height: 320px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.24);
  white-space: pre-wrap;
  word-break: break-word;
}

.maintenance-shell,
.maintenance-list-panel,
.maintenance-detail-panel,
.maintenance-list,
.maintenance-detail {
  display: grid;
  gap: 12px;
}

.maintenance-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.maintenance-summary-card,
.maintenance-list-panel,
.maintenance-detail-panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: var(--shadow-soft);
}

.maintenance-summary-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.maintenance-summary-card div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.maintenance-summary-card span:not(.service-icon) {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.maintenance-summary-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maintenance-toolbar,
.maintenance-actions,
.maintenance-panel-header,
.maintenance-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.maintenance-toolbar,
.maintenance-actions {
  flex-wrap: wrap;
}

.maintenance-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
  gap: 14px;
  align-items: start;
}

.maintenance-list-panel,
.maintenance-detail-panel {
  min-width: 0;
  padding: 14px;
}

.maintenance-panel-header h3 {
  margin: 0;
  font-size: 0.92rem;
}

.maintenance-list {
  max-height: min(62vh, 680px);
  overflow: auto;
  padding-right: 2px;
}

.maintenance-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}

.maintenance-item.is-selected {
  border-color: rgba(182, 108, 255, 0.42);
  background: rgba(182, 108, 255, 0.11);
}

.maintenance-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.maintenance-item__main {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.maintenance-item__main strong,
.maintenance-item__main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maintenance-item__main small,
.maintenance-detail span {
  color: var(--muted);
}

.maintenance-empty-state {
  min-height: 160px;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

.maintenance-empty-state strong {
  color: var(--text);
}

.maintenance-detail-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.maintenance-detail-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 7px;
}

.maintenance-detail-list dt {
  color: var(--muted);
}

.maintenance-detail-list dd {
  margin: 0;
  text-align: right;
}

.maintenance-detail pre {
  max-height: 260px;
  overflow: auto;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #ff8fa3;
  background: rgba(0, 0, 0, 0.24);
  white-space: pre-wrap;
  word-break: break-word;
}

@keyframes operationIndeterminate {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(250%);
  }
}

.storage-provider-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.storage-provider-option {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
}

.storage-provider-option.is-active {
  border-color: rgba(182, 108, 255, 0.5);
  background: rgba(182, 108, 255, 0.12);
}

.storage-form textarea {
  min-height: 120px;
  resize: vertical;
}

.page[data-page="files"].is-active {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.page[data-page="files"] .page-introduction {
  min-width: 0;
}

.page[data-page="files"] .file-manager-shell {
  height: auto;
}

.files-connect-bar {
  display: grid;
  grid-column: 3;
  grid-row: 1;
  grid-template-columns: minmax(160px, 280px) minmax(160px, 280px) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.74);
  position: relative;
  z-index: 2;
}

.file-password-prompt {
  display: grid;
  grid-column: 3;
  grid-row: 2;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.82);
}

.file-toolbar {
  display: grid;
  grid-column: 3;
  grid-row: 3;
  grid-template-columns: minmax(240px, 520px) minmax(180px, 320px) minmax(260px, 1fr);
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.74);
  position: relative;
  z-index: 2;
}

.file-location,
.file-search {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.file-location-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.file-location input,
.file-search input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.file-location input:disabled,
.file-search input:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.file-toolbar-stack {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.file-mode-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 10, 15, 0.52);
}

.file-mode-button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
}

.file-mode-button.is-active {
  border-color: rgba(182, 108, 255, 0.4);
  background: rgba(182, 108, 255, 0.12);
  color: var(--accent);
}

.file-mode-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.file-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.file-actions .inline-action[data-file-action="delete"] {
  border-color: rgba(255, 92, 122, 0.34);
  color: #ff9aad;
}

.file-workspace {
  display: grid;
  grid-column: 3;
  grid-row: 4;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.62fr);
  gap: 10px;
  min-height: 0;
  overflow: hidden;
}

.file-workspace-divider {
  display: none;
  position: relative;
  width: 12px;
  min-width: 12px;
  cursor: col-resize;
  align-self: stretch;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(182, 108, 255, 0.06), rgba(182, 108, 255, 0.12));
  user-select: none;
  touch-action: none;
}

.file-workspace-divider__handle {
  position: absolute;
  inset: 18px 3px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(182, 108, 255, 0.8), rgba(182, 108, 255, 0.3)),
    rgba(255, 255, 255, 0.04);
  box-shadow:
    0 0 0 1px rgba(182, 108, 255, 0.16),
    0 0 22px rgba(182, 108, 255, 0.14);
  opacity: 0.72;
  transition: opacity 160ms ease, transform 160ms ease;
}

.file-workspace-divider:hover .file-workspace-divider__handle,
.file-workspace-divider:focus-visible .file-workspace-divider__handle,
.file-workspace-divider.is-dragging .file-workspace-divider__handle {
  opacity: 1;
  transform: scaleX(1.06);
}

body.is-resizing-files,
body.is-resizing-files * {
  cursor: col-resize !important;
}

.file-browser {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.75fr) 10px minmax(200px, var(--files-details-width));
  gap: 10px;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.file-panel-divider {
  min-width: 10px;
}

.folder-tree-panel,
.file-list-panel,
.file-details-panel {
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.82);
  overflow: hidden;
}

.file-list-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}

.folder-tree-panel,
.file-details-panel {
  min-height: 0;
  overflow: auto;
  padding: 14px;
}

.panel-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.panel-heading h3 {
  margin-bottom: 0;
}

.folder-tree-empty,
.file-empty-state,
.file-loading-state {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 260px;
  padding: 22px;
  color: var(--muted);
  text-align: center;
}

.folder-tree-empty strong,
.file-empty-state strong,
.file-loading-state strong {
  color: var(--text);
}

.folder-icon,
.file-icon {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 28px;
  border: 1px solid currentColor;
  color: var(--accent);
}

.folder-icon {
  margin-top: 6px;
  border-radius: 4px;
  background: var(--accent-soft);
}

.folder-icon::before {
  position: absolute;
  top: -7px;
  left: -1px;
  width: 16px;
  height: 8px;
  border: 1px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: var(--accent-soft);
  content: "";
}

.file-icon {
  width: 26px;
  height: 34px;
  border-radius: 4px;
  background: rgba(238, 242, 255, 0.04);
}

.file-icon::before {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 10px;
  height: 10px;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  background: var(--panel-strong);
  content: "";
}

.breadcrumb-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

.breadcrumb-root {
  color: var(--text);
  font-weight: 800;
}

.breadcrumb-bar button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.breadcrumb-bar button:hover,
.breadcrumb-bar button:focus-visible {
  color: var(--text);
}

.breadcrumb-separator {
  color: var(--line);
}

.file-table-wrap {
  position: relative;
  min-height: 0;
  overflow: auto;
}

.file-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
  table-layout: fixed;
}

.file-table th,
.file-table td {
  height: 44px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.file-table tbody tr {
  cursor: pointer;
  transition: background 160ms ease;
}

.file-table tbody tr.is-selected {
  background: rgba(182, 108, 255, 0.18);
  box-shadow: inset 3px 0 0 var(--accent);
}

.file-table tbody tr:hover {
  background: rgba(182, 108, 255, 0.08);
}

.file-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(17, 21, 31, 0.98);
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.file-table th:nth-child(1),
.file-table td:nth-child(1) {
  width: 48%;
}

.file-table th:nth-child(2),
.file-table td:nth-child(2) {
  width: 16%;
}

.file-table th:nth-child(3),
.file-table td:nth-child(3) {
  width: 14%;
}

.file-table th:nth-child(4),
.file-table td:nth-child(4) {
  width: 22%;
}

.file-entry-name {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.file-entry-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(182, 108, 255, 0.22);
  border-radius: 9px;
  background: rgba(182, 108, 255, 0.08);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.file-entry-name-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.file-entry-name-text strong,
.file-entry-name-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-entry-name-text strong {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
}

.file-entry-name-text span {
  color: var(--muted);
  font-size: 0.74rem;
}

.file-loading-state,
.file-empty-state {
  position: absolute;
  inset: 0;
  min-height: 0;
}

.file-loader {
  width: 28px;
  height: 28px;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: file-loader-spin 900ms linear infinite;
}

@keyframes file-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

.file-preview-icon {
  display: grid;
  place-items: center;
  min-height: 80px;
  margin-bottom: 10px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(8, 10, 15, 0.42);
}

.file-details-list {
  gap: 8px;
}

.file-details-list dt,
.file-details-list dd {
  min-width: 0;
}

.file-editor-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.88);
  overflow: hidden;
  --file-editor-height: 100%;
}

.file-editor-panel.is-fullscreen {
  position: fixed;
  inset: 16px;
  z-index: 32;
  min-height: 0;
}

.file-editor-toolbar {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(17, 21, 31, 0.96);
}

.file-editor-heading {
  display: grid;
  gap: 12px;
}

.file-editor-panel .panel-heading {
  margin-bottom: 0;
}

.file-editor-status-cluster {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

.file-editor-unsaved {
  color: var(--caution);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.file-editor-topbar {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.file-editor-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.file-editor-height-control {
  display: inline-grid;
  gap: 6px;
  justify-items: end;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.file-editor-height-control input {
  width: min(220px, 42vw);
  accent-color: var(--accent);
}

.file-editor-pathbar {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.file-editor-pathbar-topline {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.file-editor-fileline {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.file-editor-fileline strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 0.88rem;
  text-transform: none;
}

.file-editor-pathbar code {
  overflow-wrap: anywhere;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 10, 15, 0.68);
  color: #d7deea;
  font: 0.88rem/1.5 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  text-transform: none;
}

.file-editor-surface {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: #090c12;
}

.file-editor-lines {
  overflow: hidden;
  margin: 0;
  padding: 16px 12px 16px 18px;
  list-style: none;
  border-right: 1px solid rgba(182, 108, 255, 0.14);
  background: rgba(8, 10, 15, 0.92);
  color: rgba(215, 222, 234, 0.42);
  font: 0.9rem/1.55 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  text-align: right;
  user-select: none;
  pointer-events: none;
  white-space: pre;
}

.file-editor-lines li {
  min-height: calc(0.9rem * 1.55);
}

.file-editor-code-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.file-editor-code-layer[hidden] {
  display: none;
}

.file-editor-surface.is-monaco-active {
  display: block;
}

.file-editor-surface.is-monaco-active .file-editor-lines,
.file-editor-surface.is-monaco-active textarea {
  display: none;
}

.file-editor-monaco {
  width: 100%;
  min-height: 0;
  height: 100%;
}

.file-editor-surface textarea {
  width: 100%;
  min-height: 0;
  height: 100%;
  padding: 16px 18px;
  border: 0;
  background: rgba(8, 10, 15, 0.82);
  color: var(--text);
  font: 0.9rem/1.5 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  resize: none;
  overflow: auto;
  tab-size: 2;
}

.file-editor-surface textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(182, 108, 255, 0.28);
}

.file-editor-surface textarea:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.file-editor-panel .settings-note {
  margin: 0;
  padding: 12px 14px 14px;
}

.file-manager-shell.is-edit-mode .file-workspace {
  grid-template-columns: minmax(220px, var(--files-explorer-width)) 12px minmax(0, 1fr);
  align-items: stretch;
  min-height: 0;
}

.file-manager-shell.is-edit-mode .file-workspace-divider {
  display: block;
}

.file-manager-shell.is-edit-mode .file-browser {
  grid-template-columns: 1fr;
  grid-template-rows: minmax(140px, 0.35fr) minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.file-manager-shell.is-edit-mode .folder-tree-panel {
  min-height: 0;
}

.file-manager-shell.is-edit-mode .file-list-panel {
  min-height: 0;
}

.file-manager-shell.is-edit-mode .file-details-panel {
  display: none;
}

.file-manager-shell.is-edit-mode .file-editor-panel {
  min-height: 0;
  height: 100%;
}

.file-manager-shell.is-edit-mode .file-editor-toolbar {
  padding-bottom: 12px;
}

.file-manager-shell.is-edit-mode .file-table-wrap {
  min-height: 0;
  height: 100%;
}

.file-manager-shell.is-edit-mode .file-editor-panel:not(.is-fullscreen) .file-editor-actions {
  position: sticky;
  top: 0;
}

.ssh-shell {
  display: grid;
  gap: 14px;
}

.ssh-connect-bar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.74);
}

.ssh-password-prompt {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.82);
}

.ssh-profile-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.82);
}

.ssh-profile-form[hidden] {
  display: none;
}

.ssh-profile-form .ssh-connection-actions {
  grid-column: 1 / -1;
}

.ssh-password-prompt[hidden] {
  display: none;
}

.ssh-profile-form .ssh-field input,
.ssh-password-prompt .ssh-field input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.ssh-password-note {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.ssh-field {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ssh-field select,
.ssh-field input,
.ssh-command-row input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.ssh-field select:disabled,
.ssh-command-row input:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.ssh-connection-actions,
.ssh-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ssh-session-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  overflow-x: auto;
}

.ssh-tab {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: rgba(17, 21, 31, 0.74);
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
}

.ssh-tab.is-active {
  border-color: rgba(182, 108, 255, 0.42);
  color: var(--accent);
}

.ssh-terminal-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #07090d;
}

.ssh-terminal-card.is-fullscreen {
  position: fixed;
  inset: 16px;
  z-index: 30;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.ssh-terminal-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(23, 29, 42, 0.82);
}

.ssh-status {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  color: var(--muted);
}

.ssh-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--line);
  box-shadow: 0 0 0 6px rgba(37, 45, 60, 0.24);
}

.ssh-terminal-window {
  position: relative;
  min-height: min(520px, calc(100vh - 330px));
  max-height: calc(100vh - 330px);
  overflow: auto;
  padding: 14px;
  color: #d7deea;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.9rem;
  line-height: 1.55;
}

.ssh-xterm-surface {
  min-height: calc(min(520px, calc(100vh - 330px)) - 28px);
  outline: none;
}

.ssh-xterm-surface .xterm {
  height: 100%;
  min-height: inherit;
}

.ssh-xterm-surface .xterm-screen,
.ssh-xterm-surface .xterm-viewport {
  min-height: inherit;
}

.ssh-xterm-surface:not(.is-ready) {
  display: none;
}

.ssh-xterm-surface.is-ready + .ssh-terminal-output {
  display: none;
}

.ssh-terminal-card.is-fullscreen .ssh-terminal-window {
  max-height: none;
  min-height: 0;
}

.ssh-terminal-output {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ssh-empty-state,
.ssh-loading-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.ssh-empty-state strong,
.ssh-loading-state strong {
  color: var(--text);
  font-family: var(--anx-font-sans);
  font-size: 1rem;
}

.ssh-command-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: rgba(8, 10, 15, 0.68);
}

.ssh-prompt {
  color: var(--accent);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-weight: 800;
}

.ssh-workspace-shell {
  grid-template-columns: minmax(280px, 0.42fr) minmax(720px, 1.58fr);
  align-items: stretch;
}

.ssh-sidebar-panel,
.ssh-main-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(17, 21, 31, 0.78);
  overflow: hidden;
}

.ssh-sidebar-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px;
  min-height: clamp(560px, 70vh, 840px);
}

.ssh-main-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  min-height: clamp(560px, 70vh, 840px);
}

.ssh-sidebar-panel .panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

.ssh-sidebar-panel .panel-heading h3 {
  margin: 0;
}

.ssh-workspace-shell .ssh-connect-bar {
  grid-template-columns: 1fr;
  padding: 12px;
}

.ssh-workspace-shell .ssh-connection-actions {
  justify-content: stretch;
}

.ssh-workspace-shell .ssh-connection-actions .inline-action {
  flex: 1 1 auto;
}

.ssh-workspace-shell .ssh-session-tabs {
  display: grid;
  gap: 6px;
  overflow: auto;
  max-height: calc(100vh - 430px);
}

.ssh-workspace-shell .ssh-tab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 9px 10px;
  border-radius: 8px;
  text-align: left;
}

.ssh-workspace-shell .ssh-tab strong,
.ssh-workspace-shell .ssh-tab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ssh-tab-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ssh-tab-copy span,
.ssh-workspace-shell .ssh-tab > span:not(.ssh-tab-state):not(.ssh-tab-copy) {
  color: var(--muted);
  font-size: 0.76rem;
}

.ssh-tab-state {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--line);
  box-shadow: 0 0 0 5px rgba(127, 135, 151, 0.13);
}

.ssh-tab-state.is-connected {
  background: var(--success);
  box-shadow: 0 0 0 5px rgba(69, 224, 143, 0.13);
}

.ssh-tab-state.is-connecting {
  background: #f5c451;
  box-shadow: 0 0 0 5px rgba(245, 196, 81, 0.13);
}

.ssh-tab-state.is-error {
  background: var(--danger);
  box-shadow: 0 0 0 5px rgba(255, 107, 138, 0.13);
}

.ssh-sidebar-summary {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.ssh-sidebar-summary div {
  display: grid;
  gap: 3px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(185, 148, 255, 0.09);
}

.ssh-sidebar-summary span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ssh-sidebar-summary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ssh-main-panel .ssh-profile-form,
.ssh-main-panel .ssh-password-prompt {
  margin: 0;
}

.ssh-main-panel .ssh-terminal-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  min-height: clamp(540px, 68vh, 820px);
}

.ssh-main-panel .ssh-terminal-window {
  min-height: 0;
  max-height: none;
}

.ssh-status {
  min-width: 0;
}

.ssh-status span[data-ssh-status="message"] {
  overflow: hidden;
  max-width: min(560px, 42vw);
  color: var(--muted);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ssh-terminal-output li {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ssh-status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border-top: 1px solid var(--line);
  background: rgba(8, 10, 15, 0.74);
  color: var(--muted);
  font-size: 0.78rem;
}

.ssh-status-bar strong {
  color: var(--text);
}

.docker-shell {
  display: grid;
  gap: 14px;
}

.docker-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.docker-summary-card {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 96px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-panel);
  box-shadow: var(--panel-shadow), var(--anx-shadow-inset);
}

.docker-summary-card span:not(.service-icon) {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.docker-summary-card strong {
  color: var(--text);
  font-size: 1.2rem;
}

.docker-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(140px, 0.32fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-glass);
}

.docker-search,
.docker-filter {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.docker-search input,
.docker-filter select {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-md);
  background: rgba(3, 1, 7, 0.72);
  color: var(--text);
  font: inherit;
}

.docker-search input:disabled,
.docker-filter select:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.docker-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.docker-workspace {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(320px, 0.38fr);
  gap: 14px;
  align-items: stretch;
}

.docker-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.docker-resource-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-glass);
}

.docker-resource-panel .panel-heading {
  margin-bottom: 0;
}

.docker-inline-form,
.docker-create-grid,
.docker-compose-form {
  display: grid;
  gap: 10px;
}

.docker-inline-form {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
}

.docker-create-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.docker-inline-form input,
.docker-create-grid input:not([type="checkbox"]),
.docker-create-grid select,
.docker-compose-form input,
.docker-compose-form textarea,
.docker-log-toolbar input,
.docker-log-toolbar select {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-sm);
  background: rgba(3, 1, 7, 0.72);
  color: var(--text);
  font: inherit;
}

.docker-compose-form textarea {
  min-height: 160px;
  resize: vertical;
  font-family: var(--mono-font);
  line-height: 1.45;
  tab-size: 2;
}

.docker-check-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-sm);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.25;
}

.docker-check-option input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  accent-color: var(--primary);
}

.docker-resource-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}

.docker-resource-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.docker-resource-item strong,
.docker-resource-item small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docker-resource-item small,
.docker-resource-empty,
.docker-warning {
  color: var(--muted);
  font-size: 0.82rem;
}

.docker-warning {
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(255, 190, 92, 0.34);
  border-radius: var(--anx-radius-sm);
  background: rgba(255, 190, 92, 0.08);
  color: var(--warning);
}

.docker-output {
  min-height: 96px;
  max-height: 320px;
  margin: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-sm);
  background: rgba(3, 1, 7, 0.72);
  color: var(--text);
  font-family: var(--mono-font);
  font-size: 0.82rem;
  white-space: pre-wrap;
}

.docker-resource-panel--compose .docker-output,
.docker-resource-panel--cleanup .docker-output {
  max-height: 180px;
}

.docker-resource-panel--cleanup .docker-actions {
  justify-content: flex-start;
}

.docker-table-panel,
.docker-details-panel {
  min-height: min(560px, calc(100vh - 330px));
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-glass);
  overflow: hidden;
}

.docker-details-panel {
  padding: 14px;
}

.docker-table-wrap {
  position: relative;
  min-height: min(560px, calc(100vh - 330px));
  overflow: auto;
}

.docker-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
}

.docker-table th,
.docker-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.docker-table tbody tr {
  cursor: pointer;
  transition: background 140ms ease, transform 140ms ease;
}

.docker-table tbody tr:hover {
  background: rgba(182, 108, 255, 0.07);
}

.docker-table tbody tr.is-selected {
  background: var(--accent-soft);
}

.docker-table th {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.docker-empty-state,
.docker-loading-state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
  overflow: auto;
  min-width: 0;
}

.docker-empty-state > *,
.docker-loading-state > * {
  max-width: min(560px, 100%);
}

.docker-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

.docker-loading-state,
.file-loading-state,
.ssh-loading-state,
.coolpals-loading-state,
.backup-loading-state {
  overflow: hidden;
}

.docker-loading-state::after,
.file-loading-state::after,
.ssh-loading-state::after,
.coolpals-loading-state::after,
.backup-loading-state::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.055) 42%, transparent 72%);
  animation: loading-sheen 1.6s ease-in-out infinite;
}

@keyframes loading-sheen {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

.docker-empty-state strong,
.docker-loading-state strong {
  color: var(--text);
}

.docker-icon {
  position: relative;
  display: inline-grid;
  grid-template-columns: repeat(3, 10px);
  gap: 3px;
  width: 42px;
  height: 32px;
  color: var(--accent);
}

.docker-icon::before,
.docker-icon::after {
  content: "";
}

.docker-icon::before {
  grid-column: 1 / -1;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background:
    linear-gradient(currentColor 0 0) 6px 6px / 8px 6px no-repeat,
    linear-gradient(currentColor 0 0) 17px 6px / 8px 6px no-repeat,
    linear-gradient(currentColor 0 0) 28px 6px / 8px 6px no-repeat,
    var(--accent-soft);
}

.docker-icon::after {
  width: 30px;
  height: 8px;
  margin-left: 6px;
  border-radius: 0 0 999px 999px;
  background: currentColor;
  opacity: 0.7;
}

.docker-detail-icon {
  display: grid;
  place-items: center;
  min-height: 120px;
  margin-bottom: 16px;
  border: 1px dashed var(--line);
  border-radius: var(--anx-radius-md);
  background: rgba(182, 108, 255, 0.045);
}

.docker-details-list {
  gap: 14px;
}

.docker-inspector-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 12px 0;
}

.docker-inspector-tabs button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 10, 15, 0.62);
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.docker-inspector-tabs button.is-active,
.docker-inspector-tabs button:hover,
.docker-inspector-tabs button:focus-visible {
  color: var(--text);
  border-color: rgba(126, 216, 255, 0.42);
  background: rgba(126, 216, 255, 0.12);
}

.docker-inspector-panel {
  display: none;
  min-height: 360px;
}

.docker-inspector-panel.is-active {
  display: block;
}

.docker-log-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.82rem;
}

.docker-log-toolbar label {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-right: auto;
}

.docker-log-viewer,
.docker-inspect-viewer {
  height: clamp(260px, 44vh, 480px);
  min-height: 0;
  max-height: min(520px, calc(100vh - 360px));
  margin: 0;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-md);
  background: rgba(3, 1, 7, 0.9);
  color: #d8f3ff;
  font: 0.78rem/1.55 "JetBrains Mono", "Fira Code", Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

.docker-row-actions {
  min-width: 250px;
  white-space: nowrap;
}

.docker-row-actions .inline-action {
  min-height: 30px;
  margin-right: 6px;
  padding: 0 9px;
  font-size: 0.76rem;
}

.instances-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: auto auto 1fr;
  gap: 16px;
  align-items: start;
  min-width: 0;
  overflow: hidden;
  min-height: calc(100vh - 150px);
}

.instances-toolbar {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(220px, 0.44fr) auto;
  align-items: end;
  padding: 16px;
  gap: 12px;
  border: 1px solid rgba(185, 171, 200, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(43, 20, 74, 0.74), rgba(14, 8, 26, 0.88)),
    rgba(13, 7, 22, 0.9);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}

.instances-toolbar__title {
  min-width: 0;
  padding-right: 8px;
}

.instances-toolbar__title .eyebrow,
.instances-toolbar__title .lede {
  margin: 0;
}

.instances-toolbar__title h1 {
  margin: 2px 0 5px;
  font-size: clamp(2rem, 2.5vw, 2.7rem);
  letter-spacing: 0;
}

.instances-toolbar .docker-search {
  min-width: 0;
}

.instances-toolbar .docker-actions {
  justify-content: flex-end;
  align-self: end;
  grid-column: auto;
}

.instances-toolbar__future {
  grid-column: 1 / 2;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  color: var(--muted);
  font-size: 0.74rem;
}

.instances-toolbar__future span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(185, 171, 200, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}

.instance-create-form {
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  min-width: 0;
  margin-bottom: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.74);
}

.instance-create-form .ssh-connection-actions,
.instance-create-form .ssh-password-note {
  grid-column: 1 / -1;
}

.instance-wizard-header {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.instance-wizard-header strong {
  display: block;
  color: var(--text);
  font-size: 1rem;
}

.instance-wizard-header span:not(.status-pill) {
  color: var(--muted);
  font-size: 0.86rem;
}

.instance-template-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.instance-template-card {
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.instance-template-card.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.instance-template-card span {
  width: max-content;
  padding: 4px 7px;
  border-radius: 7px;
  background: rgba(182, 108, 255, 0.2);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
}

.instance-template-card small {
  color: var(--muted);
}

.instance-wizard-option {
  align-self: end;
}

.instances-workspace {
  display: contents;
}

.instances-main-shell,
.instances-table-panel,
.instances-details-panel,
.instance-workspace-card {
  min-width: 0;
}

.instances-main-shell {
  grid-column: 1;
  grid-row: 3;
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 16px;
  min-height: calc(100vh - 250px);
}

.instances-table-panel {
  grid-column: 1;
  grid-row: 1;
}

.instances-details-panel {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  align-self: start;
  min-height: calc(100vh - 150px);
  border: 1px solid rgba(185, 171, 200, 0.16);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(31, 17, 49, 0.96), rgba(16, 9, 29, 0.98)),
    rgba(16, 10, 29, 0.96);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.instances-table-panel .docker-table-wrap {
  min-height: 100%;
  max-height: none;
  border: 1px solid rgba(185, 171, 200, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(26, 14, 43, 0.92), rgba(14, 8, 26, 0.96)),
    rgba(17, 21, 31, 0.82);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
}

.instance-name-cell {
  display: grid;
  gap: 4px;
}

.instance-name-cell strong {
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.3;
}

.instance-name-cell span,
.instance-meta-list {
  color: var(--muted);
  font-size: 0.8rem;
}

.instance-header-meta,
.instance-address-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

.instances-table {
  min-width: 820px;
}

.instances-table td,
.instances-table th {
  vertical-align: middle;
}

.instances-table th {
  color: rgba(224, 214, 239, 0.68);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.instances-table td {
  padding-top: 13px;
  padding-bottom: 13px;
}

.instances-table tbody tr {
  cursor: pointer;
  transition: background 140ms ease, box-shadow 140ms ease;
}

.instances-table tbody tr:hover {
  background: rgba(156, 111, 255, 0.08);
}

.instances-table tbody tr.is-selected {
  background: rgba(156, 111, 255, 0.13);
}

.instance-version-cell {
  display: grid;
  gap: 3px;
  align-items: center;
  justify-items: start;
}

.instance-version-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid rgba(185, 171, 200, 0.2);
  border-radius: 999px;
  background: rgba(156, 111, 255, 0.09);
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.35;
  white-space: nowrap;
}

.instance-version-cell small {
  color: rgba(224, 214, 239, 0.52);
  font-size: 0.68rem;
  line-height: 1.2;
  white-space: nowrap;
}

.instance-address-cell {
  min-width: 170px;
  flex-wrap: nowrap;
}

.instance-address-text {
  color: var(--text);
  font-size: 0.82rem;
  white-space: nowrap;
}

.instance-address-text.is-copyable {
  cursor: pointer;
}

.instance-address-text.is-copyable:hover {
  color: #d8c8ff;
}

.instance-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid rgba(156, 111, 255, 0.42);
  border-radius: 999px;
  background: rgba(156, 111, 255, 0.12);
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.instance-copy-button:hover:not(:disabled) {
  border-color: rgba(156, 111, 255, 0.72);
  background: rgba(156, 111, 255, 0.2);
}

.instance-copy-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.instance-workspace-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  border: 1px solid rgba(185, 171, 200, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(26, 14, 43, 0.92), rgba(14, 8, 26, 0.96)),
    rgba(17, 21, 31, 0.82);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.instance-workspace-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(185, 171, 200, 0.12);
}

.instance-workspace-card__header h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.instance-workspace-card__header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.download-item__logs {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.74rem;
}

.download-item__logs summary {
  cursor: pointer;
  width: max-content;
}

.download-item__logs pre {
  margin: 6px 0 0;
  padding: 8px;
  max-height: 140px;
  overflow: auto;
  border: 1px solid rgba(185, 171, 200, 0.16);
  border-radius: 8px;
  background: rgba(8, 10, 15, 0.42);
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Instances page premium workspace */
.page[data-page="instances"] {
  max-width: none;
}

.instances-shell {
  grid-template-columns: minmax(760px, 1fr) clamp(360px, 27vw, 420px);
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 12px;
  min-height: calc(100vh - 132px);
}

.instances-toolbar {
  grid-column: 1;
  grid-row: 1;
  display: block;
  min-height: 104px;
  padding: 18px 20px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 18% 10%, rgba(182, 108, 255, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(43, 20, 74, 0.82), rgba(12, 7, 22, 0.94));
}

.instances-toolbar__title h1 {
  margin: 3px 0 6px;
  font-size: 2.24rem;
}

.instances-summary-grid {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  min-width: 0;
}

.instances-summary-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 96px;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(185, 171, 200, 0.14);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(34, 18, 56, 0.95), rgba(13, 8, 24, 0.96)),
    rgba(17, 21, 31, 0.82);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.instances-summary-card::after {
  content: "";
  position: absolute;
  inset: auto 12px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199, 161, 255, 0.36), transparent);
}

.instances-summary-card:hover {
  transform: translateY(-2px);
  border-color: rgba(199, 161, 255, 0.28);
}

.instances-summary-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(199, 161, 255, 0.28);
  border-radius: 8px;
  background: rgba(156, 111, 255, 0.12);
  color: #d8c8ff;
  font-size: 0.76rem;
  font-weight: 900;
}

.instances-summary-card--running .instances-summary-card__icon {
  border-color: rgba(69, 224, 143, 0.34);
  background: rgba(69, 224, 143, 0.1);
  color: #8df7a7;
}

.instances-summary-card--stopped .instances-summary-card__icon {
  border-color: rgba(245, 196, 81, 0.32);
  background: rgba(245, 196, 81, 0.1);
  color: #ffd166;
}

.instances-summary-card--starting .instances-summary-card__icon {
  border-color: rgba(102, 170, 255, 0.34);
  background: rgba(102, 170, 255, 0.1);
  color: #9ecbff;
}

.instances-summary-card--attention .instances-summary-card__icon {
  border-color: rgba(255, 122, 122, 0.36);
  background: rgba(255, 122, 122, 0.12);
  color: #ffabab;
}

.instances-attention-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 122, 122, 0.28);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(64, 20, 30, 0.55), rgba(24, 10, 18, 0.85));
}

.instances-attention-strip[hidden] {
  display: none;
}

.instances-attention-strip strong {
  color: #ffb4b4;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.instances-attention-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 260px;
  padding: 4px 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 122, 122, 0.3);
  border-radius: 6px;
  background: rgba(255, 122, 122, 0.08);
  color: #ffd9d9;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instances-attention-item:hover {
  border-color: rgba(255, 122, 122, 0.55);
}

.instances-attention-item span {
  color: rgba(255, 217, 217, 0.66);
  font-weight: 600;
}

/* Label typography applies to the card's own label span only. The previous
   selector (`.instances-summary-card span:not(.instances-summary-card__icon)`)
   also matched the two value spans nested inside <strong> on the
   Starting/Stopping card, forcing them to display:block so "0 / 0" rendered as
   three stacked lines and lost the value typography. */
.instances-summary-card > div > span {
  display: block;
  color: rgba(224, 214, 239, 0.62);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.instances-summary-card strong {
  display: block;
  margin-top: 6px;
  overflow: hidden;
  color: var(--text);
  font-size: 1.22rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instances-controlbar {
  grid-column: 1;
  grid-row: 3;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(132px, 0.26fr) minmax(150px, 0.3fr) auto auto auto;
  gap: 10px;
  align-items: end;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(185, 171, 200, 0.14);
  border-radius: 8px;
  background: rgba(12, 7, 22, 0.78);
}

.instances-controlbar .docker-actions {
  grid-column: 4;
  justify-content: flex-end;
  flex-wrap: nowrap;
}

.instances-controlbar .instances-log-control {
  min-width: 94px;
}

.instances-main-shell {
  display: contents;
}

.instances-table-panel {
  grid-column: 1;
  grid-row: 4;
  min-height: calc(100vh - 396px);
}

.instances-table-panel .docker-table-wrap {
  min-height: calc(100vh - 396px);
  border-radius: 8px;
}

.instances-table {
  min-width: 1160px;
  border-collapse: separate;
  border-spacing: 0 6px;
}

.instances-table th {
  padding: 10px 12px;
  background: rgba(18, 8, 34, 0.98);
}

.instances-table td {
  padding: 12px;
  border-top: 1px solid rgba(185, 171, 200, 0.08);
  border-bottom: 1px solid rgba(185, 171, 200, 0.08);
  background: rgba(18, 10, 32, 0.52);
}

.instances-table td:first-child {
  border-left: 1px solid rgba(185, 171, 200, 0.08);
  border-radius: 8px 0 0 8px;
}

.instances-table td:last-child {
  border-right: 1px solid rgba(185, 171, 200, 0.08);
  border-radius: 0 8px 8px 0;
}

.instances-table tbody tr:hover td {
  background: rgba(156, 111, 255, 0.1);
}

.instances-table tbody tr.is-selected td {
  border-color: rgba(199, 161, 255, 0.24);
  background: rgba(156, 111, 255, 0.15);
}

.instances-table tbody tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 rgba(199, 161, 255, 0.9);
}

.instance-overview-list dd[data-instance-detail="command"],
.instance-overview-list dd[data-instance-detail="failureReason"] {
  overflow-wrap: anywhere;
  white-space: normal;
}

.instance-name-cell {
  grid-template-columns: minmax(0, 1fr);
}

.instance-name-cell strong {
  font-size: 0.94rem;
}

.page[data-page="instances"] .instances-table th:first-child,
.page[data-page="instances"] .instances-table td:first-child {
  width: 180px;
  min-width: 180px;
}

.page[data-page="instances"] .instance-name-cell strong,
.page[data-page="instances"] .instance-name-cell span {
  overflow-wrap: normal;
  word-break: normal;
}

.instance-metric-cell {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid rgba(185, 171, 200, 0.13);
  border-radius: 999px;
  background: rgba(8, 10, 15, 0.34);
  color: var(--text);
  font-size: 0.78rem;
  white-space: nowrap;
}

.instance-metric-cell.is-muted {
  color: rgba(224, 214, 239, 0.48);
}

.instance-tags-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  color: rgba(224, 214, 239, 0.5);
  font-size: 0.78rem;
}

.instance-tags-cell span {
  max-width: 94px;
  padding: 3px 7px;
  overflow: hidden;
  border: 1px solid rgba(199, 161, 255, 0.18);
  border-radius: 999px;
  background: rgba(156, 111, 255, 0.08);
  color: rgba(224, 214, 239, 0.78);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instance-access-badges {
  gap: 4px;
}

.instance-tags-cell .instance-access-badge {
  max-width: 124px;
  font-size: 0.7rem;
}

.instance-access-badge--ok {
  border-color: rgba(69, 224, 143, 0.22);
  background: rgba(69, 224, 143, 0.12);
  color: rgba(186, 255, 219, 0.9);
}

.instance-access-badge--warning {
  border-color: rgba(245, 196, 81, 0.22);
  background: rgba(245, 196, 81, 0.12);
  color: rgba(255, 231, 179, 0.9);
}

.instance-access-badge--critical {
  border-color: rgba(255, 107, 138, 0.24);
  background: rgba(255, 107, 138, 0.12);
  color: rgba(255, 214, 224, 0.92);
}

.instance-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  white-space: nowrap;
}

.instance-row-actions .inline-action {
  min-height: 28px;
  padding: 5px 8px;
  font-size: 0.72rem;
}

.instances-details-panel {
  grid-column: 2;
  grid-row: 1 / span 3;
  min-height: auto;
  border-radius: 8px;
}

.instances-inspector-sections {
  display: none;
}

.instance-workspace-card {
  grid-column: 2;
  grid-row: 4;
  min-height: calc(100vh - 396px);
  border-radius: 8px;
}

.instance-workspace-card__header {
  display: none;
}

.instance-tab-panel {
  padding: 14px;
}

.instance-tab-panel.is-active {
  align-content: start;
}

.instance-workspace-hero {
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
}

.instance-workspace-meta {
  justify-items: start;
  width: 100%;
}

.instance-overview-grid,
.instance-overview-grid--wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.instance-overview-list div {
  grid-template-columns: minmax(92px, 0.44fr) minmax(0, 1fr);
}

.instance-console-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.instance-console-toolbar input,
.instance-console-toolbar select {
  min-width: 0;
  width: 100%;
}

.instance-console-viewer {
  min-height: 360px;
  max-height: calc(100vh - 560px);
  border: 1px solid rgba(185, 171, 200, 0.14);
  border-radius: 8px;
  background: #070a10;
}

.instance-log-viewer ol {
  padding: 12px;
  font-size: 0.76rem;
}

.instance-log-viewer li {
  grid-template-columns: 88px 46px minmax(0, 1fr);
  gap: 8px;
}

.instance-console-input {
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  background: linear-gradient(180deg, transparent, rgba(14, 8, 26, 0.98) 28%);
}

.instance-console-input input {
  min-width: 0;
  flex: 1 1 160px;
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

.instance-files-grid,
.instance-config-form,
.instance-advanced-panel,
.instance-minecraft-summary,
.instance-minecraft-settings,
.instance-game-config {
  grid-template-columns: 1fr;
}

.instance-game-config {
  display: grid;
  grid-column: 1 / -1;
  align-self: start;
  align-content: start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
}

.instance-auto-start-toggle {
  grid-column: 1 / -1;
  justify-self: start;
  align-self: start;
  width: auto;
  height: 36px;
  max-width: max-content;
}

.instance-game-config[hidden] {
  display: none;
}

.instance-game-config-header,
.instance-game-config-toolbar,
.instance-game-config-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.instance-game-config-header h4 {
  margin: 0;
}

.instance-game-config-header span,
.instance-game-config-description,
.instance-game-config-status {
  color: var(--muted);
  font-size: 0.84rem;
}

.instance-game-config-search {
  flex: 1 1 240px;
}

.instance-game-config-status {
  min-height: 24px;
  padding: 6px 8px;
  border: 1px solid rgba(185, 171, 200, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.16);
}

.instance-game-config-status.is-error {
  border-color: rgba(255, 107, 138, 0.34);
  color: var(--danger);
}

.instance-game-config-layout {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.instance-game-config-sections,
.instance-game-config-fields {
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: stretch;
}

.instance-game-config-section {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(185, 171, 200, 0.2);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  text-align: left;
}

.instance-game-config-section.is-active,
.instance-game-config-section:focus-visible {
  border-color: rgba(93, 214, 255, 0.5);
  background: rgba(93, 214, 255, 0.12);
}

.instance-game-config-field {
  display: grid;
  gap: 6px;
  align-self: start;
  padding: 10px;
  border: 1px solid rgba(185, 171, 200, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.12);
}

.instance-game-config-field.is-boolean {
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
}

.instance-game-config-field.is-boolean .instance-game-config-field-label {
  grid-column: 2;
  grid-row: 1;
  min-height: 22px;
}

.instance-game-config-field.is-boolean input[type="checkbox"] {
  grid-column: 1;
  grid-row: 1;
  margin-top: 2px;
}

.instance-game-config-field.is-boolean .instance-game-config-description,
.instance-game-config-field.is-boolean .instance-game-config-error {
  grid-column: 2;
}

.instance-game-config-field.is-modified {
  border-color: rgba(245, 196, 81, 0.42);
  background: rgba(245, 196, 81, 0.08);
}

.instance-game-config-field[data-restart-required="true"] .instance-game-config-field-label::after {
  content: "Restart";
  margin-left: 8px;
  color: #f5c451;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.instance-game-config-field-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 700;
}

.instance-game-config-field-label small {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.instance-game-config-field input,
.instance-game-config-field select,
.instance-game-config-field textarea {
  width: 100%;
}

.instance-game-config-field input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.instance-game-config-error {
  color: var(--danger);
  font-size: 0.82rem;
}

@media (max-width: 760px) {
  .instance-game-config-layout {
    grid-template-columns: 1fr;
  }

  .instance-game-config-sections {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
  }
}

.instance-files-grid {
  min-height: 0;
}

.instance-file-editor textarea,
.instance-raw-json {
  min-height: 260px;
}

.instance-state {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(185, 171, 200, 0.26);
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.instance-state.is-running,
.instance-state.is-ready {
  border-color: rgba(69, 224, 143, 0.34);
  background: rgba(69, 224, 143, 0.1);
  color: var(--success);
}

.instance-state.is-starting,
.instance-state.is-restarting,
.instance-state.is-reloading,
.instance-state.is-stopping,
.instance-state.is-setup-required {
  border-color: rgba(245, 196, 81, 0.34);
  background: rgba(245, 196, 81, 0.1);
  color: #f5c451;
}

.instance-state.is-failed {
  border-color: rgba(255, 107, 138, 0.36);
  background: rgba(255, 107, 138, 0.1);
  color: var(--danger);
}

.instance-setup-required-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(245, 196, 81, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(245, 196, 81, 0.08);
}

.instance-setup-required-card div {
  display: grid;
  gap: 4px;
}

.instance-setup-required-card strong {
  color: #f5c451;
}

.instance-setup-required-card span {
  color: var(--muted);
  font-size: 0.86rem;
}

.fivem-setup-form {
  display: grid;
  gap: 14px;
}

.instance-log-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(13, 7, 22, 0.82);
  overflow: hidden;
}

.instance-workspace-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(185, 171, 200, 0.12);
}

.instance-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(182, 108, 255, 0.38);
  border-radius: 8px;
  background: rgba(156, 111, 255, 0.13);
  color: #d8c8ff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.instance-workspace-header h3 {
  margin: 0 0 4px;
  overflow: hidden;
  color: var(--text);
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instance-workspace-header span:not(.instance-state) {
  color: var(--muted);
  font-size: 0.82rem;
}

.instance-workspace-header .instance-header-meta {
  margin-top: 8px;
}

.instance-workspace-header .instance-header-meta span {
  padding: 3px 8px;
  border: 1px solid rgba(185, 171, 200, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.76rem;
}

.instance-quick-actions {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(185, 171, 200, 0.12);
  background: rgba(8, 10, 15, 0.24);
  pointer-events: auto;
}

.instance-quick-actions .inline-action {
  position: relative;
  z-index: 1;
  min-height: 32px;
  padding: 7px 9px;
  pointer-events: auto;
}

.instance-quick-actions .instance-danger-action {
  border-color: rgba(255, 107, 138, 0.34);
  color: #ff8fa8;
}

.instance-tabs {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(185, 171, 200, 0.12);
  background: rgba(8, 10, 15, 0.34);
}

.instance-tab {
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.instance-tab.is-active {
  border-color: rgba(182, 108, 255, 0.45);
  background: var(--accent-soft);
  color: var(--text);
}

.instance-tab-panel {
  display: none;
  padding: 18px;
  min-width: 0;
  overflow: auto;
  max-height: none;
}

.instance-tab-panel.is-active {
  display: grid;
  gap: 14px;
}

.instance-overview-section {
  display: grid;
  gap: 10px;
}

.instance-overview-section h4 {
  margin: 0;
  color: rgba(224, 214, 239, 0.82);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.instance-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.instance-overview-grid--wide {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.instance-overview-grid article {
  padding: 10px;
  border: 1px solid rgba(185, 171, 200, 0.12);
  border-radius: 8px;
  background: rgba(8, 10, 15, 0.44);
}

.instance-overview-grid span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.instance-overview-list {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(185, 171, 200, 0.12);
  border-radius: 8px;
  background: rgba(8, 10, 15, 0.28);
}

.instance-overview-list div {
  display: grid;
  grid-template-columns: minmax(96px, 0.42fr) minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(185, 171, 200, 0.09);
}

.instance-overview-list div:last-child {
  border-bottom: 0;
}

.instance-overview-list dt {
  color: rgba(224, 214, 239, 0.58);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.instance-overview-list dd {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 0.8rem;
  text-align: right;
  overflow-wrap: anywhere;
}

.instance-overview-list .instance-copy-button {
  flex: 0 0 auto;
}

.instances-inspector-sections {
  display: grid;
  gap: 14px;
  padding: 16px;
  overflow: auto;
}

.instances-inspector-panel .instance-overview-grid {
  grid-template-columns: 1fr;
}

.instance-workspace-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(185, 171, 200, 0.12);
  border-radius: 12px;
  background:
    radial-gradient(circle at top right, rgba(156, 111, 255, 0.14), transparent 40%),
    rgba(11, 7, 20, 0.56);
}

.instance-workspace-label {
  display: block;
  margin-bottom: 7px;
  color: rgba(224, 214, 239, 0.58);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.instance-workspace-hero strong {
  display: block;
  color: var(--text);
  font-size: 1.18rem;
}

.instance-workspace-hero small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
}

.instance-workspace-meta {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.instance-workspace-address {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 0.84rem;
}

.instance-settings-section {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(185, 171, 200, 0.12);
  border-radius: 12px;
  background: rgba(8, 10, 15, 0.24);
}

.instance-minecraft-summary,
.instance-minecraft-settings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(182, 108, 255, 0.28);
  border-radius: var(--radius);
  background: rgba(182, 108, 255, 0.07);
}

.instance-app-profile {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  margin-bottom: 14px;
  border: 1px solid rgba(185, 148, 255, 0.18);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(96, 49, 162, 0.22), rgba(15, 5, 29, 0.72));
}

.instance-app-profile strong {
  display: block;
  color: var(--text);
}

.instance-app-profile span:last-child {
  color: var(--muted);
}

.instance-minecraft-summary h4,
.instance-minecraft-settings h4 {
  grid-column: 1 / -1;
  margin: 0;
}

.instance-console-toolbar,
.instance-files-toolbar,
.instance-console-input,
.instance-network-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.instance-console-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  padding: 10px 0;
  background: rgba(11, 5, 22, 0.94);
  backdrop-filter: blur(12px);
}

.instance-console-input {
  position: sticky;
  bottom: 0;
  z-index: 4;
  padding: 10px 0;
  border-top: 1px solid rgba(185, 148, 255, 0.14);
  background: rgba(11, 5, 22, 0.94);
  backdrop-filter: blur(12px);
}

.instance-console-toolbar input,
.instance-console-toolbar select,
.instance-console-input input,
.instance-network-row input,
.instance-network-list input,
.instance-network-list select {
  min-width: 180px;
}

.instance-console-input input {
  flex: 1 1 240px;
}

.instance-log-viewer li.is-stderr {
  color: #ff9ab1;
}

.instance-log-viewer li.is-warn {
  color: #ffd166;
}

.instance-log-viewer li.is-error {
  color: #ff8fa3;
}

.instance-log-viewer li.is-stdin {
  color: #c7a1ff;
}

.ansi-red {
  color: #ff8fa3;
}

.ansi-green {
  color: #8df7a7;
}

.ansi-yellow {
  color: #ffd166;
}

.ansi-blue {
  color: #93c5fd;
}

.ansi-magenta {
  color: #d8b4fe;
}

.ansi-cyan {
  color: #67e8f9;
}

.ansi-white {
  color: #f8fafc;
}

.ansi-gray,
.ansi-black {
  color: #94a3b8;
}

.instance-file-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.instance-file-shortcut {
  border: 1px solid rgba(185, 148, 255, 0.2);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--text);
  background: rgba(124, 70, 210, 0.13);
  cursor: pointer;
}

.instance-file-shortcut:hover {
  border-color: rgba(211, 186, 255, 0.5);
  background: rgba(139, 92, 246, 0.22);
}

.instance-network-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.instance-network-summary article {
  padding: 12px;
  border: 1px solid rgba(185, 148, 255, 0.16);
  border-radius: 8px;
  background: rgba(15, 5, 29, 0.58);
}

.instance-network-summary span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.instance-network-summary strong {
  color: var(--text);
  overflow-wrap: anywhere;
}

.instance-backup-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.instance-backup-panel .docker-empty-state {
  position: static;
  min-height: 180px;
  border: 1px solid rgba(185, 148, 255, 0.16);
  border-radius: 8px;
  background: rgba(15, 5, 29, 0.42);
}

.instance-backup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.instance-files-grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.82fr) minmax(520px, 1.35fr);
  align-items: stretch;
  gap: 10px;
  min-height: clamp(470px, 55vh, 660px);
  height: clamp(470px, calc(100vh - 320px), 680px);
  max-height: calc(100vh - 280px);
  min-width: 0;
  overflow: hidden;
}

.instance-file-browser,
.instance-file-editor {
  min-height: 0;
  min-width: 0;
  height: 100%;
  border: 1px solid rgba(185, 148, 255, 0.16);
  border-radius: 8px;
  background: rgba(11, 5, 22, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.instance-file-browser {
  overflow: auto;
  overscroll-behavior: contain;
}

.instance-files-table {
  min-width: 560px;
}

.instance-files-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(18, 8, 34, 0.96);
  color: rgba(231, 224, 246, 0.72);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.instance-files-table td,
.instance-files-table th {
  padding: 9px 10px;
}

.instance-files-table tr {
  transition: background 140ms ease, box-shadow 140ms ease;
}

.instance-files-table tbody tr:hover {
  background: rgba(139, 92, 246, 0.11);
}

.instance-files-table tbody tr.is-selected {
  background: rgba(139, 92, 246, 0.2);
  box-shadow: inset 3px 0 0 rgba(199, 161, 255, 0.9);
}

.instance-files-table tbody tr.is-directory .file-entry-icon {
  background: rgba(83, 180, 255, 0.16);
  border-color: rgba(125, 211, 252, 0.28);
  color: #bae6fd;
}

.instance-file-name .file-entry-icon {
  width: 44px;
  min-width: 44px;
}

.instance-file-name .file-entry-name-text span {
  max-width: 20vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.instance-file-dropzone {
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}

.instance-file-dropzone.is-dragging {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.instance-file-editor {
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

.instance-file-editor .panel-heading {
  align-items: start;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid rgba(185, 148, 255, 0.14);
  background: rgba(18, 8, 34, 0.78);
}

.instance-file-editor .panel-heading h3 {
  margin-bottom: 4px;
  overflow-wrap: anywhere;
}

.instance-file-editor-meta {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}

.instance-file-editor textarea,
.instance-raw-json {
  width: 100%;
  min-height: clamp(410px, 48vh, 590px);
  border: 0;
  background: #090c12;
  color: var(--text);
  padding: 16px;
  font: 0.84rem/1.55 "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

.instance-file-editor textarea {
  height: 100%;
  min-height: 0;
  overflow: auto;
  resize: none;
  outline: none;
  tab-size: 2;
}

.instance-raw-json {
  resize: vertical;
}

.instance-file-editor textarea:focus {
  box-shadow: inset 0 0 0 1px rgba(199, 161, 255, 0.28);
}

.instance-config-form,
.instance-advanced-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

.instance-config-form .ssh-connection-actions,
.instance-raw-json,
.instance-danger-zone {
  grid-column: 1 / -1;
}

.instance-network-list {
  display: grid;
  gap: 10px;
}

.instance-network-row {
  justify-content: space-between;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 10, 15, 0.42);
}

.instance-danger-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 107, 138, 0.36);
  border-radius: var(--radius);
  background: rgba(255, 107, 138, 0.08);
}

.instance-log-viewer {
  position: relative;
  min-height: 260px;
  max-height: 420px;
  overflow: auto;
  background: #090c12;
}

.instance-log-viewer ol {
  list-style: none;
  margin: 0;
  padding: 12px 14px;
  display: grid;
  gap: 6px;
  font-family: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.79rem;
  line-height: 1.55;
}

.instance-log-viewer li {
  display: grid;
  grid-template-columns: 155px 58px minmax(0, 1fr);
  gap: 10px;
  color: #d8d0e4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.instance-log-viewer time,
.instance-log-stream {
  color: #8e7aa7;
}

.instance-log-stream {
  text-transform: uppercase;
  font-weight: 700;
}

.page[data-page="instances"] .instances-main-shell {
  display: contents;
}

.page[data-page="instances"] .instance-workspace-card {
  grid-column: 2;
  grid-row: 4;
  grid-template-rows: minmax(0, 1fr);
  min-height: calc(100vh - 396px);
  border-radius: 8px;
}

.page[data-page="instances"] .instance-workspace-card__header,
.page[data-page="instances"] .instances-inspector-sections {
  display: none;
}

.page[data-page="instances"] .instance-tab-panel {
  padding: 14px;
}

.page[data-page="instances"] .instance-overview-grid,
.page[data-page="instances"] .instance-overview-grid--wide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page[data-page="instances"] .instance-console-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.page[data-page="instances"] .instance-console-toolbar input,
.page[data-page="instances"] .instance-console-toolbar select {
  min-width: 0;
  width: 100%;
}

.page[data-page="instances"] .instance-console-viewer {
  min-height: 360px;
  max-height: calc(100vh - 560px);
  border: 1px solid rgba(185, 171, 200, 0.14);
  border-radius: 8px;
  background: #070a10;
}

.page[data-page="instances"] .instance-log-viewer ol {
  padding: 12px;
  font-size: 0.76rem;
}

.page[data-page="instances"] .instance-log-viewer li {
  grid-template-columns: 88px 46px minmax(0, 1fr);
  gap: 8px;
}

.page[data-page="instances"] .instance-console-input {
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  background: linear-gradient(180deg, transparent, rgba(14, 8, 26, 0.98) 28%);
}

.page[data-page="instances"] .instance-files-grid,
.page[data-page="instances"] .instance-config-form,
.page[data-page="instances"] .instance-advanced-panel,
.page[data-page="instances"] .instance-minecraft-summary,
.page[data-page="instances"] .instance-minecraft-settings {
  grid-template-columns: 1fr;
}

.page[data-page="instances"] .instance-files-grid {
  min-height: 0;
}

.page[data-page="instances"] .instance-file-editor textarea,
.page[data-page="instances"] .instance-raw-json {
  min-height: 260px;
}

.page[data-page="instances"] .instance-workspace-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.page[data-page="instances"] [data-instance-panel="console"] {
  min-height: 0;
}

.page[data-page="instances"] [data-instance-panel="console"].is-active {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
}

.page[data-page="instances"] [data-instance-panel="console"] .instance-console-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(185, 171, 200, 0.12);
  background:
    linear-gradient(180deg, rgba(18, 8, 34, 0.98), rgba(13, 7, 22, 0.96)),
    rgba(13, 7, 22, 0.96);
}

.page[data-page="instances"] [data-instance-panel="console"] .instance-console-toolbar__row {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.page[data-page="instances"] [data-instance-panel="console"] .instance-console-toolbar__row:first-child {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

.page[data-page="instances"] [data-instance-panel="console"] .instance-console-toolbar__row:last-child {
  flex: 1 1 320px;
  flex-wrap: nowrap;
}

.page[data-page="instances"] [data-instance-panel="console"] .console-toggle {
  width: auto;
  min-height: 30px;
  gap: 6px;
  padding: 0 9px;
  border-color: rgba(185, 171, 200, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.page[data-page="instances"] [data-instance-panel="console"] .console-toggle input {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin: 0;
}

.page[data-page="instances"] [data-instance-panel="console"] .console-toggle span {
  line-height: 1;
}

.page[data-page="instances"] [data-instance-panel="console"] .inline-action {
  min-height: 28px;
  padding: 5px 8px;
  font-size: 0.72rem;
}

.page[data-page="instances"] [data-instance-panel="console"] select,
.page[data-page="instances"] [data-instance-panel="console"] input[type="search"] {
  min-width: 0;
  width: 100%;
  min-height: 30px;
  height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 8px;
  font-size: 0.76rem;
}

.page[data-page="instances"] [data-instance-panel="console"] select {
  flex: 0 0 132px;
}

.page[data-page="instances"] [data-instance-panel="console"] input[type="search"] {
  flex: 1 1 180px;
}

.page[data-page="instances"] [data-instance-panel="console"] .instance-console-viewer {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: #070a10;
}

.page[data-page="instances"] [data-instance-panel="console"] .instance-log-viewer ol {
  min-height: 100%;
}

.page[data-page="instances"] [data-instance-panel="console"] .instance-log-viewer:not(.is-wrapped) li {
  white-space: pre;
}

.page[data-page="instances"] [data-instance-panel="console"] .instance-log-viewer:not(.is-wrapped) li span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.page[data-page="instances"] [data-instance-panel="console"] .instance-log-viewer.is-wrapped li {
  white-space: pre-wrap;
}

.page[data-page="instances"] [data-instance-panel="console"] .instance-console-input {
  position: sticky;
  bottom: 0;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 10px;
  border-top: 1px solid rgba(185, 171, 200, 0.12);
  background: rgba(13, 7, 22, 0.98);
}

.page[data-page="instances"] [data-instance-panel="console"] .instance-console-input input {
  min-width: 0;
  flex: 1 1 auto;
}

.page[data-page="instances"] .instance-quick-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 10px 12px;
}

.page[data-page="instances"] .instance-quick-actions .inline-action {
  min-height: 28px;
  padding: 5px 7px;
  font-size: 0.7rem;
}

.page[data-page="instances"] .inline-action:disabled,
.page[data-page="instances"] .instance-row-actions .inline-action:disabled {
  opacity: 0.42;
  filter: saturate(0.72);
  cursor: not-allowed;
}

.page[data-page="instances"] .instance-row-actions {
  gap: 4px;
}

.page[data-page="instances"] .instance-row-actions .inline-action {
  min-height: 26px;
  padding: 4px 7px;
}

/* Instances 3-zone layout: top controls, main table, bottom drawer */
.page[data-page="instances"] .instances-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto minmax(360px, 1fr) auto auto;
  gap: 12px;
  min-height: calc(100vh - 132px);
  overflow: visible;
}

.page[data-page="instances"] .instances-toolbar,
.page[data-page="instances"] .instances-summary-grid,
.page[data-page="instances"] .instances-controlbar,
.page[data-page="instances"] .instance-create-form,
.page[data-page="instances"] .instances-table-panel,
.page[data-page="instances"] .instances-details-panel,
.page[data-page="instances"] .instance-workspace-card {
  grid-column: 1;
}

.page[data-page="instances"] .instances-toolbar {
  grid-row: 1;
  min-height: 92px;
}

.page[data-page="instances"] .instances-summary-grid {
  grid-row: 2;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
}

.page[data-page="instances"] .instances-controlbar {
  grid-row: 3;
  grid-template-columns: minmax(280px, 1fr) minmax(150px, 0.22fr) minmax(170px, 0.24fr) auto auto auto;
}

.page[data-page="instances"] .instances-controlbar .docker-actions {
  grid-column: 4;
}

.page[data-page="instances"] .instance-create-form {
  grid-row: 4;
}

.page[data-page="instances"] .instances-main-shell {
  display: contents;
}

.page[data-page="instances"] .instances-table-panel {
  grid-row: 5;
  min-height: clamp(360px, 46vh, 620px);
}

.page[data-page="instances"] .instances-table-panel .docker-table-wrap {
  min-height: clamp(360px, 46vh, 620px);
  max-height: none;
  border-radius: 8px;
}

.page[data-page="instances"] .instances-table {
  min-width: 1180px;
}

.page[data-page="instances"] .instances-details-panel {
  grid-row: 6;
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: center;
  min-height: 0;
  overflow: hidden;
  border-radius: 10px 10px 0 0;
  background:
    linear-gradient(180deg, rgba(31, 17, 49, 0.96), rgba(16, 9, 29, 0.98)),
    rgba(16, 10, 29, 0.96);
}

.page[data-page="instances"] .instances-details-panel[hidden],
.page[data-page="instances"] .instance-workspace-card[hidden] {
  display: none;
}

.page[data-page="instances"] .instance-workspace-header {
  grid-column: 1 / -1;
  grid-row: 1;
  border-bottom: 0;
}

.ssh-tab-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  gap: 6px;
  align-items: stretch;
}

.ssh-tab-remove {
  border: 1px solid rgba(255, 107, 138, 0.2);
  border-radius: 8px;
  background: rgba(255, 107, 138, 0.08);
  color: var(--muted);
  font: inherit;
  font-size: 1.05rem;
  cursor: pointer;
}

.ssh-tab-remove:hover:not(:disabled) {
  border-color: rgba(255, 107, 138, 0.48);
  color: #ff9bb0;
}

.ssh-tab-remove:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.page[data-page="files"] {
  width: 100%;
  max-width: none;
}

.page[data-page="files"] .file-manager-shell {
  grid-template-columns: clamp(260px, 18vw, 320px) 10px minmax(0, 1fr);
}

.page[data-page="instances"] .instance-workspace-header h3 {
  font-size: 1.12rem;
}

.page[data-page="instances"] .instance-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.page[data-page="instances"] .instance-quick-actions {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 0 16px 14px;
  border-bottom: 1px solid rgba(185, 171, 200, 0.1);
  background: transparent;
}

.page[data-page="instances"] .instance-quick-actions .inline-action {
  min-width: 74px;
}

.page[data-page="instances"] .instance-tabs {
  grid-column: 1 / -1;
  grid-row: 3;
  padding: 8px 14px 12px;
  border-top: 1px solid rgba(185, 171, 200, 0.1);
  border-bottom: 1px solid rgba(185, 171, 200, 0.12);
  background: rgba(8, 10, 15, 0.24);
}

.page[data-page="instances"] .instance-workspace-card {
  grid-row: 7;
  display: flex;
  flex-direction: column;
  min-height: clamp(340px, 42vh, 620px);
  max-height: none;
  overflow: hidden;
  border-top: 0;
  border-radius: 0 0 10px 10px;
}

.page[data-page="instances"] .instance-workspace-card__header,
.page[data-page="instances"] .instances-inspector-sections,
.page[data-page="instances"] .instance-workspace-hero {
  display: none;
}

.page[data-page="instances"] .instance-tab-panel {
  min-height: 0;
  overflow: auto;
}

.page[data-page="instances"] .instance-tab-panel.is-active {
  flex: 1 1 auto;
}

.page[data-page="instances"] [data-instance-panel="overview"].is-active {
  display: block;
  padding: 16px;
}

.page[data-page="instances"] .instance-overview-drawer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.page[data-page="instances"] .instance-overview-section {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(185, 171, 200, 0.12);
  border-radius: 8px;
  background: rgba(8, 10, 15, 0.24);
}

.page[data-page="instances"] .instance-overview-section .instance-overview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page[data-page="instances"] .instance-overview-list {
  border: 0;
  background: transparent;
}

.page[data-page="instances"] .instance-overview-list div {
  grid-template-columns: minmax(98px, 0.36fr) minmax(0, 1fr);
  padding-inline: 0;
}

.page[data-page="instances"] .instance-minecraft-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.page[data-page="instances"] .instance-minecraft-summary[hidden] {
  display: none;
}

.page[data-page="instances"] .instance-minecraft-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(182, 108, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(35, 17, 58, 0.5), rgba(10, 6, 18, 0.34)),
    rgba(8, 10, 15, 0.24);
}

.page[data-page="instances"] .instance-minecraft-card h4 {
  margin: 0 0 10px;
  color: rgba(224, 214, 239, 0.82);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page[data-page="instances"] .instance-minecraft-card .docker-details-list {
  border: 0;
  background: transparent;
}

.page[data-page="instances"] .instance-minecraft-card .docker-details-list div {
  grid-template-columns: minmax(88px, 0.46fr) minmax(0, 1fr);
  padding: 7px 0;
}

/* V2-E players tab: read-only Minecraft player roster cards. */
.instance-minecraft-players {
  display: grid;
  gap: 12px;
}

.instance-minecraft-players[hidden] {
  display: none;
}

.instance-minecraft-players-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.instance-minecraft-players-card h4 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.instance-minecraft-players-path {
  color: rgba(224, 214, 239, 0.45);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.instance-minecraft-players-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.instance-minecraft-players-count {
  margin: 0;
  color: rgba(224, 214, 239, 0.62);
  font-size: 0.8rem;
}

.instance-minecraft-players-list {
  margin: 0;
  padding: 0 0 0 16px;
  color: rgba(233, 226, 245, 0.85);
  font-size: 0.82rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.instance-minecraft-players-state {
  color: rgba(224, 214, 239, 0.55);
  font-size: 0.8rem;
}

.instance-minecraft-players-note {
  margin: 0;
  color: rgba(224, 214, 239, 0.5);
  font-size: 0.75rem;
}

@media (max-width: 1280px) {
  .instance-minecraft-players-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .instance-minecraft-players-grid {
    grid-template-columns: 1fr;
  }
}

.page[data-page="instances"] [data-instance-panel="console"].is-active {
  height: clamp(340px, 46vh, 560px);
  min-height: 0;
  max-height: min(620px, calc(100vh - 260px));
  overflow: hidden;
}

.page[data-page="instances"] [data-instance-panel="console"] .instance-console-toolbar {
  padding: 10px 12px;
}

.page[data-page="instances"] .instance-console-toolbar__row:last-child {
  grid-template-columns: minmax(120px, 0.2fr) minmax(260px, 1fr) auto auto auto;
}

.page[data-page="instances"] [data-instance-panel="console"] .instance-console-viewer {
  min-height: 0;
  overflow: auto;
}

.page[data-page="instances"] [data-instance-panel="files"].is-active,
.page[data-page="instances"] [data-instance-panel="settings"].is-active,
.page[data-page="instances"] [data-instance-panel="backups"].is-active {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.page[data-page="instances"] .instance-files-grid {
  grid-template-columns: minmax(320px, 0.75fr) minmax(480px, 1.25fr);
  min-height: 360px;
  height: clamp(360px, calc(100vh - 300px), 620px);
  max-height: calc(100vh - 260px);
}

.page[data-page="instances"] .instance-config-form,
.page[data-page="instances"] .instance-advanced-panel,
.page[data-page="instances"] .instance-minecraft-summary,
.page[data-page="instances"] .instance-minecraft-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page[data-page="instances"] .instance-row-actions {
  gap: 4px;
}

.page[data-page="instances"] .instance-row-actions .inline-action {
  min-width: 0;
}

.coolpals-shell {
  display: grid;
  gap: 14px;
}

.coolpals-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.coolpals-summary-card {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 96px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.82);
}

.coolpals-summary-card span:not(.service-icon) {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.coolpals-summary-card strong {
  color: var(--text);
  font-size: 1.2rem;
}

.coolpals-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.34fr);
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.74);
}

.coolpals-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.coolpals-search {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.coolpals-search input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.coolpals-search input:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.coolpals-workspace {
  display: grid;
  grid-template-columns: minmax(420px, 1.25fr) minmax(240px, 0.75fr);
  gap: 14px;
  align-items: stretch;
}

.coolpals-main-panel,
.coolpals-info-panel,
.coolpals-activity-panel,
.coolpals-log-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.82);
  overflow: hidden;
}

.coolpals-main-panel {
  min-height: min(420px, calc(100vh - 380px));
}

.coolpals-log-panel {
  min-height: 300px;
}

.coolpals-panel-header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.coolpals-panel-header h3 {
  margin-bottom: 0;
}

.coolpals-panel-header > span:not(.status-pill) {
  color: var(--muted);
  font-size: 0.84rem;
}

.coolpals-table-wrap {
  position: relative;
  min-height: calc(min(420px, calc(100vh - 380px)) - 50px);
  overflow: auto;
}

.coolpals-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.coolpals-table th,
.coolpals-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.coolpals-table th {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.coolpals-empty-state,
.coolpals-loading-state,
.coolpals-feed-empty,
.coolpals-log-empty {
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.coolpals-empty-state,
.coolpals-loading-state {
  position: absolute;
  inset: 0;
}

.coolpals-empty-state strong,
.coolpals-loading-state strong,
.coolpals-feed-empty strong,
.coolpals-log-empty strong {
  color: var(--text);
}

.coolpals-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 34px;
  margin: 0 auto 4px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--accent-soft);
}

.coolpals-icon::before,
.coolpals-icon::after {
  position: absolute;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  content: "";
}

.coolpals-icon::before {
  left: 12px;
}

.coolpals-icon::after {
  right: 12px;
}

.coolpals-info-panel {
  padding-bottom: 14px;
}

.coolpals-info-list {
  gap: 14px;
  padding: 14px;
}

.coolpals-feed-empty {
  min-height: 196px;
}

.coolpals-log-viewer {
  position: relative;
  height: clamp(220px, 34vh, 360px);
  min-height: 0;
  max-height: min(400px, calc(100vh - 340px));
  overflow: auto;
  color: #d7deea;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.9rem;
}

.coolpals-log-viewer ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 14px;
  list-style: none;
}

.coolpals-log-empty {
  position: absolute;
  inset: 0;
}

.backup-shell {
  display: grid;
  gap: 14px;
}

.backup-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.backup-summary-card {
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 96px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.82);
}

.backup-summary-card span:not(.service-icon) {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.backup-summary-card strong {
  color: var(--text);
  font-size: 1.2rem;
}

.backup-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.74);
}

.backup-search {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.backup-search input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}

.backup-search input:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.backup-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.backup-workspace {
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(260px, 0.36fr);
  gap: 14px;
  align-items: stretch;
}

.backup-table-panel,
.backup-side-panel,
.backup-panel-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.82);
  overflow: hidden;
}

.backup-table-panel,
.backup-side-panel {
  min-height: min(560px, calc(100vh - 330px));
}

.backup-side-panel {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  border: 0;
  background: transparent;
}

.backup-panel-header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.backup-panel-header h3 {
  margin-bottom: 0;
}

.backup-table-wrap {
  position: relative;
  min-height: calc(min(560px, calc(100vh - 330px)) - 50px);
  overflow: auto;
}

.backup-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.backup-table th,
.backup-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.backup-table th {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.backup-empty-state,
.backup-loading-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

.backup-empty-state strong,
.backup-loading-state strong,
.backup-restore-state strong {
  color: var(--text);
}

.backup-icon {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 40px;
  margin: 0 auto 4px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
}

.backup-icon::before,
.backup-icon::after {
  position: absolute;
  content: "";
}

.backup-icon::before {
  top: 9px;
  left: 9px;
  width: 28px;
  height: 20px;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: var(--accent);
}

.backup-icon::after {
  top: 16px;
  left: 18px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent);
  border-right-color: transparent;
  border-radius: 999px;
}

.backup-details-list {
  gap: 14px;
  padding: 14px;
}

.backup-restore-state {
  display: grid;
  gap: 12px;
  align-content: center;
  min-height: 210px;
  padding: 18px;
  color: var(--muted);
}

.settings-shell {
  display: grid;
  gap: 14px;
}

.settings-section {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-panel);
  box-shadow: var(--panel-shadow), var(--anx-shadow-inset);
}

.settings-section__header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.settings-section__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.settings-section__header h3 {
  margin-bottom: 0;
}

.settings-grid,
.settings-about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.settings-grid--compact {
  margin-bottom: 16px;
}

.settings-note {
  margin: -4px 0 14px;
  color: var(--muted);
  line-height: 1.5;
}

.settings-note code {
  color: var(--text);
}

.settings-field {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.settings-field--actions {
  align-content: end;
}

.settings-field--actions .inline-action {
  min-height: 40px;
  justify-content: center;
}

.settings-field--wide {
  grid-column: 1 / -1;
}

.owner-nav-pages {
  display: grid;
  gap: 4px;
  margin-top: 6px;
  padding-left: 10px;
  overflow: hidden;
  animation: ownerNavReveal 160ms ease-out;
}

.owner-workspace-toggle {
  position: relative;
}

.owner-workspace-toggle .nav-item__badge {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid rgba(182, 108, 255, 0.34);
  border-radius: 999px;
  color: var(--accent-2);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.owner-workspace-chevron {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  transition: transform 160ms ease, color 160ms ease;
}

.nav-section--owner.is-expanded .owner-workspace-chevron {
  transform: rotate(90deg);
  color: var(--text);
}

.owner-search--sidebar {
  min-height: 32px;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 0.76rem;
}

.owner-nav-group-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 0 2px;
  padding: 0 4px;
  color: var(--neutral);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.owner-nav-add {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  cursor: pointer;
}

.owner-nav-add:hover {
  border-color: rgba(182, 108, 255, 0.4);
  background: rgba(182, 108, 255, 0.14);
}

.owner-nav-empty {
  display: block;
  padding: 4px 10px 6px;
  color: var(--neutral);
  font-size: 0.72rem;
}

.owner-nav-page {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
}

.owner-nav-page::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--owner-accent, var(--accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--owner-accent, var(--accent)) 55%, transparent);
}

.owner-nav-page:hover,
.owner-nav-page.is-active {
  border-color: rgba(182, 108, 255, 0.24);
  background: rgba(182, 108, 255, 0.1);
  color: var(--text);
}

@keyframes ownerNavReveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-field input,
.settings-field select,
.settings-field textarea {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-md);
  background: rgba(3, 1, 7, 0.72);
  color: var(--text);
  font: inherit;
}

.settings-field textarea {
  min-height: 96px;
  padding: 10px 12px;
  resize: vertical;
}

.settings-field-error {
  display: block;
  margin-top: -4px;
  color: #ff9fb3;
  font-size: 0.78rem;
  font-weight: 700;
}

.settings-field [aria-invalid="true"] {
  border-color: rgba(255, 107, 138, 0.7);
  box-shadow: 0 0 0 1px rgba(255, 107, 138, 0.18);
}

.settings-message {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(190, 170, 220, 0.18);
  border-radius: var(--anx-radius-md);
  background: rgba(7, 9, 14, 0.58);
  color: var(--muted);
  font-size: 0.86rem;
}

.settings-field input[type="color"] {
  padding: 4px;
}

.settings-field input:focus,
.settings-field select:focus,
.settings-field textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: var(--anx-focus-ring);
}

.settings-check {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-control);
  color: var(--muted);
  font-weight: 700;
}

.settings-check input {
  accent-color: var(--accent);
}

.settings-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.settings-inline-status {
  color: var(--muted);
  font-size: 0.84rem;
}

.settings-about-grid div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-control);
}

.status-card__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 24px;
}

.service-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(182, 108, 255, 0.18);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-control-active);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
}

.status-card p {
  min-height: 72px;
  margin-bottom: 16px;
  color: var(--muted);
  line-height: 1.5;
}

dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

dl div {
  display: grid;
  gap: 4px;
}

dt {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
}

dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  border: 1px solid transparent;
}

.owner-only-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border: 1px solid rgba(182, 108, 255, 0.32);
  border-radius: 999px;
  background: rgba(182, 108, 255, 0.14);
  color: rgba(235, 221, 255, 0.92);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.status-pill--manual,
.status-pill--local {
  background: var(--accent-soft);
  color: var(--accent);
}

.status-pill--external {
  background: rgba(245, 208, 255, 0.14);
  color: var(--warning);
}

.status-pill--planned {
  background: rgba(216, 180, 254, 0.14);
  color: var(--planned);
}

.status-pill--ok {
  background: rgba(69, 224, 143, 0.14);
  color: var(--success);
  border-color: rgba(69, 224, 143, 0.22);
}

.status-pill.is-connected {
  background: rgba(69, 224, 143, 0.14);
  color: var(--success);
  border-color: rgba(69, 224, 143, 0.22);
}

.status-pill.is-disconnected {
  background: rgba(216, 180, 254, 0.14);
  color: var(--planned);
  border-color: rgba(216, 180, 254, 0.18);
}

.status-pill.is-running {
  background: rgba(245, 196, 81, 0.14);
  color: var(--caution);
  border-color: rgba(245, 196, 81, 0.2);
}

.status-pill.is-stopped {
  background: rgba(255, 107, 138, 0.14);
  color: var(--danger);
  border-color: rgba(255, 107, 138, 0.2);
}

.status-pill.is-missing {
  background: rgba(168, 161, 181, 0.14);
  color: var(--neutral);
  border-color: rgba(168, 161, 181, 0.18);
}

[data-field="temperature"] {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(168, 161, 181, 0.16);
  background: rgba(168, 161, 181, 0.1);
  color: var(--neutral);
  font-weight: 700;
}

[data-field="temperature"][data-temperature-state="cool"] {
  border-color: rgba(69, 224, 143, 0.22);
  background: rgba(69, 224, 143, 0.12);
  color: var(--success);
}

[data-field="temperature"][data-temperature-state="warm"] {
  border-color: rgba(245, 196, 81, 0.22);
  background: rgba(245, 196, 81, 0.12);
  color: var(--caution);
}

[data-field="temperature"][data-temperature-state="hot"] {
  border-color: rgba(255, 151, 94, 0.24);
  background: rgba(255, 151, 94, 0.13);
  color: #ffb06f;
}

[data-field="temperature"][data-temperature-state="critical"] {
  border-color: rgba(255, 107, 138, 0.26);
  background: rgba(255, 107, 138, 0.14);
  color: var(--danger);
}

.playit-shell {
  display: grid;
  gap: 14px;
}

.public-access-shell {
  grid-template-columns: 1fr;
}

.public-access-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.2fr) minmax(320px, 0.8fr);
  gap: 14px;
  align-items: stretch;
}

.public-access-details {
  grid-column: 1 / -1;
}

.playit-status-card dl,
.public-access-details dl {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 18px;
}

.public-access-actions {
  margin-top: 14px;
}

.public-access-provider-actions {
  margin-top: 14px;
}

.public-access-unsupported {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.public-access-unsupported p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.public-access-provider-list {
  display: grid;
  gap: 10px;
}

.public-access-provider {
  appearance: none;
  width: 100%;
  color: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.58);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.public-access-provider:hover,
.public-access-provider:focus-visible,
.public-access-provider.is-selected {
  border-color: rgba(0, 229, 255, 0.42);
  background: rgba(0, 229, 255, 0.08);
}

.public-access-provider:focus-visible,
.playit-status-card[role="button"]:focus-visible {
  outline: 2px solid rgba(0, 229, 255, 0.56);
  outline-offset: 3px;
}

.public-access-provider small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.public-access-provider.is-supported {
  border-color: rgba(69, 224, 143, 0.36);
}

.public-access-provider.is-disabled {
  opacity: 0.72;
}

.playit-service-card,
.playit-tunnels-card {
  min-height: 0;
}

.playit-service-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.playit-service-actions .inline-action,
.playit-tunnel-copy {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 0.78rem;
}

.playit-tunnel-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.playit-tunnel-item {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-sm);
  background: rgba(17, 21, 31, 0.52);
}

.playit-tunnel-item__top,
.playit-tunnel-item__endpoints,
.playit-tunnel-item__badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.playit-tunnel-item__top strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.playit-tunnel-item__endpoints {
  color: var(--muted);
  font-size: 0.82rem;
}

.playit-tunnel-item__badges .status-pill {
  min-height: 20px;
  padding: 2px 7px;
  font-size: 0.68rem;
}

.playit-logs-card {
  grid-column: 1 / -1;
}

.playit-log-output {
  max-height: 220px;
  margin: 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-sm);
  background: rgba(5, 8, 14, 0.72);
  color: var(--text);
  font: 0.78rem/1.45 var(--font-mono);
  white-space: pre-wrap;
}

.playit-status-card {
  border-color: var(--line);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.playit-status-card[role="button"] {
  cursor: pointer;
}

.playit-status-card[role="button"]:hover {
  border-color: rgba(0, 229, 255, 0.38);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
}

.playit-status-card.is-connected {
  border-color: rgba(69, 224, 143, 0.46);
  box-shadow: 0 0 0 1px rgba(69, 224, 143, 0.12);
}

.playit-status-card.is-running {
  border-color: rgba(245, 196, 81, 0.46);
  box-shadow: 0 0 0 1px rgba(245, 196, 81, 0.12);
}

.playit-status-card.is-stopped {
  border-color: rgba(255, 107, 138, 0.46);
  box-shadow: 0 0 0 1px rgba(255, 107, 138, 0.12);
}

.playit-status-card.is-missing {
  border-color: rgba(168, 161, 181, 0.32);
}

.playit-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.playit-summary-grid.public-access-overview {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.playit-summary-card {
  display: grid;
  gap: 8px;
  min-height: 96px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.72);
}

.playit-summary-card span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.playit-summary-card strong {
  color: var(--text);
  font-size: 1.1rem;
}

.inline-action {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-sm);
  background: var(--anx-surface-control);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.inline-action:not(:disabled):hover,
.inline-action:not(:disabled):focus-visible {
  border-color: var(--accent);
  background: var(--anx-surface-control-hover);
  box-shadow: var(--anx-glow-sm);
  color: #ffffff;
  transform: translateY(-1px) scale(1.02);
  outline: none;
}

.inline-action:not(:disabled):active {
  transform: translateY(0) scale(0.98);
}

.inline-action--danger,
.inline-action.danger {
  border-color: rgba(255, 107, 138, 0.26);
  color: rgba(255, 214, 224, 0.94);
}

.inline-action--danger:not(:disabled):hover,
.inline-action--danger:not(:disabled):focus-visible,
.inline-action.danger:not(:disabled):hover,
.inline-action.danger:not(:disabled):focus-visible {
  border-color: rgba(255, 107, 138, 0.56);
  background:
    linear-gradient(180deg, rgba(255, 107, 138, 0.18), rgba(255, 107, 138, 0.08)),
    rgba(46, 15, 30, 0.92);
  box-shadow: 0 10px 24px rgba(58, 12, 29, 0.24);
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  max-width: min(360px, calc(100vw - 40px));
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-glass-strong);
  color: var(--text);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  box-shadow: var(--anx-shadow-elevated), var(--anx-shadow-inset);
  z-index: 20;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast[data-tone="success"] {
  border-color: rgba(69, 224, 143, 0.35);
  background: linear-gradient(135deg, rgba(24, 78, 52, 0.94), rgba(18, 8, 32, 0.96));
}

.toast[data-tone="error"] {
  border-color: rgba(255, 107, 138, 0.38);
  background: linear-gradient(135deg, rgba(96, 26, 48, 0.94), rgba(18, 8, 32, 0.96));
}

.toast[data-tone="warning"] {
  border-color: rgba(245, 196, 81, 0.38);
  background: linear-gradient(135deg, rgba(93, 64, 22, 0.94), rgba(18, 8, 32, 0.96));
}

.toast[data-tone="info"] {
  border-color: rgba(182, 108, 255, 0.32);
}

.notification-center {
  display: grid;
  gap: 14px;
}

.notification-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
}

.notification-summary-card,
.notification-item,
.notification-empty {
  border: 1px solid rgba(190, 170, 220, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(7, 9, 14, 0.34);
}

.notification-summary-card {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
}

.notification-summary-card div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.notification-summary-card span:not(.service-icon) {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.notification-summary-card strong {
  color: var(--text);
  font-size: 1.12rem;
}

.notification-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(190, 170, 220, 0.12);
  border-radius: 8px;
  background: rgba(7, 9, 14, 0.28);
}

.notification-toolbar select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(5, 7, 12, .72);
  color: var(--text);
  font: inherit;
  font-size: .84rem;
  padding: 0 34px 0 10px;
}

.notification-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

.notification-list {
  display: grid;
  gap: 10px;
}

.notification-item {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.notification-item[data-read="false"] {
  border-color: rgba(115, 220, 202, .28);
  box-shadow: inset 3px 0 0 rgba(115, 220, 202, .72);
}

.notification-item[data-severity="critical"],
.notification-item[data-severity="error"] {
  border-color: rgba(255, 107, 138, .3);
}

.notification-item__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.notification-item__title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.notification-item__title strong,
.notification-item p,
.notification-occurrences li {
  overflow-wrap: anywhere;
}

.notification-item__title small,
.notification-status {
  color: var(--muted);
}

.notification-item__badges,
.notification-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: flex-end;
}

.notification-item p {
  margin: 0;
  color: rgba(226, 216, 240, .82);
  line-height: 1.45;
}

.notification-occurrences,
.notification-technical {
  border-top: 1px solid rgba(190, 170, 220, .1);
  padding-top: 8px;
}

.notification-occurrences summary,
.notification-technical summary {
  cursor: pointer;
  color: rgba(238, 234, 246, .9);
  font-weight: 800;
}

.notification-occurrences ol {
  display: grid;
  gap: 5px;
  max-height: 160px;
  margin: 8px 0 0;
  overflow: auto;
  color: rgba(220, 244, 255, .84);
  font: .78rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.notification-technical pre {
  max-height: 180px;
  margin: 8px 0 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid rgba(190, 170, 220, .12);
  border-radius: 10px;
  background: rgba(3, 1, 8, .42);
  color: rgba(220, 244, 255, .84);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: .78rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.notification-empty {
  display: grid;
  gap: 5px;
  padding: 18px;
  color: var(--muted);
}

.notification-empty strong {
  color: var(--text);
}

/* V2-J active alerts (Notifications page) and V2-A durable jobs (Operations
   page). Rows reuse .notification-item so severity borders, spacing and
   typography stay consistent with the existing card language. */
.alerts-panel,
.jobs-panel {
  display: grid;
  gap: 12px;
}

.alerts-panel__header,
.jobs-panel__header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.alerts-panel__header h3,
.jobs-panel__header h3 {
  margin: 0;
  color: var(--text);
  font-size: .95rem;
  letter-spacing: .01em;
}

.alerts-panel__header p,
.jobs-panel__header p {
  margin: 3px 0 0;
  max-width: 720px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}

.alerts-panel__meta,
.jobs-panel__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.alerts-list,
.jobs-list {
  display: grid;
  gap: 10px;
}

.alerts-message,
.jobs-message {
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}

.dashboard-welcome {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(182, 108, 255, .2);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(33, 16, 51, .78), rgba(16, 8, 28, .72));
}

.dashboard-welcome__header h2 {
  max-width: 780px;
  margin: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1.25;
}

.dashboard-friendly-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-context-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-context-strip > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(190, 170, 220, .12);
  border-radius: 8px;
  background: rgba(8, 10, 18, .28);
}

.dashboard-context-strip span {
  display: block;
  overflow: hidden;
  color: rgba(222, 212, 238, .66);
  font-size: .66rem;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.dashboard-context-strip strong {
  display: block;
  min-width: 0;
  margin-top: 4px;
  overflow: hidden;
  color: var(--text);
  font-size: .86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-friendly-card,
.dashboard-next-step,
.dashboard-friendly-empty article {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(190, 170, 220, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}

.dashboard-friendly-card {
  display: grid;
  gap: 7px;
}

.dashboard-friendly-card span,
.dashboard-next-step span {
  color: var(--muted);
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.dashboard-friendly-card strong,
.dashboard-next-step strong,
.dashboard-friendly-empty strong {
  color: var(--text);
}

.dashboard-friendly-card p,
.dashboard-next-step p,
.dashboard-friendly-empty p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.dashboard-next-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.dashboard-next-step > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.dashboard-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-friendly-empty {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-friendly-empty article {
  display: grid;
  gap: 8px;
}

/* V2-B Wave 1 dashboard widgets + app cards (docs/v2/V2B_DASHBOARD_APPS_WAVE1.md §3.2). */
.dashboard-widget-row {
  margin-bottom: 18px;
}

.dashboard-widget-row article {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(190, 170, 220, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}

.dashboard-widget-row article strong {
  color: var(--text);
}

.dashboard-widget-row article p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.dashboard-widget-row article.is-stale {
  border-style: dashed;
  opacity: .82;
}

.dashboard-widget-row article.is-stale strong {
  color: var(--muted);
}

.dashboard-app-grid-section {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.dashboard-app-grid-section h2 {
  margin: 0;
  color: var(--text);
}

.dashboard-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.dashboard-app-card {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(190, 170, 220, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.dashboard-app-card:hover,
.dashboard-app-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--anx-glow-sm);
  outline: none;
}

.dashboard-app-card strong {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-app-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--muted);
  font-size: .82rem;
}

.dashboard-app-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.dashboard-app-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.dashboard-app-grid-note {
  margin: 0;
  padding: 13px;
  border: 1px dashed rgba(190, 170, 220, .2);
  border-radius: 8px;
  color: var(--muted);
  grid-column: 1 / -1;
}

.dashboard-app-grid-note.is-stale {
  opacity: .82;
}

.dashboard-setup-health {
  display: grid;
  gap: 14px;
  padding: 18px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(17, 22, 34, .9), rgba(10, 12, 20, .84));
}

.dashboard-setup-health__header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.dashboard-setup-health__header h2,
.dashboard-setup-health__header p,
.setup-health-group h3,
.setup-health-group p,
.setup-health-item p {
  margin: 0;
}

.dashboard-setup-health__header p,
.setup-health-group > p,
.setup-health-item p {
  color: var(--muted);
}

.dashboard-setup-progress,
.setup-health-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.dashboard-setup-progress > div,
.setup-health-group {
  padding: 12px;
  border: 1px solid rgba(190, 170, 220, .14);
  border-radius: 8px;
  background: rgba(7, 9, 14, .34);
}

.dashboard-setup-progress span {
  display: block;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-setup-progress strong {
  display: block;
  margin-top: 4px;
}

.setup-health-groups {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.setup-health-group {
  display: grid;
  gap: 10px;
}

.setup-health-list {
  display: grid;
  gap: 8px;
}

.setup-health-item {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(190, 170, 220, .1);
  border-radius: 8px;
  background: rgba(12, 14, 22, .42);
}

.setup-health-item strong {
  display: block;
}

.setup-health-item .status-pill {
  justify-self: start;
}

@media (max-width: 980px) {
  .dashboard-context-strip,
  .dashboard-friendly-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .setup-health-groups {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .dashboard-friendly-grid,
  .dashboard-context-strip,
  .dashboard-friendly-empty,
  .dashboard-next-step,
  .dashboard-setup-progress {
    grid-template-columns: 1fr;
  }

  .dashboard-setup-health__header {
    flex-direction: column;
  }

  .dashboard-next-step .primary-button {
    width: 100%;
  }
}

.app-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 2, 15, 0.72);
  backdrop-filter: blur(14px);
  animation: modalFadeIn 160ms ease both;
  overscroll-behavior: contain;
}

.app-modal {
  display: grid;
  gap: 18px;
  width: min(520px, 100%);
  max-height: min(680px, calc(100vh - 48px));
  padding: 20px;
  overflow: auto;
  border: 1px solid rgba(182, 108, 255, 0.32);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(33, 16, 51, 0.98), rgba(16, 8, 28, 0.98));
  box-shadow: 0 28px 80px rgba(4, 1, 12, 0.5);
  animation: modalScaleIn 180ms cubic-bezier(.2,.9,.25,1) both;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

body.has-open-modal {
  overscroll-behavior: none;
}

.app-modal-backdrop[hidden] {
  pointer-events: none;
}

.app-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(190, 170, 220, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.app-modal__close:hover,
.app-modal__close:focus-visible {
  border-color: rgba(206, 150, 255, 0.56);
  background: rgba(182, 108, 255, 0.14);
  color: var(--text);
}

.app-modal:has(.app-modal__close) {
  position: relative;
  padding-top: 24px;
}

@media (max-width: 640px), (max-height: 560px) {
  .app-modal-backdrop {
    align-items: end;
    padding: 10px;
  }

  .app-modal {
    width: 100%;
    max-height: calc(100dvh - var(--titlebar-height) - 12px);
    gap: 14px;
    padding: 16px;
  }
}

.app-modal--update {
  width: min(680px, 100%);
}

.app-modal--developer-update {
  width: min(620px, 100%);
}

.app-modal--welcome {
  width: min(720px, 100%);
}

.app-modal--onboarding-wizard {
  width: min(780px, 100%);
}

.app-modal--public-access {
  width: min(560px, 100%);
}

.app-modal--share-server {
  width: min(680px, 100%);
}

.share-server-body {
  display: grid;
  gap: 16px;
  max-height: min(62vh, 620px);
  overflow: auto;
  padding-right: 2px;
}

.share-server-address-list {
  display: grid;
  gap: 10px;
}

.share-server-health {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.share-server-health h3 {
  margin: 0;
  font-size: 0.94rem;
}

.share-server-health__status {
  color: var(--text);
  font-size: 0.9rem;
}

.share-server-health__status--public-access-ready,
.share-server-health__status--ready {
  color: var(--success);
}

.share-server-health__status--server-failed,
.share-server-health__status--port-not-listening {
  color: var(--danger);
}

.share-server-health__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.share-server-health__grid div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.share-server-health__grid span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.share-server-health__grid strong {
  overflow: hidden;
  color: var(--text);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-server-diagnostics {
  color: var(--muted);
  font-size: 0.84rem;
}

.share-server-diagnostics summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
}

.share-server-diagnostics ul {
  margin: 8px 0 0;
  padding-left: 18px;
}

.share-server-address,
.share-server-empty {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.share-server-address__top,
.share-server-address__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.share-server-address__value {
  display: block;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  word-break: break-all;
}

.share-server-address p,
.share-server-note,
.share-server-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.share-server-instructions {
  display: grid;
  gap: 8px;
}

.share-server-instructions h3 {
  margin: 0;
  font-size: 0.94rem;
}

.share-server-instructions ol {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  line-height: 1.55;
}

@media (max-width: 720px) {
  .share-server-health__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.public-access-create-form {
  display: grid;
  gap: 12px;
}

.public-access-create-form .field-error {
  min-height: 16px;
  color: #ffb4c2;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.public-access-create-form [aria-invalid="true"] {
  border-color: rgba(255, 114, 146, 0.82);
  box-shadow: 0 0 0 3px rgba(255, 114, 146, 0.14);
}

.public-access-create-status {
  min-height: 20px;
  color: var(--muted);
  font-size: 0.86rem;
}

.onboarding-welcome__header {
  align-items: flex-start;
}

.onboarding-welcome__body > p {
  color: rgba(237, 230, 247, .88);
  font-size: 1rem;
}

.onboarding-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.onboarding-feature-grid article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(182, 108, 255, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
}

.onboarding-feature-grid strong {
  color: var(--text);
  font-size: .95rem;
  line-height: 1.25;
}

.onboarding-feature-grid span {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.45;
}

.onboarding-welcome__actions {
  justify-content: flex-start;
}

.onboarding-wizard__header {
  align-items: flex-start;
}

.onboarding-step-track {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.onboarding-step-track span {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
}

.onboarding-step-track span.is-complete,
.onboarding-step-track span.is-active {
  background: linear-gradient(90deg, rgba(182, 108, 255, .95), rgba(115, 220, 202, .8));
}

.onboarding-step-track span.is-optional {
  background: rgba(182, 108, 255, .38);
}

.onboarding-step-track span.is-blocked {
  background: rgba(255, 104, 119, .82);
}

.onboarding-choice-grid,
.onboarding-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.onboarding-choice {
  margin: 0;
}

.onboarding-status-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(190, 170, 220, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
}

.onboarding-status-card > div {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.onboarding-status-card p {
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.45;
}

.onboarding-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}

.onboarding-technical-details {
  border: 1px solid rgba(190, 170, 220, .14);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, .035);
}

.onboarding-technical-details summary {
  cursor: pointer;
  color: rgba(238, 234, 246, .92);
  font-weight: 800;
}

.onboarding-technical-details dl {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

.onboarding-technical-details div {
  display: grid;
  grid-template-columns: minmax(120px, .4fr) minmax(0, 1fr);
  gap: 10px;
}

.onboarding-technical-details dt {
  color: var(--muted);
}

.onboarding-technical-details dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
}

@media (max-width: 720px) {
  .onboarding-feature-grid {
    grid-template-columns: 1fr;
  }

  .onboarding-choice-grid,
  .onboarding-status-grid,
  .onboarding-technical-details div {
    grid-template-columns: 1fr;
  }
}

.app-modal__meta--developer div {
  flex-basis: 220px;
}

.app-modal__meta--developer div:nth-child(5),
.app-modal__meta--developer div:nth-child(6) {
  flex-basis: 100%;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalScaleIn {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.app-modal__header,
.app-modal__actions,
.app-modal__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-modal__header {
  justify-content: space-between;
}

.app-modal__eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-modal h2,
.app-modal p {
  margin: 0;
}

.app-modal h2 {
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.15;
}

.app-modal__body {
  display: grid;
  gap: 16px;
  color: var(--muted);
  line-height: 1.55;
}

.app-modal__meta {
  flex-wrap: wrap;
  margin: 0;
}

.app-modal__meta div {
  flex: 1 1 140px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
}

.app-modal__meta dt {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.app-modal__meta dd {
  margin: 4px 0 0;
  color: var(--text);
  font-weight: 900;
}

.app-modal__progress {
  display: grid;
  gap: 8px;
}

.app-modal__progress-track {
  height: 9px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.app-modal__progress-track span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--success));
  transition: width 160ms ease;
}

.app-modal__progress-text {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.app-modal__actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.update-release-notes {
  max-height: 260px;
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(185, 148, 255, 0.16);
  border-radius: var(--radius);
  background: rgba(7, 2, 15, 0.46);
  color: rgba(239, 232, 255, 0.9);
}

.update-release-notes h4,
.update-release-notes h5 {
  margin: 12px 0 8px;
  color: var(--text);
}

.update-release-notes h4:first-child,
.update-release-notes h5:first-child {
  margin-top: 0;
}

.update-release-notes p,
.update-release-notes ul,
.update-release-notes pre {
  margin: 0 0 10px;
}

.update-release-notes ul {
  padding-left: 20px;
}

.update-release-notes li {
  margin: 5px 0;
}

.update-release-notes a {
  color: var(--accent);
  font-weight: 800;
}

.update-release-notes code,
.update-release-notes pre {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
}

.update-release-notes code {
  padding: 1px 5px;
}

.update-release-notes pre {
  padding: 10px;
  overflow: auto;
}

.update-ready-banner {
  position: fixed;
  top: 74px;
  left: 50%;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(720px, calc(100vw - 32px));
  padding: 12px;
  border: 1px solid rgba(69, 224, 143, 0.28);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(31, 76, 52, 0.92), rgba(18, 8, 34, 0.94));
  box-shadow: 0 22px 60px rgba(4, 1, 12, 0.38);
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
}

.update-ready-banner div {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.update-ready-banner strong {
  color: var(--text);
}

.update-ready-banner span {
  color: var(--muted);
  font-size: 0.84rem;
}

.nav-item__badge {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid rgba(69, 224, 143, 0.28);
  border-radius: 999px;
  color: var(--success);
  background: rgba(69, 224, 143, 0.12);
  font-size: 0.68rem;
  font-weight: 900;
}

.icon-action,
.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.icon-action {
  width: 34px;
  height: 34px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.2rem;
}

.primary-button {
  min-height: 40px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(182, 108, 255, 0.95), rgba(116, 74, 255, 0.95));
}

.icon-action:not(:disabled):hover,
.icon-action:not(:disabled):focus-visible,
.primary-button:not(:disabled):hover,
.primary-button:not(:disabled):focus-visible {
  border-color: rgba(255, 255, 255, 0.32);
  box-shadow: 0 0 22px rgba(182, 108, 255, 0.28);
  transform: translateY(-1px);
  outline: none;
}

.icon-action:disabled,
.primary-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.marketplace-shell {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.page[data-page="marketplace"] {
  width: 100%;
  max-width: 1180px;
  min-width: 0;
  overflow-x: hidden;
}

.marketplace-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr auto;
  gap: 14px;
  align-items: end;
  padding: 16px;
  border: 1px solid var(--anx-color-border-soft);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-glass);
  box-shadow: var(--panel-shadow), var(--anx-shadow-inset);
  max-width: 100%;
  min-width: 0;
}

.marketplace-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.marketplace-category {
  border: 1px solid rgba(185, 148, 255, 0.24);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--muted);
  background: var(--anx-surface-control);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

.marketplace-category:hover,
.marketplace-category.is-active {
  color: var(--text);
  border-color: rgba(201, 168, 255, 0.55);
  background: var(--anx-surface-control-active);
  transform: translateY(-1px);
}

.marketplace-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
  gap: 18px;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.marketplace-browser,
.marketplace-side-panel {
  min-height: 520px;
  border: 1px solid var(--anx-color-border-soft);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-glass);
  box-shadow: var(--panel-shadow), var(--anx-shadow-inset);
  min-width: 0;
}

.marketplace-browser {
  position: relative;
  padding: 16px;
  overflow: hidden;
}

.marketplace-loading,
.marketplace-empty {
  z-index: 0;
}

.marketplace-loading {
  pointer-events: none;
}

.marketplace-empty {
  pointer-events: auto;
}

.marketplace-grid {
  position: relative;
  z-index: 1;
}

.marketplace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-auto-rows: minmax(250px, auto);
  align-items: stretch;
  gap: 14px;
}

.marketplace-provider-browser {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--anx-color-border-soft);
  border-radius: var(--anx-radius-md);
  background: rgba(20, 9, 38, 0.72);
}

.marketplace-provider-browser[hidden] {
  display: none;
}

.marketplace-provider-header,
.marketplace-provider-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.marketplace-provider-header > div:first-child {
  display: grid;
  gap: 3px;
}

.marketplace-provider-header strong {
  color: var(--text);
}

.marketplace-provider-header span {
  color: var(--muted);
  font-size: 0.82rem;
}

.marketplace-provider-tabs,
.marketplace-provider-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.marketplace-provider-tab,
.marketplace-provider-mode {
  border: 1px solid rgba(202, 169, 255, 0.16);
  border-radius: var(--anx-radius-sm);
  padding: 8px 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
}

.marketplace-provider-tab.is-active,
.marketplace-provider-mode.is-active {
  color: var(--text);
  border-color: rgba(202, 169, 255, 0.44);
  background: rgba(139, 92, 246, 0.22);
}

.marketplace-provider-tools {
  justify-content: flex-start;
  align-items: end;
  flex-wrap: wrap;
}

.marketplace-provider-tools .ssh-field {
  min-width: 160px;
}

.marketplace-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 14px;
  min-height: 178px;
  height: 100%;
  padding: 16px;
  border: 1px solid var(--anx-color-border-soft);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-panel);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.marketplace-card:hover,
.marketplace-card.is-selected {
  border-color: rgba(211, 186, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: var(--anx-shadow-panel), var(--anx-glow-sm);
}

.marketplace-card.is-disabled {
  opacity: 0.62;
}

.marketplace-card.is-disabled:hover {
  border-color: rgba(185, 148, 255, 0.16);
  transform: none;
  box-shadow: none;
}

.marketplace-card__icon {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: var(--anx-radius-md);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: var(--anx-surface-control-active);
  border: 1px solid rgba(202, 169, 255, 0.22);
}

.marketplace-card__icon img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* V2-B Wave 1 favorites (docs/v2/V2B_DASHBOARD_APPS_WAVE1.md §3). */
.marketplace-card__title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.marketplace-card__title-row strong {
  min-width: 0;
}

.marketplace-card__favorite {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(202, 169, 255, 0.22);
  border-radius: var(--anx-radius-sm);
  color: var(--muted);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 160ms ease;
}

.marketplace-card__favorite:hover,
.marketplace-card__favorite:focus-visible {
  border-color: rgba(211, 186, 255, 0.5);
  color: var(--text);
  background: var(--anx-surface-control-hover);
  outline: none;
  transform: translateY(-1px);
}

.marketplace-card__favorite.is-active {
  color: var(--accent);
  border-color: rgba(182, 108, 255, 0.45);
  background: rgba(182, 108, 255, 0.14);
}

.marketplace-card__body {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  grid-row: 1;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.marketplace-card__body strong {
  color: var(--text);
  font-size: 1rem;
}

.marketplace-card__body p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.marketplace-card__meta {
  margin-top: auto;
  color: rgba(216, 203, 238, 0.72);
  font-size: 0.78rem;
}

.marketplace-card__footer {
  display: grid;
  gap: 7px;
  justify-items: center;
  margin-top: auto;
  padding-top: 2px;
  min-width: 0;
}

.marketplace-card__version {
  max-width: 100%;
  color: rgba(216, 203, 238, 0.72);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-card__state {
  width: fit-content;
  max-width: 100%;
  justify-self: center;
}

.marketplace-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.marketplace-card__badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid rgba(202, 169, 255, 0.2);
  border-radius: 999px;
  color: rgba(239, 232, 255, 0.9);
  background: rgba(139, 92, 246, 0.14);
  font-size: 0.72rem;
  font-weight: 700;
}

.marketplace-card .inline-action {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: end;
  justify-content: center;
  width: 100%;
}

.marketplace-load-more {
  width: 100%;
  margin-top: 14px;
  justify-content: center;
}

.marketplace-side-panel {
  display: grid;
  gap: 16px;
  padding: 16px;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.marketplace-side-panel button,
.marketplace-side-panel input,
.marketplace-side-panel select,
.marketplace-side-panel textarea,
.marketplace-side-panel label,
.marketplace-side-panel .inline-action,
.marketplace-wizard,
.marketplace-install-progress,
.download-manager {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

.marketplace-wizard {
  display: grid;
  gap: 12px;
}

.marketplace-readiness-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.marketplace-readiness-strip > div {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(190, 170, 220, .12);
  border-radius: 8px;
  background: rgba(7, 9, 14, .34);
}

.marketplace-readiness-strip span,
.marketplace-readiness-strip strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketplace-readiness-strip span {
  color: var(--muted);
  font-size: .66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.marketplace-readiness-strip strong {
  margin-top: 4px;
  color: var(--text);
  font-size: .82rem;
}

.marketplace-manual-recovery {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(78, 52, 18, 0.4), rgba(12, 4, 24, 0.66)),
    rgba(12, 4, 24, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.marketplace-manual-recovery[hidden] {
  display: none !important;
}

.marketplace-manual-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.marketplace-manual-meta > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.marketplace-manual-meta span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

.marketplace-manual-meta strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
}

.marketplace-manual-meta__wide {
  grid-column: 1 / -1;
}

.marketplace-manual-actions {
  flex-wrap: wrap;
}

.marketplace-wizard[hidden],
.marketplace-version-panel[hidden] {
  display: none !important;
  pointer-events: none;
}

.marketplace-wizard-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.marketplace-wizard-steps span {
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(124, 70, 210, 0.16);
  border: 1px solid rgba(185, 148, 255, 0.16);
  font-size: 0.76rem;
}

.marketplace-install-summary,
.marketplace-recovery-actions {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.marketplace-summary-section,
.marketplace-recovery-actions {
  padding: 10px;
  border: 1px solid rgba(185, 148, 255, 0.14);
  border-radius: 8px;
  background: rgba(10, 3, 20, 0.42);
}

.marketplace-summary-section > strong,
.marketplace-recovery-actions > strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 0.82rem;
}

.marketplace-summary-details,
.marketplace-summary-list {
  display: grid;
  gap: 7px;
}

.marketplace-summary-details > div,
.marketplace-summary-item {
  display: grid;
  grid-template-columns: minmax(92px, 0.45fr) minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.marketplace-summary-details span,
.marketplace-summary-item span {
  color: rgba(216, 203, 238, 0.74);
  font-size: 0.76rem;
}

.marketplace-summary-details small,
.marketplace-summary-item small {
  min-width: 0;
  color: rgba(239, 232, 255, 0.9);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.marketplace-summary-item code {
  grid-column: 2;
  width: fit-content;
  max-width: 100%;
  padding: 2px 6px;
  border-radius: 6px;
  color: rgba(239, 232, 255, 0.82);
  background: rgba(139, 92, 246, 0.16);
  overflow-wrap: anywhere;
}

.marketplace-summary-item[data-state="warning"] {
  border-left: 2px solid rgba(251, 191, 36, 0.7);
  padding-left: 8px;
}

.marketplace-summary-item[data-state="unsupported"] {
  border-left: 2px solid rgba(248, 113, 113, 0.72);
  padding-left: 8px;
}

.marketplace-summary-empty {
  color: var(--muted);
  font-size: 0.78rem;
}

.marketplace-version-field {
  display: grid;
  gap: 8px;
}

.marketplace-version-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.marketplace-version-toggle {
  min-width: 78px;
}

.marketplace-version-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(185, 148, 255, 0.16);
  background: rgba(10, 3, 20, 0.78);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.marketplace-version-status {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.marketplace-version-status[data-tone="success"] {
  color: #9ef0c0;
}

.marketplace-version-status[data-tone="warning"] {
  color: #facc15;
}

.marketplace-version-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.marketplace-version-tab {
  border: 1px solid rgba(185, 148, 255, 0.14);
  border-radius: 999px;
  background: rgba(124, 70, 210, 0.12);
  color: var(--muted);
  padding: 6px 9px;
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
}

.marketplace-version-tab[data-active="true"],
.marketplace-version-tab:hover,
.marketplace-version-tab:focus-visible {
  color: var(--text);
  border-color: rgba(185, 148, 255, 0.34);
  background: rgba(124, 70, 210, 0.28);
}

.marketplace-version-search {
  display: grid;
  gap: 5px;
}

.marketplace-version-search span {
  color: var(--muted);
  font-size: 0.72rem;
}

.marketplace-version-search input {
  width: 100%;
}

.marketplace-version-list {
  display: grid;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 3px;
}

.marketplace-version-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 8px 9px;
  border-radius: 8px;
  border: 1px solid rgba(185, 148, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.marketplace-version-option:hover,
.marketplace-version-option:focus-visible,
.marketplace-version-option[data-selected="true"] {
  border-color: rgba(185, 148, 255, 0.34);
  background: rgba(124, 70, 210, 0.2);
}

.marketplace-version-option__main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.marketplace-version-option__meta {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.72rem;
}

.marketplace-version-empty,
.marketplace-version-more {
  padding: 9px;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}

.marketplace-install-progress {
  display: grid;
  gap: 8px;
}

.marketplace-progress-empty,
.marketplace-progress-step {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(185, 148, 255, 0.14);
  background: rgba(10, 3, 20, 0.52);
}

.marketplace-progress-empty {
  color: var(--muted);
}

.marketplace-progress-step {
  display: grid;
  gap: 3px;
}

.marketplace-progress-step strong {
  color: var(--text);
}

.marketplace-progress-step span {
  color: var(--muted);
  font-size: 0.82rem;
}

.marketplace-progress-debug {
  color: var(--muted);
  font-size: 0.78rem;
}

.marketplace-progress-debug summary {
  cursor: pointer;
}

.marketplace-progress-debug pre {
  overflow: auto;
  margin: 6px 0 0;
  white-space: pre-wrap;
}

.marketplace-progress-step[data-status="running"] {
  border-color: rgba(147, 197, 253, 0.4);
}

.marketplace-progress-step[data-status="complete"] {
  border-color: rgba(134, 239, 172, 0.32);
}

.marketplace-progress-step[data-status="waiting"] {
  border-color: rgba(251, 191, 36, 0.48);
  background: rgba(78, 52, 18, 0.58);
}

.marketplace-progress-step[data-status="failed"] {
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(65, 18, 28, 0.62);
}

.download-manager {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.download-list {
  position: relative;
  display: grid;
  gap: 10px;
  min-width: 0;
}

.download-list .docker-empty-state {
  position: static;
  min-height: 120px;
  border: 1px solid rgba(185, 148, 255, 0.14);
  border-radius: 8px;
  background: rgba(10, 3, 20, 0.52);
  pointer-events: none;
}

.download-item {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(185, 148, 255, 0.16);
  border-radius: 8px;
  background: rgba(12, 4, 24, 0.6);
}

.download-item--dependency {
  border-color: rgba(82, 211, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(16, 42, 55, 0.34), rgba(12, 4, 24, 0.68)),
    rgba(12, 4, 24, 0.62);
}

.download-progress.is-indeterminate {
  overflow: hidden;
}

.download-progress.is-indeterminate span {
  width: 38% !important;
  animation: dependency-progress-sweep 1.4s ease-in-out infinite;
}

.dependency-install-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(82, 211, 255, 0.18);
  border-radius: 8px;
  background: rgba(4, 18, 28, 0.46);
}

.dependency-install-panel__heading {
  display: grid;
  gap: 2px;
}

.dependency-install-panel__heading span,
.dependency-install-panel__message {
  color: var(--muted);
  font-size: 0.82rem;
}

.dependency-install-panel__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.dependency-install-panel__metrics > div {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(185, 148, 255, 0.12);
  border-radius: 8px;
  background: rgba(8, 10, 15, 0.28);
}

.dependency-install-panel__metrics dt {
  color: var(--muted);
  font-size: 0.72rem;
}

.dependency-install-panel__metrics dd {
  margin: 2px 0 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.dependency-install-panel__message {
  margin: 0;
}

@keyframes dependency-progress-sweep {
  0% {
    transform: translateX(-115%);
  }
  50% {
    transform: translateX(35%);
  }
  100% {
    transform: translateX(245%);
  }
}

.download-item[data-status="failed"] {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(65, 18, 28, 0.55);
}

.download-item[data-status="waiting"],
.download-item[data-status="degraded"] {
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(78, 52, 18, 0.56);
}

.download-item[data-status="waiting"] .status-pill,
.download-item[data-status="degraded"] .status-pill,
.marketplace-manual-recovery .status-pill {
  border-color: rgba(251, 191, 36, 0.42);
  background: rgba(251, 191, 36, 0.14);
  color: #fde68a;
}

.download-item__header,
.download-item__actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.download-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.download-progress span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6, #c084fc);
  transition: width 360ms ease-out;
}

.operation-reload-icon {
  display: inline-block;
  margin-right: 0.35rem;
  transform-origin: 50% 50%;
}

.inline-action.is-operating .operation-reload-icon {
  animation: operation-reload-spin 850ms linear infinite;
}

@keyframes operation-reload-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .download-progress span { transition: none; }
  .inline-action.is-operating .operation-reload-icon { animation: none; }
}

.download-item[data-status="failed"] .download-progress span {
  min-width: 100%;
  background: linear-gradient(90deg, #ef4444, #fb7185);
}

.download-item[data-status="waiting"] .download-progress span {
  min-width: 100%;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.download-item small {
  color: var(--muted);
}

/* Workspace standard: full-width desktop panels modeled after the Instances reference layout. */
.page {
  width: 100%;
  max-width: none;
}

.main-content {
  padding: 24px;
}

.page-header {
  margin-bottom: 18px;
}

.page-header h1 {
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
}

.status-card,
.docker-summary-card,
.backup-summary-card,
.coolpals-summary-card,
.playit-summary-card,
.settings-section,
.docker-table-panel,
.docker-details-panel,
.backup-table-panel,
.backup-panel-card,
.file-list-panel,
.file-details-panel,
.file-editor-panel,
.ssh-terminal-card,
.marketplace-browser,
.marketplace-side-panel {
  border-radius: 8px;
}

.docker-table th,
.file-table th,
.backup-table th,
.coolpals-table th,
.instance-files-table th,
.instances-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(18, 8, 34, 0.96);
}

.docker-table tbody tr.is-selected,
.file-table tbody tr.is-selected,
.backup-table tbody tr.is-selected,
.coolpals-table tbody tr.is-selected,
.instances-table tbody tr.is-selected {
  box-shadow: inset 3px 0 0 rgba(199, 161, 255, 0.88);
}

.status-grid.dashboard-grid {
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  align-items: start;
  align-content: start;
}

.status-grid.dashboard-grid .status-card {
  gap: 9px;
  min-height: 0;
  height: auto;
  padding: 16px;
}

.status-grid.dashboard-grid .status-card__top {
  margin-bottom: 6px;
}

.status-grid.dashboard-grid .status-card h3 {
  margin-bottom: 2px;
}

.status-grid.dashboard-grid .status-card p {
  min-height: 0;
  margin-bottom: 4px;
  line-height: 1.38;
}

.status-grid.dashboard-grid .status-card dl {
  gap: 8px;
}

.status-grid.dashboard-grid .status-card dl div {
  gap: 2px;
}

.status-grid.dashboard-grid .status-card dd {
  overflow-wrap: anywhere;
}

.status-grid.status-grid--two {
  grid-template-columns: minmax(360px, 0.8fr) minmax(620px, 1.2fr);
}

.status-grid.status-grid--two .status-card {
  min-height: clamp(360px, 58vh, 700px);
}

.playit-shell:not(.public-access-shell) {
  grid-template-columns: minmax(360px, 0.74fr) minmax(620px, 1.26fr);
  align-items: stretch;
}

.playit-shell:not(.public-access-shell) .playit-status-card {
  max-width: none;
  min-height: clamp(430px, 62vh, 720px);
}

.playit-shell:not(.public-access-shell) .playit-summary-grid {
  grid-template-columns: 1fr;
}

.playit-summary-card {
  min-height: 0;
}

.docker-shell,
.backup-shell,
.coolpals-shell,
.file-manager-shell,
.ssh-shell,
.marketplace-shell,
.settings-shell,
.console-shell {
  gap: 12px;
}

.docker-summary-grid,
.backup-summary-grid,
.coolpals-summary-grid {
  gap: 10px;
}

.docker-summary-card,
.backup-summary-card,
.coolpals-summary-card {
  min-height: 82px;
  padding: 14px;
}

.docker-toolbar,
.backup-toolbar,
.coolpals-controls,
.file-toolbar,
.files-connect-bar,
.ssh-connect-bar,
.marketplace-toolbar,
.console-toolbar {
  padding: 12px;
  gap: 10px;
}

.docker-workspace {
  grid-template-columns: minmax(520px, 1.38fr) minmax(340px, 0.62fr);
  gap: 12px;
}

.docker-table-panel,
.docker-details-panel,
.docker-table-wrap {
  min-height: clamp(520px, 66vh, 780px);
}

.docker-details-panel {
  display: grid;
  align-content: start;
}

.marketplace-shell {
  gap: 12px;
}

.page[data-page="marketplace"] {
  max-width: none;
}

.marketplace-toolbar {
  grid-template-columns: minmax(260px, 0.45fr) minmax(520px, 1fr) auto;
}

.marketplace-layout {
  grid-template-columns: minmax(580px, 1.45fr) minmax(360px, 0.55fr);
  gap: 12px;
}

.marketplace-browser,
.marketplace-side-panel {
  min-height: clamp(560px, 68vh, 790px);
}

.marketplace-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.file-manager-shell:not(.is-edit-mode) .file-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.62fr);
  gap: 10px;
}

.file-manager-shell:not(.is-edit-mode) .file-browser {
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.9fr) 10px minmax(200px, var(--files-details-width));
  gap: 10px;
}

.ssh-shell {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.ssh-workspace-shell {
  grid-template-columns: minmax(280px, 0.42fr) minmax(720px, 1.58fr);
  grid-template-rows: minmax(0, 1fr);
}

.ssh-terminal-window {
  min-height: clamp(520px, 66vh, 790px);
}

.ssh-terminal-card {
  min-height: clamp(590px, 72vh, 860px);
}

.console-window {
  height: clamp(420px, 58vh, 680px);
  min-height: 0;
  overflow: hidden;
}

.console-log-viewer {
  min-height: 0;
  max-height: none;
  overflow: auto;
}

.backup-workspace {
  grid-template-columns: minmax(560px, 1.3fr) minmax(340px, 0.7fr);
  gap: 12px;
}

.backup-table-panel,
.backup-side-panel,
.backup-table-wrap {
  min-height: clamp(520px, 66vh, 780px);
}

.settings-shell {
  grid-template-columns: minmax(260px, 0.34fr) minmax(620px, 1fr);
  align-items: start;
}

.settings-section {
  min-width: 0;
}

.settings-section:first-child,
.settings-section:nth-child(2),
.settings-section:nth-child(3),
.settings-section:nth-child(8) {
  grid-column: 1;
}

.settings-section:nth-child(4),
.settings-section:nth-child(5),
.settings-section:nth-child(6),
.settings-section:nth-child(7),
.settings-section:nth-child(9) {
  grid-column: 2;
}

.settings-section:nth-child(4) {
  grid-row: 1;
}

.settings-section:nth-child(5) {
  grid-row: 2;
}

.settings-section:nth-child(6) {
  grid-row: 3;
}

.settings-section:nth-child(7) {
  grid-row: 4 / span 2;
}

.settings-section:nth-child(9) {
  grid-row: 6;
}

.settings-grid,
.settings-about-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coolpals-workspace {
  grid-template-columns: minmax(520px, 1.22fr) minmax(340px, 0.78fr);
  gap: 12px;
}

.coolpals-main-panel,
.coolpals-info-panel,
.coolpals-activity-panel,
.coolpals-log-panel {
  min-height: clamp(240px, 31vh, 390px);
}

/* Professional polish layer */
.app-workspace {
  background:
    linear-gradient(180deg, rgba(10, 9, 18, 0.88), rgba(7, 2, 15, 0.74)),
    rgba(7, 2, 15, 0.58);
}

.app-titlebar {
  border-color: rgba(190, 170, 220, 0.2);
  background:
    linear-gradient(180deg, rgba(28, 18, 42, 0.94), rgba(13, 8, 24, 0.92)),
    rgba(8, 5, 15, 0.84);
}

.sidebar {
  border-right-color: rgba(190, 170, 220, 0.14);
  background:
    linear-gradient(180deg, rgba(13, 14, 22, 0.98), rgba(9, 7, 15, 0.96)),
    rgba(10, 13, 20, 0.94);
}

.nav-item {
  min-height: 44px;
  padding: 0 13px;
}

.nav-item.is-active {
  border-color: rgba(182, 108, 255, 0.38);
  background: linear-gradient(135deg, rgba(182, 108, 255, 0.18), rgba(69, 224, 143, 0.05));
  color: var(--text);
  box-shadow: inset 3px 0 0 rgba(182, 108, 255, 0.82);
}

.sidebar-footer,
.status-card,
.settings-section,
.docker-summary-card,
.docker-table-panel,
.docker-details-panel,
.ssh-sidebar-panel,
.ssh-main-panel,
.ssh-terminal-card,
.coolpals-main-panel,
.coolpals-info-panel,
.coolpals-activity-panel,
.coolpals-log-panel,
.backup-table-panel,
.backup-side-panel,
.marketplace-browser,
.marketplace-side-panel,
.instance-workspace-card,
.instances-table-panel,
.instances-details-panel,
.instance-settings-section,
.instance-minecraft-card {
  min-width: 0;
  border-color: rgba(190, 170, 220, 0.15);
  background:
    linear-gradient(180deg, rgba(27, 18, 40, 0.78), rgba(13, 10, 22, 0.82)),
    rgba(17, 21, 31, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 16px 38px rgba(4, 1, 12, 0.22);
}

.status-card,
.settings-section,
.docker-summary-card,
.instances-summary-card,
.playit-summary-card,
.coolpals-summary-card,
.backup-summary-card,
.marketplace-card,
.instance-template-card {
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

.status-card:hover,
.settings-section:hover,
.docker-summary-card:hover,
.instances-summary-card:hover,
.playit-summary-card:hover,
.coolpals-summary-card:hover,
.backup-summary-card:hover,
.marketplace-card:hover,
.instance-template-card:hover {
  border-color: rgba(206, 190, 232, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 42px rgba(4, 1, 12, 0.28);
}

.page-header {
  align-items: flex-start;
  padding-bottom: 2px;
}

.page-header > :last-child {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.page-header h1,
.instances-toolbar__title h1 {
  letter-spacing: 0;
}

.page-header .lede,
.instances-toolbar__title .lede {
  color: rgba(226, 216, 240, 0.72);
}

.eyebrow,
.docker-search,
.docker-filter,
.ssh-field,
.settings-field,
.marketplace-card__meta,
.status-pill {
  letter-spacing: 0.04em;
}

.panel-heading,
.settings-section__header,
.coolpals-panel-header,
.instance-workspace-card__header {
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(190, 170, 220, 0.1);
}

.panel-heading h3,
.settings-section__header h3,
.coolpals-panel-header h3 {
  color: rgba(248, 245, 255, 0.96);
}

.docker-toolbar,
.marketplace-toolbar,
.instances-controlbar,
.ssh-connect-bar,
.ssh-profile-form,
.ssh-password-prompt,
.instance-create-form,
.instance-console-toolbar,
.instance-files-toolbar,
.backup-toolbar,
.coolpals-toolbar {
  border-color: rgba(190, 170, 220, 0.14);
  background:
    linear-gradient(180deg, rgba(21, 13, 34, 0.82), rgba(11, 8, 19, 0.84)),
    rgba(17, 21, 31, 0.66);
}

.settings-actions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(190, 170, 220, 0.1);
}

.inline-action,
.primary-button,
.icon-action,
.console-toggle,
.marketplace-provider-tab,
.marketplace-provider-mode,
.marketplace-category,
.docker-inspector-tabs button,
.file-mode-button,
.instance-copy-button,
.ssh-tab {
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border-color: rgba(190, 170, 220, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
    rgba(25, 16, 39, 0.82);
  color: rgba(248, 245, 255, 0.86);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.primary-button {
  border-color: rgba(210, 185, 255, 0.32);
  background: linear-gradient(135deg, rgba(182, 108, 255, 0.96), rgba(93, 92, 255, 0.92));
  color: #fff;
}

.inline-action:not(:disabled):hover,
.inline-action:not(:disabled):focus-visible,
.primary-button:not(:disabled):hover,
.primary-button:not(:disabled):focus-visible,
.icon-action:not(:disabled):hover,
.icon-action:not(:disabled):focus-visible,
.console-toggle:not(:disabled):hover,
.console-toggle:not(:disabled):focus-visible,
.marketplace-provider-tab:hover,
.marketplace-provider-mode:hover,
.marketplace-category:hover,
.docker-inspector-tabs button:hover,
.docker-inspector-tabs button:focus-visible {
  border-color: rgba(206, 150, 255, 0.56);
  background:
    linear-gradient(180deg, rgba(182, 108, 255, 0.22), rgba(182, 108, 255, 0.1)),
    rgba(25, 16, 39, 0.92);
  box-shadow: 0 10px 24px rgba(4, 1, 12, 0.22);
  transform: translateY(-1px);
}

.inline-action:disabled,
.primary-button:disabled,
.icon-action:disabled,
input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
  cursor: not-allowed;
  filter: saturate(0.7);
  opacity: 0.52;
}

.docker-search input,
.docker-filter select,
.ssh-field input,
.ssh-field select,
.ssh-command-row input,
.settings-field input,
.settings-field select,
.settings-field textarea,
.file-location input,
.file-search input,
.coolpals-search input,
.backup-search input,
.instance-console-toolbar input,
.instance-console-toolbar select,
.instance-console-input input,
.instance-config-form input,
.instance-config-form select,
.instance-advanced-panel input,
.marketplace-version-search input {
  min-height: 42px;
  border-color: rgba(190, 170, 220, 0.16);
  background: rgba(5, 7, 12, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.docker-search input:focus,
.docker-filter select:focus,
.ssh-field input:focus,
.ssh-field select:focus,
.ssh-command-row input:focus,
.settings-field input:focus,
.settings-field select:focus,
.settings-field textarea:focus,
.file-location input:focus,
.file-search input:focus,
.coolpals-search input:focus,
.backup-search input:focus,
.instance-console-toolbar input:focus,
.instance-console-toolbar select:focus,
.instance-console-input input:focus,
.instance-config-form input:focus,
.instance-config-form select:focus,
.instance-advanced-panel input:focus,
.marketplace-version-search input:focus {
  border-color: rgba(206, 150, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 3px rgba(182, 108, 255, 0.14);
  outline: none;
}

.docker-table,
.instances-table,
.file-table,
.backup-table,
.instance-files-table {
  font-size: 0.9rem;
}

.status-card h3,
.status-card p,
.status-card dl,
.playit-summary-card strong,
.dashboard-ops-grid strong,
.settings-section h3,
.panel-heading h3 {
  min-width: 0;
}

.status-pill,
.owner-only-badge,
.node-picker-option__badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docker-table th,
.instances-table th,
.file-table th,
.backup-table th,
.instance-files-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  border-bottom-color: rgba(190, 170, 220, 0.14);
  background: rgba(13, 9, 22, 0.96);
  color: rgba(226, 216, 240, 0.72);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.docker-table td,
.instances-table td,
.file-table td,
.backup-table td,
.instance-files-table td {
  color: rgba(248, 245, 255, 0.88);
  vertical-align: middle;
}

.docker-table tbody tr,
.instances-table tbody tr,
.file-table tbody tr,
.backup-table tbody tr,
.instance-files-table tbody tr {
  transition:
    background 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease;
}

.docker-table tbody tr:hover,
.instances-table tbody tr:hover,
.file-table tbody tr:hover,
.backup-table tbody tr:hover,
.instance-files-table tbody tr:hover {
  background: rgba(182, 108, 255, 0.075);
}

.docker-table tbody tr.is-selected,
.instances-table tbody tr.is-selected {
  background: rgba(182, 108, 255, 0.15);
  box-shadow: inset 3px 0 0 rgba(182, 108, 255, 0.86);
}

.docker-details-list {
  display: grid;
  gap: 12px;
}

.docker-details-list div,
.settings-about-grid div,
.ssh-sidebar-summary div,
.instance-overview-list div,
.backup-summary-grid > *,
.playit-summary-card,
.coolpals-summary-card {
  border-color: rgba(190, 170, 220, 0.13);
  background: rgba(7, 9, 14, 0.36);
}

.status-pill {
  min-height: 28px;
  padding: 5px 10px;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  white-space: nowrap;
}

.docker-log-viewer,
.docker-inspect-viewer,
.ssh-terminal-window,
.console-window,
.instance-console-viewer,
.instance-file-editor textarea,
.instance-raw-json,
.coolpals-log-viewer,
.backup-log-viewer {
  border-color: rgba(115, 220, 202, 0.18);
  background:
    linear-gradient(180deg, rgba(4, 9, 13, 0.98), rgba(5, 7, 11, 0.98)),
    #05070b;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(115, 220, 202, 0.035);
}

.ssh-terminal-toolbar,
.console-titlebar,
.instance-console-toolbar {
  border-color: rgba(115, 220, 202, 0.14);
}

.ssh-terminal-output,
.docker-log-viewer,
.docker-inspect-viewer,
.instance-log-viewer,
.console-log-list,
.coolpals-log-viewer {
  color: rgba(220, 244, 255, 0.9);
}

.docker-empty-state,
.docker-loading-state,
.ssh-empty-state,
.ssh-loading-state,
.file-empty-state,
.file-loading-state,
.folder-tree-empty,
.coolpals-empty-state,
.coolpals-loading-state,
.coolpals-feed-empty,
.coolpals-log-empty,
.backup-empty-state,
.backup-loading-state,
.marketplace-empty,
.marketplace-loading,
.security-empty-state,
.nodes-empty-state {
  border: 1px dashed rgba(190, 170, 220, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    rgba(7, 9, 14, 0.36);
  color: rgba(226, 216, 240, 0.7);
}

.docker-empty-state strong,
.docker-loading-state strong,
.ssh-empty-state strong,
.ssh-loading-state strong,
.file-empty-state strong,
.file-loading-state strong,
.folder-tree-empty strong,
.coolpals-empty-state strong,
.coolpals-loading-state strong,
.coolpals-feed-empty strong,
.coolpals-log-empty strong,
.backup-empty-state strong,
.backup-loading-state strong,
.marketplace-empty strong,
.marketplace-loading strong,
.security-empty-state strong,
.nodes-empty-state strong {
  color: rgba(248, 245, 255, 0.94);
}

.marketplace-card {
  align-items: stretch;
}

.marketplace-card__body strong,
.instance-name-cell strong,
.docker-table td strong {
  overflow-wrap: anywhere;
}

.marketplace-card__body p,
.marketplace-card__meta,
.instance-tags-cell span,
.settings-inline-status,
.ssh-password-note {
  overflow-wrap: anywhere;
}

.marketplace-side-panel,
.instances-details-panel,
.instance-workspace-card,
.docker-details-panel,
.ssh-main-panel,
.settings-section {
  min-width: 0;
}

.marketplace-install-progress,
.marketplace-downloads-list,
.instance-backup-panel,
.instance-settings-section,
.instance-minecraft-settings,
.instance-advanced-panel {
  border-color: rgba(190, 170, 220, 0.13);
  background: rgba(7, 9, 14, 0.28);
}

.app-modal {
  border-color: rgba(206, 190, 232, 0.24);
  background:
    linear-gradient(180deg, rgba(30, 20, 45, 0.98), rgba(12, 8, 21, 0.98)),
    rgba(17, 21, 31, 0.96);
}

.app-modal__meta div,
.app-modal__progress-track {
  border-color: rgba(190, 170, 220, 0.14);
  background: rgba(7, 9, 14, 0.42);
}

.toast {
  border-color: rgba(190, 170, 220, 0.18);
  background:
    linear-gradient(180deg, rgba(31, 22, 43, 0.96), rgba(14, 9, 24, 0.96)),
    rgba(17, 21, 31, 0.96);
  box-shadow: 0 18px 48px rgba(4, 1, 12, 0.42);
}

/* Settings page refinement */
.page[data-page="settings"],
.page[data-page="security"],
.page[data-page="nodes"],
.page[data-page="agent-control"] {
  max-width: 1760px;
}

.agent-control-workspace {
  align-items: start;
}

.security-workspace {
  align-items: start;
}

.agent-control-workspace .settings-nav {
  position: sticky;
  top: 0;
}

.security-workspace .settings-nav {
  position: sticky;
  top: 0;
}

.agent-control-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  align-content: start;
}
.agent-connection-section { margin-bottom: 12px; }
.agent-connection-section .settings-section__header { margin-bottom: 8px; }
.agent-connection-section .settings-note {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid rgba(190, 170, 220, 0.1);
  border-radius: 8px;
  background: rgba(7, 9, 14, 0.28);
}
.agent-connection-grid { grid-template-columns: minmax(180px, .7fr) minmax(260px, 1.15fr) minmax(220px, 1fr); }
.agent-connection-section .settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.agent-connection-section .settings-inline-status {
  flex: 1 1 320px;
  min-width: min(100%, 240px);
}
.agent-connection-section .inline-action {
  justify-content: center;
}
.agent-control-column .agent-connection-section {
  margin-bottom: 0;
}
.agent-control-column .agent-connection-grid {
  grid-template-columns: minmax(0, 1fr);
}
.agent-control-workspace .agent-control-column {
  display: contents;
}

.agent-control-column { display: flex; flex-direction: column; gap: 12px; min-width: 0; align-self: start; }
.agent-control-column > .settings-section,
.agent-control-column > .agent-config-details { width: 100%; height: auto; min-height: 0; align-self: start; }
.agent-control-shell > .settings-section,
.agent-control-shell [data-agent-control-section] {
  max-width: 100%;
}

/* Only one Agent Control section is visible at a time
   (setActiveAgentControlSection hides the rest), so the historic column/row
   assignments left the page half empty whenever a column-2 section such as
   Lifecycle or Updates was selected. Every visible section now spans the whole
   content area and keeps its own internal grid rhythm. */
.agent-control-workspace .agent-control-column > .settings-section:not([hidden]) {
  grid-column: 1 / -1;
  grid-row: auto;
}
.agent-control-workspace .agent-control-column > .agent-config-details:not([hidden]) {
  grid-column: 1 / -1;
  grid-row: auto;
}

.agent-lifecycle-grid {
  margin-top: 2px;
}

/* Mobile pairing claim: QR + metadata for the node the claim belongs to. */
.agent-mobile-claim {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(190, 170, 220, 0.16);
  border-radius: 10px;
  background: rgba(7, 9, 14, 0.34);
}
/* The panel is toggled with the hidden attribute; the display: grid above would
   otherwise win over the generic [hidden] rule (equal specificity, later rule). */
.agent-mobile-claim[hidden] {
  display: none;
}
.agent-mobile-claim__qr {
  width: 180px;
  height: 180px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 6px;
}
.agent-mobile-claim__body {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.agent-mobile-claim__body > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.agent-mobile-claim__body span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.agent-mobile-claim__body strong {
  color: var(--text);
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}
.agent-mobile-claim__body .settings-note {
  margin: 0;
}
.agent-mobile-claim__code {
  display: block;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(5, 7, 12, 0.6);
  color: var(--text);
  font-family: var(--mono-font, monospace);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
  user-select: all;
}
@media (max-width: 760px) {
  .agent-mobile-claim {
    grid-template-columns: minmax(0, 1fr);
  }
}

[data-agent-control-section][hidden] {
  display: none !important;
}

.settings-shell--security-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  align-content: start;
}

[data-security-section][hidden] {
  display: none !important;
}

.agent-control-shell .agent-control-overview,
.agent-control-shell .settings-section--wide,
.agent-control-shell .agent-config-details { grid-column: auto; }
.agent-control-shell .settings-section { border-radius: 10px; }
.agent-control-overview { display: grid; gap: 10px; min-height: 132px; padding: 14px 16px; }
.agent-overview-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.agent-overview-title { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.agent-status-dot { width: 9px; height: 9px; border-radius: 999px; background: #69f0c2; box-shadow: 0 0 0 4px rgba(105, 240, 194, .12); }
.agent-status-dot[data-agent-state="offline"] { background: rgba(226, 216, 240, .42); box-shadow: 0 0 0 4px rgba(226, 216, 240, .08); }
.agent-status-dot[data-agent-state="warning"] { background: #f5c542; box-shadow: 0 0 0 4px rgba(245, 197, 66, .12); }
.agent-control-overview h2 { margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.1; }
.agent-control-overview p { margin: 3px 0 0; color: var(--muted); }
.agent-overview-actions { display: flex; flex-wrap: nowrap; gap: 7px; align-items: center; justify-content: flex-end; }
.agent-overview-actions .primary-button,
.agent-overview-actions .inline-action { min-height: 32px; padding: 6px 10px; white-space: nowrap; }
.agent-overview-actions .primary-button:disabled {
  border-color: rgba(190, 170, 220, 0.14);
  background: rgba(226, 216, 240, 0.08);
  box-shadow: none;
  color: rgba(226, 216, 240, 0.5);
}
.agent-control-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.agent-control-metrics div { min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(7, 9, 14, 0.36); }
.agent-control-metrics span, .agent-control-metrics strong { display: block; overflow-wrap: anywhere; }
.agent-control-metrics span { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.agent-control-metrics strong { margin-top: 3px; font-size: .88rem; }
.agent-section-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.agent-section-grid > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(7, 9, 14, 0.34);
}
.agent-section-grid span,
.agent-section-grid strong {
  display: block;
  overflow-wrap: anywhere;
}
.agent-section-grid span {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
}
.agent-section-grid strong {
  margin-top: 4px;
  font-size: .9rem;
}
.agent-beginner-summary { display: grid; gap: 12px; }
.agent-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.agent-summary-card { display: grid; gap: 9px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: rgba(7, 9, 14, .34); }
.agent-summary-card__heading { display: grid; gap: 5px; align-items: start; }
.agent-summary-card__heading .status-pill { justify-self: start; }
.agent-summary-card h3,
.agent-summary-card p { margin: 0; }
.agent-summary-card p,
.agent-summary-card small { color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.agent-summary-card__actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.agent-summary-card__actions .inline-action { min-height: 29px; padding: 5px 8px; font-size: .75rem; }
.agent-operations-panel { display: grid; gap: 12px; }
.agent-control-actions { display: grid; gap: 8px; }
.agent-control-actions > div { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; padding-top: 8px; border-top: 1px solid rgba(190, 170, 220, .1); }
.agent-control-actions > div:first-child { border-top: 0; padding-top: 0; }
.agent-control-actions span { flex: 0 0 82px; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.agent-control-actions .inline-action { min-height: 29px; padding: 5px 8px; font-size: .75rem; }
.agent-config-grid .settings-field--wide { grid-column: 1 / -1; }
.agent-diagnostic-list, .agent-remote-list { display: grid; gap: 10px; }
.agent-diagnostic-item, .agent-remote-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(7, 9, 14, .34); }
.agent-diagnostic-item p, .agent-remote-card p { margin: 4px 0 0; color: var(--muted); }
.agent-remote-list { overflow-x: auto; }
.agent-remote-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: .82rem; }
.agent-remote-table th, .agent-remote-table td { padding: 8px 9px; border-bottom: 1px solid rgba(190, 170, 220, .1); text-align: left; vertical-align: middle; }
.agent-remote-table th { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.agent-remote-table td small { display: block; margin-top: 2px; color: var(--muted); }
.agent-remote-table .inline-action { min-height: 28px; padding: 4px 8px; font-size: .74rem; }
.agent-log-header {
  align-items: flex-start;
  gap: 14px;
}
.agent-log-header > div:first-child {
  min-width: min(100%, 360px);
}
.agent-log-actions {
  display: flex;
  flex: 1 1 440px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  align-items: center;
  min-width: min(100%, 300px);
}
.agent-log-actions .inline-action,
.agent-log-toolbar .inline-action,
.agent-log-toolbar .agent-log-toggle {
  min-height: 34px;
  border-radius: 8px;
  font-size: .84rem;
  line-height: 1;
}
.agent-log-actions .inline-action,
.agent-log-toolbar .inline-action {
  padding: 0 10px;
}
.agent-log-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid rgba(190, 170, 220, 0.12);
  border-radius: var(--radius);
  background: rgba(7, 9, 14, .26);
}
.agent-log-toolbar input,
.agent-log-toolbar select {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(5,7,12,.72);
  color: var(--text);
  font: inherit;
  font-size: .86rem;
}
.agent-log-toolbar input {
  flex: 1 1 280px;
  min-width: min(100%, 220px);
  padding: 7px 10px;
}
.agent-log-toolbar select {
  flex: 0 1 170px;
  padding: 0 34px 0 10px;
}
.agent-log-toolbar__controls {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}
.agent-log-toolbar .agent-log-toggle {
  flex: 0 0 auto;
  gap: 7px;
  width: auto;
  min-width: 0;
  min-height: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 8px;
  color: rgba(238, 234, 246, .86);
  white-space: nowrap;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  border-color: transparent;
  background: transparent;
}
.agent-log-toolbar .agent-log-toggle input[type="checkbox"] {
  appearance: none;
  position: relative;
  flex: 0 0 17px;
  min-width: 0;
  min-height: 0;
  width: 17px;
  height: 17px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(190, 170, 220, .34);
  border-radius: 4px;
  box-sizing: border-box;
  background: rgba(7, 9, 14, .78);
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}
.agent-log-toolbar .agent-log-toggle input[type="checkbox"]::after {
  position: absolute;
  inset: 3px 4px 4px 4px;
  width: 7px;
  height: 4px;
  border-bottom: 2px solid transparent;
  border-left: 2px solid transparent;
  content: "";
  transform: rotate(-45deg);
}
.agent-log-toolbar .agent-log-toggle input[type="checkbox"]:checked {
  border-color: rgba(168, 128, 255, .72);
  background: rgba(126, 86, 255, .86);
}
.agent-log-toolbar .agent-log-toggle input[type="checkbox"]:checked::after {
  border-color: #fff;
}
.agent-log-toolbar .agent-log-toggle input[type="checkbox"]:hover {
  border-color: rgba(206, 150, 255, .62);
}
.agent-log-toolbar .agent-log-toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(206, 150, 255, .84);
  outline-offset: 2px;
}
.agent-log-toolbar .agent-log-toggle input[type="checkbox"]:disabled {
  opacity: .5;
}
.agent-log-toolbar .agent-log-toggle span {
  display: inline-block;
  min-width: max-content;
  white-space: nowrap;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}
.agent-log-refresh {
  flex: 0 0 auto;
  justify-content: center;
  white-space: nowrap;
}
.diagnostics-overview,
.diagnostics-health-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 10px;
  margin: 10px 0;
}
.diagnostics-health-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}
.diagnostics-status-card,
.diagnostics-issue,
.diagnostics-support-preview {
  border: 1px solid rgba(190, 170, 220, .12);
  border-radius: 8px;
  background: rgba(7, 9, 14, .34);
}
.diagnostics-status-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
}
.diagnostics-status-card > div {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}
.diagnostics-status-card strong,
.diagnostics-issue strong {
  overflow-wrap: anywhere;
}
.diagnostics-status-card p {
  margin: 0;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.diagnostics-status-card small,
.diagnostics-issue small,
.diagnostics-support-preview small {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.diagnostics-issues {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}
.diagnostics-issue-list {
  display: grid;
  gap: 8px;
}
.diagnostics-issue {
  overflow: hidden;
}
.diagnostics-issue summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 12px;
  cursor: pointer;
}
.diagnostics-issue summary > span:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.diagnostics-issue__body {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
  border-top: 1px solid rgba(190, 170, 220, .1);
}
.diagnostics-occurrences {
  display: grid;
  gap: 6px;
  max-height: 180px;
  margin: 0;
  padding-left: 18px;
  overflow: auto;
  color: rgba(220, 244, 255, .84);
  font: .78rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
.diagnostics-issue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.diagnostics-support-preview {
  margin: 10px 0;
  padding: 0;
}
.diagnostics-support-preview summary {
  padding: 10px 12px;
  cursor: pointer;
  color: rgba(238, 234, 246, .9);
  font-weight: 800;
}
.diagnostics-support-preview > div {
  display: grid;
  gap: 7px;
  padding: 0 12px 12px;
}
.agent-log-viewer { min-height: clamp(420px, 48vh, 760px); max-height: 760px; overflow: auto; margin: 0; padding: 14px; border: 1px solid rgba(115,220,202,.18); border-radius: var(--radius); background: #05070b; color: rgba(220,244,255,.9); font: .8rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }
.agent-log-viewer.is-nowrap { white-space: pre; }
.agent-config-details { padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: rgba(12, 10, 18, .62); }
.agent-config-details summary { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 13px 16px; cursor: pointer; font-weight: 800; }
.agent-config-details summary small { color: var(--muted); font-size: .78rem; font-weight: 600; text-align: right; }
.agent-config-details[open] { padding-bottom: 14px; }
.agent-config-details[open] summary { margin-bottom: 10px; border-bottom: 1px solid rgba(190, 170, 220, .12); }
.agent-config-details .agent-config-grid, .agent-config-details .settings-actions { margin-inline: 16px; }
.agent-quick-setup.is-configured .settings-grid, .agent-quick-setup.is-configured .settings-actions { display: none; }
.agent-quick-setup.is-configured { padding-block: 12px; }
@media (max-width: 1180px) { .agent-control-workspace, .security-workspace { grid-template-columns: minmax(0, 1fr); } .agent-control-workspace .settings-nav, .security-workspace .settings-nav { position: static; } .agent-control-metrics, .agent-section-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .agent-overview-main { grid-template-columns: minmax(0, 1fr); } .agent-overview-actions { justify-content: flex-start; flex-wrap: wrap; } }
@media (max-width: 760px) { .agent-control-metrics, .agent-section-grid, .agent-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .agent-diagnostic-item, .agent-remote-card { grid-template-columns: minmax(0, 1fr); } .agent-log-actions, .agent-log-toolbar__controls { justify-content: flex-start; margin-left: 0; width: 100%; } .agent-log-toolbar > input, .agent-log-toolbar > select { flex-basis: 100%; } .agent-log-toolbar .agent-log-toggle input[type="checkbox"] { flex-basis: 17px; } .agent-config-details summary { align-items: flex-start; flex-direction: column; } .agent-config-details summary small { text-align: left; } }
@media (max-width: 560px) { .agent-summary-grid { grid-template-columns: minmax(0, 1fr); } }

.page[data-page="settings"] .page-header,
.page[data-page="security"] .page-header,
.page[data-page="nodes"] .page-header {
  margin-bottom: 16px;
}

.settings-shell {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  grid-auto-flow: row dense;
  gap: 24px;
  align-items: stretch;
}

.settings-workspace {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.settings-nav {
  position: sticky;
  top: calc(var(--titlebar-height) + 12px);
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(190, 170, 220, 0.12);
  border-radius: 10px;
  background: rgba(7, 9, 14, 0.28);
}

.settings-search {
  display: grid;
  gap: 6px;
}

.settings-search span {
  color: rgba(226, 216, 240, 0.62);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.settings-search input {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(5, 7, 12, 0.72);
  color: var(--text);
  font: inherit;
}

.settings-search-results {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(190, 170, 220, 0.12);
  border-radius: 8px;
  background: rgba(12, 9, 20, 0.72);
}

.settings-search-results button,
.settings-category-list button {
  width: 100%;
  min-height: 32px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(226, 216, 240, 0.78);
  font: inherit;
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
}

.settings-search-results button:hover,
.settings-search-results button:focus-visible,
.settings-category-list button:hover,
.settings-category-list button:focus-visible,
.settings-category-list button.is-active {
  border-color: rgba(168, 128, 255, 0.28);
  background: rgba(126, 86, 255, 0.12);
  color: rgba(248, 245, 255, 0.96);
}

.settings-category-list {
  display: grid;
  gap: 12px;
}

.settings-category-group {
  display: grid;
  gap: 4px;
}

.settings-category-group[hidden] {
  display: none;
}

.settings-category-group__label {
  margin: 2px 2px 0;
  color: rgba(226, 216, 240, 0.5);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.settings-shell--workspace {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  max-width: 1180px;
}

.settings-shell--workspace > .settings-section {
  height: auto;
}

.settings-shell--workspace > .settings-section[hidden] {
  display: none;
}

.settings-highlight {
  outline: 2px solid rgba(206, 150, 255, 0.72);
  outline-offset: 3px;
}

.settings-shell--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 920px;
}

.settings-shell > .settings-section {
  grid-column: auto;
  grid-row: auto;
  grid-area: auto;
}

.settings-section {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
  min-height: auto;
  height: 100%;
  padding: 16px;
  border-radius: 8px;
}

.settings-section__header {
  align-items: flex-start;
  margin: 0;
  padding-bottom: 12px;
}

.settings-section__header > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settings-section__header h2,
.settings-section__header h3 {
  margin: 0;
  color: rgba(248, 245, 255, 0.98);
  font-size: 1rem;
  line-height: 1.2;
}

.settings-section__header p {
  margin: 0;
  color: rgba(226, 216, 240, 0.66);
  font-size: 0.84rem;
  line-height: 1.45;
}

.settings-section .status-pill {
  flex: 0 0 auto;
  min-width: max-content;
  justify-content: center;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

.settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.settings-section--marketplace .settings-grid,
.settings-section--minecraft .settings-grid,
.settings-section--playit .settings-grid {
  grid-template-columns: 1fr;
}

.settings-diagnostics-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  color: rgba(232, 224, 244, 0.78);
  font-size: 0.78rem;
}

.settings-diagnostics-grid span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.settings-diagnostics-grid strong {
  display: block;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
}

@media (min-width: 980px) {
  .settings-shell:not(.settings-shell--workspace) > .settings-section--marketplace,
  .settings-shell:not(.settings-shell--workspace) > .settings-section--amp,
  .settings-shell:not(.settings-shell--workspace) > .settings-section--about {
    grid-column: span 2;
  }
}

.settings-shell--workspace > .settings-section--amp,
.settings-shell--workspace > .settings-section--minecraft,
.settings-shell--workspace > .settings-section--playit {
  grid-column: 1 / -1;
  width: 100%;
}

.settings-field,
.settings-check {
  min-width: 0;
}

.settings-field span,
.settings-check span {
  overflow-wrap: anywhere;
}

.settings-field input,
.settings-field select,
.settings-field textarea {
  min-height: 40px;
}

.settings-field input[readonly] {
  border-color: rgba(190, 170, 220, 0.1);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(248, 245, 255, 0.76);
}

.settings-section--security .settings-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(120px, 0.7fr);
}

.settings-shell--security-control {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  align-items: start;
}

@media (min-width: 1180px) {
  .settings-shell--security-control > .settings-section--account,
  .settings-shell--security-control > .settings-section--security-sessions,
  .settings-shell--security-control > .settings-section--security-events,
  .settings-shell--security-control > .settings-section--security-danger {
    grid-column: span 2;
  }
}

/* V2-I surfaces added this wave. Both render full-width tables (the tier
   ladder and the access-review projection), so they take the whole workspace
   width exactly like the Security Event Log spans two columns above. */
.settings-shell--security-control > [data-security-section="workload-trust"],
.settings-shell--security-control > [data-security-section="audit-export"] {
  grid-column: 1 / -1;
}

.security-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.security-summary-grid > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(190, 170, 220, 0.12);
  border-radius: 8px;
  background: rgba(7, 9, 14, 0.3);
}

.security-summary-grid span,
.security-card-row span,
.security-event-meta {
  color: rgba(226, 216, 240, 0.58);
  font-size: 0.74rem;
}

.security-summary-grid strong,
.security-card-row strong {
  min-width: 0;
  color: rgba(248, 245, 255, 0.94);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.security-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.security-list-item {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(190, 170, 220, 0.13);
  border-radius: 8px;
  background: rgba(7, 9, 14, 0.28);
}

.security-card-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.security-card-row > div {
  min-width: 0;
}

.security-card-row p,
.security-list-item p {
  margin: 0;
  color: rgba(226, 216, 240, 0.68);
  font-size: 0.82rem;
  line-height: 1.45;
}

.security-table-wrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid rgba(190, 170, 220, 0.12);
  border-radius: 8px;
}

.security-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.security-table th,
.security-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(190, 170, 220, 0.1);
  text-align: left;
  vertical-align: middle;
}

.security-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(21, 15, 32, 0.96);
  color: rgba(226, 216, 240, 0.72);
  font-weight: 700;
}

.security-table tr:last-child td {
  border-bottom: 0;
}

.security-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.security-filter-row .inline-action.is-active {
  border-color: rgba(168, 128, 255, 0.42);
  background: rgba(126, 86, 255, 0.18);
  color: rgba(248, 245, 255, 0.96);
}

.security-empty-state {
  padding: 12px;
  border: 1px dashed rgba(190, 170, 220, 0.16);
  border-radius: 8px;
  color: rgba(226, 216, 240, 0.62);
  font-size: 0.84rem;
}

.settings-section--security-danger {
  border-color: rgba(255, 107, 138, 0.22);
  background:
    linear-gradient(180deg, rgba(44, 15, 31, 0.5), rgba(13, 8, 20, 0.74)),
    rgba(17, 21, 31, 0.86);
}

.settings-section--security-danger .inline-action,
.settings-section--security-token [data-security-action="revoke-agent-token"],
.settings-section--security-remote [data-security-action="disable-remote-access"] {
  border-color: rgba(255, 107, 138, 0.24);
  color: rgba(255, 214, 224, 0.94);
}

.settings-section--security-danger .inline-action:hover,
.settings-section--security-danger .inline-action:focus-visible,
.settings-section--security-token [data-security-action="revoke-agent-token"]:hover,
.settings-section--security-token [data-security-action="revoke-agent-token"]:focus-visible,
.settings-section--security-remote [data-security-action="disable-remote-access"]:hover,
.settings-section--security-remote [data-security-action="disable-remote-access"]:focus-visible {
  border-color: rgba(255, 107, 138, 0.52);
  background: rgba(112, 26, 52, 0.28);
}

.status-pill--warning {
  border-color: rgba(255, 190, 92, 0.34);
  background: rgba(117, 74, 19, 0.28);
  color: rgba(255, 226, 181, 0.96);
}

.status-pill--critical {
  border-color: rgba(255, 107, 138, 0.38);
  background: rgba(112, 26, 52, 0.3);
  color: rgba(255, 214, 224, 0.96);
}

@media (max-width: 760px) {
  .settings-workspace {
    grid-template-columns: 1fr;
  }

  .settings-nav {
    position: static;
  }

  .settings-category-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .settings-category-group {
    display: flex;
    gap: 6px;
  }

  .settings-category-group__label {
    align-self: center;
    margin: 0 2px 0 0;
  }

  .settings-category-list button {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }

  .security-summary-grid,
  .settings-section--security .settings-grid {
    grid-template-columns: 1fr;
  }

  .security-card-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

.settings-section--security .settings-actions,
.settings-section--nodes .settings-actions,
.settings-section--marketplace .settings-actions {
  align-items: flex-start;
}

.settings-section--security [data-security-action="logout"],
.settings-section--security [data-security-action="logout-all-sessions"],
.settings-section--nodes [data-node-action="delete"],
.settings-section--developer [data-settings-reset] {
  border-color: rgba(255, 107, 138, 0.24);
  color: rgba(255, 214, 224, 0.94);
}

.settings-section--security [data-security-action="logout"]:hover,
.settings-section--security [data-security-action="logout"]:focus-visible,
.settings-section--security [data-security-action="logout-all-sessions"]:hover,
.settings-section--security [data-security-action="logout-all-sessions"]:focus-visible,
.settings-section--nodes [data-node-action="delete"]:hover,
.settings-section--nodes [data-node-action="delete"]:focus-visible,
.settings-section--developer [data-settings-reset]:hover,
.settings-section--developer [data-settings-reset]:focus-visible {
  border-color: rgba(255, 107, 138, 0.52);
  background: rgba(112, 26, 52, 0.28);
}

.settings-section--nodes .settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-section--nodes .settings-field:nth-child(2),
.settings-section--nodes .settings-field:nth-child(3),
.settings-check--toggle {
  grid-column: 1 / -1;
}

.settings-check--toggle {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 44px;
  padding: 9px 12px;
}

.settings-check--toggle > input[type="checkbox"] {
  grid-row: 1 / span 2;
}

.settings-check--toggle > span,
.settings-check--toggle > small {
  grid-column: 2;
  min-width: 0;
}

.settings-check--toggle > span {
  overflow-wrap: normal;
  word-break: normal;
}

.settings-check--toggle input[type="checkbox"] {
  appearance: none;
  position: relative;
  width: 38px;
  height: 22px;
  margin: 0;
  border: 1px solid rgba(190, 170, 220, 0.2);
  border-radius: 999px;
  background: rgba(7, 9, 14, 0.72);
  transition: border-color 160ms ease, background 160ms ease;
}

.settings-check--toggle input[type="checkbox"]::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(226, 216, 240, 0.72);
  content: "";
  transition: transform 160ms ease, background 160ms ease;
}

.settings-check--toggle input[type="checkbox"]:checked {
  border-color: rgba(69, 224, 143, 0.44);
  background: rgba(69, 224, 143, 0.16);
}

.settings-check--toggle input[type="checkbox"]:checked::after {
  background: var(--success);
  transform: translateX(16px);
}

.settings-check--toggle input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(206, 150, 255, 0.88);
  outline-offset: 3px;
}

.nodes-dashboard {
  display: grid;
  gap: 12px;
  /* The Nodes page is a single-column stack. Without these guards the generic
     .settings-section column/row placement rules below leak into this grid and
     force a second implicit column (the Network panel), whose height then
     stretches the summary row until the cards are hundreds of pixels tall. */
  align-content: start;
}
.nodes-dashboard > .settings-section:not([hidden]) {
  /* Specificity matters: the leaked generic rules are .settings-section:nth-child(N)
     (0,2,0), so this guard must outrank them to keep the page single-column. */
  grid-column: auto;
  grid-row: auto;
  align-self: start;
}
.nodes-dashboard > * {
  align-self: start;
}

.nodes-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  align-content: start;
  align-items: start;
}

.nodes-summary-card {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(190, 170, 220, 0.12);
  border-radius: 8px;
  background: rgba(7, 9, 14, 0.3);
}

.nodes-summary-card span,
.node-card__meta dt,
.node-details-list dt {
  display: block;
  color: rgba(226, 216, 240, 0.58);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.nodes-summary-card strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: rgba(248, 245, 255, 0.96);
  font-size: 1rem;
}

.nodes-panel {
  gap: 10px;
  height: auto;
}

.nodes-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.nodes-toolbar .settings-inline-status {
  flex: 1 1 280px;
  min-width: min(100%, 220px);
}

.download-list[data-node-list] {
  display: grid;
  gap: 10px;
  margin-top: 2px;
}

.download-list[data-node-list] .download-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  border-color: rgba(190, 170, 220, 0.13);
  background: rgba(7, 9, 14, 0.32);
}

.node-card {
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.node-card:hover,
.node-card:focus-within {
  border-color: rgba(168, 128, 255, 0.32);
  background: rgba(22, 15, 34, 0.5);
  transform: translateY(-1px);
}

.download-list[data-node-list] .download-item.is-selected {
  border-color: rgba(69, 224, 143, 0.34);
  background: rgba(69, 224, 143, 0.08);
}

.node-card__body,
.node-card__header {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.node-card__header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.node-card__title-group {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.node-card__badges,
.node-details-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.node-status-badge {
  min-height: 24px;
  padding: 4px 8px;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.node-status-badge--online {
  border-color: rgba(69, 224, 143, 0.34);
  background: rgba(69, 224, 143, 0.12);
  color: rgba(210, 255, 231, 0.96);
}

.node-status-badge--warning {
  border-color: rgba(255, 190, 92, 0.34);
  background: rgba(117, 74, 19, 0.24);
  color: rgba(255, 226, 181, 0.96);
}

.node-status-badge--offline,
.node-status-badge--error {
  border-color: rgba(255, 107, 138, 0.34);
  background: rgba(112, 26, 52, 0.24);
  color: rgba(255, 214, 224, 0.96);
}

.node-card__meta {
  display: grid;
  grid-template-columns: minmax(160px, 1.25fr) minmax(120px, 0.7fr) minmax(150px, 1fr);
  gap: 8px;
  margin: 0;
}

.node-card__meta > div,
.node-details-list > div {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid rgba(190, 170, 220, 0.1);
  border-radius: 8px;
  background: rgba(7, 9, 14, 0.28);
}

.node-card__meta dd,
.node-details-list dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: rgba(248, 245, 255, 0.92);
  font-size: 0.82rem;
}

.node-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.node-card__actions .inline-action,
.node-details-actions .inline-action {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 0.74rem;
}

.inline-action--danger {
  border-color: rgba(255, 107, 138, 0.24);
  color: rgba(255, 214, 224, 0.94);
}

.inline-action--danger:hover,
.inline-action--danger:focus-visible {
  border-color: rgba(255, 107, 138, 0.52);
  background: rgba(112, 26, 52, 0.28);
}

.nodes-empty-state {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 18px;
  border: 1px dashed rgba(190, 170, 220, 0.18);
  border-radius: 8px;
  background: rgba(7, 9, 14, 0.24);
}

.nodes-empty-state p {
  margin: 0;
  color: rgba(226, 216, 240, 0.68);
}

.app-modal--node {
  width: min(1080px, calc(100vw - 28px));
  max-height: min(760px, calc(100dvh - var(--titlebar-height) - 28px));
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
}

.app-modal--node .modal-header {
  align-items: flex-start;
  gap: 12px;
  padding-right: 38px;
  position: relative;
}

.app-modal--node .modal-header .icon-action {
  position: absolute;
  top: 0;
  right: 0;
}

.node-modal-body {
  display: grid;
  gap: 12px;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.node-modal-intro {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.node-modal-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.86fr) minmax(420px, 1.4fr);
  gap: 14px;
  align-items: stretch;
  min-height: 0;
}

.nodes-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.node-form-guidance {
  margin: 0;
}

.node-path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.node-path-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--anx-radius-md);
  background: var(--anx-surface-panel);
  box-shadow: var(--panel-shadow), var(--anx-shadow-inset);
}

.node-path-card > summary {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
}

.node-path-card > summary::-webkit-details-marker {
  display: none;
}

.node-path-card__heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.node-path-card__heading strong {
  color: var(--text);
  font-size: 0.95rem;
}

.node-path-card__heading small,
.node-path-card__hint {
  color: var(--muted);
  font-size: 0.78rem;
}

.node-path-card__hint {
  flex: 0 0 auto;
  margin-left: auto;
}

.node-path-card > summary::after {
  content: "▸";
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.8rem;
}

.node-path-card[open] > summary::after {
  content: "▾";
}

.node-path-card__body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.node-path-card__body p {
  margin: 0;
  color: rgba(226, 216, 240, 0.66);
  font-size: 0.84rem;
  line-height: 1.45;
}

.node-path-steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.5;
}

.node-path-steps code {
  color: var(--text);
  overflow-wrap: anywhere;
}

.node-path-card .settings-actions {
  margin: 0;
}

.node-manual-details {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.node-manual-details > summary {
  cursor: pointer;
  list-style: none;
}

.node-manual-details > summary::-webkit-details-marker {
  display: none;
}

.node-manual-details > summary > div {
  flex: 1;
}

.node-manual-details > summary::after {
  content: "Show";
  flex: 0 0 auto;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}

.node-manual-details[open] > summary::after {
  content: "Hide";
}

.node-pairing-section,
.node-manual-section {
  display: grid;
  gap: 12px;
  align-content: start;
  width: 100%;
  max-width: 100%;
  padding: 14px;
  min-width: 0;
  grid-row: auto;
}

body.workspace-window .sidebar {
  display: none;
}

body.workspace-window .main-content {
  padding: 22px;
}

body.workspace-window .app-titlebar__search,
body.workspace-window .app-titlebar__divider,
body.workspace-window .app-titlebar__dev-badge {
  display: none;
}

body.create-server-window .marketplace-browser,
body.create-server-window [data-marketplace-categories],
body.create-server-window [data-marketplace-refresh],
body.create-server-window .marketplace-toolbar .docker-search,
body.create-server-window [data-marketplace-action="first-server"] {
  display: none !important;
}

body.create-server-window .marketplace-layout {
  grid-template-columns: minmax(0, 1fr);
}

body.marketplace-window .marketplace-deployment-panel {
  display: none;
}

body.create-server-window .marketplace-discovery-details {
  display: none;
}

body.create-server-window .marketplace-wizard-steps {
  display: none;
}

body.create-server-window .marketplace-wizard {
  grid-template-rows: auto minmax(180px, 1fr) auto auto;
  min-height: 0;
  padding-bottom: 0;
}

body.create-server-window .create-server-step-panel {
  max-height: min(340px, 42dvh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body.marketplace-window .marketplace-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
}

.marketplace-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.workspace-navigation {
  display: none;
  align-items: center;
  gap: 8px;
  padding-right: 8px;
  margin-right: 2px;
  border-right: 1px solid rgba(190, 170, 220, 0.16);
}

body.workspace-window .workspace-navigation {
  display: flex;
}

body.workspace-window .startup-screen {
  display: none !important;
}

body.workspace-window .page {
  display: none;
}

body.workspace-window [data-page="marketplace"] {
  display: block;
}

.marketplace-discovery-details,
.marketplace-details-empty,
.marketplace-details-heading > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.marketplace-details-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.marketplace-details-heading h3 {
  margin: 0;
  overflow-wrap: anywhere;
}

.marketplace-details-facts {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
  gap: 8px 12px;
  margin: 0;
}

.marketplace-details-facts dt {
  color: var(--muted);
}

.marketplace-details-facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.marketplace-technical-details pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  body.marketplace-window .marketplace-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

body.create-server-window .marketplace-side-panel {
  max-width: 820px;
  max-height: max(420px, calc(100dvh - var(--titlebar-height) - 240px));
  min-height: 0;
  margin-inline: auto;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.create-server-step-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.create-server-step-nav button {
  min-width: 0;
  padding: 8px 6px;
  border: 1px solid rgba(185, 148, 255, 0.15);
  border-radius: 8px;
  background: rgba(7, 9, 14, 0.44);
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  overflow-wrap: normal;
  white-space: nowrap;
}

.create-server-step-nav button.is-active {
  color: #fff;
  border-color: rgba(175, 105, 255, 0.58);
  background: linear-gradient(135deg, rgba(123, 55, 210, 0.62), rgba(83, 56, 196, 0.44));
}

.create-server-step-nav button.is-complete {
  color: #bdf7d3;
  border-color: rgba(66, 211, 146, 0.3);
}

.create-server-step-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(190, 170, 220, 0.12);
  border-radius: 10px;
  background: rgba(7, 9, 14, 0.34);
}

.create-server-step-panel[hidden] {
  display: none !important;
}

.create-server-config-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.create-server-config-grid .marketplace-version-field,
.create-server-config-grid .console-toggle {
  grid-column: 1 / -1;
}

.create-server-package-summary,
.create-server-node-summary,
.create-server-runtime-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.create-server-fact {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(190, 170, 220, 0.1);
  border-radius: 8px;
  background: rgba(15, 11, 24, 0.56);
}

.create-server-fact span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.create-server-fact strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.create-server-fact[data-tone="ready"] strong {
  color: #8df0b7;
}

.create-server-fact[data-tone="blocked"] strong {
  color: #ffb4c8;
}

.create-server-deployment-state {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 9px;
  background: rgba(95, 53, 172, 0.18);
}

.create-server-wizard-actions {
  position: sticky;
  bottom: 10px;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0 2px;
  background: linear-gradient(180deg, transparent, rgba(12, 4, 24, 0.96) 30%);
  isolation: isolate;
  pointer-events: auto;
  transform: translateZ(0);
}

.create-server-wizard-actions > button {
  z-index: 31;
  pointer-events: auto;
}

.create-server-validation-message {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0 0 2px;
}

body.create-server-window .create-server-wizard-actions {
  position: static;
  right: auto;
  bottom: 0;
  left: auto;
  width: 100%;
  z-index: 100;
  padding: 10px;
  margin-top: 8px;
  border: 1px solid rgba(190, 170, 220, 0.2);
  border-radius: 10px;
  background: rgba(12, 4, 24, 0.96);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42);
}

body.create-server-window .create-server-validation-message {
  max-width: 520px;
}

body.create-server-window .app-modal--first-server {
  width: min(760px, calc(100vw - 32px));
  max-width: 760px;
}

body.create-server-window .app-modal--first-server .app-modal__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  justify-items: start;
}

.node-modal-layout > .node-pairing-section {
  grid-column: 1;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.node-modal-layout > .node-manual-section {
  grid-column: 2;
  align-self: start;
  height: auto;
  grid-template-rows: auto minmax(0, auto) auto auto;
}

.node-pairing-section textarea {
  min-height: 76px;
}

.node-pairing-actions,
.node-form-actions {
  align-self: end;
}

.node-form-actions {
  justify-content: flex-end;
  padding-top: 2px;
}

.nodes-form-grid .settings-field--wide,
.nodes-form-grid .settings-check--toggle {
  grid-column: 1 / -1;
}

.node-token-setup {
  max-height: 180px;
  overflow: auto;
}

@media (max-width: 900px) {
  .app-modal--node {
    width: min(720px, calc(100vw - 24px));
  }

  .node-modal-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .node-path-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .node-modal-layout > .node-pairing-section,
  .node-modal-layout > .node-manual-section {
    grid-column: 1;
  }

  .node-modal-layout > .node-pairing-section {
    grid-template-rows: auto;
  }
}

.app-modal-backdrop--drawer {
  justify-content: flex-end;
  align-items: stretch;
  padding: 14px;
}

.node-details-drawer {
  display: grid;
  align-content: start;
  gap: 12px;
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100dvh - var(--titlebar-height) - 28px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid rgba(190, 170, 220, 0.18);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(24, 18, 36, 0.98), rgba(12, 9, 20, 0.98));
  box-shadow: 0 22px 64px rgba(4, 1, 12, 0.44);
  animation: nodeDrawerIn 170ms ease both;
}

.node-details-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: start;
  min-width: 0;
  padding-bottom: 4px;
}

.node-details-heading {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.node-details-heading h2 {
  margin: 0;
  color: rgba(248, 245, 255, 0.98);
  font-size: clamp(1.18rem, 2vw, 1.5rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.node-details-summary {
  margin: 0;
  color: rgba(226, 216, 240, 0.7);
  font-size: 0.84rem;
  line-height: 1.35;
}

.node-details-header .node-details-badges {
  justify-content: flex-start;
  max-width: 100%;
}

.node-details-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 8px;
  margin: 0;
}

.settings-section--node-health {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.node-health-header {
  gap: 10px;
  align-items: flex-start;
}

.node-health-header p {
  max-width: 64ch;
}

.node-health-overview {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 128px), 1fr));
  gap: 8px;
}

.node-health-overview > div {
  min-height: 60px;
  padding: 9px 10px;
}

.node-health-overview > div:first-child {
  border-color: rgba(168, 128, 255, 0.22);
  background:
    linear-gradient(180deg, rgba(126, 86, 255, 0.12), rgba(7, 9, 14, 0.28)),
    rgba(7, 9, 14, 0.34);
}

.node-health-overview strong {
  font-size: 0.94rem;
  line-height: 1.25;
  overflow-wrap: normal;
  word-break: normal;
}

.node-health-categories,
.node-health-issues {
  gap: 10px;
}

.node-health-categories {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: start;
}

.node-health-issues {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
}

.node-health-subsection {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.node-health-subsection__header {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
}

.node-health-subsection__header h4 {
  margin: 0;
  color: rgba(248, 245, 255, 0.94);
  font-size: 0.9rem;
}

.node-health-subsection__header .settings-note {
  margin: 0;
}

.node-health-categories .security-list-item,
.node-health-issues .security-list-item {
  gap: 10px;
  min-width: 0;
  padding: 11px;
}

.node-health-categories .security-card-row,
.node-health-issues .security-card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.node-health-card-body {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.node-health-card-body > strong {
  color: rgba(248, 245, 255, 0.96);
  font-size: 0.92rem;
  line-height: 1.25;
}

.node-health-summary-text {
  display: -webkit-box;
  max-width: 78ch;
  overflow: hidden;
  color: rgba(226, 216, 240, 0.76);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.node-health-long-value {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-health-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.node-health-meta-item {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px;
  align-items: baseline;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 7px;
  border: 1px solid rgba(190, 170, 220, 0.1);
  border-radius: 8px;
  background: rgba(7, 9, 14, 0.24);
}

.node-health-meta-item span {
  color: rgba(226, 216, 240, 0.56);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.node-health-meta-item strong {
  min-width: 0;
  color: rgba(248, 245, 255, 0.88);
  font-size: 0.76rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-health-details-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: flex-start;
  min-width: 0;
}

.node-health-details {
  flex: 1 1 220px;
  min-width: min(100%, 180px);
  color: rgba(226, 216, 240, 0.7);
  font-size: 0.8rem;
}

.node-health-details summary {
  width: fit-content;
  cursor: pointer;
  color: rgba(238, 234, 246, 0.88);
  font-weight: 800;
}

.node-health-details summary:focus-visible {
  outline: 2px solid rgba(206, 150, 255, 0.88);
  outline-offset: 3px;
  border-radius: 6px;
}

.node-health-details ul {
  display: grid;
  gap: 5px;
  margin: 8px 0 0;
  padding-left: 18px;
}

.node-health-copy,
.node-health-actions .inline-action {
  flex: 0 0 auto;
  white-space: nowrap;
}

.node-health-categories .status-pill,
.node-health-issues .status-pill {
  max-width: 180px;
  white-space: nowrap;
}

.node-technical-details {
  min-width: 0;
  border: 1px solid rgba(190, 170, 220, 0.12);
  border-radius: 8px;
  background: rgba(7, 9, 14, 0.22);
  padding: 10px;
}

.node-technical-details summary {
  width: fit-content;
  cursor: pointer;
  color: rgba(238, 234, 246, 0.9);
  font-size: 0.84rem;
  font-weight: 800;
}

.node-technical-details summary:focus-visible {
  outline: 2px solid rgba(206, 150, 255, 0.88);
  outline-offset: 3px;
  border-radius: 6px;
}

.node-technical-details .node-details-list {
  margin-top: 10px;
}

@media (max-width: 620px) {
  .node-details-drawer {
    padding: 14px;
  }

  .node-details-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .node-details-header > .status-pill {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .node-health-overview,
  .node-health-categories,
  .node-health-issues {
    grid-template-columns: minmax(0, 1fr);
  }

  .node-health-categories .security-card-row,
  .node-health-issues .security-card-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .node-health-categories .status-pill,
  .node-health-issues .status-pill {
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .node-details-drawer {
    animation: none;
  }
}

/* v1.9 home-server workspace refresh */
html[data-ui-generation="v1.9"] {
  --v19-canvas: #08070d;
  --v19-sidebar: #0d0b13;
  --v19-panel: rgba(22, 19, 29, 0.94);
  --v19-panel-raised: rgba(29, 24, 39, 0.96);
  --v19-line: rgba(224, 212, 239, 0.12);
  --v19-line-strong: rgba(190, 125, 255, 0.3);
  --v19-green: #57d999;
  --v19-cyan: #70cbe8;
}

html[data-ui-generation="v1.9"] body {
  background: var(--v19-canvas);
}

html[data-ui-generation="v1.9"] .app-shell {
  --sidebar-expanded-width: 238px;
}

html[data-ui-generation="v1.9"] .app-workspace {
  border-color: var(--v19-line);
  background: var(--v19-canvas);
}

html[data-ui-generation="v1.9"] .app-titlebar {
  border-color: var(--v19-line);
  background: rgba(11, 9, 16, 0.98);
  box-shadow: none;
}

html[data-ui-generation="v1.9"] .app-titlebar__brand-mark,
html[data-ui-generation="v1.9"] .brand-mark {
  border-color: var(--v19-line-strong);
  background: rgba(182, 108, 255, 0.08);
  box-shadow: none;
}

html[data-ui-generation="v1.9"] .sidebar {
  padding: 14px 12px;
  border-color: var(--v19-line);
  background: var(--v19-sidebar);
}

html[data-ui-generation="v1.9"] .sidebar-header {
  margin-bottom: 14px;
  padding: 0 4px;
}

html[data-ui-generation="v1.9"] .brand {
  min-height: 46px;
}

html[data-ui-generation="v1.9"] .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

html[data-ui-generation="v1.9"] .nav-menu {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  gap: 3px;
  padding: 0 4px 12px 0;
  scrollbar-gutter: stable;
}

html[data-ui-generation="v1.9"] .nav-menu::-webkit-scrollbar {
  width: 5px;
}

html[data-ui-generation="v1.9"] .nav-menu::-webkit-scrollbar-track {
  background: transparent;
}

html[data-ui-generation="v1.9"] .nav-menu::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(182, 108, 255, 0.32);
}

html[data-ui-generation="v1.9"] .nav-section {
  margin-top: 10px;
}

html[data-ui-generation="v1.9"] .nav-section__title {
  padding: 7px 10px 5px;
  color: rgba(224, 212, 239, 0.48);
  font-size: 0.65rem;
}

html[data-ui-generation="v1.9"] .nav-item {
  min-height: 42px;
  padding: 7px 9px;
  border-radius: 7px;
}

html[data-ui-generation="v1.9"] .nav-item__icon {
  width: 27px;
  height: 27px;
  border: 0;
  background: transparent;
}

html[data-ui-generation="v1.9"] .nav-item:hover,
html[data-ui-generation="v1.9"] .nav-item:focus-visible {
  background: rgba(255, 255, 255, 0.055);
}

html[data-ui-generation="v1.9"] .nav-item.is-active {
  border-color: rgba(182, 108, 255, 0.24);
  background: rgba(182, 108, 255, 0.14);
  box-shadow: inset 3px 0 0 var(--accent);
}

html[data-ui-generation="v1.9"] .sidebar-footer {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  min-height: 50px;
  padding: 8px 10px;
  border-color: var(--v19-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: 0 -10px 24px var(--v19-sidebar);
}

html[data-ui-generation="v1.9"] .main-content {
  padding: 22px 24px 30px;
  background:
    linear-gradient(rgba(182, 108, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(182, 108, 255, 0.018) 1px, transparent 1px),
    var(--v19-canvas);
  background-size: 32px 32px;
}

html[data-ui-generation="v1.9"] .page {
  max-width: 1380px;
}

html[data-ui-generation="v1.9"] .page-header {
  align-items: center;
  margin-bottom: 18px;
}

html[data-ui-generation="v1.9"] .page-header > :only-child {
  display: block;
}

html[data-ui-generation="v1.9"] .page-header h1 {
  margin-bottom: 5px;
  font-size: 1.85rem;
  line-height: 1.12;
}

html[data-ui-generation="v1.9"] .page-header .eyebrow {
  margin-bottom: 5px;
  font-size: 0.67rem;
}

html[data-ui-generation="v1.9"] .page-header .lede {
  font-size: 0.9rem;
  line-height: 1.45;
}

html[data-ui-generation="v1.9"] .page-introduction {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-color: var(--v19-line);
  background: rgba(255, 255, 255, 0.025);
}

html[data-ui-generation="v1.9"] .page-introduction strong {
  grid-column: 1;
  grid-row: 1 / span 2;
}

html[data-ui-generation="v1.9"] .page-introduction p {
  grid-column: 2;
  font-size: 0.82rem;
}

html[data-ui-generation="v1.9"] .page-introduction .inline-action {
  grid-column: 3;
  grid-row: 1 / span 2;
}

html[data-ui-generation="v1.9"] .dashboard-welcome {
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
  gap: 12px;
  padding: 16px;
  border-color: var(--v19-line-strong);
  border-radius: 8px;
  background: var(--v19-panel);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
}

html[data-ui-generation="v1.9"] .dashboard-welcome__header,
html[data-ui-generation="v1.9"] .dashboard-context-strip,
html[data-ui-generation="v1.9"] .dashboard-friendly-grid,
html[data-ui-generation="v1.9"] .dashboard-next-step,
html[data-ui-generation="v1.9"] .dashboard-friendly-empty {
  grid-column: 1;
}

html[data-ui-generation="v1.9"] .dashboard-welcome__header h2 {
  max-width: 620px;
  font-size: 1.25rem;
}

html[data-ui-generation="v1.9"] .dashboard-context-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

html[data-ui-generation="v1.9"] .dashboard-context-strip > div {
  padding: 9px 10px;
  border-color: var(--v19-line);
  background: rgba(255, 255, 255, 0.025);
}

html[data-ui-generation="v1.9"] .dashboard-friendly-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

html[data-ui-generation="v1.9"] .dashboard-friendly-card {
  min-height: 96px;
  padding: 11px;
  border-color: var(--v19-line);
  background: rgba(255, 255, 255, 0.035);
}

html[data-ui-generation="v1.9"] .dashboard-friendly-card strong {
  font-size: 1rem;
}

html[data-ui-generation="v1.9"] .dashboard-friendly-card p {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.78rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

html[data-ui-generation="v1.9"] .dashboard-next-step {
  padding: 11px 12px;
  border-color: rgba(87, 217, 153, 0.22);
  background: rgba(87, 217, 153, 0.055);
}

html[data-ui-generation="v1.9"] .dashboard-next-step p {
  font-size: 0.8rem;
}

html[data-ui-generation="v1.9"] .dashboard-quick-actions {
  grid-column: 2;
  grid-row: 1 / span 5;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
}

html[data-ui-generation="v1.9"] .dashboard-launcher {
  display: grid;
  align-content: center;
  justify-items: start;
  min-width: 0;
  min-height: 68px;
  padding: 10px 12px;
  border-color: var(--v19-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
}

html[data-ui-generation="v1.9"] .dashboard-launcher:hover,
html[data-ui-generation="v1.9"] .dashboard-launcher:focus-visible {
  border-color: var(--v19-line-strong);
  background: rgba(182, 108, 255, 0.1);
  transform: translateY(-1px);
}

html[data-ui-generation="v1.9"] .dashboard-launcher span {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
}

html[data-ui-generation="v1.9"] .dashboard-launcher strong {
  margin-top: 3px;
  color: var(--text);
  font-size: 0.84rem;
}

html[data-ui-generation="v1.9"] .dashboard-launcher--primary {
  border-color: rgba(182, 108, 255, 0.42);
  background: rgba(182, 108, 255, 0.14);
}

html[data-ui-generation="v1.9"] .dashboard-setup-health {
  padding: 14px;
  border-color: var(--v19-line);
  border-radius: 8px;
  background: var(--v19-panel);
}

html[data-ui-generation="v1.9"] .dashboard-setup-health__header h2 {
  font-size: 1.05rem;
}

html[data-ui-generation="v1.9"] .dashboard-setup-health__header p {
  font-size: 0.82rem;
}

html[data-ui-generation="v1.9"] .setup-health-groups {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-ui-generation="v1.9"] .dashboard-ops-grid {
  gap: 10px;
}

html[data-ui-generation="v1.9"] .dashboard-ops-grid article,
html[data-ui-generation="v1.9"] .status-card,
html[data-ui-generation="v1.9"] .nodes-summary-card,
html[data-ui-generation="v1.9"] .instances-summary-card,
html[data-ui-generation="v1.9"] .public-access-provider,
html[data-ui-generation="v1.9"] .marketplace-card {
  border-color: var(--v19-line);
  border-radius: 8px;
  background: var(--v19-panel);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

html[data-ui-generation="v1.9"] .dashboard-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

html[data-ui-generation="v1.9"] .dashboard-grid .status-card {
  min-height: 210px;
  padding: 14px;
}

html[data-ui-generation="v1.9"] .status-card__top {
  margin-bottom: 0;
}

html[data-ui-generation="v1.9"] .service-icon {
  border-radius: 7px;
  background: rgba(112, 203, 232, 0.08);
  color: var(--v19-cyan);
  box-shadow: none;
}

html[data-ui-generation="v1.9"] .status-pill {
  border-radius: 999px;
}

html[data-ui-generation="v1.9"] .settings-section,
html[data-ui-generation="v1.9"] .instances-toolbar,
html[data-ui-generation="v1.9"] .instances-controlbar,
html[data-ui-generation="v1.9"] .instances-table-panel,
html[data-ui-generation="v1.9"] .instances-details-panel,
html[data-ui-generation="v1.9"] .instance-workspace-card,
html[data-ui-generation="v1.9"] .public-access-service-card,
html[data-ui-generation="v1.9"] .marketplace-browser,
html[data-ui-generation="v1.9"] .marketplace-install-panel {
  border-color: var(--v19-line);
  border-radius: 8px;
  background: var(--v19-panel);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

html[data-ui-generation="v1.9"] .page[data-page="playit"] .status-card {
  min-height: 0;
}

html[data-ui-generation="v1.9"] .instances-summary-grid,
html[data-ui-generation="v1.9"] .nodes-summary-grid {
  gap: 10px;
}

html[data-ui-generation="v1.9"] .instances-summary-card,
html[data-ui-generation="v1.9"] .nodes-summary-card {
  min-height: 82px;
  padding: 12px 14px;
}

html[data-ui-generation="v1.9"] .marketplace-grid {
  gap: 12px;
}

html[data-ui-generation="v1.9"] .marketplace-card {
  min-height: 0;
}

html[data-ui-generation="v1.9"] .marketplace-card:hover,
html[data-ui-generation="v1.9"] .marketplace-card.is-selected {
  border-color: var(--v19-line-strong);
  background: var(--v19-panel-raised);
}

html[data-ui-generation="v1.9"] .primary-button,
html[data-ui-generation="v1.9"] .inline-action {
  border-radius: 7px;
}

@media (max-width: 1280px) {
  html[data-ui-generation="v1.9"] .dashboard-welcome {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-ui-generation="v1.9"] .dashboard-quick-actions {
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  html[data-ui-generation="v1.9"] .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  html[data-ui-generation="v1.9"] .main-content {
    padding: 16px;
  }

  html[data-ui-generation="v1.9"] .dashboard-context-strip,
  html[data-ui-generation="v1.9"] .dashboard-friendly-grid,
  html[data-ui-generation="v1.9"] .dashboard-quick-actions,
  html[data-ui-generation="v1.9"] .dashboard-grid,
  html[data-ui-generation="v1.9"] .setup-health-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-ui-generation="v1.9"] .page-introduction {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-ui-generation="v1.9"] .page-introduction strong,
  html[data-ui-generation="v1.9"] .page-introduction p,
  html[data-ui-generation="v1.9"] .page-introduction .inline-action {
    grid-column: 1;
    grid-row: auto;
  }
}

/* Narrow windows use the same information architecture with an icon-first
   rail, keeping the active workspace readable without horizontal scrolling. */
@media (max-width: 760px) {
  html[data-ui-generation="v1.9"] .app-shell {
    grid-template-rows: 52px minmax(0, 1fr);
    padding: 0;
  }

  html[data-ui-generation="v1.9"] .app-titlebar {
    min-height: 52px;
    border-radius: 0;
  }

  html[data-ui-generation="v1.9"] .app-titlebar__drag {
    gap: 8px;
    padding-inline: 8px;
  }

  html[data-ui-generation="v1.9"] .app-titlebar__brand {
    flex: 0 1 auto;
  }

  html[data-ui-generation="v1.9"] .app-titlebar__brand-copy,
  html[data-ui-generation="v1.9"] .app-titlebar__label,
  html[data-ui-generation="v1.9"] .app-titlebar__context > strong,
  html[data-ui-generation="v1.9"] .app-titlebar__context > .app-titlebar__divider,
  html[data-ui-generation="v1.9"] .app-titlebar__dev-badge,
  html[data-ui-generation="v1.9"] .app-titlebar__search--command {
    display: none;
  }

  html[data-ui-generation="v1.9"] .app-titlebar__context {
    justify-content: flex-end;
    gap: 6px;
  }

  html[data-ui-generation="v1.9"] .app-titlebar__search {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    max-width: 36px;
    min-height: 36px;
    padding: 0;
    justify-content: center;
  }

  html[data-ui-generation="v1.9"] .app-titlebar__search span,
  html[data-ui-generation="v1.9"] .app-titlebar__search kbd,
  html[data-ui-generation="v1.9"] [data-titlebar-connection-label] {
    display: none;
  }

  html[data-ui-generation="v1.9"] .app-titlebar__connection {
    padding: 8px;
  }

  html[data-ui-generation="v1.9"] .app-titlebar__controls {
    margin-left: 0;
  }

  html[data-ui-generation="v1.9"] .app-titlebar__control {
    width: 44px;
    min-width: 44px;
  }

  html[data-ui-generation="v1.9"] .app-workspace {
    border-radius: 0;
  }

  html[data-ui-generation="v1.9"] .sidebar {
    flex: 0 0 68px;
    width: 68px;
    padding: 10px 8px;
    overflow: hidden;
  }

  html[data-ui-generation="v1.9"] .sidebar-header {
    justify-content: center;
    margin-bottom: 14px;
  }

  html[data-ui-generation="v1.9"] .sidebar-header .brand-copy,
  html[data-ui-generation="v1.9"] .sidebar-toggle,
  html[data-ui-generation="v1.9"] .nav-section__title,
  html[data-ui-generation="v1.9"] .nav-item__label,
  html[data-ui-generation="v1.9"] .sidebar-footer__copy {
    display: none;
  }

  html[data-ui-generation="v1.9"] .brand-mark {
    width: 42px;
    height: 42px;
  }

  html[data-ui-generation="v1.9"] .nav-menu {
    gap: 8px;
    overflow-y: auto;
  }

  html[data-ui-generation="v1.9"] .nav-section {
    gap: 8px;
    margin: 0;
    padding-top: 8px;
  }

  html[data-ui-generation="v1.9"] .nav-item,
  html[data-ui-generation="v1.9"] .sidebar-footer {
    justify-content: center;
    min-height: 44px;
    padding: 0;
  }

  html[data-ui-generation="v1.9"] .nav-item:hover,
  html[data-ui-generation="v1.9"] .nav-item:focus-visible {
    transform: none;
  }

  html[data-ui-generation="v1.9"] .sidebar-footer {
    gap: 0;
    padding-inline: 0;
  }

  html[data-ui-generation="v1.9"] .main-content {
    padding: 18px 16px 28px;
    scrollbar-gutter: auto;
  }
}

@media (max-width: 420px) {
  html[data-ui-generation="v1.9"] .page[data-page="instances"] .instances-summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-ui-generation="v1.9"] .page[data-page="instances"] .instances-controlbar {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-ui-generation="v1.9"] .app-titlebar__control--maximize {
    display: none;
  }

  html[data-ui-generation="v1.9"] .app-titlebar__brand-mark {
    width: 26px;
    height: 26px;
  }

  html[data-ui-generation="v1.9"] .app-titlebar__brand-mark img {
    width: 16px;
    height: 16px;
  }

  html[data-ui-generation="v1.9"] .main-content {
    padding-inline: 12px;
  }
}

@keyframes nodeDrawerIn {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 980px) {
  .nodes-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .node-card__header,
  .node-card__meta {
    grid-template-columns: minmax(0, 1fr);
  }

  .node-card__badges {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .nodes-summary-grid,
  .nodes-form-grid {
    grid-template-columns: 1fr;
  }

  .app-modal--node {
    max-height: calc(100dvh - var(--titlebar-height) - 18px);
  }

  .app-modal-backdrop--drawer {
    align-items: center;
    justify-content: center;
  }
}

.agent-node-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.agent-robot-icon {
  position: relative;
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(190, 170, 220, 0.16);
  border-radius: 8px;
  background: rgba(7, 9, 14, 0.48);
  color: rgba(226, 216, 240, 0.72);
}

.agent-robot-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.agent-robot-icon--online {
  border-color: rgba(69, 224, 143, 0.38);
  background: rgba(69, 224, 143, 0.12);
  color: rgba(119, 246, 177, 0.95);
}

.agent-robot-icon--offline {
  color: rgba(226, 216, 240, 0.46);
}

.agent-robot-icon--error {
  border-color: rgba(255, 107, 138, 0.38);
  background: rgba(112, 26, 52, 0.18);
  color: rgba(255, 156, 182, 0.95);
}

.agent-robot-icon--installing::after {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(206, 150, 255, 0.32);
  border-top-color: rgba(206, 150, 255, 0.95);
  border-radius: 999px;
  content: "";
  animation: file-loader-spin 850ms linear infinite;
}

.status-pill[data-agent-state]::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 999px;
  background: rgba(226, 216, 240, 0.42);
  content: "";
}

.status-pill[data-agent-state="online"]::before {
  background: var(--success);
}

.status-pill[data-agent-state="installing"]::before {
  border: 2px solid rgba(206, 150, 255, 0.32);
  border-top-color: rgba(206, 150, 255, 0.95);
  background: transparent;
  animation: file-loader-spin 850ms linear infinite;
}

.status-pill[data-agent-state="error"]::before {
  background: var(--danger);
}

.settings-section--marketplace .settings-note,
.settings-section--amp .settings-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(190, 170, 220, 0.1);
  border-radius: 8px;
  background: rgba(7, 9, 14, 0.28);
}

.settings-section--marketplace .settings-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Build 194 compact desktop stabilization.
   These views carry more information than a narrow table can preserve, so the
   layout changes shape before controls or meaningful values leave the window. */
.page[data-page="instances"] .instances-table-panel {
  max-height: min(62vh, 760px);
  overflow: auto;
  scrollbar-gutter: stable;
}

@media (max-width: 1320px) {
  .page[data-page="backups"] .backup-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page[data-page="backups"] .backup-summary-card strong {
    overflow-wrap: anywhere;
  }

  .page[data-page="backups"] .backup-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .page[data-page="backups"] .backup-actions {
    justify-content: flex-start;
  }

  .page[data-page="files"].is-active {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .page[data-page="instances"] .instances-table-panel,
  .page[data-page="instances"] .instances-table-panel .docker-table-wrap {
    min-height: 0;
  }

  .page[data-page="instances"] .instances-table-panel {
    max-height: min(54vh, 560px);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
  }

  .page[data-page="instances"] .instances-table-panel .docker-table-wrap {
    overflow: visible;
  }

  .page[data-page="instances"] .instances-table {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .page[data-page="instances"] .instances-table thead {
    display: none;
  }

  .page[data-page="instances"] .instances-table tbody {
    display: grid;
    gap: 10px;
  }

  .page[data-page="instances"] .instances-table tbody tr {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid rgba(185, 171, 200, 0.1);
    border-radius: 10px;
    background: rgba(18, 10, 32, 0.52);
  }

  .page[data-page="instances"] .instances-table td {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    align-content: start;
    min-width: 0;
    padding: 7px 10px;
    border: 0;
    border-bottom: 1px solid rgba(185, 171, 200, 0.07);
    border-radius: 0;
    background: transparent;
  }

  .page[data-page="instances"] .instances-table td::before {
    color: rgba(226, 216, 240, 0.64);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .page[data-page="instances"] .instances-table td:nth-child(1),
  .page[data-page="instances"] .instances-table td:nth-child(9) {
    grid-column: 1 / -1;
  }

  .page[data-page="instances"] .instances-table td:nth-child(1) {
    grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
    align-items: center;
  }

  .page[data-page="instances"] .instances-table td:nth-child(9) {
    grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
    align-items: center;
  }

  .page[data-page="instances"] .instances-table td:nth-child(1)::before { content: "Server"; }
  .page[data-page="instances"] .instances-table td:nth-child(2)::before { content: "Type"; }
  .page[data-page="instances"] .instances-table td:nth-child(3)::before { content: "Status"; }
  .page[data-page="instances"] .instances-table td:nth-child(4)::before { content: "Address"; }
  .page[data-page="instances"] .instances-table td:nth-child(5)::before { content: "CPU"; }
  .page[data-page="instances"] .instances-table td:nth-child(6)::before { content: "RAM"; }
  .page[data-page="instances"] .instances-table td:nth-child(7)::before { content: "Uptime"; }
  .page[data-page="instances"] .instances-table td:nth-child(8)::before { content: "Tags"; }
  .page[data-page="instances"] .instances-table td:nth-child(9)::before { content: "Actions"; }

  .page[data-page="instances"] .instances-table td:first-child,
  .page[data-page="instances"] .instances-table td:last-child {
    width: auto;
    min-width: 0;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }

  .page[data-page="instances"] .instances-table tbody tr.is-selected td:first-child {
    box-shadow: inset 3px 0 0 rgba(199, 161, 255, 0.9);
  }

  .page[data-page="instances"] .instance-row-actions {
    justify-content: flex-start;
  }

  .page[data-page="files"] .file-manager-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    align-items: start;
    align-content: start;
  }

  .page[data-page="files"] .storage-manager-panel,
  .page[data-page="files"] .files-connect-bar,
  .page[data-page="files"] .file-password-prompt,
  .page[data-page="files"] .file-toolbar,
  .page[data-page="files"] .file-workspace {
    grid-column: 1;
    grid-row: auto;
  }

  .page[data-page="files"] .storage-manager-panel {
    grid-template-rows: auto auto auto auto;
    height: 260px;
    max-height: 260px;
    overflow-x: hidden;
    overflow-y: auto;
    align-self: start;
    scrollbar-gutter: stable;
  }

  .page[data-page="files"] .storage-manager-divider {
    display: none;
  }

  .page[data-page="files"] .file-manager-shell:not(.is-edit-mode) .file-workspace,
  .page[data-page="files"] .file-manager-shell:not(.is-edit-mode) .file-browser {
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .page[data-page="files"] .file-manager-shell:not(.is-edit-mode) .file-workspace {
    grid-template-rows: auto auto;
    height: auto;
  }

  .page[data-page="files"] .file-manager-shell:not(.is-edit-mode) .file-browser {
    grid-template-rows: auto auto;
    min-height: 610px;
  }

  .page[data-page="files"] .folder-tree-panel,
  .page[data-page="files"] .file-list-panel {
    min-height: 300px;
  }

  .page[data-page="files"] .file-table-wrap {
    min-height: 260px;
    max-height: 440px;
  }

  .page[data-page="files"] .file-editor-panel {
    min-height: 380px;
  }
}

@media (max-width: 760px) {
  .page[data-page="instances"] .instances-table tbody tr,
  .page[data-page="instances"] .instances-table td {
    grid-template-columns: minmax(0, 1fr);
  }

  .page[data-page="instances"] .instances-table td::before {
    margin-bottom: 2px;
  }
}

@media (max-width: 760px) {
  .create-server-step-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .create-server-config-grid,
  .create-server-package-summary,
  .create-server-node-summary,
  .create-server-runtime-summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

.settings-section--marketplace .settings-actions .inline-action {
  min-width: 0;
  max-width: 100%;
  justify-content: center;
  white-space: normal;
}

.settings-section--marketplace .settings-inline-status {
  grid-column: 1 / -1;
}

.agent-connection-section .settings-inline-status {
  grid-column: 1 / -1;
}

.agent-connection-section .inline-action {
  justify-content: center;
}

.settings-field--color {
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: end;
}

.settings-field--color span {
  grid-column: 1 / -1;
}

.settings-field--color input[type="color"] {
  width: 48px;
  min-height: 42px;
  padding: 5px;
  border-radius: 8px;
}

.settings-accent-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-self: end;
}

.settings-accent-swatches button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid rgba(190, 170, 220, 0.16);
  border-radius: 8px;
  background: rgba(7, 9, 14, 0.42);
  color: rgba(248, 245, 255, 0.82);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}

.settings-accent-swatches button::before {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: var(--swatch-color);
  content: "";
}

.settings-accent-swatches button.is-active,
.settings-accent-swatches button:hover,
.settings-accent-swatches button:focus-visible {
  border-color: rgba(206, 150, 255, 0.56);
  background: rgba(182, 108, 255, 0.14);
  outline: none;
}

.settings-accent-swatches span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-section--startup .settings-grid {
  grid-template-columns: minmax(0, 1fr);
}

.settings-section--startup input[type="range"] {
  accent-color: var(--accent);
  cursor: pointer;
}

.settings-about-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-about-grid div {
  min-width: 0;
}

.settings-inline-status {
  align-self: center;
  min-width: 0;
  color: rgba(226, 216, 240, 0.64);
  line-height: 1.4;
}

.nav-item[data-page-target="settings"].is-active,
.nav-item[data-page-target="security"].is-active,
.nav-item[data-page-target="nodes"].is-active {
  border-color: rgba(206, 150, 255, 0.52);
  box-shadow:
    inset 3px 0 0 rgba(206, 150, 255, 0.92),
    0 0 24px rgba(182, 108, 255, 0.18);
}

@media (max-width: 1320px) {
  .settings-shell {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  }

  .settings-shell--single {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-section--startup .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1320px) {
  .marketplace-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.8fr);
  }

  .marketplace-categories {
    align-self: center;
  }

  .backup-workspace,
  .settings-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .marketplace-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  }

  .file-manager-shell {
    grid-template-columns: minmax(200px, 240px) 10px minmax(0, 1fr);
  }

  .files-connect-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .files-connect-bar .ssh-connection-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .file-toolbar {
    grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.72fr);
  }

  .file-toolbar-stack {
    grid-column: 1 / -1;
    justify-items: start;
  }

  .file-actions {
    justify-content: flex-start;
  }

  .file-manager-shell:not(.is-edit-mode) .file-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .file-manager-shell:not(.is-edit-mode) .file-browser {
    grid-template-columns: minmax(170px, 0.42fr) minmax(280px, 1fr);
  }

  .file-manager-shell:not(.is-edit-mode) .file-panel-divider,
  .file-manager-shell:not(.is-edit-mode) .file-details-panel {
    display: none;
  }

  .backup-toolbar {
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  }

  .ssh-workspace-shell {
    grid-template-columns: minmax(250px, 0.5fr) minmax(600px, 1.5fr);
  }

  .console-ops-shell {
    grid-template-columns: minmax(230px, 0.45fr) minmax(560px, 1.2fr);
  }

  .console-status-panel {
    grid-column: 1 / -1;
    min-height: auto;
    grid-template-columns: minmax(240px, 0.45fr) minmax(360px, 1fr) minmax(220px, 0.45fr);
    align-items: start;
  }

  .console-status-panel > .panel-heading,
  .console-quick-actions,
  .console-activity {
    grid-column: 1;
  }

  .console-details-list {
    grid-column: 2;
  }

  .instances-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .page[data-page="instances"] .instances-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page[data-page="instances"] .instances-controlbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page[data-page="instances"] .instances-controlbar .docker-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .instances-details-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .instance-files-grid {
    grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.1fr);
  }

  .instance-file-name .file-entry-name-text span {
    max-width: 18vw;
  }
}

@media (max-width: 1180px) {
  .app-titlebar__drag {
    gap: 12px;
  }

  .app-titlebar__brand {
    flex-basis: 150px;
  }

  .app-titlebar__search {
    min-width: 42px;
    max-width: 180px;
  }

  .app-titlebar__search kbd {
    display: none;
  }

  .app-titlebar__search--command {
    flex-basis: 190px;
    min-width: 42px;
  }
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-rows: var(--titlebar-height) minmax(0, 1fr);
    height: 100vh;
    padding: 6px;
  }

  .app-titlebar__drag {
    gap: 12px;
  }

  .app-titlebar__brand {
    flex: 0 1 auto;
  }

  .app-titlebar__search {
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    justify-content: center;
    padding-inline: 0;
  }

  .app-titlebar__search span,
  .app-titlebar__search kbd {
    display: none;
  }

  .app-titlebar__brand-copy span,
  .app-titlebar__label {
    display: none;
  }

  .app-titlebar__connection {
    padding-inline: 8px;
  }

  .app-workspace {
    flex-direction: column;
  }

  .sidebar {
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    width: auto;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-menu {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .sidebar-footer {
    margin-top: 18px;
  }

  .main-content {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 24px;
  }

  body {
    overflow: hidden;
  }

  .status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .minecraft-page-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .minecraft-overview-card {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .console-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .console-actions {
    justify-content: flex-start;
  }

  .file-toolbar {
    grid-template-columns: 1fr;
  }

  .file-toolbar-stack {
    justify-items: stretch;
  }

  .file-actions {
    justify-content: flex-start;
  }

  .files-connect-bar {
    grid-template-columns: 1fr 1fr;
  }

  .file-password-prompt {
    grid-template-columns: 1fr;
  }

  .file-browser {
    grid-template-columns: minmax(220px, 0.8fr) minmax(360px, 1.2fr);
  }

  .file-workspace,
  .file-manager-shell.is-edit-mode .file-workspace {
    grid-template-columns: 1fr;
  }

  .file-manager-shell.is-edit-mode .file-workspace-divider {
    display: none;
  }

  .file-panel-divider {
    display: none;
  }

  .file-details-panel {
    grid-column: 1 / -1;
    min-height: auto;
  }

  .file-editor-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .ssh-connect-bar {
    grid-template-columns: 1fr 1fr;
  }

  .ssh-profile-form {
    grid-template-columns: 1fr 1fr;
  }

  .ssh-connection-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .ssh-terminal-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .ssh-tools {
    justify-content: flex-start;
  }

  .docker-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .docker-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .docker-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .docker-workspace {
    grid-template-columns: 1fr;
  }

  .docker-resource-grid {
    grid-template-columns: 1fr;
  }

  .status-grid.dashboard-grid,
  .status-grid.status-grid--two,
  .playit-shell,
  .ssh-workspace-shell,
  .console-ops-shell,
  .instances-shell,
  .marketplace-layout,
  .backup-workspace,
  .coolpals-workspace {
    grid-template-columns: 1fr;
  }

  .public-access-overview {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .instances-toolbar {
    grid-template-columns: 1fr 1fr;
  }

  .instances-toolbar__title,
  .instances-toolbar__future,
  .instances-toolbar .docker-actions,
  .instances-main-shell,
  .instance-workspace-card,
  .instances-table-panel,
  .instances-details-panel {
    grid-column: 1 / -1;
  }

  .instances-details-panel {
    grid-row: auto;
    position: static;
    min-height: auto;
  }

  .docker-details-panel {
    min-height: auto;
  }

  .console-source-panel,
  .console-main-panel,
  .console-status-panel {
    min-height: auto;
  }

  .ssh-sidebar-panel,
  .ssh-main-panel {
    min-height: auto;
  }

  .console-status-panel,
  .console-status-panel > .panel-heading,
  .console-details-list,
  .console-quick-actions,
  .console-activity {
    grid-column: auto;
  }

  .console-status-panel {
    grid-template-columns: 1fr;
  }

  .instances-shell,
  .instances-main-shell,
  .instance-create-form,
  .instance-template-grid,
  .instance-files-grid,
  .instance-config-form,
  .instance-advanced-panel {
    grid-template-columns: 1fr;
  }

  .instances-toolbar,
  .instance-create-form,
  .instances-main-shell,
  .instance-workspace-card,
  .instances-table-panel,
  .instances-details-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .instance-files-grid,
  .page[data-page="instances"] .instance-files-grid {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .instance-file-browser {
    max-height: min(430px, 48vh);
  }

  .instance-overview-grid,
  .instance-minecraft-summary,
  .instance-minecraft-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coolpals-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coolpals-controls,
  .coolpals-workspace {
    grid-template-columns: 1fr;
  }

  .backup-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .backup-workspace {
    grid-template-columns: 1fr;
  }

  .backup-side-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    min-height: auto;
  }

  .settings-grid,
  .settings-about-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The Public Access two-column grid needs 754px (minmax 420 + 320 + 14 gap), but
   with the sidebar expanded the content box is viewport - 356px, so it clips at
   viewport widths below 1110px. Collapse one breakpoint earlier than the global
   980px collapse so the grid never overflows the clipped band. */
@media (max-width: 1120px) {
  .public-access-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  :root {
    --titlebar-height: 40px;
  }

  .app-shell {
    height: 100vh;
    padding: 0;
  }

  .app-titlebar,
  .app-workspace {
    border-radius: 0;
  }

  .app-titlebar__drag {
    padding-left: 10px;
    gap: 8px;
  }

  .app-titlebar__context {
    gap: 8px;
  }

  .app-titlebar__brand-copy,
  .app-titlebar__context strong {
    display: none;
  }

  .app-titlebar__divider,
  .app-titlebar__connection span[data-titlebar-connection-label] {
    display: none;
  }

  .app-titlebar__control {
    width: 42px;
    min-width: 42px;
  }

  .sidebar,
  .main-content {
    padding: 14px;
  }

  .nav-menu,
  .status-grid,
  .status-grid--two,
  .minecraft-page-grid,
  .minecraft-detail-list,
  .ssh-workspace-shell,
  .console-ops-shell,
  .instances-shell,
  .instances-main-shell,
  .instance-create-form,
  .instance-template-grid,
  .instance-files-grid,
  .instance-config-form,
  .instance-advanced-panel,
  .instance-overview-grid,
  .instance-minecraft-summary,
  .instance-minecraft-settings,
  .instance-network-summary {
    grid-template-columns: 1fr;
  }

  .instances-toolbar,
  .instance-create-form,
  .instances-main-shell,
  .instance-workspace-card,
  .instances-table-panel,
  .instances-details-panel {
    grid-column: 1;
    grid-row: auto;
  }

  .status-card {
    min-height: auto;
  }

  .status-card p {
    min-height: 0;
  }

  .console-actions,
  .console-actions .inline-action,
  .console-toggle,
  .console-command-row {
    width: 100%;
  }

  .console-actions .inline-action,
  .console-toggle {
    justify-content: center;
  }

  .page[data-page="instances"] [data-instance-panel="console"] .instance-console-toolbar {
    align-items: stretch;
  }

  .page[data-page="instances"] [data-instance-panel="console"] .instance-console-toolbar__row:first-child {
    flex-wrap: nowrap;
    width: auto;
    overflow-x: auto;
  }

  .page[data-page="instances"] [data-instance-panel="console"] .instance-console-toolbar__row:last-child {
    flex: 1 1 100%;
    width: 100%;
  }

  .page[data-page="instances"] [data-instance-panel="console"] .console-toggle {
    width: auto;
    justify-content: flex-start;
  }

  .console-window {
    min-height: 420px;
  }

  .console-log-viewer {
    min-height: 378px;
  }

  .console-log-list li {
    grid-template-columns: 1fr;
  }

  .file-actions,
  .file-location-row,
  .file-mode-toggle,
  .file-actions .inline-action {
    width: 100%;
  }

  .file-mode-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .file-location-row {
    grid-template-columns: 1fr;
  }

  .file-actions .inline-action {
    justify-content: center;
  }

  .file-editor-pathbar-topline,
  .file-editor-fileline {
    align-items: flex-start;
    flex-direction: column;
  }

  .files-connect-bar,
  .file-password-prompt,
  .storage-manager-panel,
  .storage-manager-divider,
  .file-toolbar,
  .file-workspace {
    grid-column: 1;
  }

  .file-manager-shell {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }

  .storage-manager-panel {
    grid-row: auto;
  }

  .storage-manager-divider {
    display: none;
  }

  .files-connect-bar,
  .file-password-prompt,
  .file-manager-shell.is-edit-mode .file-browser,
  .file-browser {
    grid-template-columns: 1fr;
  }

  .folder-tree-panel,
  .file-list-panel,
  .file-details-panel {
    min-height: auto;
  }

  .file-table-wrap {
    min-height: 340px;
  }

  .file-editor-toolbar,
  .file-editor-panel .settings-note {
    padding-left: 12px;
    padding-right: 12px;
  }

  .file-editor-lines {
    padding-left: 12px;
    padding-right: 10px;
  }

  .file-editor-surface textarea {
    padding-left: 14px;
    padding-right: 14px;
  }

  .ssh-connect-bar,
  .ssh-profile-form,
  .ssh-command-row {
    grid-template-columns: 1fr;
  }

  .ssh-connection-actions,
  .ssh-connection-actions .inline-action,
  .ssh-tools,
  .ssh-tools .inline-action,
  .ssh-tools .console-toggle,
  .ssh-command-row .inline-action {
    width: 100%;
  }

  .ssh-connection-actions .inline-action,
  .ssh-tools .inline-action,
  .ssh-tools .console-toggle,
  .ssh-command-row .inline-action {
    justify-content: center;
  }

  .ssh-terminal-window {
    min-height: 360px;
  }

  .docker-summary-grid,
  .dashboard-ops-grid,
  .docker-toolbar,
  .marketplace-toolbar,
  .marketplace-layout {
    grid-template-columns: 1fr;
  }

  .docker-actions,
  .docker-actions .inline-action,
  .marketplace-toolbar .inline-action {
    width: 100%;
  }

  .docker-actions .inline-action,
  .marketplace-toolbar .inline-action {
    justify-content: center;
  }

  .docker-table-panel,
  .docker-details-panel {
    min-height: auto;
  }

  .docker-table-wrap {
    min-height: 360px;
  }

  .docker-resource-grid,
  .docker-create-grid,
  .docker-inline-form {
    grid-template-columns: 1fr;
  }

  .coolpals-summary-grid {
    grid-template-columns: 1fr;
  }

  .coolpals-actions,
  .coolpals-actions .inline-action {
    width: 100%;
  }

  .coolpals-actions .inline-action {
    justify-content: center;
  }

  .coolpals-main-panel {
    min-height: 360px;
  }

  .backup-summary-grid,
  .backup-toolbar,
  .backup-side-panel {
    grid-template-columns: 1fr;
  }

  .backup-actions,
  .backup-actions .inline-action {
    width: 100%;
  }

  .backup-actions .inline-action {
    justify-content: center;
  }

  .backup-table-panel,
  .backup-side-panel {
    min-height: auto;
  }

  .backup-table-wrap {
    min-height: 360px;
  }

  .settings-grid,
  .settings-about-grid {
    grid-template-columns: 1fr;
  }

  .settings-actions,
  .settings-actions .inline-action,
  .settings-check {
    width: 100%;
  }

  .settings-actions .inline-action,
  .settings-check {
    justify-content: center;
  }

  .agent-log-toolbar .agent-log-toggle {
    width: auto;
    flex: 0 0 auto;
    justify-content: center;
  }

  .agent-log-toolbar .inline-action {
    flex: 0 0 auto;
    justify-content: center;
  }

  .app-modal__actions,
  .app-modal__actions .inline-action,
  .app-modal__actions .primary-button {
    width: 100%;
  }

  .app-modal__actions .inline-action,
  .app-modal__actions .primary-button {
    justify-content: center;
  }
}

.owner-hero {
  border: 1px solid rgba(182, 108, 255, 0.28);
  border-radius: var(--radius);
  padding: 22px;
  background: linear-gradient(135deg, rgba(182, 108, 255, 0.14), rgba(255, 255, 255, 0.035));
}

.owner-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.owner-status-strip span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.owner-status-strip span.is-ok {
  border-color: rgba(69, 224, 143, 0.42);
  color: var(--success);
}

.owner-status-strip span.is-warn {
  border-color: rgba(245, 196, 81, 0.45);
  color: var(--caution);
}

.owner-workspace-layout {
  display: block;
}

.owner-page-rail,
.owner-workspace-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(17, 21, 31, 0.76);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
}

.owner-page-rail {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.owner-rail-header,
.owner-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.owner-search {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  font: inherit;
}

.owner-page-list {
  display: grid;
  gap: 6px;
}

.owner-page-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.owner-page-button.is-active,
.owner-page-button:hover {
  border-color: var(--line);
  background: rgba(182, 108, 255, 0.12);
  color: var(--text);
}

.owner-page-button small {
  color: var(--neutral);
  font-size: 0.72rem;
}

.owner-workspace-panel {
  display: grid;
  gap: 18px;
  min-height: 620px;
  padding: 18px;
}

.owner-panel-header h2,
.owner-panel-header p {
  margin: 0;
}

.owner-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.owner-overview-wide {
  grid-column: 1 / -1;
}

.owner-overview-wide .security-summary-grid {
  margin-top: 12px;
}

.owner-overview-wide .security-list {
  margin-top: 12px;
}

.owner-overview-wide .settings-actions {
  margin-top: 12px;
}

.owner-editor-shell textarea,
.owner-api-tester textarea,
.owner-json-editor textarea {
  width: 100%;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  resize: vertical;
  background: rgba(5, 8, 14, 0.62);
  color: var(--text);
  font: 0.95rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.owner-api-tester textarea {
  min-height: 110px;
}

.global-search-backdrop,
.command-palette-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: start center;
  padding: max(72px, calc(var(--titlebar-height) + 28px)) 18px 18px;
  background: rgba(2, 3, 8, 0.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.global-search-backdrop[hidden],
.command-palette-backdrop[hidden] {
  display: none;
}

.global-search-dialog,
.command-palette-dialog {
  display: grid;
  gap: 12px;
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 96px));
  overflow: hidden;
  border: 1px solid rgba(182, 108, 255, 0.28);
  border-radius: var(--radius);
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(24, 16, 36, 0.96), rgba(8, 10, 15, 0.96)),
    rgba(10, 12, 18, 0.95);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.48);
}

.global-search-header,
.command-palette-header,
.global-search-section-heading,
.command-palette-section-heading,
.global-search-meta,
.command-palette-meta,
.global-search-result__top,
.command-palette-result__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.global-search-header h2,
.global-search-header p,
.command-palette-header h2,
.command-palette-header p {
  margin: 0;
}

.global-search-header p:last-child,
.global-search-meta,
.command-palette-header p:last-child,
.command-palette-meta {
  color: var(--muted);
  font-size: 0.86rem;
}

.global-search-input,
.command-palette-input {
  display: grid;
  gap: 6px;
}

.global-search-input span,
.command-palette-input span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.global-search-input input,
.command-palette-input input {
  width: 100%;
  border: 1px solid rgba(182, 108, 255, 0.24);
  border-radius: var(--radius);
  padding: 13px 14px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

.global-search-input input:focus,
.command-palette-input input:focus {
  border-color: rgba(206, 150, 255, 0.6);
  outline: none;
  box-shadow: 0 0 0 3px rgba(182, 108, 255, 0.18);
}

.global-search-results,
.global-search-recent-list,
.command-palette-results,
.command-palette-recent-list {
  display: grid;
  gap: 8px;
}

.global-search-results,
.command-palette-results {
  min-height: 120px;
  max-height: 480px;
  overflow: auto;
  padding-right: 4px;
}

.global-search-group,
.command-palette-group {
  display: grid;
  gap: 6px;
}

.global-search-group-title,
.global-search-section-heading,
.command-palette-group-title,
.command-palette-section-heading {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.global-search-result,
.global-search-recent,
.command-palette-result,
.command-palette-recent {
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.global-search-result:hover,
.global-search-result:focus-visible,
.global-search-result.is-active,
.global-search-recent:hover,
.global-search-recent:focus-visible,
.command-palette-result:hover,
.command-palette-result:focus-visible,
.command-palette-result.is-active,
.command-palette-recent:hover,
.command-palette-recent:focus-visible {
  border-color: rgba(182, 108, 255, 0.34);
  background: rgba(182, 108, 255, 0.12);
  outline: none;
}

.global-search-result strong,
.command-palette-result strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.global-search-result small,
.global-search-result p,
.command-palette-result small,
.command-palette-result p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.global-search-result__type,
.command-palette-shortcut {
  flex: 0 0 auto;
  border: 1px solid rgba(248, 245, 255, 0.12);
  border-radius: 999px;
  padding: 3px 7px;
  color: var(--neutral);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.command-palette-result.is-disabled {
  cursor: not-allowed;
  opacity: 0.66;
}

.global-search-highlight {
  border-radius: 4px;
  background: rgba(245, 197, 92, 0.2);
  color: #ffe8a8;
}

.global-search-empty,
.command-palette-empty {
  display: grid;
  gap: 6px;
  border: 1px dashed rgba(182, 108, 255, 0.24);
  border-radius: var(--radius);
  padding: 18px;
  color: var(--muted);
}

.global-search-empty strong,
.command-palette-empty strong {
  color: var(--text);
}

.owner-json-editor {
  display: grid;
  gap: 12px;
}

.owner-log-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 160px) auto auto;
  align-items: center;
}

.owner-table,
.owner-command-list,
.owner-log-output {
  display: grid;
  gap: 10px;
}

.owner-row {
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: rgba(255, 255, 255, 0.045);
}

.owner-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.owner-row p,
.owner-log-output pre {
  margin: 0;
  color: var(--muted);
}

.owner-log-output pre {
  overflow: auto;
  max-height: 360px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: rgba(5, 8, 14, 0.7);
  white-space: pre-wrap;
}

@media (max-width: 980px) {
  .settings-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .operations-summary-grid,
  .maintenance-summary-grid,
  .maintenance-workspace,
  .operations-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-shell > .settings-section {
    grid-column: auto;
    grid-row: auto;
    height: auto;
  }
}

@media (max-width: 720px) {
  .settings-grid,
  .settings-section--security .settings-grid,
  .settings-section--nodes .settings-grid,
  .settings-section--startup .settings-grid,
  .settings-about-grid,
  .settings-section--marketplace .settings-actions,
  .agent-connection-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-section__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .owner-log-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .operations-toolbar,
  .maintenance-toolbar,
  .global-search-header,
  .global-search-meta,
  .command-palette-header,
  .command-palette-meta,
  .maintenance-actions,
  .operations-panel-header,
  .maintenance-panel-header,
  .maintenance-item__header,
  .operation-item__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .maintenance-item,
  .operation-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-section .status-pill {
    min-width: 0;
  }

  .settings-accent-swatches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
.agent-compatibility-card {
  border-color: color-mix(in srgb, var(--caution) 45%, var(--border));
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 92%, #7f4cff 8%), var(--panel-strong));
}

.agent-compatibility-card[data-state="compatible"] {
  border-color: color-mix(in srgb, var(--success) 45%, var(--border));
}

.agent-compatibility-card__header,
.agent-compatibility-card__versions {
  display: grid;
  gap: 1rem;
}

.agent-compatibility-card__header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.agent-compatibility-card__header h2,
.agent-compatibility-card__header p {
  margin: 0;
}

.agent-compatibility-card__header p:not(.eyebrow) {
  margin-top: 0.45rem;
  color: var(--muted);
}

.agent-compatibility-card__versions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
}

.agent-compatibility-card__versions > div {
  display: grid;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--anx-radius-md);
  background: color-mix(in srgb, var(--panel) 86%, transparent);
}

.agent-compatibility-card__versions span,
.agent-compatibility-card__details span {
  color: var(--muted);
  font-size: 0.78rem;
}

.agent-compatibility-card__actions {
  margin-top: 1rem;
}

.agent-compatibility-card__details {
  margin-top: 0.8rem;
}

.agent-compatibility-card__details summary {
  width: max-content;
  cursor: pointer;
  color: var(--muted);
  font-weight: 700;
}

.agent-compatibility-card__details[open] .agent-section-grid {
  margin-top: 0.8rem;
}

@media (max-width: 720px) {
  .agent-compatibility-card__versions {
    grid-template-columns: 1fr;
  }
}

/* Build 192 polish: shared task cards, grouped loading, and consistent compact badges. */
.workspace-loading-state {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: var(--anx-radius-md);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
}

.workspace-loading-state[hidden] {
  display: none;
}

.workspace-loading-state > span:last-child {
  display: grid;
  gap: 0.18rem;
}

.workspace-loading-state small {
  color: var(--muted);
}

.workspace-loading-state__spinner {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 auto;
  border: 2px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.download-item {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  gap: 0.85rem;
  padding: 1rem;
  border-radius: var(--anx-radius-lg);
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel-strong) 96%, var(--accent) 4%), var(--panel));
}

.download-item__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8rem;
}

.download-item__icon {
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-strong));
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}

.download-item__heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.download-item__heading strong {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.download-item__logs {
  min-width: 0;
  max-width: 100%;
  padding-top: 0.2rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.download-item__logs pre {
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}

.download-item__header > .status-pill,
.download-item .marketplace-card__badge {
  flex: 0 0 auto;
  min-width: max-content;
  max-width: 100%;
  white-space: nowrap;
  word-break: normal;
}

.download-item small,
.download-item__error,
.download-item__actions {
  min-width: 0;
  max-width: 100%;
}

.download-item small {
  overflow-wrap: break-word;
  word-break: normal;
}

.download-item__error {
  display: grid;
  gap: 0.3rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  border-radius: var(--anx-radius-md);
  background: color-mix(in srgb, var(--danger) 8%, var(--panel));
  overflow-wrap: break-word;
}

.download-item__error[hidden] {
  display: none;
}

.download-item__error strong {
  color: var(--danger);
}

.download-item__recovery {
  color: var(--muted);
}

.download-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.download-list,
.notification-list,
.operation-list,
.settings-section {
  min-width: 0;
  max-width: 100%;
}

.notification-item__badges .status-pill,
.notification-item__actions .status-pill,
.settings-section__badges > * {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
  word-break: normal;
}

.notification-item p {
  overflow-wrap: break-word;
  word-break: normal;
}

.operation-item {
  min-width: 0;
  max-width: 100%;
}

.settings-section__header,
.settings-section__badges,
.settings-inline-status {
  min-width: 0;
  max-width: 100%;
}

.settings-inline-status {
  overflow-wrap: break-word;
  word-break: normal;
}

html[data-ui-generation="v1.9"] .status-pill,
html[data-ui-generation="v1.9"] .marketplace-card__badge {
  min-height: 1.55rem;
  padding: 0.25rem 0.58rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0.015em;
}

html[data-ui-generation="v1.9"] .marketplace-card {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0.9rem;
  padding: 1.05rem;
}

html[data-ui-generation="v1.9"] .marketplace-card .inline-action {
  min-height: 2.25rem;
  padding-inline: 0.9rem;
  font-weight: 750;
}

html[data-ui-generation="v1.9"] .marketplace-card__title-row strong {
  overflow-wrap: anywhere;
  word-break: break-word;
}

html[data-ui-generation="v1.9"] .marketplace-card__state {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  white-space: normal;
}

html[data-ui-generation="v1.9"] .panel-heading > div {
  min-width: 0;
}

html[data-ui-generation="v1.9"] .panel-heading > .status-pill {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  white-space: normal;
}

.file-editor-toolbar,
.file-editor-topbar,
.file-editor-pathbar {
  border-color: color-mix(in srgb, var(--border) 68%, transparent);
}

.file-editor-toolbar {
  gap: 0.75rem;
}

.page[data-page="files"] .files-connect-bar {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page[data-page="files"] .files-connect-bar .ssh-connection-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.page[data-page="files"] .file-toolbar {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.72fr);
}

.page[data-page="files"] .file-toolbar-stack {
  grid-column: 1 / -1;
  justify-items: start;
}

.page[data-page="files"] .file-actions {
  justify-content: flex-start;
}

@media (max-width: 720px) {
  .download-item__header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .download-item__header > .status-pill {
    grid-column: 2;
    justify-self: start;
  }

  .settings-section__header,
  .notification-item__header {
    align-items: flex-start;
    flex-direction: column;
    grid-template-columns: minmax(0, 1fr);
  }

  .settings-section__badges,
  .notification-item__badges {
    justify-content: flex-start;
  }
}

/* ---------------------------------------------------------------------------
   Network inventory (V2-H bullet 2) — read-only Nodes page card.
   Additive only: the card reuses .settings-section, .nodes-toolbar,
   .security-summary-grid, .security-list and .security-list-item. These three
   rules add the port-conflict highlight and bound the scroll area so a long
   listener list cannot stretch the page.
   --------------------------------------------------------------------------- */
.network-inventory-list {
  max-height: 420px;
  overflow: auto;
}

.network-inventory-listener.is-conflict {
  border-color: rgba(247, 178, 103, 0.5);
  background: rgba(247, 178, 103, 0.08);
}

.network-inventory-listener.is-conflict strong {
  color: rgba(255, 219, 173, 0.96);
}

/* AnxOS V2 visual system: shared shell, navigation, surfaces, and controls. */
html[data-ui-generation="v1.9"] {
  --v2-canvas: #0b1014;
  --v2-sidebar: #0d1519;
  --v2-panel: rgba(20, 30, 35, 0.96);
  --v2-line: rgba(184, 211, 210, 0.14);
  --v2-line-strong: rgba(105, 224, 202, 0.38);
  --v2-teal: #69e0ca;
  --v2-teal-strong: #a2f5df;
  --v2-text: #edf7f5;
  --v2-muted: #91a9aa;
  --anx-font-sans: "Aptos", "Segoe UI Variable", "Segoe UI", sans-serif;
  --anx-font-mono: "Cascadia Code", Consolas, monospace;
  --text: var(--v2-text);
  --muted: var(--v2-muted);
  --accent: var(--v2-teal);
  --accent-strong: var(--v2-teal-strong);
  --accent-soft: rgba(105, 224, 202, 0.14);
  --line: var(--v2-line);
  --border: var(--v2-line);
  --panel: var(--v2-panel);
  --panel-strong: rgba(26, 39, 44, 0.98);
  --radius: 10px;
  --sidebar-expanded-width: 246px;
  --app-section-gap: 18px;
  --app-card-padding: 18px;
  color-scheme: dark;
}

html[data-ui-generation="v1.9"] body {
  background: var(--v2-canvas);
  color: var(--v2-text);
}

html[data-ui-generation="v1.9"] .app-shell {
  padding: 12px;
  background: var(--v2-canvas);
}

html[data-ui-generation="v1.9"] .app-titlebar,
html[data-ui-generation="v1.9"] .app-workspace {
  border-color: var(--v2-line);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.24);
}

html[data-ui-generation="v1.9"] .app-titlebar {
  min-height: 48px;
  background: var(--v2-sidebar);
}

html[data-ui-generation="v1.9"] .app-titlebar__brand-mark,
html[data-ui-generation="v1.9"] .brand-mark {
  border-color: rgba(105, 224, 202, 0.3);
  border-radius: 10px;
  background: rgba(105, 224, 202, 0.1);
  box-shadow: none;
}

html[data-ui-generation="v1.9"] .app-titlebar__context strong,
html[data-ui-generation="v1.9"] .brand strong {
  letter-spacing: -0.015em;
}

html[data-ui-generation="v1.9"] .app-workspace {
  background: var(--v2-canvas);
}

html[data-ui-generation="v1.9"] .sidebar {
  padding: 18px 14px;
  border-color: var(--v2-line);
  background: var(--v2-sidebar);
}

html[data-ui-generation="v1.9"] .sidebar-header {
  margin-bottom: 22px;
  padding: 0 6px;
}

html[data-ui-generation="v1.9"] .nav-menu {
  gap: 4px;
  padding-inline: 2px;
}

html[data-ui-generation="v1.9"] .nav-section {
  margin-block: 12px;
  border-color: var(--v2-line);
}

html[data-ui-generation="v1.9"] .nav-section__title {
  padding-inline: 10px;
  color: var(--v2-muted);
}

html[data-ui-generation="v1.9"] .nav-item {
  min-height: 44px;
  border-color: transparent;
  border-radius: 9px;
  color: var(--v2-muted);
}

html[data-ui-generation="v1.9"] .nav-item:hover,
html[data-ui-generation="v1.9"] .nav-item:focus-visible {
  border-color: var(--v2-line);
  background: rgba(255, 255, 255, 0.045);
  color: var(--v2-text);
  box-shadow: none;
  transform: none;
}

html[data-ui-generation="v1.9"] .nav-item.is-active {
  border-color: rgba(105, 224, 202, 0.24);
  background: rgba(105, 224, 202, 0.1);
  box-shadow: inset 3px 0 0 var(--v2-teal);
  color: var(--v2-teal-strong);
}

html[data-ui-generation="v1.9"] .sidebar-footer {
  border-color: var(--v2-line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
}

html[data-ui-generation="v1.9"] .sidebar-footer:hover,
html[data-ui-generation="v1.9"] .sidebar-footer:focus-visible,
html[data-ui-generation="v1.9"] .sidebar-footer.is-node-picker-open {
  border-color: var(--v2-line-strong);
  background: rgba(105, 224, 202, 0.08);
  box-shadow: none;
}

html[data-ui-generation="v1.9"] .main-content {
  padding: 32px 36px 42px;
  background:
    linear-gradient(rgba(105, 224, 202, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 224, 202, 0.018) 1px, transparent 1px),
    var(--v2-canvas);
  background-size: 36px 36px;
}

html[data-ui-generation="v1.9"] .page {
  max-width: 1440px;
}

html[data-ui-generation="v1.9"] .page-header {
  margin-bottom: 26px;
}

html[data-ui-generation="v1.9"] .page-header h1 {
  margin-bottom: 7px;
  color: var(--v2-text);
  font-size: clamp(1.8rem, 2.6vw, 2.5rem);
  letter-spacing: -0.04em;
}

html[data-ui-generation="v1.9"] .page-header .eyebrow,
html[data-ui-generation="v1.9"] .eyebrow {
  color: var(--v2-teal);
  letter-spacing: 0.12em;
}

html[data-ui-generation="v1.9"] .page-header .lede,
html[data-ui-generation="v1.9"] .lede {
  color: var(--v2-muted);
  font-size: 0.96rem;
  line-height: 1.55;
}

html[data-ui-generation="v1.9"] .dashboard-welcome,
html[data-ui-generation="v1.9"] .dashboard-setup-health,
html[data-ui-generation="v1.9"] .status-card,
html[data-ui-generation="v1.9"] .settings-section,
html[data-ui-generation="v1.9"] .instances-toolbar,
html[data-ui-generation="v1.9"] .instances-controlbar,
html[data-ui-generation="v1.9"] .instances-table-panel,
html[data-ui-generation="v1.9"] .instances-details-panel,
html[data-ui-generation="v1.9"] .instance-workspace-card,
html[data-ui-generation="v1.9"] .public-access-service-card,
html[data-ui-generation="v1.9"] .marketplace-browser,
html[data-ui-generation="v1.9"] .marketplace-install-panel,
html[data-ui-generation="v1.9"] .panel {
  border-color: var(--v2-line);
  border-radius: 10px;
  background: var(--v2-panel);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

html[data-ui-generation="v1.9"] .dashboard-welcome,
html[data-ui-generation="v1.9"] .dashboard-setup-health {
  border-color: rgba(105, 224, 202, 0.24);
}

html[data-ui-generation="v1.9"] .dashboard-friendly-card,
html[data-ui-generation="v1.9"] .dashboard-context-strip > div,
html[data-ui-generation="v1.9"] .dashboard-launcher,
html[data-ui-generation="v1.9"] .instances-summary-card,
html[data-ui-generation="v1.9"] .nodes-summary-card {
  border-color: var(--v2-line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
}

html[data-ui-generation="v1.9"] .dashboard-launcher:hover,
html[data-ui-generation="v1.9"] .dashboard-launcher:focus-visible,
html[data-ui-generation="v1.9"] .marketplace-card:hover,
html[data-ui-generation="v1.9"] .marketplace-card.is-selected {
  border-color: var(--v2-line-strong);
  background: rgba(105, 224, 202, 0.08);
}

html[data-ui-generation="v1.9"] .inline-action,
html[data-ui-generation="v1.9"] .primary-button {
  min-height: 38px;
  border-color: var(--v2-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--v2-text);
  font-weight: 750;
}

html[data-ui-generation="v1.9"] .inline-action:not(:disabled):hover,
html[data-ui-generation="v1.9"] .inline-action:not(:disabled):focus-visible,
html[data-ui-generation="v1.9"] .primary-button:not(:disabled):hover,
html[data-ui-generation="v1.9"] .primary-button:not(:disabled):focus-visible {
  border-color: var(--v2-line-strong);
  background: rgba(105, 224, 202, 0.12);
  color: var(--v2-teal-strong);
  box-shadow: none;
}

html[data-ui-generation="v1.9"] .inline-action--primary,
html[data-ui-generation="v1.9"] .primary-button {
  border-color: rgba(105, 224, 202, 0.42);
  background: var(--v2-teal);
  color: #071412;
}

html[data-ui-generation="v1.9"] input,
html[data-ui-generation="v1.9"] select,
html[data-ui-generation="v1.9"] textarea {
  border-color: var(--v2-line);
  border-radius: 8px;
  background: rgba(8, 14, 17, 0.72);
  color: var(--v2-text);
}

html[data-ui-generation="v1.9"] input:focus,
html[data-ui-generation="v1.9"] select:focus,
html[data-ui-generation="v1.9"] textarea:focus {
  border-color: var(--v2-teal);
  box-shadow: 0 0 0 3px rgba(105, 224, 202, 0.12);
}

html[data-ui-generation="v1.9"] .status-pill {
  border-radius: 999px;
  font-weight: 750;
}

@media (max-width: 980px) {
  html[data-ui-generation="v1.9"] .app-shell {
    padding: 6px;
  }

  html[data-ui-generation="v1.9"] .main-content {
    padding: 24px;
  }
}

@media (max-width: 620px) {
  html[data-ui-generation="v1.9"] .main-content,
  html[data-ui-generation="v1.9"] .sidebar {
    padding: 16px;
  }

  html[data-ui-generation="v1.9"] .page-header {
    margin-bottom: 20px;
  }
}

/* Keep the established AnxOS purple identity while retaining the V2 layout pass. */
html[data-ui-generation="v1.9"] {
  --text: var(--anx-color-metal-white);
  --muted: var(--anx-color-metal-muted);
  --accent: var(--anx-color-electric-purple);
  --accent-strong: var(--anx-color-electric-purple-strong);
  --accent-soft: rgba(182, 108, 255, 0.16);
  --line: var(--anx-color-border);
  --border: var(--anx-color-border-soft);
  --panel: var(--anx-color-core-purple);
  --panel-strong: var(--anx-color-core-purple-strong);
}

html[data-ui-generation="v1.9"] body,
html[data-ui-generation="v1.9"] .app-shell {
  background: var(--v19-canvas);
  color: var(--text);
}

html[data-ui-generation="v1.9"] .app-titlebar,
html[data-ui-generation="v1.9"] .app-workspace {
  border-color: var(--v19-line);
}

html[data-ui-generation="v1.9"] .app-titlebar {
  background: rgba(11, 9, 16, 0.98);
}

html[data-ui-generation="v1.9"] .app-workspace {
  background: var(--v19-canvas);
}

html[data-ui-generation="v1.9"] .app-titlebar__brand-mark,
html[data-ui-generation="v1.9"] .brand-mark {
  border-color: var(--v19-line-strong);
  background: rgba(182, 108, 255, 0.08);
}

html[data-ui-generation="v1.9"] .sidebar {
  border-color: var(--v19-line);
  background: var(--v19-sidebar);
}

html[data-ui-generation="v1.9"] .nav-section__title {
  color: rgba(224, 212, 239, 0.48);
}

html[data-ui-generation="v1.9"] .nav-item {
  color: var(--muted);
}

html[data-ui-generation="v1.9"] .nav-item:hover,
html[data-ui-generation="v1.9"] .nav-item:focus-visible {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
}

html[data-ui-generation="v1.9"] .nav-item.is-active {
  border-color: rgba(182, 108, 255, 0.24);
  background: rgba(182, 108, 255, 0.14);
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--accent);
}

html[data-ui-generation="v1.9"] .sidebar-footer {
  border-color: var(--v19-line);
  background: rgba(255, 255, 255, 0.035);
}

html[data-ui-generation="v1.9"] .sidebar-footer:hover,
html[data-ui-generation="v1.9"] .sidebar-footer:focus-visible,
html[data-ui-generation="v1.9"] .sidebar-footer.is-node-picker-open {
  border-color: rgba(182, 108, 255, 0.42);
  background: rgba(31, 18, 48, 0.92);
}

html[data-ui-generation="v1.9"] .main-content {
  background:
    linear-gradient(rgba(182, 108, 255, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(182, 108, 255, 0.018) 1px, transparent 1px),
    var(--v19-canvas);
}

html[data-ui-generation="v1.9"] .page-header h1 {
  color: var(--text);
}

html[data-ui-generation="v1.9"] .page-header .eyebrow,
html[data-ui-generation="v1.9"] .eyebrow {
  color: var(--accent);
}

html[data-ui-generation="v1.9"] .page-header .lede,
html[data-ui-generation="v1.9"] .lede {
  color: var(--muted);
}

html[data-ui-generation="v1.9"] .dashboard-welcome,
html[data-ui-generation="v1.9"] .dashboard-setup-health,
html[data-ui-generation="v1.9"] .status-card,
html[data-ui-generation="v1.9"] .settings-section,
html[data-ui-generation="v1.9"] .instances-toolbar,
html[data-ui-generation="v1.9"] .instances-controlbar,
html[data-ui-generation="v1.9"] .instances-table-panel,
html[data-ui-generation="v1.9"] .instances-details-panel,
html[data-ui-generation="v1.9"] .instance-workspace-card,
html[data-ui-generation="v1.9"] .public-access-service-card,
html[data-ui-generation="v1.9"] .marketplace-browser,
html[data-ui-generation="v1.9"] .marketplace-install-panel,
html[data-ui-generation="v1.9"] .panel {
  border-color: var(--v19-line);
  background: var(--v19-panel);
}

html[data-ui-generation="v1.9"] .dashboard-welcome,
html[data-ui-generation="v1.9"] .dashboard-setup-health {
  border-color: var(--v19-line-strong);
}

html[data-ui-generation="v1.9"] .dashboard-friendly-card,
html[data-ui-generation="v1.9"] .dashboard-context-strip > div,
html[data-ui-generation="v1.9"] .dashboard-launcher,
html[data-ui-generation="v1.9"] .instances-summary-card,
html[data-ui-generation="v1.9"] .nodes-summary-card {
  border-color: var(--v19-line);
  background: rgba(255, 255, 255, 0.035);
}

html[data-ui-generation="v1.9"] .dashboard-launcher:hover,
html[data-ui-generation="v1.9"] .dashboard-launcher:focus-visible,
html[data-ui-generation="v1.9"] .marketplace-card:hover,
html[data-ui-generation="v1.9"] .marketplace-card.is-selected {
  border-color: var(--v19-line-strong);
  background: rgba(182, 108, 255, 0.1);
}

html[data-ui-generation="v1.9"] .inline-action,
html[data-ui-generation="v1.9"] .primary-button {
  border-color: var(--v19-line);
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
}

html[data-ui-generation="v1.9"] .inline-action:not(:disabled):hover,
html[data-ui-generation="v1.9"] .inline-action:not(:disabled):focus-visible,
html[data-ui-generation="v1.9"] .primary-button:not(:disabled):hover,
html[data-ui-generation="v1.9"] .primary-button:not(:disabled):focus-visible {
  border-color: rgba(182, 108, 255, 0.48);
  background: rgba(182, 108, 255, 0.14);
  color: var(--text);
}

html[data-ui-generation="v1.9"] .inline-action--primary,
html[data-ui-generation="v1.9"] .primary-button {
  border-color: rgba(182, 108, 255, 0.42);
  background: var(--accent);
  color: #14091e;
}

html[data-ui-generation="v1.9"] input,
html[data-ui-generation="v1.9"] select,
html[data-ui-generation="v1.9"] textarea {
  border-color: var(--v19-line);
  background: rgba(8, 10, 15, 0.62);
  color: var(--text);
}

html[data-ui-generation="v1.9"] input:focus,
html[data-ui-generation="v1.9"] select:focus,
html[data-ui-generation="v1.9"] textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(182, 108, 255, 0.12);
}

/* ---------------------------------------------------------------------------
   V2-D / V2-J / V2-H operator surfaces (additive).
   - .publisher-trust-notice: publisher-trust verdict copy on the Marketplace
     install review and on each Download Manager record.
   - .update-rollback-caveat: the downgrade caveat in the update modal.
   - .public-access-reverse-proxy-form: the route definition form.
   Reuses the existing card/pill/color tokens; no layout is redesigned.
   --------------------------------------------------------------------------- */
.publisher-trust-notice {
  display: grid;
  gap: 4px;
  margin: 8px 0;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.34);
}

.publisher-trust-notice strong {
  font-size: 12px;
  letter-spacing: 0.02em;
}

.publisher-trust-notice p,
.publisher-trust-notice small {
  margin: 0;
  overflow-wrap: break-word;
}

.publisher-trust-notice--ok {
  border-color: rgba(69, 224, 143, 0.28);
  background: rgba(69, 224, 143, 0.08);
}

.publisher-trust-notice--warning {
  border-color: rgba(255, 190, 92, 0.34);
  background: rgba(117, 74, 19, 0.2);
}

.publisher-trust-notice--critical {
  border-color: rgba(255, 107, 138, 0.38);
  background: rgba(112, 26, 52, 0.24);
}

.publisher-trust-notice__blocked {
  color: rgba(255, 214, 224, 0.96);
}

.update-rollback-caveat {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.34);
}

.update-rollback-caveat strong {
  font-size: 12px;
}

.update-rollback-caveat p,
.update-rollback-caveat small {
  margin: 0;
  overflow-wrap: break-word;
}

.update-rollback-caveat--ok {
  border-color: rgba(69, 224, 143, 0.28);
  background: rgba(69, 224, 143, 0.08);
}

.update-rollback-caveat--warning {
  border-color: rgba(255, 190, 92, 0.34);
  background: rgba(117, 74, 19, 0.2);
}

.update-rollback-caveat--critical {
  border-color: rgba(255, 107, 138, 0.38);
  background: rgba(112, 26, 52, 0.24);
}

.public-access-reverse-proxy-form {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.public-access-reverse-proxy-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.public-access-reverse-proxy-form-hint {
  margin: 0;
  overflow-wrap: break-word;
}

.public-access-reverse-proxy-route {
  overflow-wrap: break-word;
}

/* V2 polish: motion, feedback, metrics, and interaction affordances. */
html[data-ui-generation="v1.9"] .page.is-active > * {
  animation: anxos-v2-surface-in 280ms var(--anx-ease-standard) both;
}

html[data-ui-generation="v1.9"] .page.is-active > *:nth-child(2) { animation-delay: 24ms; }
html[data-ui-generation="v1.9"] .page.is-active > *:nth-child(3) { animation-delay: 48ms; }
html[data-ui-generation="v1.9"] .page.is-active > *:nth-child(4) { animation-delay: 72ms; }

@keyframes anxos-v2-surface-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html[data-ui-generation="v1.9"] button,
html[data-ui-generation="v1.9"] [role="button"],
html[data-ui-generation="v1.9"] .marketplace-card,
html[data-ui-generation="v1.9"] .status-card[data-public-access-service-card] {
  -webkit-tap-highlight-color: transparent;
}

html[data-ui-generation="v1.9"] button:focus-visible,
html[data-ui-generation="v1.9"] input:focus-visible,
html[data-ui-generation="v1.9"] select:focus-visible,
html[data-ui-generation="v1.9"] textarea:focus-visible,
html[data-ui-generation="v1.9"] [role="button"]:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(182, 108, 255, 0.16);
}

html[data-ui-generation="v1.9"] .status-card,
html[data-ui-generation="v1.9"] .settings-section,
html[data-ui-generation="v1.9"] .dashboard-widget-row article,
html[data-ui-generation="v1.9"] .dashboard-friendly-card,
html[data-ui-generation="v1.9"] .dashboard-launcher {
  transition:
    border-color var(--anx-duration-base) var(--anx-ease-standard),
    box-shadow var(--anx-duration-base) var(--anx-ease-standard),
    transform var(--anx-duration-base) var(--anx-ease-standard),
    background var(--anx-duration-base) var(--anx-ease-standard);
}

html[data-ui-generation="v1.9"] .status-card:hover,
html[data-ui-generation="v1.9"] .settings-section:hover,
html[data-ui-generation="v1.9"] .dashboard-widget-row article:hover,
html[data-ui-generation="v1.9"] .dashboard-friendly-card:hover,
html[data-ui-generation="v1.9"] .dashboard-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(4, 1, 12, 0.26), var(--anx-shadow-inset);
}

html[data-ui-generation="v1.9"] .dashboard-launcher:active,
html[data-ui-generation="v1.9"] .inline-action:active,
html[data-ui-generation="v1.9"] .primary-button:active {
  transform: translateY(0) scale(0.985);
}

html[data-ui-generation="v1.9"] .dashboard-quick-actions {
  gap: 9px;
}

html[data-ui-generation="v1.9"] .dashboard-launcher {
  min-height: 72px;
  align-content: center;
}

html[data-ui-generation="v1.9"] .dashboard-launcher span {
  color: var(--accent);
  letter-spacing: 0.08em;
}

html[data-ui-generation="v1.9"] .metric-value,
html[data-ui-generation="v1.9"] .dashboard-ops-grid strong,
html[data-ui-generation="v1.9"] [data-dashboard-friendly] {
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}

html[data-ui-generation="v1.9"] .metric-value,
html[data-ui-generation="v1.9"] [data-dashboard-friendly="metricsUpdated"] {
  transition: color var(--anx-duration-base) ease, text-shadow var(--anx-duration-base) ease;
}

html[data-ui-generation="v1.9"] [data-dashboard-friendly="metricsUpdated"]:not(:empty) {
  color: var(--accent-strong);
  text-shadow: 0 0 18px rgba(182, 108, 255, 0.18);
}

html[data-ui-generation="v1.9"] .status-pill {
  position: relative;
  gap: 7px;
  transition: border-color var(--anx-duration-fast) ease, background var(--anx-duration-fast) ease;
}

html[data-ui-generation="v1.9"] .status-pill::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 13%, transparent);
  content: "";
}

html[data-ui-generation="v1.9"] .status-pill.is-running::before,
html[data-ui-generation="v1.9"] .status-pill.is-connected::before {
  animation: anxos-v2-status-pulse 1800ms ease-out infinite;
}

@keyframes anxos-v2-status-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 13%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%, transparent); }
}

html[data-ui-generation="v1.9"] [aria-busy="true"] {
  position: relative;
  overflow: hidden;
}

html[data-ui-generation="v1.9"] [aria-busy="true"]::after,
html[data-ui-generation="v1.9"] .docker-loading-state::after,
html[data-ui-generation="v1.9"] .file-loading-state::after,
html[data-ui-generation="v1.9"] .ssh-loading-state::after,
html[data-ui-generation="v1.9"] .coolpals-loading-state::after,
html[data-ui-generation="v1.9"] .backup-loading-state::after,
html[data-ui-generation="v1.9"] .marketplace-loading::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.08) 48%, transparent 66%);
  background-size: 220% 100%;
  content: "";
  pointer-events: none;
  animation: anxos-v2-loading-sheen 1500ms ease-in-out infinite;
}

@keyframes anxos-v2-loading-sheen {
  from { background-position: 180% 0; }
  to { background-position: -40% 0; }
}

html[data-ui-generation="v1.9"] .docker-empty-state,
html[data-ui-generation="v1.9"] .file-empty-state,
html[data-ui-generation="v1.9"] .ssh-empty-state,
html[data-ui-generation="v1.9"] .coolpals-empty-state,
html[data-ui-generation="v1.9"] .backup-empty-state,
html[data-ui-generation="v1.9"] .marketplace-empty,
html[data-ui-generation="v1.9"] .security-empty-state,
html[data-ui-generation="v1.9"] .nodes-empty-state,
html[data-ui-generation="v1.9"] .notification-empty {
  min-height: 120px;
  align-content: center;
  justify-items: start;
  padding: 22px;
  background:
    radial-gradient(circle at 12% 0%, rgba(182, 108, 255, 0.1), transparent 18rem),
    rgba(7, 9, 14, 0.36);
}

html[data-ui-generation="v1.9"] .docker-empty-state strong::before,
html[data-ui-generation="v1.9"] .file-empty-state strong::before,
html[data-ui-generation="v1.9"] .ssh-empty-state strong::before,
html[data-ui-generation="v1.9"] .marketplace-empty strong::before,
html[data-ui-generation="v1.9"] .backup-empty-state strong::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 8px 2px 0;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(182, 108, 255, 0.1);
  content: "";
}

html[data-ui-generation="v1.9"] .settings-field-error,
html[data-ui-generation="v1.9"] .instance-game-config-error,
html[data-ui-generation="v1.9"] .field-error,
html[data-ui-generation="v1.9"] [data-tone="error"] {
  animation: anxos-v2-feedback-in 220ms var(--anx-ease-standard) both;
}

@keyframes anxos-v2-feedback-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

html[data-ui-generation="v1.9"] [data-tooltip] {
  position: relative;
}

html[data-ui-generation="v1.9"] [data-tooltip]:not(.nav-item):hover::after,
html[data-ui-generation="v1.9"] [data-tooltip]:not(.nav-item):focus-visible::after {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 100;
  max-width: 220px;
  padding: 7px 9px;
  border: 1px solid rgba(182, 108, 255, 0.32);
  border-radius: 7px;
  background: rgba(15, 10, 26, 0.98);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
  color: var(--text);
  content: attr(data-tooltip);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  transform: translateX(-50%);
}

html[data-ui-generation="v1.9"] .sidebar[data-sidebar-state="collapsed"] [data-tooltip]:hover::after,
html[data-ui-generation="v1.9"] .sidebar[data-sidebar-state="collapsed"] [data-tooltip]:focus-visible::after {
  top: 50%;
  left: calc(100% + 12px);
  transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
  html[data-ui-generation="v1.9"] .page.is-active > *,
  html[data-ui-generation="v1.9"] .status-pill.is-running::before,
  html[data-ui-generation="v1.9"] .status-pill.is-connected::before,
  html[data-ui-generation="v1.9"] [aria-busy="true"]::after,
  html[data-ui-generation="v1.9"] .settings-field-error,
  html[data-ui-generation="v1.9"] .instance-game-config-error,
  html[data-ui-generation="v1.9"] .field-error,
  html[data-ui-generation="v1.9"] [data-tone="error"] {
    animation: none;
  }
}

@media (max-width: 760px) {
  html[data-ui-generation="v1.9"] .dashboard-next-step {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-ui-generation="v1.9"] .dashboard-next-step .primary-button {
    width: 100%;
  }
}