:root {
  color-scheme: dark;
  --bg: #030303;
  --panel: #090909;
  --panel-strong: #131313;
  --text: #f7f7f7;
  --muted: #a7a7a7;
  --line: #2e2e2e;
  --blue: #ebebeb;
  --accent-blue: #eeeeee;
  --discord: #717171;
  --green: #5bd6a6;
}

/* A save used to be either a silent button label change or, for the one
   colour that still needs a fresh page load, a bare flash to blank white.
   This fades the page instead and leaves a spinner up for however long the
   save (or that one reload) actually takes. */
.save-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(3, 3, 3, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease;
}

.save-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.save-overlay-spinner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 4px solid rgba(247, 247, 247, 0.18);
  border-top-color: var(--text);
  animation: save-overlay-spin 0.8s linear infinite;
}

@keyframes save-overlay-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .save-overlay-spinner {
    animation-duration: 1.6s;
  }
}

/* Command detail pages */
.command-detail-form {
  display: grid;
  gap: 20px;
}

.command-detail-card {
  display: grid;
  gap: 18px;
}

.command-channel-layout,
.command-response-editor {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  gap: 18px;
  align-items: start;
}

.channel-picker-surface,
.selected-channel-panel {
  min-height: 300px;
}

.channel-choice-list {
  max-height: 260px;
}

.selected-channel-chip .channel-chip-hash {
  color: #b2b2b2;
  font-weight: 900;
}

.command-response-fields {
  display: grid;
  gap: 15px;
}

.command-response-preview {
  position: sticky;
  top: 92px;
  overflow: hidden;
  border: 1px solid var(--soft-line);
  border-radius: var(--surface-radius);
  background: #343434;
}

.command-response-preview .discord-preview {
  min-height: 410px;
}

.command-response-preview-title {
  margin-bottom: 7px;
  color: #f3f3f3;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: underline;
}

.command-response-preview [data-response-preview-description] {
  white-space: pre-wrap;
}

@media (max-width: 1080px) {
  .command-channel-layout,
  .command-response-editor {
    grid-template-columns: minmax(0, 1fr);
  }

  .command-response-preview {
    position: static;
  }
}

@media (max-width: 760px) {
  .command-detail-form {
    gap: 14px;
  }

  .channel-picker-surface,
  .selected-channel-panel {
    min-height: auto;
  }

  .command-response-preview .discord-preview {
    min-height: 340px;
  }
}

/* 2026 interface refinement */
body {
  background: #030303;
}

::selection {
  color: #070707;
  background: #bebebe;
}

@keyframes m5ive-surface-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-copy,
.hero-side,
.page-title,
.manage-hero,
.manage-panel:not([hidden]),
.permissions-form,
.profile-shell {
  animation: m5ive-surface-enter 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero-side,
.manage-panel:not([hidden]),
.permissions-form {
  animation-delay: 55ms;
}

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

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(243, 243, 243, 0.72);
  outline-offset: 2px;
}

.site-header {
  width: min(1440px, calc(100vw - 40px));
  min-height: 58px;
  top: 14px;
  margin-top: 14px;
  border-color: rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 8px 10px 8px 14px;
  background: rgba(7, 7, 7, 0.92);
  backdrop-filter: none;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.brand img {
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.34);
}

.nav-link,
.primary-action,
.secondary-action,
.login-pill,
.ghost-button,
.settings-form button,
.embed-workbench button {
  border-radius: 8px;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-duration: 220ms;
}

.nav-link {
  min-height: 38px;
  border-color: rgba(255, 255, 255, 0.11);
  background: #101010;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.nav-link:hover,
.secondary-action:hover,
.ghost-button:hover {
  border-color: rgba(243, 243, 243, 0.44);
  color: #fff;
  background: #212121;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(243, 243, 243, 0.06);
}

.primary-action,
.login-pill,
.settings-form button.save-settings-button,
.permissions-form .primary-action {
  border: 1px solid #cbcbcb;
  color: #080808;
  background: #d6d6d6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 10px 32px rgba(125, 125, 125, 0.16);
}

.primary-action:hover,
.login-pill:hover,
.settings-form button.save-settings-button:hover,
.permissions-form .primary-action:hover {
  border-color: #e5e5e5;
  background: #e3e3e3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 15px 36px rgba(125, 125, 125, 0.24);
}

.user-menu:hover .avatar-button,
.avatar-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(243, 243, 243, 0.2), 0 12px 24px rgba(0, 0, 0, 0.34);
}

.account-menu {
  border-color: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: #0b0b0b;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.56);
}

.hero {
  width: min(1360px, calc(100vw - 40px));
  min-height: 660px;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 430px);
  gap: 82px;
  padding: 70px 0 58px;
}

.hero-copy {
  position: relative;
  padding-left: 24px;
}

.hero-copy::before {
  content: "";
  position: absolute;
  inset: 4px auto 4px 0;
  width: 3px;
  border-radius: 3px;
  background: #eeeeee;
  box-shadow: 0 0 24px rgba(243, 243, 243, 0.5);
}

.hero h1 {
  max-width: 690px;
  margin-bottom: 20px;
  font-size: 5rem;
  line-height: 0.98;
}

.lead {
  color: #cccccc;
  font-size: 1.13rem;
  line-height: 1.72;
}

.hero-metrics span {
  min-height: 40px;
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: #0c0c0c;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.hero-side {
  display: grid;
  gap: 12px;
}

.discord-card {
  border-color: rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: #292725;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.discord-banner {
  height: 128px;
  background: #423f3c;
}

.discord-logo {
  top: 92px;
  border-color: #292725;
  border-radius: 8px;
}

.platform-signal {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 16px;
  background: #090909;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.platform-signal > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #9adfb9;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.platform-signal i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #68d391;
  box-shadow: 0 0 14px rgba(104, 211, 145, 0.5);
}

.platform-signal strong {
  font-size: 1rem;
}

.platform-signal small {
  margin: 0;
  color: var(--muted);
}

.info-section {
  width: min(1360px, calc(100vw - 40px));
  padding: 66px 0;
  border-top-color: rgba(255, 255, 255, 0.1);
}

.product-strip,
.feature-grid,
.ops-grid {
  gap: 16px;
}

.product-strip article,
.feature-grid article,
.ops-grid article {
  border-color: rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: #090909;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.product-strip article:hover,
.feature-grid article:hover,
.ops-grid article:hover {
  transform: translateY(-4px);
  border-color: rgba(243, 243, 243, 0.42);
  background: #101010;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.delivery-steps {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: #090909;
}

.delivery-steps article {
  border-right-color: rgba(255, 255, 255, 0.1);
}

.ownership-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 40px;
  margin-bottom: 30px;
  border: 1px solid rgba(243, 243, 243, 0.24);
  border-radius: 8px;
  padding: 34px;
  background: #0a0a0a;
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ownership-band h2 {
  max-width: 760px;
  margin-bottom: 14px;
  font-size: 2.9rem;
  line-height: 1.02;
}

.ownership-actions {
  min-width: 250px;
  display: grid;
  gap: 10px;
}

.ownership-actions > span {
  color: #c4c4c4;
  font-size: 0.88rem;
  font-weight: 700;
}

.ownership-actions > span::before {
  content: "";
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 9px;
  border-radius: 50%;
  background: #68d391;
}

.page {
  width: min(1440px, calc(100vw - 40px));
}

.page-title {
  margin-bottom: 34px;
}

.page-title h1 {
  font-size: 3.35rem;
}

.server-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.server-card {
  min-height: 184px;
  align-items: flex-start;
  border-color: rgba(255, 255, 255, 0.22);
  border-radius: 8px;
  padding: 20px;
  background: #090909;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 16px 42px rgba(0, 0, 0, 0.18);
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.server-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.5);
  background: #101010;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 56px rgba(0, 0, 0, 0.35);
}

.server-icon {
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
}

.manage-shell {
  width: min(1800px, calc(100vw - 40px));
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;
}

.manage-sidebar {
  top: 96px;
  gap: 20px;
  border-right-color: rgba(255, 255, 255, 0.11);
  padding-right: 24px;
}

.manage-server-head > div:last-child > span {
  display: block;
  margin-top: 5px;
  color: #8e8e8e;
  font-size: 0.78rem;
  font-weight: 700;
}

