:root {
  --sidebar: 252px;
  --bg: #17181c;
  --panel: #23252b;
  --line: #393c45;
  --muted: #b0b5c2;
  --yellow: #f8d84c;
}
body,
.workspace {
  background: #17181c;
}
.sidebar {
  background: #1d1f25;
  border-right: 1px solid #34363f;
}
.topbar {
  background: #1d1f25;
  border-color: #34363f;
}
.server-picker {
  background: #282b33;
  border-color: #41454f;
}
.sidebar-section-label {
  color: #858b9a;
}
.nav-group-title.selected-group {
  background: #f8d84c14;
  color: #f8d84c;
}
.nav-item:hover {
  background: #2c2f38;
}
.nav-item.active {
  background: #f8d84c15;
  color: #f8d84c;
}
.nav-submenu {
  border-color: #434752;
}
.panel,
.reference-stats .stat-card,
.reference-stats .stat-card:first-child,
.reference-stats .stat-card:last-child,
.feature-card-stack {
  background: #23252b;
  border-color: #393c45;
}
.feature-card-stack > .individual-feature,
.metrics-grid > div {
  background: #2e313a;
  border-color: #444853;
}
.select-trigger,
.field input[type="text"],
.field textarea,
.notice-preview {
  background: #1d2027;
  border-color: #484d5a;
}
.select-popup {
  background: #242730;
  border-color: #596071;
}
.select-option:hover,
.select-option:focus-visible {
  background: #383c48;
}
.ghost-button {
  background: #30343e;
  border-color: #4b515e;
}
.primary-button {
  background: #f8d84c;
  border-color: #f8d84c;
  color: #29230e;
}
.setup-banner,
.banana-extra,
.hero {
  background: #23252b;
  border-color: #444333;
}
.configuration-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px;
  background: #23252b;
  border: 1px solid #393c45;
  border-radius: 12px;
  margin-bottom: 20px;
}
.setup-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 220px;
  max-width: 420px;
}
.setup-selector > span {
  font-size: 12px;
  color: #b0b5c2;
}
.setup-selector .themed-select {
  flex: 1;
}
.configuration-toolbar .badge {
  margin-left: auto;
}
.setup-manager-intro,
.setup-workspace-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 25px 28px;
  background: #23252b;
  border: 1px solid #4e4934;
  border-radius: 12px;
  margin-bottom: 24px;
}
.setup-manager-intro h2,
.setup-workspace-link h2 {
  font-size: 20px;
  color: #f2f3f5;
  margin: 0 0 10px;
}
.setup-manager-intro p,
.setup-workspace-link p {
  font-size: 14px;
  line-height: 1.65;
  color: #b0b5c2;
  max-width: 650px;
  margin: 0;
}
.setup-workspace-link .badge {
  margin-bottom: 12px;
  display: inline-block;
}
.setup-manager-intro button,
.setup-workspace-link button {
  flex-shrink: 0;
}
.configuration-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}
.configuration-card {
  padding: 24px;
  border: 1px solid #41454f;
  border-radius: 12px;
  background: #23252b;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.configuration-card:hover {
  border-color: #778092;
  transform: translateY(-2px);
}
.configuration-card.active-configuration {
  border-color: #ad963a;
  background: linear-gradient(135deg, #f8d84c09, #23252b 70%);
}
.configuration-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
}
.configuration-card svg {
  width: 26px;
  height: 26px;
  color: #aab4c9;
}
.active-configuration svg {
  color: #f8d84c;
}
.configuration-card h2 {
  font-size: 20px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  margin: 0 0 8px;
}
.configuration-card p {
  font-size: 13px;
  color: #b0b5c2;
  margin: 0 0 20px;
}
.configuration-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  font-size: 11px;
  color: #c9d0de;
}
.configuration-meta span {
  padding: 6px 9px;
  background: #343842;
  border-radius: 5px;
}
.configuration-card > button {
  margin-top: auto;
  justify-content: center;
}
.setup-jump {
  background: #23252b;
  border-color: #393c45;
  position: sticky;
  top: 12px;
  z-index: 3;
  box-shadow: 0 8px 20px #0002;
}
.setup-jump a {
  background: #343842;
}
.setup-jump a:hover {
  background: #f8d84c;
}
.setup-section {
  margin-bottom: 32px;
}
.setup-section + .setup-section {
  border-color: #393c45;
}
.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
.server-dialog {
  background: #23252b;
  border-color: #596071;
}
.profile-menu {
  background: #23252b;
}
.server-page-panel,
.welcome-card,
.welcome-logo {
  background: #23252b;
  border-color: #41454f;
}
body.gateway,
body.gateway .workspace {
  background: #17181c;
}
.server-row {
  background: #292c34;
  border-color: #444853;
}
.server-row.current,
.server-row:hover {
  background: #f8d84c0d;
  border-color: #ad963a;
}
.savebar {
  background: #252830;
}
.page-loader {
  background: #17181c;
}
.config-row,
.activity-row.activity-event {
  border-color: #393c45;
}
main {
  padding: 32px;
  max-width: 1560px;
}
.page-heading h1 {
  font-size: 29px;
}
.page-heading p {
  max-width: 780px;
}
.form-panel {
  border-radius: 12px;
}
.wizard-progress {
  background: #23252b;
  border: 1px solid #393c45;
  border-radius: 10px;
  padding: 15px;
}
.wizard-tip {
  margin-top: 20px;
}
@media (max-width: 1200px) {
  :root {
    --sidebar: 230px;
  }
  .configuration-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 850px) {
  :root {
    --sidebar: 190px;
  }
  .setup-manager-intro,
  .setup-workspace-link {
    flex-direction: column;
    align-items: flex-start;
  }
  .configuration-grid {
    grid-template-columns: 1fr;
  }
  .configuration-toolbar .badge {
    margin-left: 0;
  }
  .setup-jump {
    position: static;
  }
}
@media (max-width: 600px) {
  :root {
    --sidebar: 0px;
  }
  main {
    padding: 24px 18px;
  }
  .configuration-toolbar {
    gap: 12px;
    padding: 15px;
  }
  .setup-selector {
    width: 100%;
    max-width: none;
  }
  .configuration-toolbar > .primary-button {
    width: 100%;
  }
  .setup-manager-intro,
  .setup-workspace-link {
    padding: 22px;
  }
  .setup-manager-intro button,
  .setup-workspace-link button {
    width: 100%;
    justify-content: center;
  }
  .configuration-card {
    padding: 22px;
  }
  .page-heading h1 {
    font-size: 25px;
  }
}
@media (max-width: 600px) {
  .sidebar #nav .sidebar-section-label {
    display: none;
  }
  .sidebar #nav .channel-navigation {
    grid-row: auto;
  }
  .sidebar #nav {
    gap: 5px;
  }
  .sidebar #nav > .nav-item {
    min-height: 36px;
  }
  .sidebar #nav > .nav-item[data-page="premium"] {
    grid-column: 1/-1;
  }
  .sidebar .nav-submenu {
    padding: 3px 8px 8px;
  }
  .sidebar .nav-group-title {
    min-height: 39px;
  }
  .sidebar {
    padding-bottom: 18px;
  }
}
.protection-path {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 24px 0;
}
.protection-path button {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #23252b;
  border: 1px solid #3d414c;
  color: #aeb8cb;
  border-radius: 12px;
  padding: 17px;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.protection-path button > span {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #535d71;
  border-radius: 50%;
  font-size: 12px;
}
.protection-path strong {
  font-size: 12px;
  line-height: 1.45;
}
.protection-path .current {
  background: #f8d84c11;
  border-color: #ad963a;
  color: #fff0a3;
}
.protection-path .current > span {
  background: #f8d84c;
  color: #2b260f;
  border-color: #f8d84c;
}
.path-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 25px;
  align-items: start;
}
.path-question {
  padding: 24px 26px;
  background: #f8d84c0b;
  border: 1px solid #5d5331;
  border-radius: 12px;
  margin-bottom: 22px;
}
.path-question > span {
  font-size: 11px;
  color: #e4ca72;
}
.path-question h2 {
  font-size: 23px;
  margin: 12px 0 9px;
}
.path-question p {
  font-size: 13px;
  line-height: 1.6;
  color: #b8bfcd;
  margin: 0;
}
.path-controls .settings-layout {
  display: block;
}
.path-controls .settings-layout > .info-card {
  display: none;
}
.path-controls .notice-preview {
  margin-top: 14px;
}
.path-controls .settings-layout > .form-panel:last-child {
  margin-top: 20px;
}
.path-controls .settings-layout .scenario-result {
  display: block;
}
.path-controls .page-heading {
  display: none;
}
.path-controls .focused-form {
  max-width: none;
}
.path-controls .settings-layout .feature-card-stack {
  margin-bottom: 20px;
}
.protection-story {
  position: sticky;
  top: 20px;
  padding: 23px;
  background: #23252b;
  border: 1px solid #444958;
  border-radius: 14px;
}
.protection-story h2 {
  font-size: 19px;
  margin: 18px 0 24px;
}
.story-step {
  display: flex;
  gap: 13px;
  position: relative;
  padding: 0 0 22px;
}
.story-step > span {
  font-size: 10px;
  color: #f8d84c;
  border: 1px solid #665b33;
  border-radius: 8px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.story-step strong {
  font-size: 13px;
  color: #e8edf6;
}
.story-step p {
  font-size: 12px;
  color: #aeb8cb;
  line-height: 1.6;
  margin: 7px 0 0;
}
.story-note {
  padding-top: 17px;
  border-top: 1px solid #414752;
  font-size: 12px;
  line-height: 1.65;
  color: #cfbf87;
}
.path-actions {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 21px 0;
}
.path-controls .settings-export {
  display: none;
}
@media (max-width: 1200px) {
  .path-workspace {
    grid-template-columns: minmax(0, 1fr) 250px;
  }
  .protection-path button {
    padding: 13px;
    gap: 8px;
  }
}
@media (max-width: 1000px) {
  .path-workspace {
    grid-template-columns: 1fr;
  }
  .protection-story {
    position: static;
  }
  .protection-path {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .protection-path {
    gap: 8px;
  }
  .protection-path button {
    padding: 12px;
    gap: 9px;
  }
  .path-question {
    padding: 22px;
  }
  .path-question h2 {
    font-size: 20px;
  }
  .protection-path strong {
    font-size: 11px;
  }
  .path-workspace {
    gap: 14px;
  }
}
/* A server hub without sidebar navigation. */
.hub-home,
.hub-back {
  display: none;
}
.feature-hub-layout .sidebar {
  display: none;
}
.feature-hub-layout .workspace {
  margin-left: 0;
  width: 100%;
}
.feature-hub-layout .topbar {
  padding: 0 max(24px, calc((100vw - 1240px) / 2));
  gap: 25px;
}
.feature-hub-layout .hub-home {
  display: flex;
  align-items: center;
  gap: 0;
  background: transparent;
  border: 0;
  color: #f4f5fa;
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -1px;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}
.hub-home > span {
  color: #f8d84c;
}
.hub-home small {
  font-size: 10px;
  color: #9fa6b5;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 17px;
}
.feature-hub-layout .hub-back {
  display: inline-flex;
  white-space: nowrap;
  font-size: 12px;
}
.feature-hub-layout .breadcrumbs {
  display: none;
}
.feature-hub-layout main {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 35px 24px;
}
.feature-hub-layout footer {
  max-width: 1240px;
  width: 100%;
  margin: auto;
  padding: 24px;
}
.feature-hub-layout .top-actions {
  margin-left: auto;
}
.hub-summary {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
  margin: 25px 0 33px;
  padding: 17px 20px;
  background: #22242a;
  border: 1px solid #393d47;
  border-radius: 10px;
  font-size: 12px;
  color: #bcc5d7;
  align-items: center;
}
.hub-summary > span {
  display: flex;
  align-items: center;
  gap: 9px;
}
.hub-summary svg {
  width: 17px;
  height: 17px;
  color: #aeb8cb;
}
.hub-summary .badge {
  margin-left: auto;
}
.hub-feature-section {
  margin-bottom: 32px;
}
.hub-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.hub-section-heading h2 {
  font-size: 20px;
  margin: 0 0 7px;
}
.hub-section-heading p {
  margin: 0;
  color: #a9b3c7;
  font-size: 13px;
  line-height: 1.6;
}
.feature-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.hub-feature-card {
  padding: 25px;
  background: #23252b;
  border: 1px solid #414651;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hub-feature-card.feature-active {
  border-color: #8a7736;
}
.hub-card-top {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
}
.hub-feature-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: #343640;
  border-radius: 13px;
  font-size: 29px;
}
.hub-feature-icon svg {
  width: 25px;
  height: 25px;
  color: #ccd6eb;
}
.feature-status {
  font-size: 11px;
  color: #b6c0d4;
  padding: 7px 10px;
  border-radius: 20px;
  background: #383c47;
}
.feature-status.active {
  background: #75d4a516;
  color: #8ad9b1;
}
.hub-enable {
  margin-left: auto;
  cursor: pointer;
}
.hub-enable .switch {
  margin: 0;
}
.hub-feature-card h2 {
  font-size: 23px;
  margin: 0 0 12px;
}
.hub-feature-card > p {
  font-size: 14px;
  line-height: 1.65;
  color: #adb7cb;
  margin: 0 0 22px;
  max-width: 500px;
}
.hub-card-info {
  border-top: 1px solid #414651;
  margin-bottom: 24px;
  padding-top: 5px;
}
.hub-card-info > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  font-size: 12px;
}
.hub-card-info span {
  color: #a4aec2;
}
.hub-card-info strong {
  color: #d9e1f0;
  text-align: right;
  overflow-wrap: anywhere;
}
.hub-card-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
}
.hub-card-actions > button {
  flex: 1;
  justify-content: center;
}
.hub-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.hub-tool-card {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 0;
  text-align: left;
  background: #23252b;
  border: 1px solid #414651;
  border-radius: 12px;
  padding: 20px;
  color: #f2f4f8;
  cursor: pointer;
  font: inherit;
}
.hub-tool-card:hover {
  background: #2d3039;
  border-color: #7a8499;
}
.hub-tool-card > span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  color: #f8d84c;
  flex-shrink: 0;
}
.hub-tool-card > span svg {
  width: 23px;
  height: 23px;
}
.hub-tool-card h3 {
  font-size: 15px;
  margin: 0 0 6px;
}
.hub-tool-card p {
  font-size: 12px;
  color: #aeb8cb;
  line-height: 1.6;
  margin: 0;
}
.hub-tool-card > svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  margin-left: auto;
  color: #9ca8bf;
}
.hub-recent {
  margin-top: 30px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.feature-hub-layout .mobile-servers {
  display: inline-flex;
}
.feature-hub-layout .path-workspace {
  grid-template-columns: minmax(0, 1fr) 300px;
}
@media (max-width: 900px) {
  .hub-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature-hub-layout .path-workspace {
    grid-template-columns: 1fr;
  }
  .hub-home small {
    display: none;
  }
  .feature-hub-layout .topbar {
    gap: 16px;
    padding: 0 24px;
  }
}
@media (max-width: 600px) {
  .feature-hub-grid,
  .hub-tools-grid {
    grid-template-columns: 1fr;
  }
  .feature-hub-layout .topbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 70px;
    gap: 12px;
    padding: 15px 18px;
  }
  .feature-hub-layout .hub-home {
    font-size: 24px;
  }
  .feature-hub-layout .hub-back {
    font-size: 11px;
    padding: 8px 10px;
  }
  .feature-hub-layout .top-actions {
    gap: 10px;
  }
  .feature-hub-layout .header-user-name {
    display: none;
  }
  .feature-hub-layout main {
    padding: 27px 18px;
  }
  .hub-summary {
    gap: 13px;
    padding: 16px;
  }
  .hub-summary .badge {
    margin-left: 0;
  }
  .hub-feature-card {
    padding: 22px;
  }
  .hub-card-actions {
    flex-wrap: wrap;
  }
  .hub-card-actions > button {
    min-width: 130px;
  }
  .hub-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 13px;
  }
  .feature-hub-layout .path-workspace {
    grid-template-columns: 1fr;
  }
}
.hub-homepage .hub-back {
  display: none;
}
.feature-hub-layout .topbar .header-profile {
  flex-shrink: 0;
}
.hub-tool-card:focus-visible,
.hub-home:focus-visible {
  outline: 2px solid #f8d84c;
  outline-offset: 3px;
}
.hub-enable input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
/* Expandable feature catalogue: one card per installed bot feature. */
.single-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 30px;
}
.banana-feature-card {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  background: linear-gradient(135deg, #2b2d35, #202229);
  border: 1px solid #444a56;
  border-radius: 17px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px #0002;
}
.banana-feature-card:before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/banana-logo-clean.png") no-repeat 125% 40%/330px;
  opacity: 0.13;
  pointer-events: none;
}
.banana-feature-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #24262dec, transparent 85%);
  pointer-events: none;
}
.banana-feature-card.feature-active {
  border-color: #9b873b;
}
.banana-feature-copy,
.banana-feature-footer {
  position: relative;
  z-index: 1;
}
.banana-feature-copy {
  padding: 28px 28px 24px;
  flex: 1;
}
.banana-feature-copy .feature-status {
  display: inline-block;
  margin-bottom: 20px;
}
.banana-feature-copy h2 {
  font-size: 26px;
  letter-spacing: -0.5px;
  margin: 0 0 14px;
  color: #f5f6fa;
}
.banana-feature-copy p {
  font-size: 14px;
  line-height: 1.75;
  color: #bcc5d7;
  max-width: 360px;
  margin: 0;
}
.banana-feature-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 28px;
  border-top: 1px solid #ffffff12;
  background: #191c2455;
}
.banana-feature-footer .primary-button {
  padding: 12px 19px;
}
.feature-enable-control {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: #b6c0d4;
}
.feature-enable-control input {
  margin: 0;
}
.feature-enable-control input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.hub-homepage .hub-summary,
.hub-homepage .hub-recent {
  display: none;
}
.hub-homepage main {
  min-height: calc(100vh - 145px);
}
@media (max-width: 900px) {
  .single-feature-grid {
    grid-template-columns: 1fr;
    max-width: 650px;
  }
  .banana-feature-card:before {
    background-position: 120% 35%;
  }
}
@media (max-width: 600px) {
  .banana-feature-copy {
    padding: 24px;
  }
  .banana-feature-copy h2 {
    font-size: 24px;
  }
  .banana-feature-copy p {
    font-size: 13px;
    max-width: 280px;
  }
  .banana-feature-footer {
    padding: 18px 24px;
    gap: 12px;
  }
  .feature-enable-control > span {
    display: none;
  }
  .banana-feature-card:before {
    background-size: 280px;
    background-position: 160% 40%;
  }
  .single-feature-grid {
    margin-top: 25px;
  }
}
/* Square feature cards and one direct feature editor. */
.single-feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: none;
}
.banana-feature-card {
  aspect-ratio: 1;
  min-height: 0;
}
.banana-feature-copy {
  padding: 22px 22px 18px;
}
.banana-feature-copy .feature-status {
  margin-bottom: 17px;
}
.banana-feature-copy h2 {
  font-size: 23px;
}
.banana-feature-copy p {
  font-size: 13px;
  line-height: 1.65;
}
.banana-feature-card:before {
  background-size: 260px;
  background-position: 180% 35%;
  opacity: 0.15;
}
.banana-feature-footer {
  padding: 17px 22px;
  gap: 10px;
}
.banana-feature-footer .primary-button {
  padding: 10px 13px;
  font-size: 12px;
}
.feature-enable-control {
  gap: 9px;
}
.feature-enable-control > span {
  display: none;
}
.feature-editor-tabs {
  position: sticky;
  top: 12px;
  z-index: 4;
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  background: #23252b;
  border: 1px solid #414651;
  border-radius: 11px;
  padding: 10px;
  margin: 25px 0 28px;
  box-shadow: 0 8px 24px #0002;
}
.feature-editor-tabs a {
  padding: 10px 14px;
  border-radius: 6px;
  background: #343842;
  color: #dce4f2;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
}
.feature-editor-tabs a:hover {
  background: #f8d84c;
  color: #29230e;
}
.feature-editor-section {
  scroll-margin-top: 90px;
  margin-bottom: 32px;
}
.feature-editor-section + .feature-editor-section {
  padding-top: 28px;
  border-top: 1px solid #393c45;
}
.feature-editor-content .settings-layout {
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
}
.feature-editor-content .info-card {
  display: none;
}
.feature-editor-content .feature-card-stack {
  width: 100%;
}
.feature-editor-content #feature-response .settings-layout {
  grid-template-columns: 1fr;
}
.feature-editor-content #feature-response .feature-card-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feature-editor-content .focused-form {
  max-width: none;
}
.feature-editor-content #feature-tools .banana-extra {
  margin: 20px 0;
}
.feature-editor-content .page-heading {
  display: none;
}
@media (max-width: 1050px) {
  .single-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature-editor-content .settings-layout {
    grid-template-columns: 1fr;
  }
  .banana-feature-card:before {
    background-position: 130% 35%;
  }
}
@media (max-width: 600px) {
  .single-feature-grid {
    grid-template-columns: 1fr;
    max-width: 430px;
  }
  .banana-feature-card {
    aspect-ratio: 1;
    min-height: 0;
  }
  .banana-feature-copy {
    padding: 24px;
  }
  .banana-feature-copy p {
    font-size: 13px;
  }
  .banana-feature-footer {
    padding: 18px 24px;
  }
  .feature-editor-tabs {
    position: static;
    gap: 6px;
    padding: 8px;
  }
  .feature-editor-tabs a {
    padding: 9px;
    font-size: 11px;
  }
  .feature-editor-content #feature-response .feature-card-stack {
    grid-template-columns: 1fr;
  }
  .feature-editor-section {
    scroll-margin-top: 20px;
  }
}
/* Purposeful alignment in the single Ban(ana) Channel editor. */
.feature-editor-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.feature-editor-section {
  margin: 0;
}
.feature-editor-section + .feature-editor-section {
  padding-top: 28px;
}
.feature-editor-content .settings-layout {
  align-items: start;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
  gap: 24px;
}
.feature-editor-content .feature-card-stack {
  gap: 16px;
  padding: 22px;
  border-radius: 14px;
  background: #22242b;
  border-color: #3c414c;
  align-items: stretch;
}
.feature-editor-content .feature-card-stack > .panel:first-child {
  padding: 0 0 7px;
}
.feature-editor-content .individual-feature {
  padding: 20px;
  border-radius: 10px;
  background: #2c2f38;
  border-color: #434956;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  min-width: 0;
}
.feature-editor-content .feature-disclosure {
  width: 100%;
}
.feature-editor-content .feature-disclosure header {
  margin: 0;
  padding: 0;
  min-height: 0;
}
.feature-editor-content .feature-disclosure header strong,
.feature-editor-content .field > span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: #e9edf6;
}
.feature-editor-content .feature-disclosure > .field {
  margin: 14px 0 0;
  padding: 0;
  gap: 11px;
}
.feature-editor-content .select-trigger,
.feature-editor-content .field input[type="text"] {
  min-height: 44px;
  font-size: 13px;
  padding: 12px 14px;
  border-radius: 7px;
}
.feature-editor-content .select-trigger {
  padding-right: 40px;
}
.feature-editor-content .field small {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  margin: 0;
  color: #aeb8ca;
}
.feature-editor-content .compact-feature {
  justify-content: center;
  min-height: 110px;
}
.feature-editor-content .toggle-row {
  align-items: center;
  width: 100%;
  padding: 0;
  gap: 20px;
}
.feature-editor-content .toggle-row p {
  margin: 7px 0 0;
}
.feature-editor-content .switch {
  flex-shrink: 0;
}
.feature-editor-content .role-options {
  gap: 10px;
  padding: 13px;
  background: #22252d;
  border-radius: 8px;
}
.feature-editor-content .role-option {
  padding: 9px 12px;
  background: #343946;
  border: 1px solid #484f60;
  border-radius: 7px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.feature-editor-content .role-option input {
  margin: 0;
}
.feature-editor-content .field textarea {
  width: 100%;
  min-height: 210px;
  resize: vertical;
  padding: 14px;
  font-size: 13px;
  line-height: 1.7;
  border-radius: 8px;
}
.feature-editor-content .notice-preview {
  padding: 20px;
  line-height: 1.65;
}
.feature-editor-content #feature-channel .settings-layout > .form-panel {
  position: sticky;
  top: 90px;
  margin: 0;
  padding: 24px;
  border-radius: 14px;
  background: #22242b;
}
.feature-editor-content #feature-channel .settings-layout > .form-panel h2 {
  margin-bottom: 8px;
}
.feature-editor-content
  #feature-channel
  .feature-card-stack
  > .individual-feature:has([data-field="noticeTitle"]),
