:root {
  color-scheme: dark;
  --bg: #020202;
  --panel: rgba(15, 15, 15, 0.78);
  --panel-strong: rgba(22, 22, 22, 0.9);
  --line: rgba(255, 255, 255, 0.18);
  --line-strong: rgba(255, 255, 255, 0.38);
  --text: #f7f7f7;
  --muted: #b6b6b6;
  --dim: #707070;
  --white: #ffffff;
  --danger: #ffffff;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.72);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

.hidden {
  display: none !important;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.icon-button.spinning {
  animation: spin 1s linear infinite;
}

.space-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.08), transparent 24rem),
    linear-gradient(#050505, #000 70%);
}

.grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at center, black 0, transparent 78%);
}

.watermark {
  position: absolute;
  left: 50%;
  bottom: 28%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.075);
  font-size: clamp(5rem, 16vw, 15rem);
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.planet {
  position: absolute;
  left: 50%;
  bottom: -40vw;
  width: 140vw;
  height: 58vw;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.42), transparent 2%),
    radial-gradient(ellipse at center top, rgba(255,255,255,0.14), transparent 34%),
    linear-gradient(to bottom, rgba(255,255,255,0.22), rgba(255,255,255,0.02) 12%, rgba(0,0,0,0.96) 58%);
  box-shadow: 0 -18px 42px rgba(255,255,255,0.22);
  opacity: 0.92;
}

.orbit {
  position: absolute;
  left: 50%;
  top: 63%;
  width: 112vw;
  height: 35vw;
  border: 1px solid rgba(255,255,255,0.28);
  border-bottom: 0;
  border-radius: 100% 100% 0 0;
  transform: translate(-50%, -50%);
}

.orbit-b {
  width: 72vw;
  height: 22vw;
  opacity: 0.42;
}

.stars i,
.status-callout span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 18px #fff;
}

.stars i:nth-child(1) { left: 6%; top: 22%; }
.stars i:nth-child(2) { left: 24%; top: 38%; }
.stars i:nth-child(3) { left: 48%; top: 42%; }
.stars i:nth-child(4) { right: 26%; top: 15%; }
.stars i:nth-child(5) { right: 6%; top: 43%; }
.stars i:nth-child(6) { left: 9%; bottom: 17%; }
.stars i:nth-child(7) { right: 9%; bottom: 18%; }

.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 28px clamp(20px, 5vw, 88px) 42px;
}

.login-brand,
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.login-brand strong,
.sidebar-brand strong {
  display: block;
  font-size: 1.55rem;
  font-weight: 800;
}

.login-brand span,
.sidebar-brand span {
  display: block;
  color: var(--muted);
  font-size: 1rem;
}

.sentinel-mark {
  --mark-size: 52px;
  position: relative;
  width: var(--mark-size);
  height: var(--mark-size);
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.9)) drop-shadow(0 0 28px rgba(255,255,255,0.28));
}

.sentinel-mark.large {
  margin: 0 auto 12px;
  --mark-size: 72px;
}

.sentinel-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.logo-main {
  fill: url("#sentinelGradient");
}

.sentinel-mark svg .logo-main {
  fill: #fff;
}

.hero {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  min-height: 700px;
}

.overline {
  margin: 0 0 10px;
  color: #d6d6d6;
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  font-weight: 600;
}

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

.hero h1 {
  margin: 0;
  font-size: clamp(4.2rem, 8vw, 7.2rem);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 8px 30px rgba(255,255,255,0.22);
}

.hero-copy {
  margin: 18px 0 42px;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  color: #f1f1f1;
}

.login-card {
  width: min(580px, calc(100vw - 40px));
  padding: 34px 30px 32px;
  border: 1px solid rgba(255,255,255,0.38);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 42%),
    rgba(12, 12, 12, 0.76);
  box-shadow: var(--shadow), inset 0 0 48px rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
}

.login-card p {
  max-width: 420px;
  margin: 0 auto 24px;
  color: #f0f0f0;
  font-size: 1.08rem;
  line-height: 1.45;
}

.oauth-error-card {
  margin: 0 auto;
}

.oauth-error-card p {
  max-width: 490px;
  color: #fff;
}

.discord-login {
  width: 100%;
  min-height: 70px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border-radius: 14px;
  color: #050505;
  background: #fff;
  text-decoration: none;
  font-size: 1.12rem;
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(255,255,255,0.12);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.discord-login:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(255,255,255,0.2);
}

.discord-icon {
  width: 30px;
  height: 30px;
  fill: currentColor;
}

.arrow {
  font-size: 1.7rem;
}

.divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 22px;
  align-items: center;
  margin: 30px 0;
  color: var(--muted);
}

.divider::before,
.divider::after {
  content: "";
  height: 1px;
  background: rgba(255,255,255,0.16);
}

.trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: left;
}

.trust-row > div {
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 12px;
  align-items: center;
}

.trust-icon {
  grid-row: span 2;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  font-size: 1.4rem;
}

.trust-row strong {
  font-size: 0.98rem;
}

.trust-row small {
  color: var(--muted);
}

.status-callout {
  position: absolute;
  width: 170px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  background: rgba(12,12,12,0.78);
  text-align: left;
  box-shadow: var(--shadow);
}

.status-callout span {
  position: static;
  display: inline-block;
  margin-right: 10px;
}

.status-callout strong {
  font-size: 0.9rem;
}

.status-callout small {
  display: block;
  margin-top: 10px;
  color: #fff;
}

.callout-left {
  left: 7%;
  top: 32%;
}

.callout-right {
  right: 7%;
  top: 40%;
}

.powered {
  margin: 0 auto;
  color: #ddd;
  font-size: 0.78rem;
  letter-spacing: 0.55em;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  position: relative;
}

.sidebar {
  min-height: 100vh;
  padding: 20px 16px;
  border-right: 1px solid rgba(255,255,255,0.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 28%),
    rgba(0,0,0,0.78);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 28px 0 80px rgba(0,0,0,0.42);
}

.nav {
  display: grid;
  gap: 6px;
}

.nav-item,
.ghost-button,
.secondary-button,
.primary-button,
.danger-button,
.icon-button {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.nav-item {
  min-height: 48px;
  padding: 8px 12px;
  text-align: left;
  display: grid;
  align-content: center;
  gap: 2px;
}

.nav-item span {
  font-size: 0.92rem;
}

.nav-item small {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.75rem;
}

.nav-item:hover,
.nav-item.active {
  border-color: rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.12);
  transform: translateX(2px);
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 10px;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
}

.user-card img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-card > div:last-child {
  min-width: 0;
}

.user-card strong,
.user-card span {
  display: block;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-card span,
.hint,
.metric-card span,
.preview-panel > span,
.settings-list span {
  color: var(--muted);
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #050505;
  font-weight: 900;
}

.workspace {
  min-width: 0;
  padding: 20px clamp(14px, 3vw, 32px) 28px;
  background:
    radial-gradient(circle at 80% 8%, rgba(255,255,255,0.08), transparent 22rem),
    radial-gradient(circle at 28% 100%, rgba(255,255,255,0.06), transparent 26rem);
}

.topbar,
.page-heading,
.panel-title,
.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.topbar,
.panel,
.metric-card,
.composer,
.preview-panel {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.07), transparent 44%),
    rgba(10,10,10,0.74);
  box-shadow: 0 18px 50px rgba(0,0,0,0.34);
  backdrop-filter: blur(14px);
}

.topbar {
  margin-bottom: 18px;
  padding: 12px 14px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.server-picker {
  width: min(520px, 100%);
}

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

.guild-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.85)) drop-shadow(0 0 22px rgba(255,255,255,0.24));
}

.guild-icon svg {
  width: 36px;
  height: 42px;
  display: block;
  fill: #fff;
}

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

.guild-icon .logo-main {
  fill: #fff;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.15rem;
}

.select,
.input,
.textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  outline: none;
}

.select,
.input {
  min-height: 44px;
  padding: 0 12px;
}

.textarea {
  min-height: 200px;
  padding: 14px;
  resize: vertical;
}

.status-pill {
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  color: var(--muted);
  min-width: 86px;
  text-align: center;
}

.status-pill.online {
  color: #fff;
  box-shadow: 0 0 22px rgba(255,255,255,0.2);
}

.status-pill.offline {
  border-color: rgba(255,255,255,0.28);
  color: #d0d0d0;
}

.page {
  display: none;
}

.page.active {
  display: block;
  animation: pageIn 180ms ease both;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.metric-card,
.panel,
.composer,
.preview-panel {
  padding: 14px;
}

.metric-card strong {
  display: block;
  overflow-wrap: anywhere;
  margin-top: 6px;
  font-size: 1.1rem;
}

.notice {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  color: #f7f7f7;
}

.notice.warning {
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.09);
}

/* A picker that still holds a stored id the current server no longer offers.
   The notice sits inside the field so the admin sees which one to fix, and it
   stays monochrome like the rest of the theme. */
.field-warning {
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  border-left: 2px solid rgba(255,255,255,0.45);
  border-radius: 8px;
  background: rgba(255,255,255,0.07);
  color: #f7f7f7;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.role-check.missing {
  border-left: 2px solid rgba(255,255,255,0.45);
  padding-left: 8px;
}

