:root {
  --text: #17201b;
  --page: #f4f6f2;
  --sidebar-bg: #10251c;
  --sidebar-text: #f5f8f3;
  --sidebar-active: #294338;
  --panel: #fff;
  --panel-border: #d8dfd8;
  --subtle-border: #e3e8e3;
  --muted: #66736c;
  --muted-strong: #536158;
  --label: #35423a;
  --input-bg: #fff;
  --button-bg: #fff;
  --primary: #196b4a;
  --primary-text: #fff;
  --code-bg: #eef2ed;
  --code-border: #dce4dd;
  --selected-bg: #ecf4ef;
  --selected-border: #9ecbb2;
  --details-bg: #f8faf7;
  --accordion-bg: #f9fbf8;
  --accordion-summary-bg: #f1f6f2;
  --accordion-open-bg: #eaf4ee;
  --accordion-border: #cbd9cf;
  --accordion-accent: #196b4a;
  --inner-panel-bg: #f4f7f3;
  --inner-panel-border: #d5e0d7;
  --status-bg: #f7f9f6;
  --success-bg: #edf8ef;
  --success-border: #b8dfc1;
  --success-text: #205a32;
  --warn-bg: #fff8e8;
  --warn-border: #efd08a;
  --warn-text: #6f5417;
  --danger-bg: #fff1ee;
  --danger-border: #efb8ae;
  --danger-text: #9b2c1f;
  --icon-muted: #718077;
  color: var(--text);
  background: var(--page);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  --text: #e6eee9;
  --page: #0f1412;
  --sidebar-bg: #07100d;
  --sidebar-text: #edf6f0;
  --sidebar-active: #173a2b;
  --panel: #171d1a;
  --panel-border: #2b3931;
  --subtle-border: #25322b;
  --muted: #95a69d;
  --muted-strong: #a7b7ae;
  --label: #c7d4cd;
  --input-bg: #101612;
  --button-bg: #1c2520;
  --primary: #35a06d;
  --primary-text: #07100d;
  --code-bg: #101815;
  --code-border: #304239;
  --selected-bg: #153427;
  --selected-border: #3d8f64;
  --details-bg: #121915;
  --accordion-bg: #111814;
  --accordion-summary-bg: #142019;
  --accordion-open-bg: #17281f;
  --accordion-border: #31483c;
  --accordion-accent: #35a06d;
  --inner-panel-bg: #101a15;
  --inner-panel-border: #2f4338;
  --status-bg: #121915;
  --success-bg: #10291c;
  --success-border: #2f8d55;
  --success-text: #95e2b3;
  --warn-bg: #2a220f;
  --warn-border: #a67925;
  --warn-text: #f0ca75;
  --danger-bg: #2a1514;
  --danger-border: #a65248;
  --danger-text: #ffb4aa;
  --icon-muted: #87978f;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input, select, textarea { font: inherit; }

.appShell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px 1fr;
}

.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: 22px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 760;
  font-size: 20px;
  margin-bottom: 26px;
}

.logoBrand {
  width: fit-content;
  max-width: 100%;
}

.sidebar .logoBrand {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(122deg, rgba(255, 255, 255, 0.94) 0%, rgba(250, 253, 255, 0.98) 24%, rgba(230, 237, 244, 0.96) 42%, rgba(255, 255, 255, 0.96) 58%, rgba(181, 194, 207, 0.98) 79%, rgba(111, 128, 143, 0.96) 100%),
    linear-gradient(180deg, #ffffff 0%, #c9d3dc 100%);
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(48, 61, 75, 0.2),
    0 8px 22px rgba(0, 0, 0, 0.18);
}

.sidebar .logoBrand::before {
  content: "";
  position: absolute;
  inset: -24px -42px;
  background: linear-gradient(118deg, transparent 22%, rgba(255, 255, 255, 0.72) 40%, rgba(255, 255, 255, 0.34) 58%, transparent 76%);
  transform: translateX(-8px) rotate(9deg);
  pointer-events: none;
}

.brandLogo {
  position: relative;
  z-index: 1;
  display: block;
  width: 164px;
  max-width: 100%;
  height: auto;
}

.brand.dark {
  color: var(--text);
  margin-bottom: 20px;
}

.authLogoBrand .brandLogo {
  width: 190px;
}

.logoOptionsPage {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(22, 31, 27, 0.92), rgba(8, 14, 11, 0.98)),
    var(--page);
  padding: 34px;
  color: var(--text);
}