.feature-editor-content
  #feature-channel
  .feature-card-stack
  > .individual-feature:has(#footer-fields) {
  grid-column: 1/-1;
}
.feature-editor-content
  #feature-channel
  .individual-feature:has([data-field="protectedChannelId"]),
.feature-editor-content
  #feature-channel
  .individual-feature:has([data-field="enabled"]) {
  min-height: 130px;
}
.feature-editor-content #feature-response .feature-card-stack {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
}
.feature-editor-content
  #feature-response
  .individual-feature:has([data-field="customReason"]),
.feature-editor-content
  #feature-response
  .individual-feature:has(.role-options) {
  grid-column: 1/-1;
}
.feature-editor-content
  #feature-response
  .individual-feature:has([data-field="action"]),
.feature-editor-content
  #feature-response
  .individual-feature:has([data-field="deleteHistory"]) {
  min-height: 168px;
}
.feature-editor-content #feature-logging .form-panel {
  margin: 0;
  padding: 24px;
  border-radius: 14px;
}
.feature-editor-content #feature-logging .field {
  max-width: 680px;
  margin-bottom: 0;
}
.feature-editor-content #feature-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.feature-editor-content #feature-tools > .form-panel,
.feature-editor-content #feature-tools > .banana-extra {
  margin: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  border-radius: 14px;
}
.feature-editor-content #feature-tools h2,
.feature-editor-content #feature-tools p {
  margin: 0;
}
.feature-editor-content #feature-tools .extra-icon {
  display: none;
}
.feature-editor-content #feature-tools button {
  margin-top: auto;
}
.feature-editor-content #feature-tools .settings-export {
  grid-column: 1/-1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.feature-editor-content #feature-tools .settings-export p {
  margin-top: 8px;
}
.feature-editor-content #feature-tools .settings-export button {
  margin-top: 0;
}
.feature-editor-tabs a:focus-visible {
  outline: 2px solid #f8d84c;
  outline-offset: 2px;
}
@media (max-width: 1000px) {
  .feature-editor-content .settings-layout {
    grid-template-columns: 1fr;
  }
  .feature-editor-content #feature-channel .settings-layout > .form-panel {
    position: static;
  }
  .feature-editor-content
    #feature-channel
    .individual-feature:has([data-field="protectedChannelId"]),
  .feature-editor-content
    #feature-channel
    .individual-feature:has([data-field="enabled"]) {
    min-height: 115px;
  }
}
@media (max-width: 600px) {
  .feature-editor-content .feature-card-stack {
    padding: 16px;
    gap: 13px;
  }
  .feature-editor-content .individual-feature {
    padding: 18px;
  }
  .feature-editor-content #feature-response .feature-card-stack,
  .feature-editor-content #feature-tools {
    grid-template-columns: 1fr;
  }
  .feature-editor-content
    #feature-response
    .individual-feature:has([data-field="action"]),
  .feature-editor-content
    #feature-response
    .individual-feature:has([data-field="deleteHistory"]) {
    min-height: 0;
  }
  .feature-editor-content #feature-tools .settings-export {
    flex-direction: column;
    align-items: flex-start;
  }
  .feature-editor-content #feature-tools .settings-export button {
    width: 100%;
  }
  .feature-editor-content #feature-tools > .form-panel,
  .feature-editor-content #feature-tools > .banana-extra {
    padding: 21px;
  }
  .feature-editor-content .field textarea {
    min-height: 190px;
  }
}
/* Four compact square feature cards per desktop row. */
.single-feature-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.banana-feature-copy {
  padding: 19px 19px 12px;
}
.banana-feature-copy .feature-status {
  margin-bottom: 13px;
  font-size: 10px;
  padding: 5px 8px;
}
.banana-feature-copy h2 {
  font-size: 19px;
  margin-bottom: 10px;
}
.banana-feature-copy p {
  font-size: 12px;
  line-height: 1.55;
}
.banana-feature-card:before {
  background-size: 220px;
  background-position: 210% 35%;
}
.banana-feature-footer {
  padding: 13px 19px;
  gap: 9px;
}
.banana-feature-footer .primary-button {
  font-size: 11px;
  padding: 9px 11px;
  min-height: 34px;
}
.banana-feature-footer .primary-button svg {
  width: 15px;
  height: 15px;
}
.feature-enable-control .switch {
  width: 35px;
  height: 20px;
}
.feature-enable-control .switch:before {
  width: 14px;
  height: 14px;
  top: 2px;
  left: 2px;
}
.feature-enable-control .switch:checked:before {
  transform: translateX(15px);
}
@media (max-width: 1100px) {
  .single-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 850px) {
  .single-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}
@media (max-width: 600px) {
  .single-feature-grid {
    grid-template-columns: 1fr;
    max-width: 340px;
  }
  .banana-feature-copy {
    padding: 22px;
  }
  .banana-feature-copy h2 {
    font-size: 22px;
  }
  .banana-feature-copy p {
    font-size: 13px;
  }
  .banana-feature-footer {
    padding: 16px 22px;
  }
}
/* Polished feature tile: clean copy over a quiet branded illustration. */
.banana-feature-card {
  background: linear-gradient(145deg, #30333e, #242730 65%);
  border: 1px solid #4b5263;
  border-radius: 16px;
  box-shadow: 0 8px 24px #0002;
  transition:
    border-color 0.18s,
    box-shadow 0.18s,
    transform 0.18s;
}
.banana-feature-card.feature-active {
  border-color: #a58c39;
}
.banana-feature-card:hover {
  transform: translateY(-3px);
  border-color: #dfc14d;
  box-shadow: 0 12px 30px #0004;
}
.banana-feature-card:before {
  background-size: 205px;
  background-position: 155% 70%;
  opacity: 0.21;
  filter: saturate(0.85);
  transition: opacity 0.18s;
}
.banana-feature-card:hover:before {
  opacity: 0.28;
}
.banana-feature-card:after {
  background: linear-gradient(
    90deg,
    #252831f5 0%,
    #252831c9 48%,
    #25283145 100%
  );
}
.banana-feature-copy {
  padding: 20px 20px 14px;
}
.banana-feature-copy .feature-status {
  background: #172c23;
  color: #a9e3c1;
  border: 1px solid #8dd6ae22;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 5px 9px;
  margin-bottom: 16px;
}
.banana-feature-copy .feature-status:before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background: #7bd5a4;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: 1px;
}
.banana-feature-card:not(.feature-active) .feature-status {
  background: #333641;
  color: #c0c8d8;
  border-color: #ffffff12;
}
.banana-feature-card:not(.feature-active) .feature-status:before {
  background: #a0abc0;
}
.banana-feature-copy h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.3;
  margin-bottom: 12px;
  max-width: 220px;
}
.banana-feature-copy p {
  font-size: 12px;
  line-height: 1.65;
  color: #b9c3d7;
  max-width: 215px;
}
.banana-feature-footer {
  background: #171b2477;
  border-top: 1px solid #ffffff0c;
  padding: 14px 20px;
}
.banana-feature-footer .primary-button {
  border: 1px solid #ffe78b;
  background: linear-gradient(135deg, #ffe475, #f8d84c);
  border-radius: 8px;
  min-height: 35px;
  font-weight: 650;
  padding: 9px 12px;
  box-shadow: 0 3px 12px #f8d84c12;
}
.banana-feature-footer .primary-button:hover {
  background: #ffeb93;
}
.banana-feature-footer .switch {
  box-shadow: inset 0 0 0 1px #ffffff14;
}
.feature-enable-control {
  padding: 5px 0 5px 10px;
}
.banana-feature-footer .primary-button:focus-visible {
  outline: 2px solid #fff0aa;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .banana-feature-card,
  .banana-feature-card:before {
    transition: none;
  }
  .banana-feature-card:hover {
    transform: none;
  }
}
@media (max-width: 600px) {
  .banana-feature-copy p {
    max-width: 245px;
    font-size: 13px;
  }
  .banana-feature-copy h2 {
    font-size: 22px;
  }
  .banana-feature-card:before {
    background-size: 245px;
    background-position: 145% 70%;
  }
  .banana-feature-copy {
    padding: 22px;
  }
  .banana-feature-footer {
    padding: 16px 22px;
  }
}
.banana-card-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 21px;
}
.banana-feature-copy .banana-card-status-row .feature-status {
  margin: 0;
}
.banana-card-status-row .feature-enable-control {
  padding: 3px 0;
  margin-left: auto;
}
.banana-card-status-row .switch {
  width: 35px;
  height: 20px;
  margin: 0;
}
.banana-card-status-row .switch:before {
  width: 14px;
  height: 14px;
  top: 2px;
  left: 2px;
}
.banana-card-status-row .switch:checked:before {
  transform: translateX(15px);
}
.banana-feature-copy h2 {
  margin: 0 0 11px;
  font-size: 20px;
  letter-spacing: -0.4px;
}
.banana-feature-copy p {
  max-width: 215px;
  margin: 0;
  line-height: 1.6;
}
.banana-feature-footer {
  justify-content: flex-start;
  padding: 13px 20px;
  background: #171b244a;
}
.banana-feature-footer .primary-button {
  width: 100%;
  justify-content: space-between;
}
.banana-feature-card:before {
  background-position: 145% 75%;
  opacity: 0.18;
}
@media (max-width: 600px) {
  .banana-card-status-row {
    margin-bottom: 24px;
  }
  .banana-feature-copy h2 {
    font-size: 22px;
  }
  .banana-feature-copy p {
    max-width: 245px;
  }
  .banana-feature-footer {
    padding: 15px 22px;
  }
}
.banana-feature-copy p {
  max-width: none;
  width: 100%;
}
.banana-feature-card:before {
  background-image: url("/assets/account-catcher-robot.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70%;
  opacity: 0.075;
  filter: none;
}
.banana-feature-card:hover:before {
  opacity: 0.11;
}
.banana-feature-card:after {
  background: linear-gradient(180deg, #25283125, #25283110 65%, #25283135);
}
/* A quieter feature-card action with a clear yellow accent. */
.banana-feature-footer .primary-button {
  background: #242832;
  border: 1px solid #7b6b35;
  border-radius: 9px;
  color: #f7dc75;
  box-shadow: none;
  min-height: 39px;
  padding: 10px 13px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1px;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.banana-feature-footer .primary-button svg {
  width: 17px;
  height: 17px;
  color: #d8bd59;
}
.banana-feature-footer .primary-button:hover {
  background: #f8d84c12;
  border-color: #f8d84c;
  color: #ffec9c;
  box-shadow: none;
}
.banana-feature-footer .primary-button:active {
  background: #f8d84c20;
}
.banana-feature-footer .primary-button:focus-visible {
  outline: 2px solid #f8d84c;
  outline-offset: 3px;
}
.banana-feature-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 13px 18px;
}
.banana-feature-footer .primary-button {
  width: auto;
  flex: 1;
  min-width: 0;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #ffe475, #f8d84c);
  border: 1px solid #ffe78b;
  color: #29230e;
  border-radius: 8px;
  min-height: 36px;
  padding: 9px 10px;
  font-size: 11px;
  box-shadow: 0 3px 12px #f8d84c12;
}
.banana-feature-footer .primary-button svg {
  width: 14px;
  height: 14px;
  color: #29230e;
}
.banana-feature-footer .primary-button:hover {
  background: #ffeb93;
  color: #29230e;
  border-color: #fff0ad;
}
.banana-feature-footer .feature-demo-button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 9px 14px;
  border-radius: 8px;
  background: #343a47;
  border: 1px solid #5a6478;
  color: #dbe4f5;
  font-size: 11px;
  font-weight: 600;
}
.banana-feature-footer .feature-demo-button:hover {
  background: #454d60;
  border-color: #94a2bb;
}
.banana-feature-footer .feature-demo-button:focus-visible {
  outline: 2px solid #f8d84c;
  outline-offset: 3px;
}
.banana-feature-footer .primary-button {
  justify-content: space-between;
  text-align: left;
}
.banana-feature-footer .primary-button svg {
  margin-left: auto;
  flex-shrink: 0;
}
.banana-feature-card:before,
.banana-feature-card:after {
  display: none;
}
.banana-feature-footer {
  background: transparent;
  border-top: 0;
}

/* Overview: a clear server introduction and one tidy feature workspace. */
.hub-homepage main {
  padding-top: 42px;
  padding-bottom: 64px;
  min-height: calc(100vh - 150px);
}
.overview-welcome {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 0 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid #ffffff10;
}
.overview-server-mark {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #f8d84c14;
  border: 1px solid #f8d84c35;
  color: #ffe475;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.6px;
}
.overview-welcome-copy {
  min-width: 0;
}
.overview-eyebrow {
  display: block;
  color: #e3c65c;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}
.overview-welcome h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.3;
  letter-spacing: -0.7px;
  color: #f4f5f8;
  overflow-wrap: anywhere;
}
.overview-welcome p {
  margin: 9px 0 0;
  color: #aeb6c7;
  font-size: 14px;
  line-height: 1.6;
}
.overview-features-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}
.overview-features-heading h2 {
  margin: 0 0 7px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 650;
  color: #eef0f5;
}
.overview-features-heading p {
  margin: 0;
  font-size: 13px;
  color: #aeb6c7;
  line-height: 1.6;
}
.overview-feature-count {
  color: #aeb6c7;
  font-size: 11px;
  white-space: nowrap;
  border: 1px solid #414651;
  border-radius: 6px;
  padding: 6px 9px;
  background: #23252b;
}
.hub-homepage .single-feature-grid {
  margin-top: 0;
}
.hub-homepage .hub-back {
  display: none;
}
.hub-homepage .hub-home small {
  border-left: 1px solid #414651;
  padding-left: 17px;
}
.hub-homepage footer {
  border-top: 1px solid #ffffff0a;
  font-size: 11px;
  gap: 16px;
  line-height: 1.6;
}
@media (max-width: 600px) {
  .hub-homepage main {
    padding: 28px 20px 44px;
  }
  .overview-welcome {
    align-items: flex-start;
    gap: 15px;
    padding-bottom: 25px;
    margin-bottom: 25px;
  }
  .overview-server-mark {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 12px;
    font-size: 17px;
  }
  .overview-welcome h1 {
    font-size: 23px;
  }
  .overview-welcome p {
    font-size: 13px;
  }
  .overview-eyebrow {
    font-size: 10px;
    margin-bottom: 6px;
  }
  .overview-features-heading {
    gap: 12px;
    align-items: flex-start;
  }
  .overview-features-heading p {
    max-width: 250px;
  }
  .hub-homepage footer {
    flex-wrap: wrap;
    padding: 20px;
  }
  .hub-homepage .hub-home small {
    display: none;
  }
}

.overview-server-mark {
  overflow: hidden;
  border-radius: 50%;
}
.overview-server-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Minimal overview navigation; server switching lives in the account menu. */
.hub-homepage .top-actions > :not(.header-profile) {
  display: none;
}
.hub-homepage .header-account .header-avatar {
  display: none;
}
.hub-homepage .hub-home {
  font-size: 23px;
  letter-spacing: -0.6px;
}
.hub-homepage .hub-home small {
  display: inline;
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -0.6px;
  color: #f4f5fa;
  margin-left: 7px;
  padding-left: 0;
  border: 0;
}
.hub-homepage .header-account {
  gap: 10px;
  font-size: 13px;
}
.hub-homepage #header-user-name {
  display: inline;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hub-homepage .topbar {
  flex-wrap: nowrap;
  gap: 16px;
}
@media (max-width: 600px) {
  .hub-homepage .hub-home,
  .hub-homepage .hub-home small {
    font-size: 18px;
  }
  .hub-homepage #header-user-name {
    max-width: 110px;
  }
  .hub-homepage .topbar {
    padding: 15px 20px;
  }
  .hub-homepage .header-account {
    font-size: 12px;
  }
}

.hub-homepage .topbar {
  padding-left: 24px;
}
@media (max-width: 600px) {
  .hub-homepage .topbar {
    padding-left: 16px;
  }
}

.hub-homepage .header-account .header-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.header-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hub-homepage .topbar {
  padding-right: 24px;
}
@media (max-width: 600px) {
  .hub-homepage .topbar {
    padding-right: 16px;
  }
}

.header-account {
  display: flex;
  align-items: center;
}
.header-account .account-chevron {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin: 0;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 0.2s ease;
  color: #b9c3d7;
}
.header-profile[open] .header-account .account-chevron {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .header-account .account-chevron {
    transition: none;
  }
}

.header-profile .profile-menu {
  min-width: 180px;
  padding: 8px;
  gap: 6px;
}
.header-profile .profile-menu .ghost-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 42px;
  padding: 11px 14px;
  margin: 0;
  text-align: left;
  border-radius: 6px;
  font-size: 13px;
}
.header-profile .profile-menu .ghost-button + .ghost-button {
  margin-top: 6px;
}

.header-profile .profile-menu {
  gap: 0;
}
.header-profile .profile-menu .ghost-button + .ghost-button {
  margin-top: 8px;
}

