:root {
  color-scheme: dark;
  --bg: #101212;
  --panel: #191c1d;
  --raised: #222628;
  --line: #303637;
  --text: #f5f4ee;
  --muted: #9ba5a5;
  --yellow: #efdb53;
  --green: #b2becb;
  --radius: 22px;
  --sidebar: 238px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font:
    14px -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.16s;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
button,
a,
input,
select,
textarea {
  outline-offset: 4px;
}
a {
  color: inherit;
  text-decoration: none;
}
svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.muted {
  color: var(--muted);
}
.sidebar {
  width: var(--sidebar);
  position: fixed;
  inset: 0 auto 0 0;
  padding: 28px 18px 20px;
  border-right: 1px solid #2b3030;
  background: #141717;
  display: flex;
  flex-direction: column;
  overflow: auto;
  z-index: 2;
}
.sidebar > * {
  flex-shrink: 0;
}
.brand {
  font-size: 29px;
  font-weight: 760;
  letter-spacing: -1px;
  margin: 0 13px 34px;
  display: block;
}
.brand-accent {
  color: var(--yellow);
}
.brand small {
  display: block;
  font-size: 9px;
  font-weight: 450;
  letter-spacing: 1px;
  color: #787e86;
  margin-top: 9px;
}
.server-label,
.nav-label {
  margin: 0 13px 12px;
  font-size: 9px;
  color: #718280;
  font-weight: 600;
  letter-spacing: 1px;
}
.server-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #394451;
  padding: 12px;
  border-radius: 15px;
  background: #1f2429;
  margin-bottom: 30px;
}
.avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 11px;
  background: #b7c2ce21;
  color: #e3df96;
  font-size: 11px;
  font-weight: 650;
}
.server-picker select {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e2e7d3;
  font-size: 11px;
  font-weight: 600;
  outline-offset: 8px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 13px 15px;
  margin: 4px 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #9eaaaa;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  position: relative;
}
.nav-item svg {
  width: 18px;
  height: 18px;
  color: #839593;
}
.nav-item:hover {
  background: #222929;
  color: #edf2e5;
}
.nav-item.active {
  background: var(--yellow);
  color: #171d23;
  box-shadow: 0 6px 20px #0002;
}
.nav-item.active svg {
  color: #222932;
}
.nav-item.active:after {
  content: "↗";
  margin-left: auto;
  font-size: 15px;
}
.sidebar-bottom {
  margin-top: auto;
  padding-top: 30px;
}
.back-to-servers {
  width: 100%;
  justify-content: flex-start !important;
  margin-bottom: 20px;
  font-size: 11px !important;
}
.account {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 17px 4px 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  text-align: left;
}
.account strong {
  font-size: 11px;
  font-weight: 550;
}
.account small {
  display: block;
  font-size: 9px;
  color: #7e9290;
  margin-top: 5px;
}
.account > span:last-child {
  margin-left: auto;
  color: #8b939c;
}
.user-avatar {
  background: #30353b;
  color: #bbc4ce;
}
.workspace {
  margin-left: var(--sidebar);
  min-height: 100vh;
  background: radial-gradient(ellipse at 92% 0%, #63799230, transparent 27%);
}
.topbar {
  height: 70px;
  padding: 0 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #2b3232;
  font-size: 11px;
}
.breadcrumbs {
  color: #788390;
}
.breadcrumbs span {
  color: #525962;
  margin: 0 12px;
}
.breadcrumbs strong {
  color: #bec4ca;
  font-weight: 500;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 550;
  color: #b6c1ce;
  background: #8395aa0b;
  border: 1px solid #4d5d703a;
  border-radius: 30px;
  padding: 7px 11px;
  white-space: nowrap;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  color: #ced5dd;
  padding: 0;
  font-size: 11px;
  cursor: pointer;
}
.text-link:hover {
  color: var(--yellow);
}
.text-link svg {
  width: 14px;
  height: 14px;
}
.top-actions #switch-server {
  display: none;
}
.mobile-servers {
  display: none;
}
.topbar .ghost-button {
  padding: 8px 12px;
  border-radius: 30px;
  font-size: 10px;
  background: #232930;
  border-color: #394552;
  color: #c1cad4;
}
main {
  max-width: 1500px;
  margin: auto;
  padding: 34px;
}
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 28px;
}
.page-heading h1 {
  font-size: 33px;
  letter-spacing: -1.2px;
  font-weight: 650;
  line-height: 1.2;
  margin: 0 0 10px;
}
.page-heading p {
  font-size: 12px;
  color: #9ca4ae;
  line-height: 1.7;
  margin: 0;
}
.dashboard-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #4756684a;
  border-radius: 17px;
  background: #232a3352;
  min-width: 200px;
}
.live-dot,
.green-dot,
.yellow-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}
.dashboard-status .live-dot {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 5px #b2becb0c;
}
.live-dot.inactive {
  background: var(--yellow);
}
.dashboard-status strong {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #ced5dd;
}
.dashboard-status small {
  display: block;
  font-size: 9px;
  color: #818f9f;
  margin-top: 6px;
}
.yellow-dot {
  background: var(--yellow);
  margin-right: 7px;
}
.primary-button,
.ghost-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #41464c;
  border-radius: 11px;
  padding: 11px 16px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}