.logoOptionsHeader {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  max-width: 1380px;
  margin: 0 auto 24px;
}

.logoOptionsHeader h1 {
  margin: 0;
  font-size: 36px;
  line-height: 1.05;
}

.logoOptionsHeader p {
  margin: 0;
}

.logoOptionsHeader .eyebrow {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 8px !important;
}

.logoOptionsGrid {
  max-width: 1380px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.logoOptionCard {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--panel);
  padding: 16px;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.logoOptionMeta {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.logoOptionNumber {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--selected-border);
  background: var(--selected-bg);
  color: var(--text);
  font-weight: 850;
  font-size: 18px;
}

.logoOptionCard h2 {
  margin: 0 0 5px;
  font-size: 18px;
}

.logoOptionCard p {
  margin: 0;
  color: var(--muted);
  line-height: 1.35;
}

.logoPreviewRail {
  display: grid;
  place-items: center;
  min-height: 116px;
  border: 1px solid var(--subtle-border);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.16));
  background-size: 18px 18px, auto;
  padding: 20px;
}

.metalPreview {
  --metal-bg: linear-gradient(122deg, #ffffff 0%, #eef4f8 35%, #c3ced8 70%, #6e7f8d 100%);
  --metal-sheen: linear-gradient(118deg, transparent 23%, rgba(255, 255, 255, 0.78) 42%, rgba(255, 255, 255, 0.2) 59%, transparent 78%);
  --metal-transform: translateX(-8px) rotate(9deg);
  position: relative;
  width: 204px;
  min-height: 74px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  padding: 10px 13px;
  background: var(--metal-bg);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(40, 52, 62, 0.22),
    0 12px 26px rgba(0, 0, 0, 0.28);
}

.metalPreview::before,
.metalPreview::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.metalPreview::before {
  inset: 1px;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 32%, rgba(0, 0, 0, 0.1) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.13) 0 1px, rgba(0, 0, 0, 0.03) 1px 3px);
  opacity: var(--metal-texture-opacity, 0.72);
}

.metalPreview::after {
  inset: -26px -44px;
  background: var(--metal-sheen);
  transform: var(--metal-transform);
  opacity: var(--metal-sheen-opacity, 1);
}

.metalPreview img {
  position: relative;
  z-index: 1;
  display: block;
  width: 174px;
  max-width: 100%;
  height: auto;
}