/* Shared overview rhythm: 32px between sections and 8px between text lines. */
.hub-homepage main {
  padding-top: 32px;
  padding-bottom: 32px;
}
.hub-homepage .overview-welcome {
  padding-bottom: 32px;
  margin-bottom: 32px;
}
.hub-homepage .overview-eyebrow {
  margin-bottom: 8px;
}
.hub-homepage .overview-welcome p {
  margin-top: 8px;
}
.hub-homepage .overview-features-heading {
  margin-bottom: 32px;
}
.hub-homepage .overview-features-heading h2 {
  margin-bottom: 8px;
}
.hub-homepage .banana-feature-copy h2 {
  margin-bottom: 8px;
}
.hub-homepage .banana-card-status-row {
  margin-bottom: 24px;
}
@media (max-width: 600px) {
  .hub-homepage main {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .hub-homepage .overview-welcome {
    padding-bottom: 32px;
    margin-bottom: 32px;
  }
  .hub-homepage .overview-eyebrow {
    margin-bottom: 8px;
  }
}

.hub-homepage main {
  min-height: 0;
  padding-bottom: 32px;
}
.hub-homepage footer {
  margin: 0 auto;
  padding-top: 32px;
  padding-bottom: 32px;
}

/* Match the final divider gap to the gap before Your Features. */
.hub-homepage {
  --overview-section-gap: 32px;
}
.hub-homepage .overview-welcome {
  margin-bottom: var(--overview-section-gap);
}
.hub-homepage main {
  padding-bottom: var(--overview-section-gap);
}
.hub-homepage footer {
  margin-top: 0;
  padding-top: var(--overview-section-gap);
}
/* Use solid hover fills so older gradient styles cannot show through. */
body .primary-button:not(:disabled):hover,
body .banana-feature-footer .primary-button:not(:disabled):hover {
  background: #ffeb93;
  border-color: #fff0ad;
  color: #29230e;
  box-shadow: none;
}
body .primary-button:not(:disabled):hover svg {
  color: inherit;
}
body .ghost-button:not(:disabled):hover,
body .banana-feature-footer .feature-demo-button:not(:disabled):hover {
  background: #414650;
  border-color: #727b8b;
  color: #f5f6fa;
  box-shadow: none;
}
body .primary-button:not(:disabled):active {
  background: #eacb40;
  border-color: #eacb40;
  color: #29230e;
}
body .ghost-button:not(:disabled):active {
  background: #373c46;
  border-color: #727b8b;
  color: #f5f6fa;
}
body .hub-home:not(:disabled):hover {
  background: transparent;
  color: #fff4b8;
}
body .header-account:hover {
  background: transparent;
  color: #ffe475;
}
body .primary-button:focus-visible,
body .ghost-button:focus-visible,
body .header-account:focus-visible {
  outline: 2px solid #f8d84c;
  outline-offset: 3px;
}

/* Keep overview credits near the bottom without stretching feature spacing. */
.hub-homepage .workspace {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.hub-homepage main {
  flex: 0 0 auto;
}
.hub-homepage footer {
  display: flex;
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 24px;
  padding-bottom: 24px;
}

.hub-homepage footer {
  padding-top: var(--overview-section-gap, 32px);
  padding-bottom: var(--overview-section-gap, 32px);
}

/* Balance the overview content between the header and footer. */
.hub-homepage main {
  margin-top: auto;
  margin-bottom: auto;
}
.hub-homepage footer {
  margin-top: 0;
  margin-bottom: 0;
}

/* One spacing scale across the overview. */
.hub-homepage {
  --overview-section-gap: 32px;
  --overview-text-gap: 8px;
}
.hub-homepage main {
  padding-top: var(--overview-section-gap);
  padding-bottom: var(--overview-section-gap);
  margin-top: auto;
  margin-bottom: auto;
}
.hub-homepage .overview-welcome {
  gap: 24px;
  padding-bottom: var(--overview-section-gap);
  margin-bottom: var(--overview-section-gap);
}
.hub-homepage .overview-eyebrow,
.hub-homepage .overview-features-heading h2,
.hub-homepage .banana-feature-copy h2 {
  margin-bottom: var(--overview-text-gap);
}
.hub-homepage .overview-welcome p {
  margin-top: var(--overview-text-gap);
}
.hub-homepage .overview-features-heading {
  margin-bottom: var(--overview-section-gap);
}
.hub-homepage .banana-feature-copy {
  padding: 20px 20px 12px;
}
.hub-homepage .banana-card-status-row {
  margin-bottom: 24px;
}
.hub-homepage .banana-feature-footer {
  padding: 12px 20px 20px;
  gap: 8px;
}
.hub-homepage footer {
  padding-top: var(--overview-section-gap);
  padding-bottom: var(--overview-section-gap);
  margin-top: 0;
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .hub-homepage .overview-welcome {
    gap: 16px;
  }
}

/* Distribute the available height evenly around the overview sections. */
.hub-homepage main {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(32px, 1fr) auto minmax(32px, 1fr) 1px minmax(
      32px,
      1fr
    ) auto minmax(32px, 1fr);
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.hub-homepage main::before {
  content: "";
  grid-column: 1;
  grid-row: 4;
  background: #ffffff10;
  width: 100%;
  height: 1px;
}
.hub-homepage .overview-welcome {
  grid-column: 1;
  grid-row: 2;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.hub-homepage .overview-features {
  grid-column: 1;
  grid-row: 6;
  min-width: 0;
}
.hub-homepage footer {
  margin-top: 0;
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .hub-homepage main {
    padding-top: 0;
    padding-bottom: 0;
  }
  .hub-homepage .overview-welcome {
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

.verification-coming-soon {
  background: linear-gradient(145deg, #36332a, #252730 70%);
  border-color: #665b38;
}
.verification-status {
  display: inline-flex;
  border: 1px solid #f8d84c35;
  background: #f8d84c12;
  color: #f4dc86;
  padding: 5px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 600;
}
.verification-emblem {
  display: flex;
  color: #e5ca6b;
}
.verification-emblem svg {
  width: 20px;
  height: 20px;
}
.verification-art {
  position: absolute;
  right: 18px;
  bottom: 66px;
  display: grid;
  place-items: center;
  width: 75px;
  height: 75px;
  opacity: 0.12;
  color: #ffe475;
  pointer-events: none;
}
.verification-art > svg {
  width: 75px;
  height: 75px;
}
.verification-art > span {
  position: absolute;
  font-size: 28px;
  top: 20px;
}
.verification-coming-soon .banana-feature-copy {
  position: relative;
  z-index: 1;
}
.verification-coming-soon .verification-soon-button {
  width: 100%;
  min-height: 36px;
  font-size: 11px;
  border-radius: 8px;
  background: #f8d84c09;
  border-color: #f8d84c25;
  color: #dfcb8c;
  opacity: 1;
  cursor: default;
}
.verification-coming-soon:hover {
  transform: none;
  border-color: #887642;
  box-shadow: 0 8px 24px #0002;
}

.banana-feature-card {
  background: linear-gradient(145deg, #36332a, #252730 70%);
}

/* Feature state is shown by its outline, with a neutral dark surface. */
.banana-feature-card {
  background: #252730;
  border-color: #414651;
}
.banana-feature-card.feature-active {
  background: #252730;
  border-color: #d8b943;
}
.banana-feature-card:not(.feature-active):hover {
  border-color: #687182;
}
.verification-coming-soon,
.verification-coming-soon:hover {
  background: #252730;
  border-color: #414651;
}

.verification-coming-soon {
  background: linear-gradient(145deg, #36332a, #252730 70%);
  border-color: #665b38;
}
.verification-coming-soon:hover {
  background: linear-gradient(145deg, #36332a, #252730 70%);
  border-color: #887642;
}

/* Account Catcher editor: consistent full-width rows with clear section links. */
.feature-editor-content .settings-layout,
.feature-editor-content #feature-channel .settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.feature-editor-content .feature-card-stack,
.feature-editor-content #feature-response .feature-card-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 0;
  background: transparent;
  border: 0;
}
.feature-editor-content .feature-card-stack > .individual-feature {
  grid-column: 1;
  width: 100%;
  min-height: 160px;
  margin: 0;
  padding: 24px;
  border-radius: 12px;
}
.feature-editor-content
  .feature-card-stack
  > .form-panel:not(.individual-feature) {
  grid-column: 1;
  padding: 0 0 8px;
  background: transparent;
  border: 0;
  min-height: 0;
}
.feature-editor-content .feature-disclosure {
  display: grid;
  grid-template-columns: minmax(200px, 0.85fr) minmax(0, 1.15fr);
  gap: 32px;
  align-items: center;
  min-height: 110px;
}
.feature-editor-content .feature-disclosure > header {
  padding: 0;
  margin: 0;
  border: 0;
}
.feature-editor-content .feature-disclosure > .field {
  margin: 0;
  width: 100%;
  min-width: 0;
}
.feature-editor-content .individual-feature textarea {
  min-height: 110px;
  height: 110px;
  resize: vertical;
}
.feature-editor-content .individual-feature .toggle-row {
  min-height: 110px;
  margin: 0;
  padding: 0;
  border: 0;
  align-items: center;
}
.feature-editor-content #feature-channel .settings-layout > .form-panel {
  position: static;
  width: 100%;
  margin: 0;
  padding: 24px;
}
.feature-editor-content #feature-tools {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feature-editor-content #feature-tools > .panel,
.feature-editor-content #feature-tools > .banana-extra {
  width: 100%;
  margin: 0;
  min-height: 160px;
  padding: 24px;
}
.feature-editor-content #feature-logging .focused-form {
  max-width: none;
  width: 100%;
}
.feature-editor-content .feature-editor-section {
  margin-bottom: 0;
  padding-top: 0;
}
.feature-editor-tabs {
  top: 12px;
  gap: 8px;
  padding: 8px;
}
.feature-editor-tabs a {
  flex: 1;
  text-align: center;
  padding: 12px 10px;
}
@media (max-width: 700px) {
  .feature-editor-content .feature-disclosure {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .feature-editor-content .feature-card-stack > .individual-feature {
    padding: 20px;
    min-height: 160px;
  }
  .feature-editor-tabs {
    position: static;
  }
  .feature-editor-tabs a {
    flex: 1 1 40%;
    font-size: 11px;
  }
  .feature-editor-content .individual-feature .toggle-row {
    min-height: 110px;
  }
}

/* Refined settings rows and simple section selection. */
.feature-editor-tabs {
  background: #202229;
  border: 1px solid #373c47;
  border-radius: 12px;
  padding: 6px;
  box-shadow: none;
}
.feature-editor-tabs a {
  background: transparent;
  color: #bfc6d3;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 12px;
  transition:
    background 0.15s,
    color 0.15s;
}
.feature-editor-tabs a:hover,
.feature-editor-tabs a:focus-visible {
  background: #f8d84c14;
  border-color: #f8d84c35;
  color: #ffe475;
}
.feature-editor-content .feature-card-stack > .individual-feature {
  background: #252830;
  border: 1px solid #3b414d;
  border-radius: 12px;
  min-height: 144px;
  padding: 24px 28px;
  box-shadow: 0 3px 12px #0000000c;
}
.feature-editor-content .feature-disclosure {
  min-height: 94px;
  gap: 36px;
}
.feature-editor-content .feature-disclosure > header strong {
  display: block;
  color: #f0f2f7;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.feature-editor-content .feature-disclosure > header small {
  display: block;
  color: #a9b2c3;
  font-size: 12px;
  line-height: 1.65;
  margin-top: 6px;
  max-width: 360px;
}
.feature-editor-content .individual-feature .toggle-row {
  min-height: 94px;
  gap: 24px;
}
.feature-editor-content .individual-feature .toggle-row h3 {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 6px;
}
.feature-editor-content .individual-feature .toggle-row p {
  font-size: 12px;
  line-height: 1.65;
  margin: 0;
  color: #a9b2c3;
}
.feature-editor-content .individual-feature .select-trigger,
.feature-editor-content .individual-feature input[type="text"],
.feature-editor-content .individual-feature textarea {
  background: #1b1e25;
  border: 1px solid #48505e;
  border-radius: 8px;
}
.feature-editor-content .individual-feature .field textarea {
  min-height: 110px;
}
.feature-editor-content
  .feature-card-stack
  > .form-panel:not(.individual-feature)
  h2 {
  margin: 0 0 8px;
  font-size: 19px;
}
.feature-editor-content
  .feature-card-stack
  > .form-panel:not(.individual-feature)
  p {
  margin: 0;
  color: #a9b2c3;
}
.feature-editor-content #feature-channel .settings-layout > .form-panel,
.feature-editor-content #feature-tools > .panel,
.feature-editor-content #feature-tools > .banana-extra {
  background: #252830;
  border-color: #3b414d;
  border-radius: 12px;
  box-shadow: 0 3px 12px #0000000c;
}
@media (max-width: 700px) {
  .feature-editor-content .feature-card-stack > .individual-feature {
    padding: 20px;
  }
  .feature-editor-content .feature-disclosure {
    gap: 16px;
  }
}

.feature-editor-content {
  gap: 48px;
}
.feature-editor-content .feature-editor-section + .feature-editor-section {
  padding-top: 32px;
  border-top: 1px solid #414651;
}
.feature-editor-tabs a.selected,
.feature-editor-tabs a.selected:hover {
  background: #f8d84c;
  color: #29230e;
  border-color: #f8d84c;
  font-weight: 650;
}
@media (max-width: 700px) {
  .feature-editor-content {
    gap: 36px;
  }
  .feature-editor-content .feature-editor-section + .feature-editor-section {
    padding-top: 28px;
  }
}

/* Compact settings on the left, preview and guidance on the right. */
.feature-editor-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.feature-editor-companion {
  position: sticky;
  top: 92px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.feature-editor-companion .panel {
  padding: 24px;
  background: #252830;
  border: 1px solid #3b414d;
  border-radius: 12px;
}
.editor-side-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.5px;
  font-weight: 650;
  color: #e7cd70;
  margin-bottom: 10px;
}
.feature-editor-companion h2 {
  font-size: 17px;
  margin: 0 0 8px;
}
.feature-editor-companion p {
  font-size: 12px;
  line-height: 1.65;
  color: #a9b2c3;
  margin: 0 0 18px;
}
.editor-help-panel ul {
  padding-left: 18px;
  margin: 16px 0;
  color: #c3cad7;
  font-size: 12px;
  line-height: 1.7;
}
.editor-help-panel li + li {
  margin-top: 10px;
}
.editor-help-panel p:last-child {
  margin-bottom: 0;
  padding-top: 14px;
  border-top: 1px solid #3b414d;
}
.feature-editor-workspace .feature-card-stack > .individual-feature {
  min-height: 0;
  padding: 20px;
}
.feature-editor-workspace .feature-disclosure {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 0;
  gap: 14px;
}
.feature-editor-workspace .individual-feature .toggle-row {
  min-height: 0;
  gap: 16px;
}
.feature-editor-workspace .feature-card-stack {
  gap: 12px;
}
.feature-editor-workspace .individual-feature textarea {
  height: 110px;
  min-height: 110px;
}
.feature-editor-workspace #feature-tools > .panel,
.feature-editor-workspace #feature-tools > .banana-extra {
  min-height: 0;
  padding: 20px;
}
.feature-editor-companion #notice-preview {
  overflow-wrap: anywhere;
  min-width: 0;
}
@media (max-width: 950px) {
  .feature-editor-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .feature-editor-companion {
    position: static;
  }
  .feature-editor-companion .panel {
    padding: 20px;
  }
}

.feature-editor-workspace .channel-message-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.channel-message-group h2 {
  font-size: 17px;
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #3b414d;
}
.feature-editor-workspace .channel-message-group .field {
  margin: 0;
  width: 100%;
}
.channel-message-group .field > span:not(.themed-select) {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #e5e9f1;
  margin-bottom: 8px;
}
.channel-message-group .field small {
  display: block;
  margin-top: 7px;
  color: #a9b2c3;
  font-size: 11px;
  line-height: 1.6;
}
.channel-message-group #footer-fields {
  width: 100%;
}
.feature-editor-companion {
  top: 88px;
  align-self: start;
}
.feature-editor-companion .notice-preview {
  padding: 20px;
  margin: 0;
  background: #1c1f27;
  border: 1px solid #424957;
  border-radius: 10px;
  line-height: 1.65;
}
.feature-editor-companion .notice-preview > strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.feature-editor-companion .notice-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.feature-editor-companion .notice-preview h3 {
  font-size: 17px;
  line-height: 1.4;
  margin: 18px 0 12px;
  overflow-wrap: anywhere;
}
.feature-editor-companion .notice-preview p {
  white-space: pre-wrap;
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.7;
}
.feature-editor-companion .notice-preview hr {
  border: 0;
  border-top: 1px solid #3b414d;
  margin: 18px 0;
}
.feature-editor-companion .notice-preview small {
  display: block;
  margin-bottom: 12px;
  line-height: 1.6;
}
.feature-editor-companion .notice-preview p:last-child {
  margin-bottom: 0;
  font-size: 11px;
  color: #a9b2c3;
}

/* Keep the desktop preview vertically centred in the visible workspace. */
.feature-editor-companion {
  top: 80px;
  height: calc(100vh - 160px);
  justify-content: center;
  transform: none;
  margin-top: 0;
  overflow: visible;
}
.feature-editor-companion .editor-preview-panel {
  max-height: 100%;
  overflow: auto;
  scrollbar-width: thin;
}
@media (max-width: 950px) {
  .feature-editor-companion {
    position: static;
    top: auto;
    height: auto;
    transform: none;
    margin-top: 0;
    max-height: none;
    overflow: visible;
  }
}

/* Share the cards-page header throughout the feature workspace. */
.feature-hub-layout .topbar {
  padding-left: 24px;
  padding-right: 24px;
  flex-wrap: nowrap;
  gap: 16px;
}
.feature-hub-layout .top-actions > :not(.header-profile),
.feature-hub-layout .hub-back {
  display: none;
}
.feature-hub-layout .hub-home {
  font-size: 23px;
  letter-spacing: -0.6px;
}
.feature-hub-layout .hub-home small {
  display: inline;
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -0.6px;
  color: #f4f5fa;
  margin-left: 7px;
  padding-left: 0;
  border: 0;
}
.feature-hub-layout .header-account {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.feature-hub-layout #header-user-name {
  display: inline;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 0;
  color: #b8c2d3;
  font-size: 12px;
  margin-bottom: 20px;
}
.editor-back-link svg {
  width: 15px;
  height: 15px;
  transform: rotate(180deg);
}
.editor-back-link:hover {
  color: #ffe475;
}
.feature-editor-tabs {
  position: sticky;
  top: 12px;
  padding: 6px;
  background: #22252d;
  border: 1px solid #3e4552;
  border-radius: 12px;
  gap: 6px;
  margin-top: 24px;
  margin-bottom: 28px;
  box-shadow: 0 5px 16px #0002;
}
.feature-editor-tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  line-height: 1.4;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
}
.feature-editor-workspace {
  gap: 32px;
}
.feature-editor-workspace .feature-card-stack {
  gap: 16px;
}
.feature-editor-workspace .feature-card-stack > .individual-feature {
  padding: 22px;
  border: 1px solid #3c4350;
  background: #242730;
  border-radius: 12px;
  box-shadow: none;
}
.feature-editor-workspace .feature-disclosure {
  gap: 16px;
}
.feature-editor-workspace .feature-disclosure > header strong {
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.feature-editor-workspace .feature-disclosure > header small {
  max-width: none;
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.65;
}
.feature-editor-workspace .individual-feature .field {
  min-width: 0;
}
.feature-editor-workspace .field input[type="text"],
.feature-editor-workspace .field textarea,
.feature-editor-workspace .select-trigger {
  width: 100%;
  min-width: 0;
  line-height: 1.5;
  padding: 11px 13px;
  font-size: 13px;
}
.feature-editor-workspace
  .channel-message-group
  .field
  > span:not(.themed-select) {
  display: block !important;
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
}
.feature-editor-workspace .channel-message-group .field > small {
  display: block !important;
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.65;
}
.feature-editor-workspace .individual-feature .toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.feature-editor-workspace .toggle-row > div {
  min-width: 0;
}
.feature-editor-workspace .toggle-row .switch {
  flex-shrink: 0;
  margin: 0;
}
.feature-editor-workspace .toggle-row p {
  max-width: none;
  overflow-wrap: anywhere;
}
.feature-editor-workspace .role-options {
  padding: 8px;
  border: 1px solid #424957;
  border-radius: 8px;
  background: #1c1f27;
  max-height: 240px;
  overflow: auto;
}
.feature-editor-workspace .role-option {
  padding: 10px 8px;
  line-height: 1.5;
  gap: 10px;
  overflow-wrap: anywhere;
}
.feature-editor-companion .editor-preview-panel {
  border-color: #3c4350;
  background: #242730;
  padding: 24px;
  border-radius: 12px;
}
@media (max-width: 600px) {
  .feature-hub-layout .topbar {
    padding-left: 16px;
    padding-right: 16px;
  }
  .feature-hub-layout .hub-home,
  .feature-hub-layout .hub-home small {
    font-size: 18px;
  }
  .feature-hub-layout #header-user-name {
    max-width: 110px;
  }
  .feature-editor-tabs a {
    padding: 10px 8px;
    font-size: 11px;
  }
  .feature-editor-workspace .feature-card-stack > .individual-feature {
    padding: 18px;
  }
}

.feature-editor-workspace .feature-disclosure > .field > small {
  display: none;
}
.feature-hub-layout .header-account .header-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 32px;
}

.notice-count-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 9px 13px;
  background: #363b45;
  border: 1px solid #4c5463;
  border-radius: 6px;
  color: #e6ebf3;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
}
.notice-count-button:hover {
  background: #454d5b;
  border-color: #7b879c;
}
.notice-count-button:focus-visible {
  outline: 2px solid #f8d84c;
  outline-offset: 3px;
}

/* Discord Components V2 preview: author, container, then action row. */
.feature-editor-companion .notice-preview.discord-message-preview,
.notice-preview.discord-message-preview {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  padding: 18px;
  background: #313338;
  border: 0;
  border-radius: 10px;
  line-height: 1.55;
}
.discord-author-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(145deg, #00a579, #006754);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.discord-author-avatar img {
  width: 33px;
  height: 33px;
  object-fit: contain;
}
.discord-message-body {
  min-width: 0;
}
.discord-author-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  line-height: 1.5;
}
.discord-author-line > strong {
  font-size: 14px;
  color: #f2f3f5;
  font-weight: 650;
}
.discord-app-badge {
  background: #5865f2;
  color: white;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}
.discord-message-time {
  font-size: 10px;
  color: #949ba4;
  margin-left: 4px;
}
.discord-v2-container {
  background: #383a40;
  border: 1px solid #46484f;
  border-radius: 10px;
  padding: 18px 16px;
  color: #dbdee1;
}
.feature-editor-companion .discord-v2-container h3,
.discord-v2-container h3 {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 750;
  line-height: 1.4;
  color: #f2f3f5;
  overflow-wrap: anywhere;
}
.discord-message-content,
.discord-message-footer {
  font-size: 13px;
  line-height: 1.65;
  color: #dbdee1;
  overflow-wrap: anywhere;
}
.discord-message-content strong,
.discord-message-footer strong {
  font-weight: 750;
  color: #f2f3f5;
}
.discord-message-content code {
  background: #2b2d31;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 12px;
}
.feature-editor-companion .discord-v2-container hr,
.discord-v2-container hr {
  border: 0;
  border-top: 1px solid #4b4d54;
  margin: 18px 0;
}
.discord-footer-image {
  display: block;
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 6px;
}
.discord-message-body .notice-count-button {
  margin-top: 8px;
  background: #41434a;
  border: 1px solid #484a52;
  color: #f2f3f5;
  font-size: 12px;
  font-weight: 550;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 6px;
}
.discord-message-body .notice-count-button:hover {
  background: #4e5058;
  border-color: #5d606b;
}
@media (max-width: 600px) {
  .feature-editor-companion .notice-preview.discord-message-preview {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    padding: 12px;
  }
  .discord-author-avatar {
    width: 28px;
    height: 28px;
  }
  .discord-author-avatar img {
    width: 25px;
    height: 25px;
  }
  .discord-v2-container {
    padding: 14px 12px;
  }
  .feature-editor-companion .discord-v2-container h3 {
    font-size: 17px;
  }
}

.exemption-dropdown {
  position: relative;
  width: 100%;
}
.exemption-dropdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  padding: 11px 13px;
  background: #1b1e25;
  border: 1px solid #48505e;
  border-radius: 8px;
  font-size: 13px;
  color: #dce3ef;
}
.exemption-dropdown summary::-webkit-details-marker {
  display: none;
}
.exemption-dropdown summary svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}
.exemption-dropdown[open] summary svg {
  transform: rotate(180deg);
}
.exemption-dropdown summary:hover {
  border-color: #7d8799;
}
.exemption-dropdown summary:focus-visible {
  outline: 2px solid #f8d84c;
  outline-offset: 3px;
}
.feature-editor-workspace .exemption-dropdown .role-options {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 8;
  background: #252830;
  border-color: #596071;
  box-shadow: 0 10px 24px #0005;
  padding: 8px;
  max-height: 240px;
}
.exemption-dropdown .role-option:hover {
  background: #f8d84c12;
  border-radius: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .exemption-dropdown summary svg {
    transition: none;
  }
}

.selected-exempt-roles {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.exempt-role-chip {
  padding: 6px 10px;
  background: #f8d84c14;
  border: 1px solid #f8d84c35;
  border-radius: 6px;
  color: #f1db86;
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.exemption-empty {
  color: #a9b2c3;
  font-size: 12px;
}
.exemption-role-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 0;
  border-radius: 5px;
  text-align: left;
  color: #dce3ef;
  font-size: 12px;
  line-height: 1.5;
}
.exemption-role-option:hover:not(:disabled) {
  background: #f8d84c12;
}
.role-choice-action {
  color: #f8d84c;
  font-size: 11px;
  flex-shrink: 0;
}
.role-choice-action.remove {
  color: #f2a4a4;
}
.exemption-role-option:focus-visible {
  outline: 2px solid #f8d84c;
  outline-offset: -2px;
}

.feature-editor-workspace .exemption-dropdown .role-options {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  margin-top: 8px;
  width: 100%;
  max-height: 240px;
  box-shadow: none;
}
.exemption-role-option > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A consistent editor hierarchy: section headings, compact controls, message editor. */
.feature-editor-workspace .feature-card-stack {
  gap: 12px;
}
.feature-editor-workspace .feature-card-stack > .individual-feature {
  background: #22252c;
  border: 1px solid #363d48;
  border-radius: 10px;
  padding: 20px;
  box-shadow: none;
}
.feature-editor-workspace
  .feature-card-stack
  > .form-panel:not(.individual-feature) {
  padding: 0;
  margin: 0 0 6px;
}
.feature-editor-workspace
  .feature-card-stack
  > .form-panel:not(.individual-feature)
  h2 {
  font-size: 17px;
  font-weight: 650;
  line-height: 1.4;
  margin: 0 0 7px;
  color: #f0f2f6;
}
.feature-editor-workspace
  .feature-card-stack
  > .form-panel:not(.individual-feature)
  p {
  font-size: 12px;
  line-height: 1.65;
  color: #a7afbf;
}
.feature-editor-workspace .feature-disclosure {
  gap: 14px;
}
.feature-editor-workspace .feature-disclosure > header strong,
.feature-editor-workspace .toggle-row strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: #e9edf4;
}
.feature-editor-workspace .feature-disclosure > header small,
.feature-editor-workspace .toggle-row p {
  font-size: 12px;
  line-height: 1.6;
  color: #a7afbf;
  margin-top: 6px;
}
.feature-editor-workspace .compact-feature {
  padding: 18px 20px;
  min-height: 88px;
}
.feature-editor-workspace .compact-feature .toggle-row {
  width: 100%;
  min-height: 48px;
}
.feature-editor-workspace .channel-message-group {
  padding: 22px;
  gap: 20px;
  border-color: #5c5235;
  background: #25262b;
}
.feature-editor-workspace .channel-message-group h2 {
  font-size: 15px;
  font-weight: 650;
  border-color: #414047;
  padding-bottom: 14px;
  line-height: 1.5;
}
.feature-editor-workspace
  .channel-message-group
  .field
  > span:not(.themed-select) {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 8px;
}
.feature-editor-workspace .channel-message-group .field > small {
  font-size: 11px;
  color: #9fa8b9;
  line-height: 1.55;
  margin-top: 7px;
}
.feature-editor-workspace .field input[type="text"],
.feature-editor-workspace .field textarea,
.feature-editor-workspace .select-trigger,
.feature-editor-workspace .exemption-dropdown summary {
  background: #191c22;
  border-color: #404754;
  border-radius: 7px;
  min-height: 42px;
  padding: 10px 12px;
  font-size: 13px;
}
.feature-editor-workspace .field input[type="text"]:focus,
.feature-editor-workspace .field textarea:focus {
  outline: 2px solid #f8d84c55;
  border-color: #d8bc53;
}
.feature-editor-workspace .channel-message-group textarea {
  height: 160px;
  min-height: 130px;
  line-height: 1.65;
}
.feature-editor-workspace .selected-exempt-roles {
  margin-bottom: 12px;
}
.feature-editor-workspace .exempt-role-chip {
  font-size: 11px;
  padding: 5px 9px;
}
.feature-editor-content {
  gap: 36px;
}
.feature-editor-content .feature-editor-section + .feature-editor-section {
  padding-top: 28px;
  border-color: #343a44;
}
.feature-editor-companion .editor-preview-panel {
  padding: 22px;
  background: #22252c;
  border-color: #363d48;
  border-radius: 10px;
}
.feature-editor-companion .editor-side-label {
  margin-bottom: 8px;
}
.feature-editor-companion h2 {
  font-size: 16px;
  line-height: 1.45;
}
.feature-editor-companion .editor-preview-panel > p {
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 18px;
}

