/* Copyright (c) 2026 Darknode-Official (Manav Prasad). All rights reserved. See LICENSE.
   Cloud-console layout, loaded last.
   Chrome (every style): one dark header holding Services + search, a slim favorites bar,
   a collapsible left side navigation, and location breadcrumbs.
   Content (Professional, Command and Dark styles): grey page, white rounded containers,
   pill buttons (orange primary, blue-outline secondary), blue links, 8px inputs.
   The Classic style keeps its own content colours. */

body.app {
  --topbar-h: 48px;
  --con-h1: 48px;
  --con-h2: 36px;
  --aws-side-w: 264px;
  /* Professional (default) chrome: a clean white header. The dark/classic styles
     restore the original dark header below. */
  --aws-hdr: #ffffff;
  --aws-hdr-2: #f2f3f3;
  --aws-hdr-line: #e4e7ea;
  --aws-hdr-txt: #0f1b2a;
  --aws-hdr-mut: #5f6b7a;
  --aws-hdr-hover: rgba(0, 7, 22, .06);
  --aws-hdr-chip: #16191f;
  --aws-hdr-input-bg: #ffffff;
  --aws-hdr-input-line: #d5dbdb;
  --aws-orange: #ff9900;
  --aws-orange-2: #fa6f00;
  --aws-font: "Amazon Ember", "Helvetica Neue", Roboto, Arial, sans-serif;
  --aws-side-bg: #ffffff;
  --aws-side-line: #e9ebed;
  --aws-side-txt: #414d5c;
  --aws-side-head: #000716;
  --aws-side-on: #0972d3;
  --aws-crumb: #0972d3;
  --aws-crumb-cur: #5f6b7a;
}
html[data-style=dark] body.app,
html[data-style=classic] body.app {
  --aws-hdr: #161d26;
  --aws-hdr-2: #232f3e;
  --aws-hdr-line: #414d5c;
  --aws-hdr-txt: #ffffff;
  --aws-hdr-mut: #b6bec9;
  --aws-hdr-hover: rgba(255, 255, 255, .1);
  --aws-hdr-chip: #eaeded;
  --aws-hdr-input-bg: #0f141a;
  --aws-hdr-input-line: #5f6b7a;
  --aws-side-bg: #161d26;
  --aws-side-line: #414d5c;
  --aws-side-txt: #d1d5db;
  --aws-side-head: #fbfbfb;
  --aws-side-on: #539fe5;
  --aws-crumb: #539fe5;
  --aws-crumb-cur: #8d99a8;
}

/* ================= header ================= */
html body.app #topbar#topbar {
  height: var(--topbar-h) !important;
  min-height: 0 !important;
  padding: 0 12px 0 16px !important;
  gap: 8px !important;
  background: var(--aws-hdr) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--aws-hdr-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html body.app #topbar#topbar::before,
html body.app #topbar#topbar::after { display: none !important; }
html body.app #topbar#topbar .brand { flex: none; margin-right: 6px; }
/* the wordmark is drawn dark; it is whitened only for the dark header. The mark is never
   filtered (a filter would whiten its yellow dot), so the dark header swaps in the light-stroke
   logo instead. The Professional white header keeps the dark wordmark and the normal logo. */
html body.app #topbar#topbar .brand-mark { filter: none !important; }
/* The wordmark asset is drawn in near-white (#F2F5F9). The Professional console header is
   white, so it must be inverted to dark to be visible (same as the landing rule in
   pro-theme.css). filter:none left a white wordmark on a white bar — invisible. */
html[data-style=pro] body.app #topbar#topbar .brand-wordmark { filter: invert(1) !important; }
html[data-style=dark] body.app #topbar#topbar .brand-wordmark,
html[data-style=classic] body.app #topbar#topbar .brand-wordmark { filter: brightness(0) invert(1) !important; }
html[data-style=dark] body.app #topbar#topbar .brand-mark:not([src^="data:"]),
html[data-style=classic] body.app #topbar#topbar .brand-mark:not([src^="data:"]) { content: url('/logo-light.svg') !important; }
html body.app #topbar#topbar #topbar-center,
html body.app #topbar#topbar #cmdkBtn,
html body.app #topbar#topbar #cli-dot { display: none !important; }
/* The live ops strip belongs to the console only; never let a stale copy show on the landing page. */
body.landing #topbar #topbar-center { display: none !important; }

