@font-face {
  font-family: LCARS;
  src: url('/dashboard/font/title') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: LCARSTerminal;
  src: url('/dashboard/font/terminal') format('truetype');
  font-display: swap;
}

[hidden] { display: none !important; }
html, body { max-width: 100%; overflow-x: hidden; }
body, .nav, input, select, button { font-family: LCARS, Arial, sans-serif; }
.telemetry,
.identity small,
.account,
.selector-row span,
.gate p,
.metric b,
.hint,
.feature-placeholder p,
.savebar span {
  font-family: LCARSTerminal, Consolas, monospace;
}

/* Long-form LCARS navigation rail */
.shell { grid-template-columns: 300px 1fr; }
.rail {
  position: sticky;
  top: 0;
  height: calc(100vh - 28px);
  min-height: 0;
  padding-bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rail-cap { flex: 0 0 auto; }
#navigation {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin-top: 12px;
  padding: 0 5px 100px 0;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--orange) #09090c;
}
#navigation::-webkit-scrollbar { width: 8px; }
#navigation::-webkit-scrollbar-track { background: #09090c; }
#navigation::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 8px; }
.nav-groups { display: grid; gap: 18px; }
.nav-group { display: grid; gap: 5px; }
.nav-group-label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 28px;
  padding: 5px 12px 5px 16px;
  color: #9e9aad;
  border-bottom: 1px solid #242431;
  font: 9px LCARSTerminal, Consolas, monospace;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.nav-group-label span {
  color: var(--orange);
  font-weight: 700;
}
.nav {
  --nav-accent: var(--orange);
  height: auto;
  min-height: 44px;
  padding: 9px 20px 9px 10px;
  border-radius: 20px 0 0 20px;
  background: color-mix(in srgb, var(--nav-accent) 66%, #15151c);
  color: #08080b;
  text-align: right;
  white-space: normal;
  line-height: 1.05;
  font-size: 14px;
}
.nav:hover,
.nav:focus-visible {
  filter: brightness(1.14);
  outline: none;
}
.nav.active {
  background: var(--nav-accent);
  box-shadow: inset 8px 0 0 #050506;
}
.nav-dashboard { margin-bottom: 16px; min-height: 50px; font-size: 17px; }
.nav.accent-orange { --nav-accent: var(--orange); }
.nav.accent-copper { --nav-accent: #c77b54; }
.nav.accent-red { --nav-accent: var(--red); }
.nav.accent-mauve { --nav-accent: var(--mauve); }
.nav.accent-violet { --nav-accent: var(--violet); }
.nav.accent-blue { --nav-accent: var(--blue); }
.nav.accent-peach { --nav-accent: var(--peach); }
.rail-decoration { bottom: 0; left: 0; pointer-events: none; }
.rail-decoration i:first-child { width: 100%; border-radius: 0 12px 12px 0; }
.rail-decoration i:nth-child(2) { width: 70%; margin-left: 30%; border-radius: 12px 0 0 12px; }
.rail-decoration i:nth-child(3) { height: 48px; border-radius: 0 0 30px 0; }
.savebar { left: 314px; }

/* Existing editors and records */
.mini { float: right; padding: 9px 15px !important; font-size: 13px !important; }
.editor-card textarea {
  display: block;
  width: 100%;
  min-height: 110px;
  margin-top: 8px;
  background: #050507;
  border: 1px solid #262631;
  border-radius: 10px;
  color: #fff;
  padding: 13px 15px;
  font: 16px LCARSTerminal, Consolas, monospace;
  resize: vertical;
}
.editor-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.editor-actions button,
.field-head button,
.record button {
  border: 1px solid #604500;
  background: #070708;
  color: #ffc467;
  border-radius: 20px;
  padding: 9px 15px;
  cursor: pointer;
}
.editor-actions .primary,
.field-head button { background: var(--orange); color: #050506; }
.danger { background: var(--red) !important; color: #070708 !important; margin-right: auto; }
.record { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.record-main { min-width: 0; }
.record-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.field-head { display: flex; align-items: center; justify-content: space-between; margin: 24px 0 12px; }
.embed-field {
  display: grid;
  grid-template-columns: 1fr 2fr auto auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid #292934;
  border-radius: 12px;
  margin-bottom: 10px;
}
.embed-field label { margin: 0; }
.embed-field .inline-control { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; }
.embed-layout { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(500px, 1.3fr); gap: 24px; }
.preview { margin-top: 28px; border-top: 6px solid var(--violet); padding-top: 20px; }
.discord-embed {
  margin-top: 12px;
  background: #2b2d31;
  border-left: 5px solid var(--orange);
  border-radius: 4px;
  padding: 18px;
  color: #f2f3f5;
  font-family: Arial, sans-serif;
}
.discord-embed h3 { margin: 0 0 10px; }
.discord-embed p { white-space: pre-wrap; }
.discord-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.discord-field { margin-top: 10px; }
.discord-field b { display: block; }
.discord-footer { color: #b5bac1; font-size: 12px; margin-top: 16px; }
.empty-state {
  color: var(--muted);
  font: 13px LCARSTerminal, Consolas, monospace;
  padding: 20px;
  text-align: center;
}

/* Dashboard command header */
.dashboard-command-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 28px;
  align-items: stretch;
  margin-bottom: 30px;
  padding: 26px 30px;
  border: 1px solid #2c2c38;
  border-radius: 26px;
  background: linear-gradient(135deg, #101018 0%, #0b0b11 62%, #17121b 100%);
  position: relative;
  overflow: hidden;
}
.dashboard-command-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  background: var(--orange);
  border-radius: 26px 0 0 26px;
}
.dashboard-command-header::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 34%;
  height: 9px;
  background: linear-gradient(90deg, var(--violet), var(--mauve));
  border-radius: 0 26px 0 12px;
}
.dashboard-kicker {
  display: inline-block;
  color: var(--orange);
  font: 12px LCARSTerminal, Consolas, monospace;
  letter-spacing: .28em;
  margin-bottom: 5px;
}
.dashboard-command-header h2 {
  font-size: 38px;
  font-weight: 400;
  text-transform: uppercase;
  margin: 0 0 8px;
  padding: 0;
}
.dashboard-command-header p {
  max-width: 760px;
  margin: 0;
  color: #aaa7b5;
  font: 14px/1.7 LCARSTerminal, Consolas, monospace;
}
.dashboard-readout {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: center;
  gap: 7px 16px;
  padding: 20px 22px;
  background: #050507;
  border: 1px solid #302c38;
  border-radius: 18px 6px 18px 6px;
  font-family: LCARSTerminal, Consolas, monospace;
}
.dashboard-readout span { color: #8c889a; font-size: 10px; letter-spacing: .13em; }
.dashboard-readout b {
  color: #ffc467;
  text-align: right;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}

/* Dashboard sections and LCARS tile groups */
.dashboard-sections { display: grid; gap: 42px; }
.dashboard-section { min-width: 0; }
.dashboard-section-header {
  display: grid;
  grid-template-columns: 62px minmax(0, auto) 1fr;
  gap: 14px;
  align-items: center;
  margin: 0 0 18px;
}
.dashboard-section-code {
  display: grid;
  place-items: center;
  height: 48px;
  border-radius: 24px 5px 5px 24px;
  background: var(--orange);
  color: #050506;
  font: 700 15px LCARSTerminal, Consolas, monospace;
}
.dashboard-section-header h3 {
  margin: 0;
  font-size: 25px;
  font-weight: 400;
  text-transform: uppercase;
}
.dashboard-section-header p {
  margin: 3px 0 0;
  color: #868292;
  font: 10px LCARSTerminal, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dashboard-section-header i {
  display: block;
  height: 14px;
  margin-left: 12px;
  border-radius: 2px 12px 12px 2px;
  background: linear-gradient(90deg, var(--orange) 0 35%, var(--violet) 35% 68%, var(--mauve) 68% 100%);
}
.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); gap: 20px; }
.dashboard-tile {
  --tile-accent: var(--orange);
  min-height: 292px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(155deg, #13131d 0%, #0b0b11 72%);
  border: 1px solid #2b2a38;
  border-radius: 30px 8px 28px 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  outline: none;
}
.dashboard-tile:hover,
.dashboard-tile:focus-visible {
  transform: translateY(-3px);
  border-color: var(--tile-accent);
  box-shadow: 0 14px 35px rgba(0, 0, 0, .38), 0 0 0 1px color-mix(in srgb, var(--tile-accent) 45%, transparent);
}
.dashboard-tile.accent-orange,
.feature-placeholder.accent-orange { --tile-accent: var(--orange); }
.dashboard-tile.accent-copper,
.feature-placeholder.accent-copper { --tile-accent: #c77b54; }
.dashboard-tile.accent-red,
.feature-placeholder.accent-red { --tile-accent: var(--red); }
.dashboard-tile.accent-mauve,
.feature-placeholder.accent-mauve { --tile-accent: var(--mauve); }
.dashboard-tile.accent-violet,
.feature-placeholder.accent-violet { --tile-accent: var(--violet); }
.dashboard-tile.accent-blue,
.feature-placeholder.accent-blue { --tile-accent: var(--blue); }
.dashboard-tile.accent-peach,
.feature-placeholder.accent-peach { --tile-accent: var(--peach); }
.tile-cap {
  height: 38px;
  display: flex;
  align-items: center;
  background: var(--tile-accent);
  color: #08080c;
  border-radius: 28px 0 18px 0;
  font: 700 11px LCARSTerminal, Consolas, monospace;
  letter-spacing: .18em;
  padding-left: 20px;
  position: relative;
  width: 72%;
}
.tile-cap::after {
  content: "";
  position: absolute;
  right: -32px;
  top: 0;
  border-top: 38px solid var(--tile-accent);
  border-right: 32px solid transparent;
}
.tile-cap i {
  position: absolute;
  left: 24px;
  bottom: -9px;
  width: 58px;
  height: 9px;
  border-radius: 0 0 8px 8px;
  background: var(--tile-accent);
}
.tile-body { display: grid; grid-template-columns: 68px 1fr; gap: 18px; padding: 28px 24px 20px; flex: 1; }
.tile-icon {
  width: 68px;
  height: 68px;
  border-radius: 24px 6px 24px 6px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--tile-accent) 24%, #060608);
  border: 1px solid color-mix(in srgb, var(--tile-accent) 65%, #242432);
  color: var(--tile-accent);
  font: 34px LCARS, Arial, sans-serif;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .45);
}
.tile-copy small {
  display: block;
  color: var(--tile-accent);
  font: 9px LCARSTerminal, Consolas, monospace;
  letter-spacing: .2em;
  margin: 4px 0 8px;
}
.tile-copy h3 { font-size: 22px; font-weight: 400; text-transform: uppercase; margin: 0 0 10px; }
.tile-copy p { margin: 0; color: #aaa7b5; font: 12px/1.55 LCARSTerminal, Consolas, monospace; }
.tile-footer {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #2a2935;
  padding: 13px 18px;
  background: #08080c;
}
.tile-status-light {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #494854;
  box-shadow: 0 0 0 5px #181820;
  flex: 0 0 auto;
}
.dashboard-tile.is-online .tile-status-light {
  background: var(--tile-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--tile-accent) 14%, #111117), 0 0 13px color-mix(in srgb, var(--tile-accent) 72%, transparent);
}
.dashboard-tile.is-partial .tile-status-light { animation: lcars-pulse 1.5s ease-in-out infinite; }
@keyframes lcars-pulse { 50% { opacity: .35; } }
.tile-footer > div { min-width: 0; }
.tile-footer b { display: block; color: var(--tile-accent); font: 17px LCARS, Arial, sans-serif; letter-spacing: .05em; }
.tile-footer small {
  display: block;
  color: #777482;
  font: 8px LCARSTerminal, Consolas, monospace;
  letter-spacing: .09em;
  margin-top: 2px;
}
.tile-power {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--tile-accent) 55%, #2a2935);
  background: #111119;
  color: var(--tile-accent);
  border-radius: 18px 4px 18px 4px;
  padding: 9px 13px;
  text-transform: uppercase;
  font: 12px LCARS, Arial, sans-serif;
  cursor: pointer;
  transition: .15s ease;
}
.tile-power:hover,
.tile-power:focus-visible { background: var(--tile-accent); color: #07070a; outline: none; }
.tile-power span { font-family: Arial, sans-serif; font-weight: 700; }
.tile-open-label {
  margin-left: auto;
  color: #7d7988;
  font: 10px LCARSTerminal, Consolas, monospace;
  letter-spacing: .14em;
}
.tile-open-label b { display: inline; font-size: 24px; color: var(--tile-accent); vertical-align: -2px; margin-left: 4px; }
.dashboard-tile.is-offline { filter: saturate(.72); }
.dashboard-tile.is-offline .tile-copy h3 { color: #d0cdd7; }
.dashboard-tile.is-locked { opacity: .76; }
.dashboard-tile.is-locked .tile-cap { background: #5c516d; }
.dashboard-tile.is-locked .tile-cap::after { border-top-color: #5c516d; }

/* Per-feature tab shells */
.feature-placeholder {
  --tile-accent: var(--orange);
  min-height: 520px;
  position: relative;
  padding: 70px 54px 46px;
  background: radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--tile-accent) 15%, transparent), transparent 34%), linear-gradient(135deg, #11111b, #08080c);
}
.feature-placeholder-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: min(66%, 720px);
  height: 42px;
  display: flex;
  align-items: center;
  padding-left: 30px;
  border-radius: 22px 0 18px 0;
  background: var(--tile-accent);
  color: #050506;
  font: 700 12px LCARSTerminal, Consolas, monospace;
  letter-spacing: .18em;
}
.feature-placeholder-bar::after {
  content: "";
  position: absolute;
  right: -35px;
  top: 0;
  border-top: 42px solid var(--tile-accent);
  border-right: 35px solid transparent;
}
.feature-placeholder-bar i {
  position: absolute;
  left: 34px;
  bottom: -11px;
  width: 90px;
  height: 11px;
  background: var(--tile-accent);
  border-radius: 0 0 10px 10px;
}
.feature-placeholder .status-pill { margin-top: 12px; }
.status-pill.ready-status { background: var(--tile-accent); }
.status-pill.planned-status { background: #5c516d; color: #f2eafb; }
.feature-placeholder-kicker {
  display: block;
  margin-top: 26px;
  color: var(--tile-accent);
  font: 11px LCARSTerminal, Consolas, monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.feature-placeholder h2 { margin: 4px 0 12px; padding: 0; font-size: 42px; text-transform: uppercase; }
.feature-placeholder-summary { max-width: 850px; color: #c2becb; font: 16px/1.8 LCARSTerminal, Consolas, monospace; }
.feature-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 360px));
  gap: 14px;
  margin: 30px 0;
}
.feature-placeholder-grid div {
  padding: 18px 20px;
  border: 1px solid #302e3a;
  border-radius: 18px 5px 18px 5px;
  background: #050507;
}
.feature-placeholder-grid span {
  display: block;
  color: #858190;
  font: 9px LCARSTerminal, Consolas, monospace;
  letter-spacing: .15em;
}
.feature-placeholder-grid b {
  display: block;
  margin-top: 6px;
  color: var(--tile-accent);
  font-size: 19px;
  font-weight: 400;
}
.feature-placeholder-note { max-width: 900px; color: #8e8a98; font: 13px/1.7 LCARSTerminal, Consolas, monospace; }
.back-dashboard {
  margin-top: 22px;
  border: 0;
  border-radius: 22px 5px 22px 5px;
  padding: 12px 20px;
  background: var(--tile-accent);
  color: #050506;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 1250px) {
  .dashboard-grid { grid-template-columns: repeat(2, minmax(250px, 1fr)); }
}

@media (max-width: 1100px) {
  .embed-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .dashboard-command-header { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-tile { min-height: 260px; }
}

@media (max-width: 800px) {
  .shell { display: block; }
  .rail { position: static; height: auto; min-height: 0; padding: 0; overflow: visible; display: block; }
  .rail-cap, .rail-decoration { display: none; }
  #navigation { overflow: visible; padding: 0; margin: 0; display: block; }
  .nav-dashboard { width: 100%; margin: 0; border-radius: 0; text-align: center; }
  .nav-groups { display: block; }
  .nav-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin-top: 3px; }
  .nav-group-label { grid-column: 1 / -1; min-height: 30px; justify-content: center; border: 0; background: #111117; }
  .nav { min-height: 48px; border-radius: 0; text-align: center; padding: 8px; font-size: 13px; }
  .nav.active { box-shadow: inset 0 5px 0 #050506; }
  .masthead { padding: 14px 12px; gap: 8px; }
  .identity { gap: 10px; min-width: 0; }
  .identity small { font-size: 9px; }
  .account button { margin: 4px 0; padding: 10px 13px; }
  .gate h2 { font-size: 34px; }
  .telemetry { padding-left: 8px; padding-right: 8px; }
  .savebar { left: 10px; right: 10px; padding: 8px 10px; }
  .savebar button { padding: 10px 12px; }
  .embed-field { grid-template-columns: 1fr; }
  .mini { float: none; margin-left: 8px; }
  .editor-actions { flex-wrap: wrap; }
  .danger { margin-right: 0; }
  .record { align-items: flex-start; flex-direction: column; }
  .dashboard-command-header { padding: 23px 18px; margin-top: 8px; }
  .dashboard-command-header::before { width: 9px; }
  .dashboard-command-header h2 { font-size: 30px; }
  .dashboard-readout { grid-template-columns: 1fr auto; }
  .dashboard-sections { gap: 34px; }
  .dashboard-section-header { grid-template-columns: 52px minmax(0, 1fr); }
  .dashboard-section-header i { grid-column: 1 / -1; width: 100%; margin: 0; height: 9px; }
  .dashboard-section-code { height: 42px; }
  .dashboard-section-header h3 { font-size: 21px; }
  .dashboard-grid { gap: 14px; }
  .dashboard-tile { border-radius: 24px 7px 22px 7px; }
  .tile-body { grid-template-columns: 58px 1fr; padding: 23px 18px 16px; gap: 14px; }
  .tile-icon { width: 58px; height: 58px; font-size: 30px; }
  .tile-copy h3 { font-size: 20px; }
  .tile-footer { padding: 12px 14px; }
  .tile-power { padding: 8px 10px; }
  .feature-placeholder { min-height: 440px; padding: 68px 22px 36px; }
  .feature-placeholder h2 { font-size: 32px; }
  .feature-placeholder-grid { grid-template-columns: 1fr; }
}

/* Welcome & Goodbye control surface */
.welcome-page {
  --welcome-surface: #101018;
  --welcome-surface-2: #08080d;
  --welcome-border: #2d2c39;
  --welcome-copy: #aaa7b5;
  display: grid;
  gap: 24px;
  padding-bottom: 12px;
}
.welcome-page .card { margin-bottom: 0; }
.welcome-page label {
  display: block;
  color: #c4bfce;
  font: 11px LCARSTerminal, Consolas, monospace;
  letter-spacing: .09em;
  line-height: 1.45;
  text-transform: uppercase;
}
.welcome-page label em { color: #ff6f7d; font-style: normal; }
.welcome-page input:not([type="checkbox"]):not([type="range"]):not([type="color"]),
.welcome-page select,
.welcome-page textarea {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #343342;
  border-radius: 16px 5px 16px 5px;
  background: #06060a;
  color: #f7f4f0;
  padding: 14px 16px;
  font: 15px/1.45 LCARSTerminal, Consolas, monospace;
  letter-spacing: 0;
  text-transform: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.welcome-page textarea {
  display: block;
  min-height: 154px;
  resize: vertical;
  white-space: pre-wrap;
}
.welcome-page input:focus,
.welcome-page select:focus,
.welcome-page textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 18%, transparent);
  background: #09090f;
}
.welcome-page input[type="color"] {
  width: 72px;
  height: 44px;
  margin-top: 8px;
  padding: 3px;
  border: 1px solid #393745;
  border-radius: 18px 5px 18px 5px;
  background: #050508;
  cursor: pointer;
}
.welcome-page input[type="range"] {
  width: 100%;
  margin: 13px 0 0;
  accent-color: var(--violet);
}
.welcome-page output { color: var(--violet); float: right; }

.welcome-hero {
  --hero-accent: var(--orange);
  min-height: 188px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  position: relative;
  overflow: hidden;
  padding: 36px 38px 34px 54px;
  border-radius: 42px 8px 36px 8px;
  background:
    radial-gradient(circle at 84% 22%, color-mix(in srgb, var(--hero-accent) 21%, transparent), transparent 34%),
    linear-gradient(135deg, #171421 0%, #0c0c13 58%, #111019 100%);
}
.welcome-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 23px;
  border-radius: 40px 0 0 40px;
  background: var(--hero-accent);
}
.welcome-hero::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 0;
  top: 0;
  height: 14px;
  background: linear-gradient(90deg, var(--hero-accent) 0 47%, var(--violet) 47% 71%, var(--mauve) 71% 100%);
  border-radius: 0 8px 0 14px;
}
.welcome-hero-copy { max-width: 850px; position: relative; z-index: 1; }
.welcome-kicker {
  color: var(--orange);
  font: 10px LCARSTerminal, Consolas, monospace;
  letter-spacing: .26em;
}
.welcome-hero h2 {
  margin: 5px 0 8px;
  padding: 0;
  font-size: 43px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.welcome-hero p {
  margin: 0;
  max-width: 820px;
  color: #b8b3c1;
  font: 14px/1.7 LCARSTerminal, Consolas, monospace;
}

.lcars-power-control {
  flex: 0 0 auto;
  display: grid !important;
  grid-template-columns: auto 76px;
  align-items: center;
  gap: 14px;
  color: #8d8998 !important;
  font: 18px LCARS, Arial, sans-serif !important;
  letter-spacing: .07em !important;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.lcars-power-control.compact { grid-template-columns: auto 66px; font-size: 15px !important; }
.lcars-power-control input { position: absolute; opacity: 0; pointer-events: none; }
.lcars-power-control i {
  display: block;
  width: 76px;
  height: 38px;
  border: 1px solid #4a4857;
  border-radius: 22px;
  background: #282733;
  box-shadow: inset 0 0 16px rgba(0,0,0,.45);
  position: relative;
  transition: .2s ease;
}
.lcars-power-control.compact i { width: 66px; height: 34px; }
.lcars-power-control i::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 5px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #d7d4df;
  box-shadow: 0 2px 8px rgba(0,0,0,.55);
  transition: left .2s ease, background .2s ease;
}
.lcars-power-control.compact i::after { width: 24px; height: 24px; }
.lcars-power-control input:checked + i {
  border-color: var(--orange);
  background: color-mix(in srgb, var(--orange) 72%, #16141a);
  box-shadow: 0 0 18px color-mix(in srgb, var(--orange) 33%, transparent), inset 0 0 10px rgba(255,255,255,.12);
}
.lcars-power-control input:checked + i::after { left: 42px; background: #fff; }
.lcars-power-control.compact input:checked + i::after { left: 36px; }
.lcars-power-control span.enabled { color: var(--orange); text-shadow: 0 0 14px color-mix(in srgb, var(--orange) 45%, transparent); }
.lcars-power-control input:focus-visible + i { outline: 3px solid color-mix(in srgb, var(--blue) 70%, transparent); outline-offset: 3px; }

.welcome-validation-notice {
  border: 1px solid #b83e54;
  border-left: 14px solid #ff5f78;
  border-radius: 22px 7px 22px 7px;
  background: linear-gradient(90deg, rgba(111,22,42,.55), #111019 42%);
  padding: 18px 22px;
  color: #ffd9df;
  font: 13px/1.55 LCARSTerminal, Consolas, monospace;
  box-shadow: 0 0 30px rgba(255,71,102,.14);
}
.welcome-validation-notice b { color: #ff7890; letter-spacing: .13em; }
.welcome-validation-notice ul { margin: 8px 0 0; padding-left: 22px; }

.welcome-control-card {
  --section-accent: var(--orange);
  padding: 0 30px 30px;
  border-radius: 31px 8px 26px 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--section-accent) 8%, transparent), transparent 22%),
    var(--welcome-surface);
}
.welcome-control-card.accent-orange { --section-accent: var(--orange); }
.welcome-control-card.accent-violet { --section-accent: var(--violet); }
.welcome-control-card.accent-mauve { --section-accent: var(--mauve); }
.welcome-control-card.accent-red { --section-accent: var(--red); }
.welcome-control-card.accent-blue { --section-accent: var(--blue); }
.welcome-section-heading {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: 0 -30px;
  padding: 17px 30px 16px 42px;
  border-bottom: 1px solid #302f3d;
  position: relative;
}
.welcome-section-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 15px;
  border-radius: 28px 0 0 0;
  background: var(--section-accent);
}
.welcome-section-heading::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  width: min(48%, 520px);
  height: 9px;
  border-radius: 0 0 12px 0;
  background: var(--section-accent);
}
.welcome-section-heading > div > span {
  display: block;
  color: var(--section-accent);
  font: 9px LCARSTerminal, Consolas, monospace;
  letter-spacing: .18em;
  margin-bottom: 2px;
}
.welcome-section-heading h2 {
  margin: 0;
  padding: 0;
  font-size: 25px;
  font-weight: 400;
  text-transform: uppercase;
}
.welcome-collapsible {
  overflow: visible;
  max-height: 12000px;
  opacity: 1;
  padding-top: 26px;
  transition: max-height .28s ease, opacity .22s ease, padding .22s ease;
}
.welcome-collapsible.collapsed {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  overflow: hidden;
  pointer-events: none;
}
.welcome-system-offline .welcome-control-card {
  filter: saturate(.78);
}
.welcome-system-offline .welcome-control-card::after { opacity: .5; }
.welcome-divider {
  height: 7px;
  margin: 0 0 25px;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, var(--section-accent) 0 38%, #353342 38% 100%);
}
.welcome-section-note {
  margin: 0 0 20px;
  color: #9692a2;
  font: 12px/1.65 LCARSTerminal, Consolas, monospace;
}
.required-field { max-width: 760px; }
.field-error {
  margin: 8px 0 0;
  color: #ff7087;
  font: 11px LCARSTerminal, Consolas, monospace;
}
.welcome-invalid {
  border-color: #ff5772 !important;
  box-shadow: 0 0 0 3px rgba(255,75,105,.19), 0 0 22px rgba(255,75,105,.12) !important;
}

.message-composer { display: grid; gap: 20px; }
.message-mode-tabs {
  width: min(100%, 460px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 5px;
  border: 1px solid #2c2b38;
  border-radius: 23px 6px 23px 6px;
  background: #07070c;
}
.message-mode-tabs button {
  min-height: 48px;
  border: 0;
  border-radius: 18px 5px 18px 5px;
  background: transparent;
  color: #807c8f;
  font: 15px LCARS, Arial, sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}
.message-mode-tabs button.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--section-accent, var(--orange)) 55%, #171522), #201b28);
  color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--section-accent, var(--orange)) 55%, #353240);
}
.message-mode-panel { display: grid; gap: 16px; }
.message-mode-panel > label { position: relative; }
.character-counter {
  display: block;
  margin-top: -27px;
  padding: 0 13px 10px;
  color: #5f5c6b;
  text-align: right;
  font: 10px LCARSTerminal, Consolas, monospace;
  pointer-events: none;
}
.character-counter b { color: #8d899a; }

.smart-toolbar {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid #292835;
  border-radius: 17px 5px 17px 5px;
  background: #08080d;
}
.smart-toolbar > span {
  color: #777384;
  font: 9px LCARSTerminal, Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.smart-toolbar button {
  border: 1px solid #393747;
  border-radius: 14px 4px 14px 4px;
  background: #13131c;
  color: #c7c3cf;
  padding: 6px 8px;
  font: 9px LCARSTerminal, Consolas, monospace;
  cursor: pointer;
}
.smart-toolbar button:hover,
.smart-toolbar button:focus-visible {
  border-color: var(--orange);
  color: #fff;
  outline: none;
}
.smart-toolbar .emoji-chip { font-size: 16px; line-height: 1; }
.smart-suggestion-box {
  position: fixed;
  z-index: 10000;
  width: min(320px, calc(100vw - 24px));
  max-height: 250px;
  overflow-y: auto;
  display: grid;
  gap: 3px;
  padding: 7px;
  border: 1px solid var(--violet);
  border-radius: 18px 5px 18px 5px;
  background: rgba(7,7,12,.98);
  box-shadow: 0 18px 50px rgba(0,0,0,.58), 0 0 26px rgba(145,140,255,.16);
}
.smart-suggestion-box button {
  border: 0;
  border-radius: 12px 4px 12px 4px;
  background: #15141f;
  color: #e5e2eb;
  padding: 10px 12px;
  text-align: left;
  font: 12px LCARSTerminal, Consolas, monospace;
  cursor: pointer;
}
.smart-suggestion-box button:hover { background: var(--violet); color: #08080c; }

.embed-composer {
  border-left: 7px solid var(--violet);
  padding: 18px 0 0 20px;
}
.embed-command-row,
.composer-subhead,
.role-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.embed-command-row {
  padding: 12px 14px;
  border-radius: 18px 5px 18px 5px;
  background: #07070c;
  border: 1px solid #292835;
}
.embed-command-row span,
.composer-subhead span,
.media-control-actions span {
  color: #777384;
  font: 10px/1.5 LCARSTerminal, Consolas, monospace;
}
.lcars-preview-button,
.lcars-secondary-button,
.lcars-danger-button {
  border: 1px solid #4b4858;
  border-radius: 18px 5px 18px 5px;
  background: #12121a;
  color: #f1edf5;
  padding: 10px 15px;
  font: 13px LCARS, Arial, sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}
.lcars-preview-button { border-color: var(--violet); color: #d8d5ff; }
.lcars-secondary-button { border-color: color-mix(in srgb, var(--orange) 70%, #3f3d49); color: #ffc467; }
.lcars-danger-button { border-color: #6f3442; color: #ff7f92; }
.lcars-preview-button:hover,
.lcars-secondary-button:hover { background: var(--orange); color: #07070a; }
.lcars-danger-button:hover { background: #a83c51; color: #fff; }
.embed-color-control {
  display: grid;
  grid-template-columns: 170px minmax(260px, 1fr);
  gap: 18px;
  align-items: end;
}
.color-presets {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid #292835;
  border-radius: 18px 5px 18px 5px;
  background: #07070c;
}
.color-presets button {
  width: 25px;
  height: 25px;
  border: 2px solid #2f2e39;
  border-radius: 50%;
  background: var(--preset);
  cursor: pointer;
  box-shadow: 0 0 0 2px #08080c;
}
.color-presets button:hover,
.color-presets button:focus-visible { transform: scale(1.16); outline: 2px solid #fff; outline-offset: 2px; }
.embed-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(270px, .9fr);
  gap: 20px;
  align-items: start;
}
.embed-form-grid > div { display: grid; gap: 14px; }
.media-grid { margin-top: 4px; }
.composer-subhead {
  margin-top: 10px;
  padding: 14px 16px;
  border-top: 6px solid var(--mauve);
  border-radius: 0 0 16px 5px;
  background: #08080d;
}
.composer-subhead b {
  display: block;
  color: #f2eef4;
  font: 17px LCARS, Arial, sans-serif;
  text-transform: uppercase;
}
.composer-subhead span { display: block; margin-top: 3px; }
.welcome-field-list,
.welcome-button-list { display: grid; gap: 12px; }
.welcome-field-editor,
.welcome-button-editor {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid #302f3b;
  border-radius: 19px 6px 19px 6px;
  background: linear-gradient(135deg, #111019, #08080d);
}
.welcome-field-editor {
  grid-template-columns: minmax(180px, .75fr) minmax(260px, 1.45fr) auto auto;
  align-items: end;
}
.welcome-field-editor textarea { min-height: 84px; }
.inline-control {
  display: flex !important;
  align-items: center;
  gap: 9px;
  min-width: 120px;
  padding-bottom: 12px;
}
.inline-control input { width: 18px; height: 18px; margin: 0; accent-color: var(--violet); }
.welcome-button-primary-row {
  display: grid;
  grid-template-columns: minmax(145px,.65fr) minmax(170px,1fr) minmax(90px,.4fr) minmax(115px,.5fr);
  gap: 12px;
}
.welcome-button-target { display: grid; grid-template-columns: repeat(2, minmax(180px,1fr)); gap: 12px; }

.media-control {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px dashed #484657;
  border-radius: 20px 6px 20px 6px;
  background: #09090e;
}
.media-control-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.media-control-actions span { flex: 1 1 180px; }
.media-control-preview {
  width: 100%;
  min-height: 120px;
  display: grid;
  place-items: center;
  border-radius: 15px 5px 15px 5px;
  overflow: hidden;
  background: #040406;
}
.media-control-preview img { display: block; max-width: 100%; max-height: 240px; object-fit: contain; }

.welcome-discord-preview {
  margin-top: 12px;
  padding: 22px;
  border: 1px solid #34323f;
  border-radius: 20px 6px 20px 6px;
  background: #1e1f22;
  color: #dbdee1;
  font-family: Arial, sans-serif;
}
.discord-message-shell { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; }
.discord-message-shell > img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.discord-message-shell > div > b { color: #f2f3f5; font-size: 15px; }
.discord-message-shell > div > b span { margin-left: 5px; border-radius: 3px; padding: 2px 4px; background: #5865f2; color: #fff; font-size: 9px; }
.discord-message-shell > div > small { margin-left: 8px; color: #949ba4; font-size: 11px; }
.welcome-preview-embed {
  --embed-color: var(--orange);
  position: relative;
  max-width: 580px;
  margin-top: 7px;
  padding: 13px 16px 13px 17px;
  border-left: 4px solid var(--embed-color);
  border-radius: 4px;
  background: #2b2d31;
  overflow: hidden;
}
.welcome-preview-embed h3 { margin: 7px 0 7px; color: #f2f3f5; font-size: 16px; }
.welcome-preview-embed p { margin: 0 0 8px; white-space: normal; font-size: 14px; line-height: 1.35; }
.welcome-preview-embed code { background: #1e1f22; border-radius: 3px; padding: 2px 4px; }
.welcome-preview-author { display: flex; align-items: center; gap: 8px; color: #f2f3f5; font-weight: 700; font-size: 13px; }
.welcome-preview-author-icon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.welcome-preview-thumbnail { float: right; width: 80px; height: 80px; margin: 5px 0 8px 16px; border-radius: 4px; object-fit: cover; }
.welcome-preview-image { display: block; width: 100%; max-height: 340px; margin-top: 12px; border-radius: 4px; object-fit: contain; }
.welcome-preview-fields { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 8px; margin-top: 10px; clear: both; }
.welcome-preview-field { grid-column: 1 / -1; min-width: 0; }
.welcome-preview-field.inline { grid-column: span 4; }
.welcome-preview-field b,
.welcome-preview-field span { display: block; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
.welcome-preview-field span { margin-top: 2px; color: #dbdee1; }
.welcome-preview-footer { display: flex; align-items: center; gap: 7px; margin-top: 12px; color: #b5bac1; font-size: 11px; }
.welcome-preview-footer-icon { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.welcome-preview-buttons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.discord-button { display: inline-flex; align-items: center; min-height: 32px; border-radius: 3px; padding: 5px 14px; color: #fff; font-size: 13px; font-weight: 600; }
.discord-button.style-primary { background: #5865f2; }
.discord-button.style-secondary { background: #4e5058; }
.discord-button.style-success { background: #248046; }
.discord-button.style-danger { background: #da373c; }
.discord-button.style-link { background: #4e5058; }

.welcome-card-layout {
  display: grid;
  grid-template-columns: minmax(480px, 1.25fr) minmax(320px, .75fr);
  gap: 26px;
  align-items: start;
}
.welcome-card-preview {
  --card-background-color: #11111b;
  --card-overlay: .52;
  --card-text-color: #fff;
  --card-avatar-x: 13%;
  --card-avatar-y: 46%;
  --card-text-x: 26%;
  --card-text-y: 26%;
  min-height: 360px;
  display: grid;
  grid-template-columns: 150px minmax(0,1fr);
  align-items: center;
  gap: 26px;
  position: relative;
  overflow: hidden;
  padding: 36px 42px;
  border: 1px solid color-mix(in srgb, var(--violet) 45%, #393746);
  border-radius: 38px 8px 32px 8px;
  background-color: var(--card-background-color);
  background-size: cover;
  background-position: center;
  color: var(--card-text-color);
  isolation: isolate;
}
.welcome-card-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(circle at 72% 30%, rgba(145,140,255,.27), transparent 28%),
    linear-gradient(135deg, transparent 0 44%, rgba(255,157,0,.16) 44% 48%, transparent 48% 100%),
    linear-gradient(
      160deg,
      color-mix(in srgb, #191222 88%, var(--card-background-color) 12%),
      color-mix(in srgb, #08080e 92%, var(--card-background-color) 8%) 72%
    );
}
.welcome-card-preview::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 67%;
  height: 20px;
  z-index: -1;
  border-radius: 36px 0 16px 0;
  background: linear-gradient(90deg, var(--orange), var(--violet));
}
.welcome-card-preview-overlay { position: absolute; inset: 0; z-index: -2; background: rgba(0,0,0,var(--card-overlay)); }
.welcome-card-avatar {
  position: absolute;
  left: var(--card-avatar-x);
  top: var(--card-avatar-y);
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border: 5px solid var(--card-text-color);
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0 0 0 8px rgba(8,8,12,.44), 0 0 34px rgba(145,140,255,.28);
  cursor: move;
  touch-action: none;
}
.welcome-card-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.welcome-card-preview-copy {
  position: absolute;
  left: var(--card-text-x);
  top: var(--card-text-y);
  right: 42px;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: 8px;
  cursor: move;
  touch-action: none;
}
.welcome-card-preview-copy small { color: var(--orange); font: 9px LCARSTerminal, Consolas, monospace; letter-spacing: .18em; }
.welcome-card-preview-copy strong { font: 29px/1.1 LCARS, Arial, sans-serif; text-transform: uppercase; overflow-wrap: anywhere; }
.welcome-card-preview[data-font="lcars_terminal"] .welcome-card-preview-copy strong { font-family: LCARSTerminal, Consolas, monospace; font-size: 22px; }
.welcome-card-preview[data-font="sans"] .welcome-card-preview-copy strong { font-family: Arial, sans-serif; font-size: 25px; }
.welcome-card-preview[data-font="sans_bold"] .welcome-card-preview-copy strong { font-family: Arial, sans-serif; font-size: 25px; font-weight: 800; }
.welcome-card-preview[data-font="sans_condensed"] .welcome-card-preview-copy strong { font-family: "Arial Narrow", Arial, sans-serif; font-size: 25px; font-stretch: condensed; }
.welcome-card-preview[data-font="serif"] .welcome-card-preview-copy strong { font-family: Georgia, serif; font-size: 25px; }
.welcome-card-preview[data-font="serif_bold"] .welcome-card-preview-copy strong { font-family: Georgia, serif; font-size: 25px; font-weight: 800; }
.welcome-card-preview-copy span { font: 15px LCARSTerminal, Consolas, monospace; }
.welcome-card-preview-copy i,
.welcome-card-preview-copy b { display: block; height: 12px; border-radius: 10px 0 0 10px; }
.welcome-card-preview-copy i { width: 74%; margin-top: 10px; background: var(--orange); }
.welcome-card-preview-copy b { width: 48%; background: var(--mauve); }
.welcome-card-controls { display: grid; gap: 16px; }
.welcome-card-controls .grid { gap: 14px; }
.welcome-card-position-panel { display: grid; gap: 9px; padding: 12px 14px; border: 1px dashed #474258; border-radius: 14px 5px 14px 5px; background: rgba(5,5,10,.46); }
.welcome-card-position-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.welcome-card-position-head > span { color: var(--orange); font: 10px LCARSTerminal, Consolas, monospace; letter-spacing: .15em; }
.welcome-card-position-head .lcars-secondary-button { min-height: 32px; padding: 6px 10px; }
.welcome-card-position-panel p { margin: 0; color: #aaa5bd; font-size: 11px; line-height: 1.45; }
.welcome-card-position-grid label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px 10px; }
.welcome-card-position-grid label input { grid-column: 1 / -1; }
.welcome-card-position-grid output { color: var(--violet); font: 10px LCARSTerminal, Consolas, monospace; }

.role-control-row { align-items: end; }
.role-control-row label { flex: 1 1 400px; }
.create-role-panel {
  display: grid;
  grid-template-columns: minmax(200px,1fr) 150px auto;
  gap: 14px;
  align-items: end;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--mauve);
  border-radius: 20px 6px 20px 6px;
  background: #08080d;
}
.create-role-panel .primary { margin: 0; border-radius: 18px 5px 18px 5px; }

.validation-danger { background: #c33d56 !important; color: #fff !important; border-color: #ff7187 !important; }
.validation-shake { animation: welcome-shake .48s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes welcome-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

@media (max-width: 1260px) {
  .welcome-card-layout { grid-template-columns: 1fr; }
  .welcome-card-controls { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .welcome-card-controls > .media-control,
  .welcome-card-controls > label { grid-column: 1 / -1; }
  .welcome-field-editor { grid-template-columns: 1fr 1.4fr; }
  .welcome-field-editor .inline-control,
  .welcome-field-editor .lcars-danger-button { align-self: end; }
}

@media (max-width: 1000px) {
  .embed-form-grid,
  .embed-color-control { grid-template-columns: 1fr; }
  .welcome-button-primary-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .welcome-card-controls { grid-template-columns: 1fr; }
  .welcome-card-controls .grid { grid-template-columns: 1fr 1fr; }
  .create-role-panel { grid-template-columns: 1fr 150px; }
  .create-role-panel .primary { grid-column: 1 / -1; }
}

@media (max-width: 800px) {
  .welcome-page { gap: 16px; }
  .welcome-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 38px 20px 24px 34px; border-radius: 28px 5px 25px 5px; }
  .welcome-hero h2 { font-size: 32px; }
  .welcome-control-card { padding-left: 17px; padding-right: 17px; }
  .welcome-section-heading { margin-left: -17px; margin-right: -17px; padding: 18px 17px 16px 30px; align-items: flex-start; flex-direction: column; gap: 13px; }
  .welcome-section-heading h2 { font-size: 21px; }
  .lcars-power-control.compact { align-self: stretch; justify-content: space-between; }
  .embed-composer { padding-left: 12px; border-left-width: 5px; }
  .welcome-field-editor,
  .welcome-button-primary-row,
  .welcome-button-target,
  .welcome-card-controls .grid,
  .create-role-panel { grid-template-columns: 1fr; }
  .welcome-field-editor .lcars-danger-button,
  .create-role-panel .primary { grid-column: auto; }
  .welcome-card-preview { min-height: 430px; grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 44px 20px 26px; }
  .welcome-card-avatar { width: 128px; height: 128px; }
  .welcome-card-preview-copy { justify-items: center; }
  .welcome-card-preview-copy strong { font-size: 23px; }
  .welcome-card-preview-copy i,
  .welcome-card-preview-copy b { margin-left: auto; margin-right: auto; }
  .welcome-preview-field.inline { grid-column: 1 / -1; }
  .discord-message-shell { grid-template-columns: 34px minmax(0,1fr); }
  .discord-message-shell > img { width: 34px; height: 34px; }
  .welcome-discord-preview { padding: 14px 9px; }
  .role-control-row { align-items: stretch; flex-direction: column; }
  .role-control-row label { flex-basis: auto; width: 100%; }
}

.lcars-token-button {
  border: 1px solid #3d536a;
  border-radius: 18px 5px 18px 5px;
  background: #101722;
  color: #9ed2ff;
  padding: 10px 13px;
  font: 12px LCARS, Arial, sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}
.lcars-token-button:hover { background: var(--blue); color: #05070a; }
.fixed-discord-style { opacity: .66; }
.fixed-discord-style select { cursor: not-allowed; }

/* Welcome Channel publishing and layout composer */
.welcome-channel-page {
  --wc-copper: #c77b54;
  --wc-surface: #0b0b12;
  --wc-surface-2: #11111a;
  --wc-border: #2d2d3d;
  display: grid;
  gap: 24px;
  padding-bottom: 40px;
}

.welcome-channel-command-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 148px;
  padding: 28px 34px 28px 44px;
  overflow: hidden;
  border: 1px solid #2b2b38;
  border-radius: 44px 8px 34px 8px;
  background:
    linear-gradient(90deg, rgba(255,157,0,.11), transparent 30%),
    linear-gradient(135deg, #12121c, #08080d 75%);
}
.welcome-channel-command-header::before,
.welcome-channel-command-header::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.welcome-channel-command-header::before {
  left: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  background: linear-gradient(var(--orange) 0 42%, var(--wc-copper) 42% 68%, var(--violet) 68%);
}
.welcome-channel-command-header::after {
  right: 0;
  bottom: 0;
  width: 42%;
  height: 9px;
  border-radius: 12px 0 0 0;
  background: linear-gradient(90deg, var(--violet), var(--orange));
}
.welcome-channel-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--orange);
  font: 10px LCARSTerminal, Consolas, monospace;
  letter-spacing: .2em;
}
.welcome-channel-command-header h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.welcome-channel-command-header p {
  max-width: 780px;
  margin: 13px 0 0;
  color: #b4b1c5;
  font: 15px/1.65 LCARSTerminal, Consolas, monospace;
}
.welcome-channel-publish-cluster {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: grid;
  justify-items: end;
  gap: 10px;
}
#welcomeChannelLastSaved {
  min-height: 18px;
  color: #8f8ca0;
  font: 10px LCARSTerminal, Consolas, monospace;
  letter-spacing: .09em;
  text-align: right;
}
#welcomeChannelLastSaved.is-pending { color: var(--peach); }
.welcome-channel-publish-button {
  min-width: 154px;
  min-height: 56px;
  border: 0;
  border-radius: 28px 6px 28px 6px;
  background: linear-gradient(135deg, var(--blue), #5e8ec6);
  color: #05070b;
  padding: 14px 24px;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(134,188,237,.3), 0 12px 28px rgba(72,130,190,.16);
}
.welcome-channel-publish-button:hover,
.welcome-channel-publish-button:focus-visible {
  filter: brightness(1.12);
  outline: 2px solid #cbe8ff;
  outline-offset: 3px;
}
.welcome-channel-publish-button:disabled { opacity: .6; cursor: wait; }

.welcome-channel-selection-card,
.welcome-channel-builder-card {
  position: relative;
  margin: 0;
  padding: 0 28px 28px;
  border-radius: 26px 7px 26px 7px;
  background: linear-gradient(145deg, #0f0f17, #09090e 80%);
}
.welcome-channel-selection-card::before,
.welcome-channel-builder-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 11px;
  height: 100%;
  background: var(--wc-copper);
}
.welcome-channel-builder-card::before { background: var(--orange); }
.welcome-channel-card-heading,
.welcome-channel-builder-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 -28px 24px;
  padding: 20px 28px 18px 40px;
  border-bottom: 1px solid #292936;
  background: rgba(255,255,255,.015);
}
.welcome-channel-card-heading > div,
.welcome-channel-builder-heading > div { display: flex; align-items: center; gap: 15px; }
.welcome-channel-card-heading span:first-child,
.welcome-channel-builder-heading span:first-child {
  color: var(--wc-copper);
  font: 10px LCARSTerminal, Consolas, monospace;
  letter-spacing: .1em;
}
.welcome-channel-builder-heading span:first-child { color: var(--orange); }
.welcome-channel-card-heading h2,
.welcome-channel-builder-heading h2 {
  margin: 0;
  padding: 0;
  color: #f9f7f1;
  font-size: 24px;
  text-transform: uppercase;
}
.welcome-channel-readout {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 14px;
  border: 1px solid #444454;
  border-radius: 17px 5px 17px 5px;
  color: #8b899a;
  background: #08080c;
  font: 10px LCARSTerminal, Consolas, monospace;
  letter-spacing: .08em;
}
.welcome-channel-readout.is-ready {
  border-color: #527f72;
  color: #8ff1c4;
  background: #08140f;
}

.welcome-channel-mode-tabs {
  display: inline-flex;
  gap: 5px;
  margin-bottom: 22px;
  padding: 5px;
  border: 1px solid #272733;
  border-radius: 20px 6px 20px 6px;
  background: #060609;
}
.welcome-channel-mode-tabs button {
  border: 0;
  border-radius: 16px 4px 16px 4px;
  background: transparent;
  color: #8f8ca0;
  padding: 12px 17px;
  font-size: 14px;
  text-transform: uppercase;
  cursor: pointer;
}
.welcome-channel-mode-tabs button.active {
  background: var(--wc-copper);
  color: #09090c;
}
.welcome-channel-mode-panel { max-width: 760px; }
.welcome-channel-mode-panel label,
.welcome-channel-banner-editor label,
.welcome-channel-embed-editor label,
.welcome-channel-field-row label,
.welcome-channel-link-row label {
  display: block;
  color: #c4a894;
  font: 11px LCARSTerminal, Consolas, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.welcome-channel-mode-panel input,
.welcome-channel-mode-panel select,
.welcome-channel-banner-editor input,
.welcome-channel-banner-editor select,
.welcome-channel-embed-editor input,
.welcome-channel-embed-editor select,
.welcome-channel-embed-editor textarea,
.welcome-channel-field-row input,
.welcome-channel-field-row textarea,
.welcome-channel-link-row input {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #30303e;
  border-radius: 13px 5px 13px 5px;
  background: #050508;
  color: #f4f3f5;
  padding: 13px 14px;
  font: 15px/1.45 LCARSTerminal, Consolas, monospace;
  text-transform: none;
  letter-spacing: normal;
}
.welcome-channel-mode-panel select { font-family: LCARS, Arial, sans-serif; }
.welcome-channel-embed-editor textarea,
.welcome-channel-field-row textarea {
  min-height: 150px;
  resize: vertical;
}
.welcome-channel-field-row textarea { min-height: 88px; }
.required-field em { color: #ff6678; font-style: normal; }
.welcome-channel-permission-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  margin-top: 17px;
  padding: 16px 18px;
  border: 1px solid #345864;
  border-radius: 18px 5px 18px 5px;
  background: #071116;
}
.welcome-channel-permission-note b { color: var(--blue); font-size: 13px; }
.welcome-channel-permission-note span {
  color: #a8b5c4;
  font: 12px/1.6 LCARSTerminal, Consolas, monospace;
}

.welcome-channel-builder-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  padding: 0 4px;
}
.welcome-channel-builder-summary p {
  max-width: 760px;
  margin: 0;
  color: #9c99ab;
  font: 12px/1.65 LCARSTerminal, Consolas, monospace;
}
.welcome-channel-builder-summary > div {
  display: grid;
  grid-template-columns: auto auto;
  gap: 5px 13px;
  min-width: 180px;
  padding: 12px 15px;
  border: 1px solid #353542;
  border-radius: 18px 5px 18px 5px;
  background: #07070b;
}
.welcome-channel-builder-summary span { color: #8d899c; font: 9px LCARSTerminal, Consolas, monospace; }
.welcome-channel-builder-summary b { color: var(--orange); font: 15px LCARSTerminal, Consolas, monospace; text-align: right; }

.welcome-channel-element-stack { display: grid; gap: 22px; }
.welcome-channel-element {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 82px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #31313f;
  border-radius: 24px 6px 24px 6px;
  background: linear-gradient(145deg, #101019, #08080d);
  box-shadow: 0 16px 38px rgba(0,0,0,.18);
  transition: border-color .18s ease, opacity .18s ease, transform .18s ease;
}
.welcome-channel-element:hover { border-color: #555267; }
.welcome-channel-element.is-dragging { opacity: .48; border-color: var(--orange); transform: scale(.992); }
.welcome-channel-element.welcome-invalid { border-color: #ff536c; box-shadow: 0 0 0 2px rgba(255,83,108,.25); }
.welcome-channel-element-rail {
  display: grid;
  grid-template-rows: 48px 1fr 44px 44px;
  align-items: center;
  justify-items: stretch;
  gap: 1px;
  background: #050507;
  border-right: 1px solid #2f2f3b;
}
.welcome-channel-element-rail button,
.welcome-channel-element-rail span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  background: #111118;
  color: #a9a6b9;
  font: 9px LCARSTerminal, Consolas, monospace;
}
.welcome-channel-element-rail button { cursor: pointer; }
.welcome-channel-element-rail button:first-child {
  background: var(--orange);
  color: #07070a;
  font-size: 18px;
  cursor: grab;
}
.welcome-channel-element-rail button:first-child:active { cursor: grabbing; }
.welcome-channel-element-rail button:hover { filter: brightness(1.3); }
.welcome-channel-element-rail span { color: var(--orange); font-size: 12px; }
.welcome-channel-element-main {
  min-width: 0;
  display: grid;
  gap: 17px;
  padding: 20px;
}
.wc-embed-element .welcome-channel-element-main,
.wc-links-element .welcome-channel-element-main {
  grid-template-columns: minmax(380px, 1.15fr) minmax(310px, .85fr);
  align-items: start;
}
.welcome-channel-element-label {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-bottom: 11px;
  border-bottom: 1px solid #282834;
}
.welcome-channel-element-label span {
  color: var(--orange);
  font: 9px LCARSTerminal, Consolas, monospace;
  letter-spacing: .1em;
}
.welcome-channel-element-label b {
  color: #d5d2df;
  font-size: 13px;
  text-transform: uppercase;
}
.welcome-channel-element-delete {
  align-self: start;
  margin: 16px 11px 0 0;
  border: 1px solid #7b3949;
  border-radius: 15px 5px 15px 5px;
  background: #2a1219;
  color: #ff8798;
  padding: 10px 7px;
  font-size: 9px;
  cursor: pointer;
  writing-mode: horizontal-tb;
}
.welcome-channel-element-delete:hover { background: #8d263d; color: #fff; }

.welcome-channel-banner-preview {
  --wc-banner-accent: var(--orange);
  position: relative;
  width: min(100%, 820px);
  aspect-ratio: 545 / 127;
  overflow: hidden;
  border: 1px solid #3a3948;
  border-radius: 18px 5px 18px 5px;
  background-color: #0a0a11;
  background-image:
    radial-gradient(circle at 85% 25%, rgba(255,255,255,.17) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 68%, rgba(255,255,255,.12) 0 1px, transparent 2px),
    linear-gradient(90deg, var(--wc-banner-accent) 0 10%, transparent 10% 13%, rgba(255,255,255,.03) 13% 100%),
    linear-gradient(145deg, #171727, #050508 65%);
  background-size: auto, auto, auto, cover;
  background-position: center;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  color: var(--wc-banner-text);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.welcome-channel-banner-preview.accent-orange { --wc-banner-accent: var(--orange); }
.welcome-channel-banner-preview.accent-violet { --wc-banner-accent: var(--violet); }
.welcome-channel-banner-preview.accent-mauve { --wc-banner-accent: var(--mauve); }
.welcome-channel-banner-preview.accent-blue { --wc-banner-accent: var(--blue); }
.welcome-channel-banner-preview.accent-peach { --wc-banner-accent: var(--peach); }
.welcome-channel-banner-preview.accent-red { --wc-banner-accent: var(--red); }
.welcome-channel-banner-preview.accent-copper { --wc-banner-accent: var(--wc-copper); }
.welcome-channel-banner-preview.has-custom-background { background-size: cover; background-position: center; background-repeat: no-repeat; }
.welcome-channel-banner-shader {
  position: absolute;
  z-index: -1;
  left: 7%;
  right: 7%;
  top: 27%;
  bottom: 27%;
  border-radius: 18px;
  background: rgba(0,0,0,var(--wc-banner-overlay));
  box-shadow: 0 0 28px rgba(0,0,0,.35);
}
.welcome-channel-banner-preview strong {
  max-width: 86%;
  color: var(--wc-banner-text);
  font: clamp(27px, 4vw, 58px)/1 LCARS, Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 2px 3px 3px rgba(0,0,0,.8);
  overflow-wrap: anywhere;
}
.welcome-channel-banner-preview::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 14%;
  height: 5px;
  border-radius: 5px;
  background: var(--wc-banner-accent);
}
.welcome-channel-banner-hover-actions {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity .18s ease, transform .18s ease;
}
.welcome-channel-banner-preview:hover .welcome-channel-banner-hover-actions,
.welcome-channel-banner-preview:focus-within .welcome-channel-banner-hover-actions { opacity: 1; transform: none; }
.welcome-channel-banner-hover-actions button,
.welcome-channel-banner-actions button {
  border: 1px solid #77738b;
  border-radius: 13px 4px 13px 4px;
  background: rgba(4,4,7,.88);
  color: #fff;
  padding: 8px 10px;
  font-size: 9px;
  cursor: pointer;
}
.welcome-channel-banner-editor { display: grid; gap: 13px; }
.welcome-channel-banner-editor > p,
.welcome-channel-fixed-group-note {
  margin: 0;
  color: #898698;
  font: 10px/1.6 LCARSTerminal, Consolas, monospace;
}
.welcome-channel-banner-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.welcome-channel-banner-actions button:first-of-type { border-color: #765a18; color: #ffc36b; }
.welcome-channel-banner-actions button:nth-of-type(2) { border-color: #454354; color: #bbb7c9; }
.welcome-channel-banner-actions span {
  color: #8f8ca0;
  font: 9px LCARSTerminal, Consolas, monospace;
}
.welcome-channel-banner-options {
  display: grid;
  grid-template-columns: minmax(180px,.45fr) minmax(280px,1fr);
  gap: 14px;
}
.welcome-channel-banner-options input[type="color"],
.welcome-channel-color-row input[type="color"] {
  height: 48px;
  padding: 4px;
  cursor: pointer;
}
.welcome-channel-banner-options input[type="range"] {
  height: auto;
  padding: 0;
  accent-color: var(--orange);
}
.welcome-channel-banner-options output { float: right; color: var(--orange); }

.welcome-channel-embed-editor { display: grid; gap: 14px; min-width: 0; }
.welcome-channel-embed-editor label small { color: #777487; font-size: 9px; }
.welcome-channel-color-row {
  display: grid;
  grid-template-columns: minmax(160px, 230px) 1fr;
  gap: 14px;
  align-items: end;
}
.welcome-channel-color-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 5px;
}
.welcome-channel-color-presets button {
  width: 27px;
  height: 27px;
  border: 3px solid #11111a;
  border-radius: 50%;
  background: var(--wc-preset);
  box-shadow: 0 0 0 1px #4a4858;
  cursor: pointer;
}
.welcome-channel-color-presets button:hover,
.welcome-channel-color-presets button:focus-visible { transform: scale(1.15); outline: 2px solid #fff; outline-offset: 2px; }
.welcome-channel-format-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: -8px;
  padding: 7px;
  border: 1px solid #292936;
  border-radius: 13px 4px 13px 4px;
  background: #07070b;
}
.welcome-channel-format-toolbar button {
  min-height: 30px;
  border: 1px solid #3c3b4a;
  border-radius: 9px 3px 9px 3px;
  background: #12121a;
  color: #c9c6d4;
  padding: 5px 8px;
  font: 10px LCARSTerminal, Consolas, monospace;
  cursor: pointer;
}
.welcome-channel-format-toolbar button:hover { border-color: var(--orange); color: #fff; }
.welcome-channel-format-toolbar > span { flex: 1 1 14px; }
.welcome-channel-format-toolbar .wc-variable { color: #9fd3ff; border-color: #365471; }
.character-counter {
  display: block;
  margin-top: -25px;
  padding: 0 11px 7px 0;
  color: #686677;
  font: 9px LCARSTerminal, Consolas, monospace;
  text-align: right;
  pointer-events: none;
}
.welcome-channel-fields-heading,
.welcome-channel-link-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.welcome-channel-fields-heading > div { display: grid; gap: 4px; }
.welcome-channel-fields-heading b,
.welcome-channel-link-group-heading b { color: #f0edf5; font-size: 16px; }
.welcome-channel-fields-heading span { color: #817e90; font: 9px LCARSTerminal, Consolas, monospace; }
.welcome-channel-fields-heading button,
.welcome-channel-link-group-heading button,
.wc-row-delete {
  border: 1px solid #5d4a1b;
  border-radius: 13px 4px 13px 4px;
  background: #151006;
  color: #ffc366;
  padding: 8px 10px;
  font-size: 10px;
  cursor: pointer;
}
.welcome-channel-fields,
.welcome-channel-link-group { display: grid; gap: 11px; }
.welcome-channel-field-row,
.welcome-channel-link-row {
  display: grid;
  grid-template-columns: minmax(150px,.7fr) minmax(240px,1.3fr) auto auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid #2c2c38;
  border-radius: 15px 4px 15px 4px;
  background: #09090d;
}
.welcome-channel-link-row { grid-template-columns: minmax(150px,.7fr) minmax(230px,1.3fr) auto auto; }
.wc-inline-check {
  display: flex !important;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  white-space: nowrap;
}
.wc-inline-check input { width: auto; margin: 0; accent-color: var(--orange); }
.wc-row-delete { border-color: #6d3140; background: #251016; color: #ff8496; }
.welcome-channel-link-group {
  padding: 14px;
  border: 1px solid #343342;
  border-radius: 18px 5px 18px 5px;
  background: rgba(255,255,255,.015);
}

.welcome-channel-discord-preview {
  position: sticky;
  top: 18px;
  min-width: 0;
  padding: 18px;
  border: 1px solid #31313f;
  border-radius: 18px 5px 18px 5px;
  background: #191a20;
  font-family: Arial, sans-serif;
}
.wc-discord-message-shell {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 11px;
  color: #dbdee1;
}
.wc-discord-message-shell > img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.wc-discord-message-shell > div > b { color: #f2f3f5; font-size: 14px; }
.wc-discord-message-shell > div > b span {
  margin-left: 5px;
  border-radius: 3px;
  background: #5865f2;
  color: #fff;
  padding: 2px 4px;
  font-size: 9px;
}
.wc-discord-message-shell > div > small { margin-left: 7px; color: #949ba4; font-size: 11px; }
.wc-discord-embed {
  --wc-embed-color: var(--orange);
  position: relative;
  max-width: 560px;
  margin-top: 7px;
  padding: 13px 15px 14px 17px;
  overflow: hidden;
  border-radius: 4px;
  background: #2b2d31;
  color: #dbdee1;
}
.wc-discord-embed::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--wc-embed-color);
}
.wc-discord-embed h3 { margin: 0 0 8px; color: #f2f3f5; font-size: 16px; }
.wc-discord-embed p { margin: 0; color: #dbdee1; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.wc-discord-embed code { border-radius: 3px; background: #1e1f22; padding: 1px 4px; }
.wc-discord-fields {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 10px;
  margin-top: 13px;
}
.wc-discord-fields > div { min-width: 0; }
.wc-discord-fields .stacked { grid-column: 1 / -1; }
.wc-discord-fields .inline { grid-column: span 4; }
.wc-discord-fields b,
.wc-discord-fields span { display: block; overflow-wrap: anywhere; }
.wc-discord-fields b { color: #f2f3f5; font-size: 13px; margin-bottom: 3px; }
.wc-discord-fields span { color: #dbdee1; font-size: 13px; }
.wc-link-group-title { margin-top: 5px; padding-top: 6px; border-top: 1px solid #41434a; }
.wc-link-group-title:first-child { border-top: 0; padding-top: 0; }
.wc-preview-url { color: #00a8fc !important; }

.welcome-channel-add-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 28px 0 16px;
}
.welcome-channel-add-row i { height: 1px; background: #343442; }
.welcome-channel-add-row button {
  border: 1px solid #6d5120;
  border-radius: 18px 5px 18px 5px;
  background: #171006;
  color: #ffc162;
  padding: 11px 18px;
  font-size: 13px;
  cursor: pointer;
}
.welcome-channel-element-palette {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 11px;
  padding: 16px;
  border: 1px solid #3f3f4e;
  border-radius: 22px 6px 22px 6px;
  background: #07070b;
}
.welcome-channel-element-palette button {
  position: relative;
  min-height: 106px;
  display: grid;
  align-content: center;
  gap: 7px;
  border: 1px solid #405c79;
  border-radius: 17px 5px 17px 5px;
  background: linear-gradient(145deg, #121827, #090a10);
  color: #e9f5ff;
  padding: 16px;
  text-align: left;
  cursor: pointer;
}
.welcome-channel-element-palette button::after {
  content: "+";
  position: absolute;
  right: 11px;
  top: 8px;
  color: var(--blue);
  font-size: 22px;
}
.welcome-channel-element-palette button:hover { border-color: var(--blue); transform: translateY(-2px); }
.welcome-channel-element-palette b { font-size: 15px; text-transform: uppercase; }
.welcome-channel-element-palette span { color: #8f9dae; font: 10px/1.45 LCARSTerminal, Consolas, monospace; }
.welcome-channel-limit-note {
  margin: 17px 4px 0;
  color: #7f7c8e;
  font: 10px/1.6 LCARSTerminal, Consolas, monospace;
}
#welcomeChannelValidationNotice.publish-success {
  border-color: #3d8266;
  background: #091812;
  color: #9cf0c8;
}
#panel-welcome-channel .welcome-invalid {
  border-color: #ff536c !important;
  box-shadow: 0 0 0 2px rgba(255,83,108,.2) !important;
}

@media (max-width: 1320px) {
  .wc-embed-element .welcome-channel-element-main,
  .wc-links-element .welcome-channel-element-main { grid-template-columns: 1fr; }
  .welcome-channel-discord-preview { position: static; }
  .welcome-channel-element-palette { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 960px) {
  .welcome-channel-command-header { align-items: flex-start; flex-direction: column; padding-left: 34px; }
  .welcome-channel-publish-cluster { width: 100%; grid-template-columns: 1fr auto; align-items: center; justify-items: start; }
  .welcome-channel-card-heading,
  .welcome-channel-builder-heading,
  .welcome-channel-builder-summary { align-items: flex-start; flex-direction: column; }
  .welcome-channel-readout { align-self: stretch; justify-content: center; }
  .welcome-channel-element { grid-template-columns: 42px minmax(0,1fr); }
  .welcome-channel-element-delete { grid-column: 2; justify-self: end; margin: 0 12px 13px 0; }
  .welcome-channel-element-rail { grid-row: 1 / span 2; }
  .welcome-channel-banner-options,
  .welcome-channel-color-row { grid-template-columns: 1fr; }
  .welcome-channel-field-row,
  .welcome-channel-link-row { grid-template-columns: 1fr 1fr; }
  .wc-inline-check,
  .wc-row-delete { align-self: center; }
}

@media (max-width: 680px) {
  .welcome-channel-page { gap: 16px; }
  .welcome-channel-command-header { min-height: 0; padding: 28px 18px 24px 28px; border-radius: 28px 5px 24px 5px; }
  .welcome-channel-command-header h2 { font-size: 34px; }
  .welcome-channel-publish-cluster { grid-template-columns: 1fr; justify-items: stretch; }
  #welcomeChannelLastSaved { text-align: left; }
  .welcome-channel-publish-button { width: 100%; }
  .welcome-channel-selection-card,
  .welcome-channel-builder-card { padding-left: 15px; padding-right: 15px; }
  .welcome-channel-card-heading,
  .welcome-channel-builder-heading { margin-left: -15px; margin-right: -15px; padding-left: 28px; padding-right: 15px; }
  .welcome-channel-card-heading > div,
  .welcome-channel-builder-heading > div { align-items: flex-start; flex-direction: column; gap: 5px; }
  .welcome-channel-mode-tabs { display: grid; width: 100%; }
  .welcome-channel-builder-summary > div { width: 100%; }
  .welcome-channel-element { grid-template-columns: 34px minmax(0,1fr); border-radius: 16px 4px 16px 4px; }
  .welcome-channel-element-main { padding: 13px 10px; }
  .welcome-channel-element-rail { grid-template-rows: 42px 1fr 38px 38px; }
  .welcome-channel-element-rail button,
  .welcome-channel-element-rail span { font-size: 8px; }
  .welcome-channel-element-delete { margin-right: 8px; }
  .welcome-channel-banner-preview strong { font-size: 24px; }
  .welcome-channel-banner-hover-actions { opacity: 1; transform: none; }
  .welcome-channel-banner-options,
  .welcome-channel-field-row,
  .welcome-channel-link-row { grid-template-columns: 1fr; }
  .welcome-channel-format-toolbar > span { display: none; }
  .welcome-channel-format-toolbar .wc-variable { flex: 1 1 44%; }
  .welcome-channel-discord-preview { padding: 12px 8px; }
  .wc-discord-message-shell { grid-template-columns: 32px minmax(0,1fr); gap: 8px; }
  .wc-discord-message-shell > img { width: 32px; height: 32px; }
  .wc-discord-fields .inline { grid-column: 1 / -1; }
  .welcome-channel-element-palette { grid-template-columns: 1fr; }
  .welcome-channel-permission-note { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   LCARS Reaction Roles control surface (release v5)
   -------------------------------------------------------------------------- */
.reaction-role-app,
.rr-page { min-width: 0; }
.rr-page {
  --rr-cyan: #56c5e8;
  --rr-blue: #4ea1ff;
  --rr-red: #e75d79;
  --rr-green: #55d69e;
  --rr-orange: #ff9c42;
  --rr-grey: #72778b;
  display: grid;
  gap: 22px;
  padding-bottom: 82px;
}
.rr-page button,
.rr-page input,
.rr-page textarea,
.rr-page select,
.reaction-role-dialog input,
.reaction-role-dialog button { font-family: LCARS, Arial, sans-serif; }
.rr-page input,
.rr-page textarea,
.rr-page select,
.reaction-role-dialog input {
  width: 100%;
  border: 1px solid #30303d;
  border-radius: 13px 4px 13px 4px;
  background: #09090e;
  color: #f5f2fa;
  padding: 13px 15px;
  font: 14px/1.45 LCARSTerminal, Consolas, monospace;
  outline: none;
}
.rr-page input:focus,
.rr-page textarea:focus,
.rr-page select:focus,
.reaction-role-dialog input:focus {
  border-color: var(--rr-cyan);
  box-shadow: 0 0 0 2px rgba(86,197,232,.17);
}
.rr-page textarea { min-height: 120px; resize: vertical; }
.rr-page label,
.reaction-role-dialog label {
  display: grid;
  gap: 7px;
  color: #aaa7b8;
  font: 10px LCARSTerminal, Consolas, monospace;
}
.rr-page label em { color: #ff657f; font-style: normal; }
.rr-command-header,
.rr-editor-command-header {
  position: relative;
  overflow: hidden;
  border: 1px solid #30303e;
  background:
    linear-gradient(90deg, rgba(86,197,232,.08), transparent 34%),
    linear-gradient(140deg, #10101a, #09090d 66%, #17111d);
  box-shadow: inset 0 0 50px rgba(0,0,0,.24);
}
.rr-command-header {
  min-height: 148px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 30px;
  padding: 27px 31px 25px 44px;
  border-radius: 34px 5px 30px 5px;
}
.rr-command-header::before,
.rr-editor-command-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  background: var(--rr-red);
}
.rr-command-header::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 36%;
  height: 10px;
  background: linear-gradient(90deg, var(--rr-cyan), var(--violet));
  border-radius: 0 0 0 12px;
}
.rr-kicker,
.rr-editor-title-block > span {
  color: var(--rr-cyan);
  font: 10px LCARSTerminal, Consolas, monospace;
  letter-spacing: .24em;
}
.rr-command-header h2,
.rr-editor-title-block h2 {
  margin: 6px 0 7px;
  color: #f9f7fb;
  font-size: 37px;
  font-weight: 400;
  text-transform: uppercase;
}
.rr-command-header p {
  margin: 0;
  color: #aaa7b6;
  font: 13px/1.6 LCARSTerminal, Consolas, monospace;
}
.rr-master-power {
  display: flex !important;
  align-items: center;
  gap: 15px;
  color: #fff !important;
}
.rr-master-power > span { display: grid; gap: 3px; text-align: right; }
.rr-master-power b { font-size: 18px; text-transform: uppercase; }
.rr-master-power small { color: #7e7b8e; font: 8px LCARSTerminal, Consolas, monospace; letter-spacing: .1em; }
.rr-master-power input { position: absolute; opacity: 0; pointer-events: none; }
.rr-master-power i,
.rr-multiple-toggle i {
  position: relative;
  flex: 0 0 auto;
  width: 68px;
  height: 34px;
  border-radius: 22px;
  background: #44475b;
  box-shadow: inset 0 0 0 1px #666a7c;
  cursor: pointer;
}
.rr-master-power i::after,
.rr-multiple-toggle i::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e9edf7;
  transition: transform .18s ease;
}
.rr-master-power input:checked + i,
.rr-multiple-toggle input:checked + i { background: var(--rr-blue); box-shadow: 0 0 17px rgba(78,161,255,.35); }
.rr-master-power input:checked + i::after,
.rr-multiple-toggle input:checked + i::after { transform: translateX(34px); }

.rr-library-card,
.rr-editor-section {
  border: 1px solid #2b2b38;
  border-radius: 22px 6px 22px 6px;
  background: linear-gradient(155deg, #15151d, #0d0d13 65%);
}
.rr-library-card { padding: 0 27px 28px; }
.rr-section-header {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 -27px 22px;
  padding: 16px 27px 14px 39px;
  border-bottom: 1px solid #2e2e3b;
  background: linear-gradient(90deg, rgba(231,93,121,.09), transparent 34%);
}
.rr-section-header > div { display: grid; gap: 4px; }
.rr-section-header span { color: var(--rr-red); font: 9px LCARSTerminal, Consolas, monospace; letter-spacing: .15em; }
.rr-section-header h3 { margin: 0; font-size: 24px; font-weight: 400; text-transform: uppercase; }
.rr-section-header strong { color: var(--rr-cyan); font: 22px LCARSTerminal, Consolas, monospace; }
.rr-limit-warning,
.rr-validation {
  border: 1px solid #7a3040;
  border-radius: 15px 4px 15px 4px;
  background: #240d14;
  color: #ffb2bd;
  padding: 13px 16px;
  font: 11px/1.55 LCARSTerminal, Consolas, monospace;
}
.rr-limit-warning {
  margin-bottom: 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
}
.rr-limit-warning b {
  display: block;
  margin-bottom: 4px;
  color: #ff6f87;
  font-family: LCARS, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rr-role-select select {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}
.rr-validation { margin: 0 0 2px; }
.rr-validation b { color: #ff6f87; letter-spacing: .08em; }
.rr-validation ul { margin: 8px 0 0 20px; padding: 0; }
.rr-create-tile {
  width: 100%;
  min-height: 82px;
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto;
  align-items: center;
  gap: 17px;
  margin-bottom: 18px;
  border: 1px dashed #4e5062;
  border-radius: 18px 5px 18px 5px;
  background: rgba(255,255,255,.018);
  color: #e8e7ef;
  padding: 13px 19px;
  text-align: left;
  cursor: pointer;
}
.rr-create-tile:hover:not(:disabled) { border-color: var(--rr-cyan); background: rgba(86,197,232,.07); transform: translateY(-1px); }
.rr-create-tile:disabled { opacity: .42; cursor: not-allowed; }
.rr-create-tile > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px 4px 16px 4px;
  background: var(--rr-cyan);
  color: #05070a;
  font-size: 28px;
}
.rr-create-tile > div { display: grid; gap: 4px; }
.rr-create-tile b { font-size: 20px; text-transform: uppercase; }
.rr-create-tile small { color: #8d8a9a; font: 10px LCARSTerminal, Consolas, monospace; }
.rr-create-tile > i { color: var(--rr-cyan); font-size: 31px; font-style: normal; }
.rr-message-list { display: grid; gap: 13px; }
.rr-record {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) 130px minmax(175px, .38fr) 52px;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  border: 1px solid #282834;
  border-left: 7px solid var(--rr-cyan);
  border-radius: 16px 4px 16px 4px;
  background: #08080d;
  padding: 13px 14px 13px 18px;
}
.rr-record:hover { border-color: #434458; border-left-color: var(--rr-red); }
.rr-record-main {
  min-width: 0;
  display: grid;
  gap: 13px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.rr-record-title-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 9px 14px; }
.rr-record-title-row h4 { margin: 0; color: #f4f2f7; font-size: 18px; }
.rr-record-title-row span { color: #9fa8c8; font: 10px LCARSTerminal, Consolas, monospace; }
.rr-record-items { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-height: 30px; }
.rr-summary-empty { color: #696778; font: 10px LCARSTerminal, Consolas, monospace; }
.rr-status-pill {
  display: inline-flex;
  justify-content: center;
  min-width: 84px;
  border-radius: 18px;
  padding: 6px 10px;
  font: 9px LCARSTerminal, Consolas, monospace;
  text-transform: uppercase;
}
.rr-status-pill.published { background: #123b2b; color: #76efad; }
.rr-status-pill.saved { background: #34323a; color: #e3cde0; }
.rr-record time { color: #b7b4c1; font: 10px/1.4 LCARSTerminal, Consolas, monospace; }
.rr-record-menu-wrap { position: relative; justify-self: end; }
.rr-ellipsis {
  width: 42px;
  height: 42px;
  border: 1px solid #3a3a47;
  border-radius: 13px 4px 13px 4px;
  background: #1e1e27;
  color: #f4f2f6;
  font-size: 23px;
  cursor: pointer;
}
.rr-record-menu {
  position: absolute;
  right: 0;
  top: 48px;
  z-index: 40;
  min-width: 175px;
  display: grid;
  padding: 8px;
  border: 1px solid #3e3e4c;
  border-radius: 15px 4px 15px 4px;
  background: #16161f;
  box-shadow: 0 16px 35px rgba(0,0,0,.45);
}
.rr-record-menu button { border: 0; background: transparent; color: #e9e6ef; padding: 12px; text-align: left; cursor: pointer; }
.rr-record-menu button:hover { background: #292936; }
.rr-record-menu button.danger { color: #ff7c91 !important; margin: 0; }
.rr-record-menu button.danger {
  background: #8f2036 !important;
  color: #fff !important;
  font-weight: 800;
  text-shadow: 0 1px 2px #260009;
}
.rr-record-menu button.danger:hover,
.rr-record-menu button.danger:focus-visible { background: #d43f59 !important; outline: 2px solid #ffd6dd; }
.lcars-power-control span.setup-required { color: #ffd06a; text-shadow: 0 0 12px rgba(255,208,106,.38); }
.compact-record-status.status-setup-required { color: #ffd06a; border: 1px solid #7a5a1c; background: #211704; }
.rr-library-empty { padding: 46px 20px; text-align: center; }
.rr-library-empty > span { color: var(--rr-red); font: 33px LCARSTerminal, Consolas, monospace; }
.rr-library-empty h4 { margin: 9px 0 5px; font-size: 25px; text-transform: uppercase; }
.rr-library-empty p { max-width: 600px; margin: 0 auto; color: #858292; font: 11px/1.6 LCARSTerminal, Consolas, monospace; }
.rr-mini-reaction,
.rr-mini-button,
.rr-mini-option,
.rr-mini-dropdown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  border-radius: 8px;
  padding: 4px 8px;
  font: 10px Arial, sans-serif;
}
.rr-mini-reaction { background: #22232b; }
.rr-mini-button { color: #fff; }
.rr-mini-option,
.rr-mini-dropdown { border: 1px solid #3d3e4b; background: #191a20; color: #dadddf; }

.rr-editor-command-header {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) auto;
  align-items: center;
  gap: 17px;
  min-height: 112px;
  padding: 20px 24px 20px 33px;
  border-radius: 28px 5px 24px 5px;
}
.rr-back-button {
  width: 42px;
  height: 42px;
  border: 1px solid #4b4b59;
  border-radius: 15px 4px 15px 4px;
  background: #17171f;
  color: var(--rr-cyan);
  font-size: 31px;
  cursor: pointer;
}
.rr-editor-title-block { min-width: 0; }
.rr-editor-title-block h2 { display: flex; align-items: center; gap: 10px; font-size: 29px; white-space: normal; }
.rr-editor-title-block h2 button { border: 0; background: transparent; color: #a7a3b6; font-size: 22px; cursor: pointer; }
.rr-editor-title-block small { color: #858294; font: 9px LCARSTerminal, Consolas, monospace; }
#reactionRoleTitleInput { max-width: 680px; margin: 5px 0; font-size: 21px; }
.rr-editor-actions { display: flex; gap: 9px; }
.rr-editor-actions button,
.rr-dialog-actions button {
  border: 1px solid #444552;
  border-radius: 15px 4px 15px 4px;
  background: #24242e;
  color: #f0edf3;
  padding: 12px 18px;
  cursor: pointer;
}
.rr-editor-actions button.primary,
.reaction-role-dialog-actions button.primary { border-color: #267f9e; background: var(--rr-cyan); color: #05080b; }
.rr-editor-actions button:disabled { opacity: .4; cursor: progress; }

.rr-editor-section { overflow: clip; }
.rr-editor-section > summary {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 15px 23px 15px 34px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(90deg, rgba(86,197,232,.055), transparent 34%);
}
.rr-editor-section > summary::-webkit-details-marker { display: none; }
.rr-editor-section > summary > div { display: flex; align-items: center; gap: 13px; }
.rr-editor-section > summary span {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 13px 4px 13px 4px;
  background: var(--rr-cyan);
  color: #04070a;
  font: 13px LCARSTerminal, Consolas, monospace;
}
.rr-editor-section > summary h3 { margin: 0; font-size: 20px; font-weight: 400; }
.rr-editor-section > summary strong { color: #aaa8b8; font: 18px LCARSTerminal, Consolas, monospace; }
.rr-editor-section > summary i { color: var(--rr-cyan); font-style: normal; transform: rotate(0); transition: transform .15s; }
.rr-editor-section:not([open]) > summary i { transform: rotate(180deg); }
.rr-section-body { display: grid; gap: 16px; padding: 24px 28px 28px; border-top: 1px solid #292936; }
.rr-section-body > h4 { margin: 0; font-size: 18px; }
.rr-section-body > p { margin: -10px 0 0; color: #858294; font: 10px/1.55 LCARSTerminal, Consolas, monospace; }
.rr-required { max-width: 680px; }
.rr-helper-copy { color: #7f7c8e !important; font: 9px/1.55 LCARSTerminal, Consolas, monospace !important; }
.rr-mode-tabs {
  width: max-content;
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 1fr));
  gap: 4px;
  border-radius: 14px 4px 14px 4px;
  background: #08080c;
  padding: 5px;
}
.rr-mode-tabs button {
  border: 0;
  border-radius: 11px 3px 11px 3px;
  background: transparent;
  color: #8d8a9d;
  padding: 11px 18px;
  cursor: pointer;
}
.rr-mode-tabs button.active { background: #343647; color: #fff; box-shadow: inset 0 0 0 1px #4b4e65; }
.rr-interaction-tabs { grid-template-columns: repeat(3, minmax(115px,1fr)); }
.rr-interaction-tabs button.active { background: var(--rr-blue); color: #05070c; }

.rr-discord-composer {
  display: grid;
  gap: 14px;
  border: 1px solid #2d2d38;
  border-radius: 18px 5px 18px 5px;
  background: #18191f;
  padding: 18px;
}
.rr-bot-identity { display: flex; align-items: center; gap: 11px; color: #f2f3f5; font-family: Arial, sans-serif; }
.rr-bot-identity > img { width: 41px; height: 41px; border-radius: 50%; object-fit: cover; }
.rr-bot-identity > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rr-bot-identity b { font-size: 14px; }
.rr-bot-identity span { border-radius: 3px; background: #5865f2; color: #fff; padding: 2px 5px; font-size: 9px; }
.rr-bot-identity small { color: #949ba4; font-size: 10px; }
.rr-basic-message textarea { min-height: 88px; background: #101116; }
.rr-character-count { justify-self: end; margin-top: -28px; padding-right: 11px; color: #656473; font: 9px LCARSTerminal, Consolas, monospace; pointer-events: none; }
.rr-format-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.rr-format-toolbar button {
  min-width: 30px;
  height: 30px;
  border: 1px solid #393a47;
  border-radius: 9px 3px 9px 3px;
  background: #23242c;
  color: #d9dbe0;
  cursor: pointer;
}
.rr-format-toolbar button:hover { border-color: var(--rr-cyan); color: var(--rr-cyan); }
.rr-embed-builder {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  border: 1px solid #343542;
  border-radius: 17px 5px 17px 5px;
  background: #111217;
  overflow: hidden;
}
.rr-color-rail { display: grid; grid-template-rows: 52px 1fr; background: #090a0e; }
.rr-color-rail input { width: 38px; height: 38px; margin: 7px; padding: 3px; border-radius: 50%; }
.rr-color-rail span { width: 7px; margin-left: 22px; background: var(--rr-embed-color); border-radius: 7px; }
.rr-embed-controls { display: grid; gap: 18px; min-width: 0; padding: 18px; }
.rr-embed-top-grid,
.rr-footer-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.48fr); align-items: end; gap: 17px; }
.rr-footer-grid { grid-template-columns: minmax(260px,.48fr) minmax(0,1fr); }
.rr-media-control { display: grid; gap: 7px; }
.rr-media-row { display: grid; grid-template-columns: 88px minmax(0,1fr) auto; align-items: center; gap: 10px; }
.rr-media-control.compact .rr-media-row { grid-template-columns: 64px minmax(0,1fr) auto; }
.rr-media-preview {
  width: 88px;
  height: 82px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px dashed #596074;
  border-radius: 14px 4px 14px 4px;
  background: #171820;
  color: #9ba0b1;
  font-size: 25px;
  cursor: pointer;
}
.rr-media-control.compact .rr-media-preview { width: 62px; height: 62px; border-radius: 50%; }
.rr-media-preview img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.rr-media-row > div { display: grid; gap: 5px; }
.rr-media-row small { color: #686777; font: 8px/1.4 LCARSTerminal, Consolas, monospace; }
.rr-media-remove,
.rr-trash {
  border: 1px solid #6f3040;
  border-radius: 12px 4px 12px 4px;
  background: #2a1018;
  color: #ff7088;
  padding: 10px;
  cursor: pointer;
}
.rr-fields-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.rr-fields-heading > div { display: grid; gap: 4px; }
.rr-fields-heading b { font-size: 16px; }
.rr-fields-heading small { color: #7b7888; font: 9px LCARSTerminal, Consolas, monospace; }
.rr-fields-heading button,
.rr-add-item {
  border: 1px solid #3b6b79;
  border-radius: 14px 4px 14px 4px;
  background: #0d2027;
  color: #8be0f6;
  padding: 10px 14px;
  cursor: pointer;
}
.rr-fields-heading button:disabled,
.rr-add-item:disabled { opacity: .35; cursor: not-allowed; }
.rr-embed-fields { display: grid; gap: 11px; }
.rr-embed-field {
  display: grid;
  grid-template-columns: 36px minmax(150px,.55fr) minmax(240px,1fr) auto auto;
  align-items: end;
  gap: 10px;
  border: 1px solid #2f303c;
  border-radius: 15px 4px 15px 4px;
  background: #0a0b0f;
  padding: 12px;
}
.rr-field-number { align-self: center; color: var(--rr-cyan); font: 11px LCARSTerminal, Consolas, monospace; }
.rr-inline-check { display: flex !important; align-items: center; gap: 6px; min-height: 44px; }
.rr-inline-check input { width: auto; accent-color: var(--rr-cyan); }

.rr-live-preview-shell {
  border: 1px solid #353642;
  border-radius: 17px 5px 17px 5px;
  background: #1b1c22;
  overflow: hidden;
}
.rr-live-preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 15px; border-bottom: 1px solid #32333d; background: #111218; }
.rr-live-preview-heading span { color: var(--rr-cyan); font: 9px LCARSTerminal, Consolas, monospace; letter-spacing: .12em; }
.rr-live-preview-heading b { font-size: 14px; }
#reactionRoleLivePreview { padding: 19px; }
.rr-discord-message-preview { display: grid; grid-template-columns: 42px minmax(0,1fr); gap: 11px; color: #dbdee1; font-family: Arial, sans-serif; }
.rr-preview-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.rr-preview-message-body { min-width: 0; }
.rr-preview-user { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rr-preview-user b { color: #f2f3f5; font-size: 14px; }
.rr-preview-user span { border-radius: 3px; background: #5865f2; color: #fff; padding: 2px 5px; font-size: 9px; }
.rr-preview-user small { color: #949ba4; font-size: 10px; }
.rr-preview-content { margin: 4px 0 7px; color: #dbdee1; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.rr-discord-embed-preview {
  position: relative;
  max-width: 560px;
  min-height: 45px;
  margin-top: 7px;
  padding: 13px 15px 14px 17px;
  overflow: hidden;
  border-radius: 4px;
  background: #2b2d31;
  color: #dbdee1;
}
.rr-discord-embed-preview::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--rr-embed-color); }
.rr-preview-author { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.rr-preview-author-icon { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.rr-discord-embed-preview h4 { margin: 0 0 7px; color: #f2f3f5; font-size: 16px; }
.rr-discord-embed-preview p { margin: 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.rr-preview-thumbnail { float: right; width: 80px; max-height: 80px; margin: 0 0 8px 16px; border-radius: 3px; object-fit: cover; }
.rr-preview-large-image { display: block; width: 100%; max-width: 520px; max-height: 320px; margin-top: 13px; border-radius: 4px; object-fit: contain; }
.rr-preview-fields { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 10px; margin-top: 12px; clear: both; }
.rr-preview-fields > div { min-width: 0; }
.rr-preview-fields .stacked { grid-column: 1 / -1; }
.rr-preview-fields .inline { grid-column: span 4; }
.rr-preview-fields b,
.rr-preview-fields span { display: block; overflow-wrap: anywhere; }
.rr-preview-fields b { color: #f2f3f5; font-size: 13px; }
.rr-preview-fields span { margin-top: 3px; font-size: 13px; }
.rr-preview-footer { display: flex; align-items: center; gap: 7px; margin-top: 13px; color: #b5bac1; font-size: 11px; }
.rr-preview-footer-icon { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.rr-preview-reactions,
.rr-preview-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.rr-preview-reactions > span { display: inline-flex; align-items: center; gap: 5px; border-radius: 8px; background: #2b2d31; padding: 5px 8px; font-size: 14px; }
.rr-preview-reactions b { color: #b5bac1; font-size: 11px; }
.rr-preview-buttons button,
.rr-button-preview,
.rr-mini-button,
.rr-style-picker button { border: 0; border-radius: 4px; font-family: Arial, sans-serif; }
.rr-preview-buttons button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; color: #fff; }
.style-blue { background: #5865f2 !important; color: #fff !important; }
.style-grey { background: #4e5058 !important; color: #fff !important; }
.style-green { background: #248046 !important; color: #fff !important; }
.style-red { background: #da373c !important; color: #fff !important; }
.style-orange { background: #d77a20 !important; color: #fff !important; }
.rr-preview-select { max-width: 420px; display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; border: 1px solid #1e1f22; border-radius: 3px; background: #111214; color: #b5bac1; padding: 11px 13px; }
.rr-preview-options { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rr-preview-options span { display: inline-flex; align-items: center; gap: 5px; border-radius: 5px; background: #24262d; padding: 5px 8px; font-size: 11px; }
.rr-preview-no-components { margin-top: 9px; color: #777a82; font-size: 11px; }

.rr-multiple-toggle {
  display: grid !important;
  grid-template-columns: 68px minmax(0,1fr);
  align-items: center;
  gap: 14px;
  color: #e8e6ec !important;
  cursor: pointer;
}
.rr-multiple-toggle input { position: absolute; opacity: 0; }
.rr-multiple-toggle span { display: grid; gap: 4px; }
.rr-multiple-toggle b { font-size: 15px; }
.rr-multiple-toggle small { color: #7e7c8b; font: 9px/1.45 LCARSTerminal, Consolas, monospace; }
.rr-dropdown-placeholder { max-width: 650px; margin-top: 4px; }
.rr-item-list { display: grid; gap: 10px; }
.rr-item-row {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(190px,.6fr) minmax(230px,1fr) 42px 35px 35px 45px;
  align-items: center;
  gap: 8px;
  border: 1px solid #30313d;
  border-radius: 15px 4px 15px 4px;
  background: #0a0b10;
  padding: 10px;
}
.rr-item-row.selected { border-color: var(--rr-blue); box-shadow: 0 0 0 2px rgba(78,161,255,.15); }
.rr-item-row.dragging { opacity: .42; }
.rr-drag-handle,
.rr-order-button,
.rr-role-create {
  border: 1px solid #3b3c49;
  border-radius: 10px 3px 10px 3px;
  background: #1a1b23;
  color: #a6a4b2;
  height: 38px;
  cursor: grab;
}
.rr-order-button,
.rr-role-create { cursor: pointer; }
.rr-role-create { color: var(--rr-cyan); font-size: 20px; }
.rr-emoji-selector,
.rr-button-preview,
.rr-dropdown-option-preview {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #383946;
  border-radius: 12px 4px 12px 4px;
  background: #17181f;
  color: #ebe9ef;
  padding: 9px 12px;
  text-align: left;
  cursor: pointer;
}
.rr-emoji-selector span:last-child { color: #aaa7b8; font: 10px LCARSTerminal, Consolas, monospace; }
.rr-button-preview { justify-content: center; border: 0; font-family: Arial, sans-serif; }
.rr-dropdown-option-preview > div { display: grid; gap: 3px; }
.rr-dropdown-option-preview b { font-size: 14px; }
.rr-dropdown-option-preview small { color: #858391; font: 9px LCARSTerminal, Consolas, monospace; }
.rr-role-select { min-width: 0; }
.rr-role-select span { color: #747281; font-size: 8px; }
.rr-role-select select { padding: 10px 12px; }
.rr-assigned-role { position: absolute; left: 52px; bottom: -8px; border-radius: 9px; background: #13141a; color: var(--rr-role-color); padding: 2px 7px; font: 8px LCARSTerminal, Consolas, monospace; }
.rr-add-item { width: 100%; min-height: 54px; border-style: dashed; font-size: 14px; }
.rr-item-editor {
  display: grid;
  gap: 17px;
  border-left: 5px solid var(--rr-blue);
  border-radius: 4px 16px 4px 16px;
  background: #101117;
  padding: 18px;
}
.rr-item-editor-title { display: grid; gap: 4px; }
.rr-item-editor-title span { color: var(--rr-blue); font: 9px LCARSTerminal, Consolas, monospace; letter-spacing: .14em; }
.rr-item-editor-title b { font-size: 17px; }
.rr-button-editor-grid,
.rr-option-editor-grid { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 14px; }
.rr-option-editor-grid .wide { grid-column: 1 / -1; }
.rr-large-emoji-choice {
  width: 72px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid #414353;
  border-radius: 14px 4px 14px 4px;
  background: #1b1c24;
  cursor: pointer;
}
.rr-style-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rr-style-picker > span { width: 100%; color: #858292; font: 9px LCARSTerminal, Consolas, monospace; }
.rr-style-picker button { min-width: 82px; padding: 9px 12px; opacity: .68; cursor: pointer; }
.rr-style-picker button.active { opacity: 1; box-shadow: 0 0 0 2px #fff; }
.rr-reaction-mode-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
.rr-reaction-mode-options label {
  display: grid !important;
  grid-template-columns: 26px minmax(0,1fr);
  align-items: start;
  gap: 10px;
  border: 1px solid #30313d;
  border-radius: 15px 4px 15px 4px;
  background: #0e0f14;
  padding: 16px;
  color: #eeeaf2 !important;
  cursor: pointer;
}
.rr-reaction-mode-options input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--rr-blue); }
.rr-reaction-mode-options span { display: grid; gap: 7px; }
.rr-reaction-mode-options b { font-size: 16px; }
.rr-reaction-mode-options small { color: #8b8997; font: 9px/1.55 LCARSTerminal, Consolas, monospace; }

.rr-unicode-emoji { font-size: 25px; line-height: 1; }
.rr-unicode-emoji.compact { font-size: 16px; }
.rr-custom-emoji { width: 30px; height: 30px; object-fit: contain; }
.rr-custom-emoji.compact { width: 18px; height: 18px; }
.rr-empty-emoji { color: #92909f; font-size: 20px; }
.reaction-role-popover {
  position: fixed;
  z-index: 500;
  width: min(380px, calc(100vw - 24px));
  max-height: min(450px, calc(100vh - 24px));
  overflow: auto;
  border: 1px solid #494b5c;
  border-radius: 18px 5px 18px 5px;
  background: #11121a;
  box-shadow: 0 22px 60px rgba(0,0,0,.62);
  padding: 13px;
}
.rr-popover-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 2px 2px 10px; }
.rr-popover-head b { color: #fff; font-size: 17px; }
.rr-popover-head button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: #2b2c36; color: #fff; cursor: pointer; }
.rr-emoji-search { margin-bottom: 11px; }
.rr-emoji-group { display: grid; gap: 7px; margin-top: 10px; }
.rr-emoji-group > span { color: var(--rr-cyan); font: 8px LCARSTerminal, Consolas, monospace; letter-spacing: .12em; }
.rr-emoji-group > div { display: grid; grid-template-columns: repeat(8,1fr); gap: 4px; }
.rr-emoji-group button { min-width: 0; min-height: 37px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: #1d1e27; color: #fff; font-size: 21px; cursor: pointer; }
.rr-emoji-group button:hover { border-color: var(--rr-cyan); background: #292b38; }
.rr-standard-emoji-groups { display: grid; gap: 4px; }
.rr-custom-unicode-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 8px; margin: 10px 0 12px; padding: 10px; border: 1px solid #343746; border-radius: 10px; background: #111219; }
.rr-custom-unicode-row label { display: grid; gap: 6px; color: var(--rr-cyan); font: 8px LCARSTerminal, Consolas, monospace; letter-spacing: .08em; }
.rr-custom-unicode-row input { min-width: 0; color: #fff; font-size: 16px; }
.rr-custom-unicode-row button { min-height: 39px; padding: 0 13px; color: #090a0f; border-color: #56c5e8; background: #56c5e8; font-weight: 800; }
.rr-title-editor { display: grid; grid-template-columns: minmax(220px,560px) 42px 42px; gap: 7px; align-items: center; }
.rr-title-editor input { min-width: 0; font-size: clamp(24px,3vw,40px); text-transform: uppercase; }
.rr-title-editor button { min-height: 42px; padding: 0; color: #08080d; border-color: #56c5e8; background: #56c5e8; font-size: 20px; }
.rr-title-editor button[data-rr-title-cancel] { color: #fff; border-color: #5d4351; background: #2b1c25; }

.billing-page { display: grid; gap: 22px; }
.billing-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 28px; align-items: center; overflow: hidden; border-left: 9px solid #56c5e8; background: linear-gradient(120deg,#111b25 0%,#0d0d15 58%,#181221 100%); }
.billing-hero > div:first-child > span,.billing-summary-card > span { color: #56c5e8; font: 10px LCARSTerminal,Consolas,monospace; letter-spacing: .18em; }
.billing-hero h2 { margin: 10px 0 8px; font-size: clamp(34px,5vw,58px); text-transform: uppercase; }
.billing-hero p { max-width: 850px; color: #b5b5c9; font-size: 16px; line-height: 1.55; }
.billing-development-badge { min-width: 235px; padding: 18px 22px; border: 2px solid #ff9c00; border-radius: 40px 5px 40px 5px; background: #221708; text-align: center; box-shadow: 0 0 26px #ff9c0030; }
.billing-development-badge b,.billing-development-badge span { display: block; }
.billing-development-badge b { color: #ffb128; font-size: 17px; letter-spacing: .08em; }
.billing-development-badge span { margin-top: 5px; color: #fff; font: 9px LCARSTerminal,Consolas,monospace; letter-spacing: .12em; }
.billing-summary-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.billing-summary-card { display: grid; gap: 9px; min-height: 138px; align-content: center; }
.billing-summary-card strong { font-size: 25px; text-transform: uppercase; }
.billing-summary-card small { color: #a5a5ba; line-height: 1.35; }
.billing-plan-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 20px; }
.billing-plan-grid article { padding: 24px; border: 1px solid #343746; border-radius: 18px 4px 18px 4px; background: #111219; }
.billing-plan-grid article.future { border-color: #79642d; background: linear-gradient(140deg,#18160d,#111219); }
.billing-plan-grid article > span,.billing-not-live-pill { color: #ffb128; font: 9px LCARSTerminal,Consolas,monospace; letter-spacing: .15em; text-transform: uppercase; }
.billing-plan-grid h3 { margin: 9px 0; font-size: 25px; }
.billing-plan-grid article > b { display: block; color: #56c5e8; font-size: 20px; }
.billing-plan-grid p,.billing-plan-grid li { color: #b2b2c6; line-height: 1.5; }
.billing-plan-grid ul { padding-left: 20px; }
.billing-action-row { display: flex; gap: 12px; justify-content: flex-end; margin-top: 18px; }
.billing-action-row button:disabled,.billing-history-card button:disabled { opacity: .62; cursor: not-allowed; }
.billing-provider-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.billing-provider-grid article { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px; border: 1px solid #343746; border-radius: 14px; background: #0b0c12; }
.billing-provider-grid article div { display: grid; gap: 6px; }
.billing-provider-grid article b { font-size: 19px; }
.billing-provider-grid article span { color: #a7a7bc; line-height: 1.35; }
.billing-provider-grid article strong { flex: 0 0 auto; color: #ff8c8c; font: 9px LCARSTerminal,Consolas,monospace; letter-spacing: .12em; }
.billing-safety-note { margin: 16px 0 0; padding: 14px 16px; border-left: 4px solid #ff9c00; color: #c8c8d8; background: #17130c; line-height: 1.45; }
.billing-history-head { display: grid; grid-template-columns: 1fr 2fr 1fr 1fr 1fr; gap: 12px; margin-top: 18px; padding: 0 18px 10px; color: #8f90a8; font: 9px LCARSTerminal,Consolas,monospace; letter-spacing: .1em; text-transform: uppercase; }
.billing-empty-history { display: grid; gap: 8px; padding: 30px; border: 1px dashed #3c3e4d; border-radius: 14px; text-align: center; }
.billing-empty-history b { font-size: 20px; }
.billing-empty-history span { color: #a3a3b8; }
.billing-checklist { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 18px; }
.billing-checklist label { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; padding: 16px; border: 1px solid #2f313e; border-radius: 12px; color: #c7c7d7; background: #101117; line-height: 1.4; }
.billing-checklist input { margin-top: 3px; }
.rr-custom-emoji-group > div { grid-template-columns: repeat(4,1fr); }
.rr-custom-emoji-group button { min-height: 68px; grid-template-rows: 34px auto; font-size: 12px; }
.rr-custom-emoji-group img { width: 32px; height: 32px; object-fit: contain; }
.rr-custom-emoji-group small { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.rr-custom-emoji-group p { grid-column: 1 / -1; color: #757382; font: 9px LCARSTerminal, Consolas, monospace; }
.rr-popover-note { color: #706e7d; font: 8px/1.45 LCARSTerminal, Consolas, monospace; }

.reaction-role-dialog-backdrop {
  position: fixed;
  z-index: 600;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.72);
  padding: 20px;
}
.reaction-role-dialog {
  width: min(560px,100%);
  overflow: hidden;
  border: 1px solid #4d4f60;
  border-radius: 23px 5px 23px 5px;
  background: #12131a;
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
  padding: 0 23px 23px;
}
.reaction-role-dialog-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 -23px 20px;
  padding: 11px 13px 11px 23px;
  background: var(--rr-cyan, #56c5e8);
  color: #05070a;
  font: 9px LCARSTerminal, Consolas, monospace;
  letter-spacing: .12em;
}
.reaction-role-dialog-bar button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #11131a; color: #fff; font-size: 20px; cursor: pointer; }
.reaction-role-dialog h2 { margin: 0 0 6px; font-weight: 400; text-transform: uppercase; }
.reaction-role-dialog p { color: #8a8797; font: 9px/1.55 LCARSTerminal, Consolas, monospace; }
.reaction-role-dialog label { margin-top: 14px; }
.reaction-role-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 21px; }

@media (max-width: 1240px) {
  .rr-record { grid-template-columns: minmax(0,1fr) 110px 160px 48px; }
  .rr-item-row { grid-template-columns: 32px minmax(170px,.7fr) minmax(190px,1fr) 40px 34px 34px 42px; }
  .rr-embed-top-grid,
  .rr-footer-grid { grid-template-columns: 1fr; }
  .rr-media-control.compact .rr-media-row { grid-template-columns: 72px minmax(0,1fr) auto; }
}

@media (max-width: 960px) {
  .rr-command-header { grid-template-columns: 1fr; }
  .rr-master-power { justify-self: stretch; justify-content: space-between; }
  .rr-master-power > span { text-align: left; }
  .rr-record { grid-template-columns: minmax(0,1fr) auto auto; }
  .rr-record-main { grid-column: 1 / -1; }
  .rr-record-status { grid-column: 1; }
  .rr-editor-command-header { grid-template-columns: 44px minmax(0,1fr); }
  .rr-editor-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .rr-item-row,
  .rr-item-row.dropdown { grid-template-columns: 34px minmax(0,1fr) 42px 38px 38px 42px; }
  .rr-item-row > .rr-role-select { grid-column: 2 / span 4; }
  .rr-embed-field { grid-template-columns: 34px 1fr auto; }
  .rr-embed-field > label:nth-of-type(1),
  .rr-embed-field > label:nth-of-type(2) { grid-column: 2 / -1; }
  .rr-reaction-mode-options { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .rr-page { gap: 15px; }
  .rr-command-header { padding: 26px 16px 23px 30px; border-radius: 26px 4px 22px 4px; }
  .rr-command-header h2 { font-size: 31px; }
  .rr-library-card { padding: 0 12px 18px; }
  .rr-section-header { margin: 0 -12px 16px; padding-left: 27px; padding-right: 13px; }
  .rr-create-tile { grid-template-columns: 44px minmax(0,1fr); padding: 11px; }
  .rr-create-tile > span { width: 42px; height: 42px; }
  .rr-create-tile > i { display: none; }
  .rr-record { grid-template-columns: minmax(0,1fr) 45px; padding: 13px; }
  .rr-record-main { grid-column: 1 / -1; }
  .rr-record-status { grid-column: 1; }
  .rr-record time { grid-column: 1; }
  .rr-record-menu-wrap { grid-column: 2; grid-row: 2 / span 2; }
  .rr-editor-command-header { padding: 18px 13px 18px 27px; }
  .rr-editor-title-block h2 { font-size: 23px; }
  .rr-editor-actions { display: grid; grid-template-columns: repeat(3,1fr); }
  .rr-editor-actions button { padding: 10px 8px; }
  .rr-editor-section > summary { padding: 13px 12px 13px 20px; }
  .rr-editor-section > summary h3 { font-size: 16px; }
  .rr-section-body { padding: 18px 12px 20px; }
  .rr-mode-tabs { width: 100%; }
  .rr-interaction-tabs { grid-template-columns: 1fr; }
  .rr-discord-composer { padding: 12px; }
  .rr-embed-builder { grid-template-columns: 38px minmax(0,1fr); }
  .rr-color-rail input { width: 30px; height: 30px; margin: 4px; }
  .rr-color-rail span { width: 5px; margin-left: 17px; }
  .rr-embed-controls { padding: 12px 9px; }
  .rr-media-row,
  .rr-media-control.compact .rr-media-row { grid-template-columns: 62px minmax(0,1fr); }
  .rr-media-preview,
  .rr-media-control.compact .rr-media-preview { width: 60px; height: 60px; }
  .rr-media-remove { grid-column: 2; justify-self: end; }
  .rr-embed-field { grid-template-columns: 28px minmax(0,1fr) auto; }
  #reactionRoleLivePreview { padding: 13px 8px; }
  .rr-discord-message-preview { grid-template-columns: 32px minmax(0,1fr); gap: 7px; }
  .rr-preview-avatar { width: 32px; height: 32px; }
  .rr-preview-fields .inline { grid-column: 1 / -1; }
  .rr-multiple-toggle { grid-template-columns: 60px minmax(0,1fr); }
  .rr-master-power i,
  .rr-multiple-toggle i { width: 60px; }
  .rr-master-power input:checked + i::after,
  .rr-multiple-toggle input:checked + i::after { transform: translateX(26px); }
  .rr-item-row,
  .rr-item-row.dropdown { grid-template-columns: 30px minmax(0,1fr) 38px 37px; }
  .rr-item-row > .rr-role-select { grid-column: 2 / -1; }
  .rr-order-button { display: none; }
  .rr-trash { grid-column: 4; grid-row: 1; }
  .rr-role-create { grid-column: 3; }
  .rr-button-editor-grid,
  .rr-option-editor-grid { grid-template-columns: 1fr; }
  .rr-option-editor-grid .wide { grid-column: 1; }
  .rr-emoji-group > div { grid-template-columns: repeat(6,1fr); }
  .rr-custom-emoji-group > div { grid-template-columns: repeat(3,1fr); }
}


/* Computer Language control surface */
.language-picker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.language-picker select {
  min-width: 108px;
}

.language-page { display: grid; gap: 18px; }
.language-command-card, .language-library-card, .language-editor { overflow: hidden; }
.language-command-head, .language-library-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.language-command-head span, .language-library-head span, .language-rule-copy small { letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.language-command-head h2, .language-library-head h2 { margin: 4px 0 6px; }
.language-command-head p { max-width: 760px; margin: 0; }
.language-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.language-metric { min-height: 82px; text-align: left; border-radius: 10px; padding: 14px 16px; }
.language-metric b { display: block; font-size: 1.7rem; }
.language-metric span { display: block; margin-top: 5px; font-size: .75rem; letter-spacing: .13em; }
.language-metric.active { outline: 2px solid currentColor; }
.language-toolbar { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.language-toolbar span { opacity: .72; font-size: .86rem; }
.language-rule-list { display: grid; gap: 12px; margin-top: 14px; }
.language-rule { border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 14px; background: rgba(0,0,0,.14); }
.language-rule-head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 10px; }
.language-rule-head small { margin-left: auto; opacity: .68; }
.language-status { border-radius: 999px; padding: 4px 9px; font-size: .68rem; letter-spacing: .08em; }
.status-pending { background: rgba(255, 156, 0, .2); }
.status-approved { background: rgba(80, 210, 140, .18); }
.status-rejected { background: rgba(230, 90, 90, .18); }
.language-rule-copy { margin-top: 10px; }
.language-rule-copy p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.language-rule-meta { margin-top: 10px; font-size: .78rem; opacity: .62; }
.language-rule-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.language-editor textarea { min-height: 94px; }
@media (max-width: 760px) {
  .language-command-head, .language-library-head, .language-toolbar { align-items: stretch; flex-direction: column; }
  .language-metrics { grid-template-columns: 1fr; }
  .language-rule-head small { margin-left: 0; width: 100%; }
}

/* Dashboard guild availability */
.guild-install-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 24px;
  border-left: 12px solid var(--orange);
}
.guild-install-notice span,
.embed-page-head > div > span {
  color: var(--orange);
  font: 11px LCARSTerminal, Consolas, monospace;
  letter-spacing: .16em;
}
.guild-install-notice h2 { margin: 5px 0 8px; }
.guild-install-notice p { margin: 0; color: var(--muted); }
.guild-install-notice a.primary {
  flex: 0 0 auto;
  padding: 12px 18px;
  border-radius: 22px;
  background: var(--orange);
  color: #070708;
  text-decoration: none;
}

/* Full dashboard embed builder */
.embed-page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 22px;
  border-left: 12px solid var(--blue);
}
.embed-page-head h2 { margin: 5px 0 6px; font-size: 32px; }
.embed-page-head p { margin: 0; max-width: 900px; color: var(--muted); font-family: LCARSTerminal, Consolas, monospace; }
.embed-page-head > button { flex: 0 0 auto; }
.embed-total-meter {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid #2b2b38;
  border-radius: 10px;
  background: #08080b;
  font: 12px LCARSTerminal, Consolas, monospace;
}
.embed-total-meter .over-limit { color: #ff6b71; }
.embed-button-row {
  display: grid;
  grid-template-columns: minmax(110px,.55fr) minmax(150px,1fr) minmax(100px,.6fr) minmax(170px,1.4fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #292934;
  border-radius: 12px;
  background: #0b0b0f;
}
.embed-button-row label { margin: 0; }
.embed-button-row .embed-button-wide { min-width: 0; }
.embed-button-row > button {
  padding: 9px 13px;
  border: 1px solid #633;
  border-radius: 18px;
  background: #10090a;
  color: #ff9ca0;
}
.embed-publish-box {
  display: grid;
  grid-template-columns: minmax(220px,1fr) minmax(220px,1fr) auto auto;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
  padding: 16px;
  border: 1px solid #343441;
  border-radius: 14px;
  background: #08080c;
}
.embed-publish-box > div { display: grid; gap: 4px; }
.embed-publish-box > div span { color: var(--muted); font: 11px LCARSTerminal, Consolas, monospace; }
.embed-publish-box code { color: var(--blue); }
.embed-preview-thumbnail {
  float: right;
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin: 0 0 12px 16px;
  border-radius: 5px;
}
.embed-preview-image {
  display: block;
  max-width: 100%;
  max-height: 420px;
  margin-top: 16px;
  border-radius: 4px;
  object-fit: contain;
}
.discord-buttons-preview { display: flex; flex-wrap: wrap; gap: 8px; clear: both; margin-top: 16px; }
.discord-button { display: inline-block; padding: 8px 12px; border-radius: 4px; background: #4e5058; color: #fff; font: 13px Arial, sans-serif; }
.discord-button.style-link { background: #4e5058; }
.discord-button.style-primary { background: #5865f2; }
.discord-button.style-success { background: #248046; }
.discord-button.style-danger { background: #da373c; }
.discord-field.full { grid-column: 1 / -1; }
.embed-field textarea { min-height: 70px; }

@media (max-width: 1100px) {
  .embed-layout { grid-template-columns: 1fr; }
  .embed-button-row { grid-template-columns: 1fr 1fr; }
  .embed-button-row > button { grid-column: 1 / -1; }
  .embed-publish-box { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .guild-install-notice, .embed-page-head { align-items: stretch; flex-direction: column; }
  .embed-button-row, .embed-publish-box { grid-template-columns: 1fr; }
}

/* ============================================================
   R22 dashboard density + library-first administration surfaces
   ============================================================ */

/* Welcome / Goodbye: preserve the LCARS language, reduce wasted height. */
#panel-welcome-goodbye .welcome-page { gap: 15px; }
#panel-welcome-goodbye .welcome-control-card { padding: 0 22px 20px; border-radius: 25px 7px 22px 7px; }
#panel-welcome-goodbye .welcome-section-heading { min-height: 68px; margin: 0 -22px; padding: 13px 22px 12px 34px; gap: 18px; }
#panel-welcome-goodbye .welcome-section-heading::before { width: 11px; }
#panel-welcome-goodbye .welcome-section-heading::after { left: 11px; height: 7px; }
#panel-welcome-goodbye .welcome-section-heading h2 { font-size: 21px; }
#panel-welcome-goodbye .welcome-collapsible { padding-top: 17px; }
#panel-welcome-goodbye .welcome-divider { height: 5px; margin-bottom: 16px; }
#panel-welcome-goodbye .welcome-section-note { margin-bottom: 13px; line-height: 1.45; }
#panel-welcome-goodbye .message-composer { gap: 13px; }
#panel-welcome-goodbye .message-mode-panel { gap: 11px; }
#panel-welcome-goodbye .message-mode-tabs button { min-height: 39px; }
#panel-welcome-goodbye .embed-composer { padding: 13px 0 0 15px; }
#panel-welcome-goodbye .embed-form-grid { gap: 14px; }
#panel-welcome-goodbye .media-control { padding: 10px; gap: 7px; }
#panel-welcome-goodbye .media-control-preview { min-height: 82px; }
#panel-welcome-goodbye .media-control-preview img { max-height: 165px; }
#panel-welcome-goodbye .welcome-card-layout { grid-template-columns: minmax(430px,1.15fr) minmax(300px,.85fr); gap: 18px; }
#panel-welcome-goodbye .welcome-card-preview { min-height: 280px; grid-template-columns: 118px minmax(0,1fr); padding: 27px 31px; gap: 20px; }
#panel-welcome-goodbye .welcome-card-avatar { width: 118px; height: 118px; }
#panel-welcome-goodbye .welcome-card-controls { gap: 11px; }

.compact-card,
.studio-library-card,
.studio-editor,
.moderation-command-card,
.studio-command-card,
.embed-library-card {
  overflow: hidden;
}
.compact-card-head,
.studio-command-head,
.embed-editor-command,
.embed-library-toolbar,
.embed-emoji-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.compact-card-head > div > span,
.studio-command-head > div > span,
.embed-editor-command > div > span {
  display: block;
  color: var(--orange);
  font: 9px LCARSTerminal, Consolas, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.compact-card-head h2,
.studio-command-head h2,
.embed-editor-command h2 { margin: 3px 0 5px; font-weight: 400; text-transform: uppercase; }
.compact-card-head button,
.studio-library-actions button,
.embed-editor-command button,
.embed-emoji-toolbar button,
.calendar-link-row a {
  border: 1px solid #5b4850;
  border-radius: 18px 5px 18px 5px;
  background: #0d0d12;
  color: #ffc467;
  padding: 9px 14px;
  text-decoration: none;
  cursor: pointer;
}
.compact-card-head .primary,
.studio-library-actions .primary { background: var(--orange); color: #070708; }

.compact-record-list { display: grid; gap: 8px; margin-top: 13px; }
.compact-record {
  min-height: 62px;
  display: grid;
  grid-template-columns: 104px minmax(0,1fr) auto auto;
  align-items: center;
  gap: 13px;
  padding: 10px 12px;
  border: 1px solid #2c2c37;
  border-radius: 15px 5px 15px 5px;
  background: linear-gradient(90deg, rgba(255,255,255,.025), rgba(255,255,255,.006));
}
.compact-record:hover { border-color: #4a4758; background: #111118; }
.compact-record-status {
  display: inline-flex;
  justify-content: center;
  min-width: 88px;
  padding: 6px 9px;
  border-radius: 14px 4px 14px 4px;
  background: #191922;
  color: #c5c1d0;
  font: 9px LCARSTerminal, Consolas, monospace;
  letter-spacing: .1em;
}
.compact-record-status.status-published,
.compact-record-status.status-active,
.compact-record-status.status-enabled { color: #7af2b7; border: 1px solid #275d47; background: #091a14; }
.compact-record-status.status-saved,
.compact-record-status.status-scheduled,
.compact-record-status.status-annual { color: #8ed2ff; border: 1px solid #2e5670; background: #09151e; }
.compact-record-status.status-draft,
.compact-record-status.status-paused { color: #ffc467; border: 1px solid #654a18; background: #1b1408; }
.compact-record-main { min-width: 0; display: grid; gap: 2px; }
.compact-record-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f4f1f8; }
.compact-record-main span,
.compact-record-main small,
.compact-record time { color: #858191; font: 10px/1.35 LCARSTerminal, Consolas, monospace; }
.compact-record-actions { display: flex; gap: 6px; }
.compact-record-actions button {
  border: 1px solid #3c3948;
  border-radius: 14px 4px 14px 4px;
  background: #0d0d12;
  color: #bbb6c8;
  padding: 7px 10px;
  cursor: pointer;
}
.compact-record-actions button:hover { border-color: var(--orange); color: #fff; }

/* Statistics Channels: LCARS creates compact locked voice-channel readouts. */
.statistics-placement { margin: 14px 0; }
.statistics-counter-row {
  margin: 10px 0;
  padding: 13px;
  border: 1px solid #302e3b;
  border-radius: 15px 5px 15px 5px;
  background: linear-gradient(90deg, rgba(255,255,255,.025), rgba(255,255,255,.008));
}
.statistics-counter-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.statistics-counter-head > div { display: grid; gap: 2px; }
.statistics-counter-head b { color: #f3f0f8; }
.statistics-counter-head small { color: #8d899a; font: 10px/1.35 LCARSTerminal, Consolas, monospace; }
.statistics-counter-head .lcars-danger-button { min-height: 32px; padding: 6px 10px; white-space: nowrap; }
.statistics-preview output {
  display: block;
  min-height: 42px;
  margin-top: 6px;
  padding: 11px 12px;
  border: 1px solid #34445d;
  border-radius: 8px;
  background: #0b101a;
  color: #d8e5ff;
  font: 13px/1.35 LCARSTerminal, Consolas, monospace;
}
[data-stat-role-wrap][hidden] { display: none; }
@media (max-width: 720px) {
  .statistics-counter-head { align-items: flex-start; flex-direction: column; }
}

/* Embed library */
.embed-layout { display: block; }
.embed-library-toolbar > div { display: grid; gap: 2px; }
.embed-library-toolbar > div b { font-size: 20px; font-weight: 400; text-transform: uppercase; }
.embed-library-toolbar > div span { color: var(--blue); font: 10px LCARSTerminal, Consolas, monospace; }
.embed-library-toolbar label { width: min(360px, 48%); margin: 0; }
.embed-editor-drawer { margin-top: 18px; border-left: 9px solid var(--orange); }
.embed-editor-command { margin-bottom: 17px; padding-bottom: 13px; border-bottom: 1px solid #302f39; }
.embed-emoji-toolbar { margin: 9px 0 11px; padding: 10px 12px; border: 1px solid #302e3a; border-radius: 16px 5px 16px 5px; background: #08080c; }
.embed-emoji-toolbar > div { display: grid; gap: 2px; min-width: 230px; }
.embed-emoji-toolbar > div span { color: #817d8b; font: 9px LCARSTerminal, Consolas, monospace; }
.embed-emoji-toolbar input { flex: 1 1 250px; }
.embed-emoji-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 7px;
  max-height: 245px;
  overflow: auto;
  padding: 10px;
  margin-bottom: 14px;
  border: 1px solid #302f3c;
  border-radius: 16px 5px 16px 5px;
  background: #07070b;
}
.embed-emoji-choice { min-height: 48px; display: grid; place-items: center; gap: 4px; border: 1px solid #292733; border-radius: 11px 4px 11px 4px; background: #111018; color: #d7d2df; cursor: pointer; }
.embed-emoji-choice img { width: 28px; height: 28px; object-fit: contain; }
.embed-emoji-choice span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font: 8px LCARSTerminal, Consolas, monospace; }
.embed-emoji-choice.standard { font-size: 24px; }
.discord-custom-emoji { display: inline-block; width: 1.35em; height: 1.35em; object-fit: contain; vertical-align: -.3em; }

/* Moderation studio */
.moderation-studio,
.feature-studio,
.alert-studio { display: grid; gap: 16px; }
.moderation-command-card,
.studio-command-card { border-left: 11px solid var(--orange); }
.studio-command-head { align-items: flex-start; }
.studio-command-head > div { min-width: 0; }
.studio-command-head p { max-width: 900px; margin: 0; color: #9b97a6; font: 11px/1.55 LCARSTerminal, Consolas, monospace; }
.moderation-command-card .metrics { min-width: min(480px, 46%); }
.moderation-tabs { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 16px; padding-top: 13px; border-top: 1px solid #2b2935; }
.moderation-tabs button { border: 1px solid #393643; border-radius: 16px 4px 16px 4px; background: #0c0c11; color: #8f8a9a; padding: 9px 13px; cursor: pointer; }
.moderation-tabs button.active { background: var(--orange); border-color: var(--orange); color: #09090b; }
.moderation-tab-panel { display: none; gap: 16px; }
.moderation-tab-panel.active { display: grid; }
.compact-editor { border-left: 8px solid var(--orange); }
.moderation-rule-grid { margin-top: 12px; }
.match-mode-visual { display: grid; grid-template-columns: auto 1fr 1fr; gap: 10px; align-items: center; margin: 12px 0; padding: 11px 13px; border: 1px solid #35313f; border-radius: 15px 5px 15px 5px; background: #09090e; }
.match-mode-visual b { color: var(--orange); }
.match-mode-visual span { color: #9b96a7; font: 10px LCARSTerminal, Consolas, monospace; }
.rate-window-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; }
.filter-control-card > label { margin-top: 13px; }
.preview-only-pill { flex: 0 0 auto; align-self: flex-start; border: 1px solid #665323; border-radius: 14px 4px 14px 4px; padding: 6px 9px; color: #ffc467; background: #191307; font: 8px LCARSTerminal, Consolas, monospace; text-transform: uppercase; letter-spacing: .08em; }
.preview-only-pill.live { color: #7af2b7; border-color: #285d47; background: #081912; }
.event-toggle-grid { margin-top: 11px; }
.planned-toggle small { display: block; opacity: .55; font-size: 8px; }

/* Generic list-first feature studios */
.studio-library-actions { display: flex; align-items: center; gap: 10px; }
.studio-library-actions > span { color: #858190; font: 9px LCARSTerminal, Consolas, monospace; }
.studio-form-grid { display: grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap: 12px; margin-top: 13px; }
.studio-form-grid .studio-wide { grid-column: 1 / -1; }
.studio-form-grid textarea { min-height: 100px; }
.calendar-link-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.calendar-link-row a:first-child { border-color: #315d75; color: #8ed2ff; }
.calendar-link-row a:last-child { border-color: #5c4e24; color: #ffd16f; }

@media (max-width: 1050px) {
  .compact-record { grid-template-columns: 100px minmax(0,1fr) auto; }
  .compact-record time { display: none; }
  .rate-window-grid { grid-template-columns: repeat(2, minmax(150px,1fr)); }
  .moderation-command-card .studio-command-head { display: grid; }
  .moderation-command-card .metrics { min-width: 0; width: 100%; }
  #panel-welcome-goodbye .welcome-card-layout { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .compact-record { grid-template-columns: 1fr; }
  .compact-record-status { justify-self: start; }
  .compact-record-actions { justify-content: flex-start; flex-wrap: wrap; }
  .compact-card-head,
  .studio-command-head,
  .embed-editor-command,
  .embed-library-toolbar,
  .embed-emoji-toolbar { align-items: stretch; flex-direction: column; }
  .embed-library-toolbar label { width: 100%; }
  .rate-window-grid,
  .studio-form-grid { grid-template-columns: 1fr; }
  .match-mode-visual { grid-template-columns: 1fr; }
  #panel-welcome-goodbye .welcome-card-preview { min-height: 235px; grid-template-columns: 90px minmax(0,1fr); padding: 20px; }
}

/* ============================================================
   R23 polish: consistent dark form controls + compact studios
   ============================================================ */

/* app.css historically styled inputs/selects but not generic textareas. Keep
   every editable LCARS surface dark and legible. */
textarea,
.studio-editor textarea,
.compact-card textarea,
.moderation-studio textarea,
.feature-studio textarea,
.alert-studio textarea {
  width: 100%;
  margin-top: 8px;
  background: #050507;
  border: 1px solid #2b2a36;
  border-radius: 10px;
  color: #f6f4ef;
  padding: 13px 15px;
  font: 15px/1.45 LCARSTerminal, Consolas, monospace;
  caret-color: var(--orange);
  resize: vertical;
}
textarea:focus,
.studio-editor input:focus,
.studio-editor select:focus,
.moderation-studio input:focus,
.moderation-studio select:focus,
.feature-studio input:focus,
.feature-studio select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(255,157,0,.12);
}
textarea::placeholder { color: #666371; }

.studio-wide { grid-column: 1 / -1; }
.studio-wide > input { width: 100%; }
.studio-form-grid label { align-self: start; }
.studio-form-grid label > input,
.studio-form-grid label > select,
.studio-form-grid label > textarea { display: block; }

.giveaway-embed-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #302d39;
  border-left: 7px solid var(--red);
  border-radius: 17px 5px 17px 5px;
  background: #08080d;
}
.giveaway-embed-grid { display: grid; grid-template-columns: repeat(2,minmax(220px,1fr)); gap: 12px; }
.giveaway-post-preview,
.event-post-preview {
  grid-column: 1 / -1;
  padding: 14px;
  border: 1px solid #292833;
  border-radius: 15px 5px 15px 5px;
  background: #07070b;
}
.discord-post-shell { max-width: 780px; color: #dbdee1; font: 14px Arial,sans-serif; }
.discord-post-embed { border-left: 4px solid var(--preview-accent,var(--orange)); border-radius: 4px; background: #2b2d31; padding: 13px 15px; }
.discord-post-embed h3 { margin: 0 0 8px; color: #f2f3f5; font-size: 16px; }
.discord-post-embed p { margin: 6px 0; white-space: pre-wrap; line-height: 1.4; }
.discord-post-embed .post-footer { color: #b5bac1; font-size: 12px; margin-top: 10px; }
.discord-post-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.discord-post-actions span { padding: 7px 11px; border-radius: 4px; background: #4e5058; color: #fff; font: 13px Arial,sans-serif; }
.discord-post-actions span.calendar { background: #5865f2; }

.event-calendar-toggle { display: flex; align-items: center; gap: 10px; }
.event-calendar-toggle input { width: auto; margin: 0; }
.timezone-select { min-width: 0; }

.runtime-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #285d47;
  border-radius: 14px 4px 14px 4px;
  padding: 6px 9px;
  color: #7af2b7;
  background: #081912;
  font: 8px LCARSTerminal, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.runtime-live-pill::before { content: "●"; }

@media (max-width: 760px) {
  .giveaway-embed-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   R24 final polish: progressive strikes, emoji, media, polls
   ============================================================ */

/* Keep disabled actions LCARS-native instead of browser-gray. */
.embed-publish-box button,
.embed-publish-box select {
  min-height: 48px;
}
.embed-publish-box button:disabled,
.embed-update-button:disabled {
  opacity: .46;
  border-color: #38343c !important;
  background: #17151a !important;
  color: #89838d !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
.embed-update-button:not(:disabled) {
  background: #18263a;
  border-color: #5e91cc;
  color: #a9d2ff;
}

/* Progressive strike policy rows. */
.strike-policy-card,
.strike-policy-editor { display: grid; gap: 14px; }
.strike-policy-record .compact-record-status { min-width: 104px; text-align: center; }
.strike-policy-editor {
  padding: 16px;
  border: 1px solid #343240;
  border-left: 7px solid var(--orange);
  border-radius: 18px 6px 18px 6px;
  background: #08080d;
}
.strike-duration-row[hidden] { display: none !important; }

/* One reusable media control for polls/events/giveaways. */
.studio-media-source {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px dashed #3a3744;
  border-radius: 12px;
  background: #07070b;
}
.studio-media-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.studio-media-actions button {
  padding: 8px 14px;
  border: 1px solid #5d4d17;
  border-radius: 16px;
  background: #120e04;
  color: #ffc94c;
}
.studio-media-actions button[data-studio-media-remove] {
  border-color: #61323a;
  background: #13080b;
  color: #ff8997;
}
.studio-media-actions span { color: var(--muted); font: 11px LCARSTerminal, Consolas, monospace; }
.studio-media-source > img,
.studio-preview-image {
  width: min(100%, 520px);
  max-height: 290px;
  object-fit: contain;
  border: 1px solid #302f39;
  border-radius: 8px;
  background: #030305;
}

/* Floating emoji control available on editable text fields. */
.smart-emoji-trigger {
  position: fixed;
  z-index: 10020;
  min-width: 84px;
  padding: 7px 10px;
  border: 1px solid #726018;
  border-radius: 15px;
  background: #121006;
  color: #ffd35a;
  font: 11px LCARSTitle, Arial, sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,.55);
}
.smart-emoji-picker {
  position: fixed;
  z-index: 10030;
  right: 20px;
  bottom: 20px;
  width: min(540px, calc(100vw - 40px));
  max-height: min(560px, calc(100vh - 40px));
  overflow: auto;
  padding: 14px;
  border: 1px solid #5d5016;
  border-radius: 20px 7px 20px 7px;
  background: #09090e;
  color: #f4f1ec;
  box-shadow: 0 18px 70px rgba(0,0,0,.78);
}
.smart-emoji-head { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.smart-emoji-head > div { display: grid; gap: 4px; }
.smart-emoji-head b { color: var(--orange); font-family: LCARSTitle, Arial, sans-serif; text-transform: uppercase; }
.smart-emoji-head span,
.smart-emoji-picker p { color: var(--muted); font: 11px/1.4 LCARSTerminal, Consolas, monospace; }
.smart-emoji-head button { border: 0; background: transparent; color: #ff8997; font-size: 24px; }
#smartEmojiSearch { width: 100%; margin: 12px 0; }
.smart-emoji-section { display: grid; gap: 8px; margin-top: 12px; }
.smart-emoji-section > span { color: #78d8ff; font: 11px LCARSTitle, Arial, sans-serif; text-transform: uppercase; }
.smart-emoji-section > div { display: flex; flex-wrap: wrap; gap: 6px; }
.smart-emoji-section button {
  min-width: 38px;
  min-height: 38px;
  border: 1px solid #302f39;
  border-radius: 8px;
  background: #101017;
  color: #fff;
}
.smart-emoji-section button.custom { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; }
.smart-emoji-section button.custom img { width: 24px; height: 24px; object-fit: contain; }
.smart-emoji-section button.custom small { color: #bcb6c7; }

.poll-editor .event-post-preview,
.event-editor .event-post-preview { grid-column: 1 / -1; }
.choice-reaction {
  min-width: 42px;
  text-align: center;
  font-size: 20px;
}

@media (max-width: 900px) {
  .billing-hero,.billing-plan-grid,.billing-provider-grid { grid-template-columns: 1fr; }
  .billing-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .billing-development-badge { justify-self: start; }
  .billing-checklist { grid-template-columns: 1fr; }
  .billing-history-head { display: none; }
  .rr-custom-unicode-row { grid-template-columns: 1fr; }
  .smart-emoji-picker { right: 10px; bottom: 10px; width: calc(100vw - 20px); }
}
.smart-emoji-trigger[hidden],
.smart-emoji-picker[hidden],
.studio-media-source > img[hidden] { display: none !important; }

/* ============================================================
   V12 final: delegated dashboard access + Computer Setup facade
   ============================================================ */
.dashboard-access-card,
.computer-setup-page { display: grid; gap: 18px; }
.dashboard-access-controls,
.computer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px;
}
.field-caption,
.computer-role-columns > div > span {
  display: block;
  margin-bottom: 8px;
  color: #8cd9ff;
  font: 10px LCARSTitle, Arial, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.dashboard-tab-permissions {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 7px;
}
.dashboard-tab-permissions label,
.computer-channel-grid label,
.computer-role-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #302e39;
  border-radius: 11px 4px 11px 4px;
  background: #09090d;
  color: #d8d3de;
  font: 11px/1.3 LCARSTerminal, Consolas, monospace;
}
.dashboard-tab-permissions input,
.computer-channel-grid input,
.computer-role-grid input,
.computer-check input { width: auto; margin: 0; }
.dashboard-access-owner-note {
  padding: 12px 14px;
  border: 1px solid #60492b;
  border-left: 6px solid var(--orange);
  border-radius: 13px 4px 13px 4px;
  background: #120d07;
  color: #e9c18d;
  font: 12px/1.5 LCARSTerminal, Consolas, monospace;
}
.dashboard-access-record { align-items: center; }
.dashboard-access-record .compact-record-main small { white-space: normal; }
.dashboard-access-record .compact-record-status { min-width: 92px; }

.computer-hero {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: start;
  border-left: 9px solid var(--orange);
}
.computer-hero h2 { margin: 5px 0 8px; text-transform: uppercase; }
.computer-hero p { max-width: 840px; color: #bcb7c6; font: 13px/1.6 LCARSTerminal, Consolas, monospace; }
.computer-status-stack {
  min-width: 230px;
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 14px 5px 14px 5px;
  background: #07070b;
  border: 1px solid #34313b;
}
.computer-status-stack span { color: #8d8998; font: 9px LCARSTitle, Arial, sans-serif; text-transform: uppercase; }
.computer-status-stack b { color: #7af2b7; font: 12px LCARSTerminal, Consolas, monospace; }
.computer-create-row,
.computer-save-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
}
.computer-create-row button {
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid color-mix(in srgb, var(--orange) 78%, #3f3d49);
  border-radius: 18px 5px 18px 5px;
  background: #120d07;
  color: #ffc467;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 5px 16px rgba(0,0,0,.24);
  font: 12px LCARS, Arial, sans-serif;
  letter-spacing: .035em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.computer-create-row button:hover {
  border-color: var(--orange);
  background: var(--orange);
  color: #07070a;
  box-shadow: 0 0 0 1px rgba(255,184,77,.16), 0 7px 20px rgba(0,0,0,.34);
  transform: translateY(-1px);
}
.computer-create-row button:active { transform: translateY(0); }
.computer-create-row button:focus-visible {
  outline: 2px solid #fff2c7;
  outline-offset: 2px;
}
.computer-create-row button:disabled {
  opacity: .42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
#computerRepairPermissions {
  border-color: var(--violet);
  background: #100d18;
  color: #d8d5ff;
}
#computerRepairPermissions:hover {
  border-color: var(--violet);
  background: var(--violet);
  color: #07070a;
  box-shadow: 0 0 0 1px rgba(184,164,255,.18), 0 7px 20px rgba(0,0,0,.34);
}
.computer-save-bar {
  position: sticky;
  bottom: 12px;
  z-index: 30;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid #5a4319;
  border-radius: 16px 5px 16px 5px;
  background: rgba(11,9,5,.96);
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.computer-save-bar span { color: #cfc8d4; font: 11px/1.4 LCARSTerminal, Consolas, monospace; }
.computer-channel-grid,
.computer-role-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 7px;
}
.computer-role-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.computer-check { align-self: end; min-height: 44px; }
.computer-permission-ready .compact-record-status { color: #7af2b7; border-color: #285d47; background: #081912; }
.computer-permission-needs .compact-record-status { color: #ffc977; border-color: #674b20; background: #160f05; }
.nav.access-hidden,
.dashboard-tile.access-hidden { display: none !important; }

@media (max-width: 980px) {
  .dashboard-tab-permissions,
  .computer-channel-grid,
  .computer-role-grid { grid-template-columns: repeat(2, minmax(145px, 1fr)); }
  .computer-role-columns { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .dashboard-access-controls,
  .computer-grid,
  .dashboard-tab-permissions,
  .computer-channel-grid,
  .computer-role-grid { grid-template-columns: 1fr; }
  .computer-hero { display: grid; }
  .computer-status-stack { min-width: 0; }
}


/* ============================================================
   R25 unified embed + moderation polish
   Reaction Roles is the visual standard for every embed editor.
   ============================================================ */
.shared-rr-embed,
.welcome-rr-embed,
.welcome-channel-rr-embed,
.main-rr-embed { margin-top: 10px; }
.main-embed-composer,
.event-embed-composer,
.poll-embed-composer,
.giveaway-embed-editor { display: grid; gap: 16px; }
.main-embed-media.studio-wide,
.rr-media-control.studio-wide { grid-column: auto; }
.rr-embed-controls input,
.rr-embed-controls textarea,
.rr-embed-controls select,
.rr-discord-composer input,
.rr-discord-composer textarea,
.rr-discord-composer select {
  width: 100%;
  border: 1px solid #343542;
  border-radius: 12px 4px 12px 4px;
  background: #08090d;
  color: #f2f1f4;
  padding: 11px 13px;
}
.rr-embed-controls textarea { min-height: 112px; resize: vertical; }
.rr-media-row input { min-width: 0; }
.rr-inline-media-preview { width: 100%; height: 100%; }
.rr-inline-media-preview img { width: 100%; height: 100%; object-fit: cover; }
.rr-media-token-row { display: flex; gap: 5px; flex-wrap: wrap; }
.rr-token-button {
  border: 1px solid #3b5362;
  border-radius: 10px 3px 10px 3px;
  background: #0c171d;
  color: #8bd7ef;
  padding: 5px 8px;
  font: 8px LCARSTerminal, Consolas, monospace;
  cursor: pointer;
}
.rr-live-preview-shell.compact { margin-top: 4px; }
.rr-live-preview-shell > #eventLivePreview,
.rr-live-preview-shell > #giveawayLivePreview,
.rr-live-preview-shell > [data-custom-command-preview],
.poll-embed-composer .rr-live-preview-shell > .discord-post-shell { padding: 18px; }

/* Inline emoji access: no more wandering floating Emoji button. */
.emoji-input-shell {
  position: relative;
  display: block;
  width: 100%;
}
.emoji-input-shell > input,
.emoji-input-shell > textarea { padding-right: 42px !important; }
.inline-emoji-trigger {
  position: absolute;
  z-index: 4;
  right: 8px;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: #716f7e;
  font: 18px/1 Arial, sans-serif;
  cursor: pointer;
  opacity: .78;
}
.textarea-shell > .inline-emoji-trigger { top: 11px; transform: none; }
.inline-emoji-trigger:hover,
.inline-emoji-trigger:focus-visible {
  border-color: #525363;
  background: #1a1b22;
  color: #c7c8cf;
  opacity: 1;
}
.smart-emoji-trigger { display: none !important; }
.smart-emoji-picker.inline-popover {
  position: fixed;
  z-index: 10020;
  width: min(520px, calc(100vw - 24px));
  max-height: 310px;
  overflow: auto;
  border: 1px solid #474855;
  border-radius: 16px 5px 16px 5px;
  background: #0b0c11;
  box-shadow: 0 18px 48px rgba(0,0,0,.64);
}

/* Moderation controls and live management roster. */
.moderation-filter-switch { min-width: 142px; justify-content: space-between; }
.moderation-action-details {
  margin: 12px 0;
  padding: 13px;
  border: 1px solid #353440;
  border-left: 6px solid var(--orange);
  border-radius: 14px 5px 14px 5px;
  background: #09090e;
}
.moderation-action-details textarea { min-height: 90px; }
.moderation-subject-list { display: grid; gap: 10px; margin-top: 14px; }
.moderation-subject-record {
  display: grid;
  grid-template-columns: minmax(260px,1fr) 190px minmax(300px,1.3fr);
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid #30313c;
  border-radius: 16px 5px 16px 5px;
  background: #090a0e;
}
.moderation-subject-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.moderation-subject-identity img,
.moderation-subject-fallback { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.moderation-subject-fallback { display: grid; place-items: center; background: #191a22; color: var(--orange); }
.moderation-subject-identity div,
.moderation-subject-strikes { display: grid; gap: 4px; min-width: 0; }
.moderation-subject-identity b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moderation-subject-identity small,
.moderation-subject-strikes small,
.moderation-punishment-row small { color: #8e8b98; font: 9px LCARSTerminal, Consolas, monospace; }
.moderation-subject-strikes > span { color: #ffbf69; font: 8px LCARSTerminal, Consolas, monospace; letter-spacing: .1em; }
.moderation-subject-strikes > b { color: #ffc56f; font-size: 22px; }
.moderation-subject-strikes button,
.moderation-punishment-row button {
  justify-self: start;
  border: 1px solid #6e3a3a;
  border-radius: 11px 4px 11px 4px;
  background: #1d0d0e;
  color: #ff999c;
  padding: 7px 10px;
  cursor: pointer;
}
.moderation-subject-punishments { display: grid; gap: 7px; }
.moderation-punishment-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px; border: 1px solid #31313c; border-radius: 11px 4px 11px 4px; background: #101117; }
.moderation-punishment-row div { display: grid; gap: 3px; }
.moderation-clear-state { align-self: center; color: #777482; font: 10px LCARSTerminal, Consolas, monospace; }

/* Welcome card avatar option. */
.welcome-card-options-row { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.welcome-card-avatar[hidden] { display: none !important; }
.welcome-card-preview.without-avatar { grid-template-columns: minmax(0,1fr); }
.welcome-card-preview.without-avatar .welcome-card-preview-copy { grid-column: 1 / -1; }

/* Studio media uploads: show the complete selected image and make upload state obvious. */
.rr-media-control[data-studio-media-control] .rr-media-row {
  grid-template-columns: 112px minmax(0,1fr) auto;
}
.rr-media-control[data-studio-media-control] .rr-media-preview {
  width: 112px;
  height: 88px;
  padding: 4px;
  background: #0c0d12;
}
.rr-media-control[data-studio-media-control] .rr-media-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.rr-media-control[data-studio-media-control][data-upload-pending="true"] .rr-media-preview {
  opacity: .62;
}
.rr-media-control[data-studio-media-control][data-upload-pending="true"] [data-studio-media-status] {
  color: #ffc95a;
}
@media (max-width: 700px) {
  .rr-media-control[data-studio-media-control] .rr-media-row { grid-template-columns: 72px minmax(0,1fr); }
  .rr-media-control[data-studio-media-control] .rr-media-preview { width: 72px; height: 72px; }
}

/* Event targeting and RSVP roster. */
.event-role-multiselect { min-height: 126px; }
.event-signed-up-switch { align-self: end; min-height: 48px; }
.event-rsvp-preview-list { margin: 10px 0; }
.event-rsvp-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 16px;
}
.event-rsvp-column {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
}
.event-rsvp-column > b {
  color: #dbdee1;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.event-rsvp-column > span {
  color: #b8bac0;
  font-size: 12px;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.event-rsvp-column > span.empty { color: #777b84; }
.event-rsvp-column > .event-rsvp-more { color: #8e92a0; font-style: italic; }
.event-mention-preview { margin-bottom: 8px; color: #b7bac1; font: 12px Arial, sans-serif; }
.event-preview-image,
.discord-post-embed .event-preview-image {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin-top: 12px;
  object-fit: contain;
  border: 0;
  border-radius: 4px;
  background: transparent;
}
.giveaway-preview-thumbnail { float: right; width: 80px; height: 80px; object-fit: cover; margin: 0 0 8px 12px; border-radius: 4px; }

/* Remaining browser-default embed controls. */
.embed-media-actions button,
.embed-publish-box button,
.main-embed-composer button,
.rr-discord-composer button:not(.inline-emoji-trigger):not(.rr-media-preview):not(.rr-media-remove):not(.rr-trash) {
  border-radius: 14px 4px 14px 4px;
}
.main-embed-composer .rr-media-preview,
.main-embed-composer .rr-media-remove { appearance: none; }

@media (max-width: 900px) {
  .moderation-subject-record { grid-template-columns: 1fr; }
  .rr-embed-top-grid,
  .rr-footer-grid { grid-template-columns: 1fr; }
}

/* Computer Language metric cards: keep status filters inside the LCARS palette. */
.language-metric {
  appearance: none;
  border: 1px solid #3a3945 !important;
  background: #0b0c11 !important;
  color: #e9e7ec !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018);
  cursor: pointer;
}
.language-metric[data-language-status="PENDING"] {
  border-color: #6b4b16 !important;
  background: linear-gradient(135deg, #181006, #0b0b0e) !important;
  color: #ffc467 !important;
}
.language-metric[data-language-status="APPROVED"] {
  border-color: #285d47 !important;
  background: linear-gradient(135deg, #081912, #0b0b0e) !important;
  color: #7af2b7 !important;
}
.language-metric[data-language-status="REJECTED"] {
  border-color: #6d3039 !important;
  background: linear-gradient(135deg, #1a090d, #0b0b0e) !important;
  color: #ff8997 !important;
}
.language-metric:hover,
.language-metric.active { filter: brightness(1.12); }
.language-toolbar > button {
  appearance: none;
  border: 1px solid #4c4658;
  border-radius: 14px 4px 14px 4px;
  background: #0d0d12;
  color: #c9c4d0;
  padding: 8px 13px;
  font: 11px LCARS, Arial, sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}
.language-toolbar > button:hover { border-color: var(--orange); color: #fff; }
.rr-media-preview:has(img:not([hidden])) > span { display: none; }

/* ============================================================
   R25.1 Welcome composer correction
   Exact Reaction Roles density + inline emoji access.
   ============================================================ */
#welcomeCardSettings .welcome-card-options-row { display:flex; justify-content:flex-start; align-items:center; margin:0 0 12px; }
#welcomeCardSettings .welcome-card-options-row .lcars-power-control.compact { width:max-content; max-width:100%; grid-template-columns:max-content 66px; justify-content:start; gap:10px; align-self:auto; }
#welcomeCardSettings .welcome-card-options-row .lcars-power-control.compact > span { white-space:nowrap; }
#panel-welcome-goodbye .smart-toolbar .emoji-chip { display:none !important; }
#panel-welcome-goodbye .compact-template-toolbar { gap:5px; padding:6px 8px; margin-top:-2px; border-radius:11px 4px 11px 4px; }
#panel-welcome-goodbye .compact-template-toolbar > span { flex:0 0 auto; color:#7c7a87; font-size:8px; }
#panel-welcome-goodbye .compact-template-toolbar button { min-height:26px; padding:4px 7px; border-radius:8px 3px 8px 3px; font-size:8px; }
#panel-welcome-goodbye .welcome-rr-composer { gap:10px; }
#panel-welcome-goodbye .welcome-rr-embed { margin-top:0; grid-template-columns:42px minmax(0,1fr); }
#panel-welcome-goodbye .welcome-rr-embed .rr-color-rail { grid-template-rows:44px 1fr; }
#panel-welcome-goodbye .welcome-rr-embed .rr-color-rail input { width:32px; height:32px; margin:6px 5px; }
#panel-welcome-goodbye .welcome-rr-embed .rr-color-rail span { width:5px; margin-left:18px; }
#panel-welcome-goodbye .welcome-rr-embed .rr-embed-controls { gap:10px; padding:11px 12px; }
#panel-welcome-goodbye .welcome-rr-embed .rr-embed-top-grid,
#panel-welcome-goodbye .welcome-rr-embed .rr-footer-grid { gap:10px; grid-template-columns:minmax(0,1fr) minmax(245px,.46fr); }
#panel-welcome-goodbye .welcome-rr-embed .rr-footer-grid { grid-template-columns:minmax(245px,.46fr) minmax(0,1fr); }
#panel-welcome-goodbye .welcome-rr-embed .rr-embed-controls input,
#panel-welcome-goodbye .welcome-rr-embed .rr-embed-controls textarea,
#panel-welcome-goodbye .welcome-rr-embed .rr-embed-controls select { margin-top:5px; padding:8px 10px; border-radius:9px 3px 9px 3px; font-size:13px; }
#panel-welcome-goodbye .welcome-rr-embed .rr-embed-controls textarea { min-height:78px; }
#panel-welcome-goodbye .welcome-rr-embed .rr-media-control { gap:4px; }
#panel-welcome-goodbye .welcome-rr-embed .rr-media-row { grid-template-columns:68px minmax(0,1fr) auto; gap:7px; }
#panel-welcome-goodbye .welcome-rr-embed .rr-media-preview { width:68px; height:62px; border-radius:10px 3px 10px 3px; }
#panel-welcome-goodbye .welcome-rr-embed .rr-media-control.compact .rr-media-row { grid-template-columns:54px minmax(0,1fr) auto; }
#panel-welcome-goodbye .welcome-rr-embed .rr-media-control.compact .rr-media-preview { width:52px; height:52px; }
#panel-welcome-goodbye .welcome-rr-embed .rr-media-row small { line-height:1.25; }
#panel-welcome-goodbye .welcome-rr-embed .rr-media-token-row { gap:3px; }
#panel-welcome-goodbye .welcome-rr-embed .rr-token-button { padding:3px 6px; font-size:7px; }
#panel-welcome-goodbye .welcome-rr-embed .rr-fields-heading { padding-top:1px; }
#panel-welcome-goodbye .welcome-rr-embed .welcome-field-editor,
#panel-welcome-goodbye .welcome-rr-embed .welcome-button-editor { padding:9px; gap:8px; border-radius:12px 4px 12px 4px; }
#panel-welcome-goodbye .welcome-rr-preview-shell { margin-top:2px; }
#panel-welcome-goodbye .welcome-rr-live-preview { padding:14px; }
#panel-welcome-goodbye .welcome-rr-live-preview .discord-message-shell { margin:0; }
@media (max-width:900px) {
  #panel-welcome-goodbye .welcome-rr-embed .rr-embed-top-grid,
  #panel-welcome-goodbye .welcome-rr-embed .rr-footer-grid { grid-template-columns:1fr; }
}
@media (max-width:800px) {
  #welcomeCardSettings .welcome-card-options-row .lcars-power-control.compact { align-self:auto; width:max-content; justify-content:start; }
}


/* ========================================================================== */
/* Dashboard readability pass                                                 */
/* Keep LCARS display headings; use a clearer stock face for working text.   */
/* ========================================================================== */

body {
  font-family: Verdana, "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Everyday interface copy and controls.  !important is intentional here: a
   number of older dashboard components use font shorthand declarations. */
body p,
body small,
body label,
body input,
body textarea,
body select,
body button,
body td,
body th,
body li,
body time,
body .nav,
body .telemetry,
body .account,
body .hint,
body .savebar span,
body .selector-row span,
body .metric b,
body span:not(h1 span):not(h2 span):not(h3 span):not(h4 span):not(h5 span):not(h6 span),
body b:not(h1 b):not(h2 b):not(h3 b):not(h4 b):not(h5 b):not(h6 b),
body strong:not(h1 strong):not(h2 strong):not(h3 strong):not(h4 strong):not(h5 strong):not(h6 strong) {
  font-family: Verdana, "Segoe UI", Tahoma, Arial, sans-serif !important;
}

/* Preserve the LCARS display face for true headings. */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: LCARS, Arial, sans-serif !important;
}

/* Comfortable form/control sizing without making the panels larger. */
body input,
body textarea,
body select,
body button {
  font-size: 14px;
  line-height: 1.45;
}

/* Helper text remains subordinate, but no longer microscopic. */
body small,
body .hint {
  font-size: 12px !important;
  line-height: 1.45;
}

/* Normal prose benefits from a little extra breathing room. */
body p,
body td,
body th,
body label {
  line-height: 1.5;
}

.computer-directory-toolbar { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin-bottom:14px; }
.computer-directory-toolbar label { flex:1 1 180px; }
.computer-directory-toolbar span { flex:1 1 160px; }
.computer-directory-toolbar button {
  appearance:none;
  min-height:38px;
  min-width:88px;
  padding:8px 18px;
  border:1px solid var(--orange);
  border-radius:20px;
  background:var(--orange);
  color:#08080d;
  font:600 14px Arial, sans-serif;
  cursor:pointer;
}
.computer-directory-toolbar button:not(:disabled):hover { background:#ffc467; border-color:#ffc467; }
.computer-directory-toolbar button:focus-visible { outline:2px solid var(--text); outline-offset:3px; }
.computer-directory-toolbar button:disabled { background:#171720; border-color:#393943; color:#9999aa; cursor:not-allowed; }
.computer-owner-directory .computer-access-record { padding:10px; }
.computer-owner-directory .computer-access-avatar { width:36px; height:36px; flex-basis:36px; }

/* Server Setup: server-wide named channel variables */
#panel-server-setup .server-variable-card {
  border-color: rgba(86,197,232,.24);
}
#panel-server-setup .server-variable-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
#panel-server-setup .server-variable-grid label { min-width: 0; }
#panel-server-setup .server-variable-grid label small {
  display: inline;
  margin-left: 6px;
  color: #aaa7b8;
}
#panel-server-setup .server-variable-grid code { color: #9fd3ff; }
#panel-server-setup .server-variable-note { margin: 12px 0 0; }
@media (max-width: 900px) {
  #panel-server-setup .server-variable-grid { grid-template-columns: 1fr; }
}

/* ========================================================================== */
/* Computer routing clarity + full-height desktop navigation                  */
/* ========================================================================== */

.computer-launch-inline {
  margin: 2px 0 4px;
  padding: 14px 16px 16px;
  border: 1px solid #383341;
  border-left: 6px solid var(--orange);
  border-radius: 15px 5px 15px 5px;
  background: linear-gradient(135deg, #0c0b10, #07070a);
}
.computer-launch-inline-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.computer-launch-inline-head span {
  display: block;
  color: var(--orange);
  font-size: 10px !important;
  letter-spacing: .12em;
}
.computer-launch-inline-head h3 {
  margin: 2px 0 0;
  font-size: 19px;
  text-transform: uppercase;
}
.computer-launch-inline-head strong {
  max-width: 52%;
  color: #b9ddff;
  font-size: 12px !important;
  line-height: 1.35;
  text-align: right;
}
.computer-launch-inline .hint { margin: 5px 0 11px; }
.computer-launch-inline .computer-channel-grid label {
  align-items: center;
  min-width: 0;
}
.computer-launch-inline .computer-channel-grid label > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.computer-launch-inline .computer-channel-grid label b {
  overflow: hidden;
  color: #f5f2f7;
  font-size: 12px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.computer-launch-inline .computer-channel-grid label small {
  overflow: hidden;
  color: #8e899a;
  font-size: 10px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.computer-routing-actions {
  margin: -1px 0 4px;
  padding-bottom: 2px;
}
.computer-field-note {
  display: block;
  margin-top: 5px;
  color: #8e899a;
  text-transform: none;
  letter-spacing: 0;
}

@media (min-width: 801px) {
  .rail {
    position: relative;
    top: auto;
    height: auto;
    min-height: calc(100vh - 28px);
    overflow: visible;
    align-self: stretch;
  }
  #navigation {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    margin-top: 12px;
    padding: 0 12px 0 0;
    scrollbar-width: none;
  }
  #navigation::-webkit-scrollbar { display: none; }
  .nav-groups { gap: 16px; }
  .rail-decoration {
    position: static;
    bottom: auto;
    left: auto;
    width: calc(100% - 22px);
    margin: 18px 22px 14px 0;
    padding: 0;
    flex: 0 0 auto;
  }
  .rail-decoration i:first-child { width: 90%; }
  .rail-decoration i:nth-child(2) { width: 58%; margin-left: 28%; }
  .rail-decoration i:nth-child(3) { width: 84%; height: 42px; }
}

@media (max-width: 900px) {
  .computer-launch-inline-head { align-items: start; flex-direction: column; gap: 5px; }
  .computer-launch-inline-head strong { max-width: 100%; text-align: left; }
}

@media (max-width: 640px) {
  .event-rsvp-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .event-rsvp-columns { grid-template-columns: 1fr; }
}

/* R14 owner Computer access, AutoMod role immunity, button colors, Achievements */
.computer-owner-directory[hidden] { display: none !important; }
.computer-access-directory-list { display: grid; gap: 10px; margin-top: 14px; }
.computer-access-record { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(6,8,14,.55); }
.computer-access-record.is-enabled { box-shadow: inset 5px 0 0 #52b8d5; }
.computer-access-record.is-disabled { opacity: .82; box-shadow: inset 5px 0 0 #6d7180; }
.computer-access-avatar { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.08); font-weight: 800; }
.computer-access-avatar img { width: 100%; height: 100%; object-fit: cover; }
.computer-access-main { min-width: 0; display: grid; gap: 3px; }
.computer-access-main b { font-size: 1rem; }
.computer-access-main span, .computer-access-main small { color: var(--muted, #aeb3c1); overflow-wrap: anywhere; }

.automod-role-immunity-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 9px; margin-top: 12px; }
.automod-role-immunity-item { display: grid; grid-template-columns: auto 12px minmax(0, 1fr); align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(8,9,15,.58); cursor: pointer; }
.automod-role-immunity-item > i { width: 10px; height: 28px; border-radius: 9px; background: var(--role-color, #72778b); }
.automod-role-immunity-item span { display: grid; gap: 2px; }
.automod-role-immunity-item small { color: var(--muted, #aeb3c1); }

.discord-post-actions .discord-action-button { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 5px 14px; border-radius: 4px; color: #fff; font-weight: 700; border: 1px solid rgba(0,0,0,.18); }
.discord-post-actions .button-blue { background: #5865f2; }
.discord-post-actions .button-gray { background: #4e5058; }
.discord-post-actions .button-green { background: #248046; }
.discord-post-actions .button-red { background: #da373c; }
.discord-post-actions .calendar { background: #4e5058; }

.achievement-page { display: grid; gap: 16px; }
.achievement-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.achievement-settings-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.3fr); gap: 18px; align-items: end; }
.achievement-badge-demo { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 14px; min-height: 92px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: linear-gradient(135deg, rgba(86,197,232,.12), rgba(255,157,0,.08)); }
.achievement-badge-demo > div:last-child { display: grid; gap: 5px; }
.achievement-badge-demo span { color: var(--muted, #aeb3c1); }
.achievement-demo-delta { width: 68px; height: 68px; display: grid; place-items: center; clip-path: polygon(50% 0, 92% 100%, 50% 73%, 8% 100%); background: #c58b4e; color: #fff; font-size: 26px; padding-bottom: 13px; }
.achievement-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.achievement-metric-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(8,9,15,.58); }
.achievement-metric-item span { display: grid; gap: 3px; }
.achievement-metric-item small { color: var(--muted, #aeb3c1); }
.achievement-milestone-head, .achievement-milestone-row { display: grid; grid-template-columns: 54px minmax(110px, .8fr) minmax(110px, .8fr) minmax(110px, .8fr) minmax(190px, 1.2fr); gap: 10px; align-items: center; }
.achievement-milestone-head { padding: 0 10px 8px; color: var(--muted, #aeb3c1); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.achievement-milestone-list { display: grid; gap: 8px; }
.achievement-milestone-row { padding: 9px 10px; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; background: rgba(8,9,15,.5); }
.achievement-milestone-row input[type="number"], .achievement-milestone-row select { width: 100%; }
.achievement-milestone-enable { display: grid; place-items: center; }
.achievement-mini-badge {
  --tier-metal: #c87848;
  --tier-glow: #ef9c66;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 72px;
  overflow: hidden;
  padding: 6px 18px 6px 7px;
  border: 1px solid color-mix(in srgb, var(--tier-metal), #20232e 45%);
  border-left: 5px solid var(--tier-metal);
  border-radius: 14px 24px 24px 14px;
  background:
    radial-gradient(circle at 11% 50%, color-mix(in srgb, var(--tier-glow), transparent 74%), transparent 31%),
    linear-gradient(110deg, #151a24 0%, #090b12 58%, color-mix(in srgb, var(--tier-metal), #090b12 82%) 100%);
  box-shadow: inset 0 0 22px rgba(255,255,255,.035), 0 0 16px color-mix(in srgb, var(--tier-glow), transparent 86%);
  color: #f6f7fb;
}
.achievement-mini-badge::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  width: 9px;
  height: 100%;
  background: linear-gradient(var(--tier-glow), var(--tier-metal));
}
.achievement-mini-emblem {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--tier-metal), white 18%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,27,43,.92), rgba(3,5,10,.96));
  box-shadow: 0 0 12px color-mix(in srgb, var(--tier-glow), transparent 65%);
}
.achievement-mini-emblem img { width: 52px; height: 52px; object-fit: contain; }
.achievement-mini-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "eyebrow eyebrow" "tier xp";
  align-items: baseline;
  column-gap: 14px;
  text-transform: uppercase;
}
.achievement-mini-copy small {
  grid-area: eyebrow;
  color: #9da5ba;
  font: 9px/1.1 "Roboto Mono", monospace;
  letter-spacing: .18em;
}
.achievement-mini-copy strong {
  grid-area: tier;
  color: var(--tier-glow);
  font: 800 15px/1.2 "Roboto Mono", monospace;
  letter-spacing: .09em;
}
.achievement-mini-copy b {
  grid-area: xp;
  justify-self: end;
  color: #f5f7fb;
  font: 700 12px/1.2 "Roboto Mono", monospace;
  white-space: nowrap;
}
.achievement-mini-badge.tier-bronze { --tier-metal: #bd6f43; --tier-glow: #f0a06c; }
.achievement-mini-badge.tier-silver { --tier-metal: #9aacc0; --tier-glow: #dce8f4; }
.achievement-mini-badge.tier-gold { --tier-metal: #d9a925; --tier-glow: #ffd861; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 820px) {
  .computer-access-record { grid-template-columns: 44px minmax(0, 1fr); }
  .computer-access-record > button { grid-column: 1 / -1; }
  .achievement-hero { align-items: flex-start; flex-direction: column; }
  .achievement-settings-grid { grid-template-columns: 1fr; }
  .achievement-milestone-head { display: none; }
  .achievement-milestone-row { grid-template-columns: 46px 1fr 1fr; }
  .achievement-mini-badge { grid-column: 1 / -1; }
}

/* R2 owner-only STFC data acquisition panel */
.stfc-sync-page { display: grid; gap: 18px; }
.stfc-sync-head, .stfc-sync-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.stfc-sync-head > div > span, .stfc-sync-section-head span, .stfc-sync-job-line span, .stfc-sync-metrics span, .stfc-sync-safety span { display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; }
.stfc-sync-head h2, .stfc-sync-section-head h2 { margin: 3px 0 6px; }
.stfc-sync-head p { margin: 0; max-width: 880px; }
.stfc-sync-job-line { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 18px; padding: 12px 14px; border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; }
.stfc-sync-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.stfc-sync-metrics > div, .stfc-sync-safety > div { padding: 12px 14px; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; background: rgba(0,0,0,0.14); }
.stfc-sync-metrics b { display: block; margin-top: 4px; font-size: 1.25rem; }
.stfc-sync-metrics small { display: block; margin-top: 5px; font-size: 0.68rem; line-height: 1.3; opacity: 0.72; }
.stfc-sync-metrics small[data-status="REVIEW_REQUIRED"] { opacity: 1; font-weight: 700; }
.stfc-sync-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.stfc-sync-head > button,
.stfc-sync-section-head > button,
.stfc-sync-actions button {
  appearance: none;
  border: 1px solid #604500;
  background: #070708;
  color: #ffc467;
  border-radius: 20px;
  padding: 10px 16px;
  min-height: 42px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.1;
  transition: filter 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.stfc-sync-head > button:hover,
.stfc-sync-section-head > button:hover,
.stfc-sync-actions button:hover {
  filter: brightness(1.12);
}

.stfc-sync-head > button:focus-visible,
.stfc-sync-section-head > button:focus-visible,
.stfc-sync-actions button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

.stfc-sync-actions button.primary {
  background: var(--orange);
  color: #050506;
  border-color: var(--orange);
}

.stfc-sync-head > button:disabled,
.stfc-sync-section-head > button:disabled,
.stfc-sync-actions button:disabled {
  opacity: 0.45;
  cursor: wait;
  filter: none;
}

.stfc-sync-export-list { display: grid; gap: 10px; margin-top: 14px; }
.stfc-sync-export-record { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 14px; border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; background: rgba(0,0,0,0.18); }
.stfc-sync-export-main { min-width: 0; display: grid; gap: 5px; }
.stfc-sync-export-title { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.stfc-sync-export-main b, .stfc-sync-export-main small, .stfc-sync-export-main code { overflow-wrap: anywhere; }
.stfc-sync-export-main small { color: var(--muted, #aeb3c1); }
.stfc-sync-export-status { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px; border: 1px solid currentColor; border-radius: 14px; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.stfc-sync-export-status.is-verified { color: #ffc467; }
.stfc-sync-export-status.is-unverified, .stfc-sync-export-status.is-deleted { color: var(--muted, #aeb3c1); }
.stfc-sync-export-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.stfc-sync-export-actions button, .stfc-sync-export-actions a { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 13px; border: 1px solid #604500; border-radius: 18px; background: #070708; color: #ffc467; font: 14px LCARS, Arial, sans-serif; line-height: 1.1; text-decoration: none; cursor: pointer; }
.stfc-sync-export-actions button:hover, .stfc-sync-export-actions a:hover { filter: brightness(1.12); }
.stfc-sync-export-actions button:focus-visible, .stfc-sync-export-actions a:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.stfc-sync-export-actions button:disabled { opacity: .45; cursor: wait; filter: none; }

.stfc-sync-safety { display: grid; gap: 10px; margin-top: 18px; }
.stfc-sync-safety code, .stfc-sync-safety b { display: block; margin-top: 5px; overflow-wrap: anywhere; }
.stfc-sync-output-card pre { margin: 12px 0 0; min-height: 180px; max-height: 520px; overflow: auto; white-space: pre-wrap; word-break: break-word; padding: 14px; border-radius: 8px; background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.12); font-size: 0.78rem; line-height: 1.45; }

@media (max-width: 760px) {
  .stfc-sync-head,
  .stfc-sync-section-head { flex-direction: column; }

  .stfc-sync-head > button,
  .stfc-sync-section-head > button,
  .stfc-sync-actions button { width: 100%; }
  .stfc-sync-export-record { align-items: stretch; flex-direction: column; }
  .stfc-sync-export-actions { justify-content: stretch; }
  .stfc-sync-export-actions button, .stfc-sync-export-actions a { flex: 1 1 140px; }
}

/* R2.2 guided STFC workflow and progression watch */
.stfc-sync-refresh-wrap { display: grid; justify-items: end; gap: 5px; min-width: 150px; }
.stfc-sync-refresh-wrap small { color: var(--muted, #aeb3c1); font-size: .68rem; letter-spacing: .04em; }
.stfc-sync-refresh-wrap button,
.stfc-sync-guide-steps button {
  appearance: none;
  border: 1px solid #604500;
  background: #070708;
  color: #ffc467;
  cursor: pointer;
}
.stfc-sync-refresh-wrap button { border-radius: 20px; padding: 10px 16px; min-height: 42px; font-size: 15px; line-height: 1.1; }
.stfc-sync-refresh-wrap button:hover,
.stfc-sync-guide-steps button:hover { filter: brightness(1.12); }
.stfc-sync-refresh-wrap button:focus-visible,
.stfc-sync-guide-steps button:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.stfc-sync-refresh-wrap button:disabled,
.stfc-sync-guide-steps button:disabled { opacity: .45; cursor: wait; filter: none; }

.stfc-sync-next-action { display: grid; gap: 5px; margin-top: 14px; padding: 14px 16px; border: 1px solid #604500; border-radius: 12px; background: rgba(255,157,0,.06); }
.stfc-sync-next-action > span { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: #ffc467; }
.stfc-sync-next-action > b { font-size: 1.05rem; }
.stfc-sync-next-action > small { color: var(--muted, #aeb3c1); line-height: 1.45; }
.stfc-sync-next-action.is-current { border-color: rgba(255,255,255,.16); background: rgba(0,0,0,.14); }

.stfc-sync-guide-steps { display: grid; grid-template-columns: repeat(4, minmax(170px, 1fr)); gap: 10px; margin-top: 14px; }
.stfc-sync-guide-steps button { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; min-height: 72px; padding: 10px 12px; border-radius: 12px; text-align: left; }
.stfc-sync-guide-steps button > span:last-child { display: grid; gap: 4px; }
.stfc-sync-guide-steps button b { font-size: .88rem; }
.stfc-sync-guide-steps button small { color: var(--muted, #aeb3c1); font-size: .66rem; letter-spacing: .08em; }
.stfc-sync-step-number { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-weight: 800; }
.stfc-sync-guide-steps button.is-next { background: var(--orange); color: #050506; border-color: var(--orange); }
.stfc-sync-guide-steps button.is-next small { color: #151515; }
.stfc-sync-guide-steps button.is-complete:not(.is-next) { border-color: rgba(255,196,103,.45); }

.stfc-sync-progression-watch { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; }
.stfc-sync-progression-watch > div { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(0,0,0,.14); }
.stfc-sync-progression-watch span { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #aeb3c1); }
.stfc-sync-progression-watch b { overflow-wrap: anywhere; }
.stfc-sync-progression-watch small { color: var(--muted, #aeb3c1); line-height: 1.35; }
#stfcSyncProgressionWatch[data-status="REVIEW_REQUIRED"] { color: var(--orange); }

.stfc-sync-expert { margin-top: 12px; }
.stfc-sync-expert summary { cursor: pointer; color: #ffc467; font-weight: 700; }
.stfc-sync-expert[open] summary { margin-bottom: 4px; }

@media (max-width: 980px) {
  .stfc-sync-guide-steps,
  .stfc-sync-progression-watch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .stfc-sync-refresh-wrap { width: 100%; justify-items: stretch; }
  .stfc-sync-refresh-wrap button { width: 100%; }
  .stfc-sync-refresh-wrap small { text-align: center; }
  .stfc-sync-guide-steps,
  .stfc-sync-progression-watch { grid-template-columns: 1fr; }
  .stfc-sync-guide-steps button { width: 100%; }
}
.stfc-sync-progression-watch button { appearance:none; margin-top:6px; min-height:34px; padding:7px 11px; border:1px solid #604500; border-radius:17px; background:#070708; color:#ffc467; cursor:pointer; }
.stfc-sync-progression-watch button:hover { filter:brightness(1.12); }
.stfc-sync-progression-watch button:disabled { opacity:.45; cursor:wait; }

/* R32 progression layout: keep award tiles and their controls inside their panels. */
body .achievement-page #achievementMetrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
body .achievement-action-card {
  min-width: 0;
  overflow: hidden;
  padding: 20px;
}
body .achievement-action-heading {
  grid-template-columns: 76px minmax(0, 1fr) auto;
  column-gap: 18px;
}
body .achievement-action-heading > div:nth-child(2) { min-width: 0; }
body .achievement-action-settings {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
body .achievement-action-settings > label:last-child { grid-column: 1 / -1; }
body .achievement-badge-demo {
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 18px;
  padding: 14px 18px;
}
body .achievement-badge-demo > div:last-child { min-width: 0; }

@media (max-width: 1100px) {
  body .achievement-page #achievementMetrics { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  body .achievement-action-card { padding: 16px; }
  body .achievement-action-heading {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 12px;
  }
  body .achievement-action-settings { grid-template-columns: 1fr; }
  body .achievement-action-settings > label:last-child { grid-column: auto; }
  body .achievement-badge-demo {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }
  body .achievement-badge-demo img { width: 80px; height: 80px; }
}

/* Server-specific LCARS identity and permanent generated-image branding. */
.server-bot-identity-panel {
  margin: 20px 0 22px;
  padding: 18px;
  border: 1px solid #343241;
  border-radius: 22px 6px 22px 6px;
  background: linear-gradient(135deg, rgba(255,157,0,.07), rgba(145,140,255,.04) 55%, #08080d);
}
.server-bot-identity-grid {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(360px, 1.2fr);
  gap: 16px;
  align-items: start;
}
.server-bot-identity-grid label small { display: block; margin-top: 6px; color: #a9a4bf; font: 10px LCARSTerminal, Consolas, monospace; }
.server-identity-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 13px 16px;
  border: 1px solid #413d54;
  border-radius: 16px 5px 16px 5px;
  background: #09090f;
}
.server-identity-preview img { width: 58px; height: 58px; object-fit: cover; border-radius: 17px 5px 17px 5px; border: 2px solid var(--orange); box-shadow: 0 0 0 4px rgba(255,157,0,.08); }
.server-identity-preview div { display: grid; gap: 2px; min-width: 0; }
.server-identity-preview small { color: var(--orange); letter-spacing: .17em; font: 9px LCARSTerminal, Consolas, monospace; }
.server-identity-preview strong { color: #fff; font: 23px LCARS, Arial, sans-serif; overflow-wrap: anywhere; }
.server-identity-preview span { color: #aaa5bd; font-size: 11px; }
.server-identity-api-note b { color: var(--orange); }

.welcome-card-brandmark {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px 6px 6px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 16px 5px 16px 5px;
  background: rgba(5,5,10,.82);
  box-shadow: 0 0 20px rgba(0,0,0,.42);
}
.welcome-card-brandmark img { width: 28px; height: 28px; border-radius: 9px 3px 9px 3px; object-fit: cover; }
.welcome-card-brandmark span { color: #fff; font: 9px LCARSTerminal, Consolas, monospace; letter-spacing: .14em; }
.welcome-card-preview[data-font="technical_mono"] .welcome-card-preview-copy strong { font-family: "Courier New", Consolas, monospace; font-size: 23px; letter-spacing: .02em; }
.welcome-card-preview[data-font="technical_mono_bold"] .welcome-card-preview-copy strong { font-family: "Courier New", Consolas, monospace; font-size: 23px; font-weight: 800; letter-spacing: .02em; }

.welcome-channel-banner-brandmark {
  position: absolute;
  left: 2.1%;
  top: 7%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px 4px 4px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px 4px 12px 4px;
  background: rgba(4,4,9,.8);
  box-shadow: 0 0 18px rgba(0,0,0,.38);
}
.welcome-channel-banner-brandmark img { width: clamp(20px, 3vw, 31px); height: clamp(20px, 3vw, 31px); border-radius: 8px 3px 8px 3px; object-fit: cover; }
.welcome-channel-banner-brandmark span { color: #fff; font: clamp(6px, .9vw, 9px) LCARSTerminal, Consolas, monospace; letter-spacing: .13em; }
.welcome-channel-banner-preview::before {
  content: "LCARS-PRIME // WELCOME CHANNEL";
  position: absolute;
  right: 2.4%;
  top: 8%;
  z-index: 2;
  color: var(--wc-banner-accent);
  font: clamp(6px, .9vw, 9px) LCARSTerminal, Consolas, monospace;
  letter-spacing: .13em;
  text-shadow: 0 2px 4px rgba(0,0,0,.9);
}
.welcome-channel-banner-preview[data-font="lcars_terminal"] strong { font-family: LCARSTerminal, Consolas, monospace; font-size: clamp(22px, 3.4vw, 48px); }
.welcome-channel-banner-preview[data-font="sans"] strong { font-family: Arial, Helvetica, sans-serif; }
.welcome-channel-banner-preview[data-font="sans_bold"] strong { font-family: Arial, Helvetica, sans-serif; font-weight: 800; }
.welcome-channel-banner-preview[data-font="sans_condensed"] strong { font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-stretch: condensed; }
.welcome-channel-banner-preview[data-font="serif"] strong { font-family: Georgia, "Times New Roman", serif; text-transform: none; }
.welcome-channel-banner-preview[data-font="serif_bold"] strong { font-family: Georgia, "Times New Roman", serif; font-weight: 800; text-transform: none; }
.welcome-channel-banner-preview[data-font="technical_mono"] strong { font-family: "Courier New", Consolas, monospace; font-size: clamp(22px, 3.4vw, 48px); letter-spacing: .02em; }
.welcome-channel-banner-preview[data-font="technical_mono_bold"] strong { font-family: "Courier New", Consolas, monospace; font-size: clamp(22px, 3.4vw, 48px); font-weight: 800; letter-spacing: .02em; }

.welcome-card-preview.has-custom-background { background-size: cover; background-repeat: no-repeat; aspect-ratio: 1000 / 430; min-height: 0 !important; padding: 0 !important; }
.welcome-image-adjuster { width: min(940px,95vw); max-height: 92vh; overflow: auto; color: #fff; background: #11111b; border: 1px solid var(--violet); border-radius: 18px; padding: 22px; }
.welcome-image-adjuster::backdrop { background: rgba(0,0,0,.8); }
.welcome-image-adjuster p { color: #bbb6cd; }
.welcome-image-framing-stage { width: 100%; aspect-ratio: 1000 / 430; min-height: 0 !important; padding: 0 !important; cursor: grab; touch-action: none; }
.welcome-image-framing-stage * { pointer-events: none; }
.welcome-image-adjuster-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 18px 0; }
.welcome-image-adjuster-controls label { display: grid; gap: 8px; }
.welcome-image-adjuster-controls output { color: var(--violet); }
.welcome-image-adjuster-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.welcome-image-adjuster-actions [data-frame-apply] { background: var(--orange); color: #08080e; }
@media(max-width:600px) { .welcome-image-adjuster-controls { grid-template-columns: 1fr; } }
.welcome-card-preview.has-custom-background::before,
.welcome-card-preview.has-custom-background::after { display: none; }
.welcome-card-preview.has-custom-background .welcome-card-brandmark,
.welcome-card-preview.has-custom-background .welcome-card-preview-copy small,
.welcome-card-preview.has-custom-background .welcome-card-preview-copy i,
.welcome-card-preview.has-custom-background .welcome-card-preview-copy b { display: none; }
.welcome-channel-banner-preview.has-custom-background .welcome-channel-banner-brandmark,
.welcome-channel-banner-preview.has-custom-background::before,
.welcome-channel-banner-preview.has-custom-background::after { display: none; }

@media (max-width: 900px) {
  .server-bot-identity-grid { grid-template-columns: 1fr; }
  .welcome-card-brandmark span,
  .welcome-channel-banner-brandmark span,
  .welcome-channel-banner-preview::before { display: none; }
}

/* Multi-embed Discord message composer */
.embed-message-stack-controls {
  display: grid;
  gap: 10px;
  margin: 12px 0 16px;
  padding: 13px 14px;
  border: 1px solid #38333f;
  border-left: 6px solid var(--violet);
  border-radius: 16px 5px 16px 5px;
  background: #09090d;
}
.embed-message-stack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.embed-message-stack-head > div:first-child { display: grid; gap: 2px; }
.embed-message-stack-head b { color: #f1edf5; font-weight: 400; text-transform: uppercase; }
.embed-message-stack-head span { color: var(--blue); font: 10px LCARSTerminal, Consolas, monospace; }
.embed-message-stack-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.embed-message-stack-actions button,
.embed-page-tabs button {
  border: 1px solid #403b4b;
  border-radius: 14px 4px 14px 4px;
  background: #111018;
  color: #c8c2d1;
  padding: 7px 10px;
  cursor: pointer;
}
.embed-message-stack-actions button.primary { background: var(--orange); color: #08080a; border-color: var(--orange); }
.embed-message-stack-actions button:disabled { opacity: .38; cursor: not-allowed; }
.embed-page-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0 5px; }
.embed-page-tabs button { min-width: 120px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.embed-page-tabs button b { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: #292633; color: #fff; }
.embed-page-tabs button span { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.embed-page-tabs button.active { border-color: var(--orange); color: #fff; background: #21170b; box-shadow: inset 0 0 0 1px rgba(255,156,0,.18); }
.embed-page-tabs button.active b { background: var(--orange); color: #08080a; }
.embed-message-stack-controls > p { margin: 0; color: #8d8899; font: 10px/1.45 LCARSTerminal, Consolas, monospace; }
.embed-total-meter.message-budget { border-color: #3d3544; background: #0c090f; }
#embedDescription.input-over-limit { border-color: #d84f58 !important; box-shadow: 0 0 0 1px rgba(216,79,88,.28); }
label small.over-limit, .embed-total-meter .over-limit { color: #ff6b71 !important; }
.discord-embed-stack { display: grid; gap: 5px; margin-top: 12px; font-family: Arial, sans-serif; }
.discord-embed-stack > .discord-embed { margin-top: 0; cursor: pointer; }
.discord-embed.preview-selected { outline: 1px solid rgba(255,156,0,.55); outline-offset: -1px; }
.embed-preview-index { margin-bottom: 7px; color: #8d8997; font: 9px LCARSTerminal, Consolas, monospace; letter-spacing: .12em; }
.embed-message-buttons-preview { margin-top: 8px; }

/* Searchable Unicode + server + LCARS application emoji directory */
.smart-emoji-choices .smart-emoji-section > div { align-items: stretch; }
.smart-emoji-choices .smart-emoji-section button:not(.custom) {
  min-height: 54px;
  display: grid;
  grid-template-rows: auto auto;
  place-items: center;
  gap: 2px;
  padding: 5px;
}
.smart-emoji-choices .smart-emoji-section button:not(.custom) > span { font-size: 23px; line-height: 1; }
.smart-emoji-choices .smart-emoji-section button:not(.custom) > small {
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9d98aa;
  font: 7px LCARSTerminal, Consolas, monospace;
}
.command-policy-card .command-policy-grid { margin-top: 1rem; }
.command-policy-card select[multiple] { min-height: 9.5rem; }
.command-policy-card .controls-disabled { opacity: .48; }
.command-mode-panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 157, 46, .35); }

/* Territory Scheduler */
.territory-scheduler-editor fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.territory-scheduler-editor fieldset:disabled { opacity: .72; }
.territory-channel-warning {
  display: grid;
  gap: 4px;
  margin: 12px 0 18px;
  padding: 12px 15px;
  border: 1px solid #e15b64;
  border-left: 7px solid #e15b64;
  border-radius: 14px 4px 14px 4px;
  background: rgba(225, 91, 100, .09);
  color: #f1d4d7;
}
.territory-channel-warning b { color: #ff7a82; text-transform: uppercase; }
.territory-record-warning { border-color: rgba(225, 91, 100, .7) !important; }
.territory-map-slot {
  display: grid;
  min-height: 160px;
  place-content: center;
  gap: 7px;
  margin-top: 18px;
  padding: 24px;
  text-align: center;
  border: 1px dashed rgba(88, 166, 255, .7);
  border-radius: 24px 6px 24px 6px;
  background:
    linear-gradient(135deg, rgba(88, 166, 255, .08), transparent 55%),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(88, 166, 255, .025) 28px 29px),
    #080b10;
}
.territory-map-slot span {
  color: var(--blue);
  font: 10px LCARSTerminal, Consolas, monospace;
  letter-spacing: .16em;
}
.territory-map-slot b { color: #f1edf5; font-weight: 400; text-transform: uppercase; }
.territory-map-slot p { margin: 0; color: #918c9b; font: 10px/1.5 LCARSTerminal, Consolas, monospace; }

/* R15 mobile/tablet typography hotfix.
   Desktop keeps the existing LCARS typography. Smaller and touch-first devices
   use the native UI font stack for predictable rendering and readability. */
:root {
  --lcars-mobile-ui-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, Verdana, sans-serif;
}

/* Temporary Channels */
.temporary-channel-card { display: grid; gap: 18px; }
.temporary-channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.temporary-channel-section,
.temporary-managed {
  min-width: 0;
  padding: 16px;
  border: 1px solid #3a3440;
  border-radius: 20px 6px 20px 6px;
  background: #09090e;
}
.temporary-section-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.temporary-section-head > div { min-width: 0; display: grid; gap: 2px; }
.temporary-section-head span { color: var(--peach); font-size: 11px; letter-spacing: .12em; }
.temporary-section-head h3 { margin: 0; color: #fff; }
.temporary-duration { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(110px, auto); gap: 8px; }
.temporary-channel-warning {
  display: grid; gap: 4px; padding: 13px 15px;
  border: 1px solid #e15b64; border-left: 7px solid #e15b64;
  border-radius: 14px 4px 14px 4px; background: rgba(225,91,100,.09);
}
.temporary-channel-warning b { color: #ff8087; }
.temporary-channel-warning span { color: #e6d9dd; }
.temporary-instance-list { display: grid; gap: 8px; margin-top: 10px; }
.temporary-instance {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid #2e2b37; border-radius: 12px; background: #0d0d13;
}
.temporary-instance > div { min-width: 0; display: grid; gap: 2px; }
.temporary-instance b { overflow-wrap: anywhere; }
.temporary-instance span, .temporary-instance small { color: #aaa5b7; }
.temporary-instance.missing { border-color: #e15b64; }

@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  body,
  .shell,
  .shell * {
    font-family: var(--lcars-mobile-ui-font) !important;
  }

  body {
    font-size: 16px;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .shell h1,
  .shell h2,
  .shell h3,
  .shell h4,
  .shell h5,
  .shell h6 {
    line-height: 1.12 !important;
    letter-spacing: .01em !important;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }

  .shell button,
  .shell input,
  .shell select,
  .shell textarea {
    font-size: 16px !important;
    line-height: 1.35 !important;
    letter-spacing: normal !important;
    min-height: 44px;
  }

  .shell textarea { min-height: 112px; }
  .shell label,
  .shell p,
  .shell li,
  .shell td,
  .shell th {
    font-size: 15px !important;
    line-height: 1.55 !important;
    letter-spacing: normal !important;
  }

  .shell small,
  .shell .hint,
  .shell label small,
  .shell .feature-placeholder-note,
  .shell .rr-helper-copy,
  .shell .rr-media-row small,
  .shell .rr-multiple-toggle small,
  .shell .rr-reaction-mode-options small,
  .shell .reaction-role-dialog p,
  .shell .territory-map-slot p,
  .shell .media-control-actions span {
    font-size: 13px !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
  }

  .dashboard-command-header h2,
  .feature-placeholder h2,
  .welcome-hero h2,
  .rr-command-header h2,
  .rr-editor-title-block h2,
  .reaction-role-dialog h2,
  .gate h2 {
    font-size: clamp(28px, 7.5vw, 38px) !important;
  }

  .nav,
  .nav-group-label,
  .dashboard-kicker,
  .dashboard-section-code,
  .dashboard-section-header p,
  .tile-cap,
  .tile-copy small,
  .tile-footer b,
  .tile-footer small,
  .tile-power,
  .tile-open-label,
  .feature-placeholder-bar,
  .feature-placeholder-kicker,
  .feature-placeholder-grid span,
  .welcome-kicker,
  .lcars-power-control,
  .rr-kicker,
  .rr-editor-title-block > span,
  .rr-section-header span,
  .rr-section-header strong,
  .rr-master-power b,
  .rr-master-power small,
  .status-pill,
  .temporary-section-head span,
  .embed-message-stack-head span,
  .embed-preview-index,
  .territory-map-slot span,
  .telemetry,
  .identity small,
  .account,
  .savebar span {
    letter-spacing: normal !important;
  }

  .temporary-channel-grid { grid-template-columns: 1fr; }
  .temporary-instance { align-items: flex-start; flex-direction: column; }
  .compact-card-head { flex-wrap: wrap; }

  /* Keep user-selectable artwork preview title fonts accurate. */
  .welcome-card-preview[data-font="lcars_terminal"] .welcome-card-preview-copy strong { font-family: LCARSTerminal, Consolas, monospace !important; }
  .welcome-card-preview[data-font="sans"] .welcome-card-preview-copy strong,
  .welcome-card-preview[data-font="sans_bold"] .welcome-card-preview-copy strong { font-family: Arial, sans-serif !important; }
  .welcome-card-preview[data-font="sans_condensed"] .welcome-card-preview-copy strong { font-family: "Arial Narrow", Arial, sans-serif !important; }
  .welcome-card-preview[data-font="serif"] .welcome-card-preview-copy strong,
  .welcome-card-preview[data-font="serif_bold"] .welcome-card-preview-copy strong { font-family: Georgia, serif !important; }
  .welcome-card-preview[data-font="technical_mono"] .welcome-card-preview-copy strong,
  .welcome-card-preview[data-font="technical_mono_bold"] .welcome-card-preview-copy strong { font-family: "Courier New", Consolas, monospace !important; }

  .welcome-channel-banner-preview[data-font="lcars_terminal"] strong { font-family: LCARSTerminal, Consolas, monospace !important; }
  .welcome-channel-banner-preview[data-font="sans"] strong,
  .welcome-channel-banner-preview[data-font="sans_bold"] strong { font-family: Arial, Helvetica, sans-serif !important; }
  .welcome-channel-banner-preview[data-font="sans_condensed"] strong { font-family: "Arial Narrow", Arial, Helvetica, sans-serif !important; }
  .welcome-channel-banner-preview[data-font="serif"] strong,
  .welcome-channel-banner-preview[data-font="serif_bold"] strong { font-family: Georgia, "Times New Roman", serif !important; }
  .welcome-channel-banner-preview[data-font="technical_mono"] strong,
  .welcome-channel-banner-preview[data-font="technical_mono_bold"] strong { font-family: "Courier New", Consolas, monospace !important; }
}

@media (max-width: 640px) {
  .nav { font-size: 15px; line-height: 1.2; }
  .nav-group-label { font-size: 12px; }
  .identity small { font-size: 12px !important; }
  .telemetry { font-size: 11px; }

  .shell small,
  .shell .hint,
  .shell label small,
  .shell .feature-placeholder-note,
  .shell .rr-helper-copy,
  .shell .rr-media-row small,
  .shell .rr-multiple-toggle small,
  .shell .rr-reaction-mode-options small,
  .shell .reaction-role-dialog p,
  .shell .territory-map-slot p,
  .shell .media-control-actions span {
    font-size: 14px !important;
  }

  .temporary-duration { grid-template-columns: 1fr; }
  .editor-actions,
  .compact-record-actions { align-items: stretch; flex-direction: column; }
  .editor-actions button,
  .compact-record-actions button { width: 100%; }
}
.alert-message-field { position: relative; }
.alert-message-editor {
  min-height: 80px;
  padding: 12px;
  border: 1px solid #292b36;
  border-radius: 8px;
  background: #050508;
  color: var(--lcars-text, #f5f5ff);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: inherit;
  text-transform: none;
}
.alert-message-editor:focus { outline: 2px solid #ff9f00; outline-offset: 2px; }
.alert-role-mention { border-radius: 4px; padding: 1px 4px; color: #ddd9ff; background: #393458; }
.alert-role-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 240px;
  overflow-y: auto;
  background: #12131c;
  border: 1px solid #ff9f00;
  border-radius: 8px;
  padding: 6px;
}
.alert-role-suggestions[hidden] { display: none; }
.alert-role-suggestions button { display: block; width: 100%; padding: 8px 12px; text-align: left; color: #f5f5ff; background: transparent; border: 0; border-radius: 4px; text-transform: none; }
.alert-role-suggestions button.active, .alert-role-suggestions button:hover { background: #393458; }