/* Unified settings panels: section headers and clean control rows. */
.feature-editor-workspace {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 32px;
}
.feature-editor-workspace .feature-card-stack,
.feature-editor-workspace #feature-response .feature-card-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 24px;
  background: #23262d;
  border: 1px solid #3b414c;
  border-radius: 14px;
  overflow: visible;
  box-shadow: 0 8px 24px #00000010;
}
.feature-editor-workspace
  .feature-card-stack
  > .form-panel:not(.individual-feature) {
  padding: 0 0 20px;
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #3b414c;
}
.feature-editor-workspace
  .feature-card-stack
  > .form-panel:not(.individual-feature)
  h2 {
  font-size: 18px;
  margin: 0 0 8px;
  letter-spacing: -0.2px;
}
.feature-editor-workspace .feature-card-stack > .individual-feature,
.feature-editor-workspace .feature-card-stack > .compact-feature {
  padding: 22px 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #373d48;
  border-radius: 0;
  box-shadow: none;
  min-height: 0;
}
.feature-editor-workspace .feature-card-stack > .individual-feature:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.feature-editor-workspace .feature-disclosure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
}
.feature-editor-workspace .feature-disclosure > header strong {
  font-size: 13px;
}
.feature-editor-workspace .feature-disclosure > header small {
  font-size: 11px;
  line-height: 1.6;
  margin-top: 6px;
}
.feature-editor-workspace .channel-message-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 24px;
}
.feature-editor-workspace .channel-message-group h2 {
  border: 0;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: #f4db80;
}
.feature-editor-workspace
  .channel-message-group
  .field
  > span:not(.themed-select) {
  font-size: 12px;
  color: #cdd4df;
}
.feature-editor-workspace
  .feature-card-stack
  > .wide-feature
  .feature-disclosure {
  grid-template-columns: 1fr;
  gap: 14px;
}
.feature-editor-workspace .toggle-row strong {
  font-size: 13px;
}
.feature-editor-workspace .toggle-row p {
  font-size: 11px;
  line-height: 1.6;
}
.feature-editor-workspace .compact-feature .toggle-row {
  min-height: 0;
}
.feature-editor-workspace
  .feature-card-stack
  > .individual-feature:has(.exemption-control)
  .feature-disclosure {
  grid-template-columns: 1fr;
  gap: 14px;
}
.feature-editor-content {
  gap: 24px;
}
.feature-editor-content .feature-editor-section + .feature-editor-section {
  padding-top: 0;
  border: 0;
}
.feature-editor-tabs {
  padding: 5px;
  background: #20232a;
  border-radius: 10px;
  border-color: #383f4a;
  box-shadow: none;
}
.feature-editor-tabs a {
  min-height: 40px;
  border-radius: 7px;
  font-size: 12px;
}
.feature-editor-companion .editor-preview-panel {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.feature-editor-companion .editor-side-label {
  color: #e9d27b;
  font-size: 10px;
  letter-spacing: 0.7px;
}
.feature-editor-companion h2 {
  font-size: 19px;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}
.feature-editor-companion .editor-preview-panel > p {
  max-width: 440px;
  font-size: 12px;
  margin-bottom: 20px;
}
.feature-editor-companion .notice-preview.discord-message-preview {
  padding: 20px;
  border: 1px solid #42444c;
  border-radius: 12px;
  box-shadow: 0 10px 30px #0002;
}
@media (max-width: 950px) {
  .feature-editor-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 600px) {
  .feature-editor-workspace .feature-card-stack,
  .feature-editor-workspace #feature-response .feature-card-stack {
    padding: 20px;
  }
  .feature-editor-workspace .feature-disclosure {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .feature-editor-workspace .feature-card-stack > .individual-feature {
    padding: 20px 0;
  }
}

.feature-editor-workspace
  .feature-card-stack
  > .form-panel:not(.individual-feature) {
  border-radius: 0;
  box-shadow: none;
}

/* A brighter Ban(ana) palette, shared across the dashboard and gateways. */
:root {
  --bg: #20232a;
  --panel: #2d323c;
  --line: #4c5463;
  --muted: #bdc6d5;
  --yellow: #ffe16b;
  --text: #f5f7fb;
  color-scheme: dark;
}
body,
.workspace,
body.gateway,
body.gateway .workspace {
  background: #20232a;
  color: #f5f7fb;
}
.feature-hub-layout .topbar,
.topbar {
  background: #292d35;
  border-color: #454c59;
}
.feature-hub-layout .hub-home > span,
.brand-accent {
  color: #ffe16b;
}
.feature-hub-layout main .page-heading p,
.overview-welcome p,
.overview-features-heading p {
  color: #bdc6d5;
}
.panel,
.form-panel,
.feature-editor-workspace .feature-card-stack,
.feature-editor-workspace #feature-response .feature-card-stack {
  background: #2d323c;
  border-color: #4b5362;
  box-shadow: 0 5px 18px #00000010;
}
.banana-feature-card,
.banana-feature-card.feature-active {
  background: #2d323c;
  border-color: #50596a;
}
.banana-feature-card.feature-active {
  border-color: #ffe16b;
  box-shadow:
    0 0 0 1px #ffe16b0a,
    0 8px 24px #0002;
}
.banana-feature-copy p {
  color: #c7cfde;
}
.banana-feature-card.feature-active .feature-status {
  background: #204736;
  color: #b4f1ce;
  border-color: #7edaaa30;
}
.verification-coming-soon,
.verification-coming-soon:hover {
  background: linear-gradient(145deg, #514936, #2d323c 75%);
  border-color: #89733d;
}
.overview-server-mark {
  background: #ffe16b20;
  border-color: #ffe16b55;
}
.overview-eyebrow {
  color: #ffe16b;
}
.overview-feature-count {
  background: #2d323c;
  border-color: #50596a;
  color: #d0d8e5;
}
.primary-button,
.feature-editor-tabs a.selected,
.feature-editor-tabs a.selected:hover {
  background: #ffe16b;
  border-color: #ffe16b;
  color: #29230e;
}
.ghost-button,
.banana-feature-footer .feature-demo-button {
  background: #3c4350;
  border-color: #5f6b7e;
  color: #eef2fa;
}
.header-profile .profile-menu {
  background: #303641;
  border-color: #566174;
  box-shadow: 0 12px 28px #0005;
}
.feature-editor-tabs {
  background: #2b3039;
  border-color: #4b5362;
  box-shadow: 0 4px 16px #00000018;
}
.feature-editor-tabs a {
  color: #d2d9e5;
}
.feature-editor-tabs a:hover {
  background: #ffe16b18;
  color: #ffeaa2;
  border-color: #ffe16b35;
}
.feature-editor-workspace
  .feature-card-stack
  > .form-panel:not(.individual-feature) {
  background: transparent;
  border-color: #4a5260;
}
.feature-editor-workspace .feature-card-stack > .individual-feature {
  background: transparent;
  border-color: #454e5d;
}
.feature-editor-workspace .feature-disclosure > header strong,
.feature-editor-workspace .toggle-row strong {
  font-size: 14px;
  color: #f3f5fa;
}
.feature-editor-workspace .feature-disclosure > header small,
.feature-editor-workspace .toggle-row p,
.feature-editor-workspace
  .feature-card-stack
  > .form-panel:not(.individual-feature)
  p {
  font-size: 12px;
  color: #bdc6d5;
}
.feature-editor-workspace .channel-message-group h2 {
  color: #ffe58a;
  font-size: 15px;
}
.feature-editor-workspace
  .channel-message-group
  .field
  > span:not(.themed-select) {
  font-size: 13px;
  color: #e0e6f0;
}
.feature-editor-workspace .channel-message-group .field > small {
  color: #b2bed0;
  font-size: 12px;
}
.feature-editor-workspace .field input[type="text"],
.feature-editor-workspace .field textarea,
.feature-editor-workspace .select-trigger,
.feature-editor-workspace .exemption-dropdown summary,
.select-trigger {
  background: #252a33;
  border-color: #576173;
  color: #edf2fa;
}
.select-popup,
.feature-editor-workspace .exemption-dropdown .role-options {
  background: #303744;
  border-color: #68758a;
}
.select-option {
  color: #d4ddec;
}
.select-option:hover,
.select-option:focus-visible {
  background: #424c5d;
  color: #fff0b3;
}
.exempt-role-chip {
  background: #ffe16b1c;
  border-color: #ffe16b45;
  color: #ffeaa2;
}
.exemption-empty {
  color: #bdc6d5;
}
.feature-editor-companion .editor-side-label {
  color: #ffe16b;
}
.feature-editor-companion .editor-preview-panel > p {
  color: #bdc6d5;
}
.feature-editor-companion .editor-preview-panel {
  background: transparent;
  box-shadow: none;
}
.welcome-card,
.welcome-logo {
  background:
    radial-gradient(ellipse at top, #ffe16b10, transparent 65%), #2d323c;
  border-color: #566174;
  box-shadow: 0 12px 35px #0002;
}
.welcome-eyebrow,
.welcome-card > small {
  color: #c4ccda;
}
.server-page-panel {
  background: #292f39;
  border-color: #505b6d;
}
.server-row {
  background: #343c49;
  border-color: #536075;
}
.server-row.current,
.server-row:hover {
  background: #ffe16b12;
  border-color: #ffe16b;
}
.server-page-search {
  background: #252c36;
  border-color: #5e6b80;
}
.server-info small,
.server-page-note {
  color: #c4ccda;
}
.page-loader {
  background:
    radial-gradient(ellipse at center, #ffe16b12, transparent 60%), #20232a;
}
.feature-hub-layout footer {
  color: #bdc6d5;
  border-color: #454c59;
}
.savebar {
  background: #303641;
  border-color: #ffe16b55;
  color: #f3f5fa;
}
.feature-editor-workspace .feature-disclosure {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 24px;
}
.feature-editor-workspace
  .feature-card-stack
  > .wide-feature
  .feature-disclosure,
.feature-editor-workspace
  .feature-card-stack
  > .individual-feature:has(.exemption-control)
  .feature-disclosure {
  grid-template-columns: 1fr;
}
@media (max-width: 600px) {
  .feature-editor-workspace .feature-disclosure {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Useful detail and a small icon give feature cards a clear visual hierarchy. */
.banana-feature-copy {
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}
.banana-feature-copy .feature-card-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 18px;
  max-width: none;
  margin-bottom: 10px;
}
.feature-title-icon {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #ffe16b18;
  color: #ffe16b;
}
.feature-title-icon svg {
  width: 17px;
  height: 17px;
}
.banana-feature-copy .feature-card-details {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.feature-card-details > span {
  font-size: 10px;
  line-height: 1.4;
  color: #aeb9cb;
}
.feature-card-details > strong {
  font-size: 11px;
  line-height: 1.4;
  color: #e1e8f3;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.banana-feature-card .banana-card-status-row {
  margin-bottom: 18px;
}
.banana-feature-card .banana-feature-footer {
  padding-top: 12px;
}
@media (max-width: 600px) {
  .banana-feature-copy .feature-card-title {
    font-size: 20px;
  }
  .banana-feature-copy .feature-card-details {
    padding-top: 16px;
  }
  .feature-card-details > span {
    font-size: 11px;
  }
  .feature-card-details > strong {
    font-size: 12px;
  }
}

/* Feature cards with a distinct identity and a compact configuration summary. */
.banana-feature-card {
  border-radius: 14px;
  box-shadow: 0 6px 20px #00000018;
  background: #2c323d;
}
.banana-feature-card.feature-active {
  border-color: #e8ca5a;
  box-shadow:
    inset 0 3px #ffe16b,
    0 6px 20px #00000018;
}
.banana-feature-copy {
  padding: 18px 18px 0;
}
.banana-feature-card .banana-card-status-row {
  margin-bottom: 18px;
}
.feature-card-identity {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}
.feature-card-identity .feature-title-icon {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  border-radius: 10px;
  background: #ffe16b1c;
  border: 1px solid #ffe16b30;
  color: #ffe16b;
}
.feature-card-identity .feature-title-icon svg {
  width: 21px;
  height: 21px;
}
.banana-feature-copy .feature-card-identity .feature-card-title {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.3px;
}
.banana-feature-copy > p {
  font-size: 12px;
  line-height: 1.6;
  color: #c4cede;
}
.banana-feature-copy .feature-card-details {
  margin-top: auto;
  padding: 10px 11px;
  background: #ffffff04;
  border: 1px solid #ffffff0c;
  border-radius: 7px;
  gap: 4px;
}
.feature-card-details > span {
  font-size: 9px;
  font-weight: 550;
  color: #afbbce;
}
.feature-card-details > strong {
  font-size: 11px;
  color: #edf1f8;
}
.banana-feature-card .banana-feature-footer {
  padding: 14px 18px 18px;
  gap: 8px;
  background: transparent;
}
.verification-coming-soon,
.verification-coming-soon:hover {
  background: linear-gradient(145deg, #514936, #2d323c 75%);
  box-shadow:
    inset 0 3px #b99b4a,
    0 6px 20px #00000018;
}
.verification-emblem {
  display: none;
}
@media (max-width: 600px) {
  .banana-feature-copy {
    padding: 22px 22px 0;
  }
  .banana-feature-card .banana-feature-footer {
    padding: 16px 22px 22px;
  }
  .banana-feature-copy .feature-card-identity .feature-card-title {
    font-size: 20px;
  }
  .banana-feature-copy > p {
    font-size: 13px;
  }
}

.banana-feature-card.feature-active,
.verification-coming-soon,
.verification-coming-soon:hover {
  box-shadow: 0 6px 20px #00000018;
}

/* Visual feature tiles: quiet background art and minimal foreground content. */
.banana-feature-card {
  isolation: isolate;
  background: #2c323d;
  box-shadow: 0 6px 20px #00000018;
}
.banana-feature-card::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/assets/banana-logo-clean.png") no-repeat 95% 64%/72%;
  opacity: 0.11;
  filter: saturate(0.85);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.banana-feature-card:hover::before {
  opacity: 0.16;
}
.banana-feature-card::after {
  display: none;
}
.verification-coming-soon::before {
  background-image: url("/assets/verification-shield.svg?v=8");
  background-position: 96% 66%;
  background-size: 65%;
  opacity: 0.12;
}
.feature-card-identity {
  margin-bottom: 12px;
}
.feature-card-identity .feature-title-icon {
  display: none;
}
.banana-feature-copy .feature-card-identity .feature-card-title {
  font-size: 21px;
  letter-spacing: -0.5px;
}
.banana-feature-copy {
  position: relative;
  z-index: 1;
  padding: 20px 20px 0;
}
.banana-feature-copy > p {
  color: #d0d8e5;
  max-width: none;
  font-size: 12px;
  line-height: 1.65;
}
.banana-feature-copy .feature-card-details {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-top: auto;
  gap: 5px;
}
.feature-card-details > span {
  font-size: 10px;
  color: #b6c2d4;
}
.feature-card-details > strong {
  font-size: 11px;
  color: #e9eef7;
}
.banana-feature-card .banana-feature-footer {
  position: relative;
  z-index: 1;
  padding: 16px 20px 20px;
  background: transparent;
  border: 0;
}
.banana-feature-card .banana-card-status-row {
  margin-bottom: 22px;
}
@media (max-width: 600px) {
  .banana-feature-copy {
    padding: 22px 22px 0;
  }
  .banana-feature-card .banana-feature-footer {
    padding: 16px 22px 22px;
  }
  .banana-feature-copy .feature-card-identity .feature-card-title {
    font-size: 23px;
  }
  .banana-feature-copy > p {
    font-size: 13px;
  }
}

/* Oversized feature artwork enters from the bottom-right corner. */
.banana-feature-card::before {
  inset: auto;
  right: -24%;
  bottom: -22%;
  width: 105%;
  height: 105%;
  background-image: url("/assets/account-catcher-security.svg?v=8");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.1;
  filter: none;
}
.verification-coming-soon::before {
  background-image: url("/assets/verification-shield.svg?v=8");
  right: -27%;
  bottom: -25%;
  width: 110%;
  height: 110%;
  background-position: center;
  background-size: contain;
  opacity: 0.11;
}
.banana-feature-card:hover::before {
  opacity: 0.15;
}

.verification-coming-soon::before {
  width: 105%;
  height: 105%;
}

.banana-feature-card::before {
  opacity: 0.15;
}
.verification-coming-soon::before {
  opacity: 0.16;
}
.banana-feature-card:hover::before {
  opacity: 0.2;
}
.banana-feature-card::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/assets/card-spray-texture.svg") center/cover no-repeat;
  opacity: 0.07;
  pointer-events: none;
}

.banana-feature-card::after {
  display: none;
}
.banana-feature-card::before,
.verification-coming-soon::before {
  opacity: 0.13;
}
.banana-feature-card:hover::before {
  opacity: 0.17;
}

.banana-feature-card::before,
.verification-coming-soon::before {
  right: -21%;
  bottom: -23%;
  width: 108%;
  height: 108%;
  opacity: 0.16;
}
.banana-feature-card:hover::before {
  opacity: 0.2;
}

/* Soft 3D feature artwork, oversized and cropped into the corner. */
.banana-feature-card::before {
  background-image: url("/assets/account-catcher-3d-v3.png");
  right: -26%;
  bottom: -24%;
  width: 108%;
  height: 108%;
  opacity: 0.2;
  filter: none;
  background-size: contain;
  background-position: center;
}
.banana-feature-card:hover::before {
  opacity: 0.26;
}

.verification-coming-soon::before {
  background-image: url("/assets/verification-3d-v2.png");
  opacity: 0.2;
}
.verification-coming-soon:hover::before {
  opacity: 0.26;
}

.verification-coming-soon::before {
  width: 90%;
  height: 90%;
  right: -18%;
  bottom: -18%;
}

body .banana-feature-footer .feature-setup-button {
  background: #3c4350;
  border-color: #5f6b7e;
  color: #eef2fa;
  box-shadow: none;
}
body .banana-feature-footer .feature-setup-button svg {
  color: inherit;
}
body .banana-feature-footer .feature-setup-button:not(:disabled):hover {
  background: #ffe16b;
  border-color: #ffe16b;
  color: #29230e;
  box-shadow: none;
}

.banana-feature-card::before,
.verification-coming-soon::before {
  right: auto;
  bottom: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-position: center;
}

.banana-feature-card::before,
.verification-coming-soon::before {
  width: 90%;
  height: 90%;
  background-size: contain;
}

body
  .banana-feature-footer
  .primary-button:not(.feature-setup-button):not(:disabled):hover {
  background: #ffe987;
  border-color: #ffed9b;
  color: #29230e;
  box-shadow: none;
}

body
  .banana-feature-footer
  .primary-button:not(.feature-setup-button):not(:disabled):hover {
  background: #f5d75d;
  border-color: #f8df79;
  color: #29230e;
  box-shadow: none;
}

body .banana-feature-footer .primary-button:not(.feature-setup-button),
body
  .banana-feature-footer
  .primary-button:not(.feature-setup-button):not(:disabled):hover {
  background: linear-gradient(135deg, #ffe475, #f8d84c);
  border-color: #ffe78b;
  color: #29230e;
  box-shadow: none;
  transform: none;
}

body .banana-feature-footer .primary-button:not(.feature-setup-button) {
  filter: brightness(1);
  transition: filter 0.16s ease;
}
body
  .banana-feature-footer
  .primary-button:not(.feature-setup-button):not(:disabled):hover {
  filter: brightness(1.035);
}
@media (prefers-reduced-motion: reduce) {
  body .banana-feature-footer .primary-button:not(.feature-setup-button) {
    transition: none;
  }
}

.banana-feature-card {
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}
.banana-feature-card:hover {
  transform: none;
  background: #303743;
  border-color: #b9a150;
  box-shadow: 0 6px 20px #00000018;
}
.banana-feature-card.feature-active:hover {
  border-color: #ffe16b;
  box-shadow:
    0 0 18px #ffe16b0d,
    0 6px 20px #00000018;
}
.verification-coming-soon:hover {
  transform: none;
  background: linear-gradient(145deg, #564e39, #303743 75%);
  border-color: #9a844d;
  box-shadow: 0 6px 20px #00000018;
}

.banana-feature-card:not(.verification-coming-soon):hover {
  background: #414650;
  border-color: #727b8b;
  transform: none;
  box-shadow: 0 6px 20px #00000018;
}
.banana-feature-card.feature-active:not(.verification-coming-soon):hover {
  border-color: #ffe16b;
  box-shadow: 0 6px 20px #00000018;
}

.banana-feature-card:not(.verification-coming-soon):hover {
  background: linear-gradient(145deg, #564e39, #303743 75%);
  border-color: #9a844d;
  transform: none;
  box-shadow: 0 6px 20px #00000018;
}
.banana-feature-card.feature-active:not(.verification-coming-soon):hover {
  border-color: #ffe16b;
  box-shadow: 0 6px 20px #00000018;
}

/* Frosted header blends into the dashboard without a hard divider. */
.feature-hub-layout .topbar {
  background: rgba(41, 45, 53, 0.48);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  border-bottom: 0;
  box-shadow: none;
}
@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .feature-hub-layout .topbar {
    background: rgba(41, 45, 53, 0.8);
  }
}

/* Refined account control and a lightweight frosted dropdown. */
.feature-hub-layout .header-account {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px 6px 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #e8edf5;
  line-height: 1.4;
  transition:
    background 0.16s,
    border-color 0.16s;
}
.feature-hub-layout .header-account:hover,
.feature-hub-layout .header-profile[open] .header-account {
  background: #ffffff08;
  border-color: #ffffff10;
  color: #f5f7fb;
}
.feature-hub-layout .header-account .header-avatar {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  background: transparent;
  box-shadow: 0 0 0 1px #ffffff18;
}
.feature-hub-layout .header-account #header-user-name {
  font-size: 12px;
  font-weight: 550;
}
.feature-hub-layout .header-account .account-chevron {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  margin-left: 4px;
  color: #aeb9cc;
}
.header-profile .profile-menu {
  top: calc(100% + 10px);
  min-width: 200px;
  padding: 8px;
  background: rgba(43, 49, 59, 0.96);
  border: 1px solid #59627370;
  border-radius: 12px;
  box-shadow: 0 12px 30px #0005;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.header-profile .profile-menu .ghost-button {
  gap: 11px;
  padding: 11px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 12px;
  color: #d7dfed;
  box-shadow: none;
}
.header-profile .profile-menu .ghost-button svg {
  width: 17px;
  height: 17px;
  color: #adbbd0;
}
body .header-profile .profile-menu .ghost-button:not(:disabled):hover {
  background: #ffe16b12;
  border-color: #ffe16b20;
  color: #ffe898;
}
.header-profile .profile-menu .ghost-button:hover svg {
  color: inherit;
}
.header-profile .profile-menu .ghost-button + #header-signout {
  margin-top: 8px;
}

.feature-hub-layout .header-account #header-user-name,
.feature-hub-layout .header-account .account-chevron {
  display: none;
}
.feature-hub-layout .header-account {
  padding: 4px;
  min-height: 40px;
  width: 40px;
  justify-content: center;
  gap: 0;
  border-radius: 50%;
}
.feature-hub-layout .header-account .header-avatar {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
}

.header-profile .profile-menu {
  min-width: 210px;
  padding: 8px;
  background: rgba(40, 46, 56, 0.95);
  border: 1px solid #ffffff12;
  border-radius: 14px;
  box-shadow:
    0 16px 40px #00000045,
    inset 0 1px #ffffff06;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.header-profile .profile-menu .ghost-button {
  min-height: 44px;
  padding: 12px 14px;
  gap: 12px;
  border: 0;
  border-radius: 8px;
  font-size: 13px;
  color: #e3e9f3;
  transition:
    background 0.15s,
    color 0.15s;
}
.header-profile .profile-menu .ghost-button svg {
  width: 18px;
  height: 18px;
  color: #b9c5d9;
}
body .header-profile .profile-menu .ghost-button:not(:disabled):hover {
  background: #ffe16b12;
  color: #ffe898;
  border: 0;
}
.header-profile .profile-menu .ghost-button + #header-signout {
  margin-top: 8px;
}
body .header-profile .profile-menu #header-signout:not(:disabled):hover {
  background: #ed8d8d12;
  color: #ffb6b6;
}
.header-profile .profile-menu #header-signout:hover svg {
  color: #ffb6b6;
}

/* Compact, text-only account menu. */
.header-profile .profile-menu {
  min-width: 170px;
  padding: 6px;
  background: #2d323c;
  border: 1px solid #4a5260;
  border-radius: 9px;
  box-shadow: 0 8px 24px #00000035;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.header-profile .profile-menu .ghost-button {
  min-height: 38px;
  padding: 10px 12px;
  border-radius: 5px;
  background: transparent;
  border: 0;
  color: #e5eaf2;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
body .header-profile .profile-menu .ghost-button:not(:disabled):hover {
  background: #3b424e;
  color: #f5f7fb;
  border: 0;
}
.header-profile .profile-menu .ghost-button + #header-signout {
  margin-top: 6px;
  position: relative;
}
.header-profile .profile-menu #header-signout::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: -3px;
  height: 1px;
  background: #ffffff0d;
}
body .header-profile .profile-menu #header-signout:not(:disabled):hover {
  background: #3b424e;
  color: #f5f7fb;
}