/* Services button + search, moved into the header by console-nav.js */
html body.app #topbar#topbar .con-bar {
  flex: 1;
  min-width: 0;
  height: var(--topbar-h);
  padding: 0;
  gap: 8px;
  background: transparent;
  border: 0;
  color: var(--aws-hdr-txt);
}
html body.app #topbar#topbar .con-services {
  height: 32px;
  padding: 0 10px;
  color: var(--aws-hdr-txt);
  font-family: var(--aws-font);
  font-size: 14px;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 8px !important;
}
html body.app #topbar#topbar .con-services:hover,
html body.app #topbar#topbar .con-services[aria-expanded=true] { background: var(--aws-hdr-hover); border-color: transparent; }
html body.app #topbar#topbar .con-svc-count { display: none; }
html body.app #topbar#topbar .con-caret { color: var(--aws-hdr-mut); }
html body.app #topbar#topbar .con-grid-ic {
  background:
    linear-gradient(var(--aws-hdr-txt), var(--aws-hdr-txt)) 0 0/6px 6px no-repeat,
    linear-gradient(var(--aws-hdr-txt), var(--aws-hdr-txt)) 100% 0/6px 6px no-repeat,
    linear-gradient(var(--aws-hdr-txt), var(--aws-hdr-txt)) 0 100%/6px 6px no-repeat,
    linear-gradient(var(--aws-hdr-txt), var(--aws-hdr-txt)) 100% 100%/6px 6px no-repeat;
}
html body.app #topbar#topbar .con-search { max-width: 560px; }
html body.app #topbar#topbar .con-search input {
  height: 32px;
  padding: 0 44px 0 12px;
  background: var(--aws-hdr-input-bg);
  border: 1px solid var(--aws-hdr-input-line);
  border-radius: 8px;
  color: var(--aws-hdr-txt);
  font-family: var(--aws-font);
  font-size: 14px;
}
html body.app #topbar#topbar .con-search input::placeholder { color: var(--aws-hdr-mut); }
html body.app #topbar#topbar .con-search input:focus { border-color: #539fe5; box-shadow: 0 0 0 1px #539fe5; }
html body.app #topbar#topbar .con-search kbd { color: var(--aws-hdr-mut); border-color: var(--aws-hdr-input-line); background: transparent; }
html body.app #topbar#topbar .con-quick { display: none; }

/* right-hand icons: help, style, more, profile */
html body.app #topbar#topbar #user-slot { gap: 4px !important; flex: none; }
html body.app #topbar#topbar :is(.style-toggle, .icon-btn, .tb-help-btn) {
  height: 32px !important;
  min-width: 32px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--aws-hdr-txt) !important;
  border-radius: 8px !important;
  font-family: var(--aws-font);
  font-size: 14px;
}
html body.app #topbar#topbar :is(.style-toggle, .icon-btn, .tb-help-btn):hover { background: var(--aws-hdr-hover) !important; }
html body.app #topbar#topbar .tb-help-btn svg,
html body.app #topbar#topbar .icon-btn svg,
html body.app #topbar#topbar .style-toggle svg { color: var(--aws-hdr-txt); stroke: currentColor; }
/* one icon at a time: moon in light mode (click = go dark), sun in dark mode (click = go light) */
.style-toggle .ic-sun, .style-toggle .ic-moon { display: none; }
html[data-style=dark] .style-toggle .ic-sun { display: inline-flex; }
html:not([data-style=dark]) .style-toggle .ic-moon { display: inline-flex; }
html body.app #topbar#topbar .profile-btn {
  height: 32px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--aws-hdr-txt) !important;
  border-radius: 8px !important;
  padding: 0 6px !important;
}
html body.app #topbar#topbar .profile-btn:hover { background: var(--aws-hdr-hover) !important; }
html body.app #topbar#topbar .p-initials { background: var(--aws-orange) !important; color: #0f141a !important; font-weight: 700; }

/* ================= favorites bar ================= */
/* contain:layout (set elsewhere) would make this the containing block of the fixed Services menu */
html body.app .con-wrap { grid-column: 1 / -1; position: sticky; top: var(--topbar-h); z-index: 50; contain: none !important; }
body.app .con-top { position: static; }
body.app .con-favbar {
  display: flex;
  align-items: center;
  height: var(--con-h2);
  gap: 2px;
  padding: 0 12px;
  background: var(--aws-hdr-2);
  border-bottom: 0;
  font-family: var(--aws-font);
}
body.app .con-favlbl { display: inline-flex; align-items: center; height: 28px; color: var(--aws-hdr-mut); font-size: 12px; letter-spacing: .02em; margin: 0 6px 0 0; }
body.app .con-favlbl.con-reclbl { margin-left: 14px; }
body.app .con-favbar .con-favs { display: inline-flex; align-items: center; gap: 6px; }
body.app .con-favbar .con-chip {
  height: 28px;
  padding: 0 10px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--aws-hdr-chip) !important;
  font-family: var(--aws-font);
  font-size: 13px;
  font-weight: 400;
  border-radius: 6px !important;
}
body.app .con-favbar .con-chip:hover { background: var(--aws-hdr-hover) !important; color: var(--aws-hdr-txt) !important; }
body.app .con-favbar .con-empty { color: var(--aws-hdr-mut); font-size: 12px; }
body.app .con-catbar { display: none !important; }

/* Services mega-menu drops from the header, anchored under the Services button */
html body.app .svc-menu.svc-menu {
  position: fixed;
  top: calc(var(--topbar-h) + var(--con-h2)) !important;
  left: var(--svc-left, 0px);
  right: auto;
  width: min(1120px, calc(100vw - var(--svc-left, 0px) - 12px));
  height: min(640px, calc(100vh - var(--topbar-h) - 16px));
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 32px rgba(0, 7, 22, .28);
  font-family: var(--aws-font);
}

/* ================= shell: side nav + main ================= */
body.app .app-shell {
  display: grid !important;
  grid-template-columns: var(--aws-side-w) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  /* a transform (or a running transform animation) here would trap the fixed side drawer and Services menu */
  transform: none !important;
  animation: none !important;
}
body.app.aws-side-closed { --aws-side-w: 40px; }
body.app .app-main { grid-column: 2; grid-row: 2; padding: 16px 32px 24px; }