.command-list,
.settings-list {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.command-item,
.settings-list > div {
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
}

.settings-list > div {
  display: grid;
  grid-template-columns: minmax(160px, 0.7fr) minmax(0, 1.3fr);
  gap: 16px;
  align-items: center;
  min-height: 58px;
}

.settings-list strong {
  min-width: 0;
  justify-self: end;
  overflow-wrap: anywhere;
  text-align: right;
}

.command-item strong {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff;
  color: #050505;
}

label {
  display: grid;
  gap: 8px;
  color: #dcdcdc;
  font-weight: 800;
}

.action-grid {
  max-width: 760px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px 130px;
  gap: 14px;
  align-items: end;
}

.message-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(290px, 0.85fr);
  gap: 18px;
  align-items: stretch;
}

.composer {
  display: grid;
  gap: 16px;
}

.message-preview,
.paste-preview {
  min-height: 360px;
  max-height: min(72vh, 760px);
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(0,0,0,0.58);
  white-space: pre-wrap;
}

.paste-preview {
  line-height: 1.45;
  scrollbar-color: rgba(255,255,255,0.42) rgba(255,255,255,0.08);
}

.preview-panel {
  min-height: 100%;
}

.empty {
  color: var(--muted);
  display: grid;
  place-items: center;
  text-align: center;
}

.empty-state {
  padding: 32px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
  text-align: center;
}

.template-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}

.template-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.template-card {
  min-height: 120px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.template-card strong,
.template-card span {
  display: block;
}

.template-card span {
  margin-top: 10px;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Panel list toolbar ── */

.panel-list-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0;
}

.panel-list-toolbar label {
  flex: 1;
  max-width: 360px;
}

.panel-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
}

.panel-card-info strong,
.panel-card-info span {
  display: block;
}

.panel-card-info span {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.4;
}

.panel-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.status-badge-enabled {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.status-badge-draft {
  background: rgba(255,255,255,0.08);
  color: var(--muted);
}

.panel-card-open-count {
  font-size: 12px;
  color: var(--muted);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(0,0,0,0.68);
  backdrop-filter: blur(10px);
}

.modal-card {
  width: min(980px, 100%);
  max-height: min(860px, calc(100vh - 44px));
  overflow: auto;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 20px;
  background: rgba(9,9,9,0.96);
  box-shadow: var(--shadow);
  animation: pageIn 180ms ease both;
}

.modal-header,
.modal-body {
  padding: 20px;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
}

.form-label {
  display: block;
  color: #f7f7f7;
  font-weight: 800;
}

.compact-button {
  min-height: 38px;
  padding: 8px 12px;
}

.embed-editor-section {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
}

.embed-section-head,
.embed-editor-head,
.embed-fields-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.embed-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.embed-empty {
  padding: 14px;
  border: 1px dashed rgba(255,255,255,0.16);
  border-radius: 12px;
  color: var(--muted);
}

.embed-editor {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background: rgba(0,0,0,0.32);
}

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

.embed-grid .wide {
  grid-column: 1 / -1;
}

.embed-color-input {
  padding: 4px;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f3f3f3;
  font-weight: 800;
}

.embed-fields {
  display: grid;
  gap: 12px;
}

.embed-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}

/* §3: a panel field is moved as well as edited, so its row carries the same tools
   a welcome field does - the theme's own bordered buttons, no new colours. */
.embed-field-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.embed-field-tools .icon-button {
  padding: 4px 8px;
  font-size: 0.8rem;
}

.danger-button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}

.danger-button:hover {
  background: rgba(255,255,255,0.13);
}

.template-danger-zone {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex;
  justify-content: flex-end;
}

.template-delete-button {
  min-height: 42px;
  padding: 10px 18px;
}

.discord-message-preview {
  min-height: 360px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: rgba(0,0,0,0.58);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-content: start;
}

.discord-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #050505;
  font-weight: 900;
}

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

.bot-badge,
.mention {
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255,255,255,0.16);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

.discord-content h1,
.discord-content h2,
.discord-content h3 {
  margin: 10px 0 6px;
}

.discord-content p {
  margin: 0 0 8px;
}

.discord-content blockquote {
  margin: 8px 0;
  padding-left: 12px;
  border-left: 4px solid rgba(255,255,255,0.35);
  color: #e8e8e8;
}

.discord-content code,
.discord-content pre {
  border-radius: 6px;
  background: rgba(255,255,255,0.1);
}

.discord-content code {
  padding: 2px 5px;
}

.discord-content pre {
  padding: 12px;
  overflow: auto;
}

.discord-content a {
  color: #fff;
  text-decoration: underline;
}

.embed-preview-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  margin-top: 12px;
  padding: 14px 14px 14px 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.045);
  overflow: hidden;
}

.embed-color-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #fff;
}

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

.embed-author,
.embed-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 0.86rem;
}

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

/* Discord links the author name itself, so the preview does; it stays in the
   monochrome palette rather than borrowing a browser's blue. */