.feature-hub-layout .header-account,
.feature-hub-layout .header-account:hover,
.feature-hub-layout .header-profile[open] .header-account {
  background: transparent;
  border-color: transparent;
  color: #e8edf5;
  box-shadow: none;
  transform: none;
  transition: none;
}

.header-user-control {
  display: flex;
  align-items: center;
  gap: 10px;
}
.feature-hub-layout .header-user-control > #header-user-name {
  display: none;
}
.header-user-control > .header-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 50%;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}
.feature-hub-layout .header-user-control .header-account {
  width: 30px;
  min-height: 30px;
  padding: 5px;
  border-radius: 6px;
  border: 1px solid #ffffff12;
  background: #ffffff04;
  color: #cbd4e3;
  list-style: none;
}
.header-user-control .header-account::-webkit-details-marker {
  display: none;
}
.header-user-control .account-menu-dots {
  display: block;
  width: 18px;
  height: 18px;
}
.feature-hub-layout .header-user-control .header-account:hover,
.feature-hub-layout .header-user-control .header-profile[open] .header-account {
  background: #ffffff08;
  border-color: #ffffff20;
  color: #eef2f8;
  transform: none;
}

.feature-hub-layout .top-actions > .header-user-control {
  display: flex;
}

.header-user-control {
  gap: 10px;
}
.feature-hub-layout .header-user-control .header-direct-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 7px;
  background: #ffffff05;
  border: 1px solid #ffffff16;
  color: #dce3ee;
  font-size: 12px;
  font-weight: 500;
}
body .feature-hub-layout .header-user-control .header-direct-action:hover {
  background: #ffffff0c;
  border-color: #ffffff25;
  color: #f5f7fb;
}
.header-user-control > .header-avatar {
  margin-left: 4px;
}
@media (max-width: 600px) {
  .header-user-control {
    gap: 6px;
  }
  .feature-hub-layout .header-user-control .header-direct-action {
    font-size: 10px;
    padding: 7px 8px;
  }
  .header-user-control > .header-avatar {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    margin-left: 2px;
  }
  .feature-hub-layout .topbar {
    gap: 10px;
  }
  .feature-hub-layout .hub-home,
  .feature-hub-layout .hub-home small {
    font-size: 16px;
  }
}

.feature-hub-layout .header-user-control {
  gap: 10px;
}
.feature-hub-layout .header-user-control > .header-avatar {
  margin-left: 0;
}
body .feature-hub-layout .header-user-control .header-direct-action:hover {
  background: #414650;
  border-color: #727b8b;
  color: #f5f6fa;
  box-shadow: none;
  transform: none;
}
@media (max-width: 600px) {
  .feature-hub-layout .header-user-control {
    gap: 8px;
  }
  .feature-hub-layout .header-user-control > .header-avatar {
    margin-left: 0;
  }
}

/* Shared interaction palette for Demo and the two header actions. */
body .banana-feature-footer .feature-demo-button,
body .feature-hub-layout .header-user-control .header-direct-action {
  background: #3c4350;
  border-color: #5f6b7e;
  color: #eef2fa;
  box-shadow: none;
  transform: none;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}
body .banana-feature-footer .feature-demo-button:not(:disabled):hover,
body
  .feature-hub-layout
  .header-user-control
  .header-direct-action:not(:disabled):hover {
  background: #414650;
  border-color: #727b8b;
  color: #f5f6fa;
  box-shadow: none;
  transform: none;
}

body .banana-feature-footer .feature-setup-button,
body .banana-feature-footer .feature-setup-button:not(:disabled):hover {
  transform: none;
  box-shadow: none;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}
body .banana-feature-footer .feature-setup-button:not(:disabled):hover {
  background: #ffe16b;
  border-color: #ffe16b;
  color: #29230e;
}

/* Gateways share the feature dashboard's surfaces, header and interaction style. */
body.gateway,
body.gateway .workspace {
  background: #20232a;
  color: #f5f7fb;
}
body.gateway .gateway-top {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 64px;
  padding: 0 24px;
  margin: 0;
  background: rgba(41, 45, 53, 0.48);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  border: 0;
  z-index: 10;
}
.gateway-top .wordmark-button {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 23px;
  padding: 0;
  letter-spacing: -0.6px;
}
.gateway-top .wordmark {
  font-size: 23px;
}
.gateway-dashboard-label {
  font-size: 23px;
  font-weight: 750;
  color: #f4f5fa;
}
.gateway-top .wordmark > span {
  color: #ffe16b;
}
body.gateway main {
  max-width: 1240px;
  padding: 108px 24px 48px;
  margin: 0 auto;
  width: 100%;
}
body.gateway:not(.server-gateway) main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}
.landing-reference {
  width: 100%;
}
.welcome-grid {
  max-width: 940px;
  margin: auto;
  gap: 24px;
  min-height: 0;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.welcome-card,
.welcome-logo {
  border-radius: 14px;
  background: #2d323c;
  border: 1px solid #50596a;
  box-shadow: 0 6px 20px #00000018;
  padding: 36px;
}
.welcome-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.welcome-card .wordmark {
  font-size: 46px;
}
.welcome-card .welcome-eyebrow {
  font-size: 12px !important;
  letter-spacing: 3px !important;
  color: #bdc6d5;
  margin: 12px 0 28px;
}
.welcome-card .primary-button,
.welcome-card .ghost-button {
  border-radius: 8px;
  min-height: 46px;
  padding: 13px 16px;
  font-size: 14px;
  box-shadow: none;
  transform: none;
  justify-content: space-between;
}
.welcome-card .primary-button {
  background: linear-gradient(135deg, #ffe475, #f8d84c);
  border-color: #ffe78b;
  color: #29230e;
  transition: filter 0.16s ease;
}
.welcome-card .primary-button:hover {
  background: linear-gradient(135deg, #ffe475, #f8d84c);
  filter: brightness(1.035);
  box-shadow: none;
  transform: none;
}
.welcome-card .ghost-button {
  background: #3c4350;
  border-color: #5f6b7e;
  color: #eef2fa;
}
.welcome-card .ghost-button:hover {
  background: #414650;
  border-color: #727b8b;
  color: #f5f6fa;
  transform: none;
  box-shadow: none;
}
.welcome-card small {
  font-size: 11px;
  line-height: 1.65;
  color: #b6c2d4;
  margin-top: 22px;
}
.welcome-logo {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #514936, #2d323c 75%);
  border-color: #89733d;
}
.welcome-logo img {
  width: 100%;
  max-width: 330px;
  filter: none;
}
.server-page-heading {
  text-align: left;
  margin: 0 0 28px;
}
.server-page-heading h1 {
  font-size: 28px;
  letter-spacing: -0.7px;
  color: #f5f7fb;
  margin: 0 0 10px;
}
.server-page-heading p {
  font-size: 14px;
  color: #bdc6d5;
  margin: 0;
  line-height: 1.6;
}
.server-page-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
.server-page-search {
  background: #2d323c;
  border: 1px solid #50596a;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 24px;
  min-height: 50px;
}
.server-page-search input[type="text"] {
  font-size: 13px;
  color: #edf2fa;
}
#page-server-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.server-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: start;
  align-items: center;
  gap: 16px 12px;
  margin: 0;
  padding: 22px;
  min-height: 200px;
  background: #2d323c;
  border: 1px solid #50596a;
  border-radius: 14px;
  box-shadow: 0 6px 20px #00000018;
  text-align: left;
  transition:
    background 0.18s,
    border-color 0.18s;
  transform: none;
}
.server-row.current {
  border-color: #ffe16b;
  background: #2d323c;
}
.server-row:hover,
.server-row.current:hover {
  background: linear-gradient(145deg, #564e39, #303743 75%);
  border-color: #ffe16b;
  box-shadow: 0 6px 20px #00000018;
  transform: none;
}
.server-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 15px;
  background: #ffe16b14;
  color: #ffe58a;
  border: 1px solid #ffe16b25;
}
.server-info {
  min-width: 0;
}
.server-info strong {
  font-size: 15px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.server-info small {
  font-size: 11px;
  color: #bdc6d5;
  margin-top: 5px;
}
.server-access {
  grid-column: 1/-1;
  font-size: 11px;
  color: #bdc6d5;
  display: flex;
  align-items: center;
  gap: 8px;
}
.server-open,
.server-row:hover .server-open {
  grid-column: 1/-1;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #3c4350;
  border: 1px solid #5f6b7e;
  color: #eef2fa;
  border-radius: 8px;
  font-size: 12px;
  box-shadow: none;
}
.server-row:hover .server-open {
  background: #414650;
  border-color: #727b8b;
}
.server-open svg {
  width: 15px;
  height: 15px;
}
.server-page-note {
  text-align: left;
  font-size: 11px;
  line-height: 1.6;
  color: #b6c2d4;
  margin-top: 24px;
}
@media (max-width: 850px) {
  #page-server-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  body.gateway .gateway-top {
    padding: 0 16px;
  }
  .gateway-top .wordmark,
  .gateway-dashboard-label {
    font-size: 18px;
  }
  .welcome-grid {
    grid-template-columns: 1fr;
    max-width: 430px;
  }
  .welcome-card,
  .welcome-logo {
    padding: 26px;
  }
  .welcome-logo {
    max-height: 260px;
  }
  .welcome-logo img {
    max-width: 220px;
  }
  .welcome-card .wordmark {
    font-size: 38px;
  }
  body.gateway main {
    padding: 96px 20px 32px;
  }
  #page-server-results {
    grid-template-columns: 1fr;
  }
  .server-row {
    min-height: 190px;
  }
}

body.gateway .gateway-top {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  max-height: 64px;
  margin-top: 0;
}
body.gateway .gateway-top #gateway-account {
  position: static;
  font-size: 12px;
  padding: 8px 12px;
  opacity: 1;
  background: #3c4350;
  border-color: #5f6b7e;
  color: #eef2fa;
}
body.gateway .gateway-top #gateway-account:hover {
  background: #414650;
  border-color: #727b8b;
  color: #f5f6fa;
}
body.gateway .welcome-grid {
  max-width: 940px;
  width: 100%;
  min-height: 0;
  gap: 24px;
}
body.gateway .server-page-heading h1 {
  text-transform: none;
  letter-spacing: -0.7px;
}

/* The landing and server pages now use the overview's card layout. */
body.gateway .workspace {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.gateway main,
body.gateway:not(.server-gateway) main {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  max-width: 1240px;
  min-height: 0;
  padding: 112px 24px 48px;
  gap: 0;
  width: 100%;
  margin: 0 auto;
}
body.gateway .gateway-welcome {
  padding: 0 0 32px;
  margin: 0 0 32px;
  border-bottom: 1px solid #ffffff10;
  gap: 24px;
}
.gateway-welcome h1 {
  font-size: 28px;
  letter-spacing: -0.7px;
  margin: 0;
  line-height: 1.3;
}
.gateway-welcome p {
  font-size: 14px;
  color: #bdc6d5;
  margin: 8px 0 0;
  line-height: 1.6;
}
body.gateway .overview-features-heading {
  margin-bottom: 32px;
}
.gateway-brand-image {
  background: #ffe16b14;
  border-radius: 16px;
}
.gateway-brand-image img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}
.gateway-feature-grid,
#page-server-results.gateway-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.gateway-action-card,
.dashboard-server-card {
  aspect-ratio: 1;
  min-height: 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #2d323c;
  border: 1px solid #50596a;
  border-radius: 14px;
  box-shadow: 0 6px 20px #00000018;
  transition:
    background 0.18s,
    border-color 0.18s;
  overflow: hidden;
  color: #f5f7fb;
  text-align: left;
}
.gateway-action-card:hover,
.dashboard-server-card:hover {
  background: linear-gradient(145deg, #564e39, #303743 75%);
  border-color: #9a844d;
  transform: none;
  box-shadow: 0 6px 20px #00000018;
}
.dashboard-server-card.current {
  border-color: #ffe16b;
}
.gateway-card-tag {
  align-self: flex-start;
  display: inline-flex;
  padding: 5px 9px;
  border-radius: 20px;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 600;
  background: #ffe16b12;
  border: 1px solid #ffe16b25;
  color: #e9d891;
}
.gateway-action-card h2 {
  font-size: 21px;
  letter-spacing: -0.5px;
  line-height: 1.3;
  margin: 22px 0 12px;
}
.gateway-action-card p {
  font-size: 12px;
  line-height: 1.65;
  color: #c4cede;
  margin: 0;
}
.gateway-card-footer {
  margin-top: auto;
  position: relative;
  z-index: 1;
  padding-top: 16px;
}
.gateway-card-footer > .primary-button,
.gateway-card-footer > .ghost-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 9px 11px;
  font-size: 11px;
  border-radius: 8px;
  transform: none;
  box-shadow: none;
}
.gateway-card-footer .primary-button {
  background: linear-gradient(135deg, #ffe475, #f8d84c);
  border-color: #ffe78b;
  color: #29230e;
  transition: filter 0.16s;
}
.gateway-card-footer .primary-button:hover {
  background: linear-gradient(135deg, #ffe475, #f8d84c);
  filter: brightness(1.035);
  transform: none;
  box-shadow: none;
}
.gateway-card-footer svg {
  width: 14px;
  height: 14px;
}
.gateway-invite-card::before {
  content: "";
  position: absolute;
  width: 90%;
  height: 90%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url("/assets/banana-logo-clean.png") center/contain no-repeat;
  opacity: 0.1;
  pointer-events: none;
}
.gateway-invite-card > h2,
.gateway-invite-card > p,
.gateway-invite-card > .gateway-card-tag {
  position: relative;
  z-index: 1;
}
.server-card-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 22px;
}
.server-card-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 650;
  background: #ffe16b14;
  border: 1px solid #ffe16b25;
  color: #ffe58a;
  flex-shrink: 0;
}
.server-card-title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.4px;
  overflow-wrap: anywhere;
}
.server-card-description {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.65;
  color: #c4cede;
}
.server-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid #5f6b7e;
  border-radius: 8px;
  background: #3c4350;
  color: #eef2fa;
  font-size: 11px;
  line-height: 1.4;
}
.server-card-footer svg {
  width: 14px;
  height: 14px;
}
.dashboard-server-card:hover .server-card-footer {
  background: #414650;
  border-color: #727b8b;
  color: #f5f6fa;
}
.gateway-search {
  display: flex;
  align-items: center;
  background: #2d323c;
  border: 1px solid #50596a;
  border-radius: 8px;
  width: 260px;
  padding: 0 6px 0 12px;
  min-height: 40px;
}
.gateway-search input[type="text"] {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 8px 0;
  font-size: 12px;
  color: #edf2fa;
}
.gateway-search .icon-button {
  font-size: 18px;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
body.gateway footer {
  display: flex;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 24px;
  border-top: 1px solid #454c59;
  color: #bdc6d5;
  font-size: 11px;
}
@media (max-width: 1100px) {
  .gateway-feature-grid,
  #page-server-results.gateway-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 850px) {
  .gateway-feature-grid,
  #page-server-results.gateway-feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  body.gateway main,
  body.gateway:not(.server-gateway) main {
    padding: 96px 20px 32px;
  }
  .gateway-feature-grid,
  #page-server-results.gateway-feature-grid {
    grid-template-columns: 1fr;
    max-width: 340px;
  }
  .gateway-server-search-row {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }
  .gateway-search {
    width: 100%;
  }
  .gateway-welcome h1 {
    font-size: 23px;
  }
  .gateway-welcome p {
    font-size: 13px;
  }
  .gateway-action-card h2,
  .server-card-title {
    font-size: 23px;
  }
}

/* One shared header, with distinct landing and server-selection layouts. */
body.gateway .topbar {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 64px;
  padding: 0 24px;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  background: rgba(41, 45, 53, 0.48);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
  border: 0;
  box-shadow: none;
  z-index: 10;
}
body.gateway .topbar .hub-home {
  display: flex;
  align-items: center;
  background: transparent;
  border: 0;
  color: #f4f5fa;
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -0.6px;
  padding: 0;
  white-space: nowrap;
}
body.gateway .hub-home > span {
  color: #ffe16b;
}
body.gateway .hub-home small {
  display: inline;
  font-size: 23px;
  font-weight: 750;
  letter-spacing: -0.6px;
  color: #f4f5fa;
  margin-left: 7px;
  padding-left: 0;
  border: 0;
}
body.gateway .topbar .breadcrumbs,
body.gateway .topbar .hub-back,
body.gateway .top-actions > :not(.header-user-control) {
  display: none;
}
body.gateway .top-actions,
body.gateway .top-actions > .header-user-control {
  display: flex;
  align-items: center;
}
body.gateway .header-user-control > .header-avatar {
  margin: 0;
}
.gateway #header-user-name {
  display: none;
}
body.gateway .header-direct-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 7px;
  background: #3c4350;
  border: 1px solid #5f6b7e;
  color: #eef2fa;
  font-size: 12px;
  font-weight: 500;
  transition:
    background 0.16s,
    border-color 0.16s,
    color 0.16s;
}
body.gateway .header-direct-action:hover {
  background: #414650;
  border-color: #727b8b;
  color: #f5f6fa;
  transform: none;
  box-shadow: none;
}
body.gateway.signed-out .top-actions > .header-user-control {
  display: none;
}
.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
  padding: 40px 0;
}
.landing-hero-copy h1 {
  font-size: 48px;
  line-height: 1.16;
  letter-spacing: -1.7px;
  color: #f5f7fb;
  margin: 18px 0 22px;
  font-weight: 750;
}
.landing-hero-copy > p {
  font-size: 16px;
  line-height: 1.75;
  max-width: 480px;
  color: #c4cede;
  margin: 0 0 30px;
}
.landing-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.landing-hero-actions .primary-button,
.landing-hero-actions .ghost-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 46px;
  padding: 13px 18px;
  border-radius: 8px;
  font-size: 13px;
  transform: none;
  box-shadow: none;
}
.landing-hero-actions .invite-plus {
  display: none;
}
.landing-hero-actions svg {
  width: 16px;
  height: 16px;
}
.landing-hero-copy > small {
  display: block;
  margin-top: 22px;
  font-size: 12px;
  color: #aebace;
}
.landing-hero-art {
  display: grid;
  place-items: center;
  min-height: 350px;
  background: radial-gradient(ellipse, #ffe16b14, transparent 68%);
}
.landing-hero-art img {
  width: 100%;
  max-width: 380px;
  transform: rotate(-8deg);
  filter: drop-shadow(0 20px 22px #0002);
}
.server-selector-workspace {
  width: 100%;
  max-width: 900px;
  margin: auto;
}
.server-selector-heading {
  text-align: center;
  margin-bottom: 28px;
}
.server-selector-heading h1 {
  margin: 12px 0 10px;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: -0.8px;
}
.server-selector-heading p {
  margin: 0;
  color: #bdc6d5;
  font-size: 14px;
  line-height: 1.6;
}
.server-selector-search {
  width: 100%;
  margin-bottom: 22px;
  min-height: 48px;
  padding-left: 16px;
}
.server-selector-search input[type="text"] {
  font-size: 13px;
}
#page-server-results.server-selector-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.server-selector-list .dashboard-server-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px 18px;
  aspect-ratio: auto;
  min-height: 98px;
  padding: 20px 22px;
  border-radius: 12px;
  background: #2d323c;
}
.server-selector-list .server-card-status-row {
  display: contents;
}
.server-selector-list .server-card-avatar {
  grid-column: 1;
  grid-row: 1/3;
  width: 44px;
  height: 44px;
  font-size: 14px;
  border-radius: 12px;
}
.server-selector-list .gateway-card-tag {
  display: none;
}
.server-selector-list .server-card-title {
  grid-column: 2;
  grid-row: 1;
  font-size: 17px;
  letter-spacing: -0.2px;
}
.server-selector-list .server-card-description {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  font-size: 12px;
}
.server-selector-list .server-card-footer {
  grid-column: 3;
  grid-row: 1/3;
  margin: 0;
  gap: 20px;
  font-size: 12px;
  padding: 11px 14px;
}
.server-selector-list .dashboard-server-card:hover {
  background: linear-gradient(120deg, #ffe16b0c, #303743);
  border-color: #9a844d;
  transform: none;
}
@media (max-width: 850px) {
  .landing-hero {
    gap: 28px;
  }
  .landing-hero-copy h1 {
    font-size: 38px;
  }
  .landing-hero-art img {
    max-width: 290px;
  }
}
@media (max-width: 600px) {
  body.gateway .topbar {
    padding: 0 16px;
    gap: 10px;
  }
  body.gateway .topbar .hub-home,
  body.gateway .hub-home small {
    font-size: 16px;
  }
  body.gateway .header-direct-action {
    font-size: 10px;
    padding: 7px 8px;
  }
  body.gateway .header-user-control {
    gap: 8px;
  }
  .landing-hero {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 10px 0;
  }
  .landing-hero-copy h1 {
    font-size: 35px;
  }
  .landing-hero-copy > p {
    font-size: 14px;
  }
  .landing-hero-art {
    min-height: 220px;
    order: -1;
  }
  .landing-hero-art img {
    max-width: 210px;
  }
  .server-selector-list .dashboard-server-card {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 18px;
    gap: 8px 12px;
  }
  .server-selector-list .server-card-avatar {
    width: 38px;
    height: 38px;
  }
  .server-selector-list .server-card-footer {
    grid-column: 1/-1;
    grid-row: 3;
    justify-content: space-between;
    margin-top: 8px;
  }
  .server-selector-heading h1 {
    font-size: 27px;
  }
}

/* A focused landing portal and a compact two-column server picker. */
.landing-portal {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 650px;
  width: 100%;
  margin: auto;
  padding: 32px 0 48px;
}
.landing-portal-logo {
  display: grid;
  place-items: center;
  width: 138px;
  height: 138px;
  margin-bottom: 20px;
  background: radial-gradient(ellipse, #ffe16b15, transparent 68%);
}
.landing-portal-logo img {
  width: 124px;
  height: 124px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px #0002);
}
.landing-portal h1 {
  margin: 14px 0 12px;
  line-height: 1.2;
}
.landing-portal .wordmark {
  font-size: 56px;
  letter-spacing: -2px;
  font-weight: 750;
}
.landing-portal h1 .wordmark > span {
  color: #ffe16b;
}
.landing-portal > p {
  font-size: 16px;
  color: #bdc6d5;
  margin: 0 0 32px;
  line-height: 1.6;
}
.landing-portal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  width: 100%;
}
.landing-portal-actions > .primary-button,
.landing-portal-actions > .ghost-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-width: 190px;
  min-height: 46px;
  padding: 13px 18px;
  font-size: 13px;
  border-radius: 8px;
  transform: none;
  box-shadow: none;
}
.landing-portal-actions .invite-plus {
  display: none;
}
.landing-portal-actions svg {
  width: 16px;
  height: 16px;
}
.server-selector-workspace {
  max-width: 860px;
}
.server-selector-heading {
  text-align: left;
  margin-bottom: 24px;
}
.server-selector-heading .overview-eyebrow {
  margin-bottom: 8px;
}
.server-selector-heading h1 {
  font-size: 30px;
  margin: 0 0 10px;
}
.server-selector-heading p {
  font-size: 13px;
}
#page-server-results.server-selector-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.server-selector-list .dashboard-server-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  padding: 22px;
  min-height: 164px;
  gap: 6px 14px;
  border-radius: 12px;
  background: #2b3039;
}
.server-selector-list .server-card-avatar {
  grid-column: 1;
  grid-row: 1/3;
  border-radius: 50%;
  background: #ffe16b0e;
  border-color: #ffe16b25;
}
.server-selector-list .server-card-title {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  line-height: 1.5;
}
.server-selector-list .server-card-description {
  grid-column: 2;
  grid-row: 2;
  font-size: 11px;
}
.server-selector-list .server-card-footer {
  grid-column: 1/-1;
  grid-row: 3;
  margin-top: 18px;
  width: 100%;
  padding: 9px 11px;
  min-height: 36px;
  justify-content: space-between;
  font-size: 11px;
}
.server-selector-search {
  background: #252a33;
  border-color: #485160;
  border-radius: 9px;
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .landing-portal {
    padding: 20px 0;
  }
  .landing-portal .wordmark {
    font-size: 46px;
  }
  .landing-portal > p {
    font-size: 14px;
  }
  .landing-portal-actions {
    flex-direction: column;
    max-width: 330px;
  }
  .landing-portal-actions > .primary-button,
  .landing-portal-actions > .ghost-button {
    width: 100%;
  }
  .landing-portal-logo {
    width: 110px;
    height: 110px;
  }
  .landing-portal-logo img {
    width: 100px;
    height: 100px;
  }
  #page-server-results.server-selector-list {
    grid-template-columns: 1fr;
  }
  .server-selector-heading h1 {
    font-size: 27px;
  }
}