.aws-side {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: calc(var(--topbar-h) + var(--con-h2));
  height: calc(100vh - var(--topbar-h) - var(--con-h2));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--aws-side-txt) 30%, transparent) transparent;
  padding: 12px 0 24px;
  background: var(--aws-side-bg);
  border-right: 1px solid var(--aws-side-line);
  font-family: var(--aws-font);
  z-index: 30;
}
body.app.aws-side-closed .aws-side { display: none; }
.aws-side-h { display: flex; align-items: center; gap: 8px; padding: 4px 12px 10px 24px; }
html body .aws-side .aws-side-title {
  flex: 1;
  text-align: left;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: var(--aws-side-head) !important;
  font: 700 18px/1.3 var(--aws-font);
  cursor: pointer;
}
html body .aws-side .aws-side-x,
html body .aws-side-open {
  position: relative;
  width: 32px;
  height: 32px;
  flex: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  cursor: pointer;
  color: var(--aws-side-txt);
}
html body .aws-side .aws-side-x:hover,
html body .aws-side-open:hover { background: color-mix(in srgb, var(--aws-side-txt) 12%, transparent) !important; }
.aws-side-x::before,
.aws-side-x::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 15px;
  width: 14px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.aws-side-x::before { transform: rotate(45deg); }
.aws-side-x::after { transform: rotate(-45deg); }
.aws-side-open { display: none; }
/* Collapsed: a thin rail (like a cloud console's collapsed side nav) holding the open button,
   rather than a bare 40px gap. */
body.app.aws-side-closed .app-shell::before {
  content: "";
  grid-column: 1;
  grid-row: 2;
  background: var(--aws-side-bg);
  border-right: 1px solid var(--aws-side-line);
}
/* Backdrop behind the side drawer on narrow screens (console-nav.js unhides it). */
.aws-side-bd { display: none; }
/* Skip-link targets take programmatic focus; the ring belongs on controls, not the page. */
body.app :is(#view, #app-content):focus { outline: none !important; box-shadow: none !important; }
body.app.aws-side-closed .aws-side-open {
  display: block;
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: calc(var(--topbar-h) + var(--con-h2) + 12px);
  margin: 0 auto;
}
.aws-side-open span,
.aws-side-open span::before,
.aws-side-open span::after {
  position: absolute;
  left: 9px;
  width: 14px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}
.aws-side-open span { top: 15px; }
.aws-side-open span::before,
.aws-side-open span::after { content: ""; left: 0; }
.aws-side-open span::before { top: -5px; }
.aws-side-open span::after { top: 5px; }

.aws-side-div { height: 1px; margin: 12px 24px; background: var(--aws-side-line); }
.aws-side-lbl { padding: 0 24px 6px; color: var(--aws-side-head); font: 700 14px/1.4 var(--aws-font); }
html body .aws-side :is(.aws-sl, .aws-sg-h) {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 0;
  height: auto;
  text-align: left;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--aws-side-txt) !important;
  font: 400 14px/1.45 var(--aws-font);
  padding: 4px 16px 4px 24px !important;
  cursor: pointer;
  transform: none !important;
  white-space: nowrap;      /* a long tool name must never wrap to a second line */
  overflow: hidden;         /* ... including when the active item turns bold (below) */
}
html body .aws-side .aws-sg-items .aws-sl { padding-left: 44px !important; }
html body .aws-side .aws-sl:hover,
html body .aws-side .aws-sg-h:hover { color: var(--aws-side-on) !important; text-decoration: underline; }
html body .aws-side .aws-sl.on { color: var(--aws-side-on) !important; font-weight: 700; }
html body .aws-side .aws-sg-h { font-weight: 400; }
/* The label is its own flex item so it truncates with an ellipsis instead of
   wrapping — the extra width from the bold active state is absorbed here, not
   pushed onto a new line. Any trailing badge stays visible beside it. */
html body .aws-side .aws-sl .aws-sl-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aws-sg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aws-sg-n { color: var(--aws-crumb-cur); font-size: 12px; }
.aws-caret {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
  margin-left: -18px;
}
.aws-caret::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 4px;
  width: 5px;
  height: 5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .12s;
}
.aws-sg-h[aria-expanded=true] .aws-caret::before { transform: rotate(45deg); top: 2px; }
.aws-side .svc-badge { font-size: 10px; }

/* ================= breadcrumbs ================= */
html body.app #app-main #crumbs.crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  min-height: 20px;
  margin: 0 0 14px;
  padding: 0;
  background: none;
  border: 0;
  font: 400 14px/20px var(--aws-font);
}
html body.app #app-main #crumbs .crumb {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
  font: inherit;
  color: var(--aws-crumb) !important;
  cursor: pointer;
}
html body.app #app-main #crumbs button.crumb:hover { text-decoration: underline; }
html body.app #app-main #crumbs .crumb.cur,
html body.app #app-main #crumbs .crumb-grp { color: var(--aws-crumb-cur) !important; cursor: default; }
html body.app #app-main #crumbs button.crumb.cur:hover { text-decoration: none; }
html body.app #app-main #crumbs .crumb-sep { margin: 0 10px !important; color: var(--aws-crumb-cur) !important; font-size: 14px !important; opacity: 1 !important; }