.primary-button {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #171d23;
  box-shadow: 0 4px 12px #0002;
}
.primary-button:hover {
  background: #f8e874;
  transform: translateY(-1px);
}
.ghost-button {
  background: #23262a;
  color: #c9ced4;
}
.ghost-button:hover {
  background: #30353b;
  border-color: #636e7a;
}
.primary-button svg,
.ghost-button svg {
  width: 16px;
  height: 16px;
}
.icon-button {
  height: 32px;
  width: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #404851;
  border-radius: 10px;
  background: #272d34;
  color: #bbc5d0;
}
.icon-button svg {
  height: 15px;
  width: 15px;
}
.reference-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.stat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: #202526;
  border: 1px solid #383c41;
  border-radius: 20px;
  min-width: 0;
  overflow: hidden;
}
.stat-card:first-child {
  background: #222e30;
  border-color: #3c5557;
}
.stat-card:last-child {
  background: var(--yellow);
  color: #1d232b;
  border-color: var(--yellow);
}
.stat-card:last-child:after {
  content: "✦";
  position: absolute;
  right: 15px;
  bottom: -25px;
  font-size: 116px;
  color: #404e5e20;
  line-height: 1;
  pointer-events: none;
}
.stat-symbol {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 13px;
  background: #52656526;
  color: #a8c1c1;
  flex-shrink: 0;
}
.stat-symbol svg {
  width: 22px;
  height: 22px;
}
.stat-card:last-child .stat-symbol {
  background: #37435123;
  color: #313b47;
}
.stat-top {
  font-size: 11px;
  color: #b7bfc9;
  font-weight: 500;
  line-height: 1.5;
}
.stat-card:last-child .stat-top {
  color: #36414f;
}
.stat-value {
  font-size: 31px;
  font-weight: 620;
  letter-spacing: -1px;
  line-height: 1.15;
  margin: 8px 0 6px;
  font-variant-numeric: tabular-nums;
}
.stat-caption {
  font-size: 9px;
  color: #728b88;
}
.stat-card:last-child .stat-caption {
  color: #475769;
}
.panel {
  background: var(--panel);
  border: 1px solid #30353b;
  border-radius: var(--radius);
  overflow: hidden;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 26px 19px;
}
.panel h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.25px;
  margin: 0;
}
.panel-head p {
  font-size: 11px;
  line-height: 1.7;
  color: #818b97;
  margin: 7px 0 0;
}
.range-select {
  background: #2a2e33;
  color: #c6cfd9;
  padding: 9px 13px;
  border: 1px solid #434d58;
  border-radius: 30px;
  font-size: 10px;
  width: auto;
  max-width: 150px;
  flex-shrink: 0;
}
.chart-wrap {
  padding: 0 23px 20px;
}
.chart {
  display: block;
  width: 100%;
  height: 210px;
  overflow: visible;
}
.chart text {
  font-size: 10px;
  fill: #838d99;
}
.chart line {
  stroke: #353c44;
  stroke-dasharray: 2 6;
}
.chart-summary {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 10px 10px 0;
  font-size: 9px;
  color: #919ca9;
}
.chart-summary b {
  color: #bac4d0;
  font-weight: 550;
}
.legend-dot {
  display: inline-block;
  background: var(--yellow);
  border-radius: 50%;
  width: 5px;
  height: 5px;
  margin-right: 7px;
}
.reference-recent {
  margin-top: 20px;
}
.activity-list {
  padding: 0 26px 8px;
}
.activity-row {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 0;
  border-top: 1px solid #2f343a;
}
.activity-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: #53482c46;
  color: #e0c96d;
  border: 1px solid #a7944030;
  border-radius: 11px;
  flex-shrink: 0;
}
.activity-icon svg {
  width: 15px;
  height: 15px;
}
.activity-copy strong {
  font-size: 11px;
  font-weight: 550;
  color: #d0d6de;
}
.activity-copy p {
  color: #75808e;
  font-size: 10px;
  line-height: 1.6;
  margin: 5px 0 0;
}
.activity-time {
  color: #828d99;
  font-size: 10px;
  white-space: nowrap;
  margin-left: auto;
}
.banana-extra {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  border: 1px solid #4a5869;
  background:
    radial-gradient(ellipse at 90% 50%, #a29f5030, transparent 60%), #20252b;
  border-radius: 21px;
  padding: 23px 26px;
  margin-top: 20px;
  overflow: hidden;
}
.banana-extra:after {
  content: "✳";
  position: absolute;
  color: #a3b0c00b;
  font-size: 175px;
  right: 120px;
  top: -42px;
  pointer-events: none;
}
.extra-icon {
  display: grid;
  place-items: center;
  background: #e5db8a15;
  color: #e2dc94;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  flex-shrink: 0;
}
.banana-extra h2 {
  font-size: 16px;
  letter-spacing: -0.4px;
  font-weight: 600;
  margin: 0 0 7px;
}
.banana-extra p {
  font-size: 11px;
  line-height: 1.8;
  margin: 0;
  color: #93a1b1;
}
.banana-extra .primary-button {
  margin-left: auto;
  z-index: 1;
}
footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: 1500px;
  margin: auto;
  padding: 0 34px 26px;
  color: #8b949f;
  font-size: 9px;
  line-height: 1.8;
}
footer > span:last-child {
  color: #64707e;
}
.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
  gap: 22px;
  align-items: start;
}
.form-panel {
  padding: 26px;
  margin-bottom: 20px;
}
.form-panel h2 {
  font-size: 16px;
  margin: 0 0 10px;
}
.form-panel > p {
  font-size: 12px;
  color: #8d97a3;
  line-height: 1.8;
  margin: 0 0 22px;
}
.field {
  display: block;
  margin-top: 22px;
  font-size: 12px;
  color: #c6ced7;
}
.field > span {
  display: block;
  font-weight: 500;
  margin-bottom: 10px;
}
.field small {
  display: block;
  font-size: 10px;
  line-height: 1.8;
  color: #74808e;
  margin-top: 9px;
}
input[type="text"],
select,
textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #3d4650;
  border-radius: 10px;
  background: #12161a;
  color: #d1d7df;
  font-size: 12px;
}
input[type="text"]:focus,
select:focus,
textarea:focus {
  outline: 1px solid #9caabb66;
  border-color: #7a8ea5;
}
input:disabled,
select:disabled {
  opacity: 0.45;
}
textarea {
  min-height: 150px;
  line-height: 1.8;
  resize: vertical;
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid #303740;
}
.toggle-row strong {
  font-size: 12px;
  font-weight: 550;
}
.toggle-row p {
  font-size: 11px;
  color: #828e9c;
  line-height: 1.8;
  margin: 7px 0 0;
}
.switch {
  appearance: none;
  width: 39px;
  height: 23px;
  position: relative;
  border: 1px solid #4e5762;
  border-radius: 20px;
  background: #333a43;
  cursor: pointer;
  flex-shrink: 0;
}
.switch:before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #abb6c4;
  transition: transform 0.15s;
}
.switch:checked {
  background: var(--yellow);
  border-color: var(--yellow);
}
.switch:checked:before {
  transform: translateX(16px);
  background: #28303a;
}
.switch:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.toggle-row .badge {
  font-size: 8px;
  padding: 3px 7px;
  margin-left: 6px;
}
.info-card {
  align-self: start;
  padding: 26px;
  border-color: #3d4a5a;
  background:
    radial-gradient(ellipse at top right, #63799223, transparent 65%), #1a1f25;
  overflow-wrap: anywhere;
}
.spark {
  color: #a6b3c3;
  font-size: 25px;
  display: block;
  margin-bottom: 17px;
}
.spark svg {
  height: 28px;
  width: 28px;
}
.info-card h2 {
  font-size: 17px;
  line-height: 1.6;
}
.info-card p {
  font-size: 11px;
  line-height: 1.9;
  color: #8294aa;
  margin: 15px 0;
}
.info-card ul {
  padding-left: 16px;
  color: #90a1b4;
  font-size: 11px;
  line-height: 1.9;
}
.info-card li + li {
  margin-top: 9px;
}
.role-options {
  border: 1px solid #3f4751;
  border-radius: 12px;
  padding: 6px 15px;
  background: #12161a;
  max-height: 275px;
  overflow: auto;
}
.role-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  font-size: 12px;
  cursor: pointer;
}
.role-option input {
  accent-color: var(--yellow);
  width: 15px;
  height: 15px;
  cursor: pointer;
}
.role-option:has(input:disabled) {
  opacity: 0.45;
  cursor: not-allowed;
}
.locked-banner {
  font-size: 11px;
  line-height: 1.8;
  padding: 14px 18px;
  margin-bottom: 20px;
  border: 1px solid #a4a4583f;
  border-radius: 13px;
  color: #a5b2c2;
  background: #48586b15;
}
.notice-preview {
  background: #22262b;
  border-left: 3px solid #97a7b9;
  border-radius: 12px;
  padding: 22px;
  font-size: 12px;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.notice-logo {
  height: 25px;
  width: 25px;
  object-fit: contain;
  vertical-align: middle;
}
.notice-preview h3 {
  font-size: 17px;
  line-height: 1.5;
}
.notice-preview hr {
  border: 0;
  border-top: 1px solid #434b54;
}
.notice-preview small {
  color: #85919f;
}
.check-row,
.config-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 0;
  border-top: 1px solid #343b44;
  font-size: 11px;
  color: #95a5b7;
}
.config-row strong {
  font-weight: 500;
  color: #bfc8d3;
}
.good {
  color: var(--green);
}
.bad {
  color: #efac9e;
}
.panel-foot {
  padding: 15px 25px;
  border-top: 1px solid #343a42;
  color: #7d8896;
  font-size: 10px;
  line-height: 1.8;
}
.loading,
.empty-state {
  text-align: center;
  padding: 75px 25px;
  color: #8f9ba9;
  line-height: 1.9;
}
.empty-state h1 {
  color: var(--text);
  font-size: 24px;
}
.empty-state button {
  margin-top: 17px;
}
.savebar {
  position: fixed;
  bottom: 24px;
  left: calc(50% + 119px);
  transform: translateX(-50%);
  width: min(750px, calc(100vw - 300px));
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #293038;
  border: 1px solid #70859d7a;
  border-radius: 16px;
  box-shadow: 0 10px 50px #0008;
  font-size: 11px;
  z-index: 6;
}
.savebar button + button {
  margin-left: 7px;
}
.savebar[hidden],
#toast[hidden] {
  display: none;
}
#toast {
  position: fixed;
  bottom: 105px;
  right: 28px;
  max-width: 420px;
  padding: 17px 21px;
  border: 1px solid #5c6f86;
  border-radius: 14px;
  background: #28313b;
  font-size: 12px;
  line-height: 1.8;
  box-shadow: 0 10px 40px #0006;
  z-index: 8;
}
.premium-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feature-card {
  padding: 26px;
}
.feature-card > svg {
  width: 25px;
  height: 25px;
  color: var(--yellow);
  margin-bottom: 20px;
}
.feature-card p {
  font-size: 12px;
  line-height: 1.9;
  color: #8694a4;
}
.premium-help {
  margin-top: 22px;
}
.command {
  display: block;
  padding: 13px;
  border: 1px solid #3b4755;
  border-radius: 10px;
  background: #14181d;
  color: #afbbc9;
  font: 12px monospace;
  margin: 12px 0;
}
.hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px;
  border: 1px solid #3e4c5c;
  border-radius: 22px;
  background: #1e242b;
  margin-bottom: 23px;
}
.hero-shield {
  height: 49px;
  width: 49px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #96a6b816;
  color: #b4bfcc;
  flex-shrink: 0;
}
.hero h2 {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.5px;
}
.hero p {
  margin: 0;
  font-size: 12px;
  line-height: 1.8;
  color: #8a9baf;
}
.hero > .badge,
.hero > .primary-button {
  margin-left: auto;
}
.scenario-config {
  padding: 20px 0 0;
  border-top: 1px solid #36424f;
  margin-top: 24px;
  line-height: 1.8;
}
.scenario-config span {
  display: block;
  font-size: 9px;
  color: #77899e;
}
.scenario-config strong {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #a4b1c1;
  margin-top: 8px;
}
.scenario-result {
  position: sticky;
  top: 25px;
  background: linear-gradient(155deg, #242b34, #1a1d21);
  border-color: #4d5d70;
}
.scenario-result > .badge {
  margin-bottom: 24px;
}
.scenario-result h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.8px;
  line-height: 1.4;
  margin: 0 0 13px;
  color: #edf1d8;
}
.scenario-result p {
  font-size: 12px;
  line-height: 1.8;
  color: #8f9fb2;
}
.scenario-result > small {
  display: block;
  color: #6a7d93;
  font-size: 10px;
  line-height: 1.9;
  margin-top: 22px;
}
.scenario-steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 25px 0;
}
.scenario-steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 23px 34px;
  border-left: 1px solid #51627670;
  margin-left: 12px;
}
.scenario-steps li:last-child {
  border: 0;
  padding-bottom: 0;
}
.scenario-steps li:before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: -12px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: #252d36;
  font-size: 10px;
  font-weight: 650;
}
.scenario-steps strong {
  font-size: 12px;
  font-weight: 550;
}
.scenario-steps p {
  font-size: 11px;
  margin: 7px 0 0;
}
.settings-export {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 23px 26px;
  border-style: dashed;
  background: transparent;
}
.settings-export p {
  color: #788798;
  font-size: 11px;
  line-height: 1.8;
  margin: 8px 0 0;
}
.gateway .sidebar,
.gateway .topbar,
.gateway footer {
  display: none;
}
.gateway .workspace {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse at 70% 25%, #b3a34b17, transparent 48%);
}
.gateway main {
  max-width: 1170px;
  padding: 34px 40px 45px;
  margin: auto;
}
.gateway-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 65px;
}
.wordmark {
  font-size: 36px;
  font-weight: 750;
  letter-spacing: -1.5px;
  display: inline-block;
  line-height: 1;
}
.wordmark span {
  color: var(--yellow);
}
.wordmark-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
}
.welcome-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 45px;
  align-items: center;
  min-height: 460px;
}
.welcome-card {
  padding: 15px 0;
  border: 0;
  background: transparent;
}
.welcome-eyebrow {
  font-size: 10px;
  color: #8496ab;
  letter-spacing: 1.4px;
  margin-bottom: 25px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.welcome-eyebrow:before {
  content: "✦";
  font-size: 16px;
  color: var(--yellow);
}
.welcome-card .wordmark {
  display: none;
}
.welcome-card h1 {
  font-size: 51px;
  line-height: 1.13;
  font-weight: 650;
  letter-spacing: -2px;
  margin: 0 0 24px;
}
.welcome-card p {
  font-size: 14px;
  color: #909aa5;
  line-height: 1.9;
  max-width: 365px;
  margin: 0 0 28px;
}
.welcome-card .primary-button,
.welcome-card .ghost-button {
  display: flex;
  justify-content: space-between;
  padding: 16px 21px;
  width: 100%;
  max-width: 365px;
  font-size: 13px;
  border-radius: 13px;
  margin-bottom: 12px;
}
.welcome-card small {
  display: block;
  max-width: 365px;
  font-size: 10px;
  line-height: 1.9;
  color: #6b747f;
  margin-top: 18px;
}
.welcome-logo {
  position: relative;
  min-height: 425px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 19px;
  border: 1px solid #605e3d;
  background:
    radial-gradient(ellipse at 50% 45%, #afa24632, transparent 70%), #1d2227;
  border-radius: 42% 42% 25px 25px;
  padding: 28px;
  overflow: hidden;
}
.welcome-logo:before {
  content: "✳";
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 47px;
  color: #efdf6660;
}
.welcome-logo:after {
  content: "01";
  position: absolute;
  bottom: 24px;
  left: 26px;
  font-size: 10px;
  letter-spacing: 1px;
  color: #697889;
}
.welcome-logo img {
  max-width: 315px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 35px #0004);
  transform: rotate(-6deg);
}
.welcome-logo span {
  font-size: 10px;
  color: #c9c7a0;
  letter-spacing: 1px;
}
.welcome-features {
  margin-top: 60px;
  padding: 22px 0;
  border-top: 1px solid #303740;
  display: flex;
  justify-content: space-between;
  gap: 25px;
  font-size: 11px;
  color: #7c8794;
}
.welcome-features span {
  display: flex;
  align-items: center;
  gap: 10px;
}
.welcome-features svg {
  width: 18px;
  height: 18px;
  color: #96a5b7;
}
.server-page-heading {
  text-align: left;
  margin: 0 0 32px;
}
.server-page-heading h1 {
  font-size: 36px;
  font-weight: 650;
  letter-spacing: -1.2px;
  margin: 0 0 12px;
}
.server-page-heading p {
  font-size: 13px;
  color: #838e9c;
  margin: 0;
}
.server-page-panel {
  padding: 0;
  background: none;
  border: 0;
}
.server-page-search {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #1c2126;
  border: 1px solid #394554;
  border-radius: 14px;
  padding: 5px 15px;
  max-width: 100%;
  margin-bottom: 24px;
}
.server-page-search > span {
  color: #94a2b2;
  display: flex;
}
.server-page-search input {
  border: 0;
  background: none;
  padding: 14px 0;
  outline: none;
  font-size: 13px;
}
.server-page-search input:focus {
  outline: none;
}
.server-page-search:focus-within {
  border-color: #8899ae;
}
.server-page-search .icon-button {
  background: none;
  border: 0;
  font-size: 22px;
  color: #738293;
}
.server-row {
  display: flex;
  align-items: center;
  gap: 19px;
  border: 1px solid #36414d;
  background: #1c2126;
  border-radius: 19px;
  padding: 21px;
  width: 100%;
  margin-top: 14px;
  color: var(--text);
  text-align: left;
}
.server-row:hover,
.server-row.current {
  border-color: #7a8ea5;
  background: #242b34;
  transform: translateY(-2px);
}
.server-avatar {
  height: 51px;
  width: 51px;
  border-radius: 16px;
  background: #444425;
  color: #ece6ad;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}
.avatar-1 {
  background: #3c3343;
  color: #c4b1cf;
}
.avatar-2 {
  background: #2f3945;
  color: #b3becb;
}
.server-info {
  min-width: 0;
  flex: 1;
}
.server-info strong {
  display: block;
  font-size: 15px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-info small {
  font-size: 10px;
  display: block;
  color: #748599;
  margin-top: 8px;
}
.server-access {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: #7f90a4;
  min-width: 130px;
}
.server-open {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid #48586b;
  border-radius: 11px;
  padding: 12px 17px;
  background: #252d37;
  color: #bec8d3;
  font-size: 11px;
  font-weight: 550;
  white-space: nowrap;
}
.server-open svg {
  width: 16px;
  height: 16px;
}
.server-row:hover .server-open,
.server-row.current .server-open {
  color: #242c35;
  background: var(--yellow);
  border-color: var(--yellow);
}
.server-page-note {
  margin: 24px 0 0;
  font-size: 10px;
  line-height: 1.8;
  color: #5e6e80;
}
.gateway #toast {
  bottom: 25px;
}
.server-dialog {
  border: 1px solid #455466;
  border-radius: 22px;
  background: #1a2027;
  color: var(--text);
  padding: 28px;
  width: min(650px, calc(100vw - 32px));
}
.server-dialog::backdrop {
  background: #07090bd9;
}
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dialog-header h2 {
  font-size: 23px;
  margin: 0;
}
.server-dialog > p {
  color: #8193a8;
  font-size: 12px;
}
.server-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px;
  border: 1px solid #3d4958;
  border-radius: 12px;
  background: #222a33;
  color: var(--text);
  margin: 10px 0;
}
.server-choice small {
  display: block;
  color: #788ca3;
  font-size: 10px;
  margin-top: 6px;
}
.server-choice svg {
  margin-left: auto;
}
@media (min-width: 1600px) {
  main {
    padding-top: 42px;
  }
  .chart {
    height: 235px;
  }
  .stat-card {
    padding: 27px;
  }
  .welcome-grid {
    min-height: 500px;
  }
}
@media (max-width: 1200px) {
  :root {
    --sidebar: 215px;
  }
  .sidebar {
    padding: 26px 14px;
  }
  .brand {
    font-size: 27px;
  }
  .nav-item {
    font-size: 11px;
  }
  .topbar {
    padding: 0 27px;
  }
  main {
    padding: 29px 27px;
  }
  .reference-stats {
    gap: 12px;
  }
  .stat-card {
    padding: 20px 17px;
    gap: 12px;
  }
  .stat-symbol {
    width: 37px;
    height: 37px;
  }
  .stat-top {
    font-size: 10px;
  }
  .stat-value {
    font-size: 27px;
  }
  .savebar {
    left: calc(50% + 107.5px);
  }
  .settings-layout {
    grid-template-columns: minmax(0, 1.3fr) minmax(265px, 1fr);
  }
  .gateway .workspace {
    margin: 0;
  }
  .welcome-grid {
    gap: 30px;
  }
  .welcome-card h1 {
    font-size: 44px;
  }
  .welcome-logo {
    min-height: 380px;
  }
  .welcome-logo img {
    max-width: 280px;
  }
}
@media (max-width: 850px) {
  :root {
    --sidebar: 185px;
  }
  .sidebar {
    padding: 24px 12px;
  }
  .brand {
    font-size: 24px;
    margin: 0 4px 29px;
  }
  .brand small {
    font-size: 8px;
    letter-spacing: 0.5px;
  }
  .nav-item {
    padding: 12px 11px;
    gap: 10px;
  }
  .server-picker {
    padding: 10px;
    gap: 7px;
  }
  .avatar {
    height: 28px;
    width: 28px;
    font-size: 9px;
  }
  .server-picker select {
    font-size: 10px;
  }
  .topbar {
    padding: 0 24px;
    height: 62px;
  }
  .topbar #open-tools {
    display: none;
  }
  .text-link[href] {
    display: none;
  }
  main {
    padding: 26px 24px;
  }
  .page-heading h1 {
    font-size: 29px;
  }
  .page-heading p {
    font-size: 11px;
  }
  .dashboard-status {
    min-width: 0;
    max-width: 185px;
    padding: 11px;
  }
  .dashboard-status small {
    font-size: 8px;
    line-height: 1.7;
  }
  .stat-card {
    display: block;
    padding: 16px 14px;
    border-radius: 17px;
  }
  .stat-symbol {
    width: 31px;
    height: 31px;
    margin-bottom: 11px;
  }
  .stat-symbol svg {
    width: 17px;
    height: 17px;
  }
  .stat-top {
    font-size: 10px;
  }
  .stat-value {
    font-size: 25px;
  }
  .stat-caption {
    font-size: 8px;
  }
  .stat-card:last-child:after {
    font-size: 95px;
    right: 5px;
  }
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .scenario-result {
    position: static;
  }
  .premium-grid {
    grid-template-columns: 1fr;
  }
  .banana-extra {
    flex-wrap: wrap;
    gap: 13px;
    padding: 22px;
  }
  .banana-extra .primary-button {
    margin-left: 57px;
  }
  .activity-copy p {
    font-size: 9px;
  }
  .activity-time {
    font-size: 9px;
  }
  .savebar {
    left: calc(50% + 92.5px);
    width: calc(100vw - 230px);
  }
  .hero {
    flex-wrap: wrap;
  }
  .hero > .badge {
    margin-left: 69px;
  }
  .hero h2 {
    font-size: 18px;
  }
  .gateway main {
    padding: 29px;
  }
  .gateway-top {
    margin-bottom: 42px;
  }
  .welcome-grid {
    gap: 23px;
  }
  .welcome-card h1 {
    font-size: 36px;
  }
  .welcome-card p {
    font-size: 12px;
  }
  .welcome-logo {
    min-height: 360px;
    border-radius: 40% 40% 22px 22px;
    padding: 20px;
  }
  .welcome-logo img {
    max-width: 220px;
  }
  .welcome-logo span {
    font-size: 8px;
  }
  .welcome-card .primary-button,
  .welcome-card .ghost-button {
    font-size: 11px;
    padding: 14px 17px;
  }
  .welcome-features {
    font-size: 10px;
    margin-top: 40px;
    gap: 15px;
  }
  .server-access {
    display: none;
  }
  .server-open {
    font-size: 10px;
    padding: 11px 13px;
  }
  .server-info strong {
    font-size: 13px;
  }
  .server-row {
    padding: 18px;
    gap: 14px;
  }
  footer {
    padding: 0 24px 24px;
  }
}
@media (max-width: 600px) {
  :root {
    --sidebar: 0px;
  }
  .sidebar {
    position: relative;
    width: 100%;
    padding: 20px 18px;
    border-right: 0;
    border-bottom: 1px solid #343c46;
  }
  .brand {
    font-size: 27px;
    margin: 0 0 20px;
  }
  .brand small,
  .server-label,
  .nav-label,
  .sidebar-bottom {
    display: none;
  }
  .server-picker {
    padding: 12px;
    margin-bottom: 16px;
  }
  .server-picker select {
    font-size: 11px;
  }
  .avatar {
    height: 31px;
    width: 31px;
    font-size: 10px;
  }
  .sidebar nav {
    display: flex;
    gap: 7px;
    overflow: auto;
    padding: 2px 0 5px;
    scrollbar-width: thin;
  }
  .nav-item {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
    margin: 0;
    padding: 11px 13px;
    font-size: 10px;
  }
  .nav-item svg,
  .nav-item.active:after {
    display: none;
  }
  .workspace {
    margin-left: 0;
  }
  .topbar {
    height: 52px;
    padding: 0 18px;
  }
  .breadcrumbs {
    font-size: 9px;
  }
  .breadcrumbs span {
    margin: 0 7px;
  }
  .top-actions {
    gap: 8px;
  }
  .top-actions .mobile-servers {
    display: inline-flex;
    padding: 6px 9px;
    font-size: 9px;
  }
  .badge {
    font-size: 8px;
    padding: 5px 8px;
  }
  main {
    padding: 24px 18px;
  }
  .page-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 17px;
    margin-bottom: 23px;
  }
  .page-heading h1 {
    font-size: 29px;
    margin-bottom: 9px;
  }
  .page-heading p {
    font-size: 11px;
  }
  .dashboard-status {
    max-width: none;
    width: 100%;
    padding: 12px 14px;
    border-radius: 13px;
  }
  .dashboard-status > div {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .dashboard-status small {
    margin: 0;
    font-size: 9px;
  }
  .reference-stats {
    gap: 9px;
    margin-bottom: 18px;
  }
  .stat-card {
    padding: 15px 11px;
    border-radius: 15px;
  }
  .stat-symbol {
    height: 27px;
    width: 27px;
    border-radius: 9px;
  }
  .stat-top {
    font-size: 9px;
  }
  .stat-value {
    font-size: 24px;
    margin: 8px 0;
  }
  .stat-caption {
    font-size: 8px;
  }
  .stat-card:last-child:after {
    font-size: 80px;
  }
  .panel {
    border-radius: 18px;
  }
  .panel-head {
    padding: 20px 18px;
    gap: 12px;
  }
  .panel h2 {
    font-size: 13px;
  }
  .panel-head p {
    font-size: 10px;
  }
  .range-select {
    font-size: 9px;
    padding: 8px 10px;
    max-width: 125px;
  }
  .chart-wrap {
    padding: 0 12px 17px;
  }
  .chart {
    height: 170px;
  }
  .chart-summary {
    font-size: 8px;
    padding: 7px 4px 0;
  }
  .activity-list {
    padding: 0 18px 7px;
  }
  .activity-row {
    gap: 10px;
    padding: 14px 0;
  }
  .activity-copy strong {
    font-size: 10px;
  }
  .activity-copy p {
    font-size: 8px;
  }
  .activity-time {
    font-size: 8px;
  }
  .activity-icon {
    height: 27px;
    width: 27px;
    border-radius: 9px;
  }
  .banana-extra {
    padding: 20px 18px;
    border-radius: 18px;
  }
  .extra-icon {
    height: 36px;
    width: 36px;
    border-radius: 12px;
  }
  .banana-extra > div:nth-child(2) {
    flex: 1;
    min-width: 190px;
  }
  .banana-extra h2 {
    font-size: 14px;
  }
  .banana-extra p {
    font-size: 10px;
  }
  .banana-extra .primary-button {
    margin-left: 49px;
  }
  .form-panel {
    padding: 22px;
  }
  .form-panel > p {
    font-size: 11px;
  }
  .info-card {
    padding: 23px;
  }
  .field {
    font-size: 11px;
  }
  .toggle-row strong {
    font-size: 11px;
  }
  .toggle-row p {
    font-size: 10px;
  }
  .settings-export {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
  }
  .scenario-result h2 {
    font-size: 21px;
  }
  .savebar {
    left: 50%;
    width: calc(100vw - 24px);
    bottom: 12px;
    padding: 12px;
    gap: 10px;
    font-size: 10px;
  }
  .savebar .ghost-button {
    display: none;
  }
  .savebar .primary-button {
    padding: 10px 13px;
  }
  #toast {
    left: 18px;
    right: 18px;
    max-width: none;
    font-size: 11px;
    bottom: 86px;
  }
  .hero {
    padding: 22px;
    gap: 15px;
  }
  .hero > div:nth-child(2) {
    flex: 1;
  }
  .hero > .badge {
    margin-left: 64px;
  }
  .hero p {
    font-size: 11px;
  }
  footer {
    padding: 0 18px 23px;
    font-size: 8px;
    gap: 8px;
    flex-direction: column;
  }
  .gateway main {
    padding: 25px 22px 35px;
  }
  .gateway-top {
    margin-bottom: 35px;
  }
  .wordmark {
    font-size: 30px;
  }
  .welcome-grid {
    grid-template-columns: 1fr;
    gap: 25px;
    min-height: 0;
  }
  .welcome-card {
    padding: 0;
  }
  .welcome-eyebrow {
    font-size: 9px;
    margin-bottom: 20px;
  }
  .welcome-card h1 {
    font-size: 40px;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
  }
  .welcome-card p {
    font-size: 12px;
    margin-bottom: 25px;
    max-width: none;
  }
  .welcome-card .primary-button,
  .welcome-card .ghost-button {
    width: 100%;
    max-width: none;
    font-size: 12px;
    padding: 15px 19px;
  }
  .welcome-card small {
    max-width: none;
    font-size: 9px;
  }
  .welcome-logo {
    min-height: 275px;
    border-radius: 35% 35% 20px 20px;
    gap: 13px;
  }
  .welcome-logo img {
    max-width: 205px;
  }
  .welcome-logo span {
    font-size: 9px;
  }
  .welcome-logo:before {
    font-size: 33px;
  }
  .welcome-logo:after {
    font-size: 8px;
  }
  .welcome-features {
    margin-top: 29px;
    padding-top: 20px;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    font-size: 10px;
  }
  .server-page-heading h1 {
    font-size: 29px;
  }
  .server-page-heading p {
    font-size: 12px;
  }
  .server-page-search {
    margin-bottom: 20px;
    padding: 4px 12px;
  }
  .server-page-search input {
    font-size: 12px;
  }
  .server-row {
    padding: 17px;
    gap: 12px;
    flex-wrap: wrap;
    border-radius: 17px;
  }
  .server-avatar {
    height: 43px;
    width: 43px;
    border-radius: 13px;
    font-size: 14px;
  }
  .server-info {
    min-width: 170px;
  }
  .server-info strong {
    font-size: 13px;
  }
  .server-info small {
    font-size: 9px;
  }
  .server-open {
    width: 100%;
    justify-content: space-between;
    font-size: 10px;
    padding: 12px;
    margin-top: 4px;
  }
  .server-page-note {
    font-size: 9px;
  }
  .gateway .workspace {
    margin: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
.top-actions .mobile-servers {
  display: none;
}
@media (max-width: 600px) {
  .top-actions .mobile-servers {
    display: inline-flex;
  }
}
/* Orbit: a precise, luminous interface with four clear destinations. */
:root {
  --bg: #07090d;
  --panel: #11161d;
  --raised: #1a222b;
  --line: #2b3642;
  --yellow: #ffe12b;
  --green: #83d7b0;
  --text: #f4f6fc;
  --muted: #92a6bf;
  --radius: 18px;
}
.workspace {
  background:
    radial-gradient(ellipse at 85% 0%, #ffe12b0d, transparent 33%),
    radial-gradient(ellipse at 0% 100%, #488be609, transparent 40%), #07090d;
}
.sidebar {
  background: linear-gradient(160deg, #111820, #070b10);
  border-right-color: #273441;
}
.brand {
  font-size: 30px;
}
.nav-item {
  border: 1px solid transparent;
  padding: 15px;
  margin: 7px 0;
  border-radius: 12px;
  font-size: 12px;
}
.nav-item.active {
  color: #ffe971;
  background: linear-gradient(100deg, #ffe12b25, #ffe12b08);
  border-color: #ddcc3966;
  box-shadow:
    inset 3px 0 #ffe12b,
    0 0 23px #ffe12b08;
}
.nav-item.active svg {
  color: #ffe12b;
}
.nav-item.active:after {
  content: "●";
  font-size: 7px;
  color: #ffe12b;
}
.nav-item:hover {
  background: #202b35;
}
.server-picker {
  background: linear-gradient(110deg, #ffe12b12, #111920);
  border-color: #ffe12b4a;
}
.server-picker select {
  color: #e5eaf4;
}
.topbar {
  background: #080c1280;
  backdrop-filter: blur(12px);
  border-bottom-color: #26313c;
}
.panel {
  position: relative;
  background: linear-gradient(135deg, #141c25, #0c1118);
  border-color: #2f3e4b;
  border-radius: 18px;
  box-shadow: 0 8px 35px #0002;
}
.panel:before {
  content: "";
  position: absolute;
  inset: 0 18px auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #9fb7d438, transparent);
  pointer-events: none;
}
.stat-card {
  background: linear-gradient(140deg, #172431, #0e1721);
  border-color: #354a60;
  border-radius: 16px;
}
.stat-card:first-child {
  background: linear-gradient(130deg, #1d3044, #101b28);
  border-color: #456481;
}
.stat-card:last-child {
  background: linear-gradient(120deg, #fff06a, #ffd921);
  border-color: #ffe75f;
  box-shadow: 0 0 30px #ffe12b0b;
}
.stat-card:last-child:after {
  content: "✦";
  color: #84751d26;
}
.stat-symbol {
  color: #9ebddb;
  background: #9ebddd16;
}
.stat-top {
  color: #b4c5d9;
}
.stat-caption {
  color: #7187a0;
}
.dashboard-status {
  background: #16352a44;
  border-color: #4b997333;
}
.dashboard-status strong {
  color: #bfe9d2;
}
.dashboard-status small {
  color: #85aa9b;
}
.dashboard-status .live-dot {
  background: #76dfab;
  box-shadow: 0 0 15px #76dfab3b;
}
.primary-button {
  background: linear-gradient(110deg, #ffe969, #ffdc28);
  border-color: #ffed88;
  color: #202400;
  box-shadow: 0 4px 16px #ffdc280b;
}
.ghost-button {
  background: linear-gradient(#1c2936, #14202b);
  border-color: #3a5067;
  color: #c3d1e0;
}
.ghost-button:hover {
  background: #253b4d;
  border-color: #5e82a6;
}
.section-tabs {
  display: flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid #27394b;
  border-radius: 15px;
  background: #0c1520;
  margin-bottom: 27px;
  width: fit-content;
  max-width: 100%;
  overflow: auto;
}
.section-tabs button {
  padding: 10px 15px;
  font-size: 11px;
  color: #819bb7;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
}
.section-tabs button:hover {
  color: #e0e9f5;
  background: #1d2b3a;
}
.section-tabs button.selected {
  background: #283447;
  color: #fff2a1;
  border-color: #d6cd6240;
  box-shadow: 0 3px 9px #0004;
}
.setup-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 23px;
  padding: 25px 28px;
  margin-top: 20px;
  background:
    radial-gradient(ellipse at 100% 50%, #ffe12b20, transparent 60%),
    linear-gradient(110deg, #182534, #10171f);
  border: 1px solid #5d6590;
  border-radius: 19px;
  position: relative;
  overflow: hidden;
}
.setup-banner:after {
  content: "✧";
  position: absolute;
  right: 205px;
  top: -40px;
  font-size: 165px;
  color: #ffe12b0e;
  pointer-events: none;
}
.setup-banner h2 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.6px;
  margin: 12px 0 8px;
}
.setup-banner p {
  font-size: 11px;
  color: #94a8bd;
  line-height: 1.8;
  margin: 0;
}
.setup-banner .badge {
  background: #ffe12b0b;
  border-color: #e7d53e30;
  color: #ecdc88;
  font-size: 8px;
}
.setup-banner .primary-button {
  z-index: 1;
}
.banana-extra {
  background: linear-gradient(130deg, #1c263c, #151e2b);
  border-color: #566b94;
}
.banana-extra p {
  color: #9daec8;
}
.banana-extra .extra-icon {
  background: #b1bee216;
  color: #b6c7e6;
}
.scenario-result {
  background:
    radial-gradient(ellipse at top right, #ffe12b11, transparent 65%),
    linear-gradient(145deg, #1c2d40, #0e1b2a);
  border-color: #6a81a1;
}
.scenario-result h2 {
  color: #fff3a7;
}
.scenario-result p {
  color: #a9bed3;
}
.scenario-result > small {
  color: #7790ab;
}
.scenario-steps li {
  border-color: #6d839966;
}
.scenario-steps li:before {
  background: #ffe12b;
  color: #34320d;
}
.test-options {
  border-top: 1px solid #314b67;
  margin-top: 25px;
  padding-top: 24px;
}
.test-options h2 {
  font-size: 14px;
}
.test-options > p {
  font-size: 11px;
  color: #8ca7c2;
  line-height: 1.8;
}
.test-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid #2b4053;
  font-size: 11px;
  color: #bed0e4;
}
.test-options .ghost-button {
  margin-top: 17px;
}
.wizard-shell {
  max-width: 850px;
  margin: 0 auto;
}
.wizard-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  padding: 0;
  margin: 0 0 25px;
  counter-reset: wizard;
}
.wizard-progress li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #5c7690;
  position: relative;
}
.wizard-progress li:not(:last-child):after {
  content: "";
  height: 1px;
  background: #30465b;
  width: 30px;
  margin-left: auto;
  margin-right: 12px;
}
.wizard-progress li > span {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid #42596f;
  background: #162433;
  border-radius: 50%;
  font-size: 10px;
  flex-shrink: 0;
}
.wizard-progress li.current {
  color: #fff19a;
}
.wizard-progress li.current > span {
  background: #ffe12b;
  color: #363300;
  border-color: #ffe12b;
  box-shadow: 0 0 20px #ffe12b20;
}
.wizard-progress li.complete {
  color: #8fc9b2;
}
.wizard-progress li.complete > span {
  background: #1c3e36;
  border-color: #4b917a;
  color: #9be1c2;
}
.wizard-content {
  padding: 32px;
}
.wizard-content h2 {
  font-size: 23px;
  letter-spacing: -0.7px;
  margin-bottom: 12px;
}
.wizard-content > p {
  font-size: 12px;
  color: #8faac2;
  line-height: 1.9;
}
.wizard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  margin-top: 30px;
  border-top: 1px solid #314960;
}
.wizard-actions > span {
  font-size: 10px;
  color: #718da7;
}
.wizard-tip {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 12px 18px;
  color: #829bb1;
}
.wizard-tip svg {
  width: 19px;
  height: 19px;
  color: #b6a757;
  margin-top: 1px;
}
.wizard-tip p {
  margin: 0;
  font-size: 10px;
  line-height: 1.9;
}
.wizard-review .config-row {
  font-size: 12px;
  padding: 19px 0;
}
.gateway .workspace {
  background:
    radial-gradient(ellipse at 70% 30%, #d8be2611, transparent 50%), #05090e;
}
.welcome-logo {
  border-radius: 25px;
  border-color: #556b82;
  background:
    radial-gradient(ellipse at 50% 50%, #ffe12b16, transparent 65%),
    linear-gradient(140deg, #1b2734, #0d131c);
}
.welcome-logo img {
  transform: rotate(-6deg);
  filter: drop-shadow(0 15px 30px #ffe12b12);
}
.welcome-card h1 {
  color: #f6f8fd;
}
.welcome-card p {
  color: #9dafc4;
}
.welcome-eyebrow {
  color: #decd85;
}
.welcome-features {
  border-color: #34475b;
  color: #8fa3ba;
}
.welcome-features svg {
  color: #e0cd68;
}
.server-row {
  background: linear-gradient(110deg, #142435, #0d1826);
  border-color: #354f6a;
}
.server-row:hover,
.server-row.current {
  background: linear-gradient(110deg, #ffe12b15, #162337);
  border-color: #e5cf40;
  box-shadow: 0 0 20px #ffe12b0b;
}
.server-info small {
  color: #819db8;
}
.server-open {
  background: #203449;
  border-color: #48627b;
  color: #c9d8e8;
}
.server-page-search {
  background: #142438;
  border-color: #405d7b;
}
.server-avatar {
  background: #494220;
  color: #fff0a5;
}
.avatar-1 {
  background: #382955;
  color: #bca5e8;
}
.avatar-2 {
  background: #1c493d;
  color: #a6d9c2;
}
.savebar {
  background: #193349;
  border-color: #698899;
}
.badge {
  border-color: #7b75903a;
  color: #d0c8e2;
  background: #8582ad0b;
}
.range-select {
  background: #1c2b3c;
  border-color: #456079;
  color: #d1dfed;
}
.chart text {
  fill: #8fa8be;
}
.chart line {
  stroke: #304558;
}
.chart-summary {
  color: #859db7;
}
.chart-summary b {
  color: #dce5f0;
}
input[type="text"],
select,
textarea {
  background: #0b1927;
  border-color: #3a536d;
  color: #d5e0ec;
}
.field {
  color: #bdcfe2;
}
.field small {
  color: #7b95ad;
}
.toggle-row {
  border-color: #30485e;
}
.toggle-row p {
  color: #8ba2b9;
}
.switch {
  background: #30475e;
  border-color: #5d748b;
}
.switch:checked {
  background: #ffe12b;
  border-color: #ffe12b;
}
.switch:checked:before {
  background: #343915;
}
.role-options {
  background: #0e1b28;
  border-color: #38536b;
}
.notice-preview {
  background: #192838;
  border-color: #ffe12b;
}
.config-row,
.check-row {
  border-color: #324b62;
  color: #94b0c6;
}
.config-row strong {
  color: #d3e0ed;
}
.info-card {
  background: linear-gradient(140deg, #192b3d, #111f2d);
  border-color: #405e7c;
}
.info-card p,
.info-card ul {
  color: #94aec5;
}
.form-panel > p {
  color: #94a9c0;
}
@media (max-width: 850px) {
  .setup-banner {
    padding: 23px;
    flex-wrap: wrap;
  }
  .setup-banner .primary-button {
    margin-left: 0;
  }
  .wizard-progress li {
    font-size: 10px;
    gap: 8px;
  }
  .wizard-progress li:not(:last-child):after {
    width: 14px;
    margin-right: 8px;
  }
  .wizard-content {
    padding: 26px;
  }
  .section-tabs button {
    padding: 9px 12px;
    font-size: 10px;
  }
}
@media (max-width: 600px) {
  .nav-item {
    font-size: 11px;
    padding: 11px 14px;
    margin: 0;
  }
  .section-tabs {
    border-radius: 12px;
    margin-bottom: 23px;
    width: 100%;
    padding: 5px;
    gap: 3px;
  }
  .section-tabs button {
    font-size: 9px;
    padding: 9px 10px;
  }
  .setup-banner {
    padding: 22px 20px;
    border-radius: 16px;
    gap: 19px;
  }
  .setup-banner h2 {
    font-size: 19px;
  }
  .setup-banner p {
    font-size: 10px;
  }
  .wizard-progress {
    margin-bottom: 21px;
    gap: 8px;
  }
  .wizard-progress li {
    font-size: 9px;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }
  .wizard-progress li:not(:last-child):after {
    display: none;
  }
  .wizard-progress li > span {
    width: 26px;
    height: 26px;
  }
  .wizard-content {
    padding: 23px;
  }
  .wizard-content h2 {
    font-size: 20px;
  }
  .wizard-content > p {
    font-size: 11px;
  }
  .wizard-actions {
    gap: 12px;
  }
  .wizard-actions > span {
    font-size: 9px;
  }
  .wizard-actions button {
    font-size: 10px;
    padding: 10px 13px;
  }
  .wizard-review .config-row {
    font-size: 11px;
  }
  .welcome-logo {
    border-radius: 22px;
  }
  .scenario-result h2 {
    font-size: 21px;
  }
}