.manage-nav a {
  border-radius: 8px;
  transition-duration: 220ms;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

.manage-nav a:hover,
.manage-nav a.active {
  border-color: rgba(243, 243, 243, 0.24);
  background: #121212;
  box-shadow: inset 3px 0 0 #eeeeee;
}

.manage-hero {
  min-height: 164px;
  border-color: rgba(255, 255, 255, 0.12);
  border-top-color: rgba(243, 243, 243, 0.72);
  border-radius: 8px;
  padding: 30px;
  background: #090909;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.manage-hero h2 {
  font-size: 3.25rem;
}

.compact-manage-hero {
  min-height: 142px;
}

.settings-form,
.builder-card,
.notice,
.embed-template-list,
.embed-template-editor,
.embed-template-preview {
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #090909;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.settings-form input,
.settings-form textarea,
.settings-form select,
.permissions-form input,
.permissions-form textarea {
  border-color: #343434;
  border-radius: 8px;
  background: #0f0f0f;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.settings-form input:focus,
.settings-form textarea:focus,
.settings-form select:focus,
.permissions-form input:focus,
.permissions-form textarea:focus {
  border-color: rgba(243, 243, 243, 0.75);
  background: #141414;
  box-shadow: 0 0 0 3px rgba(243, 243, 243, 0.11);
}

.permissions-toolbar,
.profile-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 18px;
}

.permissions-toolbar h2,
.profile-section-head h2 {
  margin: 0 0 5px;
}

.count-pill,
.profile-section-head > span {
  flex: 0 0 auto;
  border: 1px solid rgba(243, 243, 243, 0.22);
  border-radius: 999px;
  padding: 6px 10px;
  color: #c8c8c8;
  background: #121212;
  font-size: 0.78rem;
  font-weight: 800;
}

.toggle-control {
  flex: 0 0 auto;
  cursor: pointer;
}

.toggle-control input {
  position: absolute;
  width: 1px !important;
  height: 1px;
  min-height: 0 !important;
  opacity: 0;
}

.toggle-control span {
  width: 46px;
  height: 26px;
  display: block;
  position: relative;
  border: 1px solid #444444;
  border-radius: 999px;
  background: #1f1f1f;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.toggle-control span::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #979797;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 180ms ease;
}

.toggle-control input:checked + span {
  border-color: #eeeeee;
  background: #434343;
  box-shadow: 0 0 0 3px rgba(243, 243, 243, 0.08);
}

.toggle-control input:checked + span::after {
  transform: translateX(20px);
  background: #e8e8e8;
}

.permissions-form {
  display: grid;
  gap: 16px;
}

.permissions-toolbar {
  position: sticky;
  top: 88px;
  z-index: 8;
  align-items: end;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  padding: 16px;
  background: rgba(9, 9, 9, 0.94);
  backdrop-filter: none;
  box-shadow: 0 15px 44px rgba(0, 0, 0, 0.3);
}

.permissions-toolbar p {
  margin: 0;
  color: var(--muted);
}

.permissions-toolbar-actions {
  display: flex;
  align-items: end;
  gap: 10px;
}

.search-field {
  display: grid;
  gap: 6px;
}

.search-field > span {
  color: #d7d7d7;
  font-size: 0.8rem;
  font-weight: 800;
}

.search-field input {
  width: 270px;
  min-height: 40px;
}

.permission-page-list {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.command-permission-row {
  border-color: rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: #090909;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.role-choice-list,
.selected-role-panel {
  border-color: #323232;
  background: #0f0f0f;
}

.role-choice:has(input:checked) {
  border-color: rgba(243, 243, 243, 0.58);
  background: rgba(243, 243, 243, 0.11);
}

.role-choice:has(input:checked) .role-check {
  border-color: #bbbbbb;
  background: #bbbbbb;
}

.selected-role-chip {
  appearance: none;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-radius: 999px;
  padding: 5px 9px;
  border-color: rgba(243, 243, 243, 0.36);
  color: #e9e9e9;
  background: rgba(243, 243, 243, 0.1);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.role-chip-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.role-chip-remove {
  width: 0;
  opacity: 0;
  overflow: hidden;
  color: #ffb4b4;
  font-size: 0.86rem;
  font-weight: 900;
  text-align: right;
  transform: translateX(5px);
  transition: width 180ms ease, margin-left 180ms ease, opacity 160ms ease, transform 180ms ease;
}

.selected-role-chip:hover,
.selected-role-chip:focus-visible {
  border-color: rgba(248, 113, 113, 0.72);
  color: #ffe4e4;
  background: rgba(239, 68, 68, 0.14);
  box-shadow: 0 8px 22px rgba(90, 18, 18, 0.2);
}

.selected-role-chip:hover .role-chip-remove,
.selected-role-chip:focus-visible .role-chip-remove {
  width: 10px;
  margin-left: 6px;
  opacity: 1;
  transform: translateX(0);
}

.template-search {
  border-color: #343434;
  border-radius: 8px;
  background: #0f0f0f;
}

.embed-template-card,
.settings-form button.embed-template-card {
  border-radius: 8px;
  background: #0f0f0f;
  content-visibility: auto;
  contain-intrinsic-size: 76px;
}

.embed-template-card.active,
.settings-form button.embed-template-card.active {
  border-color: rgba(243, 243, 243, 0.72);
  background: #242424;
  box-shadow: inset 3px 0 0 #eeeeee;
}

.role-picker {
  position: relative;
}

.role-search-shell {
  position: relative;
}

.role-search-shell .role-search {
  width: 100%;
}

.dynamic-role-choice-list {
  position: absolute;
  z-index: 18;
  top: calc(100% + 7px);
  right: 0;
  left: 0;
  max-height: 230px;
  border-color: rgba(243, 243, 243, 0.35);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.role-picker-hint {
  color: #818181;
  font-size: 0.76rem;
  line-height: 1.35;
}

button:active,
.primary-action:active,
.secondary-action:active,
.nav-link:active,
.server-card:active,
.profile-bot-list a:active {
  transform: translateY(1px) scale(0.99);
}

.site-footer {
  border-top-color: rgba(255, 255, 255, 0.12);
  color: #b6b6b6;
}

.profile-page {
  min-height: calc(100vh - 72px);
  padding: 48px 0 90px;
}

.profile-shell {
  width: min(1120px, calc(100vw - 40px));
  margin: 0 auto;
}

.profile-banner {
  position: relative;
  height: 300px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background-color: var(--profile-accent, #222222);
  background-image: none;
  background-position: center;
  background-size: cover;
  filter: none;
  box-shadow: 0 24px 75px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.profile-banner.has-banner {
  background-image: var(--profile-banner-image);
}

.profile-banner-fallback > img {
  width: 120px;
  height: 120px;
  opacity: 0.28;
  object-fit: contain;
}

.profile-identity {
  min-height: 126px;
  display: grid;
  grid-template-columns: 144px minmax(0, 1fr) auto;
  align-items: end;
  gap: 22px;
  padding: 0 24px 22px;
}

.profile-avatar {
  width: 144px;
  height: 144px;
  margin-top: -68px;
  border: 7px solid var(--bg);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.profile-name h1 {
  margin: 0 0 4px;
  font-size: 2.25rem;
  line-height: 1.05;
}

.profile-name .eyebrow {
  margin-bottom: 8px;
}

.profile-meta {
  margin: 0;
  color: var(--muted);
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #090909;
}

.profile-stats div {
  display: grid;
  gap: 5px;
  padding: 18px 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-stats div:last-child {
  border-right: 0;
}

.profile-stats strong {
  font-size: 1.35rem;
}

.profile-stats span {
  color: var(--muted);
  font-size: 0.83rem;
}

.profile-bots-section {
  margin-top: 38px;
}

.profile-section-head {
  align-items: end;
  margin-bottom: 16px;
  border-top: 0;
  padding-top: 0;
}

.profile-section-head h2 {
  font-size: 1.8rem;
}

.profile-bot-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.profile-bot-list a {
  min-height: 92px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-color: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 16px;
  background: #090909;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}

.profile-bot-list a:hover {
  transform: translateY(-3px);
  border-color: rgba(243, 243, 243, 0.42);
  background: #121212;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.profile-bot-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  background: #222222;
  font-weight: 900;
}

.profile-bot-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-bot-list a > div:nth-child(2) {
  min-width: 0;
}

.profile-bot-list a strong,
.profile-bot-list a span {
  display: block;
  overflow-wrap: anywhere;
}

.profile-bot-list a > div:nth-child(2) span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
}

.profile-bot-access {
  color: #c2c2c2 !important;
  font-size: 0.8rem;
  font-weight: 800;
}

@media (max-width: 980px) {
  .hero,
  .ownership-band {
    grid-template-columns: 1fr;
  }

  .hero {
    gap: 42px;
  }

  .hero-side {
    width: min(100%, 520px);
  }

  .permissions-toolbar,
  .permissions-toolbar-actions {
    align-items: stretch;
  }

  .permissions-toolbar {
    position: static;
    display: grid;
  }

  .permissions-toolbar-actions {
    flex-wrap: wrap;
  }

  .search-field {
    flex: 1 1 260px;
  }

  .search-field input {
    width: 100%;
  }

  .profile-bot-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .site-header,
  .hero,
  .info-section,
  .page,
  .manage-shell,
  .profile-shell {
    width: min(100% - 24px, 1440px);
  }

  .hero-copy {
    padding-left: 18px;
  }

  .hero h1 {
    font-size: 3.25rem;
  }

  .ownership-band {
    padding: 22px;
  }

  .ownership-band h2 {
    font-size: 2.25rem;
  }

  .manage-shell {
    gap: 20px;
  }

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

  .manage-nav a {
    justify-content: center;
    text-align: center;
  }

  .manage-hero {
    min-height: 130px;
    padding: 22px;
  }

  .manage-hero h2 {
    font-size: 2.35rem;
  }

  .profile-stats,
  .profile-identity {
    grid-template-columns: 1fr;
  }

  .profile-banner {
    height: 220px;
  }

  .profile-identity {
    justify-items: start;
    align-items: start;
    padding: 0 16px 22px;
  }

  .profile-avatar {
    width: 116px;
    height: 116px;
    margin-top: -52px;
  }

  .profile-identity .primary-action {
    width: 100%;
  }

  .profile-stats div,
  .profile-stats div:last-child {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .profile-stats div:last-child {
    border-bottom: 0;
  }

  .profile-bot-list a {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .profile-bot-icon {
    width: 46px;
    height: 46px;
  }

  .profile-bot-access {
    grid-column: 2;
  }
}

/* Spacious bento homepage and a quiet star field. */
:root {
  --surface-radius: 30px;
  --panel-radius: 26px;
  --soft-radius: 20px;
  --control-radius: 15px;
}

body {
  position: relative;
  isolation: isolate;
  background: #000000;
}

body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  pointer-events: none;
}

body::before {
  background: rgba(234, 234, 234, 0.72);
  box-shadow:
    4vw 9vh rgba(234, 234, 234, 0.48), 12vw 24vh rgba(184, 184, 184, 0.38),
    21vw 7vh rgba(255, 255, 255, 0.42), 29vw 38vh rgba(207, 207, 207, 0.32),
    37vw 16vh rgba(255, 255, 255, 0.36), 46vw 30vh rgba(184, 184, 184, 0.34),
    55vw 11vh rgba(255, 255, 255, 0.4), 63vw 44vh rgba(215, 215, 215, 0.28),
    72vw 18vh rgba(255, 255, 255, 0.44), 81vw 35vh rgba(184, 184, 184, 0.3),
    91vw 8vh rgba(255, 255, 255, 0.4), 96vw 52vh rgba(217, 217, 217, 0.3),
    7vw 62vh rgba(255, 255, 255, 0.36), 17vw 79vh rgba(184, 184, 184, 0.28),
    26vw 57vh rgba(255, 255, 255, 0.34), 34vw 88vh rgba(215, 215, 215, 0.3),
    43vw 69vh rgba(255, 255, 255, 0.42), 52vw 92vh rgba(184, 184, 184, 0.28),
    61vw 61vh rgba(255, 255, 255, 0.36), 70vw 83vh rgba(217, 217, 217, 0.3),
    79vw 66vh rgba(255, 255, 255, 0.38), 88vw 91vh rgba(184, 184, 184, 0.28),
    95vw 73vh rgba(255, 255, 255, 0.4);
  opacity: 0.58;
  animation: star-pulse 8s ease-in-out infinite alternate;
}

body::after {
  width: 1px;
  height: 1px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow:
    2vw 42vh rgba(255, 255, 255, 0.38), 9vw 14vh rgba(255, 255, 255, 0.3),
    15vw 49vh rgba(197, 197, 197, 0.32), 19vw 92vh rgba(255, 255, 255, 0.28),
    25vw 29vh rgba(255, 255, 255, 0.34), 31vw 73vh rgba(197, 197, 197, 0.28),
    39vw 48vh rgba(255, 255, 255, 0.34), 48vw 5vh rgba(255, 255, 255, 0.3),
    57vw 51vh rgba(197, 197, 197, 0.3), 64vw 25vh rgba(255, 255, 255, 0.34),
    68vw 96vh rgba(255, 255, 255, 0.26), 75vw 47vh rgba(197, 197, 197, 0.3),
    84vw 13vh rgba(255, 255, 255, 0.34), 89vw 59vh rgba(255, 255, 255, 0.3),
    98vw 27vh rgba(197, 197, 197, 0.3);
  opacity: 0.5;
  animation: star-pulse 11s ease-in-out 1.5s infinite alternate-reverse;
}

body > * {
  position: relative;
  z-index: 1;
}

@keyframes star-pulse {
  from { opacity: 0.32; }
  to { opacity: 0.62; }
}

.site-header,
.site-header.is-compact {
  border-radius: 28px;
}

.home-hero {
  width: min(1400px, calc(100vw - 48px));
  min-height: clamp(560px, 72vh, 690px);
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, 430px);
  gap: clamp(48px, 8vw, 120px);
  padding: 58px 0 72px;
}

.home-hero .hero-copy {
  padding-left: 0;
}

.home-hero .hero-copy::before {
  display: none;
}

.home-hero h1 {
  max-width: 820px;
  margin: 14px 0 24px;
  font-size: clamp(4.2rem, 7.8vw, 7rem);
  line-height: 0.92;
}

.home-hero .lead {
  max-width: 660px;
  margin: 0 0 30px;
  color: #cfcfcf;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.65;
}

.home-hero .hero-actions {
  margin: 0;
}

.home-hero .primary-action,
.home-hero .secondary-action,
.home-cta .primary-action {
  min-height: 52px;
  border-radius: 16px;
  padding: 0 22px;
}

.hero-assurance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 24px 0 0;
  color: #939393;
  font-size: 0.86rem;
  font-weight: 700;
}

.hero-assurance span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #eeeeee;
}

.home-hero .hero-side {
  justify-self: end;
  width: 100%;
  max-width: 430px;
}

.home-hero .discord-card {
  border-radius: 38px;
  background: #272523;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.home-hero .discord-logo {
  border-radius: 18px;
}

.home-bento-section {
  width: min(1400px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 76px 0 58px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.home-section-heading {
  max-width: 760px;
  margin-bottom: 34px;
}

.home-section-heading h2,
.home-cta h2 {
  margin: 8px 0 14px;
  font-size: clamp(2.5rem, 5vw, 4.35rem);
  line-height: 1;
}

.home-section-heading > p:last-child,
.home-cta > div > p:last-child {
  margin: 0;
  color: #b2b2b2;
  font-size: 1.04rem;
  line-height: 1.65;
}

.home-bento-grid {
  display: grid;
  grid-template-areas:
    "moderation moderation automation"
    "management community customization"
    "economy economy customization";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 0.95fr);
  grid-template-rows: minmax(210px, auto) minmax(210px, auto) minmax(190px, auto);
  gap: 22px;
}

.home-bento-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 38px;
  padding: clamp(28px, 3vw, 42px);
  background: #080808;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), border-color 240ms ease, background-color 240ms ease, box-shadow 240ms ease;
}

.home-bento-card:hover {
  transform: translateY(-5px);
  border-color: rgba(183, 183, 183, 0.34);
  background: #0d0d0d;
  box-shadow: 0 32px 86px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.home-bento-card h3 {
  margin: 0 0 13px;
  color: #f5f5f5;
  font-size: clamp(1.3rem, 2.1vw, 1.65rem);
  line-height: 1.15;
}

.home-bento-card p {
  max-width: 700px;
  margin: 0;
  color: #a5a5a5;
  font-size: 1rem;
  line-height: 1.72;
}

.bento-moderation { grid-area: moderation; border-color: rgba(157, 157, 157, 0.2); }
.bento-automation { grid-area: automation; border-color: rgba(116, 216, 196, 0.18); }
.bento-management { grid-area: management; border-color: rgba(255, 200, 119, 0.18); }
.bento-community { grid-area: community; border-color: rgba(182, 182, 182, 0.18); }
.bento-customization { grid-area: customization; border-color: rgba(181, 181, 181, 0.18); }
.bento-economy { grid-area: economy; border-color: rgba(255, 151, 181, 0.18); }

.home-cta {
  width: min(1400px, calc(100vw - 48px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  margin: 28px auto 78px;
  border: 1px solid rgba(243, 243, 243, 0.24);
  border-radius: 38px;
  padding: clamp(30px, 5vw, 56px);
  background: #0a0a0a;
  box-shadow: 0 28px 78px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.home-cta > div {
  max-width: 820px;
}

.home-cta .primary-action {
  flex: 0 0 auto;
}

@media (max-width: 1040px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 38px;
  }

  .home-bento-grid {
    grid-template-areas:
      "moderation moderation"
      "automation management"
      "community customization"
      "economy economy";
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
}

@media (max-width: 760px) {
  .site-header,
  .site-header.is-compact {
    border-radius: 22px;
  }

  .home-hero,
  .home-bento-section,
  .home-cta {
    width: calc(100vw - 24px);
  }

  .home-hero {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding: 46px 0 58px;
  }

  .home-hero h1 {
    font-size: clamp(3.4rem, 18vw, 5.4rem);
  }

  .home-hero .hero-side {
    justify-self: stretch;
    max-width: none;
  }

  .home-hero .discord-card,
  .home-bento-card,
  .home-cta {
    border-radius: 30px;
  }

  .home-bento-section {
    padding-top: 56px;
  }

  .home-bento-grid {
    grid-template-areas:
      "moderation"
      "automation"
      "management"
      "community"
      "customization"
      "economy";
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .home-bento-card {
    min-height: 190px;
    padding: 28px;
  }

  .home-cta {
    align-items: stretch;
    flex-direction: column;
    margin-bottom: 52px;
  }

  .home-cta .primary-action {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Command workspace and global unsaved-state treatment. */

.command-action-configs {
  margin-top: 20px;
}

.command-action-panel {
  display: grid;
  gap: 18px;
  border-color: rgba(243, 243, 243, 0.38);
  padding: 20px;
  background: #0c0c0c;
  box-shadow: inset 3px 0 0 #eeeeee, 0 18px 40px rgba(0, 0, 0, 0.2);
  animation: command-panel-enter 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.command-action-panel[hidden] {
  display: none;
}

@keyframes command-panel-enter {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.command-action-panel-head,
.command-action-role-copy,
.selected-role-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.command-action-panel-head h3,
.command-action-panel-head p,
.command-action-role-copy strong,
.command-action-role-copy span,
.selected-role-panel-head strong,
.selected-role-panel-head span {
  margin: 0;
}

.command-action-panel-head h3 {
  margin-top: 4px;
  font-size: 1.2rem;
}

.command-action-panel-head p,
.command-action-role-copy span,
.selected-role-panel-head span {
  color: var(--muted);
  font-size: 0.82rem;
}

.command-action-role-copy {
  align-items: baseline;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
}

.command-action-role-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 14px;
}

.command-action-panel .role-choice-list {
  max-height: 250px;
  overflow-y: auto;
}

.command-action-panel .selected-role-panel {
  align-content: start;
  min-height: 180px;
  padding: 14px;
}

.icon-close-button {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid #3f3f3f;
  border-radius: 8px;
  padding: 0;
  color: #d3d3d3;
  background: #111111;
  font-size: 1.2rem;
  line-height: 1;
}

.icon-close-button:hover {
  border-color: rgba(248, 113, 113, 0.58);
  color: #ffd7d7;
  background: rgba(127, 29, 29, 0.25);
}

.unsaved-changes-bar {
  position: fixed;
  z-index: 1000;
  left: 50%;
  bottom: 18px;
  width: min(760px, calc(100vw - 28px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(248, 113, 113, 0.68);
  border-radius: 8px;
  padding: 12px 12px 12px 16px;
  color: #f0f0f0;
  background: rgba(48, 14, 18, 0.97);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.58), inset 3px 0 0 #ef4444;
  opacity: 0;
  transform: translate(-50%, calc(100% + 32px));
  transition: opacity 220ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(14px);
}

.unsaved-changes-bar[hidden] {
  display: none;
}

.unsaved-changes-bar.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.unsaved-changes-copy,
.unsaved-changes-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.unsaved-pulse {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #fb7185;
  box-shadow: 0 0 0 5px rgba(251, 113, 133, 0.12);
  animation: unsaved-pulse 1.7s ease-in-out infinite;
}

@keyframes unsaved-pulse {
  50% { box-shadow: 0 0 0 8px rgba(251, 113, 133, 0); }
}

.unsaved-cancel-button,
.unsaved-save-button {
  min-height: 38px;
  border-radius: 8px;
  padding: 0 14px;
  font-weight: 850;
}

.unsaved-cancel-button {
  border: 1px solid #545454;
  color: #e7e7e7;
  background: #353535;
}

.unsaved-save-button {
  border: 1px solid #fb7185;
  color: #fff;
  background: #dc2626;
  box-shadow: 0 8px 20px rgba(220, 38, 38, 0.28);
}

.unsaved-save-button:hover {
  background: #ef4444;
}

@media (max-width: 860px) {
  .command-action-panel-head,
  .command-action-role-copy {
    align-items: stretch;
    flex-direction: column;
  }

  .command-action-role-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .unsaved-changes-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .unsaved-changes-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@layer legacy {
* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(1680px, calc(100vw - 44px));
  margin: 12px auto 0;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  padding: 10px 14px;
  background: rgba(7, 7, 7, 0.94);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 70px rgba(0, 0, 0, 0.34);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0;
}

.brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-link,
.primary-action,
.embed-workbench button,
.settings-form button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0 16px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease, box-shadow 180ms ease;
}

.nav-link.active,
.embed-workbench button,
.settings-form button {
  border-color: transparent;
  color: #000000;
  background: #fff;
}

.primary-action,
.secondary-action,
.login-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 20px;
  font-weight: 800;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.nav-link:hover,
.primary-action:hover,
.secondary-action:hover,
.login-pill:hover,
.embed-workbench button:hover,
.settings-form button:hover,
.ghost-button:hover,
.add-embed-button:hover,
.clear-builder-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(243, 243, 243, 0.12);
}

.nav-link:active,
.primary-action:active,
.secondary-action:active,
.login-pill:active,
.embed-workbench button:active,
.settings-form button:active,
.ghost-button:active,
.add-embed-button:active,
.clear-builder-button:active {
  transform: translateY(0) scale(0.99);
}

.primary-action,
.login-pill {
  color: #000000;
  background: #fff;
}

.primary-action.compact {
  min-height: 38px;
  margin-top: 14px;
  padding: 0 18px;
}

.secondary-action {
  border-color: var(--line);
  color: var(--text);
  background: #0b0b0b;
}

.nav-link.quiet {
  color: #cbcbcb;
}

.nav-link.muted {
  color: var(--muted);
}

.avatar-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  padding: 0;
  background: #010101;
  cursor: pointer;
}

.avatar-button img,
.account-head img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.user-menu {
  position: relative;
}

.account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 228px;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #000000;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

.user-menu:hover .account-menu,
.user-menu.is-open .account-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.account-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.account-head strong,
.account-head span {
  display: block;
}

.account-head span {
  color: var(--muted);
  font-size: 0.88rem;
}

.account-menu a {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  color: #ebebeb;
  font-weight: 700;
}

.account-menu a:hover {
  background: #0d0d0d;
}

.account-menu a:last-child {
  border-bottom: 0;
}

.hero {
  width: min(1680px, calc(100vw - 44px));
  min-height: 720px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  align-items: center;
  gap: 96px;
  margin: 0 auto;
  padding: 64px 0 72px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--accent-blue);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

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

.hero h1 {
  max-width: 760px;
  margin-bottom: 18px;
  font-size: 5.5rem;
  line-height: 0.94;
}

.lead {
  max-width: 650px;
  color: #cfcfcf;
  font-size: 1.2rem;
  line-height: 1.7;
}

.hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.hero-metrics span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(243, 243, 243, 0.22);
  border-radius: 4px;
  padding: 0 14px;
  color: #c6c6c6;
  background: #0a0a0a;
  font-size: 0.92rem;
  font-weight: 700;
}

.hero-metrics strong {
  color: #f6f6f6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.discord-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #343230;
  border-radius: 12px;
  background: #2b2c31;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.discord-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.46);
  box-shadow: 0 34px 95px rgba(0, 0, 0, 0.58);
}

.discord-banner {
  height: 118px;
  background: #413e3b;
}

.discord-logo {
  position: absolute;
  top: 84px;
  left: 22px;
  width: 72px;
  height: 72px;
  border: 6px solid #2b2c31;
  border-radius: 18px;
  background: #050506;
}

.discord-card-body {
  padding: 42px 22px 22px;
}

.discord-card h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font-size: 1rem;
}

.discord-card h2::after {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background: #fff;
  clip-path: polygon(50% 0%, 62% 20%, 84% 15%, 85% 38%, 100% 50%, 85% 62%, 84% 85%, 62% 80%, 50% 100%, 38% 80%, 16% 85%, 15% 62%, 0% 50%, 15% 38%, 16% 15%, 38% 20%);
}

.discord-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: #c6bdb4;
  font-size: 0.92rem;
}

.discord-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.discord-stats i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #979089;
}

.discord-stats .online-dot {
  background: #44d07b;
}

.discord-card p {
  margin: 9px 0 0;
  color: #d4cac0;
  line-height: 1.45;
}

.hero-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: rgba(19, 19, 19, 0.82);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.hero-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: #e6e6e6;
}

.status-row span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
}

.preview-grid {
  display: grid;
  gap: 12px;
}

.preview-grid article,
.server-card,
.empty-state,
.settings-form,
.notice {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.preview-grid article {
  padding: 16px;
}

small {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-weight: 700;
}

.page {
  width: min(1680px, calc(100vw - 44px));
  margin: 0 auto;
  padding: 48px 0 80px;
}

.page.narrow {
  width: min(720px, calc(100vw - 32px));
}

.page.embed-page {
  width: min(1880px, calc(100vw - 44px));
  padding-top: 36px;
}

.embed-titlebar {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.clear-builder-button {
  min-height: 42px;
  flex: 0 0 auto;
  border: 1px solid rgba(227, 93, 106, 0.38);
  border-radius: 8px;
  padding: 0 16px;
  color: #ffd4d4;
  background: rgba(227, 93, 106, 0.1);
  font-weight: 900;
  cursor: pointer;
}

.clear-builder-button:hover {
  border-color: rgba(227, 93, 106, 0.62);
  background: rgba(227, 93, 106, 0.16);
}

.embed-page .page-title,
.embed-page .back-link,
.embed-page .notice {
  max-width: 980px;
}

.embed-page .page-title h1 {
  font-size: 4rem;
}

.page-title h1 {
  margin-bottom: 8px;
  font-size: 3.8rem;
}

.page-copy,
.section-copy {
  max-width: 720px;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.65;
}

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

.server-card {
  display: flex;
  gap: 16px;
  min-height: 164px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.server-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.92);
  background: #0b0b0b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 14px 38px rgba(0, 0, 0, 0.34);
}

.server-card p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.5;
}

.server-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-top: 12px;
  border: 1px solid rgba(243, 243, 243, 0.42);
  border-radius: 999px;
  padding: 0 9px;
  color: #d3d3d3;
  background: rgba(243, 243, 243, 0.12);
  font-size: 0.76rem;
  font-weight: 800;
}

.server-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--panel-strong);
  font-weight: 900;
}

.server-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.empty-state {
  display: grid;
  justify-items: start;
  padding: 28px;
}

.empty-state p {
  color: var(--muted);
  line-height: 1.6;
}

.back-link {
  display: inline-flex;
  margin-bottom: 24px;
  color: var(--muted);
  font-weight: 700;
}

.notice {
  margin-bottom: 16px;
  padding: 14px 16px;
  color: #d7ffea;
  background: rgba(91, 214, 166, 0.12);
}

.notice.danger {
  color: #ffd4d4;
  background: rgba(227, 93, 106, 0.13);
}

.notice.is-error {
  color: #ffd4d4;
  background: rgba(227, 93, 106, 0.13);
}

button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 22px;
}

.settings-form {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.builder-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #000000;
}

.builder-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

.builder-card-head h2 {
  margin: 0;
}

.builder-card-head .form-help {
  margin-top: 6px;
}

.settings-form label {
  display: grid;
  gap: 8px;
  color: #dfdfdf;
  font-weight: 700;
}

.settings-form input,
.settings-form select,
.settings-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: #0c0c0c;
  font: inherit;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.settings-form input,
.settings-form select {
  min-height: 44px;
  padding: 0 13px;
}

.settings-form textarea {
  min-height: 96px;
  resize: vertical;
  padding: 12px 13px;
  line-height: 1.55;
}

.settings-form input:focus,
.settings-form select:focus,
.settings-form textarea:focus {
  outline: 2px solid rgba(113, 113, 113, 0.45);
  border-color: var(--blue);
}

.settings-form h2 {
  margin-bottom: 0;
  font-size: 1rem;
}

.embed-workbench {
  display: grid;
  gap: 16px;
}

.embed-builder {
  grid-template-columns: minmax(760px, 1fr) minmax(520px, 0.76fr);
  align-items: start;
  gap: 28px;
  margin-top: 12px;
}

.embed-editor {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.embed-stack {
  display: grid;
  gap: 16px;
}

.embed-card {
  position: relative;
}

.embed-card.is-hidden {
  display: none;
}

.embed-compact-row {
  grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1fr);
}

.embed-details {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0;
  background: #050505;
}

.embed-details summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 14px;
  color: #f3f3f3;
  font-weight: 800;
}

.embed-details[open] {
  padding-bottom: 14px;
}

.embed-details[open] summary {
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.embed-details > :not(summary) {
  margin-left: 14px;
  margin-right: 14px;
}

/* Server Basics groups several cards behind one fold instead of listing
   them all at once -- the summary carries a description under its title,
   so the base single-line layout above does not fit it. */
.basics-group summary {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 0;
  padding: 14px 16px;
}

.basics-group summary small {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.84rem;
}

.basics-group[open] > :not(summary) {
  margin-top: 2px;
}

/* Logging's toggle row sits directly above its channel-picker grid, with
   nothing else between them -- without this the row's border and the
   cards below it touch. */
.basics-group .dropdown-response-toggle-row + .server-reference-grid {
  margin-top: 16px;
}

.ghost-button,
.add-embed-button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 14px;
  color: var(--text);
  background: #0b0b0b;
  font-weight: 800;
  cursor: pointer;
}

.save-settings-button,
.command-permissions-actions .save-settings-button,
#panel-modules > .builder-card-head .save-settings-button {
  min-height: 38px;
  flex: 0 0 auto;
  border-color: rgba(243, 243, 243, 0.48);
  border-radius: 8px;
  padding: 0 16px;
  color: #f4f4f4;
  background: #232323;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 30px rgba(243, 243, 243, 0.08);
}

.save-settings-button:hover,
.command-permissions-actions .save-settings-button:hover,
#panel-modules > .builder-card-head .save-settings-button:hover {
  border-color: rgba(184, 184, 184, 0.72);
  background: #2f2f2f;
}

.add-embed-button {
  width: 100%;
  min-height: 48px;
  border-style: dashed;
  color: #dffcf3;
  background: rgba(91, 214, 166, 0.08);
}

.send-bar {
  position: sticky;
  bottom: 0;
  z-index: 8;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(16px);
}

.send-bar button {
  width: 100%;
  min-height: 46px;
}

.manage-shell {
  width: min(1880px, calc(100vw - 44px));
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  margin: 0 auto;
  padding: 38px 0 88px;
}

.manage-sidebar {
  position: sticky;
  top: 88px;
  display: grid;
  align-content: start;
  gap: 18px;
  border-right: 1px solid var(--line);
  padding-right: 24px;
}

.manage-server-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.manage-guild-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #000000;
  background: #8ef7ed;
  font-weight: 900;
}

.manage-guild-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.manage-server-head h1 {
  margin: 0;
  color: #f3f3f3;
  font-size: 1.18rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.manage-nav {
  display: grid;
  gap: 8px;
  align-content: start;
}

.manage-nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 14px;
  color: var(--muted);
  font-weight: 800;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.manage-nav a:hover,
.manage-nav a.active {
  border-color: var(--line);
  color: var(--text);
  background: #0b0b0b;
}

.manage-nav a:hover {
  transform: translateX(3px);
}

.manage-content {
  display: grid;
  gap: 18px;
  min-width: 0;
}

/* The Bot panel is split into sub-pages; the same override the panels need,
   for the same reason -- something upstream gives these a display. */
.bot-subpanel[hidden] {
  display: none !important;
}

.bot-subpanel {
  display: grid;
  gap: 18px;
}

.manage-panel[hidden] {
  display: none !important;
}

.manage-hero {
  min-height: 148px;
  display: grid;
  align-content: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 26px;
  border-top-color: rgba(243, 243, 243, 0.7);
  background: #050505;
}

.manage-hero h2 {
  max-width: 980px;
  margin-bottom: 10px;
  color: #f3f3f3;
  font-size: 3.7rem;
  line-height: 1;
}

.manage-hero p:last-child {
  max-width: 740px;
  margin: 8px 0 0;
  color: #c7c7c7;
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1.3;
}

.manage-hero .eyebrow {
  color: var(--accent-blue);
}

.manage-panels {
  display: grid;
  gap: 16px;
}

.embed-template-panel {
  padding: 16px;
}

.template-global-tools {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 190px auto;
  align-items: end;
  gap: 14px;
  border: 1px solid rgba(243, 243, 243, 0.18);
  border-radius: 8px;
  padding: 14px;
  background: #090909;
}

.template-global-tools strong {
  display: block;
  margin-bottom: 4px;
  color: #f3f3f3;
}

.template-global-tools .form-help {
  margin: 0;
}

.embed-template-workbench {
  display: grid;
  grid-template-columns: 220px minmax(380px, 1fr) minmax(340px, 0.8fr);
  gap: 16px;
  align-items: start;
}

.embed-template-list,
.embed-template-editor,
.embed-template-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #040404;
}

.embed-template-list {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.embed-template-list-head,
.template-editor-title {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.embed-template-list-head strong,
.template-editor-title h3 {
  margin: 0;
  color: #f3f3f3;
}

.embed-template-list-head span,
.template-editor-title span {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--muted);
  background: #0d0d0d;
  font-size: 0.75rem;
  font-weight: 800;
}

.embed-template-cards {
  display: grid;
  gap: 8px;
  max-height: 620px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.template-search {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--text);
  background: #0c0c0c;
  font: inherit;
  font-weight: 800;
}

.template-search:focus {
  outline: 2px solid rgba(243, 243, 243, 0.45);
  border-color: var(--blue);
}

.settings-form button.embed-template-card,
.embed-template-card {
  width: 100%;
  min-width: 0;
  min-height: auto;
  display: grid;
  justify-content: stretch;
  gap: 5px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  background: #0c0c0c;
  text-align: left;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.embed-template-card.is-filtered {
  display: none;
}

.settings-form button.embed-template-card:hover,
.embed-template-card:hover {
  transform: translateY(-1px);
  border-color: rgba(243, 243, 243, 0.42);
  background: #121212;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.settings-form button.embed-template-card.active,
.embed-template-card.active {
  border-color: rgba(243, 243, 243, 0.7);
  background: #1e1e1e;
}

.settings-form button.embed-template-card strong,
.embed-template-card strong {
  flex: 1 1 auto;
  min-width: 0;
  color: #f3f3f3;
  font-size: 1.02rem;
  letter-spacing: 0;
  line-height: 1.15;
  overflow-wrap: break-word;
}

.settings-form button.embed-template-card small,
.embed-template-card small {
  min-width: 0;
  color: var(--muted);
  line-height: 1.35;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.embed-template-editor {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.embed-template-preview {
  position: sticky;
  top: 92px;
  overflow: hidden;
}

.embed-template-preview .discord-preview {
  min-height: 620px;
}

.template-field-stack {
  display: grid;
  gap: 12px;
}

.template-field-row {
  grid-template-columns: minmax(150px, 0.5fr) minmax(220px, 1fr) 90px 90px;
}

/* Just the button and whatever embeds have been added: the heading, the
   explanation and the empty-state line said nothing the button does not. */
.additional-embeds-builder {
  display: grid;
  gap: 12px;
  justify-items: start;
}

.additional-embeds-head,
.additional-embed-card-head,
.additional-embed-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.additional-embeds-head,
.additional-embed-card-head {
  justify-content: space-between;
}

.additional-embeds-head h4,
.additional-embed-card-head strong {
  margin: 0;
  color: #f7f7f7;
}

.additional-embeds-head .form-help {
  margin: 4px 0 0;
}

.additional-embed-stack {
  width: 100%;
  display: grid;
  gap: 14px;
}

.additional-embed-card {
  min-width: 0;
  display: grid;
  gap: 14px;
  border: 1px solid rgba(178, 178, 178, 0.2);
  border-radius: 18px;
  padding: 14px;
  background: #090909;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.additional-embed-card-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.additional-embed-card-head > div:first-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

/* The name and its fold arrow sit side by side, not stacked like the
   plain name used to be alone. */
.additional-embed-card-name {
  display: flex !important;
  align-items: center;
  gap: 6px;
}

.additional-embed-card-name .icon-button {
  width: 26px;
  min-width: 26px;
  height: 26px;
}

.additional-embed-card-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.additional-embed-card .icon-button {
  width: 38px;
  min-width: 38px;
  padding: 0;
}

.additional-embed-empty {
  margin: 0;
  border: 1px dashed rgba(178, 178, 178, 0.2);
  border-radius: 14px;
  padding: 14px;
  color: var(--muted);
  text-align: center;
}

.additional-embed-limit {
  margin: 0;
}

.ticket-option-stack {
  display: grid;
  gap: 10px;
}

.ticket-option-row {
  display: grid;
  grid-template-columns: minmax(100px, 0.36fr) minmax(160px, 0.64fr) minmax(260px, 1fr);
  align-items: end;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

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

.embed-action-row > [hidden],
[hidden] {
  display: none !important;
}

.compact-button {
  min-height: 38px;
  align-self: end;
  padding: 0 12px;
}

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

.presence-option {
  min-height: 68px;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 10px !important;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #0c0c0c;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.presence-option:hover,
.presence-option:has(input:checked) {
  border-color: rgba(255, 255, 255, 0.22);
  background: #121212;
}

.presence-option:hover {
  transform: translateY(-1px);
}

.presence-option input {
  width: auto;
  min-height: auto;
}

.presence-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.presence-dot.online {
  background: #44d07b;
}

.presence-dot.idle {
  background: #f0b232;
}

.presence-dot.dnd {
  background: #ed4245;
}

.presence-dot.invisible {
  border: 2px solid #848484;
}

.embed-preview-panel {
  min-width: 0;
}

.preview-sticky {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 0;
  border: 1px solid #272727;
  border-radius: 8px;
  overflow: hidden;
  background: #343434;
}

.preview-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px;
  background: #202020;
}

.preview-toolbar h2 {
  margin: 4px 0 0;
  font-size: 1.05rem;
}

.preview-channel {
  max-width: 190px;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discord-preview {
  min-height: 520px;
  padding: 18px 18px 24px;
  background: #313338;
}

.discord-preview,
.discord-preview * {
  overflow-wrap: anywhere;
}

.discord-preview {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  color: #dbdee1;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.discord-avatar {
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 50%;
  background: #111214;
}

.discord-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discord-message-body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.discord-embeds {
  display: grid;
  gap: 8px;
  /* The drop line is placed against this box, so it can float over the
     blocks instead of pushing a row into the grid and shifting them all. */
  position: relative;
}

.discord-message-meta {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.discord-message-meta strong {
  color: #f2f3f5;
  font-size: 0.98rem;
}

.discord-message-meta span {
  border-radius: 3px;
  padding: 1px 4px;
  color: #fff;
  /* The APP tag is blurple in Discord. */
  background: #5865f2;
  font-size: 0.62rem;
  font-weight: 500;
}

.discord-message-meta time {
  color: #949ba4;
  font-size: 0.74rem;
}

.discord-message-text,
.discord-embed-description,
.discord-field p {
  white-space: pre-wrap;
}

.discord-message-text {
  color: #dbdee1;
  line-height: 1.38;
}

.discord-message-text.empty,
.discord-embed-title.empty,
.discord-embed-description.empty {
  color: #98918a;
}

.discord-custom-emoji {
  /* Discord gives an emoji in a line of text 1.375 times the font size (22px
     in a 16px headline, measured). Scaled like the block around it, so it
     takes up the same share of the line as it does there -- which is what
     decides whether it still fits. */
  width: 1.463em;
  height: 1.463em;
  display: inline-block;
  /* Discord's emoji do not make their line taller: a line with an arrow in it
     has the same 18px pitch as one without (measured in a real message, quote
     lines 18px apart). The negative margins take the picture out of the line's
     height; vertical-align is raised by the same 0.3em so it sits exactly where
     it did, 0.28em below the baseline. */
  margin: -0.3em 0.03em -0.3em;
  vertical-align: 0.02em;
  object-fit: contain;
}

.discord-mention {
  padding: 0 2px;
  border-radius: 3px;
  /* Discord's own blurple tint, not the warm one this site uses elsewhere. */
  background: rgba(88, 101, 242, 0.3);
  color: #c9cdfb;
  font-weight: 500;
}

.discord-embed {
  position: relative;
  /* Discord does not give an embed a fixed width: it shrink-wraps to its
     widest piece and stops at 520px. Measured in two real messages -- one
     with a picture came out 432px wide, because a picture inside an embed is
     drawn at most 400px wide, and a text-heavy one filled the 520. A preview
     that is always one width breaks lines where Discord does not.

     The numbers are 6.4% larger than Discord's, because the letters are not
     Discord's: gg sans ships inside its app and is on nobody else's machine,
     so a browser falls back to Arial -- about 6% wider for the same words
     (measured on three lines of one message: 358/384, 327/342, 352/376). The
     whole block is scaled instead, which is the same picture at a slightly
     larger zoom, and every line then breaks where Discord breaks it. */
  width: fit-content;
  max-width: min(100%, 553px);
  justify-self: start;
  overflow: hidden;
  border-radius: 4px;
  background: #2b2d31;
}

/* With a picture in it, the picture decides: Discord sizes such an embed to
   the 400px the picture is drawn at (426 here) plus its padding, and the text
   wraps inside that -- measured in a real session message, 432px wide with a
   long paragraph in it. Without a picture the text fills the 520 instead. */
.discord-embed:has(.discord-image:not([hidden])) {
  max-width: min(100%, 458px);
}

.discord-embed-accent {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #8ef7ed;
}

.discord-embed-content {
  display: grid;
  gap: 10px;
  min-width: 0;
  /* 16 left (4 of them the accent) and 16 right, as Discord has them, so what
     is left for the text is its column. */
  padding: 12px 16px 12px 16px;
}

.discord-embed-author,
.discord-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.discord-embed-author img,
.discord-footer img {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
}

.discord-embed-author span {
  color: #f2f3f5;
  font-size: 0.88rem;
  font-weight: 700;
}

.discord-embed-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
}

/* The gap belongs to the thumbnail, not to the column: as a grid gap it took
   14px off the text even when there was no thumbnail at all, and the text
   then wrapped earlier than in Discord for no reason. */
.discord-embed-main > .discord-thumbnail {
  margin-left: 14px;
}

.discord-embed-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.discord-embed-title {
  width: fit-content;
  max-width: 100%;
  color: #f2f3f5;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
}

.discord-embed-title.has-link {
  color: #857f79;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.discord-embed-description {
  color: #dbdee1;
  /* Discord's own 14px. A larger size here would wrap sooner than the real
     message does. */
  font-size: 0.875rem;
  /* 18px, as in a real embed: five lines of a message measured 18px apart. */
  line-height: 1.2857;
}

.discord-embed-description strong {
  /* Discord's **bold** is 700, and it keeps the colour of the text around it
     -- measured in a real message, bold and plain peak at the same value.
     Brightening it here made every bold word look like a heading. */
  font-weight: 700;
}

.discord-embed-description u {
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

/* A blockquote. Discord draws one bar down the side of the whole block and
   changes nothing else about the text -- not its size, not its weight, not
   its colour. Drawn bold and a size up, four lines of quoted text came out
   looking like four headlines with four separate bars. */
/* In an embed description the text of a quote is drawn in the muted grey, the
   same one a subtext line has -- measured in a real message: quoted text
   (171,172,178) against plain text (239,239,241), subtext (171,172,178). A
   heading inside the quote keeps its own colour (it has one of its own, below). */
.discord-embed-description .discord-quote {
  color: #949ba4;
}

.discord-quote,
.discord-quote-line {
  display: block;
  /* Measured in a real message: the bar is 4px and the text starts 11 to 12
     pixels from its left edge, so the indent is 12 -- not 16. Four pixels too
     many were enough to wrap a headline here that Discord keeps on one line,
     with three pixels to spare. 8.8 rather than 8 because everything here is
     drawn 6.4% larger; the bar stays 4, a hairline does not scale. */
  border-left: 4px solid #4e5058;
  padding-left: 8.8px;
  margin: 4px 0;
}

.discord-heading-line {
  /* A headline is a block in Discord: it holds the whole line and keeps its
     distance from the text under it. Drawn as a plain span inheriting the
     body colour, it read as slightly larger body text rather than a heading,
     and the description sat straight against it. */
  display: block;
  margin: 8px 0 2px;
  /* Brighter than the text around it, the way Discord draws a heading; the
     description is #dbdee1 and the heading used to inherit exactly that. */
  color: #f2f3f5;
  /* 0.97rem rather than 1rem. gg sans is not on this machine, and Arial Bold
     comes out 9.7 to 11.8% wider than it on a headline (measured on one real
     message: 375px against 342px) but only 7.2% wider on body text. Scaled by
     1.072/1.1075 the headline overshoots by the same amount as the text under
     it, so a headline breaks where Discord breaks it. Line height is Discord's
     1.375 (22px, measured). */
  font-size: 0.97rem;
  line-height: 1.375;
  /* Discord's headings are bold, not black. With 900 the browser widens Arial
     on its own -- 427px instead of 376px for the same headline -- and the
     preview wrapped lines Discord keeps on one. */
  font-weight: 700;
}

/* The first line of an embed, a message or a quote starts at the top: no gap
   above it, or every headline would push its own block down. */
.discord-embed-description > .discord-heading-line:first-child,
.discord-message-text > .discord-heading-line:first-child,
.discord-quote > .discord-heading-line:first-child,
.discord-field p > .discord-heading-line:first-child {
  margin-top: 0;
}

/* Matches how Discord scales its three heading levels. */
.discord-heading-line.is-h1 { font-size: 1.45rem; }
.discord-heading-line.is-h2 { font-size: 1.21rem; }
.discord-heading-line.is-h3 { font-size: 0.97rem; line-height: 22px; }

/* A headline inside a quote, in an embed description. The bar of a real one is
   56px tall for a two-line headline: the 44px of text plus 4px above and 8px
   below, which belong to the heading and sit inside the quote (measured; a
   plain quote's bar is exactly its lines, five lines 90px). flow-root keeps
   those margins from collapsing out of the block, where the bar would stop
   at the text. */
.discord-embed-description .discord-quote {
  display: flow-root;
}

.discord-embed-description .discord-quote > .discord-heading-line,
.discord-embed-description .discord-quote > .discord-heading-line:first-child {
  margin: 4px 0 8px;
}

/* The column already sets the width; the select just fills it. */
.headline-builder > .headline-size-field select {
  width: 100%;
}

.discord-thumbnail {
  width: 86px;
  max-height: 86px;
  border-radius: 4px;
  object-fit: cover;
}

.discord-image {
  max-width: 100%;
  overflow: hidden;
  border-radius: 4px;
}

/* A divider is drawn as a flat bar, and a bar has no width of its own -- an
   image brings its width with it, a coloured box does not. The embed shrink-
   wraps to what is inside it, so a divider standing alone in one shrank to
   nothing: twenty pixels, a small pill in a box, where the same divider sent
   to Discord is a line across the whole embed. Discord draws a 1024-wide image
   at 400px inside an embed, 426 here like every other picture. */
.discord-image.is-divider {
  width: 426px;
}

.discord-image-expired {
  display: block;
  padding: 14px 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  color: #b5bac1;
  font-size: 14px;
}

.discord-image-expired[hidden] {
  display: none;
}

.discord-image img {
  display: block;
  /* A picture inside an embed is at most 400px wide in Discord (426 here,
     scaled with the rest) and keeps its proportions. It is also what decides
     the width of the whole embed, which is why it may not simply fill it. */
  width: auto;
  max-width: 426px;
  max-height: 300px;
}

.discord-embed-image-only .discord-embed-content {
  padding: 10px 12px 10px 16px;
}

.discord-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.discord-field {
  grid-column: 1 / -1;
  min-width: 0;
}

.discord-field.inline {
  grid-column: span 1;
}

.discord-field strong {
  display: block;
  margin-bottom: 3px;
  color: #f2f3f5;
  font-size: 0.88rem;
  line-height: 1.25;
}

.discord-field p {
  margin: 0;
  color: #dbdee1;
  font-size: 0.9rem;
  line-height: 1.35;
}

.discord-footer {
  color: #949ba4;
  font-size: 0.78rem;
}

.discord-components {
  display: grid;
  gap: 8px;
  width: min(100%, 620px);
  max-width: 620px;
}

.discord-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.discord-button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0 14px;
  color: #f2f3f5;
  background: #54504c;
  font-size: 0.88rem;
  font-weight: 700;
}

.discord-button::after {
  content: "↗";
  margin-left: 7px;
  color: #d4cac0;
  font-size: 0.75rem;
}

.discord-select-preview {
  display: grid;
  gap: 0;
  max-width: 360px;
}

.discord-select-preview:not(:has(.discord-select-list)) {
  overflow: hidden;
  border: 1px solid #44413e;
  border-radius: 6px 6px 0 0;
  background: #2b2d31;
}

.discord-select-option-preview {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.discord-select-option-preview:last-child {
  border-bottom: 0;
}

.discord-select-option-preview strong {
  color: #f2f3f5;
  font-size: 0.88rem;
}

.discord-select-option-preview span {
  color: #c2b9b0;
  font-size: 0.82rem;
}

.discord-select-list {
  overflow: hidden;
  border: 1px solid #44413e;
  border-radius: 6px 6px 0 0;
  background: #2b2d31;
}

.discord-select-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  padding: 9px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.discord-select-option:last-child {
  border-bottom: 0;
}

.discord-select-option span:first-child {
  color: #fff3a0;
  text-align: center;
}

.discord-select-emoji {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: middle;
}

.discord-select-option strong,
.discord-select-option small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discord-select-option strong {
  color: #f2f3f5;
  font-size: 0.9rem;
}

.discord-select-option small {
  margin-top: 2px;
  color: #c2b9b0;
  font-size: 0.82rem;
}

.discord-select-closed {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #44413e;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  padding: 0 12px;
  color: #dbdee1;
  background: #1e1f22;
}

.discord-select-closed span {
  color: #c2b9b0;
  font-size: 1.2rem;
}

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

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

.form-grid.three {
  grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr);
}

.config-block {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 18px;
}

.config-block-head h3 {
  margin: 0 0 5px;
  color: #f3f3f3;
  font-size: 1rem;
}

.config-block .form-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bloxlink-key-control {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.bloxlink-key-field {
  flex: 1 1 420px;
  max-width: 560px;
}

.bloxlink-key-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 1px;
}

.settings-form button.bloxlink-save-key-button {
  min-height: 42px;
  padding: 0 18px;
  border-color: rgba(178, 178, 178, 0.52);
  color: #080808;
  background: #cccccc;
  white-space: nowrap;
}

.settings-form button.bloxlink-save-key-button:hover {
  border-color: #e8e8e8;
  background: #dedede;
  transform: translateY(-1px);
}

.settings-form button.bloxlink-remove-key-button {
  min-height: 42px;
  padding: 0 16px;
  border-color: rgba(255, 112, 122, 0.38);
  color: #ffb3b9;
  background: rgba(109, 26, 35, 0.18);
  white-space: nowrap;
}

.settings-form button.bloxlink-remove-key-button:hover,
.settings-form button.bloxlink-remove-key-button.is-pending {
  border-color: rgba(255, 112, 122, 0.72);
  color: #fff;
  background: rgba(153, 35, 47, 0.42);
}

.server-leave-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.server-leave-field {
  flex: 1 1 420px;
  max-width: 560px;
}

.settings-form button.server-leave-button {
  min-height: 42px;
  margin-bottom: 1px;
  padding: 0 18px;
  border-color: rgba(255, 112, 122, 0.42);
  color: #ffb3b9;
  background: rgba(109, 26, 35, 0.18);
}

.settings-form button.server-leave-button:hover:not(:disabled),
.settings-form button.server-leave-button.is-confirming {
  border-color: rgba(255, 112, 122, 0.78);
  color: #fff;
  background: rgba(153, 35, 47, 0.48);
}

.server-leave-status {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.server-leave-status.is-error {
  color: #ff9ea7;
}

.server-leave-status.is-success {
  color: #83ddbd;
}

.bot-color-control {
  display: grid;
  grid-template-columns: 52px minmax(220px, 360px);
  align-items: end;
  gap: 14px;
}

.bot-color-swatch {
  width: 52px;
  height: 52px;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  background: #8ef7ed;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 28px rgba(0, 0, 0, 0.24);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.bot-color-swatch.is-invalid {
  border-color: rgba(255, 105, 120, 0.72);
  box-shadow: 0 0 0 3px rgba(255, 105, 120, 0.1);
}

.compact-color-field {
  min-width: 0;
}

/* Headline and its size side by side: the size is three words wide, and a
   full row of its own left the select stretched across the editor. */
.headline-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 150px);
  gap: 14px;
  align-items: end;
}

.field-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(240px, 1fr) 120px;
  align-items: end;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.option-row {
  display: grid;
  grid-template-columns: 110px minmax(160px, 0.6fr) minmax(220px, 0.9fr) minmax(140px, 0.5fr);
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.option-row label:nth-child(5),
.option-row label:nth-child(6) {
  grid-column: span 2;
}

.check-row {
  min-height: 44px;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 9px !important;
  color: var(--muted) !important;
}

.check-row input {
  width: auto;
  min-height: auto;
}

.form-help {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.55;
}

.command-permissions {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #060606;
}

.command-permissions-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.command-permissions-head h3 {
  margin: 0;
  font-size: 1rem;
}

.command-permissions-head span {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  background: #0d0d0d;
  font-size: 0.82rem;
  font-weight: 800;
}

.command-permissions-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.command-search {
  width: 240px !important;
  min-height: 38px !important;
}

.command-permission-list {
  display: grid;
  gap: 12px;
  max-height: 900px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.command-permission-row.is-filtered {
  display: none;
}

.command-permission-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.62fr) minmax(300px, 1fr) minmax(260px, 0.86fr);
  gap: 16px;
  align-items: start;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  padding: 16px;
  background: #060606;
}

.command-permission-name {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.command-permission-name strong {
  color: #f3f3f3;
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.command-permission-name small {
  color: var(--muted);
  line-height: 1.45;
}

.role-picker {
  display: grid;
  gap: 10px;
}

.role-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.role-picker-head strong {
  color: #dfdfdf;
  font-size: 0.92rem;
}

.role-picker-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.role-search {
  min-height: 38px !important;
}

/* A count, not a sentence: the box is as wide as the number needs and the
   card does not stretch it across its whole width. */
.ticket-limit-input {
  min-height: 38px;
  max-width: 140px;
}

.role-choice-list {
  display: grid;
  gap: 6px;
  max-height: 176px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #0c0c0c;
}

.role-choice {
  min-height: 34px;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 9px !important;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 7px 9px;
  color: #e5e5e5 !important;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.role-choice:hover {
  border-color: rgba(142, 247, 237, 0.28);
  background: rgba(142, 247, 237, 0.06);
  transform: translateX(2px);
}

/* .settings-form button paints every plain button white, and a role choice
   never declared a background of its own -- inside the Embed Editor that
   left pale text on white. Spelled out here at a specificity that rule
   cannot beat. */
.settings-form .role-choice {
  background: transparent;
}

.settings-form .role-choice:hover {
  background: rgba(142, 247, 237, 0.06);
}

.role-choice.is-filtered {
  display: none !important;
}

.role-choice input {
  position: absolute;
  width: 1px !important;
  height: 1px;
  min-height: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.role-check {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #454545;
  border-radius: 5px;
  background: #000000;
}

.role-check::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid #000000;
  border-bottom: 2px solid #000000;
  opacity: 0;
  transform: rotate(-45deg) translateY(-1px);
}

.role-choice:has(input:checked) {
  border-color: rgba(142, 247, 237, 0.55);
  background: rgba(142, 247, 237, 0.12);
}

.role-choice:has(input:checked) .role-check {
  border-color: #8ef7ed;
  background: #8ef7ed;
}

.role-choice:has(input:checked) .role-check::after {
  opacity: 1;
}

.role-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
  font-size: 0.88rem;
}

.permission-summary {
  display: grid;
  gap: 12px;
}

/* The permissions page is a .permissions-form, so the label and field rules
   written for .settings-form never reached it: "Allowed users" sat beside
   its box instead of above it, and the box never filled the column. Only the
   direct child label is touched -- the channel checkboxes are labels too and
   must keep their text next to the box. */
.permission-summary > label {
  display: grid;
  gap: 8px;
  color: #dfdfdf;
  font-weight: 700;
}

.permission-summary > label textarea {
  width: 100%;
  min-height: 96px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  color: var(--text);
  background: #0c0c0c;
  font: inherit;
  font-weight: 400;
  line-height: 1.55;
  resize: vertical;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.permission-summary > label textarea:focus {
  outline: 2px solid rgba(113, 113, 113, 0.45);
  border-color: var(--blue);
}

.selected-role-panel {
  display: grid;
  gap: 9px;
  min-height: 92px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #0c0c0c;
}

.selected-role-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.selected-role-head strong {
  color: #dfdfdf;
  font-size: 0.92rem;
}

.selected-role-head span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.selected-role-chips {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 7px;
}

.selected-role-chip {
  max-width: 100%;
  border: 1px solid rgba(142, 247, 237, 0.35);
  border-radius: 999px;
  padding: 5px 9px;
  color: #dffcf9;
  background: rgba(142, 247, 237, 0.09);
  font-size: 0.8rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.selected-role-chip.is-stale {
  border-color: rgba(255, 207, 102, 0.38);
  color: #ffe6a8;
  background: rgba(255, 207, 102, 0.08);
}

.command-permission-row textarea {
  min-height: 108px;
}

pre {
  overflow: auto;
  border-radius: 8px;
  padding: 14px;
  background: #0c0c0c;
}

.info-section {
  width: min(1240px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 70px 0;
  border-top: 1px solid var(--line);
}

.section-title {
  display: grid;
  gap: 10px;
  margin-bottom: 22px;
}

.section-title h2,
.split-section h2 {
  max-width: 780px;
  margin-bottom: 0;
  font-size: 3.4rem;
  line-height: 1;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.feature-grid article {
  min-height: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  background: #000000;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.feature-grid article:hover {
  transform: translateY(-3px);
  border-color: rgba(243, 243, 243, 0.38);
  background: #070707;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.32);
}

.feature-grid strong {
  display: block;
  margin-bottom: 12px;
  font-size: 1.1rem;
}

.feature-grid p {
  color: var(--muted);
  line-height: 1.6;
}

.product-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding-top: 28px;
}

.product-strip article,
.ops-grid article {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 22px;
  background: #080808;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}

.product-strip article:hover,
.ops-grid article:hover {
  transform: translateY(-3px);
  border-color: rgba(243, 243, 243, 0.38);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.32);
}

.product-strip small {
  color: #acacac;
}

.product-strip strong,
.ops-grid strong {
  display: block;
  margin-bottom: 10px;
  color: #f3f3f3;
  font-size: 1.15rem;
}

.product-strip p,
.ops-grid p {
  margin: 0;
  color: #b7b7b7;
  line-height: 1.6;
}

.operations-section {
  padding-top: 54px;
}

.delivery-section {
  padding-top: 54px;
}

.delivery-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.delivery-steps article {
  min-height: 190px;
  padding: 24px;
  border-right: 1px solid var(--line);
}

.delivery-steps article:last-child {
  border-right: 0;
}

.delivery-steps small {
  color: #adadad;
  text-transform: uppercase;
}

.delivery-steps strong {
  display: block;
  margin: 18px 0 10px;
  font-size: 1.15rem;
}

.delivery-steps p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

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

.ops-grid span {
  display: inline-flex;
  margin-bottom: 14px;
  border: 1px solid rgba(243, 243, 243, 0.28);
  border-radius: 4px;
  padding: 4px 9px;
  color: #c4c4c4;
  background: rgba(243, 243, 243, 0.08);
  font-size: 0.76rem;
  font-weight: 900;
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 1fr);
  align-items: center;
  gap: 42px;
}

.dashboard-shot {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: cover;
}

.site-footer {
  width: min(1680px, calc(100vw - 44px));
  margin: auto auto 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding: 22px 0 30px;
  color: #b8b8b8;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
}

.site-footer sup {
  position: relative;
  top: -0.15em;
  margin-left: 3px;
  font-size: 0.62em;
  line-height: 0;
}

.profile-page {
  min-height: calc(100vh - 76px);
  background: var(--bg);
}

.profile-banner {
  height: 190px;
  border-bottom: 1px solid var(--line);
  background: #222222;
  filter: grayscale(1);
}

.profile-body {
  width: min(720px, calc(100vw - 32px));
  margin: -54px auto 0;
  padding-bottom: 80px;
}

.profile-avatar {
  width: 108px;
  height: 108px;
  border: 5px solid var(--bg);
  border-radius: 50%;
  object-fit: cover;
}

.profile-body h1 {
  margin: 18px 0 4px;
  font-size: 1.55rem;
}

.profile-meta {
  color: var(--muted);
}

.profile-panel {
  min-height: 220px;
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  background: #000000;
}

.profile-panel h2 {
  color: #b8b8b8;
  font-size: 0.95rem;
}

.profile-bot-list {
  display: grid;
  gap: 10px;
}

.profile-bot-list a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #060606;
}

.profile-bot-list span,
.empty-mini span {
  color: var(--muted);
}

.empty-mini {
  min-height: 130px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

@media (max-width: 760px) {
  .site-header {
    width: min(100% - 24px, 1240px);
  }

  .hero {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: auto;
    padding-top: 48px;
  }

  .hero h1 {
    font-size: 3.6rem;
  }

  .brand span {
    display: none;
  }

  .nav-link.quiet {
    display: none;
  }

  .feature-grid,
  .product-strip,
  .ops-grid,
  .delivery-steps,
  .split-section,
  .embed-builder,
  .embed-template-workbench,
  .template-global-tools,
  .manage-shell,
  .command-permissions-head,
  .form-grid.two,
  .form-grid.three,
  .bot-color-control,
  .headline-builder,
  .field-row,
  .template-field-row,
  .ticket-option-row,
  .command-permission-row,
  .option-row {
    grid-template-columns: 1fr;
  }

  .delivery-steps article {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .delivery-steps article:last-child {
    border-bottom: 0;
  }

  .manage-hero h2,
  .page-title h1,
  .embed-page .page-title h1,
  .section-title h2,
  .split-section h2 {
    font-size: 2.45rem;
  }

  .page.embed-page {
    width: min(100% - 24px, 1240px);
  }

  .manage-shell {
    width: min(100% - 24px, 1240px);
  }

  .manage-sidebar {
    position: static;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
    padding-bottom: 18px;
  }

  .manage-nav,
  .presence-grid {
    grid-template-columns: 1fr;
  }

  .command-permissions-actions {
    width: 100%;
    justify-content: space-between;
  }

  .command-permissions-head {
    flex-direction: column;
  }

  .embed-titlebar {
    display: grid;
  }

  .clear-builder-button {
    width: 100%;
  }

  .preview-sticky {
    position: static;
  }

  .embed-template-list,
  .embed-template-preview {
    position: static;
  }

  .embed-template-preview .discord-preview {
    min-height: 360px;
  }

  .discord-preview {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 14px;
  }

  .discord-avatar {
    width: 34px;
    height: 34px;
  }

  .discord-fields {
    grid-template-columns: 1fr;
  }

  .discord-field.inline {
    grid-column: 1 / -1;
  }

  .account-menu {
    right: -4px;
  }
}
}

/* Final surface pass: consistent, softer controls without oversized rounding. */
.manage-content {
  gap: 22px;
}

.manage-panels {
  gap: 20px;
}

.settings-form,
.builder-card,
.permissions-form,
.profile-panel {
  border-color: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: #080808;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 18px 48px rgba(0, 0, 0, 0.2);
}

.builder-card,
.settings-form {
  padding: 22px;
}

/* The rule sits half in the panel's grid: whatever margin is set here lands
   on top of the 18px row gap below it. 26 above and 8 + 18 below puts the
   same distance on both sides, instead of the line hugging the sentence it
   was meant to sit under. */
.builder-card-head {
  margin-bottom: 8px;
  padding-bottom: 26px;
  border-bottom-color: rgba(255, 255, 255, 0.11);
}

.config-block {
  margin-top: 22px;
  padding-top: 22px;
  border-top-color: rgba(255, 255, 255, 0.12);
}

.presence-option,
.embed-template-item,
.role-choice,
.profile-bot-list a {
  border-radius: 8px;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.presence-option {
  border-color: rgba(255, 255, 255, 0.13);
  background: #0f0f0f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.presence-option:hover,
.embed-template-item:hover,
.profile-bot-list a:hover {
  transform: translateY(-2px);
  border-color: rgba(243, 243, 243, 0.42);
  background: #151515;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.settings-form input,
.settings-form textarea,
.settings-form select,
.permissions-form input,
.permissions-form textarea,
.permissions-form select {
  border-radius: 8px;
  border-color: #393939;
  background: #0f0f0f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

button,
.primary-action,
.secondary-action,
.ghost-button,
.manage-nav a {
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

button:not(:disabled):hover,
.primary-action:hover,
.secondary-action:hover,
.ghost-button:hover {
  transform: translateY(-1px);
}

button:not(:disabled):active,
.primary-action:active,
.secondary-action:active,
.ghost-button:active {
  transform: translateY(0) scale(0.985);
}

@media (max-width: 760px) {
  .manage-shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .manage-sidebar {
    position: static;
    width: 100%;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-right: 0;
    padding-bottom: 18px;
  }

  .manage-content,
  .manage-panels,
  .manage-panel,
  .builder-card,
  .settings-form {
    min-width: 0;
    width: 100%;
  }

  .manage-nav,
  .presence-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid.two,
  .form-grid.three,
  .headline-builder,
  .field-row,
  .template-field-row,
  .ticket-option-row,
  .command-permission-row,
  .option-row,
  .embed-template-workbench {
    grid-template-columns: minmax(0, 1fr);
  }

  .bot-color-control {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .bot-color-swatch {
    width: 48px;
    height: 48px;
  }

  .builder-card,
  .settings-form {
    padding: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Unified rounded interface and command detail workspace. */
:root {
  --surface-0: #040404;
  --surface-1: #0a0a0a;
  --surface-2: #111111;
  --surface-3: #202020;
  --soft-line: rgba(255, 255, 255, 0.12);
  --strong-line: rgba(255, 255, 255, 0.19);
  --focus-ring: rgba(243, 243, 243, 0.18);
  --surface-radius: 14px;
  --control-radius: 10px;
}

html {
  scroll-behavior: smooth;
  scrollbar-color: #464646 #040404;
}

body {
  background: #030303;
}

.site-header {
  min-height: 62px;
  top: 12px;
  border-color: var(--soft-line);
  border-radius: 16px;
  padding: 9px 11px 9px 15px;
  background: rgba(6, 6, 6, 0.94);
  backdrop-filter: blur(20px) saturate(125%);
  box-shadow: 0 18px 58px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  transform: translateY(0);
  opacity: 1;
  will-change: transform, opacity, min-height;
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease, min-height 220ms ease, padding 220ms ease, width 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.site-header.is-compact {
  width: min(1320px, calc(100vw - 32px));
  min-height: 50px;
  padding-top: 5px;
  padding-bottom: 5px;
  background: rgba(5, 5, 5, 0.97);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.site-header .brand img,
.site-header .avatar-button,
.site-header .avatar-button img,
.site-header .nav-link,
.site-header .login-pill {
  transition: width 220ms ease, height 220ms ease, min-height 220ms ease, transform 220ms ease, border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.site-header.is-compact .brand img {
  width: 25px;
  height: 25px;
}

.site-header.is-compact .nav-link,
.site-header.is-compact .login-pill {
  min-height: 34px;
  padding-right: 13px;
  padding-left: 13px;
}

.site-header.is-compact .avatar-button {
  width: 34px;
  height: 34px;
}

.site-header.is-compact .avatar-button img {
  width: 30px;
  height: 30px;
}

.nav-link,
.login-pill,
.primary-action,
.secondary-action,
.ghost-button,
.settings-form button,
.permissions-form button {
  border-radius: var(--control-radius);
}

.account-menu {
  border-radius: 13px;
  padding: 5px;
  background: #0b0b0b;
}

.account-head {
  border-bottom-color: rgba(255, 255, 255, 0.09);
  border-radius: 9px 9px 0 0;
}

.account-menu a {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
}

.account-menu a:hover {
  background: #212121;
}

.manage-shell {
  width: min(1780px, calc(100vw - 52px));
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 32px;
  padding-top: 34px;
}

.manage-sidebar {
  top: 84px;
  gap: 22px;
  border-right-color: rgba(255, 255, 255, 0.1);
  padding: 8px 26px 24px 2px;
}

.manage-server-head {
  border-radius: 12px;
  padding: 8px;
  transition: background-color 180ms ease, transform 180ms ease;
}

.manage-server-head:hover {
  background: rgba(255, 255, 255, 0.035);
  transform: translateX(2px);
}

.manage-nav {
  gap: 6px;
}

.manage-nav a {
  min-height: 46px;
  border-radius: 11px;
  padding: 0 15px;
}

.manage-nav a:hover,
.manage-nav a.active {
  border-color: rgba(243, 243, 243, 0.25);
  background: #141414;
  box-shadow: inset 3px 0 0 #eeeeee, 0 9px 24px rgba(0, 0, 0, 0.16);
}

.manage-content,
.manage-panels {
  gap: 22px;
}

.manage-hero {
  min-height: 158px;
  border-color: var(--soft-line);
  border-radius: var(--surface-radius);
  padding: 30px 32px;
  background: #080808;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 22px 58px rgba(0, 0, 0, 0.2);
}

.manage-hero h2 {
  max-width: 1100px;
  margin-bottom: 6px;
  font-size: clamp(2.35rem, 4vw, 3.55rem);
  line-height: 1.02;
}

.compact-manage-hero {
  min-height: 132px;
}

.settings-form,
.builder-card,
.permissions-form,
.profile-panel,
.notice,
.embed-template-list,
.embed-template-editor,
.embed-template-preview,
.embed-workbench section,
.preview-sticky,
.server-card,
.discord-card {
  border-radius: var(--surface-radius);
}

.settings-form,
.builder-card,
.permissions-form,
.profile-panel {
  border-color: var(--soft-line);
  background: var(--surface-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 20px 54px rgba(0, 0, 0, 0.2);
}

.builder-card,
.settings-form {
  padding: 24px;
}

.settings-form input,
.settings-form textarea,
.settings-form select,
.permissions-form input,
.permissions-form textarea,
.permissions-form select,
.template-search,
.role-choice-list {
  border-radius: var(--control-radius);
  border-color: #3a3a3a;
  background: #0f0f0f;
}

.settings-form input:focus,
.settings-form textarea:focus,
.settings-form select:focus,
.permissions-form input:focus,
.permissions-form textarea:focus,
.permissions-form select:focus,
.template-search:focus {
  border-color: #eeeeee;
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.presence-option,
.command-permission-row,
.selected-role-panel,
.role-picker-surface,
.command-effect-banner,
.embed-template-card,
.template-global-tools {
  border-radius: 12px;
}

.command-permission-row {
  border-color: rgba(255, 255, 255, 0.1);
  background: #080808;
}

.selected-role-chip {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px 5px 11px;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.selected-role-chip:hover {
  border-color: rgba(248, 113, 113, 0.74);
  color: #f6f6f6;
  background: rgba(153, 27, 27, 0.34);
  transform: translateY(-1px);
}

.role-chip-remove {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: transparent;
  background: transparent;
  transition: color 160ms ease, background-color 160ms ease;
}

.selected-role-chip:hover .role-chip-remove {
  color: #fff;
  background: #dc2626;
}

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

.server-reference-picker {
  position: relative;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--soft-line);
  border-radius: var(--surface-radius);
  background: #090909;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.server-reference-picker:focus-within,
.server-reference-picker.is-open {
  z-index: 8;
  border-color: rgba(163, 163, 163, 0.55);
  background: #0d0d0d;
  box-shadow: 0 0 0 3px rgba(243, 243, 243, 0.08), 0 18px 42px rgba(0, 0, 0, 0.26);
}

.server-reference-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.server-reference-head > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.server-reference-head strong {
  color: #f4f4f4;
  font-size: 0.94rem;
}

.server-reference-head small {
  color: var(--muted);
  line-height: 1.45;
}

.reference-status {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: #999999;
  background: rgba(255, 255, 255, 0.025);
  font-size: 0.7rem;
  font-weight: 800;
}

.reference-status.is-selected {
  border-color: rgba(164, 164, 164, 0.38);
  color: #cbcbcb;
  background: rgba(122, 122, 122, 0.12);
}

.server-reference-search-shell {
  position: relative;
}

.server-reference-search-shell .role-search {
  width: 100%;
  min-height: 42px;
}

.server-reference-choice-list {
  position: absolute;
  z-index: 20;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  max-height: 290px;
  padding: 7px;
  overflow-y: auto;
  border: 1px solid #434343;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
}

.server-reference-choice {
  width: 100%;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  color: #ededed;
  text-align: left;
  background: transparent;
}

.server-reference-choice:hover,
.server-reference-choice.is-selected {
  border-color: rgba(163, 163, 163, 0.42);
  background: rgba(133, 133, 133, 0.13);
}

.server-reference-choice > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.server-reference-choice strong,
.server-reference-choice small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-reference-choice small {
  color: #929292;
}

.server-reference-choice-marker {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid #484848;
  border-radius: 6px;
  color: #090909;
  background: #1f1f1f;
  font-size: 0.75rem;
  font-weight: 900;
}

.server-reference-choice.is-selected .server-reference-choice-marker {
  border-color: #a9a9a9;
  background: #b0b0b0;
}

.server-reference-selection {
  min-height: 34px;
  display: flex;
  align-items: center;
}

.server-reference-chip {
  min-width: 0;
}

.reference-kind-symbol {
  color: #bcbcbc;
  font-weight: 900;
}

.server-reference-empty,
.server-reference-no-results {
  color: #7e7e7e;
  font-size: 0.78rem;
}

.server-reference-no-results {
  margin: 0;
  padding: 14px 10px;
  text-align: center;
}

.server-reference-extra {
  margin-top: 14px;
}

@media (max-width: 820px) {
  .server-reference-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.command-action-hero p:last-child {
  color: #cbcbcb;
}

.command-action-form {
  overflow: visible;
}

.command-detail-head {
  align-items: center;
}

.section-back-link {
  display: inline-flex;
  margin-bottom: 10px;
  color: #bfbfbf;
  font-size: 0.82rem;
  font-weight: 800;
}

.section-back-link::before {
  content: "\2190";
  margin-right: 7px;
  transition: transform 160ms ease;
}

.section-back-link:hover::before {
  transform: translateX(-3px);
}

.command-effect-banner {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  border: 1px solid rgba(243, 243, 243, 0.22);
  padding: 15px;
  background: #111111;
}

.command-effect-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(243, 243, 243, 0.38);
  border-radius: 12px;
  color: #ebebeb;
  background: #252525;
  font-size: 1.05rem;
  font-weight: 900;
}

.command-effect-banner strong,
.command-effect-banner p {
  margin: 0;
}

.command-effect-banner p {
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.5;
}

.command-action-page-grid {
  grid-template-columns: minmax(360px, 1.05fr) minmax(300px, 0.95fr);
  margin-top: 18px;
}

.role-picker-surface,
.command-selected-role-panel {
  min-height: 350px;
  align-content: start;
  border: 1px solid var(--soft-line);
  padding: 16px;
  background: #070707;
}

.role-picker-head > div {
  display: grid;
  gap: 4px;
}

.role-picker-head small {
  color: var(--muted);
  font-weight: 500;
}

.command-action-page-grid .dynamic-role-choice-list {
  max-height: 260px;
}

.command-selected-role-panel .selected-role-panel-head > div {
  display: grid;
  gap: 5px;
}

.selected-role-empty {
  min-height: 190px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  color: var(--muted);
  text-align: center;
}

.selected-role-empty strong {
  color: #e4e4e4;
}

.selected-role-empty span {
  max-width: 340px;
  line-height: 1.5;
}

.unsaved-changes-bar {
  width: min(820px, calc(100vw - 30px));
  border-radius: 14px;
  padding: 13px 13px 13px 17px;
  background: rgba(55, 13, 19, 0.97);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62), inset 3px 0 0 #ef4444, inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.unsaved-cancel-button,
.unsaved-save-button {
  border-radius: 9px;
}

.site-footer {
  width: min(1440px, calc(100vw - 40px));
  margin-top: auto;
  border-top-color: rgba(255, 255, 255, 0.12);
  padding-top: 24px;
}

@media (max-width: 1080px) {
  .manage-shell {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 22px;
  }

  .command-action-page-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .role-picker-surface,
  .command-selected-role-panel {
    min-height: auto;
  }
}

@media (max-width: 760px) {
  .site-header,
  .site-header.is-compact {
    width: calc(100vw - 20px);
    top: 8px;
    border-radius: 13px;
  }

  .manage-shell {
    width: calc(100vw - 24px);
    grid-template-columns: minmax(0, 1fr);
    padding-top: 24px;
  }

  .manage-sidebar {
    padding: 0 0 18px;
  }

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

  .manage-hero {
    min-height: 132px;
    padding: 22px;
  }

  .builder-card,
  .settings-form,
  .permissions-form {
    padding: 17px;
  }

  .builder-card-head,
  .command-detail-head,
  .unsaved-changes-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .command-effect-banner {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .command-effect-icon {
    width: 42px;
    height: 42px;
  }

  .unsaved-changes-bar {
    display: grid;
    gap: 12px;
  }

  .unsaved-changes-actions {
    justify-content: flex-end;
  }
}

/* Clearly rounded surfaces and stable navigation motion. */
:root {
  --surface-radius: 22px;
  --panel-radius: 20px;
  --soft-radius: 16px;
  --control-radius: 13px;
}

.site-header,
.site-header.is-compact {
  width: min(1680px, calc(100vw - 44px));
  border-radius: 22px;
  will-change: transform, opacity;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, padding 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.site-header.is-compact {
  border-radius: 18px;
}

.nav-link,
.login-pill,
.primary-action,
.secondary-action,
.ghost-button,
.settings-form button,
.permissions-form button,
.embed-workbench button,
.clear-builder-button,
.add-embed-button,
.send-button {
  border-radius: var(--control-radius);
}

.account-menu {
  border-radius: 20px;
  padding: 7px;
}

.account-head {
  border-radius: 14px 14px 8px 8px;
}

.account-menu a {
  border-radius: 12px;
}

.hero-metrics span {
  border-radius: var(--soft-radius);
}

.discord-card {
  overflow: hidden;
  border-radius: 24px;
}

.discord-logo {
  border-radius: var(--soft-radius);
}

.platform-signal {
  border-radius: 20px;
}

.product-strip article,
.feature-grid article,
.ops-grid article {
  border-radius: var(--panel-radius);
}

.delivery-steps {
  overflow: hidden;
  border-radius: 24px;
}

.ownership-band {
  border-radius: 24px;
}

.ops-grid span,
.server-badge,
.count-pill,
.status-pill {
  border-radius: 999px;
}

.server-card,
.empty-state,
.profile-panel,
.profile-banner,
.auth-card,
.setup-card,
.notice {
  border-radius: var(--surface-radius);
}

.server-icon,
.profile-bot-list a,
.manage-server-head,
.manage-nav a {
  border-radius: var(--soft-radius);
}

.manage-hero,
.settings-form,
.builder-card,
.permissions-form,
.embed-template-list,
.embed-template-editor,
.embed-template-preview,
.preview-sticky,
.presence-option,
.command-permission-row,
.selected-role-panel,
.role-picker-surface,
.command-effect-banner,
.template-global-tools,
.config-block,
.embed-workbench section {
  border-radius: var(--surface-radius);
}

.presence-option,
.command-permission-row,
.selected-role-panel,
.role-picker-surface,
.command-effect-banner,
.embed-template-card,
.config-block,
.embed-details,
.field-row,
.option-row,
.ticket-option-row,
.send-bar {
  border-radius: var(--panel-radius);
}

.settings-form input,
.settings-form textarea,
.settings-form select,
.permissions-form input,
.permissions-form textarea,
.permissions-form select,
.template-search,
.role-choice-list,
.role-search,
.search-field input {
  border-radius: var(--control-radius);
}

.role-choice,
.command-effect-icon,
.unsaved-cancel-button,
.unsaved-save-button {
  border-radius: 12px;
}

.unsaved-changes-bar {
  border-radius: 20px;
}

.product-strip article,
.feature-grid article,
.ops-grid article,
.server-card,
.profile-bot-list a {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.product-strip article:hover,
.feature-grid article:hover,
.ops-grid article:hover,
.server-card:hover,
.profile-bot-list a:hover {
  transform: translateY(-3px);
}

@media (max-width: 760px) {
  .site-header,
  .site-header.is-compact {
    width: calc(100vw - 20px);
    border-radius: 18px;
  }

  .manage-hero,
  .settings-form,
  .builder-card,
  .permissions-form,
  .server-card,
  .empty-state,
  .ownership-band,
  .delivery-steps {
    border-radius: 18px;
  }
}

/* Final homepage priority layer. */
:root {
  --surface-radius: 30px;
  --panel-radius: 26px;
  --soft-radius: 20px;
  --control-radius: 15px;
}

body {
  background: #000000;
}

.site-header,
.site-header.is-compact {
  border-radius: 28px;
}

.home-hero {
  width: min(1400px, calc(100vw - 48px));
  min-height: clamp(560px, 72vh, 690px);
  grid-template-columns: minmax(0, 1.25fr) minmax(330px, 430px);
  gap: clamp(48px, 8vw, 120px);
  padding: 58px 0 72px;
}

.home-hero .hero-copy {
  padding-left: 0;
}

.home-hero .hero-copy::before {
  display: none;
}

.home-hero h1 {
  max-width: 820px;
  margin: 14px 0 24px;
  font-size: clamp(4.2rem, 7.8vw, 7rem);
  line-height: 0.92;
}

.home-hero .lead {
  max-width: 660px;
  margin: 0 0 30px;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.65;
}

.home-hero .discord-card,
.home-bento-card,
.home-cta {
  border-radius: 38px;
}

@media (max-width: 1040px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 38px;
  }
}

@media (max-width: 760px) {
  .site-header,
  .site-header.is-compact {
    border-radius: 22px;
  }

  .home-hero {
    width: calc(100vw - 24px);
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding: 46px 0 58px;
  }

  .home-hero h1 {
    font-size: clamp(3.4rem, 18vw, 5.4rem);
  }

  .home-hero .discord-card,
  .home-bento-card,
  .home-cta {
    border-radius: 30px;
  }
}

/* M5ive graphite theme: final cascade for every page. */
:root {
  --bg: #010101;
  --panel: #090909;
  --panel-strong: #121212;
  --text: #f9f9f9;
  --muted: #a7a7a7;
  --line: rgba(186, 186, 186, 0.17);
  --blue: #ebebeb;
  --accent-blue: #eeeeee;
  --green: #6ee7bd;
  --surface-0: #030303;
  --surface-1: #090909;
  --surface-2: #111111;
  --surface-3: #202020;
  --soft-line: rgba(186, 186, 186, 0.16);
  --strong-line: rgba(207, 207, 207, 0.26);
  --focus-ring: rgba(243, 243, 243, 0.2);
  --surface-radius: 32px;
  --panel-radius: 26px;
  --soft-radius: 20px;
  --control-radius: 15px;
}

html {
  background: #010101;
  scrollbar-color: #4f4f4f #030303;
}

body {
  min-height: 100vh;
  color: var(--text);
  background: #010101;
  font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
}

body::before {
  opacity: 0.72;
}

body::after {
  opacity: 0.62;
}

.site-header,
.site-header.is-compact {
  border-color: rgba(200, 200, 200, 0.18);
  border-radius: 28px;
  background: rgba(4, 4, 4, 0.92);
  backdrop-filter: blur(22px) saturate(125%);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.nav-link,
.secondary-action,
.ghost-button,
.account-menu a {
  border-color: rgba(195, 195, 195, 0.16);
  color: #e5e5e5;
  background: #0f0f0f;
}

.nav-link:hover,
.secondary-action:hover,
.ghost-button:hover,
.account-menu a:hover {
  border-color: rgba(178, 178, 178, 0.42);
  background: #212121;
}

.primary-action,
.login-pill,
.settings-form button.save-settings-button,
.permissions-form .primary-action {
  border-color: #d6d6d6;
  color: #080808;
  background: #d5d5d5;
}

.account-menu,
.settings-form,
.builder-card,
.permissions-form,
.manage-hero,
.server-card,
.empty-state,
.profile-panel,
.auth-card,
.setup-card,
.notice,
.embed-template-list,
.embed-template-editor,
.embed-template-preview,
.preview-sticky,
.command-permission-row,
.selected-role-panel,
.role-picker-surface,
.command-effect-banner,
.template-global-tools,
.config-block,
.embed-workbench section {
  border-color: var(--soft-line);
  background-color: var(--surface-1);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.settings-form,
.builder-card,
.permissions-form,
.manage-hero,
.server-card,
.empty-state,
.profile-panel,
.auth-card,
.setup-card,
.embed-template-list,
.embed-template-editor,
.embed-template-preview,
.preview-sticky,
.command-permission-row,
.role-picker-surface,
.command-effect-banner,
.template-global-tools,
.config-block {
  border-radius: var(--surface-radius);
}

.settings-form input,
.settings-form textarea,
.settings-form select,
.permissions-form input,
.permissions-form textarea,
.permissions-form select,
.template-search,
.role-search,
.search-field input {
  border-color: rgba(186, 186, 186, 0.2);
  color: #f6f6f6;
  background: #0f0f0f;
}

.manage-nav a {
  border-radius: 17px;
}

.manage-nav a:hover,
.manage-nav a.active {
  border-color: rgba(178, 178, 178, 0.32);
  background: #1f1f1f;
  box-shadow: inset 3px 0 0 #ebebeb, 0 14px 34px rgba(0, 0, 0, 0.2);
}

.home-hero .discord-card {
  border-color: rgba(223, 212, 201, 0.18);
  background: #1d1b19;
}

.home-bento-card {
  border-radius: 40px;
  background: #080808;
  box-shadow: 0 28px 78px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.bento-moderation { background: #0b0b0b; }
.bento-automation { background: #0c0c0c; }
.bento-management { background: #0b0b0b; }
.bento-community { background: #0b0b0b; }
.bento-customization { background: #0e0e0e; }
.bento-economy { background: #0c0c0c; }

.home-cta {
  border-color: rgba(180, 180, 180, 0.26);
  border-radius: 40px;
  background: #0a0a0a;
}

.profile-page {
  width: 100%;
  padding: 58px 24px 30px;
  background: transparent;
}

.profile-shell {
  width: min(1240px, 100%);
  margin: 0 auto;
}

.profile-banner {
  position: relative;
  width: 100%;
  height: clamp(240px, 24vw, 320px);
  overflow: hidden;
  border: 1px solid rgba(203, 203, 203, 0.2);
  border-radius: 40px;
  background: #0b0b0b;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  filter: none;
}

.profile-banner-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--profile-accent, #111111);
}

.profile-banner-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.34);
}

.profile-banner-fallback img {
  width: clamp(88px, 10vw, 132px);
  height: clamp(88px, 10vw, 132px);
  object-fit: contain;
  opacity: 0.24;
}

.profile-banner > .profile-banner-image {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
  opacity: 1;
  object-fit: cover;
  object-position: center;
  filter: none;
}

.profile-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.16);
}

.profile-identity {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  margin-top: -76px;
  padding: 0 34px;
}

.profile-avatar {
  width: 164px;
  height: 164px;
  display: block;
  border: 8px solid #030303;
  border-radius: 50%;
  object-fit: cover;
  background: #111111;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.45);
}

.profile-name {
  min-width: 0;
  padding-bottom: 12px;
}

.profile-name h1 {
  margin: 4px 0 2px;
  color: #fbfbfb;
  font-size: clamp(2.55rem, 4.6vw, 3.7rem);
  font-weight: 900;
  line-height: 0.96;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.72);
}

.profile-name .profile-meta {
  margin-top: 8px;
  color: #c2c2c2;
  font-weight: 700;
}

.profile-identity > .primary-action {
  margin-bottom: 15px;
}

.profile-stats {
  overflow: hidden;
  margin-top: 34px;
  border: 1px solid var(--soft-line);
  border-radius: 28px;
  background: #090909;
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.profile-stats div {
  min-height: 96px;
  border-right-color: rgba(186, 186, 186, 0.14);
  padding: 22px 26px;
}

.profile-bots-section {
  margin-top: 42px;
}

.profile-bot-list {
  gap: 16px;
}

.profile-bot-list a {
  min-height: 88px;
  border-color: var(--soft-line);
  border-radius: 25px;
  padding: 15px 18px;
  background: #090909;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.profile-bot-list a:hover {
  border-color: rgba(178, 178, 178, 0.44);
  background: #121212;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.profile-bot-icon {
  width: 54px;
  height: 54px;
  border-radius: 17px;
}

.site-footer {
  color: #ebebeb;
  background: transparent;
}

@media (max-width: 760px) {
  :root {
    --surface-radius: 24px;
    --panel-radius: 21px;
  }

  .site-header,
  .site-header.is-compact {
    border-radius: 22px;
  }

  .home-bento-card,
  .home-cta {
    border-radius: 30px;
  }

  .home-hero h1 {
    max-width: 100%;
    font-size: clamp(3rem, 13vw, 4.2rem);
    overflow-wrap: anywhere;
  }

  .profile-page {
    padding: 36px 12px 20px;
  }

  .profile-banner {
    height: 210px;
    border-radius: 28px;
  }

  .profile-identity {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 15px;
    margin-top: -54px;
    padding: 0 14px;
  }

  .profile-avatar {
    width: 112px;
    height: 112px;
    border-width: 6px;
  }

  .profile-name {
    padding-bottom: 5px;
  }

  .profile-name h1 {
    font-size: clamp(1.65rem, 8vw, 2.3rem);
  }

  .profile-identity > .primary-action {
    grid-column: 1 / -1;
    justify-self: stretch;
    margin: 2px 0 0;
  }

  .profile-stats {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 24px;
    border-radius: 24px;
  }

  .profile-stats div {
    min-height: 78px;
    border-right: 0;
    border-bottom: 1px solid rgba(186, 186, 186, 0.14);
  }

  .profile-stats div:last-child {
    border-bottom: 0;
  }

  .profile-bot-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .profile-bot-list a {
    min-height: 82px;
    border-radius: 22px;
  }
}

/* Reliable touch navigation and responsive dashboard fitment. */
.site-header nav,
.brand,
.server-grid,
.server-card,
.server-card > div:last-child {
  min-width: 0;
}

.site-header,
.site-header.is-compact {
  position: sticky;
  z-index: 1000;
  overflow: visible;
}

.user-menu {
  z-index: 220;
  flex: 0 0 auto;
}

.avatar-button {
  touch-action: manipulation;
}

.account-menu {
  z-index: 240;
  width: min(250px, calc(100vw - 20px));
  max-height: calc(100vh - 92px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.account-menu a {
  min-height: 48px;
  position: relative;
  z-index: 1;
  touch-action: manipulation;
}

.server-grid {
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.server-card {
  width: 100%;
  max-width: none;
  overflow: hidden;
}

.server-card small,
.server-card strong,
.server-card p {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (hover: none) {
  .user-menu:hover:not(.is-open) .account-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
  }

  .user-menu.is-open .account-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (max-width: 760px) {
  .site-header,
  .site-header.is-compact {
    width: calc(100vw - 16px);
    min-height: 56px;
    gap: 8px;
    padding: 7px 8px;
  }

  .site-header nav {
    flex: 0 1 auto;
    gap: 7px;
    margin-left: auto;
  }

  .brand {
    flex: 0 0 auto;
  }

  .site-header .nav-link,
  .site-header .login-pill {
    min-height: 40px;
    padding-right: 12px;
    padding-left: 12px;
    white-space: nowrap;
  }

  .site-header .avatar-button {
    width: 40px;
    height: 40px;
  }

  .site-header .avatar-button img {
    width: 36px;
    height: 36px;
  }

  .account-menu {
    top: calc(100% + 8px);
    right: 0;
  }

  .page {
    width: calc(100vw - 24px);
    min-width: 0;
    padding-top: 34px;
  }

  .page-title {
    min-width: 0;
    margin-bottom: 26px;
  }

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

  .server-card {
    min-width: 0;
    min-height: 150px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 16px;
  }
}

@media (max-width: 430px) {
  .site-header .nav-link:not(.quiet) {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 0.86rem;
  }

  .account-menu {
    position: fixed;
    top: 72px;
    right: 8px;
  }
}

/* Rounded M5ive capability cards without the reference bento pattern. */
.home-bento-grid {
  grid-template-areas: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  gap: 18px;
}

.home-bento-card,
.bento-moderation,
.bento-automation,
.bento-management,
.bento-community,
.bento-customization,
.bento-economy {
  grid-area: auto;
  min-height: 220px;
  border-color: rgba(194, 194, 194, 0.17);
  border-radius: 40px;
  background: #0a0a0a;
}

.home-bento-card:hover,
.bento-moderation:hover,
.bento-automation:hover,
.bento-management:hover,
.bento-community:hover,
.bento-customization:hover,
.bento-economy:hover {
  border-color: rgba(178, 178, 178, 0.36);
  background: #111111;
}

@media (max-width: 1040px) {
  .home-bento-grid {
    grid-template-areas: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .home-bento-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-bento-card,
  .bento-moderation,
  .bento-automation,
  .bento-management,
  .bento-community,
  .bento-customization,
  .bento-economy {
    min-height: 190px;
    border-radius: 30px;
  }
}
/* Custom embed library and restrained star field. */
body::before {
  width: 2px;
  height: 2px;
  box-shadow:
    8vw 14vh rgba(237, 237, 237, 0.52),
    24vw 76vh rgba(189, 189, 189, 0.36),
    39vw 27vh rgba(255, 255, 255, 0.44),
    56vw 84vh rgba(208, 208, 208, 0.34),
    71vw 18vh rgba(255, 255, 255, 0.46),
    86vw 63vh rgba(188, 188, 188, 0.34),
    95vw 34vh rgba(255, 255, 255, 0.42);
  opacity: 0.5;
}

body::after {
  width: 1px;
  height: 1px;
  box-shadow:
    15vw 45vh rgba(255, 255, 255, 0.38),
    32vw 9vh rgba(198, 198, 198, 0.3),
    48vw 58vh rgba(255, 255, 255, 0.36),
    65vw 42vh rgba(198, 198, 198, 0.3),
    79vw 89vh rgba(255, 255, 255, 0.32),
    91vw 7vh rgba(198, 198, 198, 0.3);
  opacity: 0.42;
}

.builder-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.custom-edits-box {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--soft-line);
  margin-top: 4px;
  padding-top: 14px;
}

.custom-edits-head,
.custom-edits-head > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.custom-edits-head {
  justify-content: space-between;
}

.custom-edits-head strong {
  color: #f6f6f6;
  font-size: 0.96rem;
}

.custom-edits-head span {
  min-width: 24px;
  border: 1px solid rgba(243, 243, 243, 0.24);
  border-radius: 999px;
  padding: 3px 7px;
  color: #c6c6c6;
  background: rgba(243, 243, 243, 0.08);
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
}

.custom-edits-box > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.custom-edits-box code {
  color: #cbcbcb;
}

.custom-template-cards {
  max-height: 230px;
}

.custom-template-card {
  position: relative;
  padding-left: 17px !important;
}

.custom-template-card::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 8px;
  width: 3px;
  border-radius: 999px;
  background: #ebebeb;
  opacity: 0.7;
}

.custom-template-empty {
  border: 1px dashed rgba(186, 186, 186, 0.2);
  border-radius: 16px;
  padding: 13px !important;
  text-align: center;
}

.custom-template-name-field {
  border: 1px solid rgba(243, 243, 243, 0.2);
  border-radius: 18px;
  padding: 13px;
  background: rgba(243, 243, 243, 0.05);
}

.custom-template-name-field .form-help {
  margin: 2px 0 0;
  font-size: 0.76rem;
}

@media (max-width: 760px) {
  .builder-card-actions {
    width: 100%;
    justify-content: stretch;
  }

  .builder-card-actions > button {
    flex: 1;
  }
}
/* Custom library placement and medium-desktop fitting. */
.custom-edits-box {
  order: -1;
  border: 1px solid rgba(243, 243, 243, 0.18);
  border-radius: 20px;
  margin: 0 0 4px;
  padding: 12px;
  background: rgba(243, 243, 243, 0.045);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.embed-template-card,
.settings-form button.embed-template-card {
  border-radius: 18px;
}

.template-category-filter {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 38px 0 12px;
  color: var(--text);
  background-color: #0c0c0c;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.template-category-filter:focus {
  outline: 2px solid rgba(243, 243, 243, 0.35);
  border-color: var(--blue);
}

.template-card-heading {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 8px;
}

.template-card-heading em {
  flex: 0 0 auto;
  border: 1px solid rgba(243, 243, 243, 0.18);
  border-radius: 999px;
  padding: 3px 7px;
  color: #c7c7c7;
  background: rgba(243, 243, 243, 0.07);
  font-size: 0.63rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

@media (min-width: 901px) and (max-width: 1360px) {
  .embed-template-workbench {
    grid-template-columns: 200px minmax(350px, 1fr) minmax(290px, 0.78fr);
    gap: 12px;
  }
}

/* Embed editor actions and server emoji picker. */
.embed-template-panel {
  position: relative;
  overflow: visible;
}

.embed-page {
  position: relative;
}

.embed-card {
  position: relative;
  overflow: visible;
}

.builder-card-tools,
.template-editor-tools {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.emoji-picker-trigger {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 40px;
  border: 1px solid rgba(178, 178, 178, 0.26);
  border-radius: 13px;
  padding: 0;
  color: #e7e7e7;
  background: #111111;
  font-size: 1.12rem;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.emoji-picker-trigger:hover,
.emoji-picker-trigger[aria-expanded="true"] {
  transform: translateY(-1px);
  border-color: rgba(178, 178, 178, 0.58);
  background: #232323;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.server-emoji-picker {
  position: absolute;
  z-index: 80;
  top: 68px;
  right: 18px;
  width: min(390px, calc(100vw - 40px));
  overflow: hidden;
  border: 1px solid rgba(186, 186, 186, 0.27);
  border-radius: 20px;
  padding: 12px;
  background: rgba(9, 9, 9, 0.98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px);
  animation: emoji-picker-in 150ms ease-out;
}

.server-emoji-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.server-emoji-picker-head strong {
  min-width: 0;
  overflow: hidden;
  color: #f6f6f6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.server-emoji-picker-head button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  padding: 0;
  color: #c4c4c4;
  background: #141414;
  font-size: 1.15rem;
  cursor: pointer;
}

.server-emoji-picker-head-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.server-emoji-picker-head button svg {
  width: 15px;
  height: 15px;
}

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

.server-emoji-picker-head button.is-loading svg {
  animation: m5-spin 0.7s linear infinite;
}

.server-emoji-picker > input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 0 13px;
  color: var(--text);
  background: #0d0d0d;
  font: inherit;
}

.server-emoji-grid {
  max-height: 325px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  overflow-y: auto;
  margin-top: 10px;
  padding-right: 3px;
  scrollbar-gutter: stable;
}

.server-emoji-option {
  min-width: 0;
  min-height: 68px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid transparent;
  border-radius: 13px;
  padding: 7px 4px;
  color: #bababa;
  background: transparent;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background-color 140ms ease;
}

.server-emoji-option:hover {
  transform: translateY(-1px);
  border-color: rgba(178, 178, 178, 0.32);
  background: rgba(178, 178, 178, 0.1);
}

.server-emoji-option img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.server-emoji-option span {
  width: 100%;
  overflow: hidden;
  font-size: 0.66rem;
  font-weight: 750;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Linked dropdown and ticket flows in the embed editor. */
.description-editor {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 8px;
}

.description-editor-head {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.description-editor-head label {
  margin: 0;
}

.description-emoji-trigger {
  width: auto;
  min-width: 132px;
  height: 36px;
  display: inline-flex;
  gap: 7px;
  padding: 0 12px;
  font-size: 0.76rem;
  font-weight: 800;
}

.embed-card-emoji-trigger {
  width: auto;
  min-width: 132px;
  height: 36px;
  display: inline-flex;
  gap: 7px;
  padding: 0 12px;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.embed-card > .server-emoji-picker {
  top: 70px;
  right: 18px;
}

.template-editor-tools [data-template-status] {
  white-space: nowrap;
}

.embed-template-editor .server-emoji-picker {
  top: 42px;
  right: 0;
}

.embed-template-workbench > *,
.embed-template-editor,
.embed-template-editor > *,
.embed-template-editor label,
.embed-template-editor input,
.embed-template-editor textarea,
.embed-template-editor select {
  min-width: 0;
  max-width: 100%;
}

.embed-template-editor {
  position: relative;
  overflow: visible;
  grid-template-columns: minmax(0, 1fr);
}

.embed-template-editor > .server-emoji-picker {
  top: 62px;
  right: 14px;
}

@media (max-width: 760px) {
  .additional-embeds-head,
  .additional-embed-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .additional-embed-card-actions {
    justify-content: flex-start;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .embed-template-workbench {
    grid-template-columns: 200px minmax(0, 1fr);
  }

  .embed-template-preview {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .builder-card-head {
    align-items: flex-start;
  }

  .builder-card-tools,
  .template-editor-tools {
    flex-wrap: wrap;
  }

  .embed-card-emoji-trigger {
    min-width: 40px;
  }

  .embed-card > .server-emoji-picker {
    top: 76px;
    right: 10px;
    width: calc(100% - 20px);
  }

  .embed-template-editor > .server-emoji-picker {
    top: 78px;
    right: 10px;
    width: calc(100% - 20px);
  }
}

.linked-option-guidance {
  border: 1px solid rgba(169, 169, 169, 0.22);
  border-radius: 14px;
  padding: 11px 13px;
  color: #d7d7d7;
  background: rgba(139, 139, 139, 0.08);
  font-size: 0.78rem;
  line-height: 1.5;
}

.ticket-option-stack {
  margin-top: 4px;
}

.ticket-option-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  border: 1px solid rgba(173, 173, 173, 0.18);
  border-radius: 18px;
  padding: 15px;
  background: rgba(6, 6, 6, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.ticket-option-row-head,
.linked-option-editor-head,
.ticket-option-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ticket-option-row-head > div:first-child,
.linked-option-editor-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.ticket-option-row-head span,
.linked-option-editor-head span {
  color: var(--accent-blue, #aeaeae);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ticket-option-row-head strong,
.linked-option-editor-head strong {
  overflow: hidden;
  color: #f8f8f8;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-option-row-actions {
  display: flex;
  gap: 6px;
}

.ticket-option-row-actions button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(176, 176, 176, 0.2);
  border-radius: 10px;
  padding: 0;
  color: #c4c4c4;
  background: #111111;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.ticket-option-row-actions button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(175, 175, 175, 0.48);
  color: #f4f4f4;
  background: #212121;
}

.ticket-option-row-actions button:last-child:hover:not(:disabled) {
  border-color: rgba(255, 104, 120, 0.48);
  color: #ffd7dc;
  background: rgba(119, 32, 43, 0.3);
}

.ticket-option-row-actions button:disabled {
  opacity: 0.34;
  cursor: default;
}

.ticket-option-basics {
  display: grid;
  /* The label was 88px wide and showed three letters of "General Assistance";
     with the emoji in front of it now, it needs room of its own. */
  /* Side by side only when each gets 340px; a custom emoji code alone is
     over 30 characters, and beside the description it hid the label text. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 10px;
}

.ticket-option-basics > label:nth-child(3) {
  grid-column: 1 / -1;
}

.ticket-advanced {
  border-top: 1px solid rgba(169, 169, 169, 0.14);
  padding-top: 10px;
}

.ticket-advanced > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #b1b1b1;
  user-select: none;
}

.ticket-advanced > summary::-webkit-details-marker {
  display: none;
}

.ticket-advanced > summary::before {
  content: "▸";
  font-size: 0.72rem;
  transition: transform 150ms ease;
}

.ticket-advanced[open] > summary::before {
  transform: rotate(90deg);
}

.ticket-advanced-body {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.ticket-access-roles-field {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(169, 169, 169, 0.16);
  border-radius: 14px;
  background: rgba(9, 9, 9, 0.58);
}

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

.ticket-button-settings {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(169, 169, 169, 0.16);
  border-radius: 14px;
  background: rgba(9, 9, 9, 0.58);
}

.ticket-button-setting {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(150px, 1fr) minmax(140px, 0.7fr);
  align-items: end;
  gap: 10px;
}

.ticket-button-setting + .ticket-button-setting {
  padding-top: 10px;
  border-top: 1px solid rgba(169, 169, 169, 0.12);
}

.ticket-button-setting .toggle-line {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.ticket-access-roles-head {
  display: grid;
  gap: 3px;
}

.ticket-access-roles-head strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e5e5e5;
}

.ticket-access-roles-head small {
  color: #a3a3a3;
  font-size: 0.7rem;
  line-height: 1.45;
}

.ticket-access-role-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-height: 30px;
}

.ticket-access-role-empty {
  color: #7e7e7e;
  font-size: 0.78rem;
}

@media (max-width: 820px) {
  .ticket-access-grid,
  .ticket-button-setting {
    grid-template-columns: 1fr;
  }
}

.ticket-form-fields {
  display: grid;
  gap: 8px;
}

.form-field-rows {
  display: grid;
  gap: 8px;
}

.form-field-row {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(169, 169, 169, 0.17);
  border-radius: 12px;
  padding: 10px 11px;
  background: rgba(13, 13, 13, 0.55);
}

.form-field-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.form-field-row-head span {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #acacac;
}

.form-field-row-actions {
  display: flex;
  gap: 4px;
}

.form-field-row-actions button {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(169, 169, 169, 0.22);
  background: rgba(18, 18, 18, 0.7);
  color: #d3d3d3;
  cursor: pointer;
  line-height: 1;
}

.form-field-row-actions button:disabled {
  opacity: 0.35;
  cursor: default;
}

.form-field-grid {
  display: grid;
  /* Three columns under the question: the type, the hint (or how many answers)
     and Required. Five boxes in one row left each of them too narrow to read
     what was in it -- "Reason for openir", "Paragr...". */
  grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.2fr) auto;
  gap: 8px 10px;
  align-items: end;
}

/* The question and its description have the whole width to themselves. */
.form-field-grid > label:first-child {
  grid-column: 1 / -1;
}

/* The description and the tick list run the whole width under the row. */
.form-field-wide {
  grid-column: 1 / -1;
}

.form-field-hint {
  font-size: 0.72rem;
  font-weight: 500;
  color: #878787;
}

.form-field-choices {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(169, 169, 169, 0.14);
  padding-top: 10px;
}

.form-field-choices-head {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #acacac;
}

.form-choice-rows {
  display: grid;
  gap: 6px;
}

.form-choice-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.form-choice-row [data-form-choice-remove] {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(169, 169, 169, 0.22);
  background: rgba(18, 18, 18, 0.7);
  color: #d3d3d3;
  cursor: pointer;
  line-height: 1;
}

.form-choice-row [data-form-choice-remove]:hover {
  border-color: rgba(214, 105, 105, 0.5);
  color: #e8a0a0;
}

/* "Required" above its switch, like a label above its field; the switch
   sits at the height of the inputs beside it. */
.form-field-required {
  display: grid;
  justify-items: start;
  align-content: end;
  gap: 8px;
  white-space: nowrap;
}

.form-field-required-label {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.form-field-required .toggle-control {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
}

.form-field-add {
  justify-self: start;
  font-size: 0.8rem;
}

/* Nothing to list: say what the form will ask instead. */
.form-field-empty {
  margin: 0;
  border: 1px dashed rgba(169, 169, 169, 0.28);
  border-radius: 10px;
  padding: 10px 12px;
  color: #acacac;
  font-size: 0.8rem;
  line-height: 1.5;
}

.form-field-empty strong {
  color: #dddddd;
  font-weight: 700;
}

/* A {placeholder} in the message that no question answers. */
.form-field-warning {
  margin: 0;
  border: 1px solid rgba(232, 180, 90, 0.4);
  border-radius: 10px;
  padding: 9px 12px;
  background: rgba(232, 180, 90, 0.08);
  color: #f0d29a;
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Step 2 starts a new part of the option, so it gets air above it. */
.ticket-message-head {
  margin-top: 6px;
  border-top: 1px solid rgba(169, 169, 169, 0.14);
  padding-top: 14px;
}

/* Information about the ticket rather than an answer: fainter, so the
   buttons that are answers read as the ones to reach for. */
.open-placeholder-chip.is-info {
  border-style: dashed;
  border-color: rgba(243, 243, 243, 0.28);
  background: transparent;
  color: #c6c6c6;
}

/* An option folds to its head. Only ticket-panel options fold; a dropdown's
   are short enough to stay open. */
.ticket-option-row-head > .ticket-option-toggle {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border-radius: 10px;
}

.ticket-option-toggle-text {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.ticket-option-summary {
  color: #959595;
  font-size: 0.72rem;
}

.ticket-option-summary:empty {
  display: none;
}

.ticket-option-chevron {
  display: none;
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 4px 3px 2px;
  border-right: 2px solid #acacac;
  border-bottom: 2px solid #acacac;
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.ticket-option-row.is-collapsible .ticket-option-toggle {
  cursor: pointer;
}

.ticket-option-row.is-collapsible .ticket-option-chevron {
  display: block;
}

.ticket-option-row.is-collapsible .ticket-option-toggle:hover .ticket-option-chevron,
.ticket-option-row.is-collapsible .ticket-option-toggle:focus-visible .ticket-option-chevron {
  border-color: #f3f3f3;
}

.ticket-option-row.is-collapsible .ticket-option-toggle:focus-visible {
  outline: 2px solid rgba(243, 243, 243, 0.5);
  outline-offset: 3px;
}

.ticket-option-row.is-collapsed .ticket-option-chevron {
  transform: rotate(-45deg);
}

.ticket-option-row.is-collapsed > :not(.ticket-option-row-head) {
  display: none;
}

.form-field-add:disabled {
  opacity: 0.4;
  cursor: default;
}

.form-field-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.form-field-existing {
  position: relative;
}

.form-field-existing-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-height: 260px;
  overflow-y: auto;
  display: grid;
  gap: 4px;
  padding: 6px;
  border: 1px solid rgba(243, 243, 243, 0.35);
  border-radius: 12px;
  background: #0f0f0f;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.54);
}

.form-field-existing-item {
  display: grid;
  gap: 1px;
  text-align: left;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #e5e5e5;
  cursor: pointer;
}

.form-field-existing-item:hover {
  background: rgba(243, 243, 243, 0.12);
}

.form-field-existing-item strong {
  font-size: 0.82rem;
  font-weight: 600;
}

.form-field-existing-item small {
  font-size: 0.68rem;
  color: #9f9f9f;
}

.form-field-existing-empty {
  margin: 0;
  padding: 8px 10px;
  color: #7e7e7e;
  font-size: 0.76rem;
}

.form-field-row-actions [data-form-field-remove] {
  border-color: rgba(248, 113, 113, 0.42);
  color: #ffb4b4;
}

.form-field-row-actions [data-form-field-remove]:hover {
  border-color: rgba(248, 113, 113, 0.72);
  background: rgba(239, 68, 68, 0.16);
}

.form-field-save:hover {
  border-color: rgba(243, 243, 243, 0.75);
  background: rgba(243, 243, 243, 0.24);
}

.emoji-field {
  position: relative;
  display: block;
  width: 100%;
}

.emoji-field > textarea,
.emoji-field > input {
  width: 100%;
}

/* The single emoji button rides inside its field, centred against the right
   edge, so a narrow column does not spend a line on one icon. */
.emoji-field.has-inline-tool {
  position: relative;
  display: block;
}

.emoji-field.has-inline-tool > input {
  padding-right: 44px;
}

.emoji-field.has-inline-tool > .field-tools {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}

/* Label on the left, buttons hard right, field on the line below. */
.has-field-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.has-field-tools > .emoji-field,
.has-field-tools > select,
.has-field-tools > .form-help,
.has-field-tools > span.form-help {
  flex: 0 0 100%;
}

/* 0 rather than 1 for the grow factor: these heads are flex containers in
   their own right and filled the whole row, which pushed the buttons onto a
   line of their own instead of beside the label. */
.has-field-tools > .description-editor-head,
.has-field-tools > .command-option-head {
  flex: 0 1 auto;
  /* width: 100% on the head itself is what flex-basis: auto resolves to, so
     it filled the row and pushed the buttons onto a line of their own. */
  width: auto;
  min-width: 0;
  margin: 0;
}

.has-field-tools > .field-tools {
  margin-left: auto;
}

.field-tools {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

.field-tool-btn {
  min-width: 32px;
  /* .settings-form button sets min-height: 42px, which beats a plain height. */
  min-height: 30px;
  height: 30px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(178, 178, 178, 0.3);
  border-radius: 9px;
  background: #1f1f1f;
  color: #ebebeb;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

/* Real icons instead of text glyphs, so every button carries the same weight. */
.field-tool-btn svg {
  width: 17px;
  height: 17px;
  display: block;
}

.field-tool-btn:hover {
  border-color: rgba(178, 178, 178, 0.65);
  background: #272727;
  transform: translateY(-1px);
}

.server-emoji-picker.is-field-anchored,
.server-mention-picker.is-field-anchored {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
}

.server-emoji-picker.is-field-anchored.opens-up,
.server-mention-picker.is-field-anchored.opens-up {
  top: auto;
  bottom: calc(100% + 6px + var(--lift, 0px));
}

.server-mention-picker {
  position: absolute;
  z-index: 80;
  width: min(340px, calc(100vw - 40px));
  max-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(243, 243, 243, 0.35);
  border-radius: 14px;
  background: #0f0f0f;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.54);
}

.server-mention-picker > input {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 12px;
  color: var(--text);
  background: #0a0a0a;
}

.server-mention-list {
  display: grid;
  gap: 3px;
  overflow-y: auto;
}

.server-mention-option {
  display: flex;
  align-items: center;
  /* Centred, so @everyone and @here line up with the roles under them instead
     of hanging left the way the old right-hand note used to leave them. */
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 7px 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #e5e5e5;
  font-size: 0.84rem;
  cursor: pointer;
}

.server-mention-option:hover {
  background: rgba(243, 243, 243, 0.12);
}

/* @everyone and @here reach far more people than a role, so they read as
   their own thing rather than as another entry in the list. */
.server-mention-option.is-broadcast {
  font-weight: 700;
}

.open-placeholder-field {
  display: grid;
  gap: 6px;
}

.open-placeholder-chip-head {
  display: grid;
  gap: 2px;
}

.open-placeholder-chip-head span {
  font-size: 0.82rem;
  font-weight: 700;
  color: #e5e5e5;
}

.open-placeholder-chip-head small {
  color: #a3a3a3;
  font-size: 0.7rem;
  line-height: 1.45;
}

.m5-foot-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.m5-build {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

/* App pages keep the footer clear of the sticky unsaved-changes bar. */
body.m5-app .m5-footer {
  margin-top: 3rem;
}

/* Search and the category filter mark what does not match with .is-filtered,
   but the rules that hid it sit inside @layer legacy -- and there
   `.settings-form button.embed-template-card { display: grid }` outranks
   `.embed-template-card.is-filtered`, so neither "Search embeds..." nor
   "All categories" ever hid a single card. Outside the layer this wins
   whatever the specificity inside it. */
.embed-template-card.is-filtered,
.command-permission-row.is-filtered {
  display: none !important;
}

/* Floating formatting toolbar (appears when text is selected). */
.fmt-toolbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  border: 1px solid var(--m5-line-hi, #323232);
  border-radius: 10px;
  background: #0f0f0f;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.75);
  animation: fmtIn 140ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

.fmt-toolbar[hidden] {
  display: none;
}

@keyframes fmtIn {
  from { opacity: 0; transform-origin: bottom center; }
  to { opacity: 1; }
}

.fmt-button {
  min-width: 38px;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #d3d3d3;
  font: inherit;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}

.fmt-button:hover {
  background: rgba(243, 243, 243, 0.12);
  color: #f3f3f3;
}

.fmt-button:active {
  background: rgba(243, 243, 243, 0.2);
}

.fmt-button:focus-visible {
  outline: 2px solid rgba(243, 243, 243, 0.5);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .fmt-toolbar { animation: none; }
}

/* Quota Check: per-role targets and one-off exemptions. */
.quota-block {
  display: grid;
  gap: 11px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #111111, transparent);
  margin-bottom: 12px;
}

.quota-requirement-stack {
  display: grid;
  gap: 10px;
}

.quota-requirement-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #070707;
}

.quota-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quota-role-button {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  border: 1px solid var(--line-hi, #343434);
  border-radius: 10px;
  padding: 9px 12px;
  background: #111111;
  color: var(--text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.quota-role-button:hover {
  border-color: #ededed;
}

.quota-remove {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.quota-remove:hover {
  border-color: #e8837a;
  color: #e8837a;
}

.quota-requirement-row .form-grid.three {
  gap: 10px;
}

/* A picture that failed to load stays in the DOM so a later address can
   still use it -- it is only taken out of the layout. */
.discord-embed img.is-broken {
  display: none;
}

/* Prefix commands (;purge) must not look like slash commands. */
.cmd-prefix-mark {
  color: var(--m5-faint, #848484);
}

/* Embed Sender now sits next to the manage sidebar, so its two columns must
   shrink instead of demanding the old 760px + 520px minimum. */
.embed-sender-shell .embed-builder {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: 20px;
}

.embed-sender-shell .embed-editor,
.embed-sender-shell .embed-preview-panel {
  min-width: 0;
}

@media (max-width: 1200px) {
  .embed-sender-shell .embed-builder {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Search inside the Custom Edits box. */
.embed-template-card.is-custom-filtered {
  display: none;
}

.custom-template-search {
  margin-bottom: 8px;
  min-height: 34px;
  font-size: 0.82rem;
}

/* Rendering containment: these lists get long (100+ commands, 120+ templates),
   so keep the browser from laying out rows that are off screen. */
.command-permission-row {
  content-visibility: auto;
  contain-intrinsic-size: 340px;
}

.embed-template-card {
  content-visibility: auto;
  contain-intrinsic-size: 74px;
}

.permission-channel-list {
  contain: layout paint;
}

/* Embed editor: section buttons + panes */
.editor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-bottom: 14px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
}

.editor-nav-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 180ms cubic-bezier(.2, .9, .25, 1), border-color 180ms ease,
    color 180ms ease, background-color 180ms ease;
}

.editor-nav-button:hover {
  transform: translateY(-1px);
  border-color: var(--line-hi, rgba(243, 243, 243, 0.28));
  color: var(--text);
}

.editor-nav-button:active {
  transform: scale(0.97);
}

.editor-nav-button.is-active {
  border-color: #ededed;
  background: #ededed;
  color: #0b0b0b;
}

.editor-nav-button[hidden] {
  display: none;
}

.editor-pane {
  display: none;
}

.editor-pane.is-active {
  display: grid;
  gap: 14px;
  animation: editorPaneIn 260ms cubic-bezier(.2, .9, .25, 1);
}

.editor-pane[hidden] {
  display: none;
}

@keyframes editorPaneIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .editor-pane.is-active { animation: none; }
  .editor-nav-button { transition: none; }
}

.permission-channel-field {
  display: grid;
  gap: 6px;
}

.permission-channel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.permission-channel-head strong {
  font-size: 0.85rem;
}

.permission-channel-head span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.permission-channel-list {
  display: grid;
  gap: 2px;
  max-height: 168px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #070707;
  overscroll-behavior: contain;
}

.permission-channel-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
}

.permission-channel-option:hover {
  background: rgba(243, 243, 243, 0.05);
  color: var(--text);
}

.permission-channel-option input {
  flex: 0 0 auto;
  margin: 0;
  accent-color: #ededed;
}

.open-placeholder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.open-placeholder-chip {
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid rgba(243, 243, 243, 0.4);
  border-radius: 999px;
  padding: 3px 11px;
  color: #e9e9e9;
  background: rgba(243, 243, 243, 0.1);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.open-placeholder-chip:hover,
.open-placeholder-chip:focus-visible {
  border-color: rgba(243, 243, 243, 0.72);
  background: rgba(243, 243, 243, 0.2);
}

@media (max-width: 820px) {
  .form-field-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .form-field-required {
    padding-bottom: 0;
  }
  /* Narrow: the wording and its remove button share the first line, the
     description takes the second. */
  .form-choice-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .form-choice-row > .emoji-field:first-child {
    grid-area: 1 / 1;
  }
  .form-choice-row > [data-form-choice-remove] {
    grid-area: 1 / 2;
  }
  .form-choice-row > .emoji-field:nth-child(2) {
    grid-area: 2 / 1 / 3 / -1;
  }
}

.linked-option-editor {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(169, 169, 169, 0.17);
  border-radius: 15px;
  padding: 13px;
  background: rgba(18, 18, 18, 0.66);
}

.linked-option-editor-head {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(169, 169, 169, 0.14);
}

.linked-option-editor-head small {
  max-width: 320px;
  color: #a3a3a3;
  font-size: 0.7rem;
  line-height: 1.45;
  text-align: right;
}

.option-response-format {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.option-response-format legend {
  margin-bottom: 7px;
  color: #e6e6e6;
  font-size: 0.74rem;
  font-weight: 800;
}

.option-response-format-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.option-response-tabs {
  margin: 0;
}

.option-response-format-row .option-response-format-control {
  flex: 0 0 auto;
  width: 250px;
}

.option-response-pane {
  display: grid;
  gap: 12px;
}

.option-response-pane[hidden],
.option-response-tabs[hidden] {
  display: none;
}

.option-response-format-control {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  width: min(100%, 360px);
  border: 1px solid rgba(176, 176, 176, 0.2);
  border-radius: 13px;
  padding: 4px;
  background: rgba(4, 4, 4, 0.72);
}

.option-response-format-control label {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.option-response-format-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option-response-format-control span {
  min-height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #a0a0a0;
  font-size: 0.76rem;
  font-weight: 800;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.option-response-format-control label:hover span {
  color: #f0f0f0;
  background: rgba(162, 162, 162, 0.08);
}

.option-response-format-control input:checked + span {
  border-color: rgba(173, 173, 173, 0.45);
  color: #f6f6f6;
  background: rgba(127, 127, 127, 0.22);
  box-shadow: 0 4px 14px rgba(74, 74, 74, 0.2);
}

.dropdown-response-toggle-row {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(163, 163, 163, 0.18);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(15, 15, 15, 0.7);
}

.dropdown-response-toggle-row > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.dropdown-response-toggle-row strong {
  color: #f4f4f4;
  font-size: 0.78rem;
}

.dropdown-response-toggle-row small {
  color: #9e9e9e;
  font-size: 0.69rem;
}

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

@media (max-width: 720px) {
  .dropdown-response-embed-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ticket-option-footer {
  margin-top: 2px;
}

.ticket-option-footer span {
  color: #909090;
  font-size: 0.72rem;
}

@media (max-width: 820px) {
  .linked-option-editor .form-grid.two {
    grid-template-columns: minmax(0, 1fr);
  }

  .linked-option-editor-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .linked-option-editor-head small {
    text-align: left;
  }
}

.server-emoji-empty {
  margin: 12px 0 2px;
  color: var(--muted);
  text-align: center;
}

.template-action-button-stack {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.template-action-button-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.3fr) minmax(120px, 0.8fr) auto;
  align-items: end;
  gap: 12px;
  border: 1px solid rgba(186, 186, 186, 0.14);
  border-radius: 15px;
  padding: 12px;
  background: #0b0b0b;
}

.template-action-button-row small {
  grid-column: 1 / -1;
  color: var(--muted);
}

.builtin-button-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.builtin-button-add select {
  flex: 1 1 220px;
  min-width: 0;
}

.builtin-button-add small {
  flex-basis: 100%;
  color: var(--muted);
}

.image-layout-row {
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 0.75fr) minmax(180px, 1fr);
}

.discord-button.primary {
  background: #77716b;
}

.discord-button.success {
  background: #248046;
}

.discord-button.danger {
  background: #da373c;
}

.discord-button.secondary::after,
.discord-button.primary::after,
.discord-button.success::after,
.discord-button.danger::after {
  content: none;
}

@keyframes emoji-picker-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 760px) {
  .server-emoji-picker {
    position: fixed;
    top: 76px;
    right: 12px;
    left: 12px;
    width: auto;
  }

  .server-emoji-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .template-action-button-row,
  .image-layout-row {
    grid-template-columns: minmax(0, 1fr);
  }

  body {
    overflow-x: hidden;
  }

  .site-header,
  .site-header.is-compact {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }

  .manage-shell {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 24px 0 72px;
  }

  .manage-sidebar {
    position: static;
    width: 100%;
    min-width: 0;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(195, 186, 177, 0.14);
    padding: 0 0 18px;
  }

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

  .manage-nav a {
    min-width: 0;
    justify-content: center;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .manage-content,
  .manage-panels,
  .manage-panel,
  .manage-hero,
  .builder-card,
  .settings-form,
  .embed-template-workbench,
  .embed-template-list,
  .embed-template-editor,
  .embed-template-preview {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .embed-template-workbench,
  .form-grid.two,
  .form-grid.three,
  .linked-option-editor .form-grid.two {
    grid-template-columns: minmax(0, 1fr);
  }

  .builder-card-head {
    align-items: stretch;
    flex-direction: column;
  }

  .builder-card-actions,
  .builder-card-actions > button {
    width: 100%;
  }

  .manage-hero h1 {
    font-size: 2.25rem;
  }
}

@media (max-width: 430px) {
  .site-header .brand span,
  .site-header .nav-link.quiet {
    display: none;
  }
}
.hosting-cleanup-panel {
  display: grid;
  gap: 14px;
  margin: 18px 0 22px;
  padding: 18px;
  border: 1px solid rgba(165, 165, 165, 0.24);
  border-radius: 18px;
  background: rgba(10, 10, 10, 0.78);
}

.hosting-cleanup-panel h3 {
  margin: 0 0 5px;
}

.hosting-cleanup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hosting-cleanup-link {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid rgba(170, 170, 170, 0.22);
  border-radius: 15px;
  background: rgba(15, 15, 15, 0.92);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.hosting-cleanup-link:hover {
  transform: translateY(-2px);
  border-color: rgba(172, 172, 172, 0.58);
  background: rgba(30, 30, 30, 0.98);
}

.hosting-cleanup-link span:first-child {
  display: grid;
  gap: 4px;
}

.hosting-cleanup-link small {
  color: var(--muted);
}

.purge-channel-card {
  border-color: rgba(172, 172, 172, 0.3);
}

@media (max-width: 860px) {
  .hosting-cleanup-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   M5ive marketing / legal redesign (black, rounded, fluid)
   Scoped to body.m5-page so the dashboard stays untouched.
   ============================================================ */
:root {
  --m5-bg: #000000;
  --m5-card: #0b0b0b;
  --m5-card-2: #121212;
  --m5-ink: #f3f3f3;
  --m5-muted: #a0a0a0;
  --m5-faint: #6e6e6e;
  --m5-line: #1f1f1f;
  --m5-line-hi: #323232;
  --m5-ease: cubic-bezier(.16, 1, .3, 1);
  --m5-maxw: 1280px;
}
body.m5-page {
  margin: 0;
  background: var(--m5-bg);
  color: var(--m5-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}
body.m5-page .m5 { min-height: 100dvh; }
body.m5-page .wrap { max-width: var(--m5-maxw); margin: 0 auto; padding: 0 40px; }
body.m5-page a { color: inherit; }

.m5-mark { display: flex; align-items: center; gap: 11px; font-weight: 600; letter-spacing: -0.02em; font-size: 19px; text-decoration: none; color: var(--m5-ink); }
.m5-logo { width: 34px; height: 34px; border-radius: 10px; background: #030303; border: 1px solid var(--m5-line-hi); object-fit: contain; display: block; flex: 0 0 auto; }
.m5-mark small { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-weight: 400; font-size: 13px; color: var(--m5-faint); }

.m5-nav { display: flex; align-items: center; justify-content: space-between; height: 88px; }
.m5-nav-actions { display: flex; align-items: center; gap: 20px; }
.m5-navlink { text-decoration: none; color: var(--m5-muted); font-size: 15px; transition: color .25s var(--m5-ease); }
.m5-navlink:hover { color: var(--m5-ink); }

/* shared sticky header + account menu */
.m5-header { position: sticky; top: 0; z-index: 50; display: block; padding: 0; background: rgba(0, 0, 0,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--m5-line); transition: transform .35s var(--m5-ease); }
.m5-header-inner { max-width: var(--m5-maxw); margin: 0 auto; padding: 15px 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.m5-account { position: relative; }
.m5-avatar { width: 40px; height: 40px; border-radius: 999px; padding: 0; border: 1px solid var(--m5-line-hi); background: transparent; cursor: pointer; overflow: hidden; display: grid; place-items: center; transition: border-color .25s var(--m5-ease), transform .25s var(--m5-ease); }
.m5-avatar img { width: 100%; height: 100%; object-fit: cover; }
.m5-avatar:hover { border-color: var(--m5-ink); transform: translateY(-1px); }
.m5-account-menu { position: absolute; right: 0; top: calc(100% + 12px); width: 246px; padding: 8px; border-radius: 16px; background: var(--m5-card); border: 1px solid var(--m5-line-hi); box-shadow: 0 24px 60px rgba(0,0,0,0.55); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s var(--m5-ease), transform .22s var(--m5-ease), visibility .22s; z-index: 60; }
.m5-account.is-open .m5-account-menu { opacity: 1; visibility: visible; transform: none; }
.m5-account-head { display: flex; align-items: center; gap: 11px; padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--m5-line); }
.m5-account-head img { width: 40px; height: 40px; border-radius: 999px; object-fit: cover; flex: 0 0 40px; }
.m5-account-head strong { display: block; font-size: 14px; letter-spacing: -0.01em; }
.m5-account-head span { display: block; font-size: 12.5px; color: var(--m5-faint); font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.m5-account-menu a { display: block; text-decoration: none; color: var(--m5-muted); font-size: 14px; padding: 9px 10px; border-radius: 10px; transition: background .2s var(--m5-ease), color .2s var(--m5-ease); }
.m5-account-menu a:hover { background: var(--m5-card-2); color: var(--m5-ink); }
.m5-account-danger { color: #e8908c; }
.m5-account-menu a.m5-account-danger:hover { background: rgba(232,120,120,0.12); color: #ff9e9a; }
@media (max-width: 640px) { .m5-hide-sm { display: none; } .m5-header-inner { padding: 14px 22px; } }

.m5-pill {
  display: inline-block; text-decoration: none; font-size: 14px; font-weight: 500;
  padding: 10px 20px; border-radius: 999px; color: var(--m5-ink); border: 1px solid var(--m5-line-hi); background: transparent;
  transition: transform .3s var(--m5-ease), background .3s var(--m5-ease), border-color .3s var(--m5-ease), color .3s var(--m5-ease);
}
.m5-pill:hover { transform: translateY(-1px); background: rgba(243, 243, 243,0.06); border-color: var(--m5-ink); }
.m5-pill.solid { background: var(--m5-ink); color: #030303; border-color: var(--m5-ink); font-weight: 600; }
.m5-pill.solid:hover { transform: translateY(-2px) scale(1.02); background: #fff; }
.m5-pill-lg { padding: 13px 26px; font-size: 15px; }

.m5-hero { padding: 66px 0 80px; }
.m5-kicker { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 13px; letter-spacing: 0.08em; color: var(--m5-muted); text-transform: uppercase; margin: 0 0 24px; display: inline-flex; align-items: center; gap: 10px; }
.m5-kicker::before { content: ""; width: 26px; height: 1px; background: var(--m5-line-hi); }
.m5-hero h1 { font-size: clamp(48px, 7.2vw, 100px); line-height: 0.97; letter-spacing: -0.04em; font-weight: 640; margin: 0; max-width: 15ch; text-wrap: balance; }
.m5-hero .lead { font-size: 20px; color: var(--m5-muted); max-width: 46ch; margin: 30px 0 40px; }
.m5-cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.m5-cta-row .m5-pill { padding: 15px 30px; font-size: 16px; }
.m5-meta { margin-top: 46px; display: flex; gap: 26px; flex-wrap: wrap; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 13px; color: var(--m5-faint); }
.m5-meta span { display: inline-flex; align-items: center; gap: 8px; }
.m5-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--m5-ink); }

.m5-feat { padding: 44px 0 26px; }
.m5-feat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-bottom: 28px; }
.m5-feat-head h2 { font-size: 27px; letter-spacing: -0.02em; font-weight: 560; margin: 0; }
.m5-feat-head p { margin: 0; color: var(--m5-muted); font-size: 15px; }
.m5-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.m5-card { padding: 30px; border-radius: 22px; background: var(--m5-card); border: 1px solid var(--m5-line); transition: transform .4s var(--m5-ease), border-color .4s var(--m5-ease), background .4s var(--m5-ease); }
.m5-card:hover { transform: translateY(-5px); border-color: var(--m5-line-hi); background: var(--m5-card-2); }
.m5-card h3 { font-size: 18px; margin: 0 0 9px; letter-spacing: -0.01em; font-weight: 560; }
.m5-card p { margin: 0; font-size: 15px; color: var(--m5-muted); }

.m5-band { margin: 54px 0; padding: 60px; border-radius: 30px; background: var(--m5-card); border: 1px solid var(--m5-line); display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.m5-band h2 { font-size: clamp(30px, 4.2vw, 50px); letter-spacing: -0.03em; font-weight: 620; margin: 0; max-width: 16ch; text-wrap: balance; }
.m5-band p { color: var(--m5-muted); margin: 14px 0 0; max-width: 42ch; font-size: 16px; }

.m5-footer { border-top: 1px solid var(--m5-line); margin-top: 20px; padding: 56px 0 0; background: var(--m5-bg); }
/* The footer also runs on dashboard pages, where .wrap is not constrained by
   body.m5-page — keep it centred there instead of spanning the full width. */
.m5-footer .wrap { max-width: var(--m5-maxw); margin: 0 auto; padding: 0 40px; }
body.m5-app .m5-footer { font-size: 16px; line-height: 1.6; }
@media (max-width: 720px) {
  .m5-footer .wrap { padding: 0 20px; }
  .m5-foot-grid { grid-template-columns: max-content max-content; justify-content: end; column-gap: 72px; row-gap: 24px; padding-right: 20px; }
}
.m5-footer .m5-mark { margin-bottom: 4px; }
.m5-foot-grid { display: grid; grid-template-columns: 1fr max-content max-content; column-gap: 96px; row-gap: 32px; padding-right: 24px; }
.m5-foot-brand p { color: var(--m5-muted); font-size: 15px; margin: 16px 0 0; max-width: 30ch; }
.m5-foot-brand .tm sup { font-size: 10px; color: var(--m5-faint); }
.m5-foot-col h4 { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m5-faint); margin: 4px 0 16px; font-weight: 500; }
.m5-foot-col a { display: block; text-decoration: none; color: var(--m5-muted); font-size: 15.5px; margin-bottom: 13px; transition: color .25s var(--m5-ease); }
.m5-foot-col a:hover { color: var(--m5-ink); }
.m5-foot-bar { margin-top: 44px; padding: 22px 0 46px; border-top: 1px solid var(--m5-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--m5-faint); font-size: 14px; }
.m5-foot-bar span { font-family: ui-monospace, "SF Mono", Consolas, monospace; }

/* legal pages */
.legal { max-width: 800px; margin: 0 auto; padding: 48px 0 36px; }
.legal h1 { font-size: clamp(40px, 5.6vw, 64px); letter-spacing: -0.035em; font-weight: 640; margin: 0 0 8px; }
.legal-updated { color: var(--m5-faint); font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 13px; margin: 0 0 34px; }
.legal p { color: var(--m5-muted); font-size: 17px; margin: 0 0 17px; }
.legal h2 { font-size: 23px; letter-spacing: -0.02em; margin: 40px 0 12px; color: var(--m5-ink); }
.legal h3 { font-size: 17.5px; margin: 0 0 7px; color: var(--m5-ink); }
.legal a { color: var(--m5-ink); border-bottom: 1px solid var(--m5-line-hi); text-decoration: none; }
.legal a:hover { border-color: var(--m5-ink); }
.legal-list { margin: 6px 0 18px; padding-left: 0; list-style: none; counter-reset: li; }
ol.legal-list > li { counter-increment: li; position: relative; padding: 0 0 20px 46px; }
ol.legal-list > li::before { content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12px; color: var(--m5-faint); }
ul.legal-list { padding-left: 20px; list-style: disc; }
ul.legal-list li { color: var(--m5-muted); font-size: 15px; margin-bottom: 8px; }
.legal-note { margin-top: 36px; padding: 18px 20px; border: 1px solid var(--m5-line); border-radius: 16px; background: var(--m5-card); color: var(--m5-muted); font-size: 14px; }

/* dashboard + profile pages */
.m5-pagehead { padding: 70px 0 40px; }
.m5-pagehead h1 { font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -0.035em; font-weight: 640; margin: 10px 0 12px; }
.m5-pagehead-lead { color: var(--m5-muted); font-size: 17px; margin: 0; max-width: 52ch; }
/* Flex rather than grid: a grid centres its whole track set but still pins a lone card in the last row to the first column, and with seven bots there is always an odd one out. */
.m5-server-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 16px; padding-bottom: 64px; }
.m5-server-card { flex: 1 1 300px; max-width: 380px; }
.m5-server-card { display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: 20px; background: var(--m5-card); border: 1px solid var(--m5-line); text-decoration: none; color: var(--m5-ink); transition: transform .35s var(--m5-ease), border-color .35s var(--m5-ease), background .35s var(--m5-ease); }
.m5-server-card:hover { transform: translateY(-4px); border-color: var(--m5-line-hi); background: var(--m5-card-2); }
.m5-server-icon { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 16px; overflow: hidden; background: var(--m5-card-2); border: 1px solid var(--m5-line-hi); display: grid; place-items: center; font-weight: 700; font-size: 22px; color: var(--m5-muted); }
.m5-server-icon img { width: 100%; height: 100%; object-fit: cover; }
.m5-server-body { flex: 1; min-width: 0; }
.m5-server-body small { display: block; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--m5-faint); margin-bottom: 3px; }
.m5-server-body strong { display: block; font-size: 18px; letter-spacing: -0.01em; margin-bottom: 4px; }
.m5-server-body p { margin: 0; font-size: 14px; color: var(--m5-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m5-badge { display: inline-block; margin-top: 8px; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: rgba(243, 243, 243, 0.1); color: #c3c3c3; border: 1px solid rgba(243, 243, 243, 0.2); }
.m5-server-arrow { color: var(--m5-faint); font-size: 20px; transition: transform .3s var(--m5-ease), color .3s; }
.m5-server-card:hover .m5-server-arrow { color: var(--m5-ink); transform: translateX(3px); }
.m5-empty { text-align: center; padding: 80px 24px; border: 1px dashed var(--m5-line-hi); border-radius: 24px; margin-bottom: 64px; }
.m5-empty h2 { font-size: 24px; margin: 0 0 8px; }
.m5-empty p { color: var(--m5-muted); margin: 0 auto 24px; max-width: 44ch; }
.m5-profile-head { display: flex; align-items: center; gap: 22px; padding: 60px 0 34px; flex-wrap: wrap; }
.m5-profile-avatar { width: 88px; height: 88px; border-radius: 999px; object-fit: cover; border: 1px solid var(--m5-line-hi); }
.m5-profile-name { flex: 1; min-width: 0; }
.m5-profile-name h1 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.03em; margin: 0 0 4px; font-weight: 640; }
/* The big name starts a few pixels in from its box (the first letter's own
   side bearing, which grows with the font size); the username in its small
   mono font has almost none. The same fraction of the name's size, so the two
   start on one line at every width. */
.m5-profile-name p { margin: 0; padding-left: calc(clamp(30px, 4vw, 46px) * 0.075); color: var(--m5-faint); font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 14px; }
.m5-profile-card { margin-top: 30px; border: 1px solid var(--m5-line); border-radius: 26px; overflow: hidden; background: var(--m5-card); }
/* The banner is a picture somebody chose for Discord, not for this page, so
   it is treated as wallpaper: pinned into its own strip, clipped there, and
   dimmed towards the bottom so the name and the avatar always sit on
   something calm.

   overflow and the absolute image are what actually hold it. Height alone
   did not: the strip stayed 200px while the picture inside it ran on for a
   thousand more and covered the whole card head. Pinned to the edges of the
   strip it has no say in its own height any more. */
/* Die Hoehe kommt vom Banner selbst. Fest 180 px schnitt ein 5:2-Banner bei
   dieser Kartenbreite auf gut ein Drittel zusammen. */
.m5-profile-banner { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--pc, #2a2a2a), #0d0d0d); }
.m5-profile-banner:not(:has(img)) { height: 180px; background: var(--pc, #2a2a2a); }
.m5-profile-banner img { position: relative; width: 100%; height: auto; display: block; }
.m5-profile-banner:has(img)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 72%, rgba(0,0,0,0.45) 100%); pointer-events: none; }
/* Above the banner, never under it. */
.m5-profile-card .m5-profile-head { position: relative; z-index: 1; padding: 0 32px 30px; align-items: flex-end; }
.m5-profile-card .m5-profile-avatar { width: 116px; height: 116px; margin-top: -62px; border: 4px solid var(--m5-card); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.m5-profile-card .m5-profile-name { padding-bottom: 8px; }
@media (max-width: 640px) { .m5-profile-card .m5-profile-head { flex-direction: column; align-items: flex-start; } }
.m5-notice { max-width: 640px; margin: 70px auto; padding: 46px; border: 1px solid var(--m5-line); border-radius: 24px; background: var(--m5-card); text-align: center; }
.m5-notice .m5-mark { justify-content: center; margin: 0 auto 20px; display: inline-flex; }
.m5-notice .m5-kicker { justify-content: center; }
.m5-notice h1 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.03em; margin: 8px 0 14px; font-weight: 640; }
.m5-notice p { color: var(--m5-muted); font-size: 16px; margin: 0 auto 24px; max-width: 46ch; }
.m5-notice code { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 13px; background: #050505; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--m5-line); }
.m5-code { text-align: left; background: #050505; border: 1px solid var(--m5-line); border-radius: 12px; padding: 14px 16px; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 13px; color: var(--m5-muted); overflow-x: auto; margin: 0 0 24px; white-space: pre-wrap; }

/* ===== app pages retheme (manage / embed sender / command editors) — visual only ===== */
body.m5-app { background: var(--m5-bg) !important; color: var(--m5-ink); }
body.m5-app .manage-hero { background: var(--m5-card) !important; border: 1px solid var(--m5-line) !important; border-radius: 24px !important; box-shadow: none !important; }
body.m5-app .manage-hero .eyebrow { color: var(--m5-faint) !important; }
body.m5-app .manage-hero h2, body.m5-app .manage-hero h1 { color: var(--m5-ink) !important; }
body.m5-app .manage-hero [data-section-title] { color: var(--m5-muted) !important; }
/* .embed-sender-shell sits on the page's <main>, wrapping the sidebar as
   well, so giving it the card treatment painted the whole Embed Sender page
   as one 3700px rounded slab. Only real content panels belong here; the
   shell keeps its layout rules further up. */
/* .preview-sticky is the live preview column on Embed Sender. Seven rules
   set a card background between them and this one wins; leaving the preview
   out of it left that column on the older, warmer #090909 beside cards that
   had all moved to the neutral surface, which is what looked wrong. */
body.m5-app .builder-card, body.m5-app .settings-form, body.m5-app .command-action-panel, body.m5-app .command-permissions-panel, body.m5-app .preview-sticky { background: var(--m5-card) !important; border: 1px solid var(--m5-line) !important; border-radius: 22px !important; box-shadow: none !important; }
body.m5-app .config-block, body.m5-app .server-reference-picker { background: #070707 !important; border: 1px solid var(--m5-line) !important; border-radius: 16px !important; }
body.m5-app .builder-card h2, body.m5-app .builder-card h3, body.m5-app .settings-form h2, body.m5-app .settings-form h3 { color: var(--m5-ink) !important; }
body.m5-app .form-help, body.m5-app .builder-card p, body.m5-app .settings-form p { color: var(--m5-muted) !important; }
body.m5-app .eyebrow { color: var(--m5-faint) !important; }
body.m5-app input[type="text"], body.m5-app input[type="search"], body.m5-app input[type="url"], body.m5-app input[type="number"], body.m5-app input[type="password"], body.m5-app input:not([type]), body.m5-app select, body.m5-app textarea {
  background: #050505 !important; border: 1px solid var(--m5-line-hi) !important; border-radius: 12px !important; color: var(--m5-ink) !important;
}
body.m5-app input:focus, body.m5-app select:focus, body.m5-app textarea:focus { border-color: var(--m5-muted) !important; box-shadow: none !important; outline: none; }
body.m5-app ::placeholder { color: var(--m5-faint) !important; }
body.m5-app .ghost-button { background: transparent !important; border: 1px solid var(--m5-line-hi) !important; border-radius: 999px !important; color: var(--m5-ink) !important; box-shadow: none !important; }
body.m5-app .ghost-button:hover { background: rgba(243, 243, 243,0.07) !important; border-color: var(--m5-ink) !important; }
body.m5-app .save-settings-button { background: var(--m5-ink) !important; color: #030303 !important; border-color: var(--m5-ink) !important; }
body.m5-app .save-settings-button:hover { background: #fff !important; }
body.m5-app .danger-button, body.m5-app .bloxlink-remove-key-button, body.m5-app .server-leave-button { background: transparent !important; border: 1px solid rgba(232,120,120,0.4) !important; color: #e8908c !important; border-radius: 999px !important; }
body.m5-app .danger-button:hover, body.m5-app .bloxlink-remove-key-button:hover, body.m5-app .server-leave-button:hover { background: rgba(232,120,120,0.12) !important; border-color: rgba(232,120,120,0.7) !important; }
body.m5-app .presence-option { background: #050505 !important; border: 1px solid var(--m5-line-hi) !important; border-radius: 14px !important; }
body.m5-app .presence-option:has(input:checked) { border-color: var(--m5-ink) !important; background: var(--m5-card-2) !important; }
body.m5-app .bot-color-swatch { border-radius: 12px !important; border: 1px solid var(--m5-line-hi) !important; }
body.m5-app .back-link { color: var(--m5-faint) !important; }
body.m5-app .back-link:hover { color: var(--m5-ink) !important; }
body.m5-app .manage-server-head h1 { color: var(--m5-ink) !important; }
body.m5-app .manage-server-head span { color: var(--m5-muted) !important; }
body.m5-app .manage-guild-avatar { border-radius: 14px !important; border: 1px solid var(--m5-line-hi) !important; overflow: hidden; }
/* Bot name above, server below; whichever is too long ends in an ellipsis. */
body.m5-app .manage-server-names { min-width: 0; }
body.m5-app .manage-server-head h1,
body.m5-app .manage-server-head .manage-server-names > span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-wrap: normal;
}
body.m5-app .manage-nav a { color: var(--m5-muted) !important; border-radius: 10px !important; }
body.m5-app .manage-nav a:hover { color: var(--m5-ink) !important; background: rgba(243, 243, 243,0.05) !important; }
body.m5-app .manage-nav a.active { background: var(--m5-card-2) !important; color: var(--m5-ink) !important; box-shadow: none !important; border-color: var(--m5-line-hi) !important; }
/* embed sender + editor: remaining blue elements → monochrome */
body.m5-app .emoji-picker-trigger, body.m5-app .embed-card-emoji-trigger { background: transparent !important; border: 1px solid var(--m5-line-hi) !important; color: var(--m5-ink) !important; border-radius: 999px !important; box-shadow: none !important; }
body.m5-app .emoji-picker-trigger:hover, body.m5-app .embed-card-emoji-trigger:hover { background: rgba(243, 243, 243,0.07) !important; border-color: var(--m5-ink) !important; }
body.m5-app .embed-details { background: #050505 !important; border: 1px solid var(--m5-line-hi) !important; border-radius: 14px !important; }
body.m5-app .embed-details summary { color: var(--m5-ink) !important; }
body.m5-app .embed-details[open] summary { border-bottom-color: var(--m5-line) !important; }
body.m5-app .dropdown-response-toggle-row { background: #070707 !important; border: 1px solid var(--m5-line) !important; border-radius: 14px !important; }
body.m5-app .dropdown-response-toggle-row strong { color: var(--m5-ink) !important; }
body.m5-app .dropdown-response-toggle-row small { color: var(--m5-muted) !important; }
body.m5-app .toggle-control input:checked + span { border-color: var(--m5-ink) !important; background: #4b4b4b !important; box-shadow: none !important; }
body.m5-app .toggle-control input:checked + span::after { background: #ffffff !important; }
/* sticky live preview: stretch the grid column so sticky actually holds while scrolling */
body.m5-app .embed-preview-panel { align-self: stretch !important; }
body.m5-app .preview-sticky { top: 92px !important; }
body.m5-app label { line-height: 1.45; }
.m5-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 20px; padding-bottom: 24px; }
.m5-stat { padding: 22px 24px; border-radius: 18px; background: var(--m5-card); border: 1px solid var(--m5-line); }
.m5-stat strong { display: block; font-size: 30px; letter-spacing: -0.02em; }
.m5-stat span { display: block; margin-top: 4px; font-size: 13px; color: var(--m5-muted); }
.m5-botlist { display: grid; gap: 10px; padding-bottom: 64px; }
.m5-botrow { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 16px; background: var(--m5-card); border: 1px solid var(--m5-line); text-decoration: none; color: var(--m5-ink); transition: border-color .3s var(--m5-ease), background .3s var(--m5-ease); }
.m5-botrow:hover { border-color: var(--m5-line-hi); background: var(--m5-card-2); }
.m5-botrow .m5-server-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px; font-size: 17px; }
.m5-botrow-body { flex: 1; min-width: 0; }
.m5-botrow-body strong { display: block; font-size: 15.5px; }
.m5-botrow-body span { display: block; font-size: 13px; color: var(--m5-muted); }
.m5-botrow-access { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12.5px; color: var(--m5-faint); white-space: nowrap; }
@media (max-width: 780px) {
  body.m5-page .m5-server-card { flex-basis: 100%; max-width: none; }
  body.m5-page .m5-stat-row { grid-template-columns: 1fr; }
}

.rise { opacity: 0; transform: translateY(22px); }
.m5.ready .rise { animation: m5rise .85s var(--m5-ease) forwards; }
.m5.ready .rise.d1 { animation-delay: .05s; }
.m5.ready .rise.d2 { animation-delay: .14s; }
.m5.ready .rise.d3 { animation-delay: .23s; }
.m5 .in { animation: m5rise .85s var(--m5-ease) forwards; }
@keyframes m5rise { to { opacity: 1; transform: none; } }

@media (max-width: 780px) {
  body.m5-page .m5-grid { grid-template-columns: 1fr; }
  body.m5-page .m5-feat-head { flex-direction: column; }
  body.m5-page .m5-band { flex-direction: column; align-items: flex-start; }
  body.m5-page .m5-foot-grid { grid-template-columns: max-content max-content; justify-content: end; column-gap: 72px; row-gap: 28px; padding-right: 20px; }
  body.m5-page .m5-foot-brand { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  body.m5-page .rise, body.m5-page .m5 .in { opacity: 1 !important; transform: none !important; animation: none !important; }
  body.m5-page .m5-card, body.m5-page .m5-pill, body.m5-page .m5-foot-col a { transition: none !important; }
}

/* Embed Editor submenu ---------------------------------------------------
   "Embed Editor" expands into its sub-pages (DM Templates). The group is a
   grid item inside .manage-nav, so it inherits the nav gap and the child
   links keep the normal nav link styling. */
.manage-nav-group {
  display: grid;
  gap: 6px;
  min-width: 0;
  transition: gap 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Folded, the group kept its 6px gap to the empty submenu, so the entry
   under Bot and under Embed Editor sat 12px down where every other one sits
   6px. */
.manage-nav-group:not(.is-open) {
  gap: 0;
}

/* The label navigates and the arrow folds, so they are two controls that have
   to read as one row: the link fills the row and the button sits on top of its
   right edge, which keeps the existing full-width hover highlight. */
.manage-nav-row {
  position: relative;
  display: grid;
  min-width: 0;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Nav links nudge right on hover. The arrow is an absolutely positioned
   sibling, so it stayed behind and the row visibly came apart -- the shift
   belongs to the whole row instead. */
.manage-nav-row:hover {
  transform: translateX(3px);
}

.manage-nav .manage-nav-row .manage-nav-parent:hover {
  transform: none;
}

.manage-nav .manage-nav-parent {
  padding-right: 44px;
}

.manage-nav-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  border: 0;
  border-radius: 0 8px 8px 0;
  padding: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

/* Hovering the arrow must not drop the row highlight the link would show. */
.manage-nav-row:hover .manage-nav-parent {
  border-color: var(--line);
  color: var(--text);
}

.manage-nav-toggle:hover .manage-nav-caret {
  opacity: 1;
}

.manage-nav-toggle:focus-visible {
  outline: 2px solid #eeeeee;
  outline-offset: -3px;
}

.manage-nav-caret {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  opacity: 0.5;
  transform: rotate(45deg);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease;
}

.manage-nav-group.is-open .manage-nav-caret {
  opacity: 0.9;
  transform: rotate(-135deg);
}

.manage-subnav {
  display: grid;
  gap: 6px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 240ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms ease;
}

.manage-nav-group.is-open .manage-subnav {
  max-height: 260px;
  opacity: 1;
}

.manage-nav .manage-subnav a {
  position: relative;
  min-height: 38px;
  margin-left: 13px;
  border-left: 1px solid var(--line);
  border-radius: 0 8px 8px 0;
  padding: 0 12px;
  gap: 8px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.manage-nav .manage-subnav a:hover,
.manage-nav .manage-subnav a.active {
  border-left-color: #eeeeee;
  color: var(--text);
  box-shadow: none;
}

.manage-subnav-count {
  min-width: 20px;
  margin-left: auto;
  border-radius: 999px;
  padding: 2px 7px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 760px) {
  .manage-nav-group {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .manage-subnav,
  .manage-nav-caret {
    transition: none;
  }
}

/* ==========================================================================
   Unified control feedback
   Every control answers the same way: it lifts a little under the pointer,
   presses in when clicked, and shows one recognisable ring when reached by
   keyboard. Timings match the nav links so the interface moves as one piece.
   The global prefers-reduced-motion rule already flattens these transitions.
   ========================================================================== */

.ghost-button,
.danger-button,
.primary-action,
.secondary-action,
.compact-button,
.editor-nav-button,
.embed-template-card,
.selected-role-chip,
.role-chip-remove,
.open-placeholder-chip,
.fmt-button,
.avatar-button {
  transition:
    transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 140ms ease,
    background-color 140ms ease,
    color 140ms ease,
    box-shadow 180ms ease,
    opacity 140ms ease;
}

/* Press feedback for the controls that only had a hover state. Buttons
   already get this from the global rule; these are the ones it missed. */
.embed-template-card:active,
.selected-role-chip:active,
.open-placeholder-chip:active {
  transform: scale(0.985);
}

.role-chip-remove:active {
  transform: scale(0.9);
}

/* The sidebar arrow must not lift: the row it sits on already slides 3px to
   the right on hover, and two different movements tore the row apart. */
.manage-nav .manage-nav-toggle:hover,
.manage-nav .manage-nav-toggle:active {
  transform: none;
}

/* Toggle switches read as a physical control, so the knob reacts rather than
   the whole label drifting. */
.toggle-control span {
  transition: background-color 160ms ease, border-color 160ms ease;
}

.toggle-control:active span::after,
.toggle-control:active span::before {
  transform: scale(0.92);
}

/* One focus ring everywhere. body.m5-app set `outline: none` on :focus for
   every field, which also silenced :focus-visible and left keyboard users
   with no idea where they were. */
body.m5-app input:focus-visible,
body.m5-app select:focus-visible,
body.m5-app textarea:focus-visible,
body.m5-app button:focus-visible,
body.m5-app a:focus-visible,
body.m5-app [tabindex]:focus-visible {
  outline: 2px solid rgba(243, 243, 243, 0.72);
  outline-offset: 2px;
}

/* Inside a scrolling list an offset ring gets clipped, so it sits inward. */
body.m5-app .embed-template-card:focus-visible,
body.m5-app .editor-nav-button:focus-visible {
  outline-offset: -2px;
}

/* A disabled control should not pretend to react. */
button:disabled,
.ghost-button:disabled,
.danger-button:disabled {
  transform: none !important;
  opacity: 0.6;
}

/* Unsaved bar: the shake that answers a blocked navigation ---------------- */
@keyframes m5ive-unsaved-nudge {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.is-nudging {
  animation: m5ive-unsaved-nudge 520ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@media (prefers-reduced-motion: reduce) {
  .is-nudging { animation: none; }
}

/* Name and bio stack inside one block, so the second label needs the gap the
   grid rows elsewhere give it for free. */
.appearance-block > label + label {
  margin-top: 14px;
}

/* The bio is a paragraph, not a line: room to read it, and a handle to grow. */
.appearance-block textarea {
  min-height: 84px;
  resize: vertical;
}

/* A divider is a line, not an embed. The card keeps its header -- move,
   duplicate, remove all still apply -- and drops everything a line has no
   use for: headline, description, author, image address, fields, footer. */
.additional-embed-card.is-divider > *:not(.additional-embed-card-head):not([data-divider-field]) {
  display: none !important;
}

.additional-embed-card.is-divider {
  gap: 12px;
}

/* Folded away: only the header (name, move/duplicate/remove) stays, so a
   template with several extra embeds can be skimmed without scrolling
   past every field of each one. */
.additional-embed-card.is-folded > *:not(.additional-embed-card-head) {
  display: none !important;
}

.divider-row[hidden] {
  display: none !important;
}

.divider-note {
  align-self: center;
  margin: 0;
}

/* Dragging blocks in the live preview.
   Nothing is rearranged while the pointer moves. A line marks the gap the
   block would drop into, or the embed a picture would land in is outlined,
   and the block being carried is dimmed and settles back rather than
   snapping. */
.discord-embeds [draggable="true"] {
  cursor: grab;
  transition: opacity 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.discord-embeds.is-sorting {
  /* Text selection fights the drag, and there is nothing here to select. */
  user-select: none;
}

.discord-embeds.is-sorting [draggable="true"]:active {
  cursor: grabbing;
}

.discord-embeds .is-dragging {
  opacity: 0.35;
  transform: scale(0.985);
}

.discord-embeds .is-drop-target {
  outline: 2px solid var(--m5-accent, #8ef7ed);
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 0 6px rgba(142, 247, 237, 0.12);
}

.preview-drop-line {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  height: 3px;
  margin: 3px 0;
  border-radius: 999px;
  background: var(--m5-accent, #8ef7ed);
  box-shadow: 0 0 10px rgba(142, 247, 237, 0.55);
  animation: preview-drop-line-in 140ms ease;
}

@keyframes preview-drop-line-in {
  from { opacity: 0; transform: scaleX(0.4); }
  to { opacity: 1; transform: scaleX(1); }
}

/* The thickness slider carries its own reading. */
.divider-size-control {
  gap: 4px;
}

.divider-size-control output {
  float: right;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.divider-size-control input[type="range"] {
  width: 100%;
  accent-color: var(--m5-accent, #8ef7ed);
}

/* The top bar.
   It used to be 1680 wide with its contents capped at 1280 and centred, so
   the writing floated in the middle of a lot of empty bar and stayed exactly
   where it was when the bar drew in. The contents follow the bar now.

   The bar has two states and switches at once: the page sets --m5-squeeze to
   88px past a scroll position and back to nothing above a lower one, and
   width and side padding are read off that number with a short ease. */
/* Both states are named in every one of these rules on purpose. Older layers
   set the width and the corners for `.site-header.is-compact`, which outranks
   a plain `.site-header`; without the second selector the squeeze worked
   until the class arrived and then froze. */
.site-header,
.site-header.is-compact {
  min-height: 0;
  /* Nothing had ever centred the bar: it is a block with a width and no side
     margin, so it sat against the left edge with all its slack on the right.
     At 1680 wide that was 310px on a wide screen and easy to miss; drawing it
     in to 1440 turned the same gap into 550 and made it obvious. The page's
     own content column is centred, so the bar follows it. */
  margin-inline: auto;
  /* The corners used to shrink with the squeeze, from 28px down to 16.
     Drawn in, the bar then read as a rectangle -- the one thing the
     movement was never meant to change. The radius it has standing still
     is the radius it keeps, so the only thing the scroll changes is how
     far in the bar comes. */
  border-radius: 28px;
  /* No containment here. `contain: paint` was set to keep the squeeze from
     costing the rest of the page any painting -- but paint containment clips
     everything a box draws outside itself, and the account menu hangs 190px
     below the bar. It opened, it was visible by every measure the CSS could
     report, and not one pixel of it was drawn. The speed it bought was never
     measured; the profile button it broke was real. */
  transition:
    width 170ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 170ms ease,
    border-color 170ms ease,
    box-shadow 170ms ease;
}

@media (min-width: 761px) {
  .site-header,
  .site-header.is-compact {
    width: calc(min(1440px, 100vw - 56px) - var(--m5-squeeze, 0px) * 2);
  }
}

.site-header .m5-header-inner {
  max-width: none;
  transition: padding 170ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 641px) {
  .site-header .m5-header-inner,
  .site-header.is-compact .m5-header-inner {
    /* Sideways only: the vertical padding never changes, so the bar keeps
       its height and the writing comes in further than the edges do. */
    padding: 11px calc(26px + var(--m5-squeeze, 0px) * 0.136);
  }
}

.site-header .m5-avatar {
  width: 34px;
  height: 34px;
}

/* The log-in button sets the height of the bar for anyone not signed in,
   so it gets the same trim as everything else once, and then stays put. */
.site-header .m5-pill {
  padding: 9px 17px;
  font-size: 14.5px;
}

/* Colour and lift are the one part that does not follow the scroll: a fade
   across the middle of the movement is easier to look at than a background
   creeping darker pixel by pixel. */
.site-header.is-compact {
  padding: 0;
  min-height: 0;
  background: rgba(2, 2, 2, 0.88);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
}

/* Below the phone breakpoint the bar already runs the full width of the
   screen, so there is nothing to draw in. */
@media (max-width: 760px) {
  .site-header {
    --m5-squeeze: 0px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    --m5-squeeze: 0px !important;
    transition: none;
  }
}

/* Searching across every embed of a server. Laid out the way an editor lays
   it out: the query and its three switches on one line, the replacement and
   its one button beneath, and the results grouped under the embed they were
   found in. */
.embed-search {
  margin: 0 0 18px;
  padding: 14px 16px 12px;
  border: 1px solid var(--m5-line-hi, rgba(255, 255, 255, 0.14));
  border-radius: 14px;
  background: var(--m5-card-2, rgba(255, 255, 255, 0.03));
}

.embed-search[hidden] {
  display: none !important;
}

.embed-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.embed-search-row + .embed-search-row {
  margin-top: 8px;
}

.embed-search-field {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0 6px 0 0;
  border: 1px solid var(--m5-line, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.28);
}

.embed-search-field:focus-within {
  border-color: var(--m5-accent, #8ef7ed);
}

.embed-search-field input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 14px;
}

.embed-search-field input:focus {
  outline: none;
}

.embed-search-toggles {
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
}

.embed-search-toggle {
  min-width: 27px;
  height: 25px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--m5-faint, #848484);
  font-size: 12.5px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.embed-search-toggle:hover {
  color: var(--m5-ink, #f3f3f3);
  background: rgba(255, 255, 255, 0.06);
}

.embed-search-toggle.is-on {
  border-color: var(--m5-accent, #8ef7ed);
  color: var(--m5-ink, #f3f3f3);
  background: rgba(142, 247, 237, 0.14);
}

.embed-search-count {
  flex: 0 0 auto;
  min-width: 148px;
  color: var(--m5-faint, #848484);
  font-size: 12.5px;
  text-align: right;
}

.embed-search-results {
  max-height: 320px;
  margin-top: 10px;
  overflow-y: auto;
}

.embed-search-results:empty {
  display: none;
}

.embed-search-group + .embed-search-group {
  margin-top: 6px;
}

.embed-search-group-head {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.embed-search-group-head:hover {
  background: rgba(255, 255, 255, 0.05);
}

.embed-search-group-head strong {
  font-size: 13.5px;
}

.embed-search-group-head span {
  flex: 0 0 auto;
  color: var(--m5-faint, #848484);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.embed-search-hit {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 8px 3px 20px;
  font-size: 12.5px;
  line-height: 1.5;
}

.embed-search-hit-field {
  flex: 0 0 auto;
  min-width: 132px;
  color: var(--m5-faint, #848484);
}

.embed-search-hit-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--m5-muted, #b2b2b2);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.embed-search-hit mark {
  padding: 0 1px;
  border-radius: 3px;
  background: rgba(142, 247, 237, 0.26);
  color: var(--m5-ink, #f3f3f3);
}

@media (max-width: 860px) {
  .embed-search-row {
    flex-wrap: wrap;
  }

  .embed-search-count {
    min-width: 0;
    text-align: left;
  }

  .embed-search-hit {
    flex-wrap: wrap;
    gap: 2px;
  }

  .embed-search-hit-field {
    min-width: 0;
  }
}

/* Clearing one server's worth of a bot's saved work. It cannot be undone, so
   it says what it holds, asks for the server's name in writing, and keeps the
   button out of reach until that name is there. */
.clear-data-block {
  margin-top: 1.25rem;
  border-color: rgba(232, 120, 120, 0.34);
  background: rgba(232, 120, 120, 0.04);
}

.clear-data-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  color: var(--m5-muted, #b2b2b2);
  font-size: 13px;
}

.clear-data-counts strong {
  color: var(--m5-ink, #f3f3f3);
  font-variant-numeric: tabular-nums;
}

.clear-data-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.clear-data-field {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
}

.clear-data-field code {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 12.5px;
}

.clear-data-field input {
  width: 100%;
  margin: 0;
}

.clear-data-block .danger-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.clear-data-status {
  margin: 10px 0 0;
  min-height: 1.2em;
  color: var(--m5-muted, #b2b2b2);
  font-size: 13px;
}

/* A sub-page whose whole content was one block used to draw that block as a
   card inside the page's own card, with the same heading on both. The heading
   is gone and so is the frame; what is left is the page. */
/* Every block inside the Bot card, whether it is the only one or one of
   several. They were drawn as cards inside the card, and with a border whose
   contrast against their own surface measured 1.17 -- not a line anyone can
   see, just a smudge. The header rule on the same page measures 18.7, so the
   sections are separated by that same hairline instead, and nothing on the
   page is a box within a box any more.

   The app layer paints these with body.m5-app .config-block, and that
   leading element gives it one point of specificity more than a rule built
   from classes alone -- both !important, so it won and nothing moved. Hence
   the same prefix here. */
body.m5-app .bot-subpanel .config-block,
.bot-subpanel .config-block {
  margin: 0;
  padding: 22px 0 0;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* The first block sits right under the header's own rule, and a sub-page
   whose whole content is one block needs no rule at all. */
body.m5-app .bot-subpanel .config-block:first-child,
body.m5-app .bot-subpanel .config-block.is-flush,
.bot-subpanel .config-block:first-child,
.bot-subpanel .config-block.is-flush {
  padding-top: 0;
  border-top: 0 !important;
}

/* The toggle rows carried the same invisible border. */
body.m5-app .bot-subpanel .dropdown-response-toggle-row,
.bot-subpanel .dropdown-response-toggle-row {
  border-color: rgba(255, 255, 255, 0.09) !important;
}

/* The caption of the confirmation field is a sentence. As three loose runs of
   text in a column each one became its own row, and the server name sat in a
   full-width strip with the words stacked above and below it. */
.clear-data-field > span {
  display: block;
}

/* The ticket panel's Options tab previews what a member receives when a
   ticket opens, one block per option. Each one is named, because otherwise a
   run of similar messages tells you nothing about which is which. */
.preview-option-caption {
  margin: 14px 0 4px;
  color: var(--m5-faint, #848484);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.discord-embeds .preview-option-caption:first-child {
  margin-top: 0;
}

.preview-option-content {
  margin: 0 0 4px;
}

.preview-option-buttons {
  margin-top: 6px;
}

.preview-option-empty {
  margin: 0;
  color: var(--m5-faint, #848484);
  font-size: 13px;
}

/* The bot's own picture and banner. The tile is the control: drop a file on
   it, click it to pick one, and the two tools sit on the image the way the
   developer portal does it. Sizes follow what Discord actually shows -- the
   picture square, the banner 17:6 -- and the banner is capped, because a full
   width one on a wide screen came out half a metre tall. */
.bot-image-grid {
  display: grid;
  /* One row of tiles, all the same height so their captions sit on one
     line. They used to be 104 and 120 tall, which put the two captions at
     different heights and read as a mistake. */
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  align-items: start;
  gap: 16px 26px;
  margin: 4px 0 18px;
  align-items: start;
}

.bot-image-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.bot-image-field > strong {
  font-size: 13.5px;
}

/* The caption sits at the bottom of its field, so three fields of different
   content still line their captions up. */
.bot-image-field > .form-help {
  margin: 0;
}

.bot-image-shot {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--m5-line-hi, rgba(255, 255, 255, 0.14));
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.bot-image-shot.is-avatar,
.bot-image-shot.is-icon {
  width: 120px;
  height: 120px;
}

.bot-image-shot.is-avatar {
  border-radius: 999px;
}

/* The application icon is a rounded square on Discord, not a circle. */
.bot-image-shot.is-icon {
  border-radius: 22px;
}

.bot-image-shot.is-banner {
  /* Discord's 17:6, at the same height as the two square tiles so every
     caption lines up. A percentage width here would be circular in a
     max-content column -- it once collapsed the tile to 59 pixels. */
  width: 340px;
  height: 120px;
  border-radius: 12px;
}

.bot-image-field.is-busy .bot-image-shot {
  opacity: 0.5;
  pointer-events: none;
}

.bot-image-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bot-image-shot img[hidden],
.bot-image-empty[hidden] {
  display: none;
}

.bot-image-empty {
  padding: 0 10px;
  color: var(--m5-faint, #848484);
  font-size: 11.5px;
  text-align: center;
}

/* The pair of tools, over the image and out of the way until wanted. */
.bot-image-tools {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 160ms ease;
}

.bot-image-tool {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(5, 5, 5, 0.82);
  color: var(--m5-ink, #f3f3f3);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.bot-image-tool svg {
  width: 15px;
  height: 15px;
}

.bot-image-tool:hover {
  background: rgba(30, 30, 30, 0.95);
}

.bot-image-tool.is-danger:hover {
  color: #e8908c;
}

.bot-image-note {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 1.2em;
}

@media (max-width: 820px) {
  .bot-image-grid {
    grid-template-columns: repeat(2, auto);
  }
}

@media (max-width: 560px) {
  .bot-image-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bot-image-shot.is-banner {
    width: 100%;
    height: auto;
    aspect-ratio: 17 / 6;
  }
}

/* Placing an image before it is sent. The picture shows through faintly all
   round so you can see what is being cut away, and the frame is the shape
   Discord will store. */
.image-editor {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.66);
}

.image-editor[hidden] {
  display: none !important;
}

.image-editor-sheet {
  width: min(520px, 100%);
  border: 1px solid var(--m5-line-hi, rgba(255, 255, 255, 0.14));
  border-radius: 18px;
  background: var(--m5-card, #0b0b0b);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.image-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.image-editor-close {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--m5-muted, #b2b2b2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.image-editor-close:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--m5-ink, #f3f3f3);
}

/* The chequerboard behind the picture, so a transparent corner reads as
   transparent rather than as part of the image. */
.image-editor-stage {
  display: grid;
  place-items: center;
  padding: 16px;
  background-color: #0d0d0d;
  background-image:
    linear-gradient(45deg, #1d1d1d 25%, transparent 25%),
    linear-gradient(-45deg, #1d1d1d 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1d1d1d 75%),
    linear-gradient(-45deg, transparent 75%, #1d1d1d 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  cursor: grab;
  touch-action: none;
}

.image-editor-stage:active {
  cursor: grabbing;
}

.image-editor-stage canvas {
  display: block;
  max-width: 100%;
}

.image-editor-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}

.image-editor-tool {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--m5-line-hi, rgba(255, 255, 255, 0.14));
  border-radius: 8px;
  background: transparent;
  color: var(--m5-muted, #b2b2b2);
  cursor: pointer;
}

.image-editor-tool:hover {
  color: var(--m5-ink, #f3f3f3);
  border-color: var(--m5-ink, #f3f3f3);
}

.image-editor-tool svg {
  width: 16px;
  height: 16px;
}

.image-editor-zoom {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--m5-accent, #8ef7ed);
}

.image-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 16px;
}

.image-editor-spacer {
  flex: 1 1 auto;
}

/* The Modules page. Two handlers instead of a grid of eighty-seven command
   checkboxes, of which three in the whole database were ever switched off --
   and all three were these. The card sits a shade above the panel it is in,
   the way the template cards and the permissions link already do. */
/* Two columns once there is room for them. One card across the whole panel
   put the switch 900 pixels away from the words it belongs to. The inner
   max() keeps it at two -- a third column would squeeze the sentences into
   a strip -- and below 852 pixels the cards stack. The rule editor is the one
   card that needs the whole width; the others pair up around it. */
body.m5-app .module-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(420px, calc((100% - 12px) / 2))), 1fr));
  grid-auto-flow: row dense;
  gap: 12px;
  margin-top: 6px;
}

body.m5-app .module-card.is-wide {
  grid-column: 1 / -1;
}

/* In half a panel the count's two fields sit under each other: side by side
   each help text became a column of seven short lines. */
body.m5-app .module-card:not(.is-wide) .module-stats .form-grid.two {
  grid-template-columns: minmax(0, 1fr);
}

body.m5-app .module-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 22px;
  border: 1px solid rgba(186, 186, 186, 0.14);
  border-radius: 20px;
  background: #0a0a0a;
  transition: border-color 180ms ease, background-color 180ms ease;
}

body.m5-app .module-card.is-on {
  border-color: rgba(186, 186, 186, 0.3);
  background: #0e0e0e;
}

body.m5-app .module-card-text {
  flex: 1 1 auto;
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

body.m5-app .module-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.m5-app .module-card-title strong {
  color: #f3f3f3;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

body.m5-app .module-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

/* Nothing needs setting up while the module is switched off. */
body.m5-app .module-card:not(.is-on) .module-needs {
  display: none;
}

body.m5-app .module-card p.module-needs {
  color: #ffc877;
}

body.m5-app .module-link {
  justify-self: start;
  margin-top: 4px;
  color: #cbcbcb;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(186, 186, 186, 0.28);
  padding-bottom: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}

body.m5-app .module-link:hover {
  color: #f3f3f3;
  border-bottom-color: #f3f3f3;
}

body.m5-app .module-card .toggle-control {
  flex: 0 0 auto;
  margin-top: 2px;
}

@media (max-width: 620px) {
  body.m5-app .module-card {
    flex-direction: column;
    gap: 14px;
  }
}


/* The two role modules are configured on their own card: they hand out roles
   and never send a message, so there is no embed to send you to. */
body.m5-app .module-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

body.m5-app .module-select {
  min-width: 190px;
  max-width: 260px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(186, 186, 186, 0.2);
  border-radius: 9px;
  color: #f3f3f3;
  background: #0f0f0f;
  font-size: 0.82rem;
}

body.m5-app .module-select:disabled {
  opacity: 0.45;
}

body.m5-app .module-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.m5-app .module-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 8px 4px 11px;
  border: 1px solid rgba(186, 186, 186, 0.22);
  border-radius: 999px;
  background: #151515;
  color: #e1e1e1;
  font-size: 0.78rem;
  font-weight: 600;
}

body.m5-app .module-chip button {
  border: 0;
  border-radius: 999px;
  padding: 0 3px;
  color: #a7a7a7;
  background: none;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

body.m5-app .module-chip button:hover {
  color: #f3f3f3;
}

body.m5-app .module-picker-note {
  color: var(--muted);
  font-size: 0.76rem;
}

/* Reaction Roles: one emoji, one role, per line. */
body.m5-app .reaction-role-stack {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

body.m5-app .reaction-role-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto;
  align-items: end;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(186, 186, 186, 0.14);
  border-radius: 14px;
  background: #0a0a0a;
}

body.m5-app .reaction-role-row label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #e1e1e1;
  font-size: 0.78rem;
  font-weight: 700;
}

body.m5-app .reaction-role-empty {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.83rem;
}

@media (max-width: 720px) {
  body.m5-app .reaction-role-row {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* A Discord attachment link carries its own death date. Nothing is copied to
   this server any more, so the field says out loud when the picture is going
   to disappear. */

/* An emoji that was deleted from the server. Discord shows its bare name, so
   the preview does too -- set apart just enough to notice, because the whole
   point is that it is not going to be a picture in Discord either. */
body.m5-app .discord-dead-emoji {
  padding: 0 3px;
  border-radius: 4px;
  background: rgba(255, 157, 177, 0.12);
  color: #ff9db1;
  font-size: 0.94em;
  cursor: help;
}

/* The broken emoji's own picture in front of its name, faded: it shows which
   emoji it was, without looking like one that will work. */
body.m5-app .discord-dead-emoji-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  cursor: help;
  /* Ringed in red, so a broken emoji is found at a glance in a long text. */
  border: 1.5px solid #f04747;
  border-radius: 7px;
  padding: 0 3px 0 2px;
  background: rgba(240, 71, 71, 0.12);
  box-shadow: 0 0 0 2px rgba(240, 71, 71, 0.18);
}

body.m5-app .discord-dead-emoji-wrap .discord-dead-emoji {
  padding: 0;
  background: none;
  color: #ff8f8f;
}

body.m5-app .discord-custom-emoji.is-dead {
  opacity: 0.7;
  filter: grayscale(0.35);
}


/* The bell, bottom left. Fixed to the window rather than the page, so it
   stays put however far down the settings run. */
body.m5-app .notification-dock {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

body.m5-app .notification-bell {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(186, 186, 186, 0.2);
  border-radius: 50%;
  color: #cbcbcb;
  background: #0b0b0b;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

body.m5-app .notification-bell svg {
  width: 21px;
  height: 21px;
}

body.m5-app .notification-bell:hover {
  transform: translateY(-2px);
  border-color: rgba(243, 243, 243, 0.4);
  color: #f3f3f3;
  background: #131313;
}

/* Something unread: the bell picks up the warm colour the rest of the
   dashboard uses for "look at this". */
body.m5-app .notification-bell.has-unread {
  color: #ffc877;
  border-color: rgba(255, 200, 119, 0.42);
}

body.m5-app .notification-count {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ff9db1;
  color: #0b0b0b;
  font-size: 0.68rem;
  font-weight: 800;
}

body.m5-app .notification-panel {
  width: min(340px, calc(100vw - 44px));
  max-height: min(420px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(186, 186, 186, 0.16);
  border-radius: 16px;
  background: #0a0a0a;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

body.m5-app .notification-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(186, 186, 186, 0.12);
  color: #f3f3f3;
  font-size: 0.9rem;
}

body.m5-app .notification-clear {
  border: 0;
  padding: 0;
  color: var(--muted);
  background: none;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
}

body.m5-app .notification-clear:hover {
  color: #f3f3f3;
}

body.m5-app .notification-list {
  overflow-y: auto;
}

body.m5-app .notification-row {
  display: flex;
  gap: 10px;
  padding: 12px 15px;
  border-bottom: 1px solid rgba(186, 186, 186, 0.08);
  cursor: default;
}

body.m5-app .notification-row.is-unread {
  background: rgba(255, 200, 119, 0.05);
  cursor: pointer;
}

/* The little dot that says what kind of note this is. */
body.m5-app .notification-kind {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: #7d8f9c;
}

body.m5-app .notification-kind.is-warning { background: #ffc877; }
body.m5-app .notification-kind.is-error   { background: #ff9db1; }
body.m5-app .notification-kind.is-success { background: #74d8c4; }

body.m5-app .notification-body {
  min-width: 0;
  display: grid;
  gap: 3px;
}

body.m5-app .notification-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

body.m5-app .notification-row-head strong {
  color: #f3f3f3;
  font-size: 0.84rem;
}

body.m5-app .notification-row-head time {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.7rem;
}

body.m5-app .notification-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.45;
}

body.m5-app .notification-body a {
  justify-self: start;
  margin-top: 2px;
  color: #cbcbcb;
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(186, 186, 186, 0.25);
}

body.m5-app .notification-empty {
  margin: 0;
  padding: 20px 16px 24px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
}

/* On a phone the sidebar already takes the left edge, so the bell moves in. */
@media (max-width: 760px) {
  body.m5-app .notification-dock {
    left: 14px;
    bottom: 14px;
  }
}


/* The row under each picture: an address, Apply, and a cross to clear it. */
body.m5-app .bot-image-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

body.m5-app .bot-image-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  border: 1px solid rgba(186, 186, 186, 0.2);
  border-radius: 9px;
  color: #f3f3f3;
  background: #0f0f0f;
  font-size: 0.78rem;
}

body.m5-app .bot-image-row .compact-button {
  flex: 0 0 auto;
}

/* The remove button. A cross reads as "close", and this one deletes the
   picture -- so it is a bin. It also came out the same colour as Apply
   beside it: the m5 layer paints every .ghost-button with !important, so
   the tint set here never reached the screen. Hence the !important, which
   is the only way to answer one. */
body.m5-app .bot-image-row .is-danger {
  display: inline-grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  padding: 0;
  color: #ff8189 !important;
  border-color: rgba(255, 129, 137, 0.42) !important;
}

body.m5-app .bot-image-row .is-danger:hover {
  color: #ffc4c8 !important;
  border-color: rgba(255, 129, 137, 0.85) !important;
  background: rgba(153, 35, 47, 0.34) !important;
}

body.m5-app .bot-image-field.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

/* --- The General page -------------------------------------------------
   Prefix, embed colour, the Bloxlink key and the two session switches were
   a sub-page each, one field deep. Together they are a single grid. */
.general-grid {
  align-items: start;
}

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

/* The swatch beside a field rather than above one, so it stands at the
   height of the input instead of towering over it. */
.bot-color-swatch.is-inline {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.general-field {
  display: grid;
  align-content: start;
  gap: 6px;
}

/* In a column half the page wide the key field must give, or its two
   buttons are pushed out of the card. */
.general-grid .bloxlink-key-field {
  flex: 1 1 200px;
}

.general-emoji-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  color: var(--muted);
  font-size: 0.88rem;
}

.general-emoji-preview img {
  width: 22px;
  height: 22px;
}

/* Side by side, like the module cards: one row across the panel left the
   switch at the far edge with half a screen of nothing before it. */
.general-toggles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(420px, calc((100% - 12px) / 2))), 1fr));
  gap: 12px;
  margin-top: 22px;
}

/* Diese Zeilen erben ihr Grundgeruest von .dropdown-response-toggle-row, die
   fuer die kurzen Antwortzeilen im Embed Editor gebaut ist: Titel 0.78rem,
   Text 0.69rem. Fuer zwei Saetze Erklaerung ueber die volle Breite war das
   Winzschrift in einer Zeile von 150 Zeichen. Hier bekommen sie dieselbe
   Schrift wie die Felder darueber -- Titel wie ein Label, Text wie
   form-help -- und eine Zeilenlaenge, die sich lesen laesst. */
.general-toggles .dropdown-response-toggle-row {
  align-items: flex-start;
  gap: 24px;
  padding: 18px 20px;
  border-radius: 16px;
}

.general-toggles .dropdown-response-toggle-row > div {
  flex: 1 1 auto;
  gap: 6px;
}

.general-toggles .dropdown-response-toggle-row strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.98rem;
  font-weight: 700;
}

.general-toggles .dropdown-response-toggle-row small {
  font-size: 0.86rem;
  line-height: 1.55;
}

.general-toggles .dropdown-response-toggle-row .toggle-control {
  flex: none;
  margin-top: 2px;
}

/* Der Zusatz in Klammern wird eine kleine Pille neben dem Titel -- wie die
   Abzeichen auf der Admin- und der Audit-Log-Seite. */
.general-toggles .toggle-tag {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 9px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.general-toggles code {
  /* Wie die Platzhalter-Chips im Template-Kasten: umrandet, in Textfarbe,
     damit die Befehle im grauen Satz hervortreten. */
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  background: rgba(15, 15, 15, 0.8);
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.84em;
  white-space: nowrap;
}

/* --- What the preview now draws instead of spelling out ----------------
   Links, code, spoilers and Discord's small -# line. The colours are
   Discord's own: inside that message frame anything else would read as a
   different product. */
.discord-link {
  color: #00a8fc;
  text-decoration: none;
}

.discord-link:hover {
  text-decoration: underline;
}

.discord-inline-code {
  border-radius: 4px;
  padding: 0.1em 0.32em;
  background: #1e1f22;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.85em;
}

.discord-code-block {
  display: block;
  margin: 4px 0;
  border: 1px solid #2b2d31;
  border-radius: 4px;
  padding: 8px 10px;
  background: #1e1f22;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.85em;
  white-space: pre-wrap;
}

/* Hidden until you look at it, the way Discord hides one. */
.discord-spoiler {
  border-radius: 3px;
  padding: 0 2px;
  background: #1e1f22;
  color: transparent;
  cursor: pointer;
}

.discord-spoiler:hover {
  color: inherit;
  background: #2b2d31;
}

.discord-subtext {
  display: inline-block;
  color: #949ba4;
  font-size: 0.8rem;
  line-height: 1.3;
}

/* The saved Bloxlink key: half of it shown, the rest as dots until Show is
   pressed. Monospace so the dots line up and two keys can be told apart. */
.bloxlink-key-input {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  letter-spacing: 0.02em;
}

.settings-form button.bloxlink-show-key-button {
  min-height: 42px;
  padding: 0 18px;
  border-color: rgba(178, 178, 178, 0.36);
  color: #f3f3f3;
  background: transparent;
  white-space: nowrap;
}

.settings-form button.bloxlink-show-key-button:hover {
  border-color: #e8e8e8;
  background: rgba(243, 243, 243, 0.08);
}

/* --- Adding a bot to a server, and the list of servers it may serve ---
   Both live in the administrator-only block, so they sit inside the same
   card frame as Leave server. */
.server-invite-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.server-invite-row .form-help {
  flex: 1 1 220px;
  margin: 0;
}

.settings-form a.server-invite-button,
a.server-invite-button {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(243, 243, 243, 0.4);
  border-radius: 999px;
  padding: 0 18px;
  color: #f3f3f3;
  background: rgba(243, 243, 243, 0.06);
  text-decoration: none;
  font-size: 0.92rem;
  white-space: nowrap;
  transition: border-color 200ms ease, background 200ms ease, transform 200ms ease;
}

a.server-invite-button:hover {
  border-color: #f3f3f3;
  background: rgba(243, 243, 243, 0.12);
  transform: translateY(-1px);
}

.whitelist-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.whitelist-field {
  flex: 1 1 auto;
  min-width: 0;
}

.whitelist-rows {
  display: grid;
  gap: 8px;
}

.whitelist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 8px 8px 14px;
  background: rgba(15, 15, 15, 0.7);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.86rem;
}

.whitelist-count {
  margin: 0;
  text-align: right;
  color: var(--muted);
  font-size: 0.84rem;
}

/* Only for screen readers: the field is explained by the card above it. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- The three picture tiles, when the window is not wide -------------
   Three grid tracks could not shrink below their own content, so on a
   narrower card each row was wider than its column and simply ran on into
   the next tile: a second bin appeared beside the App icon that belonged to
   the Profile picture. Measured at a 948px card, the banner row stood 58px
   past its own column and past the edge of the card.

   A wrapping row instead of three fixed tracks. The tiles keep their own
   widths -- the banner is 17:6 and says so in pixels, which a percentage
   could not express here without going in a circle -- and the one that no
   longer fits moves to the next line. Measured: at a 1368px card all three
   stand side by side, at 766px the banner wraps, and nothing overflows at
   either. */
.bot-image-grid {
  display: flex;
  flex-wrap: wrap;
}

/* The status line under them keeps a line of its own. */
.bot-image-note {
  flex: 1 0 100%;
}

/* Rather than pushing sideways into the neighbour, the buttons drop to a
   line of their own. */
body.m5-app .bot-image-row {
  flex-wrap: wrap;
}

/* --- The reaction gates on the Modules page ---------------------------
   One row per message, each an ordinary input under the same name, so the
   form carries them without any bookkeeping of its own. */
.module-gates {
  display: grid;
  gap: 8px;
}

.module-gate-rows {
  display: grid;
  gap: 8px;
}

.module-gate-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.module-gate-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.module-gate-empty {
  margin: 0;
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  color: var(--muted);
  font-size: 0.86rem;
}

.module-gate-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.84rem;
}

/* --- Autoresponder rules and the join ping channels -------------------
   A rule folds away to its header, so a long list stays readable. The
   header carries the name, because folded away that is all there is. */
.module-rules,
.module-joinping,
.module-stats {
  display: grid;
  gap: 10px;
}

.module-rule-rows {
  display: grid;
  gap: 10px;
}

.module-rule {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(15, 15, 15, 0.6);
  overflow: hidden;
}

.module-rule.is-off {
  opacity: 0.62;
}

.rule-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.rule-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 0.9rem;
}

.rule-body {
  display: grid;
  gap: 12px;
  padding: 14px 12px;
}

.rule-body[hidden] {
  display: none;
}

.module-rule .rule-head + .rule-body[hidden] + * {
  border-top: 0;
}


/* --- Admins: who the owner has handed a bot to ----------------------- */

.people-board {
  display: grid;
  gap: 26px;
}

.people-group {
  display: grid;
  gap: 10px;
  /* The left rule is what tells the two groups apart at a glance: the owner
     is one person and the administrators are a list, and both are rows. */
  border-left: 2px solid var(--line);
  padding-left: 16px;
}

.people-group h3 {
  margin: 0;
  font-size: 1rem;
}

.people-group .form-help {
  margin: 0;
}

.people-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.people-list {
  display: grid;
  gap: 8px;
}

.person-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 10px 10px 12px;
  background: rgba(15, 15, 15, 0.7);
}

.person-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--panel-strong);
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
}

.person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
  flex: 1;
}

.person-name strong {
  font-size: 0.98rem;
}

.person-name small {
  /* The id is what was typed to get here, so it stays readable as digits
     rather than melting into the name. */
  flex-basis: 100%;
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.8rem;
}

.person-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 9px;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.person-badge.is-owner {
  border-color: rgba(232, 190, 106, 0.5);
  background: rgba(232, 190, 106, 0.12);
  color: #e8be6a;
}

.people-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.person-adder {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background: rgba(9, 9, 9, 0.6);
}

.person-adder-foot {
  display: flex;
  gap: 8px;
}

.person-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(15, 15, 15, 0.7);
  min-height: 44px;
  color: var(--muted);
  font-size: 0.88rem;
}

.person-preview.is-found {
  border-color: rgba(91, 214, 166, 0.45);
  color: var(--text);
}

.person-preview.is-bad {
  border-color: rgba(240, 116, 116, 0.45);
  color: #f07474;
}

.ghost-button.is-primary:not(:disabled) {
  border-color: rgba(91, 214, 166, 0.5);
  background: rgba(91, 214, 166, 0.14);
  color: var(--green);
}


/* --- Quota: what a rank has to do in a week -------------------------- */

.quota-board {
  display: grid;
  gap: 20px;
}

.quota-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.quota-head h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.quota-head .form-help {
  margin: 0;
}

.quota-rules {
  display: grid;
  gap: 10px;
}

.quota-rule {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  background: rgba(15, 15, 15, 0.7);
}

.quota-role {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.quota-role label {
  flex: 1;
  min-width: 0;
}

.quota-kinds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.quota-kind {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(9, 9, 9, 0.6);
}

.quota-kind > div {
  display: grid;
  flex: 1;
  min-width: 0;
}

.quota-kind strong {
  font-size: 0.92rem;
}

.quota-kind small {
  color: var(--muted);
  font-size: 0.76rem;
}

.quota-kind input[type="number"] {
  width: 68px;
  flex: none;
  text-align: center;
}

/* Switched off, the number decides nothing -- so it stops looking like it
   does. */
.quota-kind.is-off strong,
.quota-kind.is-off small {
  color: var(--muted);
}

.quota-kind.is-off input[type="number"] {
  opacity: 0.4;
  /* Nicht disabled: ein disabled-Feld schickt der Browser gar nicht mit, und
     dann rutschen die Zeilen gegeneinander. Es bleibt also im Formular und
     wird nur unantastbar. */
  pointer-events: none;
}


/* --- Commands: one switch per command -------------------------------- */

.command-switch-layout {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.command-switch-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.command-switch-names {
  display: grid;
  gap: 4px;
  max-height: 560px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 6px;
  background: rgba(9, 9, 9, 0.6);
}

.command-switch-name {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 9px 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Der Name darf die Zeile nicht umbrechen -- sonst steht die Zahl der
   Unterbefehle auf einer zweiten Zeile und die Liste wird doppelt so hoch. */
.command-switch-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.command-switch-count {
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 7px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.command-switch-name:hover {
  background: rgba(255, 255, 255, 0.04);
}

.command-switch-name.is-active {
  border-color: var(--line);
  background: var(--panel-strong);
}


.command-switch-name .command-switch-label {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.88rem;
}

.command-switch-name.is-off .command-switch-label {
  color: var(--muted);
  text-decoration: line-through;
}

.command-switch-name.is-off .command-switch-count {
  opacity: 0.5;
}

.command-switch-detail {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  background: rgba(9, 9, 9, 0.6);
  min-width: 0;
}

.command-switch-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.command-switch-head h3 {
  margin: 0 0 4px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 1.05rem;
}

.command-switch-head .form-help {
  margin: 0;
}

.command-switch-master {
  flex: none;
  gap: 10px;
}


.command-switch-sub-title {
  margin: 16px 0 10px;
  color: var(--muted);
  font-size: 0.86rem;
}

.command-switch-subs {
  display: grid;
  gap: 8px;
}

.command-switch-subs.is-off {
  opacity: 0.45;
  pointer-events: none;
}

.command-switch-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(15, 15, 15, 0.7);
}

.command-switch-sub strong {
  display: block;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
}

.command-switch-sub strong span {
  color: var(--text);
  font-weight: 600;
}

.command-switch-sub small {
  color: var(--muted);
  font-size: 0.78rem;
}

@media (max-width: 900px) {
  .command-switch-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .command-switch-names {
    max-height: 300px;
  }
}


/* --- The five ranks on the Command Permissions page ------------------- */

.rank-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-top: 16px;
}

.rank-card {
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.015);
}

.rank-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
}

.rank-card-title {
  min-width: 0;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

/* Under the row, not beside it: three words of a rank's name and a button
   next to a sentence left both of them two words wide. */
.rank-card-note {
  display: block;
  margin-top: -3px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.rank-card-warning {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 0;
  color: #ffd4d4;
  font-size: 0.78rem;
  line-height: 1.4;
}

.rank-card-warning svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: #e35d6a;
}

.rank-commands-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.rank-commands-button .rank-commands-gear {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  opacity: 0.75;
}

.rank-commands-count {
  min-width: 20px;
  border-radius: 999px;
  padding: 1px 6px;
  background: rgba(243, 243, 243, 0.12);
  font-size: 0.74rem;
  font-weight: 800;
  text-align: center;
}

.rank-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rank-chips:empty {
  display: none;
}

.rank-chip {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(243, 243, 243, 0.3);
  border-radius: 999px;
  padding: 4px 6px 4px 9px;
  background: rgba(243, 243, 243, 0.08);
  font-size: 0.79rem;
  font-weight: 700;
  line-height: 1.2;
}

.rank-chip.is-stale {
  border-color: rgba(248, 113, 113, 0.5);
  color: #ffd9d9;
}

/* Discord shows autocomplete suggestions in the order the bot hands them
   over, so a suggestion chip can be dragged into place. */
.rank-chip.is-orderable {
  cursor: grab;
}

.rank-chip.is-orderable.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}

.rank-chip-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #848484;
}

.rank-chip-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

.rank-chip-remove {
  width: 18px;
  height: 18px;
  padding: 0;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.rank-chip-remove:hover,
.rank-chip-remove:focus-visible {
  background: rgba(239, 68, 68, 0.2);
  color: #ffe4e4;
}

.settings-form .rank-chip-remove {
  background: transparent;
}

.settings-form .rank-chip-remove:hover,
.settings-form .rank-chip-remove:focus-visible {
  background: rgba(239, 68, 68, 0.2);
}

.rank-empty {
  margin: 0;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 9px;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

/* A typed-suggestion card (no known list to pick from, so a text field and
   an Add button stand in for the role/channel dropdown the other cards use). */
.rank-add-row {
  display: flex;
  gap: 8px;
}

.rank-text-add {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
}

/* Ownership is the one card that is not a rank with a list of commands but
   a way past all of them, so it does not look like the other five. */
.rank-card.is-plain {
  border-color: rgba(243, 243, 243, 0.22);
  background: rgba(255, 255, 255, 0.04);
}

/* --- Picking the commands of one rank -------------------------------- */

.rank-dialog {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.66);
}

.rank-dialog[hidden] {
  display: none !important;
}

html.has-open-dialog {
  overflow: hidden;
}

.rank-dialog-sheet {
  width: min(560px, 100%);
  max-height: min(78vh, 720px);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: #0b0b0b;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.rank-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  padding: 13px 15px;
}

.rank-dialog-head strong {
  display: block;
  font-size: 0.95rem;
}

.rank-dialog-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.rank-dialog-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 11px 15px;
}

.rank-dialog-tools .search-field {
  flex: 1;
  min-width: 0;
}

.rank-only-allowed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.79rem;
  white-space: nowrap;
  cursor: pointer;
}

.rank-only-allowed input {
  width: 14px;
  height: 14px;
  min-height: 0;
  margin: 0;
}

.rank-command-list {
  display: grid;
  gap: 3px;
  overflow-y: auto;
  padding: 10px 12px;
}

.rank-command {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 7px 9px;
  cursor: pointer;
}

.rank-command:hover {
  background: rgba(255, 255, 255, 0.045);
}

.rank-command.is-on {
  border-color: rgba(142, 247, 237, 0.4);
  background: rgba(142, 247, 237, 0.09);
}

.rank-command input {
  position: absolute;
  width: 1px !important;
  height: 1px;
  min-height: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.rank-check {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #454545;
  border-radius: 5px;
  background: #000000;
}

.rank-check::after {
  content: "";
  width: 8px;
  height: 4px;
  border-left: 2px solid #000000;
  border-bottom: 2px solid #000000;
  opacity: 0;
  transform: rotate(-45deg) translateY(-1px);
}

.rank-command.is-on .rank-check {
  border-color: #8ef7ed;
  background: #8ef7ed;
}

.rank-command.is-on .rank-check::after {
  opacity: 1;
}

.rank-command-text {
  min-width: 0;
  flex: 1;
}

.rank-command-text strong {
  display: block;
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.rank-command-text small {
  display: block;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.3;
}

.rank-default-mark {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 7px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.rank-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  padding: 11px 15px;
}

.rank-dialog-foot small {
  color: var(--muted);
  font-size: 0.76rem;
}

@media (max-width: 620px) {
  .rank-dialog-tools {
    flex-wrap: wrap;
  }

  /* On a phone the search field, squeezed between the tick box and the
     button, showed five letters. It gets the row to itself. */
  .rank-dialog-tools .search-field {
    flex-basis: 100%;
  }

  .rank-dialog-sheet {
    max-height: 86vh;
  }
}


/* --- The template-ID picker in the editor ---------------------------- */

/* Die Knopfleiste traegt den Kasten, damit er unter dem Knopf aufgeht. */
.field-tools {
  position: relative;
}

.template-id-picker {
  /* Breiter als der Erwaehnungs-Kasten: hier stehen zwei Angaben je Zeile,
     und abgeschnittene Namen sind genau das, was man nachschlagen wollte. */
  width: min(460px, calc(100vw - 40px));
  max-height: 440px;
}

.template-id-picker.is-tool-anchored {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
}

.template-id-picker .server-mention-list {
  max-height: 340px;
}

.template-id-group {
  margin: 10px 2px 2px;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.template-id-group:first-child {
  margin-top: 0;
}

.template-id-picker .server-mention-option {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  text-align: left;
}

.template-id-picker .server-mention-option code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.82rem;
  color: var(--text);
}

.template-id-picker .server-mention-option span {
  color: var(--muted);
  font-size: 0.8rem;
  /* Umbrechen statt abschneiden: der Name ist der Grund, aus dem jemand
     hier nachsieht. */
  white-space: normal;
  line-height: 1.35;
}


/* Klicken kopiert, wie auf der Referenzseite. */
.template-id-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.template-id-entry {
  display: grid;
  gap: 4px;
  padding-bottom: 6px;
}

.template-id-head {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
  padding: 6px 8px 2px;
  /* Lesen und markieren, nicht klicken. */
  user-select: text;
}

.template-id-head code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.84rem;
  color: var(--text);
}

.template-id-head span {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.template-id-token {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px 7px;
  background: rgba(15, 15, 15, 0.8);
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.74rem;
  cursor: pointer;
}

.template-id-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 4px 2px 10px;
}

.template-id-token:hover {
  color: var(--text);
  border-color: rgba(243, 243, 243, 0.35);
}

.template-id-copy.is-copied,
.template-id-token.is-copied {
  border-color: rgba(91, 214, 166, 0.6);
  background: rgba(91, 214, 166, 0.14);
  color: var(--green);
}

.template-id-copy.is-copy-failed,
.template-id-token.is-copy-failed {
  border-color: rgba(240, 180, 110, 0.6);
}


/* Das Feld, in dem geschrieben wird, bleibt sichtbar aktiv, auch waehrend
   ein Auswahlkasten den Fokus hat -- sonst weiss man nach einem Klick auf
   den Emoji-Knopf nicht mehr, wohin das naechste Zeichen geht. */
.settings-form textarea.is-writing,
.settings-form input.is-writing {
  border-color: rgba(243, 243, 243, 0.75);
  background: #141414;
  box-shadow: 0 0 0 3px rgba(243, 243, 243, 0.11);
}


/* --- Audit Log ------------------------------------------------------- */

.audit-list {
  display: grid;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(9, 9, 9, 0.6);
}

.audit-row {
  border-top: 1px solid var(--line);
}

.audit-row:first-child {
  border-top: none;
}

.audit-row > summary {
  display: grid;
  grid-template-columns: 160px 34px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}

.audit-row > summary::-webkit-details-marker {
  display: none;
}

/* Nothing to unfold: the row stops pretending it can be opened. */
.audit-row[data-empty] > summary {
  cursor: default;
}

.audit-row > summary:hover {
  background: rgba(255, 255, 255, 0.03);
}

.audit-avatar {
  width: 34px;
  height: 34px;
  font-size: 0.8rem;
}

.audit-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  min-width: 0;
}

.audit-who strong {
  font-size: 0.94rem;
}

.audit-who code {
  color: var(--muted);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.78rem;
}

.audit-who small {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audit-time {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.audit-caret {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 180ms ease;
}

.audit-row[open] .audit-caret {
  transform: rotate(-135deg) translateY(-2px);
}

/* The badges keep one colour per kind of change, so a long list can be read
   by colour before a single word of it is. Muted fills, like the rest of
   the site -- not the bright chips of a generic admin panel. */
.audit-badge {
  justify-self: start;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}

.audit-badge.is-settings-updated,
.audit-badge.is-commands-updated,
.audit-badge.is-permissions-updated {
  border-color: rgba(232, 190, 106, 0.4);
  background: rgba(232, 190, 106, 0.1);
  color: #e8be6a;
}

.audit-badge.is-template-updated,
.audit-badge.is-color-applied {
  border-color: rgba(120, 160, 240, 0.4);
  background: rgba(120, 160, 240, 0.1);
  color: #8fb0f0;
}

.audit-badge.is-template-created,
.audit-badge.is-admin-added {
  border-color: rgba(91, 214, 166, 0.4);
  background: rgba(91, 214, 166, 0.1);
  color: var(--green);
}

.audit-badge.is-template-deleted,
.audit-badge.is-admin-removed,
.audit-badge.is-data-cleared {
  border-color: rgba(240, 116, 116, 0.4);
  background: rgba(240, 116, 116, 0.1);
  color: #f07474;
}

.audit-changes {
  display: grid;
  gap: 6px;
  padding: 4px 16px 14px 222px;
}

.audit-change {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 0.82rem;
}

.audit-field {
  min-width: 150px;
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.78rem;
}

.audit-before {
  color: #f07474;
  text-decoration: line-through;
  text-decoration-color: rgba(240, 116, 116, 0.5);
  word-break: break-word;
}

.audit-after {
  color: var(--green);
  word-break: break-word;
}

.audit-arrow,
.audit-hidden {
  color: var(--muted);
}

.audit-empty {
  padding: 18px;
  text-align: center;
}

@media (max-width: 760px) {
  .audit-row > summary {
    grid-template-columns: 34px minmax(0, 1fr) 18px;
  }

  .audit-badge {
    grid-column: 1 / -1;
  }

  .audit-time {
    grid-column: 2;
  }

  .audit-changes {
    padding-left: 16px;
  }
}


/* --- Infractions & Staff Strikes: the role ladders on the Modules page ---
   One large card under the module cards, in the same surface. The two
   ladders sit side by side once there is room, like the cards above. */
body.m5-app .ladder-board {
  display: grid;
  gap: 18px;
  margin-top: 12px;
  padding: 22px;
  border: 1px solid rgba(186, 186, 186, 0.14);
  border-radius: 20px;
  background: #0a0a0a;
}

.ladder-board-head h3 {
  margin: 0 0 6px;
  color: #f3f3f3;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}

.ladder-board-head .form-help {
  margin: 0;
  max-width: 90ch;
}

.ladder-board code {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  background: rgba(15, 15, 15, 0.8);
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.8em;
  white-space: nowrap;
}

.ladder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(380px, calc((100% - 14px) / 2))), 1fr));
  gap: 14px;
}

.ladder {
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid rgba(186, 186, 186, 0.14);
  border-radius: 16px;
  padding: 16px;
  background: #0e0e0e;
}

.ladder-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.ladder-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.ladder-title strong {
  color: #f3f3f3;
  font-size: 0.98rem;
}

.ladder-head small,
.ladder-restrict small {
  display: block;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.ladder-count {
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
}

.ladder-rows {
  display: grid;
  gap: 8px;
}

.ladder-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

/* The number is the order the roles are handed out in. */
.ladder-step {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
  border: 1px solid rgba(186, 186, 186, 0.24);
  border-radius: 999px;
  background: #151515;
  color: #e1e1e1;
  font-size: 0.8rem;
  font-weight: 700;
}

.ladder-field {
  display: grid;
  flex: 1;
  gap: 5px;
  min-width: 0;
}

.ladder-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e1e1e1;
  font-size: 0.8rem;
  font-weight: 700;
}

.ladder-row [data-ladder-remove] {
  flex: none;
  margin-bottom: 2px;
}

.ladder-add {
  justify-self: start;
}

.ladder-restrict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  border: 1px solid rgba(186, 186, 186, 0.14);
  border-radius: 16px;
  padding: 16px;
  background: #0e0e0e;
}

.ladder-restrict > div {
  flex: 1 1 320px;
  min-width: 0;
}

.ladder-restrict select {
  flex: 0 1 320px;
  min-width: 0;
}

/* The staff roles are a list rather than one choice, so its column holds the
   chips above the picker instead of a single select. */
.ladder-staff {
  align-items: start;
}

.ladder-staff-list {
  flex: 0 1 320px;
  min-width: 0;
  display: grid;
  gap: 8px;
}

.ladder-staff-list .rank-chips:empty {
  display: none;
}


/* --- The Embed Editor follows the room it has, not the window ----------
   The three columns used to switch on the width of the window. With the
   sidebar taking its share, a 1270px window left the editor 891px, where
   "three columns of at least 200 + 350 + 290" squeezed everything to its
   minimum and the fields ran out of the card. A small script measures the
   workbench itself and sets data-layout:
     wide    three columns: list, editor, preview
     medium  the list across the top, editor and preview side by side
     narrow  one column; the list keeps its two halves while there is room
   Without the script the old rules still apply. */
.embed-template-workbench[data-layout="wide"] {
  grid-template-columns: 250px minmax(0, 1fr) minmax(320px, 0.85fr);
}

.embed-template-workbench[data-layout="medium"] {
  grid-template-columns: minmax(0, 1.15fr) minmax(290px, 0.85fr);
}

.embed-template-workbench[data-layout="narrow"] {
  grid-template-columns: minmax(0, 1fr);
}

.embed-template-workbench:is([data-layout="medium"], [data-layout="narrow"]) .embed-template-list {
  grid-column: 1 / -1;
  position: static;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
}

.embed-template-workbench:is([data-layout="medium"], [data-layout="narrow"]) .embed-template-list > * {
  grid-column: 1;
}

/* Custom Edits beside the message list rather than above it -- as tall as
   the four things stacked on the left: heading, search, filter or DM note,
   and the cards. */
.embed-template-workbench:is([data-layout="medium"], [data-layout="narrow"]) .embed-template-list > .custom-edits-box {
  grid-column: 2;
  grid-row: 1 / span 4;
  order: 0;
}

/* Across the top the lists are shorter, so the editor is not a screen away. */
.embed-template-workbench:is([data-layout="medium"], [data-layout="narrow"]) .embed-template-list > .embed-template-cards {
  max-height: 250px;
}

.embed-template-workbench:is([data-layout="medium"], [data-layout="narrow"]) .custom-template-cards {
  max-height: 170px;
}

.embed-template-workbench[data-layout="narrow"] .embed-template-preview {
  position: static;
}

.embed-template-workbench[data-layout="narrow"][data-list="stacked"] .embed-template-list {
  grid-template-columns: minmax(0, 1fr);
}

.embed-template-workbench[data-layout="narrow"][data-list="stacked"] .embed-template-list > .custom-edits-box {
  grid-column: 1;
  grid-row: auto;
  order: -1;
}

/* Jumping here after a template is picked leaves the header clear. */
.embed-template-editor {
  scroll-margin-top: 96px;
}

/* The field rows never ask for more than the card has. The image row still
   had three columns of at least 180px after Thumbnail URL left it with two
   fields, and that alone made the Style tab 568px wide in a 344px card.
   The pane's own column grew with it, so it is pinned as well. */
.embed-template-editor .editor-pane {
  grid-template-columns: minmax(0, 1fr);
}

.embed-template-editor .embed-compact-row,
.embed-template-editor .image-layout-row {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

/* Mobile status: the heading as large as the switches on the General page. */
.dropdown-response-toggle-row.mobile-status-row strong {
  font-size: 0.98rem;
  font-weight: 700;
}

/* Server ID on the General page: the field and Move settings in one row, and
   the confirmation under them in the red of Clear all bot data. */
.server-move-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.server-move-row input {
  flex: 1 1 auto;
  min-width: 0;
}

.settings-form .server-move-row .compact-button {
  flex: none;
  align-self: stretch;
}

.server-move .form-help.is-error,
.server-move-status.is-error {
  color: #ffb4a8;
}

.server-move-confirm {
  display: grid;
  gap: 10px;
  margin-top: 4px;
  border: 1px solid rgba(240, 116, 116, 0.35);
  border-radius: 14px;
  padding: 14px;
  background: rgba(240, 116, 116, 0.06);
}

.server-move-confirm p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
}

.server-move-confirm .server-move-caveat {
  color: var(--muted);
}

.server-move-typed {
  display: grid;
  gap: 6px;
  font-size: 0.84rem;
}

.server-move-typed code {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}

.server-move-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.server-move-status:empty {
  display: none;
}

/* Export, Import and Save Settings side by side in the Bot page's heading. */
.settings-file-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
}

.settings-form .settings-file-button {
  gap: 7px;
  align-self: auto;
}

.settings-import-confirm {
  margin-bottom: 16px;
}


/* Every child of body sits on layer 1, so the footer -- the later sibling --
   was painted over the whole settings area, and an emoji picker hanging past
   the end of the page disappeared under it however high its own z-index.
   The settings area goes one layer up; the header stays above at 20. */
body > main.manage-shell {
  z-index: 2;
}

/* The embed search row: its fields carry an emoji button like the editor's.
   The wrapper takes the room the bare input had. */
.embed-search-field > .emoji-field {
  flex: 1 1 auto;
  min-width: 0;
}

.embed-search-field > .emoji-field > input {
  width: 100%;
}


/* --- Dropdowns: the page's own list instead of the browser's ---------------
   static/select-picker.js puts a trigger after every <select> on an app page
   and keeps the select itself, hidden, as the value the form sends. */
body.m5-app select.vs-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden;
  clip-path: inset(50%);
}

.vs-trigger {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 38px 0 13px;
  border: 1px solid rgb(50, 50, 50);
  border-radius: 12px;
  background: rgb(5, 5, 5);
  color: #f3f3f3;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.vs-trigger:hover {
  border-color: rgba(243, 243, 243, 0.34);
  background: #0a0a0a;
}

.vs-trigger:focus-visible,
.vs-trigger.is-open {
  outline: none;
  border-color: rgba(243, 243, 243, 0.62);
  box-shadow: 0 0 0 3px rgba(243, 243, 243, 0.08);
}

.vs-trigger.is-disabled {
  opacity: 0.45;
  cursor: default;
}

.vs-value {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.vs-value .vs-label,
.vs-option .vs-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.vs-value.is-empty {
  color: #a7a7a7;
  font-weight: 600;
}

.vs-chevron {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.7;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 180ms ease;
}

.vs-trigger.is-open .vs-chevron {
  transform: translateY(-25%) rotate(-135deg);
}

/* The panel. A popover, so it sits in the top layer above every card, the
   footer and the sticky header, whatever z-index those carry. */
.vs-panel {
  position: fixed;
  inset: auto;
  z-index: 3000;
  margin: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: 340px;
  padding: 6px;
  border: 1px solid rgba(243, 243, 243, 0.16);
  border-radius: 14px;
  background: #0e0e0e;
  color: #e1e1e1;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.35);
  font-family: inherit;
  overflow: hidden;
}

.vs-panel[popover]:not(:popover-open) {
  display: none;
}

.vs-search {
  flex: none;
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  margin: 0 0 6px;
  padding: 0 11px;
  border: 1px solid rgba(186, 186, 186, 0.2);
  border-radius: 10px;
  background: #050505;
  color: #f3f3f3;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  outline: none;
}

.vs-search:focus {
  border-color: rgba(243, 243, 243, 0.5);
}

.vs-search::placeholder {
  color: #878787;
}

.vs-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(243, 243, 243, 0.25) transparent;
}

.vs-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  box-sizing: border-box;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.vs-option.is-active {
  background: rgba(243, 243, 243, 0.07);
}

.vs-option.is-selected {
  background: rgba(243, 243, 243, 0.13);
  color: #fff;
}

.vs-option.is-selected::after {
  content: "";
  flex: none;
  width: 5px;
  height: 10px;
  margin: -3px 3px 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.vs-option.is-empty {
  color: #a7a7a7;
}

.vs-option.is-disabled {
  opacity: 0.45;
  cursor: default;
}

.vs-group {
  padding: 10px 10px 4px;
  color: #878787;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.vs-empty {
  margin: 0;
  padding: 16px 10px;
  color: #a7a7a7;
  font-size: 0.86rem;
  text-align: center;
}

/* A role's colour, the way Discord shows it beside a name. */
.vs-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--vs-dot, #99aab5);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
}

.vs-dot.is-plain {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(243, 243, 243, 0.35);
}

.vs-hash {
  flex: none;
  color: #878787;
  font-weight: 800;
}

/* Where a select had its own width, the trigger takes its place in it. */
.ladder-restrict .vs-trigger {
  flex: 0 1 320px;
}

/* Footer icon URL: "Use server's avatar" sits on the label's line, on the
   right, so the field lines up with Footer text beside it. */
.footer-style-row {
  align-items: end;
}

.footer-icon-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

/* The general button rules would make it 42px tall. */
.footer-icon-use {
  flex: none;
  min-height: 0;
  padding: 3px 10px;
  border: 1px solid rgba(243, 243, 243, 0.2);
  border-radius: 999px;
  background: transparent;
  color: #f3f3f3;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.footer-icon-use:hover,
.footer-icon-use:focus-visible {
  outline: none;
  border-color: rgba(243, 243, 243, 0.42);
  background: rgba(243, 243, 243, 0.08);
}

/* The drop line in the preview is placed by its measured centre; a margin
   would push it off the gap it stands for. */
.preview-drop-line {
  margin: 0;
}

/* --- Modules page: groups, and one layout for every card ---------------
   Title, one sentence and the switch on top; everything to set up below a
   thin line, each setting under the same small label. The group headings
   say what a card is for before its name has to. */
body.m5-app .module-groups {
  display: grid;
  gap: 30px;
  margin-top: 10px;
}

body.m5-app .module-group {
  display: grid;
  gap: 12px;
}

body.m5-app .module-group-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 0 4px;
}

body.m5-app .module-group-head h3 {
  margin: 0;
  color: #f3f3f3;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

body.m5-app .module-group-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

body.m5-app .module-group .module-list {
  margin-top: 0;
}

body.m5-app .module-card {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  overflow: visible;
}

body.m5-app .module-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px 16px;
}

body.m5-app .module-card-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

body.m5-app .module-card-switch {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

body.m5-app .module-card-switch .toggle-control {
  margin-top: 0;
}

body.m5-app .module-card-body {
  display: grid;
  flex: 1 1 auto;
  align-content: start;
  gap: 16px;
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(186, 186, 186, 0.1);
}

body.m5-app .module-field {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  margin: 0;
  color: inherit;
  font-weight: 400;
}

body.m5-app .module-field-label {
  color: #9b9b9b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body.m5-app .module-card .form-help {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.5;
}

body.m5-app .module-card .module-picker {
  margin-top: 0;
}

body.m5-app .module-card .module-field .module-select {
  max-width: 320px;
}

/* A module set up in the Embed Editor says so, with the way there beside it. */
body.m5-app .module-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
}

body.m5-app .module-link-row span {
  flex: 1 1 220px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

body.m5-app .module-card .module-link {
  flex: none;
  margin: 0;
  padding: 7px 14px;
  border: 1px solid rgba(186, 186, 186, 0.24);
  border-radius: 999px;
  color: #f3f3f3;
  background: rgba(243, 243, 243, 0.03);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

body.m5-app .module-card .module-link:hover {
  border-color: rgba(243, 243, 243, 0.5);
  background: rgba(243, 243, 243, 0.08);
}

/* The welcome message beside its channels once the card has the room. */
body.m5-app .module-card.is-wide .module-joinping {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: start;
  gap: 16px 28px;
}

body.m5-app .module-card .module-stats {
  gap: 16px;
}

body.m5-app .module-count {
  color: #cbcbcb;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 620px) {
  body.m5-app .module-card-head {
    padding: 16px 16px 14px;
  }

  body.m5-app .module-card-body {
    padding: 14px 16px 16px;
  }
}

/* --- The page cannot be marked as a whole ------------------------------
   Ctrl+A, or a drag across the page, highlighted every heading, label and
   button, and all of it could be copied. Only what is typed into stays
   selectable -- fields and text areas -- plus the template IDs, which are
   there to be marked and copied, and whose copy button falls back to
   marking them when the clipboard refuses. */
html {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
[contenteditable]:not([contenteditable="false"]),
.template-id-head,
.template-id-copy code,
.tref-id,
.tref-copy code {
  -webkit-user-select: text;
  user-select: text;
}

/* Mobile status keeps the bot online: the four statuses are shown, not
   offered. Online stays marked so it is clear which one is in effect. */
.presence-grid.is-locked {
  cursor: not-allowed;
}

.presence-grid.is-locked .presence-option {
  pointer-events: none;
  opacity: 0.4;
}

.presence-grid.is-locked .presence-option:has(input:checked) {
  opacity: 0.75;
}

.presence-lock-note {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.presence-lock-note[hidden] {
  display: none;
}

/* --- Server Supporter on the Modules page ------------------------------
   Word, channel and roles, each its own .module-field -- never given the
   grid gap its siblings (automod, joinping, gates) get, so the fields sat
   crowded together with none of their coordinated spacing. */
body.m5-app .module-supporter {
  display: grid;
  gap: 16px;
}

/* --- Bots in no server, on the administrator's dashboard ----------------
   Below the server cards, dashed: they are running but have nowhere to be
   configured yet. Each carries its whitelist and the invite link. */
.m5-idle { padding-bottom: 72px; }
.m5-idle-head { margin: 0 0 18px; }
.m5-idle-head h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.02em; }
.m5-idle-head p { margin: 0; max-width: 72ch; color: var(--m5-muted); font-size: 15px; }
.m5-idle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.m5-idle-card { display: grid; align-content: start; gap: 18px; padding: 22px; border-radius: 20px; background: var(--m5-card); border: 1px dashed var(--m5-line-hi); }
.m5-idle-top { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; }
.m5-idle-top .m5-server-body { min-width: 180px; }
.m5-idle-top .m5-server-body p { white-space: normal; }
.m5-idle-top .m5-pill { flex: none; }
.m5-idle-whitelist { display: grid; gap: 10px; padding-top: 16px; border-top: 1px solid var(--m5-line); }
.m5-idle-form { display: flex; flex-wrap: wrap; gap: 8px; }
.m5-idle-form input { flex: 1 1 200px; min-width: 0; height: 42px; box-sizing: border-box; padding: 0 14px; border-radius: 999px; border: 1px solid var(--m5-line-hi); background: #050505; color: var(--m5-ink); font: inherit; font-size: 14px; outline: none; }
.m5-idle-form input:focus { border-color: rgba(243, 243, 243, 0.6); }
.m5-idle-form .m5-pill { flex: none; cursor: pointer; font: inherit; font-size: 14px; }
.m5-idle-rows { display: flex; flex-wrap: wrap; gap: 6px; }
.m5-idle-rows:empty { display: none; }
.m5-idle-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 5px 4px 12px; border-radius: 999px; border: 1px solid var(--m5-line-hi); background: rgba(243, 243, 243, 0.05); font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12.5px; }
.m5-idle-chip button { border: 0; background: none; color: var(--m5-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 6px; }
.m5-idle-chip button:hover { color: var(--m5-ink); }
.m5-idle-status { margin: 0; color: var(--m5-muted); font-size: 13px; }
.m5-idle-status.is-warning { color: #ffc877; }

/* "+ Add owner" and "+ Add admin" stay on one line beside their heading. */
.people-head .compact-button {
  flex: none;
  white-space: nowrap;
}


/* --- Placing an image before it is sent ---------------------------------
   Back from before the pictures took an address: the picture shows through
   faintly all round so you can see what is cut away, and the frame is the
   shape Discord stores. Two tiles now -- the icon is the picture as well. */
.bot-image-grid {
  grid-template-columns: repeat(2, auto);
}

.image-editor {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.66);
}

.image-editor[hidden] {
  display: none !important;
}

.image-editor-sheet {
  width: min(520px, 100%);
  border: 1px solid var(--m5-line-hi, rgba(255, 255, 255, 0.14));
  border-radius: 18px;
  background: var(--m5-card, #0b0b0b);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.image-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

.image-editor-close {
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--m5-muted, #b2b2b2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.image-editor-close:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--m5-ink, #f3f3f3);
}

/* The chequerboard behind the picture, so a transparent corner reads as
   transparent rather than as part of the image. */
.image-editor-stage {
  display: grid;
  place-items: center;
  padding: 16px;
  background-color: #0d0d0d;
  background-image:
    linear-gradient(45deg, #1d1d1d 25%, transparent 25%),
    linear-gradient(-45deg, #1d1d1d 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1d1d1d 75%),
    linear-gradient(-45deg, transparent 75%, #1d1d1d 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  cursor: grab;
  touch-action: none;
}

.image-editor-stage:active {
  cursor: grabbing;
}

.image-editor-stage canvas {
  display: block;
  max-width: 100%;
}

.image-editor-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}

.image-editor-tool {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--m5-line-hi, rgba(255, 255, 255, 0.14));
  border-radius: 8px;
  background: transparent;
  color: var(--m5-muted, #b2b2b2);
  cursor: pointer;
}

.image-editor-tool:hover {
  color: var(--m5-ink, #f3f3f3);
  border-color: var(--m5-ink, #f3f3f3);
}

.image-editor-tool svg {
  width: 16px;
  height: 16px;
}

.image-editor-zoom {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: #f3f3f3;
}

.image-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 16px;
}

.image-editor-spacer {
  flex: 1 1 auto;
}

/* --- The image row in the Embed Editor -----------------------------------
   The warning under an expiring Discord link is a paragraph long. It made
   its column taller, the other fields in the row stretched to match, and the
   dropdown and the thumbnail box came out tall and pushed down. Each field
   keeps its own height now and sits at the top of the row. */
.embed-template-editor :is(.embed-compact-row, .image-layout-row) {
  align-items: start;
}

.embed-template-editor :is(.embed-compact-row, .image-layout-row) > label {
  align-content: start;
}


/* --- Command Permissions in the app's own clothes --------------------
   The rank cards, their role chips and the command picker were drawn
   before this layer existed, so they still wore the older palette -- a
   lighter card, a teal tick -- beside panels that had all moved over to
   the neutral one. Same shapes, same spacing; only the paint changes. */
body.m5-app .rank-card {
  background: #070707 !important;
  border: 1px solid var(--m5-line) !important;
  border-radius: 16px !important;
}

/* Ownership stays the one that is not a rank but a way past all of them,
   so it keeps standing out -- in this palette rather than the old one. */
body.m5-app .rank-card.is-plain {
  background: var(--m5-card-2) !important;
  border-color: var(--m5-line-hi) !important;
}

body.m5-app .rank-card-title {
  color: var(--m5-ink);
}

body.m5-app .rank-card-note {
  color: var(--m5-muted);
}

body.m5-app .rank-commands-count {
  background: var(--m5-card-2);
  color: var(--m5-ink);
  font-weight: 700;
}

/* The same chip the module pickers use, so a role reads the same wherever
   it is shown. */
body.m5-app .rank-chip {
  border: 1px solid rgba(186, 186, 186, 0.22);
  background: #151515;
  color: #e1e1e1;
  font-size: 0.78rem;
  font-weight: 600;
}

body.m5-app .rank-chip.is-stale {
  border-color: rgba(232, 120, 120, 0.45);
  color: #e8908c;
}

body.m5-app .rank-chip-remove {
  color: var(--m5-muted);
}

body.m5-app .rank-chip-remove:hover,
body.m5-app .rank-chip-remove:focus-visible {
  background: transparent;
  color: var(--m5-ink);
}

body.m5-app .rank-empty {
  border: 1px dashed var(--m5-line-hi);
  border-radius: 12px;
  color: var(--m5-faint);
}

body.m5-app .rank-dialog-sheet {
  background: var(--m5-card) !important;
  border: 1px solid var(--m5-line-hi) !important;
  border-radius: 22px !important;
}

body.m5-app .rank-dialog-head,
body.m5-app .rank-dialog-tools {
  border-bottom-color: var(--m5-line) !important;
}

body.m5-app .rank-dialog-foot {
  border-top-color: var(--m5-line) !important;
}

body.m5-app .rank-dialog-head small,
body.m5-app .rank-dialog-foot small,
body.m5-app .rank-command-text small,
body.m5-app .rank-only-allowed {
  color: var(--m5-muted);
}

body.m5-app .rank-command {
  border-radius: 12px;
}

body.m5-app .rank-command:hover {
  background: rgba(243, 243, 243, 0.06);
}

/* Allowed is shown the way a picked option is shown everywhere else in the
   app: the ink line and the second surface, not a colour of its own. */
body.m5-app .rank-command.is-on {
  border-color: var(--m5-line-hi);
  background: var(--m5-card-2);
}

body.m5-app .rank-check {
  border-color: var(--m5-line-hi);
  background: #050505;
}

body.m5-app .rank-command.is-on .rank-check {
  border-color: var(--m5-ink);
  background: var(--m5-ink);
}

body.m5-app .rank-command.is-on .rank-check::after {
  border-left-color: #030303;
  border-bottom-color: #030303;
}

body.m5-app .rank-default-mark {
  border-color: var(--m5-line-hi);
  color: var(--m5-faint);
}

/* Embed Editor / DM Templates panel title */
#panel-embed-editor > .builder-card-head h2 {
  font-size: 1.75rem;
  line-height: 1.2;
}

/* --- Collapsible list of the Embed Editor ------------------------------
   The button sits top right in the list. Collapsed, the list shrinks to a
   narrow strip with only the button, and the editor and preview take the
   room. data-list-collapsed is set by the script in manage.html. */
.embed-list-toggle-row {
  order: -10;
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 -4px;
}

.embed-list-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #0d0d0d;
  cursor: pointer;
}

.embed-list-toggle:hover {
  color: #f4f4f4;
  border-color: rgba(184, 184, 184, 0.72);
}

.embed-list-toggle svg {
  transition: transform 0.2s ease;
}

.embed-template-workbench[data-list-collapsed] .embed-list-toggle svg {
  transform: rotate(180deg);
}

.embed-template-workbench:is([data-layout="medium"], [data-layout="narrow"]) .embed-template-list > .embed-list-toggle-row {
  grid-column: 1 / -1;
  grid-row: 1;
}

.embed-template-workbench:is([data-layout="medium"], [data-layout="narrow"]) .embed-template-list > .custom-edits-box {
  grid-row: 2 / span 4;
}

.embed-template-workbench[data-list-collapsed] .embed-template-list > :not(.embed-list-toggle-row) {
  display: none;
}

.embed-template-workbench[data-list-collapsed] .embed-template-list {
  padding: 8px;
}

.embed-template-workbench[data-list-collapsed] .embed-list-toggle-row {
  margin: 0;
  justify-content: center;
}

.embed-template-workbench[data-layout="wide"] {
  transition: grid-template-columns 0.2s ease;
}

.embed-template-workbench[data-layout="wide"][data-list-collapsed] {
  grid-template-columns: 46px minmax(0, 1fr) minmax(320px, 0.85fr);
}
/* The headline is a text area that starts one line high and can be pulled
   taller. Its emoji button stays inside the box, top right. */
.headline-builder textarea[data-single-line] {
  min-height: calc(3 * 1.4em + 22px);
  height: calc(3 * 1.4em + 22px);
  overflow-y: hidden;
  padding: 10px 13px;
  line-height: 1.4;
  resize: vertical;
}

.emoji-field.has-inline-tool > textarea {
  padding-right: 44px;
}

.emoji-field.has-inline-tool > textarea ~ .field-tools {
  top: 7px;
  transform: none;
}

/* Server Basics > Sessions: two either-or choices, each a pair of pills. */
.session-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.session-choice {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #040404;
}

.session-choice legend {
  padding: 0 6px;
  margin-left: -6px;
  color: #f3f3f3;
  font-weight: 800;
}

.session-choice small {
  color: var(--muted);
  line-height: 1.5;
}

.session-choice small code {
  border-radius: 4px;
  padding: 1px 5px;
  background: #111111;
  font-size: 0.85em;
}

.session-choice-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #0c0c0c;
}

.settings-form .session-choice-options label {
  position: relative;
  display: block;
  margin: 0;
  cursor: pointer;
}

.settings-form .session-choice-options input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.session-choice-options span {
  display: block;
  border-radius: 999px;
  padding: 10px 12px;
  color: var(--muted);
  text-align: center;
  font-weight: 800;
  transition: background-color 160ms ease, color 160ms ease;
}

.session-choice-options label:hover span {
  color: #f3f3f3;
}

.session-choice-options input:checked + span {
  color: #0a0a0a;
  background: #f3f3f3;
}

.session-choice-options input:focus-visible + span {
  outline: 2px solid rgba(243, 243, 243, 0.6);
  outline-offset: 2px;
}

/* Bubbles that tell somebody they were given access. Bottom left, above the
   bell where there is one; each has its own X and is deleted when closed. */
.access-notices {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 55;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 44px));
  pointer-events: none;
}

body.m5-app .access-notices {
  bottom: 84px;
}

.access-notice {
  position: relative;
  padding: 14px 44px 14px 16px;
  border: 1px solid rgba(186, 186, 186, 0.22);
  border-radius: 14px;
  color: #eeeeee;
  background: #0b0b0b;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  animation: access-notice-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.access-notice p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.access-notice-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #afafaf;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.access-notice-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

@keyframes access-notice-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .access-notice { animation: none; }
}

/* Embed Sender wears the Embed Editor's frame: one panel, the title large and
   the actions on the right, a rule under them, the work below. */
.embed-sender-panel {
  position: relative;
  overflow: visible;
  padding: 16px;
}

.embed-sender-panel > .builder-card-head h2 {
  font-size: 1.75rem;
  line-height: 1.2;
}

.embed-sender-panel > .embed-builder {
  margin-top: 16px;
}

/* The editor column is a grid of cards; without a column that may shrink, a
   card's own minimum width pushed it out under the preview. */
.embed-sender-panel .embed-editor {
  grid-template-columns: minmax(0, 1fr);
}

/* The session reaction emoji now sits in Server Basics > Sessions, between the
   two either-or choices and the pickers. */
.session-emoji-row {
  margin-bottom: 14px;
}

/* Embed Sender: dropdown actions and link buttons are added one at a time. */
.builder-rows {
  display: grid;
  gap: 12px;
}

.builder-rows:empty {
  display: none;
}

.option-row-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.builder-button-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

.builder-button-link input {
  flex: 1 1 auto;
  min-width: 0;
}

.builder-rows + .ghost-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* A dropdown action in the narrower sender column: Title and Value side by
   side, everything after them on full rows. */
.embed-sender-panel .option-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.embed-sender-panel .option-row > .option-row-head,
.embed-sender-panel .option-row > label:nth-child(n + 4),
.embed-sender-panel .option-row > .option-response-format,
.embed-sender-panel .option-row > .dropdown-response-embed-fields {
  grid-column: 1 / -1;
}

.embed-sender-panel .builder-rows + .ghost-button {
  justify-self: start;
}

/* --- Title of the Embed Sender and Embed Editor panels ------------------
   A small label, the name, one line saying what the page is for -- and a
   quiet rule under it instead of the heavy one the other cards use. */
#panel-embed-editor > .builder-card-head,
.embed-sender-panel > .builder-card-head {
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(243, 243, 243, 0.07);
}

.panel-title {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.panel-eyebrow {
  color: var(--m5-faint, #848484);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#panel-embed-editor > .builder-card-head .panel-title h2,
.embed-sender-panel > .builder-card-head .panel-title h2 {
  margin: 0;
  color: var(--m5-ink, #f3f3f3);
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 640;
  line-height: 1.1;
  letter-spacing: -0.025em;
  -webkit-font-smoothing: antialiased;
}

.panel-title p {
  margin: 0;
  max-width: 62ch;
  color: var(--m5-muted, #a2a2a2);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
}

.panel-title p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The two panes of a ticket option's opening message (Content and Style). */
.ticket-open-pane {
  display: grid;
  gap: 12px;
}

.ticket-open-pane[hidden] {
  display: none;
}

.ticket-open-pane > .ticket-advanced-body {
  margin-top: 0;
}

/* The Questions block of a ticket option folds like the option itself. */
.ticket-questions-head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.ticket-questions-head .ticket-option-chevron {
  display: block;
  margin-bottom: 0;
}

.ticket-questions-head:hover .ticket-option-chevron,
.ticket-questions-head:focus-visible .ticket-option-chevron {
  border-color: #f3f3f3;
}

.ticket-questions-head:focus-visible {
  outline: 2px solid rgba(243, 243, 243, 0.5);
  outline-offset: 3px;
}

.ticket-questions-head-text {
  display: grid;
  gap: 2px;
}

.ticket-questions-count {
  margin-left: 4px;
  color: #959595;
  font-size: 0.75rem;
  font-weight: 600;
}

.ticket-questions-count:empty {
  display: none;
}

.ticket-form-fields.is-collapsed .ticket-option-chevron {
  transform: rotate(-45deg);
}

.ticket-form-fields.is-collapsed > :not(.ticket-questions-head) {
  display: none;
}

/* Embed Editor: a tighter top. No "Messages" label, no "/command" line above
   the template name, a shorter bar behind the title and lower buttons. */
#panel-embed-editor.embed-template-panel {
  padding-top: 12px;
}

#panel-embed-editor > .builder-card-head {
  margin-bottom: 4px;
  padding-bottom: 12px;
}

#panel-embed-editor .embed-template-editor {
  padding-top: 8px;
}

#panel-embed-editor .template-editor-title {
  padding-bottom: 0;
  border-bottom: 0;
}

#panel-embed-editor .template-editor-title > div:first-child {
  display: none;
}

.template-editor-title [data-template-command] {
  display: none;
}

/* The template list reads like Discord's command picker: the bot's picture,
   the command, and what it does, one line each, cut off with "..." . */
.settings-form button.embed-template-card.command-card {
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 78px;
  padding: 16px 18px;
}

.command-card-avatar {
  width: 40px;
  height: 40px;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  background: #2e2e2e;
}

.command-card-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.command-card-text {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.settings-form button.embed-template-card.command-card strong,
.settings-form button.embed-template-card.command-card small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow-wrap: normal;
}

.settings-form button.embed-template-card.command-card strong {
  font-size: 1.05rem;
  font-weight: 650;
}

.settings-form button.embed-template-card.command-card small {
  font-size: 0.88rem;
  font-weight: 450;
}

/* The list's close button sits on the right edge of the list, halfway down. */
.embed-template-workbench[data-layout="wide"] .embed-list-toggle-row {
  position: absolute;
  top: 50%;
  right: -15px;
  z-index: 3;
  margin: 0;
  transform: translateY(-50%);
}

.embed-template-workbench[data-layout="wide"][data-list-collapsed] .embed-list-toggle-row {
  right: 50%;
  transform: translate(50%, -50%);
}

/* Collapsed, the list is a short strip with the button in the middle of it. */
.embed-template-workbench[data-layout="wide"][data-list-collapsed] .embed-template-list {
  height: 120px;
  align-self: start;
}
/* Message previews are black like the rest of the site, not Discord grey. */
.preview-sticky, .discord-preview, .command-response-preview .discord-preview, .embed-template-preview .discord-preview { background: #0b0b0b !important; }
.preview-toolbar { background: #0b0b0b !important; }
.discord-embed { background: #141414 !important; border: 1px solid #1f1f1f; }

[data-activity-fields].is-off { opacity: 0.45; }

/* Activity: type, text and the Show activity switch fill one row. */
.activity-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: end; gap: 16px; margin: 14px 0; }
.activity-row > label[data-activity-fields] { display: grid; gap: 6px; }
.activity-row select, .activity-row input[name="activity_text"] { width: 100%; }
.activity-switch { display: grid; gap: 6px; justify-items: center; padding: 0 6px; }
.activity-switch > span { font-size: inherit; color: inherit; white-space: nowrap; }
.activity-switch .toggle-control { height: 46px; display: flex; align-items: center; }
@media (max-width: 720px) {
  .activity-row { grid-template-columns: 1fr; }
  .activity-switch { justify-items: start; padding: 0; }
}

/* Server Membership and Clear all bot data side by side, with a divider. */
.bot-split { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 24px; align-items: stretch; margin-top: 1.25rem; }
.bot-split:not(:has(.split-divider)) { grid-template-columns: minmax(0, 1fr); }
.bot-split > .config-block { margin: 0; }
.split-divider { background: var(--m5-line-hi, #323232); }
@media (max-width: 1000px) {
  .bot-split, .bot-split:not(:has(.split-divider)) { grid-template-columns: minmax(0, 1fr); }
  .split-divider { height: 1px; width: 100%; }
}

/* Every Save button looks like Save Template: black, thin outline, white text. */
body.m5-app .save-settings-button,
body.m5-app .settings-form button.save-settings-button,
body.m5-app .settings-form button.bloxlink-save-key-button,
body.m5-app .bloxlink-save-key-button {
  background: transparent !important;
  border: 1px solid var(--m5-line-hi) !important;
  border-radius: 999px !important;
  color: var(--m5-ink) !important;
  box-shadow: none !important;
}
body.m5-app .save-settings-button:hover,
body.m5-app .settings-form button.save-settings-button:hover,
body.m5-app .settings-form button.bloxlink-save-key-button:hover,
body.m5-app .bloxlink-save-key-button:hover {
  background: rgba(243, 243, 243, 0.07) !important;
  border-color: var(--m5-ink) !important;
}

/* Appearance: icon and banner as two cards that fill the whole row. */
body.m5-app .bot-image-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 18px;
  align-items: stretch;
  margin: 8px 0 18px;
}
body.m5-app .bot-image-field {
  align-content: start;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--m5-line);
  border-radius: 18px;
  background: var(--m5-card);
}
body.m5-app .bot-image-field > strong { font-size: 14px; }
body.m5-app .bot-image-shot.is-banner { width: 100%; height: auto; aspect-ratio: 17 / 6; }
body.m5-app .bot-image-note { grid-column: 1 / -1; flex: none; margin: 0; }
@media (max-width: 820px) {
  body.m5-app .bot-image-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Appearance, second pass: a bigger icon, the address field and its caption
   at the bottom of both cards, and no second hairline above the cards. */
body.m5-app .bot-image-field { display: flex; flex-direction: column; gap: 12px; }
body.m5-app .bot-image-shot.is-icon { width: min(100%, 300px); height: auto; aspect-ratio: 1 / 1; }
body.m5-app .bot-image-field > .bot-image-row { margin-top: auto; }
.bot-subpanel[data-bot-panel="appearance"],
.bot-subpanel[data-bot-panel="appearance"] > .config-block,
.bot-subpanel[data-bot-panel="appearance"] .bot-image-grid {
  border-top: 0 !important;
  box-shadow: none !important;
}
.bot-subpanel[data-bot-panel="appearance"] > .config-block { padding-top: 0 !important; }

/* One full-width rule above Server Membership and Clear all bot data, with
   real space under it. The blocks drop the rule each of them used to draw. */
.bot-split {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
}
body.m5-app .bot-subpanel .bot-split > .config-block,
.bot-subpanel .bot-split > .config-block {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin: 0 !important;
}

/* The blocks carried a big soft shadow and a 1px light line along their top
   edge. On a black page that reads as faint boxes and a second rule right
   under the real one, so they go. */
body.m5-app .bot-subpanel .config-block,
body.m5-app .bot-split > .config-block {
  box-shadow: none !important;
}

/* Pulled up: less space above the rule and between the rule and the titles. */
.bot-split { margin-top: 0; padding-top: 18px; }

/* --- Modules: one calm list ----------------------------------------------
   Each module is a single line with its switch. The settings fold open under
   it on a click, and everything starts folded. */
body.m5-app .module-groups { gap: 26px; margin-top: 18px; }
body.m5-app .module-group { gap: 10px; }
body.m5-app .module-group-head { padding: 0 2px; }
body.m5-app .module-group-head h3 {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--m5-faint);
}
body.m5-app .module-group-head p { display: none; }
body.m5-app .module-group .module-list { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
body.m5-app .module-card { border-radius: 14px; }
body.m5-app .module-card.is-wide { grid-column: auto; }
body.m5-app .module-card-head { align-items: center; padding: 14px 18px; cursor: pointer; }
body.m5-app .module-card-head:hover { background: rgba(243, 243, 243, 0.03); border-radius: 14px; }
body.m5-app .module-card-title { gap: 2px; }
body.m5-app .module-card-title strong { font-size: 15px; display: flex; align-items: center; gap: 10px; }
body.m5-app .module-card-title p { margin: 0; font-size: 13px; color: var(--m5-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.m5-app .module-card-switch { gap: 14px; }
body.m5-app .module-card-chip {
  display: none; padding: 2px 9px; border: 1px solid rgba(243, 195, 90, 0.4); border-radius: 999px;
  color: #e9c46a; font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}
body.m5-app .module-card.is-on .module-card-chip { display: inline-block; }
body.m5-app .module-card-toggle {
  display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--m5-line-hi); border-radius: 999px; background: transparent; cursor: pointer;
}
body.m5-app .module-card-toggle:hover { border-color: var(--m5-ink); }
body.m5-app .module-card-caret {
  width: 7px; height: 7px; border-right: 2px solid var(--m5-muted); border-bottom: 2px solid var(--m5-muted);
  transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--m5-ease);
}
body.m5-app .module-card.is-expanded .module-card-caret { transform: translateY(2px) rotate(-135deg); }
body.m5-app .module-card:not(.is-expanded) .module-card-body { display: none; }
body.m5-app .module-card-body { padding: 4px 18px 18px; }
@media (max-width: 620px) {
  body.m5-app .module-card-title p { white-space: normal; }
}

/* Modules, polish: an opened card gets room to breathe, its fields share one
   rhythm, and the body is set off from the header by an inset rule. */
body.m5-app .module-card.is-expanded { background: #0e0e0e; }
body.m5-app .module-card.is-expanded > .module-card-head:hover { background: transparent; cursor: pointer; }
body.m5-app .module-card-body {
  margin: 0 18px;
  padding: 20px 0 22px;
  gap: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.m5-app .module-card-body .module-field { gap: 10px; }
body.m5-app .module-card-body .module-field-label { font-size: 11px; letter-spacing: 0.09em; color: var(--m5-faint); }
body.m5-app .module-card-body textarea { min-height: 120px; padding: 12px 14px; border-radius: 12px; line-height: 1.5; }
body.m5-app .module-card-body select,
body.m5-app .module-card-body input[type="text"],
body.m5-app .module-card-body input:not([type]) { min-height: 44px; border-radius: 12px; }
body.m5-app .module-card-body .form-help { margin-top: 2px; }
body.m5-app .module-joinping { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px 36px; align-items: start; }
body.m5-app .module-gate-empty { margin: 0; padding: 12px 14px; border: 1px dashed rgba(255, 255, 255, 0.14); border-radius: 12px; text-align: left; color: var(--m5-faint); font-size: 13px; }
body.m5-app .module-gate-foot { display: flex; align-items: center; gap: 12px; }
@media (max-width: 760px) {
  body.m5-app .module-joinping { grid-template-columns: minmax(0, 1fr); }
}

/* Modules: clearer group titles, and the fold arrow on the left of each row. */
body.m5-app .module-group-head { display: flex; align-items: center; flex-wrap: nowrap; gap: 14px; padding: 0 2px; }
body.m5-app .module-group-head h3 {
  flex: none; margin: 0; font-family: inherit; font-size: 17px; font-weight: 650; letter-spacing: -0.015em;
  text-transform: none; color: var(--m5-ink);
}
body.m5-app .module-group-head p { display: block; flex: none; margin: 0; font-size: 13px; color: var(--m5-faint); }
body.m5-app .module-group-head::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--m5-line); min-width: 24px; }
body.m5-app .module-card-head { gap: 14px; }
body.m5-app .module-card-title { flex: 1 1 auto; }
body.m5-app .module-card-toggle {
  flex: none; width: 26px; height: 26px; border: 0; border-radius: 8px; background: transparent;
}
body.m5-app .module-card-toggle:hover { background: rgba(243, 243, 243, 0.08); }
body.m5-app .module-card-caret {
  width: 8px; height: 8px; border-right: 2px solid var(--m5-muted); border-bottom: 2px solid var(--m5-muted);
  transform: translateX(-1px) rotate(-45deg); transition: transform .2s var(--m5-ease);
}
body.m5-app .module-card.is-expanded .module-card-caret { transform: translateY(-2px) rotate(45deg); }
@media (max-width: 620px) {
  body.m5-app .module-group-head p { display: none; }
}

/* Modules: group titles stand alone, without a description beside them. */
body.m5-app .module-group-head p { display: none !important; }