/* ================= content (Professional, Command, Dark) ================= */
html[data-style=pro] body.app {
  --bg: #f2f3f3;
  --bg2: #ffffff;
  --card: #ffffff;
  --card2: #fafafa;
  --line: #e9ebed;
  --line-2: #c6c6cd;
  --txt: #000716;
  --txt-2: #414d5c;
  --mut: #5f6b7a;
  --placeholder: #8c8c94;
  --acc: #0972d3;
  --acc-2: #033160;
  --acc-soft: #f2f8fd;
  --acc-line: #b5d6f4;
  --ok: #037f0c;
  --bad: #d91515;
  --warn: #8d6605;
  --surface: #fafafa;
  --border: #e9ebed;
  --code-bg: #f4f4f4;
  --aws-in-bg: #ffffff;
  --aws-in-line: #8c8c94;
  --aws-ghost-bg-h: #f2f8fd;
  --aws-ghost-txt-h: #033160;
  --aws-shadow: 0 1px 1px 0 rgba(0, 28, 36, .3), 1px 1px 1px 0 rgba(0, 28, 36, .15), -1px 1px 1px 0 rgba(0, 28, 36, .15);
  --aws-row-h: #f2f8fd;
}
html[data-style=dark] body.app {
  --bg: #0f1b2a;
  --bg2: #192534;
  --card: #192534;
  --card2: #1b2b3d;
  --line: #414d5c;
  --line-2: #5f6b7a;
  --txt: #d1d5db;
  --txt-2: #c6c6cd;
  --mut: #8d99a8;
  --placeholder: #8d99a8;
  --acc: #539fe5;
  --acc-2: #89bdee;
  --acc-soft: rgba(83, 159, 229, .12);
  --acc-line: #1d4f7e;
  --surface: #192534;
  --border: #414d5c;
  --aws-in-bg: #0f1b2a;
  --aws-in-line: #7d8998;
  --aws-ghost-bg-h: #1a2b3d;
  --aws-ghost-txt-h: #89bdee;
  --aws-shadow: 0 1px 1px 0 rgba(0, 0, 0, .5), 0 0 0 1px #2a3b4f;
  --aws-row-h: #1a2b3d;
}

html:is([data-style=pro], [data-style=dark]) body.app {
  background: var(--bg) !important;
  background-image: none !important;

  & :is(#app, #view, .app-shell) { background: var(--bg) !important; background-image: none !important; }
  color: var(--txt) !important;
  font-family: var(--aws-font);
  --font-display: var(--aws-font);

  & .app-main::before { display: none !important; }
  & .app-main { background: var(--bg) !important; font-size: 14px; }

  /* form fields */
  & .app-main :is(input:is([type=text], [type=search], [type=url], [type=email], [type=number], [type=password], [type=date], [type=time], :not([type])), select, textarea) {
    background-color: var(--aws-in-bg) !important;
    border: 1px solid var(--aws-in-line) !important;
    border-radius: var(--btn-radius) !important;
    color: var(--txt) !important;
    font-family: var(--aws-font);
    font-size: 14px;
    box-shadow: none !important;
  }
  /* One control height everywhere: inputs and selects line up with .btn (36px). */
  & .app-main :is(input, select):not([type=checkbox], [type=radio], [type=range], [type=color], [type=file]) { min-height: 36px; padding-block: 0 !important; }
  & .app-main :is(input, select, textarea):focus {
    border-color: var(--acc) !important;
    box-shadow: 0 0 0 1px var(--acc) !important;
    outline: none !important;
  }
  & .app-main :is(input, textarea)::placeholder { color: var(--placeholder) !important; font-style: italic; }

  /* tables */
  & .app-main table { border-collapse: collapse; }
  & .app-main th {
    background: var(--card) !important;
    color: var(--txt-2) !important;
    font-family: var(--aws-font) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-bottom: 1px solid var(--line-2) !important;
  }
  & .app-main td { border-bottom: 1px solid var(--line) !important; }
  & .app-main tbody tr:hover > td { background: var(--aws-row-h) !important; }

  /* tabs */
  & .app-main :is(.tab, [role=tab]) {
    font-family: var(--aws-font);
    font-weight: 700;
    color: var(--txt-2);
  }
  & .app-main :is(.tab, [role=tab]):is(.active, .on, [aria-selected=true]) { color: var(--acc) !important; }

  /* footer */
  & .app-foot { background: var(--bg) !important; border-top: 1px solid var(--line) !important; }
}

/* Headings, containers and buttons outrank the skins' class-heavy !important rules
   (the :not(#id) chain adds ID-level specificity, the same trick buttons.css uses). */
html:is([data-style=pro], [data-style=dark]):not(#aws-a):not(#aws-b) body.app {
  & :is(.pg-h1, .app-main h1) {
    font-family: var(--aws-font) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    color: var(--txt) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
  }
  & :is(.pg-h2, .app-main h2) {
    font-family: var(--aws-font) !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    -webkit-text-fill-color: currentColor !important;
  }
  & .app-main a:not(.btn):not([class*="-btn"]) { color: var(--acc); }

  /* containers */
  & .app-main :is(.panel, .card) {
    background: var(--card) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: var(--aws-shadow) !important;
  }
  & .app-main :is(.panel, .card) :is(.panel, .card) {
    box-shadow: none !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
  }
  & .app-main .stat {
    background: var(--card) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: var(--aws-shadow) !important;
  }

  /* buttons: one shape and size scale (4px corners from buttons.css; 30 / 36 / 40px
     tall); plain .btn is primary (orange), .ghost is the outlined normal button */
  & .btn {
    font-family: var(--aws-font) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    padding: 0 16px !important;
    min-height: 36px;
    line-height: 1.2 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-width: 1px !important;
    border-style: solid !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    background-image: none !important;
  }
  /* The skins' focus ring for .btn is a box-shadow, which the pill reset above removes;
     give keyboard users a real outline instead. */
  & .btn:focus-visible { outline: 2px solid var(--acc) !important; outline-offset: 2px !important; }
  & .btn:not(.ghost, .danger, .github) {
    background: var(--aws-orange) !important;
    border-color: var(--aws-orange) !important;
    color: #0f141a !important;
  }
  & .btn:not(.ghost, .danger, .github):hover {
    background: var(--aws-orange-2) !important;
    border-color: var(--aws-orange-2) !important;
    color: #0f141a !important;
  }
  & .btn.ghost {
    background: var(--card) !important;
    border-color: var(--acc) !important;
    color: var(--acc) !important;
  }
  & .btn.ghost:hover {
    background: var(--aws-ghost-bg-h) !important;
    border-color: var(--aws-ghost-txt-h) !important;
    color: var(--aws-ghost-txt-h) !important;
  }
  & .btn.danger { background: var(--card) !important; border-color: var(--bad) !important; color: var(--bad) !important; }
  & .btn.sm { padding: 0 12px !important; min-height: 30px; font-size: 13px !important; }
  & .btn.lg { padding: 0 22px !important; min-height: 40px; }
  & .btn:disabled { background: var(--card2) !important; border-color: var(--line) !important; color: var(--mut) !important; }

  & .app-main .panel > .panel-h {
    background: transparent !important;
    color: var(--txt) !important;
    font: 700 18px/1.3 var(--aws-font) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    border-bottom: 1px solid var(--line) !important;
  }
  & .app-main .panel > .panel-h * { color: inherit !important; }

  /* Console Home: service cards as plain containers */
  & .dash-services-head { margin: 8px 0 12px; }
  & .dash-cat-label {
    font: 700 18px/1.3 var(--aws-font) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--txt) !important;
    padding: 0 !important;
    margin: 20px 0 12px !important;
  }
  & .dash-cat-label::before,
  & .dash-cat-label::after { display: none !important; }
  & .app-main .qa {
    background: var(--card) !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: var(--aws-shadow) !important;
    transform: none !important;
    padding: 16px 20px !important;
  }
  & .app-main .qa::before,
  & .app-main .qa::after { display: none !important; }
  & .app-main .qa .qa-title { color: var(--acc) !important; font: 700 16px/1.3 var(--aws-font) !important; }
  & .app-main .qa:hover .qa-title { text-decoration: underline; }
  & .app-main .qa .qa-desc { color: var(--mut) !important; font-size: 14px !important; }
}

