/* v13 aligns the cloud supervisor with the same spatial product language as the desktop app. */
body.nw-cloud-v13 {
  --bg: #090b0a;
  --surface: #111411;
  --surface-soft: #171b18;
  --surface-tint: #1d221e;
  --rail: #0c0f0d;
  --ink: #f2f4ef;
  --muted: #9ba19a;
  --faint: #777e77;
  --line: #292e29;
  --line-strong: #596059;
  --accent: #72d8cc;
  --action: #ff7142;
  --success: #86dda2;
  --danger: #ff8175;
  --warning: #ffb45f;
  color-scheme: dark;
  background: var(--bg);
  color: var(--ink);
}

body.nw-cloud-v13 ::selection { background: rgb(114 216 204 / 30%); color: #fff; }
body.nw-cloud-v13 button,
body.nw-cloud-v13 input,
body.nw-cloud-v13 textarea,
body.nw-cloud-v13 select { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.nw-cloud-v13 button:focus-visible,
body.nw-cloud-v13 input:focus-visible,
body.nw-cloud-v13 textarea:focus-visible,
body.nw-cloud-v13 select:focus-visible,
body.nw-cloud-v13 a:focus-visible { outline: 3px solid rgb(114 216 204 / 35%); outline-offset: 2px; }

body.nw-cloud-v13 .shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  grid-template-rows: 64px minmax(0, 1fr);
  background-color: var(--bg);
  background-image: linear-gradient(rgb(255 255 255 / 1.8%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 1.8%) 1px, transparent 1px);
  background-size: 44px 44px;
}

body.nw-cloud-v13 .topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  position: sticky;
  top: 0;
  height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: rgb(9 11 10 / 96%);
  color: var(--ink);
  backdrop-filter: blur(18px);
}
body.nw-cloud-v13 .topbar .brand strong { color: var(--ink); }
body.nw-cloud-v13 .topbar .brand-mark { color: var(--accent); }
body.nw-cloud-v13 .topbar .brand span:last-child { color: var(--muted); }
body.nw-cloud-v13 .topbar .quiet { color: var(--ink-soft, #c9cec7); border-color: #3b423b; }
body.nw-cloud-v13 .topbar .quiet:hover { background: var(--surface-soft); color: var(--ink); }
body.nw-cloud-v13 .sync-state { color: var(--success); }

body.nw-cloud-v13 .control-nav {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: 64px;
  z-index: 10;
  height: calc(100vh - 64px);
  padding: 14px 12px 24px;
  border-right: 1px solid var(--line);
  border-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: auto;
  background: #0c0f0d;
}
body.nw-cloud-v13 .control-nav button {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 5px;
  color: #aeb4ad;
  text-align: left;
  white-space: nowrap;
}
body.nw-cloud-v13 .control-nav button:hover { background: #161a17; color: var(--ink); }
body.nw-cloud-v13 .control-nav button.active {
  background: #1a1f1b;
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--action);
}

body.nw-cloud-v13 main {
  grid-column: 2;
  grid-row: 2;
  width: min(1260px, calc(100% - 48px));
  margin: 24px auto 0;
  padding: 28px 32px 80px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

body.nw-cloud-v13 .page-head { margin: 0 0 22px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
body.nw-cloud-v13 .page-head h1 { color: var(--ink); font-size: 27px; line-height: 1.25; }
body.nw-cloud-v13 .page-head p,
body.nw-cloud-v13 .lede,
body.nw-cloud-v13 .eyebrow { color: var(--muted); }
body.nw-cloud-v13 .eyebrow { color: var(--accent); }
body.nw-cloud-v13 .revision { border-color: var(--line); background: var(--surface); }
body.nw-cloud-v13 .revision span { color: var(--muted); }
body.nw-cloud-v13 .revision strong { color: var(--ink); }

body.nw-cloud-v13 .band,
body.nw-cloud-v13 .metrics,
body.nw-cloud-v13 .work-mix,
body.nw-cloud-v13 .gateway-summary,
body.nw-cloud-v13 .policy-impact,
body.nw-cloud-v13 .login-panel,
body.nw-cloud-v13 .device-auth-card {
  border-color: var(--line);
  border-radius: 7px;
  background: var(--surface);
  box-shadow: none;
}
body.nw-cloud-v13 .attention-strip { border-color: #5b4229; border-radius: 6px; background: #20160f; color: #ffd0a6; }
body.nw-cloud-v13 .attention-strip strong { color: #ffd0a6; }
body.nw-cloud-v13 .attention-strip span,
body.nw-cloud-v13 .attention-strip small { color: #caa17e; }
body.nw-cloud-v13 .band { padding: 20px; }
body.nw-cloud-v13 .band + .band,
body.nw-cloud-v13 .split { margin-top: 16px; }
body.nw-cloud-v13 .split { gap: 16px; }
body.nw-cloud-v13 .section-head h2 { color: var(--ink); }
body.nw-cloud-v13 .section-head p { color: var(--muted); }

body.nw-cloud-v13 .metrics > div,
body.nw-cloud-v13 .gateway-summary > div {
  border-color: var(--line);
  background: var(--surface-soft);
}
body.nw-cloud-v13 .metrics strong,
body.nw-cloud-v13 .gateway-summary strong { color: var(--ink); }
body.nw-cloud-v13 .metrics span,
body.nw-cloud-v13 .gateway-summary span { color: var(--muted); }
body.nw-cloud-v13 .work-mix { color: var(--muted); }

body.nw-cloud-v13 .table-wrap { border-top-color: var(--line); }
body.nw-cloud-v13 table { color: var(--ink-soft, #c9cec7); }
body.nw-cloud-v13 thead th { background: var(--surface-soft); color: var(--muted); }
body.nw-cloud-v13 tbody tr { border-bottom-color: var(--line); }
body.nw-cloud-v13 tbody tr:hover { background: #151915; }
body.nw-cloud-v13 td,
body.nw-cloud-v13 th { border-color: var(--line); }
body.nw-cloud-v13 .status { background: var(--surface-soft); color: var(--muted); }

body.nw-cloud-v13 .primary {
  min-height: 44px;
  border-color: var(--action);
  border-radius: 5px;
  background: var(--action);
  color: #1a0c07;
}
body.nw-cloud-v13 .primary:hover { background: #ff875e; }
body.nw-cloud-v13 .secondary,
body.nw-cloud-v13 .quiet,
body.nw-cloud-v13 .table-action {
  min-height: 44px;
  border-color: #424941;
  border-radius: 5px;
  background: var(--surface);
  color: var(--ink-soft, #c9cec7);
}
body.nw-cloud-v13 .secondary:hover,
body.nw-cloud-v13 .table-action:hover { border-color: var(--line-strong); background: var(--surface-soft); color: var(--ink); }

body.nw-cloud-v13 input,
body.nw-cloud-v13 textarea,
body.nw-cloud-v13 select {
  border-color: #3d443d;
  border-radius: 5px;
  background: #0d100e;
  color: var(--ink);
}
body.nw-cloud-v13 input::placeholder,
body.nw-cloud-v13 textarea::placeholder { color: var(--faint); }
body.nw-cloud-v13 select option { background: var(--surface); color: var(--ink); }
body.nw-cloud-v13 label > span,
body.nw-cloud-v13 fieldset legend { color: var(--ink-soft, #c9cec7); }
body.nw-cloud-v13 .form-error { color: var(--danger); }

body.nw-cloud-v13 .event-list > *,
body.nw-cloud-v13 .entity-list > *,
body.nw-cloud-v13 .capability-version-row,
body.nw-cloud-v13 .capability-release-row,
body.nw-cloud-v13 .connection-row,
body.nw-cloud-v13 .access-request-row,
body.nw-cloud-v13 .migration-row,
body.nw-cloud-v13 .scheduler-row,
body.nw-cloud-v13 .data-export-row,
body.nw-cloud-v13 .figma-fields,
body.nw-cloud-v13 .approval-detail,
body.nw-cloud-v13 .quality-evidence,
body.nw-cloud-v13 .client-release-card {
  border-color: var(--line);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--ink-soft, #c9cec7);
}
body.nw-cloud-v13 code,
body.nw-cloud-v13 pre { background: #090c0a; color: #b9e6df; border-color: var(--line); }

body.nw-cloud-v13 .login {
  background-color: var(--bg);
  background-image: linear-gradient(rgb(255 255 255 / 2%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 2%) 1px, transparent 1px);
  background-size: 44px 44px;
}
body.nw-cloud-v13 .login-brand { background: #0c0f0d; }
body.nw-cloud-v13 .login-panel { background: var(--surface); }
body.nw-cloud-v13 .login-panel h1 { color: var(--ink); }
body.nw-cloud-v13 .login-panel p,
body.nw-cloud-v13 .login-panel .note { color: var(--muted); }
body.nw-cloud-v13 .device-auth { background: var(--bg); }

@media (max-width: 900px) {
  body.nw-cloud-v13 .shell { grid-template-columns: 176px minmax(0, 1fr); }
  body.nw-cloud-v13 main { width: calc(100% - 28px); padding-inline: 18px; }
}

@media (max-width: 760px) {
  body.nw-cloud-v13 .shell { display: block; min-height: 100vh; }
  body.nw-cloud-v13 .topbar { height: 58px; padding-inline: 14px; }
  body.nw-cloud-v13 .control-nav {
    position: sticky;
    top: 58px;
    height: auto;
    flex-direction: row;
    padding: 6px 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }
  body.nw-cloud-v13 .control-nav button { min-height: 44px; flex: 0 0 auto; }
  body.nw-cloud-v13 main { width: calc(100% - 20px); margin-top: 10px; padding: 18px 8px 72px; }
  body.nw-cloud-v13 .page-head h1 { font-size: 24px; }
  body.nw-cloud-v13 .band { padding: 14px 10px; }
  body.nw-cloud-v13 .split { grid-template-columns: 1fr; }
}

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