/* A welcoming brand story, distinct from the management pages. */
.landing-story {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 24px 0 48px;
}
.landing-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: #e9d17c;
}
.landing-story h1 {
  font-size: 58px;
  line-height: 1.12;
  letter-spacing: -2px;
  margin: 20px 0 22px;
  font-weight: 750;
  color: #f5f7fb;
}
.landing-story h1 > span {
  color: #ffe16b;
}
.landing-story-copy > p {
  max-width: 480px;
  font-size: 15px;
  line-height: 1.8;
  color: #c3ccda;
  margin: 0 0 28px;
}
.landing-story-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.landing-story-actions > .primary-button,
.landing-story-actions > .ghost-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-height: 46px;
  padding: 13px 18px;
  font-size: 13px;
  border-radius: 8px;
  transform: none;
  box-shadow: none;
}
.landing-story-actions .invite-plus {
  display: none;
}
.landing-story-actions svg {
  width: 16px;
  height: 16px;
}
.landing-story-benefits {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 24px;
  font-size: 11px;
  color: #b9c4d6;
}
.landing-brand-scene {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 390px;
}
.landing-brand-halo {
  position: absolute;
  width: 310px;
  height: 310px;
  border: 1px solid #ffe16b24;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe16b14, transparent 68%);
  box-shadow:
    0 0 0 30px #ffe16b03,
    0 0 0 60px #ffe16b02;
}
.landing-brand-scene > img {
  position: relative;
  width: 330px;
  height: 330px;
  object-fit: contain;
  transform: rotate(-10deg);
  filter: drop-shadow(0 18px 24px #0002);
}
.landing-scene-caption {
  position: absolute;
  bottom: 0;
  border: 1px solid #ffe16b25;
  background: #ffe16b0b;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 550;
  color: #e9d58b;
}
.landing-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid #ffffff0c;
}
.landing-steps > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.landing-steps > div > span {
  font-size: 11px;
  color: #e9d17c;
  border: 1px solid #ffe16b25;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #ffe16b08;
}
.landing-steps strong {
  font-size: 12px;
  font-weight: 550;
  color: #c9d2e0;
}
.landing-step-arrow {
  font-size: 18px;
  color: #687486;
}
/* All communities are visible; installed bots can be edited, others invited. */
.server-directory {
  max-width: 980px;
}
.server-directory .server-selector-heading {
  margin-bottom: 24px;
}
.server-directory .server-selector-heading p {
  max-width: 620px;
  line-height: 1.7;
}
.server-directory #page-server-results {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.server-directory .dashboard-server-card {
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;
  min-height: 240px;
  padding: 22px;
  gap: 0;
  border-radius: 14px;
  background: #2d323c;
}
.server-directory .server-card-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
}
.server-directory .server-card-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 12px;
}
.server-card-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.server-install-status {
  font-size: 9px;
  color: #c1cbdc;
  padding: 5px 8px;
  background: #ffffff05;
  border: 1px solid #ffffff10;
  border-radius: 20px;
  line-height: 1.4;
}
.server-install-status.installed {
  background: #204736;
  color: #b4f1ce;
  border-color: #7edaaa30;
}
.server-directory .server-card-title {
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 10px;
}
.server-directory .server-card-description {
  font-size: 12px;
  line-height: 1.65;
  margin: 0 0 20px;
  color: #bdc6d5;
}
.server-directory .server-card-footer {
  margin-top: auto;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.4;
  background: #3c4350;
  border-color: #5f6b7e;
  color: #eef2fa;
  box-shadow: none;
  transform: none;
}
.server-directory .server-card-footer:not(:disabled):hover {
  background: #414650;
  border-color: #727b8b;
  color: #f5f6fa;
  transform: none;
}
.server-directory .dashboard-server-card.bot-present {
  border-color: #736742;
}
.server-directory .dashboard-server-card:hover {
  background: #303743;
  border-color: #768298;
  transform: none;
}
@media (max-width: 850px) {
  .landing-story {
    gap: 24px;
  }
  .landing-story h1 {
    font-size: 44px;
  }
  .landing-brand-scene > img {
    width: 250px;
    height: 250px;
  }
  .landing-brand-halo {
    width: 240px;
    height: 240px;
  }
  .server-directory #page-server-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .landing-steps {
    gap: 12px;
  }
  .landing-steps strong {
    font-size: 11px;
  }
}
@media (max-width: 600px) {
  .landing-story {
    grid-template-columns: 1fr;
    padding: 0 0 32px;
  }
  .landing-story h1 {
    font-size: 42px;
  }
  .landing-story-copy > p {
    font-size: 14px;
  }
  .landing-brand-scene {
    min-height: 250px;
  }
  .landing-brand-scene > img {
    width: 210px;
    height: 210px;
  }
  .landing-brand-halo {
    width: 190px;
    height: 190px;
  }
  .landing-steps {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .landing-step-arrow {
    display: none;
  }
  .server-directory #page-server-results {
    grid-template-columns: 1fr;
  }
  .server-directory .dashboard-server-card {
    min-height: 220px;
  }
}

/* Simple gateways: two landing actions and an easy-to-scan server list. */
.simple-landing {
  padding: 24px 0 40px;
}
.simple-landing .landing-portal-logo {
  width: 128px;
  height: 128px;
  margin-bottom: 12px;
}
.simple-landing .landing-portal-logo img {
  width: 116px;
  height: 116px;
}
.simple-landing h1 {
  margin: 10px 0 12px;
}
.simple-landing .wordmark {
  font-size: 52px;
}
.simple-landing > p {
  font-size: 14px;
  margin-bottom: 28px;
  color: #bdc6d5;
}
.server-directory {
  max-width: 840px;
}
.server-directory .server-selector-heading {
  text-align: left;
  margin-bottom: 24px;
}
.server-directory .server-selector-heading .overview-eyebrow {
  display: none;
}
.server-directory .server-selector-heading h1 {
  font-size: 28px;
}
.server-directory #page-server-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.server-directory .dashboard-server-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px 18px;
  min-height: 90px;
  padding: 18px 20px;
  aspect-ratio: auto;
  border-radius: 10px;
  background: #2d323c;
  border-color: #50596a;
  box-shadow: none;
}
.server-directory .server-card-status-row {
  display: contents;
}
.server-directory .server-card-avatar {
  grid-column: 1;
  grid-row: 1/3;
  margin: 0;
  border-radius: 10px;
}
.server-directory .server-install-status {
  grid-column: 3;
  grid-row: 1/3;
  font-size: 10px;
  white-space: nowrap;
}
.server-directory .server-card-title {
  grid-column: 2;
  grid-row: 1;
  font-size: 15px;
  margin: 0;
  line-height: 1.5;
}
.server-directory .server-card-description {
  grid-column: 2;
  grid-row: 2;
  font-size: 11px;
  margin: 0;
  line-height: 1.5;
}
.server-directory .server-card-footer {
  grid-column: 4;
  grid-row: 1/3;
  width: 110px;
  min-height: 36px;
  margin: 0;
  padding: 9px 12px;
  font-size: 12px;
}
.server-directory .dashboard-server-card.bot-present {
  border-color: #50596a;
}
.server-directory .dashboard-server-card:hover {
  background: #303743;
  border-color: #768298;
}
@media (max-width: 700px) {
  .server-directory .dashboard-server-card {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 6px 12px;
  }
  .server-directory .server-card-avatar {
    width: 40px;
    height: 40px;
  }
  .server-directory .server-install-status {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    margin-top: 4px;
  }
  .server-directory .server-card-footer {
    grid-column: 3;
    grid-row: 1/4;
    width: 90px;
  }
  .server-directory .server-card-description {
    font-size: 10px;
  }
}
@media (max-width: 450px) {
  .server-directory .dashboard-server-card {
    padding: 16px;
    gap: 6px 10px;
  }
  .server-directory .server-card-footer {
    width: 75px;
  }
  .simple-landing .wordmark {
    font-size: 44px;
  }
}

/* A banana-centred landing with two clear entry points. */
.banana-entry {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: 48px;
  row-gap: 28px;
  padding: 20px 0 28px;
}
.banana-entry-heading h1 {
  font-size: 76px;
  line-height: 1.04;
  letter-spacing: -3px;
  font-weight: 750;
  margin: 20px 0 0;
  color: #f5f7fb;
}
.banana-entry-heading h1 > span {
  color: #ffe16b;
}
.banana-entry-stage {
  position: relative;
  min-height: 300px;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.banana-entry-stage > img {
  width: 280px;
  height: 280px;
  object-fit: contain;
  transform: rotate(-12deg);
  filter: drop-shadow(0 18px 25px #0002);
}
.banana-entry-orbit {
  position: absolute;
  inset: 15% 3%;
  border: 1px solid #ffe16b25;
  border-radius: 50%;
  transform: rotate(-25deg);
  background: radial-gradient(ellipse, #ffe16b0a, transparent 65%);
  z-index: -1;
}
.banana-entry-label {
  position: absolute;
  bottom: 16px;
  right: 18px;
  font-size: 11px;
  font-weight: 600;
  color: #e2ce84;
  letter-spacing: 0.6px;
}
.banana-entry-routes {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  border-top: 1px solid #ffffff10;
  padding-top: 28px;
}
.banana-entry-route {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: center;
}
.entry-route-kicker {
  grid-column: 1;
  font-size: 10px;
  color: #b1bed1;
  margin-bottom: 7px;
}
.banana-entry-route h2 {
  grid-column: 1;
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 650;
  letter-spacing: -0.3px;
}
.banana-entry-route p {
  grid-column: 1;
  margin: 0;
  color: #bdc6d5;
  font-size: 12px;
  line-height: 1.65;
}
.banana-entry-route > .primary-button,
.banana-entry-route > .ghost-button {
  grid-column: 2;
  grid-row: 1/4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 42px;
  padding: 11px 14px;
  font-size: 12px;
  border-radius: 8px;
  transform: none;
  box-shadow: none;
}
.banana-entry-route .invite-plus {
  display: none;
}
.banana-entry-route svg {
  width: 15px;
  height: 15px;
}
/* Server shelves offer a clear next step rather than another dashboard grid. */
.server-shelves {
  max-width: 1000px;
}
.server-shelves .server-selector-heading {
  display: block;
  margin-bottom: 24px;
}
.server-shelves .server-selector-heading .overview-eyebrow {
  display: block;
  margin-bottom: 10px;
}
.server-shelves .server-selector-heading h1 {
  font-size: 32px;
  letter-spacing: -1px;
}
.server-shelves #page-server-results {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.server-shelf-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.server-shelf-kicker {
  display: block;
  font-size: 10px;
  color: #aebbd0;
  line-height: 1.5;
  margin-bottom: 5px;
}
.server-shelf-heading h2 {
  font-size: 18px;
  margin: 0;
  font-weight: 650;
  color: #eef2f8;
}
.server-shelf-count {
  font-size: 10px;
  color: #b9c6d9;
  border: 1px solid #4a5260;
  padding: 5px 8px;
  border-radius: 5px;
}
.server-shelf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.server-shelves .dashboard-server-card {
  position: relative;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  min-height: 118px;
  gap: 7px 14px;
  padding: 20px;
  border-radius: 12px;
  background: #2a303a;
  border: 1px solid #4a5363;
}
.server-shelves .server-card-avatar {
  width: 40px;
  height: 40px;
  grid-row: 1/3;
  grid-column: 1;
  border-radius: 10px;
}
.server-shelves .server-card-title {
  grid-column: 2;
  grid-row: 1;
  font-size: 14px;
}
.server-shelves .server-card-description {
  grid-column: 2;
  grid-row: 2;
  font-size: 10px;
}
.server-shelves .server-install-status {
  display: none;
}
.server-shelves .server-card-footer {
  grid-column: 3;
  grid-row: 1/3;
  width: 72px;
  min-height: 38px;
  padding: 10px;
  font-size: 11px;
}
.server-shelves .server-card-footer svg {
  width: 12px;
  height: 12px;
}
.server-shelves .dashboard-server-card.bot-present {
  border-left: 3px solid #ffe16b66;
}
.server-shelves .dashboard-server-card.bot-absent {
  border-style: dashed;
}
.server-shelves .dashboard-server-card:hover {
  background: #303743;
  border-color: #8b7b48;
}
@media (max-width: 1000px) {
  .banana-entry-heading h1 {
    font-size: 58px;
  }
  .banana-entry-routes {
    gap: 28px;
  }
  .banana-entry-route {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .banana-entry-route > .primary-button,
  .banana-entry-route > .ghost-button {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 16px;
  }
  .server-shelf-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .banana-entry {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0;
  }
  .banana-entry-heading h1 {
    font-size: 48px;
    letter-spacing: -1.8px;
  }
  .banana-entry-stage {
    min-height: 230px;
  }
  .banana-entry-stage > img {
    width: 220px;
    height: 220px;
  }
  .banana-entry-routes {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 24px;
  }
  .banana-entry-route + .banana-entry-route {
    border-top: 1px solid #ffffff0c;
    padding-top: 24px;
  }
  .server-shelves .server-selector-heading h1 {
    font-size: 27px;
  }
  .server-shelves .dashboard-server-card {
    padding: 16px;
    gap: 6px 10px;
  }
}

/* Brand-led landing and two clear server paths. */
.banana-entry {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px 56px;
  padding: 30px 0;
}
.banana-entry-heading .banana-brand-headline {
  font-size: 104px;
  letter-spacing: -5px;
  line-height: 1.1;
  margin: 18px 0 12px;
}
.banana-brand-headline > span {
  color: #ffe16b;
}
.banana-entry-subtitle {
  font-size: 24px;
  letter-spacing: -0.5px;
  line-height: 1.5;
  margin: 0;
  color: #cbd4e3;
}
.banana-entry-stage {
  min-height: 320px;
}
.banana-entry-stage > img {
  width: 310px;
  height: 310px;
  transform: rotate(-6deg);
}
.banana-entry-orbit {
  inset: 0;
  border: 0;
  background: radial-gradient(ellipse, #ffe16b18, transparent 65%);
  transform: none;
}
.banana-entry-routes {
  gap: 32px;
  padding-top: 30px;
}
.banana-entry-route {
  grid-template-columns: 1fr;
  align-items: start;
  padding: 0 0 0 18px;
  border-left: 2px solid #ffe16b45;
}
.banana-entry-route + .banana-entry-route {
  border-left-color: #ffffff20;
}
.entry-route-kicker {
  font-size: 10px;
  font-weight: 600;
  color: #e7d28a;
  letter-spacing: 0.3px;
}
.banana-entry-route h2 {
  font-size: 20px;
  margin: 3px 0 8px;
}
.banana-entry-route > .primary-button,
.banana-entry-route > .ghost-button {
  grid-column: 1;
  grid-row: auto;
  justify-self: start;
  margin-top: 18px;
  min-width: 175px;
  min-height: 42px;
  justify-content: space-between;
}
.server-shelves {
  max-width: 1060px;
}
.server-shelves .server-selector-heading h1 {
  font-size: 34px;
  letter-spacing: -1px;
}
.server-shelves .server-selector-search {
  max-width: none;
  margin-bottom: 30px;
}
.server-shelves #page-server-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.server-shelf {
  min-width: 0;
  background: #ffffff02;
  border: 1px solid #ffffff0c;
  border-radius: 14px;
  padding: 20px;
}
.server-shelf-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}
.server-shelf-heading {
  margin-bottom: 20px;
  gap: 12px;
}
.server-shelf-kicker {
  font-size: 10px;
  line-height: 1.6;
  max-width: 240px;
}
.server-shelf-heading h2 {
  font-size: 20px;
  letter-spacing: -0.3px;
}
.server-shelves .dashboard-server-card,
.server-shelves .dashboard-server-card.bot-present,
.server-shelves .dashboard-server-card.bot-absent {
  border: 1px solid #4a5363;
  background: #2d323c;
  border-radius: 10px;
  min-height: 104px;
  padding: 18px;
  gap: 7px 14px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
}
.server-shelves .server-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.server-shelves .server-card-title {
  font-size: 14px;
}
.server-shelves .server-card-footer {
  width: 70px;
  padding: 9px;
  font-size: 11px;
}
.server-shelves .dashboard-server-card:hover {
  background: #343b47;
  border-color: #8b7b48;
}
@media (max-width: 1000px) {
  .banana-entry-heading .banana-brand-headline {
    font-size: 80px;
  }
  .banana-entry-subtitle {
    font-size: 21px;
  }
  .banana-entry {
    gap: 30px;
  }
  .server-shelves #page-server-results {
    gap: 18px;
  }
  .server-shelf {
    padding: 16px;
  }
}
@media (max-width: 700px) {
  .server-shelves #page-server-results {
    grid-template-columns: 1fr;
  }
  .banana-entry {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .banana-entry-heading .banana-brand-headline {
    font-size: 68px;
    letter-spacing: -3px;
  }
  .banana-entry-stage {
    min-height: 250px;
  }
  .banana-entry-stage > img {
    width: 250px;
    height: 250px;
  }
  .banana-entry-routes {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .banana-entry-route + .banana-entry-route {
    border-top: 0;
    padding-top: 0;
  }
  .banana-entry-route {
    padding-left: 18px;
  }
  .server-shelves .server-selector-heading h1 {
    font-size: 28px;
  }
}

/* Reference-led gateways, using Ban(ana)'s existing colours and real features. */
.reference-landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 44px;
  align-items: center;
  padding: 28px 0 48px;
}
.discord-built-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #ffffff0d;
  border-radius: 20px;
  background: #2b3039;
  color: #c5cede;
  font-size: 10px;
  letter-spacing: 0.4px;
}
.discord-built-badge svg {
  width: 14px;
  height: 14px;
  color: #e2e8f3;
}
.reference-hero-copy h1 {
  font-size: 58px;
  line-height: 1.1;
  letter-spacing: -1.9px;
  margin: 24px 0 20px;
  font-weight: 750;
  color: #f6f8fb;
}
.reference-hero-copy h1 > span {
  background: linear-gradient(100deg, #ffe890, #f8d84c);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.reference-hero-copy > p {
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 28px;
  color: #c1ccdd;
  max-width: 450px;
}
.reference-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.reference-hero-actions > .ghost-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 46px;
  padding: 13px 18px;
  border-radius: 9px;
  font-size: 13px;
  background: #3c4350;
  border-color: #5f6b7e;
  box-shadow: none;
  transform: none;
}
.reference-hero-actions > .ghost-button:first-child {
  background: linear-gradient(135deg, #ffe475, #f8d84c);
  border-color: #ffe78b;
  color: #29230e;
}
.reference-hero-actions > .ghost-button:first-child:hover {
  background: linear-gradient(135deg, #ffe475, #f8d84c);
  filter: brightness(1.035);
}
.reference-hero-actions svg {
  width: 16px;
  height: 16px;
}
.reference-hero-actions .invite-plus {
  font-size: 20px;
  line-height: 1;
}
.reference-hero-benefits {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 30px;
  color: #b7c3d6;
  font-size: 10px;
  line-height: 1.5;
}
.reference-hero-benefits > span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.reference-hero-benefits svg {
  width: 14px;
  height: 14px;
  color: #ffe16b;
}
.reference-product-stage {
  position: relative;
  min-width: 0;
  perspective: 1200px;
  padding: 15px 0;
}
.reference-product-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ffe16b22, transparent 65%);
  transform: scale(1.15);
}
.reference-product-preview {
  position: relative;
  background: #23272f;
  border: 1px solid #647089;
  border-radius: 18px;
  padding: 20px;
  box-shadow:
    0 25px 55px #0003,
    0 0 40px #ffe16b05;
  transform: rotateY(-9deg) rotateZ(-4deg);
  transform-origin: center;
}
.product-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ffffff0b;
}
.product-preview-header .wordmark {
  font-size: 20px !important;
  letter-spacing: -0.8px;
}
.product-preview-header .wordmark > span {
  color: #ffe16b;
}
.preview-label {
  font-size: 8px;
  color: #a9b7ce;
  padding: 5px 8px;
  border: 1px solid #4b5567;
  border-radius: 6px;
}
.product-preview-welcome {
  padding: 22px 0 18px;
}
.product-preview-welcome > span {
  font-size: 8px;
  color: #e5ce80;
}
.product-preview-welcome h2 {
  font-size: 22px;
  letter-spacing: -0.5px;
  margin: 8px 0;
}
.product-preview-welcome p {
  font-size: 10px;
  color: #bac5d8;
  margin: 0;
  line-height: 1.6;
}
.product-preview-section {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 12px;
}
.product-preview-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.product-preview-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1;
  min-width: 0;
  padding: 14px;
  background: #2d323c;
  border: 1px solid #ac954a;
  border-radius: 11px;
  overflow: hidden;
}
.product-preview-feature h3 {
  font-size: 14px;
  letter-spacing: -0.2px;
  margin: 16px 0 8px;
  position: relative;
  z-index: 1;
}
.product-preview-feature p {
  font-size: 9px;
  line-height: 1.6;
  margin: 0;
  color: #c1ccdd;
  position: relative;
  z-index: 1;
}
.product-preview-feature > img {
  position: absolute;
  width: 85%;
  height: 85%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  opacity: 0.13;
  pointer-events: none;
}
.product-preview-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-preview-state > span,
.preview-coming-soon {
  font-size: 7px;
  line-height: 1.5;
  padding: 4px 7px;
  border-radius: 20px;
  background: #204736;
  color: #b4f1ce;
  align-self: flex-start;
}
.product-preview-state i {
  width: 22px;
  height: 12px;
  border-radius: 20px;
  background: #ffe16b;
  position: relative;
}
.product-preview-state i::before {
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  width: 8px;
  height: 8px;
  background: #30333b;
  border-radius: 50%;
}
.product-preview-soon {
  background: linear-gradient(145deg, #514936, #2d323c 75%);
  border-color: #89733d;
}
.preview-coming-soon {
  background: #ffe16b12;
  color: #e9d891;
}
.product-preview-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding: 7px 9px;
  position: relative;
  z-index: 1;
  background: #ffe16b;
  color: #29230e;
  border: 1px solid #ffe78b;
  border-radius: 5px;
  font-size: 8px;
  line-height: 1.5;
  font-weight: 600;
}
.product-preview-soon .product-preview-action {
  background: #ffffff05;
  color: #c5cede;
  border-color: #ffffff12;
}
.reference-feature-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 8px 0 20px;
}
.reference-feature-highlights > article {
  padding: 22px;
  background: #2b3039;
  border: 1px solid #4a5363;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}
.highlight-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: #ffe16b15;
  border: 1px solid #ffe16b25;
  border-radius: 11px;
  color: #ffe16b;
  margin-bottom: 14px;
}
.highlight-icon svg {
  width: 23px;
  height: 23px;
}
.reference-feature-highlights h2 {
  font-size: 17px;
  margin: 0 0 8px;
  line-height: 1.4;
}
.reference-feature-highlights p {
  font-size: 12px;
  line-height: 1.7;
  color: #bac6da;
  margin: 0 0 18px;
}
.highlight-footnote {
  margin-top: auto;
  color: #e6cf81;
  font-size: 11px;
}
/* Server cards follow the reference's three-column picker. */
.reference-server-directory {
  max-width: 1192px;
}
.reference-server-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 28px;
}
.reference-server-directory .server-selector-heading {
  margin: 0;
}
.reference-server-directory .server-selector-heading h1 {
  font-size: 32px;
  letter-spacing: -0.8px;
  margin: 0 0 10px;
}
.reference-server-directory .server-selector-heading p {
  font-size: 14px;
  margin: 0;
}
.reference-server-directory .server-selector-search {
  width: 320px;
  margin: 0;
  max-width: 100%;
  min-height: 44px;
  flex-shrink: 0;
  gap: 10px;
}
.reference-server-directory .server-selector-search > svg {
  width: 17px;
  height: 17px;
  color: #b4c0d3;
}
.reference-server-directory #page-server-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.reference-server-directory .dashboard-server-card {
  display: flex;
  flex-direction: column;
  min-height: 252px;
  aspect-ratio: auto;
  padding: 22px;
  border-radius: 12px;
  border: 1px solid #4a5363;
  background: #2b3039;
  gap: 0;
}
.reference-server-directory .server-card-status-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 14px;
}
.reference-server-directory .server-card-avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  font-size: 17px;
  margin: 0;
  background: #ffe16b15;
  color: #ffe58a;
  border-color: #ffe16b25;
}
.reference-server-directory .server-install-status {
  position: absolute;
  left: 22px;
  bottom: 76px;
  display: inline-flex;
  font-size: 10px;
  line-height: 1.4;
  padding: 5px 9px;
  border-radius: 20px;
  margin: 0;
}
.reference-server-directory .server-card-title {
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: -0.3px;
  margin: 0 0 8px;
}
.reference-server-directory .server-card-description {
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 48px;
  color: #bac6da;
}
.reference-server-directory .server-card-footer {
  width: 100%;
  min-height: 38px;
  padding: 10px 12px;
  font-size: 12px;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
}
.reference-server-directory .bot-present .server-card-footer {
  background: linear-gradient(135deg, #ffe475, #f8d84c);
  border-color: #ffe78b;
  color: #29230e;
}
.reference-server-directory
  .bot-present
  .server-card-footer:hover:not(:disabled) {
  background: linear-gradient(135deg, #ffe475, #f8d84c);
  filter: brightness(1.035);
  border-color: #ffe78b;
  color: #29230e;
}
.reference-server-directory .dashboard-server-card:hover {
  background: #303743;
  border-color: #87784f;
}
@media (max-width: 1000px) {
  .reference-hero-copy h1 {
    font-size: 46px;
  }
  .reference-landing-hero {
    gap: 28px;
  }
  .reference-hero-benefits {
    gap: 12px;
  }
  .product-preview-feature {
    padding: 12px;
  }
  .product-preview-feature h3 {
    font-size: 12px;
  }
  .reference-server-directory #page-server-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .reference-landing-hero {
    grid-template-columns: 1fr;
    padding: 8px 0 28px;
    gap: 28px;
  }
  .reference-hero-copy h1 {
    font-size: 42px;
  }
  .reference-hero-copy > p {
    font-size: 14px;
  }
  .reference-product-stage {
    max-width: 480px;
    width: 100%;
    margin: auto;
  }
  .reference-product-preview {
    transform: rotateZ(-2deg);
  }
  .reference-feature-highlights {
    grid-template-columns: 1fr;
  }
  .reference-server-heading-row {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
  }
  .reference-server-directory .server-selector-search {
    width: 100%;
  }
  .reference-server-directory .server-selector-heading h1 {
    font-size: 28px;
  }
}
@media (max-width: 480px) {
  .reference-server-directory #page-server-results {
    grid-template-columns: 1fr;
  }
  .product-preview-feature h3 {
    font-size: 11px;
  }
  .product-preview-feature p {
    font-size: 8px;
  }
  .product-preview-welcome h2 {
    font-size: 19px;
  }
  .reference-product-preview {
    padding: 14px;
  }
  .reference-hero-benefits {
    font-size: 9px;
  }
}