/* Many tool pages render their page title as a bare, inline-coloured heading
   (e.g. a cyan, letter-spaced "CVE SEARCH ENGINE"). Normalise unclassed headings
   in the content area to the AWS heading style - dark, no tracking. The #app-main
   id gives this enough weight to beat pro-theme's inline-colour overrides. Classed
   titles (.pm-title, .pg-h1 ...) and deliberate section headers are left alone, so
   the flagship cyber dashboards keep their own identity. */
html:is([data-style=pro], [data-style=dark]) body.app #app-main :is(h1, h2, h3):not([class]) {
  color: var(--txt) !important;
  -webkit-text-fill-color: var(--txt) !important;
  letter-spacing: normal !important;
  background: none !important;
  font-family: var(--aws-font) !important;
}

/* Inline-styled tool ACTION BUTTONS -> AWS buttons (2026-09-30).
   Older tool pages render primary/secondary/destructive actions as raw
   inline cyber buttons (translucent accent bg + monospace). Upgrade every
   <button> carrying one of those signature inline backgrounds to the AWS
   pill shape, then map families to AWS roles: blue = primary (orange),
   red = danger (outlined), other accents = ghost. Scoped to `button` so
   the badge DIVs/SPANs that share these tints (and clickable divs in
   flagship dashboards) are untouched. Specificity (html + :is + body +
   .app + button + [style*]) beats pro-theme's (0,2,0) color recolour. */
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#00aaff22"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#00aaff15"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#00aaff20"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#00d4ff22"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ff664422"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ff660015"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ff444422"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ff444415"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ff222215"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ff174422"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ff880022"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#aa66ff22"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#aa66ff15"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ffaa0022"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ffaa0015"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#00ff8822"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#00ff8815"] {
  font-family: var(--aws-font) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  padding: 4px 20px !important;
  min-height: 32px !important;
  /* buttons.css ID-boosts `border-radius: var(--btn-radius)!important` (2 IDs),
     which outranks this rule; set the var so its own rule yields the pill. */
  --btn-radius: 20px !important;
  border-radius: 20px !important;
  border-width: 2px !important;
  border-style: solid !important;
  box-shadow: none !important;
  background-image: none !important;
  cursor: pointer !important;
}
/* Primary (blue family) -> AWS orange */
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#00aaff22"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#00aaff15"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#00aaff20"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#00d4ff22"] {
  background: var(--aws-orange) !important;
  border-color: var(--aws-orange) !important;
  color: #0f141a !important;
}
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#00aaff22"]:hover,
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#00aaff15"]:hover,
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#00aaff20"]:hover,
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#00d4ff22"]:hover {
  background: var(--aws-orange-2) !important;
  border-color: var(--aws-orange-2) !important;
  color: #0f141a !important;
}
/* Destructive (red family) -> AWS danger (outlined) */
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ff664422"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ff660015"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ff444422"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ff444415"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ff222215"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ff174422"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ff880022"] {
  background: var(--card) !important;
  border-color: var(--bad) !important;
  color: var(--bad) !important;
}
/* Other accents (purple/amber/green) -> AWS ghost (normal/secondary) */
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#aa66ff22"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#aa66ff15"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ffaa0022"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#ffaa0015"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#00ff8822"],
html:is([data-style=pro], [data-style=dark]) body.app button[style*="background:#00ff8815"] {
  background: var(--card) !important;
  border-color: var(--acc) !important;
  color: var(--acc) !important;
}