.embed-author a {
  color: var(--white);
  text-decoration: underline;
}

.embed-title {
  display: block;
  margin-top: 8px;
  color: #fff;
}

.embed-description {
  margin-top: 8px;
}

.embed-preview-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.embed-preview-field {
  grid-column: 1 / -1;
}

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

.embed-thumbnail {
  width: 82px;
  max-height: 82px;
  border-radius: 8px;
  object-fit: cover;
}

.embed-image {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  margin-top: 12px;
  border-radius: 8px;
}

.embed-footer {
  margin-top: 12px;
}

.paste-preview img {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 14px;
}

.toast-root {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 20;
  display: grid;
  gap: 10px;
}

.toast {
  width: min(360px, calc(100vw - 36px));
  padding: 14px 16px;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 14px;
  background: rgba(12,12,12,0.95);
  box-shadow: var(--shadow);
}

.toast.error {
  border-color: rgba(255,255,255,0.45);
}

.toast.info {
  color: #f7f7f7;
}

.page-note {
  margin-top: 14px;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }

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

  .topbar {
    position: static;
    align-items: stretch;
    flex-direction: column;
  }

  .topbar-actions {
    justify-content: space-between;
  }

  .metric-grid,
  .message-layout,
  .action-grid,
  .embed-grid,
  .embed-field-row {
    grid-template-columns: 1fr;
  }

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

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

  .callout-left,
  .callout-right {
    display: none;
  }
}

@media (max-width: 620px) {
  .login-screen {
    padding: 20px;
  }

  .hero {
    min-height: 650px;
  }

  .login-card {
    padding: 26px 20px;
  }

  .trust-row {
    grid-template-columns: 1fr;
  }

  .powered,
  .overline {
    letter-spacing: 0.28em;
  }
}

/* =========================================================
   TICKETS
========================================================= */

.ticket-subnav {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.ticket-tab {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.ticket-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-color: var(--line-strong);
}

.ticket-tab.active {
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  border-color: var(--line-strong);
}

.ticket-tab-content {
  display: none;
}

.ticket-tab-content.active {
  display: block;
}

.panel-list {
  display: grid;
  gap: 12px;
}

.panel-card {
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  gap: 6px;
}

.panel-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.panel-card-head h3 {
  margin: 0;
  font-size: 1rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.panel-status {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
}

.panel-status.on {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
}

.panel-status.off {
  color: var(--muted);
}

.panel-card-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.panel-card-hint {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  opacity: 0.7;
}

.ticket-toolbar {
  display: grid;
  grid-template-columns: 180px 200px minmax(0, 1fr);
  gap: 14px;
  align-items: end;
  margin-bottom: 18px;
}

.ticket-filter {
  min-width: 0;
}

.ticket-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  height: min(72vh, 820px);
}

.ticket-list-pane,
.ticket-detail-pane {
  min-width: 0;
  height: 100%;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 44%), rgba(10, 10, 10, 0.74);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
  scrollbar-color: rgba(255, 255, 255, 0.42) rgba(255, 255, 255, 0.08);
}

.ticket-list-pane {
  padding: 12px;
}

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

.ticket-row {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.ticket-row:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.ticket-row.active {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}

.ticket-row-top,
.ticket-row-meta,
.ticket-row-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ticket-row-top strong {
  font-size: 1.02rem;
  overflow-wrap: anywhere;
}

.ticket-row-meta span:first-child {
  color: var(--muted);
  font-size: 0.86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ticket-row-sub {
  color: var(--dim);
  font-size: 0.76rem;
}

.ticket-prio {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

.ticket-prio-high {
  background: rgba(251, 191, 36, 0.16);
  color: #fbbf24;
}

.ticket-prio-urgent {
  background: rgba(248, 113, 113, 0.18);
  color: #f87171;
}

.status-badge.ticket-status-open,
.status-badge.ticket-status-creating {
  background: rgba(74, 222, 128, 0.15);
  color: #4ade80;
}

.status-badge.ticket-status-claimed {
  background: rgba(122, 162, 255, 0.16);
  color: #9db8ff;
}

.status-badge.ticket-status-close_requested,
.status-badge.ticket-status-closing {
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
}

.status-badge.ticket-status-closed {
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

.status-badge.ticket-status-failed {
  background: rgba(248, 113, 113, 0.16);
  color: #f87171;
}

.status-badge.ticket-claimed {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.ticket-detail {
  min-height: 100%;
}

.ticket-detail-inner {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 100%;
}

.ticket-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ticket-detail-title h3 {
  margin: 0;
  font-size: 1.3rem;
}

.ticket-detail-title .hint {
  margin: 6px 0 0;
}

.ticket-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.ticket-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.9fr);
  gap: 18px;
  padding: 18px;
  min-height: 0;
}

.ticket-conversation {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 0;
}

.ticket-messages {
  display: grid;
  gap: 12px;
  align-content: start;
  min-height: 120px;
  max-height: min(46vh, 520px);
  overflow: auto;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.5);
  scrollbar-color: rgba(255, 255, 255, 0.42) rgba(255, 255, 255, 0.08);
}

.ticket-msg-empty,
.ticket-closed-note {
  color: var(--muted);
  text-align: center;
  padding: 18px 0;
}

.ticket-msg {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
}

.ticket-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-weight: 900;
}

.ticket-msg.staff .ticket-avatar {
  background: #fff;
  color: #050505;
}

.ticket-msg.bot .ticket-avatar {
  background: rgba(122, 162, 255, 0.28);
  color: #cdd9ff;
}

.ticket-msg-main {
  min-width: 0;
}

.ticket-msg-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.84rem;
}