.metalOption1 {
  --metal-bg:
    linear-gradient(122deg, rgba(255, 255, 255, 0.96) 0%, rgba(250, 253, 255, 0.98) 24%, rgba(230, 237, 244, 0.96) 42%, rgba(255, 255, 255, 0.96) 58%, rgba(181, 194, 207, 0.98) 79%, rgba(111, 128, 143, 0.96) 100%),
    linear-gradient(180deg, #ffffff 0%, #c9d3dc 100%);
  --metal-transform: translateX(-8px) rotate(9deg);
}

.metalOption2 {
  --metal-bg:
    linear-gradient(132deg, #ffffff 0%, #f9fcff 31%, #eef4f9 50%, #d1dce6 72%, #758796 100%);
  --metal-sheen: linear-gradient(128deg, transparent 17%, rgba(255, 255, 255, 0.88) 36%, rgba(255, 255, 255, 0.42) 56%, transparent 74%);
  --metal-transform: translateX(6px) rotate(16deg);
}

.metalOption3 {
  --metal-bg:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.18) 0 1px, rgba(55, 73, 84, 0.08) 1px 3px),
    linear-gradient(90deg, #f8fafb 0%, #cfd8df 22%, #fbfcfd 45%, #aab7c1 72%, #f0f4f6 100%);
  --metal-sheen: linear-gradient(112deg, transparent 28%, rgba(255, 255, 255, 0.52) 47%, transparent 68%);
  --metal-sheen-opacity: 0.75;
}

.metalOption4 {
  --metal-bg:
    linear-gradient(126deg, #eff4f8 0%, #9daab4 32%, #485865 59%, #1d2930 100%);
  --metal-sheen: linear-gradient(122deg, transparent 20%, rgba(255, 255, 255, 0.52) 42%, rgba(255, 255, 255, 0.15) 58%, transparent 73%);
  --metal-texture-opacity: 0.48;
  border-color: rgba(180, 196, 208, 0.54);
}

.metalOption5 {
  --metal-bg:
    linear-gradient(118deg, #ffffff 0%, #f6f8f8 28%, #e7edef 54%, #d0d9dd 100%);
  --metal-sheen: linear-gradient(130deg, transparent 24%, rgba(255, 255, 255, 0.78) 45%, rgba(255, 255, 255, 0.2) 60%, transparent 80%);
  --metal-sheen-opacity: 0.66;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(67, 80, 88, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.18);
}

.metalOption6 {
  --metal-bg:
    linear-gradient(124deg, #ffffff 0%, #e8f4ff 27%, #bcd1df 56%, #6e8495 100%);
  --metal-sheen: linear-gradient(116deg, transparent 19%, rgba(255, 255, 255, 0.75) 38%, rgba(214, 239, 255, 0.28) 58%, transparent 76%);
  --metal-transform: translateX(-2px) rotate(12deg);
}

.metalOption7 {
  --metal-bg:
    linear-gradient(118deg, #ffffff 0%, #9eaab3 18%, #ffffff 36%, #c6d0d8 52%, #687b89 72%, #f4f7fa 100%);
  --metal-sheen: linear-gradient(126deg, transparent 18%, rgba(255, 255, 255, 0.9) 33%, rgba(255, 255, 255, 0.22) 46%, transparent 62%);
  --metal-transform: translateX(10px) rotate(13deg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 0 rgba(30, 43, 52, 0.24),
    inset 1px 0 0 rgba(255, 255, 255, 0.45),
    0 14px 30px rgba(0, 0, 0, 0.3);
}

.metalOption8 {
  --metal-bg:
    linear-gradient(122deg, #c5d0d8 0%, #667680 28%, #26323a 64%, #11191e 100%);
  --metal-sheen: linear-gradient(124deg, transparent 23%, rgba(255, 255, 255, 0.42) 43%, rgba(255, 255, 255, 0.12) 58%, transparent 78%);
  --metal-sheen-opacity: 0.72;
  --metal-texture-opacity: 0.38;
  border-color: rgba(138, 156, 168, 0.48);
}

.metalOption9 {
  --metal-bg:
    linear-gradient(126deg, #ffffff 0%, #fbfdfe 34%, #e2eaf0 62%, #8394a2 100%);
  --metal-sheen: linear-gradient(127deg, transparent 35%, rgba(255, 255, 255, 0.92) 45%, rgba(255, 255, 255, 0.3) 52%, transparent 62%);
  --metal-transform: translateX(16px) rotate(15deg);
}

.metalOption10 {
  --metal-bg:
    linear-gradient(120deg, #ffffff 0%, #ffffff 44%, #e9eff3 72%, #a9b8c3 100%);
  --metal-sheen: linear-gradient(132deg, transparent 25%, rgba(255, 255, 255, 0.82) 43%, transparent 61%);
  --metal-sheen-opacity: 0.58;
  border-color: rgba(220, 228, 234, 0.86);
}

.metalOption11 {
  --metal-bg:
    radial-gradient(circle at 36% 42%, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 252, 0.92) 28%, transparent 58%),
    linear-gradient(124deg, #dde6ec 0%, #f9fbfc 35%, #bcc8d0 69%, #536775 100%);
  --metal-sheen: linear-gradient(118deg, transparent 20%, rgba(255, 255, 255, 0.72) 42%, rgba(255, 255, 255, 0.18) 57%, transparent 75%);
  --metal-transform: translateX(0) rotate(14deg);
}

.metalOption12 {
  --metal-bg:
    linear-gradient(123deg, #ffffff 0%, #f1f5f7 38%, #dce5ea 71%, #9aaab6 100%);
  --metal-sheen: linear-gradient(126deg, transparent 29%, rgba(255, 255, 255, 0.5) 45%, transparent 66%);
  --metal-sheen-opacity: 0.56;
  --metal-texture-opacity: 0.42;
}

.authShell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--page);
}

.authPanel {
  width: min(440px, 100%);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 22px;
}

nav { display: grid; gap: 6px; }
nav button, .rowButton {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 6px;
  padding: 10px 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

nav button.active, nav button:hover { background: var(--sidebar-active); }
.workspace { padding: 24px; overflow: auto; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.topbarActions {
  display: flex;
  align-items: end;
  gap: 10px;
}
.workspaceSelect {
  width: min(280px, 32vw);
  margin-bottom: 0;
}
.trackerStatusSelect {
  width: min(220px, 24vw);
}
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 28px; margin-bottom: 4px; }
h2 { font-size: 18px; }
.topbar p, .muted { color: var(--muted); }
.titleLine {
  display: flex;
  align-items: center;
  gap: 8px;
}
.titleLine h1 { margin-bottom: 4px; }
.sectionTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.sectionTitleText {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.sectionTitle h2,
.sectionTitle h3,
.sectionTitle h4 { margin: 0; }
.sectionActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.helpWrap {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.helpIcon {
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  justify-content: center;
  border-color: var(--subtle-border);
  color: var(--icon-muted);
  background: transparent;
}
.helpIcon:hover,
.helpIcon:focus-visible {
  color: var(--primary);
  border-color: var(--selected-border);
}
.helpBubble {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

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

.span2 { grid-column: span 2; }
.span4 { grid-column: span 4; }
.split { display: grid; grid-template-columns: 420px 1fr; gap: 16px; align-items: start; }
.entityPage {
  display: grid;
  gap: 16px;
}
.panel, .metric {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 16px;
}
.metric span { display: block; color: var(--muted); font-size: 13px; }
.metric strong { display: block; font-size: 32px; margin-top: 8px; }
.launchPanel { display: grid; gap: 12px; }
.launchHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.launchHeader h2 { margin-bottom: 0; }
.launchHeader span { color: var(--muted); font-size: 13px; }
.launchHeader .sectionTitle,
.sectionHeader .sectionTitle,
.insightHeader .sectionTitle {
  margin-bottom: 0;
}
.sectionHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sectionHeader h3 { margin-bottom: 0; font-size: 15px; }
.destinationEditor {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}
.destinationRow {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) 94px 104px minmax(180px, 2fr) 42px;
  gap: 8px;
  align-items: end;
  border-top: 1px solid var(--subtle-border);
  padding-top: 10px;
}
.destinationRow label { margin-bottom: 0; }
.destinationRow button {
  width: 42px;
  height: 39px;
  justify-content: center;
}
.checklist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}
.checkItem {
  min-height: 78px;
  display: grid;
  grid-template-columns: 20px 1fr 16px;
  align-items: center;
  gap: 10px;
  text-align: left;
  border-color: var(--panel-border);
}
.checkItem.done { background: var(--success-bg); border-color: var(--success-border); }
.checkItem.warning { background: var(--warn-bg); border-color: var(--warn-border); }
.checkItem svg:first-child { color: var(--icon-muted); }
.checkItem.done svg:first-child { color: var(--primary); }
.checkItem.warning svg:first-child { color: var(--warn-text); }
.checkItem span { min-width: 0; }
.checkItem strong, .checkItem small { display: block; overflow-wrap: anywhere; }
.checkItem strong { font-size: 14px; }
.checkItem small { margin-top: 3px; color: var(--muted); }
.narrow { max-width: 560px; }
.wide { max-width: 100%; }
.reportsPage { display: grid; gap: 14px; }
.filterGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
}
.filterGrid label { margin-bottom: 0; }
.compactFilters { grid-template-columns: minmax(220px, 1fr) 160px; max-width: 620px; }
.compactAuditFilters { grid-template-columns: minmax(160px, 220px) minmax(220px, 1fr) minmax(220px, 1fr) 140px; }
.capacityGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 12px;
  align-items: end;
}
.capacityGrid label { margin-bottom: 0; }
.checkboxLabel {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 39px;
}
.checkboxLabel input {
  width: auto;
  margin: 0;
}
.plannerResult { margin-top: 14px; display: grid; gap: 12px; }
.plannerMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  border-top: 1px solid var(--subtle-border);
  border-bottom: 1px solid var(--subtle-border);
  padding: 12px 0;
}
.plannerMetric span { display: block; color: var(--muted); font-size: 12px; }
.plannerMetric strong { display: block; margin-top: 4px; font-size: 20px; }
.trackerInsights {
  border-top: 1px solid var(--panel-border);
  margin-top: 18px;
  padding-top: 16px;
  display: grid;
  gap: 14px;
}
.insightMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  border-top: 1px solid var(--subtle-border);
  border-bottom: 1px solid var(--subtle-border);
  padding: 12px 0;
}
.insightGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.insightHeader {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 240px);
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.insightHeader h3 { margin-bottom: 0; }
.readinessPanel.pass { border-color: var(--success-border); }
.readinessPanel.warn { border-color: var(--warn-border); }
.readinessPanel.fail { border-color: var(--danger-border); }
.launchGatePanel.pass { border-color: var(--success-border); }
.launchGatePanel.warn { border-color: var(--warn-border); }
.launchGatePanel.fail { border-color: var(--danger-border); }
.launchGateControls {
  grid-template-columns: minmax(180px, 240px) 140px auto;
  max-width: 560px;
  margin-bottom: 12px;
}
.launchGateControls label { margin-bottom: 0; }
.launchGateMetrics { margin: 6px 0 12px; }
.gateIssueBlock {
  margin-top: 12px;
  border-top: 1px solid var(--subtle-border);
  padding-top: 10px;
}
.gateIssueBlock h3 {
  font-size: 14px;
  margin-bottom: 8px;
}
.gateIssueBlock.fail h3 { color: var(--danger-text); }
.gateIssueBlock.warn h3 { color: var(--warn-text); }
.rollupPanel.pass { border-color: var(--success-border); }
.rollupPanel.warn { border-color: var(--warn-border); }
.rollupPanel.fail { border-color: var(--danger-border); }
.verificationBlock {
  border-top: 1px solid var(--panel-border);
  margin-top: 16px;
  padding-top: 14px;
}
.verificationBlock.pass { border-top-color: var(--success-border); }
.verificationBlock.warn { border-top-color: var(--warn-border); }
.verificationBlock.fail { border-top-color: var(--danger-border); }
.readinessCounts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}

label { display: grid; gap: 6px; margin-bottom: 12px; color: var(--label); font-size: 14px; }
.labelText {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.checkboxLine { display: flex; align-items: center; gap: 8px; }
.checkboxLine input { width: auto; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 9px 10px;
  background: var(--input-bg);
  color: var(--text);
}
input, select { min-height: 40px; }
.secretInput {
  -webkit-text-security: disc;
}
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  line-height: 1.35;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2390a39a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px 16px;
}
select::-ms-expand { display: none; }
textarea { resize: vertical; }

button {
  border: 1px solid var(--panel-border);
  background: var(--button-bg);
  color: var(--text);
  border-radius: 6px;
  padding: 9px 11px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  cursor: pointer;
  min-height: 40px;
}
.primary { background: var(--primary); color: var(--primary-text); border-color: var(--primary); }
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.fullWidth { width: 100%; justify-content: center; }
.iconButton { width: 40px; height: 40px; justify-content: center; }
.error { background: var(--danger-bg); color: var(--danger-text); border: 1px solid var(--danger-border); padding: 12px; border-radius: 8px; margin-bottom: 14px; }
.warningList {
  margin-top: 10px;
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  border-radius: 6px;
  padding: 10px;
  color: var(--warn-text);
}
.warningList p { margin: 0 0 6px; }
.warningList p:last-child { margin-bottom: 0; }
.buttonRow { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.backButton { margin-bottom: 12px; }
.debugStatus {
  border: 1px solid var(--panel-border);
  background: var(--status-bg);
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 12px;
  color: var(--muted-strong);
}
.debugStatus.ok {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success-text);
}
.debugStatus.warn {
  border-color: var(--warn-border);
  background: var(--warn-bg);
  color: var(--warn-text);
}
.validation { border-radius: 6px; padding: 10px; margin: 10px 0; }
.validation.ok { background: var(--success-bg); border: 1px solid var(--success-border); }
.validation.warn { background: var(--warn-bg); border: 1px solid var(--warn-border); }
.validation.bad { background: var(--danger-bg); border: 1px solid var(--danger-border); }
.riskChips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.riskChips span { color: var(--muted); font-size: 12px; }
.macroParamHeader,
.macroParamRow {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(220px, 1.3fr) 40px;
  gap: 8px;
  align-items: center;
}
.macroParamHeader {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.macroParamRow button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  justify-content: center;
}
.paramRulesEditor {
  display: grid;
  gap: 8px;
  border: 1px solid var(--inner-panel-border);
  border-radius: 8px;
  background: var(--inner-panel-bg);
  padding: 12px;
  overflow-x: auto;
  max-width: 100%;
}
.paramRuleHeader,
.paramRuleRow {
  display: grid;
  grid-template-columns: 32px minmax(130px, 1fr) 136px minmax(220px, 1.4fr) 92px 80px 82px minmax(130px, 0.9fr) 40px;
  gap: 8px;
  align-items: center;
  min-width: 1040px;
}
.paramRuleHeader {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.paramRuleRow.locked {
  opacity: 0.82;
}
.paramKeyCell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}
.paramRuleRow button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  justify-content: center;
}
.dragHandle {
  cursor: grab;
  color: var(--muted);
}
.dragHandle:active {
  cursor: grabbing;
}
.dragHandle:disabled {
  cursor: not-allowed;
}
.paramRuleRow.dragging,
.sourceMacroRow.dragging,
.compactEntityTable tr.dragging td {
  opacity: 0.55;
  background: var(--selected-bg);
}
.tableCheckbox {
  display: grid;
  place-items: center;
  margin: 0;
}
.tableCheckbox input,
.tableSelectCheckbox {
  width: 18px;
  height: 18px;
  min-height: 18px;
  padding: 0;
  margin: 0;
  accent-color: var(--primary);
}
.sourceMacroHeader,
.sourceMacroRow {
  grid-template-columns: 40px minmax(120px, 0.8fr) minmax(150px, 1fr) 140px minmax(160px, 1.2fr) 40px;
}
.trackerTypeToggles {
  border: 1px solid var(--inner-panel-border);
  border-radius: 8px;
  background: var(--inner-panel-bg);
  padding: 10px 12px;
}
.inlineField {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.inlineField button {
  justify-content: center;
  padding: 0 14px;
}
.macroGroupField {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.macroGroupField button {
  white-space: nowrap;
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.hintDetails {
  border: 1px solid var(--inner-panel-border);
  border-radius: 8px;
  background: var(--inner-panel-bg);
  padding: 10px 12px;
}
.hintDetails summary {
  cursor: pointer;
  font-weight: 700;
}
.hintDetails p:last-child {
  margin-bottom: 0;
}
code {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 4px;
  padding: 2px 5px;
  overflow-wrap: anywhere;
}
.list { display: grid; gap: 8px; margin-bottom: 16px; }
.rowButton { width: 100%; justify-content: space-between; border: 1px solid var(--panel-border); color: var(--text); }
.rowButton.selected { background: var(--selected-bg); border-color: var(--selected-border); }
.detail { border-top: 1px solid var(--panel-border); padding-top: 16px; }
.compactTableWrap {
  overflow: auto;
}
.compactEntityTable th,
.compactEntityTable td {
  white-space: nowrap;
  max-width: 420px;
}
.compactEntityTable th:first-child,
.compactEntityTable td:first-child {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  text-align: center;
}
.compactEntityTable td:first-child,
.compactEntityTable td:nth-child(3) {
  white-space: normal;
}
.compactEntityTable .selectedRow td {
  background: var(--selected-bg);
}
.macroTable th:first-child,
.macroTable td:first-child {
  width: 62px;
  min-width: 62px;
  max-width: 62px;
  text-align: center;
  vertical-align: middle;
}
.macroTable .dragHandle {
  width: 38px;
  height: 38px;
  min-height: 38px;
  margin: 0 auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rowActions {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}
.rowActions button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  justify-content: center;
  margin-left: 6px;
}
.rowActions .dangerIconButton {
  color: var(--danger-text);
  border-color: var(--danger-border);
}
.rowActions .dangerIconButton:hover {
  background: var(--danger-bg);
}
.emptyState { margin: 12px 0 0; }
.readOnlyLabel {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}
.formStack { display: grid; gap: 12px; }
.formStack label { margin-bottom: 0; }
.formGrid {
  display: grid;
  gap: 12px;
}
.formGrid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.toggleRow {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.modalBackdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.48);
}
.modalPanel {
  width: min(720px, 100%);
  max-height: min(86vh, 920px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.28);
  padding: 16px;
}
.modalPanel.wide { width: min(1180px, calc(100vw - 48px)); }
.modalHeader {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.modalHeader .sectionTitle { margin-bottom: 0; }
.modalActions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  border-top: 1px solid var(--subtle-border);
  padding-top: 14px;
  margin-top: 14px;
}
.toastHost {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  display: grid;
  gap: 8px;
  width: min(320px, calc(100vw - 36px));
}
.toast {
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
  padding: 10px 12px;
  font-size: 13px;
}
.toast.ok {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success-text);
}
.toast.bad {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger-text);
}
.buttonRow.flat { margin-bottom: 0; }
.userRow {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 120px auto auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 10px;
}
.apiSecret {
  margin-top: 14px;
  border: 1px solid var(--warn-border);
  background: var(--warn-bg);
  border-radius: 6px;
  padding: 10px;
  display: grid;
  gap: 8px;
}
.inviteBox {
  border-top: 1px solid var(--panel-border);
  margin-top: 16px;
  padding-top: 14px;
}
.apiKeyRow {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(130px, 0.8fr) 110px 120px minmax(150px, 0.9fr);
  gap: 8px;
  align-items: end;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 10px;
}
.apiKeyRow label { margin-bottom: 0; }
.apiKeySummary {
  display: grid;
  gap: 4px;
  align-self: center;
  min-width: 0;
}
.apiKeySummary strong,
.apiKeySummary small {
  overflow-wrap: anywhere;
}
.apiKeyNotes { grid-column: span 2; }
.urls { display: grid; gap: 14px; }
.packageMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--muted-strong);
  font-size: 13px;
}
.packageGroup {
  border: 1px solid var(--accordion-border);
  border-radius: 8px;
  display: block;
  overflow: hidden;
  background: var(--accordion-bg);
}
.packageGroupSummary {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  cursor: pointer;
  list-style: none;
  background: var(--accordion-summary-bg);
  transition: background-color 0.16s ease, border-color 0.16s ease;
}
.packageGroupSummary::-webkit-details-marker { display: none; }
.packageGroupSummary:hover {
  background: var(--accordion-open-bg);
}
.packageGroup[open] {
  border-color: var(--selected-border);
  box-shadow: inset 3px 0 0 var(--accordion-accent);
}
.packageGroup[open] .packageGroupSummary {
  background: var(--accordion-open-bg);
  border-bottom: 1px solid var(--accordion-border);
}
.packageChevron {
  margin-top: 2px;
  color: var(--muted);
  transition: transform 0.16s ease;
}
.packageGroup[open] .packageChevron {
  transform: rotate(90deg);
}
.packageGroupSummary h4 {
  margin: 0;
  font-size: 16px;
}
.packageTitleRow,
.packageSubsectionTitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.packageGroupSummary p,
.packageHint {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}
.packageGroupBody {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: color-mix(in srgb, var(--accordion-bg), var(--panel) 24%);
}
.packageActionsRow {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
.packageSubsection {
  border: 1px solid var(--inner-panel-border);
  border-radius: 6px;
  padding: 12px;
  display: grid;
  gap: 10px;
  background: var(--inner-panel-bg);
}
.packageSubsectionHeader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}
.packageSubsectionHeader h5 {
  margin: 0;
  font-size: 14px;
}
.packageSubsectionHeader p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}
.packageSubsection summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--muted-strong);
}
.packageTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px;
  border: 1px solid var(--subtle-border);
  border-radius: 8px;
  background: var(--input-bg);
}
.packageTabs button {
  flex: 1 1 180px;
  justify-content: center;
  border-color: transparent;
  background: transparent;
}
.packageTabs button.active {
  background: var(--selected-bg);
  border-color: var(--selected-border);
  color: var(--text);
}
.accountEventExamples span {
  border: 1px solid var(--subtle-border);
  border-radius: 999px;
  color: var(--muted-strong);
  padding: 6px 10px;
}
.accountEventExamples span.configured {
  background: var(--selected-bg);
  border-color: var(--selected-border);
  color: var(--text);
}
.eventCodeControls {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}
.eventCodeMeta {
  min-height: 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.eventCodeMeta span {
  border: 1px solid var(--subtle-border);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--muted-strong);
  font-size: 12px;
}
.copyLine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: end;
}
.copyLineValue {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.copyLabel {
  color: var(--muted);
  font-size: 12px;
  text-transform: capitalize;
}
.copyLine code {
  min-height: 40px;
  display: flex;
  align-items: center;
  overflow: auto;
  white-space: nowrap;
}
.urlLine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: end;
}
.urlLine code {
  min-height: 40px;
  display: flex;
  align-items: center;
  overflow: auto;
  white-space: nowrap;
}
.urlLine button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  justify-content: center;
  padding: 0;
}
.copyIconButton {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  justify-content: center;
  flex: 0 0 40px;
}
.sectionActions button,
.packageSubsectionHeader button {
  white-space: nowrap;
}
.compactDetails,
.diagnosticDetails {
  border: 1px solid var(--inner-panel-border);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--inner-panel-bg);
}
.compactDetails summary,
.diagnosticDetails summary {
  cursor: pointer;
  color: var(--muted-strong);
  font-weight: 700;
  margin-bottom: 8px;
}
.formStack > details {
  border: 1px solid var(--inner-panel-border);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--inner-panel-bg);
}
.formStack > details summary {
  cursor: pointer;
  color: var(--muted-strong);
  font-weight: 700;
}
.diagnosticDetails.warn summary { color: var(--warn-text); }
.diagnosticDetails.fail summary { color: var(--danger-text); }
.snippetBlock {
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 10px;
  display: grid;
  gap: 8px;
}
.snippetBlock h4 { margin: 0; font-size: 14px; }
.snippetBlock .launchHeader { align-items: center; }
.snippetBlock button { width: 40px; height: 40px; justify-content: center; padding: 0; }
.snippetBlock pre {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.snippetBlock code {
  display: block;
  padding: 8px;
}
.deadLetterList { display: grid; gap: 8px; }
.deadLetterRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  padding: 10px;
}
.deadLetterRow strong { overflow-wrap: anywhere; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { border-bottom: 1px solid var(--subtle-border); padding: 9px 8px; text-align: left; vertical-align: top; max-width: 300px; overflow-wrap: anywhere; }
th { color: var(--muted-strong); font-weight: 680; }
.recentTable th:first-child,
.recentTable td:first-child,
.auditTable th:first-child,
.auditTable td:first-child {
  width: 38px;
  max-width: 38px;
}
.expandButton {
  width: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
}
.monoCell {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}
.detailsRow td {
  background: var(--details-bg);
  padding: 14px;
}
.detailsGrid {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 14px;
}
.detailsGrid h3 {
  margin-bottom: 8px;
}
.detailsGrid pre {
  margin: 0;
  max-height: 420px;
  overflow: auto;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  background: var(--panel);
  padding: 10px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
}

@media (max-width: 900px) {
  .appShell { grid-template-columns: 1fr; }
  .logoOptionsPage { padding: 20px; }
  .logoOptionsHeader { align-items: start; flex-direction: column; }
  .logoOptionsGrid { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  nav { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  nav button span { display: none; }
  .topbar, .topbarActions { align-items: stretch; flex-direction: column; }
  .workspaceSelect { width: 100%; }
  .grid, .split, .filterGrid, .compactFilters, .compactAuditFilters, .launchGateControls, .capacityGrid, .plannerMetrics, .insightMetrics, .insightGrid, .insightHeader, .readinessCounts, .checklist, .macroParamHeader, .macroParamRow, .paramRuleHeader, .paramRuleRow, .deadLetterRow, .detailsGrid, .destinationRow, .formGrid.two, .packageSubsectionHeader, .eventCodeControls { grid-template-columns: 1fr; }
  .paramRuleHeader, .paramRuleRow { min-width: 0; }
  .userRow, .apiKeyRow { grid-template-columns: 1fr; }
  .apiKeyNotes { grid-column: auto; }
  .span2, .span4 { grid-column: auto; }
  .modalBackdrop { align-items: stretch; padding: 12px; }
  .modalPanel { max-height: none; }
  .sectionTitle { align-items: stretch; flex-direction: column; }
  .sectionActions { justify-content: flex-start; }
}