/* Inline-styled tool FIELDS -> AWS field font (2026-09-30).
   The app-main field rule above forces bg/border/radius/color but sets
   font-family/font-size WITHOUT !important, so inline `font-family:monospace;
   font-size:11px` wins -> tool inputs render tiny monospace. Normalize:
   text-entry inputs + selects take the AWS system font; textareas keep
   monospace (Cloudscape code/output is mono) but all three get a readable
   14px. Scoped to the monospace inline signature so classed/intentional
   fields elsewhere are untouched. */
html:is([data-style=pro], [data-style=dark]) body.app .app-main input[style*="monospace"],
html:is([data-style=pro], [data-style=dark]) body.app .app-main select[style*="monospace"] {
  font-family: var(--aws-font) !important;
  font-size: 14px !important;
}
html:is([data-style=pro], [data-style=dark]) body.app .app-main textarea[style*="monospace"] {
  font-size: 14px !important;
}

/* ================= Console Home widgets ================= */
body.app .awh-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; }
body.app .awh-head .pg-h1 { margin: 0 0 4px; }
body.app .awh-sub { margin: 0; color: var(--mut); font-size: 14px; }
body.app .awh-actions { display: flex; gap: 8px; flex-wrap: wrap; }
body.app .awh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0 0 32px; align-items: start; }
body.app .awh-span2 { grid-column: span 2; }
html body.app .app-main .awh-w.awh-w { padding: 16px 20px 20px !important; margin: 0 !important; min-width: 0; }
body.app .awh-wh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
body.app .awh-wh h2 { margin: 0; font: 700 18px/1.3 var(--aws-font); color: var(--txt); }
body.app .awh-wh-sub { margin-top: 16px; }
body.app .awh-wh h3 { margin: 0; font: 700 14px/1.3 var(--aws-font); color: var(--txt); }
html body.app .awh-more {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
  color: var(--acc) !important; font: 700 14px var(--aws-font); cursor: pointer; white-space: nowrap;
}
html body.app .awh-more:hover { text-decoration: underline; }
body.app .awh-note { color: var(--mut); font-size: 12px; }
body.app .awh-empty { margin: 4px 0; color: var(--mut); font-size: 14px; }
body.app .awh-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 16px; }
body.app .awh-w:not(.awh-span2) .awh-links { grid-template-columns: 1fr; }
body.app .awh-w .cl-item { align-items: flex-start; }
html body.app .awh-link,
html body.app .awh-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left;
  background: none !important; border: 0 !important; box-shadow: none !important; transform: none !important;
  padding: 6px 0 !important; cursor: pointer; font-family: var(--aws-font); min-height: 0; height: auto;
}
body.app .awh-link-t,
body.app .awh-item b { color: var(--acc); font-size: 14px; font-weight: 700; }
body.app .awh-link-g,
body.app .awh-item span { color: var(--mut); font-size: 12px; font-weight: 400; }
body.app .awh-link:hover .awh-link-t,
body.app .awh-item:hover b { text-decoration: underline; }
body.app .awh-list { display: flex; flex-direction: column; gap: 6px; }
body.app .awh-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin: 0; }
body.app .awh-kv dt { color: var(--mut); font-size: 12px; margin: 0 0 2px; }
body.app .awh-kv dd { margin: 0; color: var(--txt); font: 700 20px/1.2 var(--aws-font); }
body.app .awh-activity { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
body.app .awh-act { display: flex; justify-content: space-between; gap: 8px; }
body.app .awh-w .cl-items { display: flex; flex-direction: column; gap: 8px; }
body.app .awh-w .dg-bars { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 1200px) {
  body.app .awh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  body.app .awh-grid { grid-template-columns: 1fr; }
  body.app .awh-span2 { grid-column: auto; }
}

/* ================= narrow screens ================= */
@media (max-width: 900px) {
  body.app, body.app.aws-side-closed { --aws-side-w: 0px; }
  body.app.aws-side-closed .app-shell::before { display: none; }
  body.app .app-main { grid-column: 1 / -1; padding: 12px 16px 20px; }
  .aws-side {
    position: fixed;
    left: 0;
    top: calc(var(--topbar-h) + var(--con-h2));
    height: calc(100dvh - var(--topbar-h) - var(--con-h2));
    width: min(300px, 86vw);
    box-shadow: 8px 0 24px rgba(0, 7, 22, .3);
    z-index: 70;
  }
  body.app .aws-side-bd:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 69;
    background: rgba(0, 7, 22, .45);
  }
  body.app.aws-side-closed .aws-side-open {
    position: fixed;
    left: 8px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    top: auto;
    z-index: 70;
    width: 44px;
    height: 44px;
    background: var(--aws-hdr) !important;
    color: var(--aws-hdr-txt);
    border-radius: 22px !important;
    box-shadow: 0 4px 12px rgba(0, 7, 22, .35) !important;
  }
  body.app.aws-side-closed .aws-side-open span { left: 15px; top: 21px; }
  html body.app #topbar#topbar .brand-wordmark { display: none !important; }
  html body.app #topbar#topbar .con-services { padding: 0 8px; }
  html body.app #topbar#topbar .con-services { font-size: 0; }
  html body.app #topbar#topbar .con-services .con-caret { display: none; }
  html body.app #topbar#topbar .con-search kbd { display: none; }
  html body.app #topbar#topbar .con-search input { padding-right: 10px; }
  html body.app #topbar#topbar .tb-help-btn span { display: none; }
  body.app .svc-menu { left: 0; width: 100vw; }
}
/* Touch: every control in the chrome is at least 44px tall (WCAG 2.5.5); the header
   bars grow with them so the sticky offsets (which read the variables) stay right. */