.ticket-msg-head strong {
  font-size: 0.92rem;
}

.ticket-msg-head time {
  color: var(--dim);
  font-size: 0.74rem;
  margin-left: auto;
}

.ticket-msg-tag {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ticket-msg.staff .ticket-msg-tag {
  background: rgba(255, 255, 255, 0.9);
  color: #050505;
}

.ticket-msg-body {
  margin-top: 4px;
  color: #ededed;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: normal;
}

.ticket-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.ticket-attachments a {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: #cdd9ff;
  font-size: 0.8rem;
  text-decoration: none;
}

.ticket-reply .textarea,
.ticket-note-form .textarea {
  min-height: 84px;
}

.ticket-sidebar {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
}

.ticket-side-block {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  display: grid;
  gap: 10px;
}

.ticket-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.ticket-note {
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
}

.ticket-note.pinned {
  border-left-color: #fbbf24;
}

.ticket-note-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}

.ticket-note-head time {
  margin-left: auto;
  color: var(--dim);
  font-size: 0.72rem;
}

.ticket-note p {
  margin: 6px 0 0;
  color: #e6e6e6;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ticket-pin {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.16);
  color: #fbbf24;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.ticket-note-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ticket-note-controls .toggle-row {
  font-weight: 700;
  font-size: 0.86rem;
}