.reference-server-directory .dashboard-server-card {
  align-items: stretch;
  text-align: left;
}
.reference-server-directory .server-card-status-row {
  width: 100%;
  align-self: stretch;
}
.reference-server-directory .server-card-title,
.reference-server-directory .server-card-description {
  text-align: left;
  width: 100%;
}

/* Follow the banana reference's simple hero, two features and horizontal server tiles. */
.banana-reference-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 12px 0 32px;
}
.banana-reference-hero .reference-hero-copy h1 {
  font-size: 58px;
  line-height: 1.1;
  margin: 0 0 20px;
  letter-spacing: -1.8px;
}
.banana-reference-hero .reference-hero-copy > p {
  font-size: 16px;
  max-width: 520px;
  margin-bottom: 24px;
  line-height: 1.7;
}
.banana-reference-hero .reference-hero-actions {
  gap: 14px;
}
.banana-reference-art {
  display: grid;
  place-items: center;
  min-height: 310px;
}
.banana-reference-art img {
  display: block;
  width: 100%;
  max-width: 370px;
  max-height: 370px;
  object-fit: contain;
}
.banana-reference-features {
  padding: 6px 0 18px;
}
.banana-reference-features > header {
  margin-bottom: 22px;
}
.banana-reference-features > header h2 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 8px;
}
.banana-reference-features > header p {
  font-size: 13px;
  color: #bdc6d5;
  margin: 0;
  line-height: 1.6;
}
.banana-reference-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.landing-feature-card {
  padding: 22px;
  background: #2b3039;
  border: 1px solid #4a5363;
  border-radius: 13px;
}
.landing-feature-card.available {
  border-color: #c2a952;
}
.landing-feature-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}
.landing-feature-top .highlight-icon {
  margin: 0;
  width: 48px;
  height: 48px;
  background: #ffffff06;
  border-color: #ffffff18;
  color: #bdc6d5;
}
.landing-feature-card.available .highlight-icon {
  background: #ffe16b12;
  border-color: #ffe16b45;
  color: #ffe16b;
}
.landing-feature-status {
  padding: 6px 10px;
  border: 1px solid #596373;
  background: #ffffff04;
  border-radius: 20px;
  font-size: 10px;
  color: #b9c6d9;
  line-height: 1.4;
}
.landing-feature-status.available {
  background: #204736;
  border-color: #7edaaa30;
  color: #b4f1ce;
}
.landing-feature-card h2 {
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 8px;
}
.landing-feature-card p {
  font-size: 13px;
  line-height: 1.7;
  color: #bdc6d5;
  margin: 0;
  max-width: 460px;
}
.reference-server-heading-row {
  display: block;
  margin-bottom: 24px;
}
.reference-server-directory .server-selector-heading {
  margin-bottom: 22px;
}
.reference-server-directory .server-selector-search {
  width: 100%;
  margin: 0;
  min-height: 46px;
}
.reference-server-directory #page-server-results {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.reference-server-directory .dashboard-server-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 10px 16px;
  min-height: 122px;
  padding: 20px;
  background: #2b3039;
  border: 1px solid #4a5363;
  border-radius: 12px;
}
.reference-server-directory .server-card-status-row {
  display: contents;
}
.reference-server-directory .server-card-avatar {
  grid-column: 1;
  grid-row: 1/3;
  width: 56px;
  height: 56px;
  border-radius: 13px;
  margin: 0;
  background: #232831;
}
.reference-server-directory .server-card-title {
  grid-column: 2;
  grid-row: 1;
  font-size: 15px;
  margin: 0;
  line-height: 1.4;
  width: auto;
}
.reference-server-directory .server-card-description {
  display: none;
}
.reference-server-directory .server-install-status {
  position: static;
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  display: inline-flex;
  font-size: 9px;
  line-height: 1.4;
  padding: 5px 8px;
  max-width: 100%;
  margin: 0;
}
.reference-server-directory .server-card-footer {
  grid-column: 3;
  grid-row: 1/3;
  justify-self: end;
  align-self: center;
  width: 100px;
  min-height: 36px;
  padding: 9px 11px;
  margin: 0;
  font-size: 11px;
  justify-content: center;
  gap: 10px;
}
.reference-server-directory .bot-absent .server-card-footer {
  background: transparent;
  border-color: #d9bf59;
  color: #ffe16b;
}
.reference-server-directory
  .bot-absent
  .server-card-footer:hover:not(:disabled) {
  background: #ffe16b12;
  border-color: #ffe16b;
  color: #ffe898;
}
.reference-server-directory .dashboard-server-card:hover {
  background: #303743;
  border-color: #87784f;
}
@media (max-width: 1000px) {
  .banana-reference-hero .reference-hero-copy h1 {
    font-size: 46px;
  }
  .banana-reference-hero {
    gap: 28px;
  }
  .reference-server-directory .dashboard-server-card {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 18px;
  }
  .reference-server-directory .server-card-avatar {
    width: 48px;
    height: 48px;
  }
  .reference-server-directory .server-card-footer {
    width: 82px;
  }
}
@media (max-width: 700px) {
  .banana-reference-hero {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 4px;
  }
  .banana-reference-hero .reference-hero-copy h1 {
    font-size: 42px;
  }
  .banana-reference-hero .reference-hero-copy > p {
    font-size: 14px;
  }
  .banana-reference-art {
    min-height: 220px;
  }
  .banana-reference-art img {
    max-width: 260px;
    max-height: 260px;
  }
  .banana-reference-feature-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .reference-server-directory #page-server-results {
    grid-template-columns: 1fr;
  }
  .reference-server-directory .dashboard-server-card {
    min-height: 112px;
  }
}
/* Community protection entry pages; shared header stays unchanged. */
.banana-reference-hero {
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 30px 0 44px;
}
.landing-eyebrow {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 20px;
  background: #83cf9d12;
  color: #99d8ad;
  font-size: 11px;
  margin-bottom: 20px;
}
.banana-reference-hero .reference-hero-copy h1 {
  font-size: 50px;
  line-height: 1.13;
}
.landing-dashboard-preview {
  border: 1px solid #566072;
  border-radius: 12px;
  overflow: hidden;
  background: #252b34;
  box-shadow: 0 20px 70px #e5bf3013;
  transform: none;
}
.preview-window-bar {
  display: flex;
  gap: 6px;
  padding: 12px;
  background: #353d49;
}
.preview-window-bar i {
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background: #ffe16b;
}
.preview-window-bar i:first-child {
  background: #eb7872;
}
.preview-window-bar i:last-child {
  background: #83cb9f;
}
.preview-window-content {
  display: grid;
  grid-template-columns: 125px 1fr;
  min-height: 285px;
}
.preview-window-content aside {
  padding: 20px 12px;
  background: #202630;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.preview-window-content aside strong {
  font-size: 13px;
  margin-bottom: 14px;
}
.preview-window-content aside span {
  font-size: 10px;
  padding: 10px 8px;
  color: #bfc9d8;
  border-radius: 6px;
}
.preview-window-content aside .selected {
  background: #ffe16b12;
  color: #ffe16b;
}
.preview-window-panels {
  padding: 15px;
  display: grid;
  gap: 12px;
}
.preview-window-panels section {
  position: relative;
  padding: 15px;
  background: #303743;
  border: 1px solid #ffffff09;
  border-radius: 8px;
  overflow: hidden;
}
.preview-feature-heading {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.preview-feature-heading span {
  color: #aee3bc;
  background: #41644e;
  padding: 5px 8px;
  border-radius: 20px;
  font-size: 9px;
}
.preview-window-panels p {
  font-size: 10px;
  color: #bdc6d5;
  line-height: 1.65;
  margin: 10px 0;
  max-width: 210px;
}
.preview-window-panels img {
  position: absolute;
  width: 82px;
  height: 82px;
  object-fit: contain;
  right: 10px;
  bottom: 12px;
  opacity: 0.8;
}
.preview-channel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  border: 1px solid #ffffff10;
  border-radius: 6px;
  width: 70%;
  margin-top: 16px;
}
.preview-channel small {
  font-size: 9px;
  color: #bdc6d5;
}
.preview-channel strong {
  font-size: 11px;
}
.preview-monitor strong {
  font-size: 10px;
  color: #b6e1bd;
}
.banana-reference-feature-grid .landing-feature-card {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 22px;
  border-color: #4a5363;
}
.landing-feature-symbol {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border: 1px solid #5c6574;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #252b34;
}
.landing-feature-symbol img {
  width: 54px;
  height: 54px;
  object-fit: contain;
}
.landing-feature-card h2 {
  font-size: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.landing-feature-status {
  font-size: 9px;
  padding: 4px 8px;
}
.landing-feature-card p {
  font-size: 12px;
}
.landing-bottom-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 22px 24px;
  border: 1px solid #ffe16b30;
  border-radius: 12px;
  background: linear-gradient(115deg, #ffe16b0c, transparent 70%);
  margin-top: 6px;
}
.landing-bottom-cta h2 {
  font-size: 17px;
  margin: 0 0 8px;
}
.landing-bottom-cta p {
  font-size: 12px;
  color: #bdc6d5;
  margin: 0;
}
.landing-bottom-cta .primary-button {
  flex-shrink: 0;
}
.directory-eyebrow {
  display: block;
  color: #ffe16b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.reference-server-directory #page-server-results {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.reference-server-directory .dashboard-server-card {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 240px;
  padding: 0 16px 16px;
  overflow: hidden;
}
.server-card-banner {
  height: 85px;
  margin: 0 -16px;
  background:
    radial-gradient(ellipse at 80% 20%, #e7c66080, transparent 45%),
    linear-gradient(165deg, #454844, #71664a 60%, #303743);
  position: relative;
  overflow: hidden;
}
.server-card-banner:after {
  content: "";
  position: absolute;
  inset: 25% -10% -2%;
  background: #232d35;
  clip-path: polygon(
    0 85%,
    20% 30%,
    32% 65%,
    50% 10%,
    67% 66%,
    82% 35%,
    100% 90%,
    100% 100%,
    0 100%
  );
  opacity: 0.65;
}
.dashboard-server-card:nth-child(2n) .server-card-banner {
  background:
    radial-gradient(ellipse at 20% 30%, #ffe16b50, transparent 50%),
    linear-gradient(155deg, #657057, #383f39);
}
.dashboard-server-card:nth-child(3n) .server-card-banner {
  background:
    radial-gradient(circle at 80% 30%, #ffe16b70, transparent 15%),
    linear-gradient(165deg, #414753, #242a34);
}
.reference-server-directory .server-card-status-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: -26px;
  position: relative;
  z-index: 1;
}
.reference-server-directory .server-card-avatar {
  width: 54px;
  height: 54px;
  border: 3px solid #a7afbd;
  border-radius: 50%;
  background: #303743;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}
.server-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reference-server-directory .server-install-status {
  font-size: 9px;
  padding: 5px 8px;
  margin-bottom: -24px;
  max-width: 48%;
}
.reference-server-directory .server-card-title {
  font-size: 15px;
  margin: 12px 0 20px;
  padding-right: 42%;
  line-height: 1.4;
  min-height: 42px;
}
.reference-server-directory .server-card-footer {
  width: 100%;
  align-self: stretch;
  margin-top: auto;
  min-height: 36px;
  justify-content: center;
}
.server-directory-note {
  padding: 18px 20px;
  border: 1px solid #4a5363;
  background: #2b3039;
  border-radius: 10px;
  margin-top: 20px;
}
.server-directory-note strong {
  font-size: 12px;
}
.server-directory-note p {
  font-size: 11px;
  color: #bdc6d5;
  margin: 6px 0 0;
}
@media (max-width: 1000px) {
  .banana-reference-hero .reference-hero-copy h1 {
    font-size: 40px;
  }
  .banana-reference-hero {
    gap: 24px;
  }
  .preview-window-content {
    grid-template-columns: 100px 1fr;
  }
  .reference-server-directory #page-server-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .banana-reference-hero {
    grid-template-columns: 1fr;
    padding-top: 12px;
  }
  .landing-dashboard-preview {
    max-width: 500px;
  }
  .banana-reference-feature-grid {
    grid-template-columns: 1fr;
  }
  .landing-bottom-cta {
    align-items: flex-start;
    flex-direction: column;
  }
  .reference-server-directory #page-server-results {
    grid-template-columns: 1fr;
  }
  .reference-server-directory .server-card-title {
    min-height: 22px;
  }
}
.reference-server-directory .server-card-status-row {
  flex-direction: row;
  align-items: flex-start;
}
.reference-server-directory .server-card-avatar {
  align-self: flex-start;
  margin: 0;
}
.reference-server-directory .server-install-status {
  align-self: flex-end;
  margin-top: 38px;
  margin-bottom: 0;
}
.reference-server-directory .server-card-title {
  padding-right: 0;
  min-height: 22px;
  margin: 12px 0 20px;
}
/* Banner directory: compact cards and a shared search/filter row. */
.reference-server-directory {
  max-width: 1120px;
  margin: 0 auto;
  width: 100%;
}
.reference-server-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 16px;
  margin-bottom: 20px;
}
.reference-server-directory .server-selector-heading {
  grid-column: 1/-1;
  margin-bottom: 4px;
}
.reference-server-directory .server-selector-heading h1 {
  font-size: 36px;
  letter-spacing: -1px;
}
.reference-server-directory .server-selector-heading p {
  margin-top: 10px;
}
.reference-server-heading-row .themed-select {
  width: 100%;
  min-width: 0;
}
.reference-server-directory #page-server-results {
  gap: 20px;
}
.reference-server-directory .dashboard-server-card {
  min-height: 228px;
  border-radius: 10px;
  padding: 0 14px 14px;
  background: #2b3039;
  border-color: #454d59;
}
.reference-server-directory .server-card-banner {
  height: 94px;
  flex-shrink: 0;
  margin: 0 -14px;
  background-size: cover;
  background-position: center;
}
.server-card-banner:after {
  display: none;
}
.reference-server-directory .server-card-status-row {
  margin-top: -30px;
  min-height: 62px;
  position: relative;
}
.reference-server-directory .server-card-avatar {
  height: 62px;
  width: 62px;
  border: 3px solid #c6c6a6;
  background: #292f39;
  font-size: 21px;
  box-shadow: 0 3px 12px #0003;
}
.reference-server-directory .server-install-status {
  position: absolute;
  right: 0;
  top: 60px;
  margin: 0;
  font-size: 10px;
  padding: 5px 9px;
  max-width: none;
  line-height: 1.4;
  border: 0;
  background: #424a55;
  color: #cdd5e2;
}
.reference-server-directory .server-install-status.installed {
  background: #304e40;
  color: #a4dfb5;
}
.reference-server-directory .server-card-title {
  font-size: 15px;
  margin: 9px 0 18px;
  line-height: 1.5;
  padding-right: 100px;
  min-height: 23px;
}
.reference-server-directory .server-card-footer {
  height: 36px;
  min-height: 36px;
  border-radius: 7px;
  font-size: 12px;
}
.reference-server-directory .bot-absent .server-card-footer {
  color: #eef2fa;
  border-color: #a9b1bd;
  background: transparent;
}
.reference-server-directory .bot-absent .server-card-footer:hover {
  background: #414650;
  color: #fff;
  border-color: #c2c8d1;
}
.server-directory-note {
  margin-top: 20px;
  padding: 18px 20px;
  background: #2b3039;
}
@media (max-width: 1000px) {
  .reference-server-directory #page-server-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 650px) {
  .reference-server-heading-row {
    grid-template-columns: 1fr;
  }
  .reference-server-directory .server-selector-heading {
    grid-column: 1;
  }
  .reference-server-directory .server-selector-heading h1 {
    font-size: 28px;
  }
  .reference-server-directory #page-server-results {
    grid-template-columns: 1fr;
  }
}
.reference-server-directory .server-card-banner.landscape-0 {
  background-image: url("/assets/server-landscape-0.svg");
}
.reference-server-directory .server-card-banner.landscape-1 {
  background-image: url("/assets/server-landscape-1.svg");
}
.reference-server-directory .server-card-banner.landscape-2 {
  background-image: url("/assets/server-landscape-2.svg");
}
.reference-server-directory .server-card-banner.landscape-3 {
  background-image: url("/assets/server-landscape-3.svg");
}
.reference-server-directory .server-install-status {
  left: auto;
  bottom: auto;
  transform: none;
  right: 0;
  top: 60px;
}
.reference-server-directory .server-install-status {
  top: 84px;
}
.reference-server-directory .server-card-title {
  padding-right: 95px;
}
/* Server icons use clean rounded squares. */
.reference-server-directory .server-card-avatar {
  border: 0;
  border-radius: 13px;
  box-shadow: none;
}
/* A warmer, more visible server card hover glow. */
.reference-server-directory .dashboard-server-card {
  transition:
    background 0.18s,
    border-color 0.18s,
    box-shadow 0.18s;
}
.reference-server-directory .dashboard-server-card:hover {
  border-color: #bca354;
  background: #33362f;
  box-shadow:
    0 0 0 1px #ffe16b20,
    0 0 26px #ffe16b24;
  transform: none;
}
.reference-server-directory .server-card-avatar {
  background: transparent;
}
.reference-server-directory .server-card-avatar {
  background: #292f39;
  opacity: 0.5;
}
.reference-server-directory .server-card-avatar {
  opacity: 0.3;
}
/* Centre server identity details in the space below the avatar. */
.reference-server-directory .dashboard-server-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 94px 32px minmax(60px, auto) 36px;
  column-gap: 10px;
  row-gap: 0;
  min-height: 236px;
}
.reference-server-directory .server-card-banner {
  grid-column: 1/-1;
  grid-row: 1;
}
.reference-server-directory .server-card-status-row {
  display: contents;
}
.reference-server-directory .server-card-avatar {
  grid-column: 1;
  grid-row: 2;
  width: 62px;
  height: 62px;
  margin-top: -30px;
  position: relative;
  z-index: 1;
}
.reference-server-directory .server-card-title {
  grid-column: 1;
  grid-row: 3;
  align-self: center;
  margin: 0;
  padding: 0;
  min-height: 0;
  line-height: 1.5;
}
.reference-server-directory .server-install-status {
  grid-column: 2;
  grid-row: 3;
  position: static;
  align-self: center;
  justify-self: end;
  margin: 0;
  transform: none;
  max-width: none;
}
.reference-server-directory .server-card-footer {
  grid-column: 1/-1;
  grid-row: 4;
  margin: 0;
  align-self: stretch;
  width: 100%;
}
.reference-server-directory .server-card-avatar {
  opacity: 0.2;
}
/* Matching search and server filter controls. */
.reference-server-directory .server-selector-search,
.reference-server-directory .select-trigger {
  height: 48px;
  min-height: 48px;
  border: 1px solid #505864;
  border-radius: 10px;
  background: #2b3039;
  box-shadow: inset 0 1px 0 #ffffff05;
  transition:
    border-color 0.18s,
    background 0.18s,
    box-shadow 0.18s;
}
.reference-server-directory .server-selector-search {
  gap: 12px;
  padding: 0 12px 0 16px;
}
.reference-server-directory .server-selector-search > svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: #c5cbd4;
}
.reference-server-directory .server-selector-search input[type="text"] {
  font-size: 13px;
  height: 46px;
  padding: 0;
  background: transparent;
  outline: none;
  box-shadow: none;
}
.reference-server-directory .server-selector-search input::placeholder {
  color: #9fa8b7;
}
.reference-server-directory .server-selector-search:focus-within {
  border-color: #bca354;
  box-shadow: 0 0 0 3px #ffe16b0a;
}
.reference-server-directory .server-selector-search .icon-button {
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: #a9b1be;
  width: 28px;
  height: 28px;
  font-size: 20px;
  padding: 0;
}
.reference-server-directory .server-selector-search .icon-button:hover {
  background: #ffffff08;
  color: #f4f5f7;
  transform: none;
}
.reference-server-directory .select-trigger {
  padding: 0 16px;
  font-size: 13px;
  color: #e4e7ed;
}
.reference-server-directory .select-trigger:hover {
  background: #323843;
  border-color: #69717e;
  transform: none;
}
.reference-server-directory .select-trigger[aria-expanded="true"] {
  border-color: #bca354;
  background: #323843;
  box-shadow: 0 0 0 3px #ffe16b0a;
}
.server-gateway .select-popup {
  background: #2b3039;
  border: 1px solid #59616e;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 30px #0005;
}
.server-gateway .select-option {
  border-radius: 6px;
  padding: 11px 12px;
  font-size: 13px;
}
.server-gateway .select-option[aria-selected="true"] {
  background: #ffe16b15;
  color: #ffe16b;
}
.server-gateway .select-option:hover,
.server-gateway .select-option:focus {
  background: #3a414b;
  color: #f5f6f8;
  outline: none;
}
/* Server actions remain steady, with labels and symbols at opposite edges. */
.reference-server-directory .server-card-avatar {
  opacity: 1;
}
.reference-server-directory .server-card-footer {
  justify-content: space-between;
  padding-left: 14px;
  padding-right: 14px;
  transition:
    background 0.16s,
    border-color 0.16s,
    color 0.16s;
  transform: none;
  filter: none;
}
.reference-server-directory .bot-present .server-card-footer,
.reference-server-directory
  .bot-present
  .server-card-footer:hover:not(:disabled) {
  background: linear-gradient(135deg, #ffe475, #f8d84c);
  border-color: #ffe78b;
  color: #29230e;
  filter: none;
  transform: none;
  box-shadow: none;
}
.reference-server-directory
  .bot-absent
  .server-card-footer:hover:not(:disabled) {
  background: linear-gradient(135deg, #ffe475, #f8d84c);
  border-color: #ffe78b;
  color: #29230e;
  filter: none;
  transform: none;
  box-shadow: none;
}
.reference-server-heading-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
.server-filter-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}
.server-filter-buttons .server-filter-button {
  height: 48px;
  white-space: nowrap;
  padding: 0 15px;
  border-radius: 8px;
  font-size: 12px;
  background: #3c4350;
  border: 1px solid #5f6b7e;
  color: #eef2fa;
  box-shadow: none;
  transform: none;
}
.server-filter-buttons .server-filter-button:hover {
  background: #414650;
  border-color: #727b8b;
  color: #f5f6fa;
  transform: none;
}
.server-filter-buttons .server-filter-button[aria-pressed="true"] {
  border-color: #d1b85e;
  color: #ffe16b;
  background: #ffe16b0b;
}
.reference-server-directory .bot-absent .server-card-footer {
  background: #3c4350;
  border-color: #5f6b7e;
  color: #eef2fa;
}
@media (max-width: 750px) {
  .reference-server-heading-row {
    grid-template-columns: 1fr;
  }
  .reference-server-directory .server-selector-heading {
    grid-column: 1;
  }
  .server-filter-buttons {
    flex-wrap: wrap;
  }
  .server-filter-buttons .server-filter-button {
    height: 40px;
    flex: 1;
  }
}
/* Keep filter labels and server action content vertically centred. */
.server-filter-buttons .server-filter-button,
.reference-server-directory .server-card-footer {
  display: flex;
  align-items: center;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}
.server-filter-buttons .server-filter-button {
  justify-content: center;
}
.reference-server-directory .server-card-footer > span {
  display: flex;
  align-items: center;
  line-height: 1;
}
.reference-server-directory .server-card-footer > svg {
  display: block;
  flex-shrink: 0;
  margin: 0;
  width: 16px;
  height: 16px;
}
.reference-server-directory .server-card-identity {
  grid-column: 1;
  grid-row: 3;
  align-self: center;
  min-width: 0;
}
.reference-server-directory .server-card-identity .server-card-title {
  margin: 0;
  line-height: 1.4;
}
.reference-server-directory .server-card-members {
  margin: 5px 0 0;
  color: #aeb8c7;
  font-size: 11px;
  line-height: 1.4;
}
/* Even space around the server details, with status aligned to the name. */
.reference-server-directory .dashboard-server-card {
  grid-template-rows: 94px 32px minmax(66px, auto) 36px;
}
.reference-server-directory .server-card-identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 0;
  margin: 0;
}
.reference-server-directory .server-card-identity .server-card-title {
  font-size: 15px;
  line-height: 22px;
  margin: 0;
  padding: 0;
}
.reference-server-directory .server-card-members {
  font-size: 11px;
  line-height: 16px;
  margin: 0;
  padding: 0;
}
.reference-server-directory .server-install-status {
  align-self: center;
  transform: translateY(-9.5px);
  line-height: 16px;
  padding: 4px 9px;
  margin: 0;
}
.reference-server-directory .server-card-identity {
  align-items: flex-start;
  text-align: left;
  width: 100%;
}
.reference-server-directory .server-card-identity .server-card-title,
.reference-server-directory .server-card-members {
  width: 100%;
  text-align: left;
  padding-left: 0;
  margin-left: 0;
}
/* Simple, polished landing: one brand moment and two clear actions. */
body.gateway:not(.server-gateway) main:has(.simple-landing) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 96px;
  padding-bottom: 54px;
  min-height: calc(100vh - 76px);
}
.simple-landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 680px;
  padding: 20px 0 30px;
}
.simple-landing-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 180px;
  height: 180px;
  margin-bottom: 18px;
}
.simple-landing-mark:before {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: #ffe16b14;
  filter: blur(36px);
  pointer-events: none;
}
.simple-landing-mark img {
  position: relative;
  width: 180px;
  height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px #0002);
}
.simple-landing h1 {
  font-size: 64px;
  line-height: 1.1;
  font-weight: 750;
  letter-spacing: -2px;
  margin: 0 0 22px;
  color: #f5f6f8;
}
.simple-landing h1 span {
  color: #ffe16b;
}
.simple-landing > p {
  font-size: 17px;
  line-height: 1.8;
  color: #bec6d2;
  margin: 0 0 30px;
}
.simple-landing-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.simple-landing-actions > a,
.simple-landing-actions > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-width: 200px;
  height: 48px;
  padding: 0 18px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1;
  transform: none;
  box-shadow: none;
}
.simple-landing-actions svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.simple-landing-actions .ghost-button {
  background: #3c4350;
  border-color: #5f6b7e;
  color: #eef2fa;
}
.simple-landing-actions .ghost-button:hover {
  background: #414650;
  border-color: #727b8b;
  color: #f5f6fa;
  transform: none;
}
.simple-landing-actions .primary-button {
  background: linear-gradient(135deg, #ffe475, #f8d84c);
  color: #29230e;
  border-color: #ffe78b;
}
.simple-landing-actions .primary-button:hover {
  background: linear-gradient(135deg, #ffe475, #f8d84c);
  filter: brightness(1.035);
  transform: none;
  box-shadow: none;
}
.simple-landing-note {
  font-size: 12px;
  color: #929cae;
  margin-top: 24px;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .simple-landing h1 {
    font-size: 50px;
  }
  .simple-landing > p {
    font-size: 14px;
  }
  .simple-landing-mark,
  .simple-landing-mark img {
    width: 150px;
    height: 150px;
  }
  .simple-landing-actions {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
  }
  .simple-landing-actions > a,
  .simple-landing-actions > button {
    width: 100%;
  }
  body.gateway:not(.server-gateway) main:has(.simple-landing) {
    padding-top: 90px;
    padding-bottom: 32px;
  }
}
.simple-landing-actions #invite-help {
  background: linear-gradient(135deg, #ffe475, #f8d84c);
  color: #29230e;
  border-color: #ffe78b;
}
.simple-landing-actions #invite-help:hover {
  background: linear-gradient(135deg, #ffe475, #f8d84c);
  color: #29230e;
  border-color: #ffe78b;
  filter: brightness(1.035);
  transform: none;
}
/* A little more personality, without crowding the landing. */
body.gateway:not(.server-gateway) main:has(.simple-landing) {
  padding-top: 100px;
  padding-bottom: 42px;
}
.simple-landing {
  max-width: 900px;
  padding-top: 0;
  padding-bottom: 0;
}
.simple-landing-mark,
.simple-landing-mark img {
  width: 135px;
  height: 135px;
}
.simple-landing-mark {
  margin-bottom: 12px;
}
.simple-landing h1 {
  font-size: 58px;
  margin-bottom: 16px;
}
.simple-landing > p {
  font-size: 16px;
  margin-bottom: 24px;
}
.simple-landing-highlights {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  margin: 24px 0 38px;
  color: #bfc7d3;
  font-size: 12px;
}
.simple-landing-highlights > span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.simple-landing-highlights svg {
  width: 16px;
  height: 16px;
  color: #e6cd71;
}
.simple-landing-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  width: 100%;
  text-align: left;
}
.simple-landing-features article {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  border: 1px solid #4b5360;
  border-radius: 14px;
  background: linear-gradient(125deg, #ffe16b08, #2b3039 65%);
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
}
.simple-landing-features article:hover {
  border-color: #a38f52;
  box-shadow: 0 0 24px #ffe16b0b;
}
.simple-feature-art {
  width: 72px;
  height: 82px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.simple-feature-art img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px #0002);
}
.simple-feature-label {
  display: block;
  font-size: 10px;
  color: #a5d5b6;
  line-height: 1.4;
  margin-bottom: 7px;
}
.simple-feature-label.upcoming {
  color: #b4bdcb;
}
.simple-landing-features h2 {
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 8px;
  color: #f4f5f8;
}
.simple-landing-features p {
  font-size: 12px;
  line-height: 1.7;
  margin: 0;
  color: #b8c2d1;
}
@media (max-width: 650px) {
  .simple-landing-features {
    grid-template-columns: 1fr;
  }
  .simple-landing-features article {
    padding: 20px;
    gap: 16px;
  }
  .simple-landing-highlights {
    gap: 14px;
    margin-bottom: 28px;
  }
  .simple-landing h1 {
    font-size: 48px;
  }
  .simple-landing > p {
    font-size: 14px;
  }
}
/* Dashboard navigation belongs only to the signed-in workspace. */
body.gateway .dashboard-switch-server {
  display: none !important;
}
/* Split landing: brand and actions on the left, clear feature stories on the right. */
.simple-landing {
  max-width: 1120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 76px;
  align-items: center;
  text-align: left;
  padding: 36px 0;
  width: 100%;
}
.simple-landing-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.simple-landing-mark {
  width: 170px;
  height: 170px;
  margin: 0 0 16px;
}
.simple-landing-mark img {
  width: 170px;
  height: 170px;
}
.simple-landing h1 {
  font-size: 64px;
  margin: 0 0 22px;
}
.simple-landing-intro > p {
  font-size: 16px;
  line-height: 1.8;
  color: #bec6d2;
  margin: 0 0 28px;
}
.simple-landing-actions {
  justify-content: flex-start;
}
.simple-landing-highlights {
  justify-content: flex-start;
  gap: 18px;
  margin: 24px 0 0;
  font-size: 11px;
}
.simple-landing-feature-column > header {
  margin-bottom: 24px;
}
.simple-landing-feature-column > header > span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.6px;
  color: #dfc970;
  margin-bottom: 12px;
}
.simple-landing-feature-column > header > h2 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.6px;
  margin: 0 0 12px;
  color: #f5f6f8;
}
.simple-landing-feature-column > header > p {
  font-size: 13px;
  line-height: 1.7;
  color: #aeb8c8;
  margin: 0;
  max-width: 380px;
}
.simple-landing-features {
  grid-template-columns: 1fr;
  gap: 18px;
}
.simple-landing-features article {
  padding: 26px;
  gap: 22px;
  min-height: 160px;
}
.simple-feature-art {
  width: 82px;
}
.simple-feature-art img {
  width: 90px;
  height: 90px;
}
@media (max-width: 1000px) {
  .simple-landing {
    gap: 36px;
  }
  .simple-landing-actions {
    flex-wrap: wrap;
  }
  .simple-landing-actions > a,
  .simple-landing-actions > button {
    min-width: 175px;
    gap: 12px;
  }
  .simple-landing h1 {
    font-size: 54px;
  }
  .simple-landing-features article {
    padding: 22px;
    gap: 16px;
  }
}
@media (max-width: 750px) {
  .simple-landing {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 12px 0 24px;
    max-width: 540px;
  }
  .simple-landing-intro {
    align-items: center;
    text-align: center;
  }
  .simple-landing-actions,
  .simple-landing-highlights {
    justify-content: center;
  }
  .simple-landing-feature-column > header {
    text-align: center;
  }
  .simple-landing-feature-column > header > p {
    margin: auto;
  }
  .simple-landing-feature-column > header > h2 {
    font-size: 26px;
  }
  .simple-landing-actions {
    width: 100%;
    max-width: none;
    flex-direction: row;
  }
  .simple-landing-actions > a,
  .simple-landing-actions > button {
    width: auto;
  }
  .simple-landing-mark,
  .simple-landing-mark img {
    width: 140px;
    height: 140px;
  }
}
/* A clear welcome headline with a compact Ban(ana) brand lockup. */
.landing-brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.landing-brand-lockup .simple-landing-mark,
.landing-brand-lockup .simple-landing-mark img {
  width: 68px;
  height: 68px;
  margin: 0;
}
.landing-brand-lockup > span {
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.8px;
  color: #f5f6f8;
}
.landing-brand-lockup strong {
  color: #ffe16b;
  font-weight: 750;
}
.simple-landing-intro h1 {
  font-size: 46px;
  line-height: 1.16;
  letter-spacing: -1.6px;
  margin: 0 0 22px;
}
.simple-landing-intro > p {
  max-width: 420px;
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 30px;
}
.simple-landing-intro .simple-landing-highlights {
  margin-top: 22px;
  gap: 16px;
}
@media (max-width: 1000px) {
  .simple-landing-intro h1 {
    font-size: 38px;
  }
}
@media (max-width: 750px) {
  .landing-brand-lockup {
    margin-bottom: 22px;
  }
  .simple-landing-intro h1 {
    font-size: 38px;
  }
  .simple-landing-intro > p {
    max-width: 400px;
  }
  .landing-brand-lockup .simple-landing-mark,
  .landing-brand-lockup .simple-landing-mark img {
    width: 60px;
    height: 60px;
  }
}
/* Consistent feature card content and compact availability badges. */
.simple-landing-features article {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 24px 26px;
  min-height: 172px;
}
.simple-landing-features .simple-feature-art {
  width: 82px;
  height: 90px;
  display: grid;
  place-items: center;
  align-self: center;
}
.simple-landing-features article > div:last-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.simple-landing-features .simple-feature-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 9px;
  margin: 0 0 10px;
  border-radius: 6px;
  border: 1px solid #6aab823b;
  background: #a4d9b512;
  color: #aeddbf;
  font-size: 10px;
  line-height: 14px;
}
.simple-landing-features .simple-feature-label.upcoming {
  background: #ffffff06;
  border-color: #626c7d;
  color: #c0c8d6;
}
.simple-landing-features h2 {
  margin: 0 0 8px;
  line-height: 25px;
}
.simple-landing-features p {
  margin: 0;
  line-height: 20px;
}
@media (max-width: 1000px) {
  .simple-landing-features article {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 16px;
    padding: 22px;
  }
  .simple-landing-features .simple-feature-art {
    width: 70px;
  }
  .simple-feature-art img {
    width: 78px;
    height: 78px;
  }
}
/* Feature copy beside the artwork, status opposite the heading. */
.simple-landing-features article {
  position: relative;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
}
.simple-landing-features article > div:last-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px 12px;
  align-items: center;
  width: 100%;
}
.simple-landing-features h2 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 17px;
  line-height: 25px;
}
.simple-landing-features .simple-feature-label {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  margin: 0;
  white-space: nowrap;
  padding: 4px 8px;
  font-size: 9px;
}
.simple-landing-features p {
  grid-column: 1/-1;
  grid-row: 2;
  margin: 0;
  line-height: 20px;
}
@media (max-width: 1000px) {
  .simple-landing-features article {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 14px;
    padding: 20px;
  }
  .simple-landing-features .simple-feature-art {
    width: 60px;
  }
  .simple-landing-features .simple-feature-art img {
    width: 68px;
    height: 68px;
  }
  .simple-landing-features h2 {
    font-size: 15px;
  }
  .simple-landing-features article > div:last-child {
    column-gap: 8px;
  }
}
@media (max-width: 380px) {
  .simple-landing-features article {
    grid-template-columns: 45px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }
  .simple-landing-features .simple-feature-art {
    width: 45px;
  }
  .simple-landing-features .simple-feature-art img {
    width: 52px;
    height: 52px;
  }
  .simple-landing-features h2 {
    font-size: 13px;
  }
  .simple-landing-features .simple-feature-label {
    font-size: 8px;
    padding: 3px 5px;
  }
}
/* Align availability badges with the end of the feature description. */
.simple-landing-features h2 {
  grid-column: 1/-1;
  grid-row: 1;
}
.simple-landing-features p {
  grid-column: 1;
  grid-row: 2;
}
.simple-landing-features .simple-feature-label {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  margin: 0;
}
/* Heading-level status, sharing the description's right edge. */
.simple-landing-features article > div:last-child {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
}
.simple-landing-features h2 {
  grid-column: 1;
  grid-row: 1;
}
.simple-landing-features .simple-feature-label {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: end;
  margin: 0;
}
.simple-landing-features p {
  grid-column: 1/-1;
  grid-row: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.simple-landing-features article > div:last-child {
  position: relative;
  display: block;
  padding-top: 0;
}
.simple-landing-features h2 {
  padding-right: 110px;
  margin: 0 0 9px;
}
.simple-landing-features .simple-feature-label {
  position: absolute;
  top: 0;
  right: var(--status-end-offset, 0px);
  margin: 0;
}
.simple-landing-features p {
  width: 100%;
  max-width: none;
}
.simple-landing-features p {
  text-wrap: balance;
}
.simple-landing-features .simple-feature-label {
  background: #3b7650;
  border-color: #70ba87;
  color: #dcffe6;
}
.simple-landing-features .simple-feature-label.upcoming {
  background: #ffe16b20;
  border-color: #c6ab55;
  color: #ffe584;
}
/* Preserve natural description wrapping; badges follow the text, not vice versa. */
.simple-landing-features p {
  text-wrap: wrap;
}
.simple-landing-features article > div:last-child {
  min-width: 0;
  width: 100%;
}
.simple-landing-features p {
  display: block;
  width: 100%;
  max-width: none;
  text-wrap: wrap;
}
.simple-landing-features article:first-child h2 {
  padding-right: 0;
}
/* Both feature descriptions share identical left and right boundaries. */
.simple-landing-features article {
  grid-template-columns: 82px minmax(0, 1fr);
  padding-left: 26px;
  padding-right: 26px;
  column-gap: 22px;
}
.simple-landing-features article > div:last-child,
.simple-landing-features p {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}
@media (max-width: 1000px) {
  .simple-landing-features article {
    grid-template-columns: 60px minmax(0, 1fr);
    padding-left: 20px;
    padding-right: 20px;
    column-gap: 14px;
  }
}
.simple-landing-features h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-right: 0;
}
.simple-landing-features h2 .simple-feature-label.upcoming {
  position: static;
  display: inline-flex;
  right: auto;
  top: auto;
  margin: 0;
  flex-shrink: 0;
}
/* A quieter, better balanced introduction. */
.simple-landing-intro {
  padding: 12px 0;
  align-items: flex-start;
  text-align: left;
}
.landing-brand-lockup {
  gap: 10px;
  margin-bottom: 30px;
}
.landing-brand-lockup .simple-landing-mark,
.landing-brand-lockup .simple-landing-mark img {
  width: 54px;
  height: 54px;
}
.landing-brand-lockup > span {
  font-size: 24px;
  letter-spacing: -0.7px;
}
.simple-landing-intro h1 {
  font-size: 56px;
  line-height: 1.08;
  letter-spacing: -1.8px;
  margin: 0 0 24px;
  font-weight: 750;
}
.simple-landing-intro > p {
  max-width: 360px;
  font-size: 16px;
  line-height: 1.8;
  margin: 0 0 30px;
  color: #bdc6d4;
}
.simple-landing-intro .simple-landing-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 420px;
}
.simple-landing-intro .simple-landing-actions > a,
.simple-landing-intro .simple-landing-actions > button {
  min-width: 0;
  width: 100%;
  height: 48px;
  gap: 10px;
  padding: 0 16px;
  font-size: 12px;
}
.landing-setup-note {
  font-size: 12px;
  line-height: 1.6;
  color: #9faaba;
  margin-top: 18px;
}
@media (max-width: 1000px) {
  .simple-landing-intro h1 {
    font-size: 46px;
  }
  .simple-landing-intro > p {
    font-size: 14px;
  }
}
@media (max-width: 750px) {
  .simple-landing-intro {
    align-items: center;
    text-align: center;
  }
  .simple-landing-intro h1 {
    font-size: 44px;
  }
  .landing-brand-lockup {
    margin-bottom: 24px;
  }
  .simple-landing-intro .simple-landing-actions {
    max-width: 380px;
  }
}
/* Give the single-line introduction room between the outer page edges. */
body.gateway:not(.server-gateway) main:has(.simple-landing) {
  padding-left: 24px;
  padding-right: 24px;
}
.simple-landing {
  max-width: 1440px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 48px;
}
.simple-landing-intro h1 {
  font-size: clamp(22px, 2.25vw, 34px);
  letter-spacing: -0.8px;
  line-height: 1.25;
  white-space: nowrap;
}
@media (max-width: 1000px) {
  .simple-landing {
    gap: 26px;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
  .simple-landing-intro h1 {
    font-size: clamp(18px, 2.15vw, 24px);
  }
}
@media (max-width: 750px) {
  .simple-landing {
    grid-template-columns: 1fr;
    max-width: 540px;
    gap: 40px;
  }
  .simple-landing-intro h1 {
    white-space: normal;
    font-size: 30px;
    line-height: 1.3;
  }
  .simple-landing-intro h1 span {
    display: block;
  }
}
.simple-landing-intro h1 span.landing-headline-white {
  color: #f5f6f8;
}
@media (max-width: 750px) {
  .simple-landing-intro h1 span.landing-headline-white {
    display: inline;
  }
}
.simple-landing-intro > p {
  width: 100%;
  max-width: none;
}
.simple-landing-intro > p {
  text-align: center;
}
.simple-landing {
  gap: 80px;
}
@media (max-width: 1000px) {
  .simple-landing {
    gap: 40px;
  }
}
@media (max-width: 750px) {
  .simple-landing {
    gap: 48px;
  }
}
.simple-landing-actions .invite-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  margin: 0;
  padding: 0;
  position: static;
  transform: none;
}
.simple-landing-actions .invite-plus svg {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
}
.simple-landing-actions #invite-help,
.simple-landing-actions > a {
  align-items: center;
}
/* The public landing header only needs the brand. */
body.gateway:has(.simple-landing) .header-user-control {
  display: none !important;
}
/* Let content shrink and wrap naturally across screen sizes. */
.simple-landing,
.simple-landing-intro,
.simple-landing-feature-column,
.reference-server-directory,
.server-card-identity {
  min-width: 0;
}
@media (min-width: 751px) {
  .simple-landing-intro h1 {
    font-size: clamp(17px, 2.05vw, 32px);
  }
}
@media (max-width: 750px) {
  body.gateway:not(.server-gateway) main:has(.simple-landing) {
    padding-left: 20px;
    padding-right: 20px;
  }
  .simple-landing-intro > p {
    max-width: 100% !important;
  }
  .simple-landing-intro h1 {
    white-space: normal;
    font-size: 32px;
  }
  .simple-landing-intro .simple-landing-actions {
    max-width: 400px;
  }
  .simple-landing-features h2 {
    gap: 8px;
  }
  .simple-landing-features article {
    min-height: 0;
    padding-top: 22px;
    padding-bottom: 22px;
  }
}
@media (max-width: 430px) {
  .simple-landing-intro h1 {
    font-size: 28px;
  }
  .simple-landing-intro .simple-landing-actions {
    grid-template-columns: 1fr;
    max-width: 300px;
  }
  .simple-landing-feature-column > header > h2 {
    font-size: 25px;
  }
  .simple-landing-features article {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .simple-landing-features .simple-feature-art {
    width: 48px;
  }
  .simple-landing-features .simple-feature-art img {
    width: 58px;
    height: 58px;
  }
  .simple-landing-features h2 {
    font-size: 15px;
  }
  .simple-landing-features p {
    font-size: 12px;
  }
  .simple-landing-features h2 .simple-feature-label {
    font-size: 8px;
    padding: 3px 6px;
  }
}
.simple-landing-intro .simple-landing-actions {
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 430px) {
  .simple-landing-intro .simple-landing-actions {
    justify-self: center;
  }
}
.simple-landing-intro {
  align-items: center;
  text-align: center;
}
.simple-landing-intro h1 {
  text-align: center;
}
.simple-landing-intro > p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.simple-landing-intro .simple-landing-actions {
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}