@media (pointer: coarse) {
  body.app { --topbar-h: 52px; --con-h1: 52px; --con-h2: 44px; }
  html body.app #topbar#topbar :is(.con-services, .style-toggle, .icon-btn, .tb-help-btn, .profile-btn, .cmdk-btn) { height: 44px !important; min-width: 44px; }
  html body.app #topbar#topbar .con-search input { height: 40px; }
  body.app .con-favbar .con-chip, body.app .con-qbtn, body.app .con-catchip { min-height: 40px; }
  html body .aws-side :is(.aws-sl, .aws-sg-h) { min-height: 44px; }
  html body .aws-side .aws-side-x, html body .aws-side-open { width: 44px; height: 44px; }
  .aws-side-x::before, .aws-side-x::after { left: 15px; top: 21px; }
  .aws-side-open span { left: 15px; top: 21px; }
  body.app .svc-menu :is(.svc-cat, .svc-card .side-item) { min-height: 44px; }
  body.app .svc-menu .svc-star { min-width: 44px; min-height: 44px; }
  body.app .crumbs .crumb { min-height: 32px; }
  html body.app .app-main .ai2-hitem-t { min-height: 44px; }
  html body.app .app-main .ai2-hitem-x { width: 32px; height: 32px; }
}
/* Narrow windows: the side-nav opener sits at the start of the favourites bar instead of
   floating over page content (it used to cover tables and KPI labels bottom-left). */
@media (max-width: 900px) {
  html body.app.aws-side-closed .aws-side-open {
    position: fixed;
    top: calc(var(--topbar-h) + 4px);
    bottom: auto;
    left: 6px;
    z-index: 60;
    width: 36px;
    height: 36px;
    background: transparent !important;
    color: var(--aws-hdr-txt);
    border-radius: 6px !important;
    box-shadow: none !important;
  }
  html body.app.aws-side-closed .aws-side-open span { left: 11px; top: 17px; }
  html body.app.aws-side-closed .con-favbar { padding-left: 46px !important; }
}
@media print {
  .aws-side, .aws-side-open { display: none !important; }
  body.app .app-shell { display: block !important; }
}

/* ============================================================
   Console AI chat — fit under the sticky header, and in the
   empty state center the greeting + composer as one group so
   there is no dead space and no need to scroll to the input.
   ============================================================ */
html body.app .app-main .ai2 { height: calc(100vh - var(--topbar-h) - var(--con-h2) - 96px); min-height: 420px; }
html body.app .app-main .ai2-shell:has(.ai-empty) .ai2 { justify-content: center; }
html body.app .app-main .ai2-shell:has(.ai-empty) .ai2-main { flex: 0 0 auto; overflow: visible; }
html body.app .app-main .ai2-shell:has(.ai-empty) .ai2-welcome { min-height: 0; padding-bottom: 8px; }
/* The chat-history rail is not site navigation — the console already has a left
   nav. So it is not a permanent second sidebar: it slides in as an overlay only
   when the history button in the composer is pressed (shell.hist-open). */
html body.app .app-main .ai2-shell .ai2 { max-width: none; }
html body.app .app-main .ai2-hist {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 6; width: 264px; height: auto;
  background: var(--card) !important; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 7, 22, .28);
  /* hidden for real while closed (not only slid off-screen): visibility flips after the slide */
  visibility: hidden;
  transform: translateX(-112%); transition: transform .18s ease, visibility 0s linear .18s; will-change: transform;
}
html body.app .app-main .ai2-shell.hist-open .ai2-hist { transform: none; visibility: visible; transition: transform .18s ease, visibility 0s; }
/* each saved chat is a button now: keep the row's look, drop the button chrome */
html body.app .app-main .ai2-hitem { padding: 0; }
html body.app .app-main .ai2-hitem-t {
  flex: 1 1 auto; min-width: 0; text-align: left; cursor: pointer;
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 10px !important;
  color: inherit !important; font: inherit; font-size: .82rem; line-height: 1.35; padding: 9px 10px !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: none !important;
}
html body.app .app-main .ai2-hitem-x { margin-right: 6px; }
html body.app .app-main .ai2-hitem-x:focus-visible { opacity: 1; }
html body.app .app-main .ai2-shell.hist-open::before {
  content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(0, 7, 22, .18);
}

/* The "More" / setup menu stacks a bold title over a description. In the console,
   body.app .menu-item forces display:block, which collapsed the two onto one line
   ("Prebuilt local toolkitInstall the full CLI toolkit…"). Restore the column. */