.ticket-answer {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ticket-answer:last-child {
  border-bottom: 0;
}

.ticket-answer span {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ticket-answer p {
  margin: 4px 0 0;
  color: #ededed;
  overflow-wrap: anywhere;
}

.ticket-participants {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.ticket-participants li {
  display: grid;
  gap: 2px;
}

.ticket-participants small {
  color: var(--dim);
}

.ticket-closereq {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 0.86rem;
}

.ticket-closereq strong {
  color: #fbbf24;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

.ticket-closereq span,
.ticket-closereq small {
  color: var(--muted);
}

.ticket-closereq p {
  margin: 0;
  color: #e6e6e6;
}

.ticket-transcripts {
  display: grid;
  gap: 8px;
}

.ticket-transcript {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 0.86rem;
}

.ticket-transcript-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ticket-transcript-head strong {
  color: #e6e6e6;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
}

.ticket-transcript-head span {
  color: var(--muted);
}

.ticket-transcript-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ticket-transcript-link {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ticket-transcript-link .input {
  flex: 1;
  min-width: 0;
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticket-rating strong {
  font-size: 1.1rem;
}

.ticket-rating p {
  margin: 6px 0 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ── Automations ────────────────────────────────────────────── */

.automation-layout {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  height: min(72vh, 820px);
}

.automation-list-pane,
.automation-editor-pane {
  min-width: 0;
  height: 100%;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), transparent 44%),
    rgba(10, 10, 10, 0.74);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
  scrollbar-color: rgba(255, 255, 255, 0.42) rgba(255, 255, 255, 0.08);
}

.automation-list-pane {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 12px;
}

.automation-list-pane > .compact-button {
  width: 100%;
}

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

.automation-row {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.automation-row:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.automation-row.active {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}

.automation-row-title {
  font-size: 0.98rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.automation-row-meta {
  color: var(--dim);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.automation-editor {
  display: grid;
  gap: 14px;
  padding: 18px;
}

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

.automation-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.automation-rule-block {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
}

.automation-rule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.automation-rule-head h4 {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

#automation-conditions,
#automation-actions {
  display: grid;
  gap: 10px;
}

.automation-rule-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.automation-rule-row > [data-role="condition-type"],
.automation-rule-row > [data-role="action-type"] {
  flex: 0 1 190px;
  min-width: 150px;
}

.automation-rule-row > .select,
.automation-rule-row > .input {
  flex: 1 1 150px;
  min-width: 120px;
}

.automation-rule-row > .icon-button {
  flex: 0 0 auto;
  margin-left: auto;
}

.automation-hint {
  margin: 0;
  color: var(--dim);
  font-size: 0.84rem;
}

.automation-actions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* The §8 execution log: one row per run, in the theme's own greys, with a
   refused action set apart by weight and border instead of a new colour. */
.automation-runs {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.automation-run-row {
  display: grid;
  gap: 4px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.automation-run-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.automation-run-status {
  padding: 2px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.automation-run-status.is-ok {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}

.automation-run-status.is-bad {
  background: var(--white);
  color: #000;
}

.automation-run-status.is-quiet {
  color: var(--dim);
}

.automation-run-ticket {
  color: var(--muted);
  font-size: 0.78rem;
}

.automation-run-time {
  margin-left: auto;
  color: var(--dim);
  font-size: 0.78rem;
}

.automation-run-result {
  padding-left: 10px;
  border-left: 2px solid rgba(255, 255, 255, 0.16);
  color: var(--muted);
  font-size: 0.8rem;
}

.automation-run-result.is-bad {
  border-left-color: var(--white);
  color: var(--white);
  font-weight: 700;
}

.automation-run-result.is-quiet {
  border-left-color: rgba(255, 255, 255, 0.1);
  color: var(--dim);
}

.automation-run-empty {
  margin: 0;
  color: var(--dim);
  font-size: 0.82rem;
}

.automation-run-empty.is-bad {
  color: var(--white);
  font-weight: 700;
}

.compact-button.danger {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.04);
  font-weight: 900;
}

.compact-button.danger:hover {
  background: rgba(255, 255, 255, 0.13);
}

.analytics-body {
  display: grid;
  gap: 18px;
}

.heading-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compact-select {
  width: auto;
}

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

.analytics-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  padding: 16px;
  display: grid;
  gap: 10px;
}

.analytics-card h3 {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.analytics-value {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--text);
}

.analytics-sub {
  font-size: 0.82rem;
  color: var(--dim);
}

.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.analytics-table th,
.analytics-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}

.analytics-table th {
  font-weight: 700;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.analytics-table td {
  color: var(--text);
}

.analytics-table tr:last-child td {
  border-bottom: none;
}

.analytics-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.analytics-bar-fill {
  height: 100%;
  background: var(--text);
  border-radius: 3px;
}

@media (max-width: 980px) {
  .ticket-toolbar {
    grid-template-columns: 1fr;
  }

  .ticket-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .ticket-list-pane {
    max-height: 340px;
  }

  .ticket-detail-body {
    grid-template-columns: 1fr;
  }

  .automation-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .automation-list-pane {
    max-height: 340px;
  }

  .automation-form-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   PANEL EDITOR
========================================================= */

.panel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-tab {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.panel-tab:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  border-color: var(--line-strong);
}

.panel-tab.active {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  border-color: var(--line-strong);
}

.panel-tab-pane {
  display: none;
  gap: 12px;
}

.panel-tab-pane.active {
  display: grid;
}

.role-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
}

.role-check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f0f0f0;
  font-size: 0.86rem;
  font-weight: 600;
}

/* =========================================================
   ONE SEARCHABLE RESOURCE PICKER

   The widget replaces every role/category checklist, so it takes over the
   container's grid layout and lays its own parts out instead. Rows keep the
   monochrome idiom: white borders and fills only, no accent hues.
========================================================= */

.resource-picker {
  display: block;
  max-height: none;
  overflow: visible;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
}

.picker-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.picker-search {
  flex: 1 1 170px;
  min-width: 0;
}

.picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 6px 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f7f7f7;
  font-size: 0.78rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.picker-chip .chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  color: #f2f2f2;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.picker-chip .chip-remove:hover,
.picker-chip .chip-remove:focus-visible {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.16);
}

.picker-none {
  color: rgba(240, 240, 240, 0.55);
  font-size: 0.78rem;
  font-weight: 600;
}

.picker-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding-right: 2px;
}

.picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #f0f0f0;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.picker-row input[type="checkbox"],
.picker-row input[type="radio"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #ffffff;
}

.picker-row > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.picker-id {
  color: rgba(240, 240, 240, 0.55);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
}

.picker-row.missing {
  padding-left: 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.45);
}

/* A stored id the guild no longer offers keeps its row everywhere a resource is
   picked, not only in the searchable picker. The same white rule marks it, so
   an admin can see at a glance which line is a leftover rather than a choice. */
.toggle-row.missing {
  padding-left: 8px;
  border-left: 2px solid rgba(255, 255, 255, 0.45);
}

.picker-status {
  margin: 8px 0 0;
  font-size: 0.78rem;
}

.role-field {
  flex: 1 1 240px;
  min-width: 0;
}

@media (max-width: 720px) {
  .picker-tools {
    gap: 6px;
  }

  .picker-search {
    flex: 1 1 100%;
  }

  .picker-rows {
    grid-template-columns: minmax(0, 1fr);
    max-height: 190px;
  }

  .picker-row {
    font-size: 0.82rem;
  }
}

.question-row,
.schedule-row,
.faq-row {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

/* A question Discord will not ask, and the count under the question list. Both
   stay empty when the form fits inside one modal, so they only appear when the
   panel is genuinely over Discord's five-input cap. */
.question-unasked,
.form-question-limit {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  border-left: 2px solid rgba(255, 255, 255, 0.35);
  padding-left: 8px;
}

.form-question-limit:not(:empty) {
  color: rgba(255, 255, 255, 0.86);
}

.schedule-row {
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: end;
}

.schedule-days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.panel-preview-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
}

/* ── Ticket permission lanes: three groups, the permissions Discord offers ──
   The same bordered-card treatment as the ticket-type and linked-panel rows, in
   the same monochrome palette: the grid is dense, so it is laid out to be read
   as a list of choices rather than decorated as one. */

.permission-lanes {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.permission-lane {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.permission-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px 14px;
  margin-top: 8px;
}

.permission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.76rem;
}

.permission-row span {
  color: #f7f7f7;
}

.permission-row .select {
  min-width: 118px;
  width: auto;
}

/* ── Ticket types: the rows behind "dropdown of types" / "one button per type" ──
   Same bordered-card treatment as the other repeatable panel editors, and the
   same four-column collapse on narrow screens, so the editor reads as one kit. */

.open-types {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.open-type-row {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.open-type-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 0.5fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.open-type-row .danger-button {
  justify-self: start;
}

/* ── Linked panels: the other panels this message offers (§4, §15) ──
   The same bordered-card treatment as the ticket-type rows, because the two
   lists are the two halves of one control, and the same monochrome warning a
   picker uses when it still holds an id the server no longer offers. */

.link-results {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.link-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.link-result-label {
  color: #f7f7f7;
  font-size: 0.8rem;
  font-weight: 600;
}

.link-result-note {
  color: var(--muted);
  font-size: 0.7rem;
}

.linked-panels {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.linked-row {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.linked-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.linked-position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.linked-target {
  color: #f7f7f7;
  font-size: 0.82rem;
  font-weight: 600;
}

.linked-order {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
}

.linked-row .danger-button {
  justify-self: start;
}

/* The counter under the link list says what the message will carry; when the
   arithmetic no longer works it is shown in full brightness so it cannot be
   skimmed past as another hint. */
.hint.warning {
  color: #f7f7f7;
}

/* An entry the bot cannot honour is still on the message - it answers with the
   reason when pressed - so the preview shows it dashed rather than hidden. */
.panel-preview-dead {
  border-style: dashed;
  opacity: 0.72;
}

.hint.warning {
  color: #f7f7f7;
}

/* Preview of the control members actually press, per publishing mode. */
.panel-preview-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 340px;
  margin-top: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}

.panel-preview-caret {
  color: var(--muted);
  font-size: 0.75rem;
}

.panel-preview-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.panel-preview-type {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}

/* A type with a description becomes a two-line pill, matching how a Discord
   select stacks the subtitle under the option name. */
.panel-preview-type-detail {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 14px;
  padding: 6px 12px;
  text-align: left;
}

.panel-preview-type-desc {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 400;
  line-height: 1.25;
  opacity: 0.78;
}

.panel-preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

.panel-preview-row .panel-preview-button {
  margin-top: 0;
}

.message-field textarea {
  min-height: 44px;
}

@media (max-width: 860px) {
  .schedule-row {
    grid-template-columns: 1fr;
  }

  .open-type-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Staff ticket actions: notes, participants, filters ── */

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-button:hover {
  color: var(--white);
}

.link-button:disabled {
  color: var(--dim);
  cursor: default;
  text-decoration: none;
}

.link-button.danger-link {
  color: #f87171;
}

.ticket-note-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 10px;
}

.ticket-participants li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ticket-participants li span {
  overflow-wrap: anywhere;
}

.ticket-participants li .link-button {
  margin-left: auto;
}

.ticket-filter-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.ticket-filter-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--white);
}

/* ── Panel version history ── */

.modal-card-narrow {
  width: min(560px, 100%);
}

.history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
}

.history-row.current {
  border-color: rgba(255, 255, 255, 0.38);
}

.history-row strong {
  margin-right: 8px;
}

.history-row .hint {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

/* ── Audit trail ── */

.audit-panel {
  margin-top: 18px;
}

.audit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

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

.audit-list {
  max-height: 420px;
  overflow: auto;
}

.audit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.audit-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 10px;
  background: rgba(9, 9, 9, 0.96);
  color: var(--dim);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

.audit-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #e6e6e6;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.audit-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.audit-when {
  color: var(--dim);
  white-space: nowrap;
}

.audit-action {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.7rem;
  white-space: nowrap;
}

.audit-details {
  color: var(--muted);
}

.block-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  align-items: end;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.block-form .wide {
  grid-column: span 2;
}

.block-form .primary-button {
  grid-column: span 1;
}

/* ── §6 welcome-message builder ──
   The same bordered-card treatment as the embed fields, ticket types and linked
   panels: one kit of repeatable rows, in the dashboard's own black, white and
   grey. The only colour here is on the button preview, where it has to be -
   Discord's four button styles are the setting being configured, and a preview
   that drew them all grey would be showing something other than the choice. */

.welcome-builder .embed-grid {
  margin-top: 10px;
}

.welcome-embeds {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

/* Embeds kept while the mode is plain text are still readable and still editable;
   they are just visibly not part of what goes out. */
.welcome-embeds-inert {
  opacity: 0.72;
}

.welcome-embed-card {
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.welcome-embed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.welcome-embed-index {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.welcome-embed-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.welcome-embed-tools .icon-button {
  padding: 4px 8px;
  font-size: 0.8rem;
}

.welcome-embed-overflow {
  color: #f2b0b0;
}

.welcome-embed-fields {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.welcome-field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.welcome-field-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.welcome-field-tools .icon-button {
  padding: 4px 8px;
  font-size: 0.8rem;
}

.welcome-preview-message {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.welcome-preview-mentions {
  margin-bottom: 6px;
}

.welcome-preview-mention {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #f2f2f2;
  font-weight: 700;
  font-size: 0.76rem;
}

.welcome-preview-text {
  color: #f3f3f3;
  font-size: 0.86rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.welcome-preview-text[data-empty="1"] {
  color: var(--muted);
  font-style: italic;
}

.welcome-preview-note {
  margin-top: 6px;
}

/* ── §6 ticket action buttons ── */

.ticket-control-rows {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.ticket-control-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.5fr) minmax(0, 0.9fr);
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.ticket-control-name {
  display: grid;
  gap: 4px;
}

.ticket-control-caption {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ticket-control-preview {
  display: grid;
  gap: 8px;
}

.ticket-control-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* The priority menu the ticket always carries, drawn as the same dim control
   outline the panel preview uses for a menu, and named apart from it because it
   is a different message's control. */
.ticket-control-menu {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: min(280px, 100%);
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #ececec;
  font-weight: 700;
  font-size: 0.82rem;
}

.control-preview-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  color: #fff;
  font-weight: 800;
  font-size: 0.85rem;
}

.control-preview-button.is-primary {
  background: #5865f2;
}

.control-preview-button.is-secondary {
  background: #4e5058;
}

.control-preview-button.is-success {
  background: #248046;
}

.control-preview-button.is-danger {
  background: #da373c;
}

@media (max-width: 860px) {
  .welcome-field-row,
  .ticket-control-row {
    grid-template-columns: 1fr;
  }
}

/* Server selection: the first screen after login, before any server is chosen. */
.server-screen {
  position: relative;
  min-height: 100vh;
  padding: 28px clamp(20px, 5vw, 88px) 48px;
}

.server-screen-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.server-screen-top .ghost-button {
  padding: 0 16px;
}

.server-screen-body {
  width: min(1120px, 100%);
  margin: clamp(32px, 7vh, 72px) auto 0;
}

.server-screen-title {
  margin: 0 0 32px;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-align: center;
}

.server-toolbar {
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
}

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

.server-search-row .input::placeholder {
  color: var(--dim);
}

.server-status {
  margin-bottom: 18px;
  padding: 28px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  text-align: center;
}

.server-status strong {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
}

.server-status .secondary-button {
  margin-top: 14px;
  padding: 0 18px;
}

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

.server-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  min-height: 180px;
  padding: 24px 16px 20px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.07), transparent 44%),
    rgba(10,10,10,0.74);
  box-shadow: 0 18px 50px rgba(0,0,0,0.34);
  color: var(--text);
  cursor: pointer;
  text-align: center;
  font: inherit;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.server-card:hover,
.server-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12), transparent 50%),
    rgba(18,18,18,0.86);
  outline: none;
}

.server-card:disabled {
  transform: none;
}

.server-card.is-opening {
  border-color: var(--white);
}

.server-card-icon {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
}

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

.server-card-icon svg {
  width: 44px;
  height: 52px;
  fill: #fff;
}

.server-card-name {
  max-width: 100%;
  overflow-wrap: anywhere;
  font-weight: 800;
}

.server-card-id {
  color: var(--dim);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.topbar-actions .ghost-button {
  padding: 0 14px;
}

@media (max-width: 620px) {
  .server-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .server-card {
    min-height: 150px;
    padding: 18px 10px 14px;
  }

  .server-card-icon {
    width: 64px;
    height: 64px;
  }
}