html body.app .menu-item.col { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
html body.app .menu-item.col > strong { display: block; }
html body.app .menu-item.col .menu-sub { display: block; white-space: normal; }

/* ============================================================
   Full-width content pane. The console content fills the pane
   between the side navigation and the window edge the way the
   AWS console does: no centred column, no dead margins. Reading
   measures (paragraph max-widths in ch) are kept on purpose.
   ============================================================ */
html body.app .app-main .mt-shell,
html body.app .app-main .mt-hub,
html body.app .app-main .sec-intro,
html body.app .app-main .lh-tp,
html body.app .app-main .demo-grid,
html body.app .app-main .product-grid,
html body.app .app-main .pricing-grid,
html body.app .app-main .dlapp-grid,
html body.app .app-main .nx-arch,
html body.app .app-main .nx-highlights,
html body.app .app-main .os-boot-preview,
html body.app .app-main .wrap { max-width: none; margin-left: 0; margin-right: 0; }
html body.app .app-main .wrap { padding-left: 0; padding-right: 0; }
html body.app .app-main .mt-hub-search input { max-width: none; }
html body.app .app-main .api-key-section .panel { max-width: none; }
/* grids grow to use the extra width instead of leaving a gutter on the right */
html body.app .app-main .demo-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
html body.app .app-main .product-grid,
html body.app .app-main .pricing-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
html body.app .app-main .dlapp-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
html body.app .app-main .nx-highlights { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
html body.app .app-main .mt-shell,
html body.app .app-main .mt-hub,
html body.app .app-main .sec-intro { padding-left: 0; padding-right: 0; }

/* ============================================================
   AWS Cloudscape checkboxes + radios  (console + landing)
   The native/accent-color boxes rendered oversized (a flex item
   stretched to ~30x22px) and clashed with the AWS look, and the
   admin allow-list toggle overflowed onto its panel border.
   Replace them with a clean 16px custom control. box-sizing +
   !important + flex:0 0 auto beat pro-theme's own checkbox rules
   and the inline width/height:18px on the admin inputs.
   ============================================================ */
body.app input[type="checkbox"]:not([role]),
body.app input[type="radio"]:not([role]),
body.landing input[type="checkbox"]:not([role]),
body.landing input[type="radio"]:not([role]) {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  flex: 0 0 auto !important;
  margin: 0;
  padding: 0 !important;
  display: inline-grid !important;
  place-content: center;
  border: 2px solid #7d8998 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .12s ease, border-color .12s ease;
}
body.app input[type="checkbox"]:not([role]),
body.landing input[type="checkbox"]:not([role]) { border-radius: 2px !important; }
body.app input[type="radio"]:not([role]),
body.landing input[type="radio"]:not([role]) { border-radius: 50% !important; }

body.app :is(input[type="checkbox"], input[type="radio"]):not([role]):hover,
body.landing :is(input[type="checkbox"], input[type="radio"]):not([role]):hover {
  border-color: #0972d3 !important;
}
body.app input[type="checkbox"]:not([role]):checked,
body.landing input[type="checkbox"]:not([role]):checked {
  background: #0972d3 !important;
  border-color: #0972d3 !important;
}
body.app input[type="radio"]:not([role]):checked,
body.landing input[type="radio"]:not([role]):checked {
  background: #ffffff !important;
  border-color: #0972d3 !important;
}
/* checkmark (reset pro-theme's rotated-border glyph on the same ::after) */
body.app input[type="checkbox"]:not([role]):checked::after,
body.landing input[type="checkbox"]:not([role]):checked::after {
  content: "";
  position: static !important;
  inset: auto !important;
  transform: none !important;
  border: 0 !important;
  width: 12px !important; height: 12px !important;
  background: center / 12px 12px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") !important;
}
body.app input[type="radio"]:not([role]):checked::after,
body.landing input[type="radio"]:not([role]):checked::after {
  content: "";
  position: static !important;
  inset: auto !important;
  transform: none !important;
  border: 0 !important;
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: #0972d3 !important;
}
body.app input[type="checkbox"]:not([role]):indeterminate,
body.landing input[type="checkbox"]:not([role]):indeterminate {
  background: #0972d3 !important;
  border-color: #0972d3 !important;
}
body.app input[type="checkbox"]:not([role]):indeterminate::after,
body.landing input[type="checkbox"]:not([role]):indeterminate::after {
  content: "";
  width: 8px; height: 2px; border-radius: 1px; background: #fff;
}
body.app :is(input[type="checkbox"], input[type="radio"]):not([role]):focus-visible,
body.landing :is(input[type="checkbox"], input[type="radio"]):not([role]):focus-visible {
  outline: 2px solid #0972d3 !important;
  outline-offset: 1px;
}
body.app :is(input[type="checkbox"], input[type="radio"]):not([role]):disabled,
body.landing :is(input[type="checkbox"], input[type="radio"]):not([role]):disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ---- Panel body content must never touch the panel border.
   pro-theme forces `[data-style] .set-row{padding:...0 !important}`,
   which beat the inline 18px on the admin allow-list toggle and pushed
   the checkbox onto the panel edge. Restore horizontal breathing room
   on set-rows that sit directly inside a bordered panel card. ---- */
html:is([data-style="pro"], [data-style="dark"]) body.app .panel > .set-row {
  padding-left: 18px !important;
  padding-right: 18px !important;
}