/* Close visual match to the user's three reference screens. */
:root {
  --bg: #020405;
  --panel: #090e12;
  --raised: #111920;
  --line: #24313b;
  --yellow: #ffe21c;
  --text: #f6f7fa;
  --muted: #a0b6cb;
  --radius: 16px;
  --sidebar: 282px;
}
body {
  background: #020405;
}
.workspace {
  background:
    radial-gradient(ellipse at 70% 40%, #13232b14, transparent 65%), #020405;
}
.sidebar {
  padding: 28px 16px 20px;
  background: linear-gradient(130deg, #080c0f, #020405);
  border-right: 1px solid #21303a;
}
.brand {
  font-size: 35px;
  margin: 0 22px 35px;
  letter-spacing: -1.1px;
}
.brand small {
  display: none;
}
.server-label,
.nav-label {
  display: none;
}
.server-picker {
  border: 1px solid #bda51a;
  background: linear-gradient(110deg, #ffe21c14, #070b08);
  padding: 16px 15px;
  border-radius: 12px;
  margin: 0 0 31px;
  box-shadow: 0 0 22px #ffd90008;
}
.avatar {
  background: #24240d;
  color: #ffe45b;
  font-size: 13px;
  width: 39px;
  height: 39px;
}
.server-picker select {
  color: #f1f3ec;
  font-size: 13px;
}
.nav-item {
  font-size: 14px;
  padding: 17px 20px;
  margin: 11px 0;
  border-radius: 11px;
  gap: 18px;
  color: #adc1d6;
}
.nav-item svg {
  height: 22px;
  width: 22px;
  color: #9fb6ce;
}
.nav-item.active {
  color: #fffbe7;
  background: linear-gradient(90deg, #ffdf2728, #ffdf2709);
  border-color: #d5bd18;
  box-shadow:
    inset 3px 0 #ffe21c,
    0 0 25px #ffdc0012;
}
.nav-item.active svg {
  color: #ffe21c;
}
.nav-item.active:after {
  display: none;
}
.nav-item:hover {
  background: #1a251b;
}
.topbar {
  height: 65px;
  padding: 0 32px;
  background: #010304;
  border-color: #1b2831;
}
.breadcrumbs {
  color: #889caf;
}
.top-actions .ghost-button {
  background: transparent;
  border-color: #2c3c48;
  color: #a9bbce;
  border-radius: 7px;
}
.badge {
  border-radius: 5px;
  font-size: 9px;
  color: #cfbf6e;
  background: #ffe21c08;
  border-color: #c9b6342a;
}
.primary-button {
  background: linear-gradient(120deg, #ffeb45, #ffe018);
  border-color: #ffe95c;
  border-radius: 10px;
  box-shadow: 0 0 23px #ffdc0010;
  color: #090d05;
}
.primary-button:hover {
  background: #fff05f;
  box-shadow: 0 0 23px #ffdc0020;
}
.ghost-button {
  border-radius: 8px;
  background: linear-gradient(#111a22, #090f15);
  border-color: #2e404f;
  color: #c1d2e3;
}
.ghost-button:hover {
  border-color: #657888;
  background: #1b2631;
}
main {
  max-width: 1580px;
  padding: 30px 33px;
}
.page-heading {
  margin-bottom: 24px;
}
.page-heading h1 {
  font-size: 33px;
  font-weight: 650;
  letter-spacing: -0.9px;
  margin-bottom: 6px;
}
.page-heading p {
  font-size: 14px;
  color: #9bb8d5;
}
.dashboard-status {
  padding: 13px 18px;
  min-width: 205px;
  border-radius: 13px;
  background: #08131265;
  border-color: #1c3436;
}
.dashboard-status .live-dot {
  width: 11px;
  height: 11px;
  background: #26d433;
  box-shadow: 0 0 18px #29dd3670;
}
.dashboard-status strong {
  font-size: 11px;
  color: #f2f4f5;
}
.dashboard-status small {
  font-size: 10px;
  color: #9ab6cc;
}
.reference-stats {
  gap: 17px;
  margin-bottom: 18px;
}
.reference-stats .stat-card,
.reference-stats .stat-card:first-child,
.reference-stats .stat-card:last-child {
  display: flex;
  align-items: center;
  padding: 19px 18px;
  gap: 17px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0d151b, #050a0d);
  border-color: #263744;
  box-shadow: none;
  color: #f5f7fa;
}
.stat-card:last-child:after {
  display: none;
}
.reference-stats .stat-symbol {
  width: 51px;
  height: 51px;
  background: linear-gradient(#1f2b35, #14212a);
  border-radius: 13px;
  color: #aec3dd;
  margin: 0;
}
.reference-stats .stat-symbol svg {
  width: 28px;
  height: 28px;
}
.reference-stats .stat-card:last-child .stat-symbol {
  background: #a58d1a25;
  color: #ffe21c;
}
.reference-stats .stat-top,
.reference-stats .stat-card:last-child .stat-top {
  font-size: 12px;
  color: #b2c7df;
}
.reference-stats .stat-value {
  font-size: 27px;
  margin: 9px 0 6px;
  font-weight: 650;
  letter-spacing: -0.4px;
}
.reference-stats .stat-caption,
.reference-stats .stat-card:last-child .stat-caption {
  font-size: 9px;
  color: #7d93a9;
}
.panel {
  background: linear-gradient(125deg, #0c1318, #050a0e);
  border: 1px solid #293b47;
  border-radius: 15px;
  box-shadow: none;
}
.panel:before {
  display: none;
}
.panel-head {
  padding: 21px 23px 16px;
}
.panel h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.panel-head p {
  font-size: 12px;
  margin-top: 6px;
  color: #96b1ca;
}
.range-select {
  padding: 9px 13px;
  border: 1px solid #2a3e4e;
  border-radius: 7px;
  background: linear-gradient(#101a23, #090f15);
  color: #b8cbe0;
  font-size: 11px;
}
.chart-wrap {
  padding: 0 25px 17px;
}
.chart {
  height: 220px;
}
.chart line {
  stroke: #1b2d38;
  stroke-dasharray: none;
}
.chart text {
  font-size: 11px;
  fill: #a6bfd8;
}
.chart-summary {
  font-size: 10px;
  color: #8da6be;
  padding-top: 8px;
}
.reference-recent {
  margin-top: 18px;
}
.activity-list {
  padding: 0 23px 7px;
}
.activity-row {
  padding: 13px 0;
  border-color: #1a2d38;
}
.activity-icon {
  height: 34px;
  width: 34px;
  border-radius: 8px;
  background: #9d8b141f;
  color: #ffdb28;
  border-color: transparent;
}
.activity-copy strong {
  font-size: 12px;
  color: #f0f5fc;
}
.activity-copy p {
  font-size: 11px;
  color: #95aec8;
}
.activity-time {
  font-size: 10px;
  color: #a0bad4;
}
.back-to-servers {
  background: linear-gradient(#0c151c, #060c11);
  border-color: #293c49;
  border-radius: 9px;
  font-size: 12px !important;
  padding: 13px 17px;
  justify-content: flex-start !important;
}
.account {
  border-color: #223541;
}
.section-tabs {
  border-radius: 10px;
  border-color: #273e51;
  background: #0a121b;
  padding: 5px;
  gap: 6px;
  margin-bottom: 25px;
}
.section-tabs button {
  border-radius: 7px;
  font-size: 11px;
  padding: 10px 15px;
}
.section-tabs button.selected {
  border-color: #9f902b;
  background: linear-gradient(100deg, #ffdf231b, #ffdf2309);
  color: #ffee95;
}
.setup-banner,
.banana-extra {
  border-radius: 14px;
  background: linear-gradient(115deg, #101b21, #070e13);
  border-color: #3d4c3f;
  padding: 22px 24px;
}
.setup-banner:after,
.banana-extra:after {
  display: none;
}
.setup-banner h2 {
  font-size: 20px;
}
.setup-banner p,
.banana-extra p {
  color: #9bb4cc;
  font-size: 12px;
}
.banana-extra .extra-icon {
  border-radius: 11px;
  color: #ffe21c;
  background: #ab932222;
}
.form-panel {
  padding: 25px;
}
.form-panel h2 {
  font-size: 17px;
}
.form-panel > p,
.info-card p,
.info-card ul {
  color: #9aafc5;
}
.info-card {
  background: linear-gradient(140deg, #14202b, #08121c);
  border-color: #314b60;
}
.scenario-result {
  background: linear-gradient(135deg, #1a2935, #0a1723);
  border-color: #53697d;
}
.scenario-result h2 {
  color: #ffe788;
  font-size: 24px;
}
.scenario-result p {
  color: #b0c4d8;
}
.scenario-result > small {
  color: #829cb5;
}
.wizard-content {
  padding: 30px;
}
.wizard-content h2 {
  font-size: 24px;
}
.wizard-actions {
  border-color: #2b4358;
}
.wizard-review .config-row {
  border-color: #2c4355;
}
.wizard-progress li.current > span {
  box-shadow: 0 0 17px #ffdc002b;
}
.gateway .workspace {
  background:
    radial-gradient(ellipse at 50% 45%, #23374412, transparent 65%), #000;
}
.gateway main {
  max-width: 1240px;
  padding: 30px 40px 45px;
}
.gateway-top {
  margin-bottom: 60px;
}
.wordmark {
  font-size: 41px;
}
.welcome-grid {
  grid-template-columns: 1fr 1fr;
  gap: 29px;
  align-items: stretch;
  min-height: 455px;
}
.welcome-card,
.welcome-logo {
  padding: 42px;
  border: 1px solid #4b5966;
  border-radius: 24px;
  background: linear-gradient(140deg, #1a2229, #05090d);
  overflow: hidden;
}
.welcome-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.welcome-card .wordmark {
  display: block;
  font-size: 62px;
  letter-spacing: -2.3px;
  margin-bottom: 15px;
}
.welcome-eyebrow {
  order: 1;
  margin: 0 0 25px;
  font-size: 11px;
  letter-spacing: 4px;
  color: #9caabd;
}
.welcome-eyebrow:before {
  display: none;
}
.welcome-card h1 {
  order: 2;
  font-size: 23px;
  letter-spacing: -0.5px;
  line-height: 1.4;
  margin: 0 0 14px;
}
.welcome-card p {
  order: 3;
  font-size: 12px;
  margin: 0 0 22px;
  line-height: 1.8;
  color: #9fb0c4;
}
.welcome-card .primary-button {
  order: 4;
}
.welcome-card .ghost-button {
  order: 5;
}
.welcome-card small {
  order: 6;
  color: #78899c;
  margin-top: 10px;
}
.welcome-card .primary-button,
.welcome-card .ghost-button {
  font-size: 14px;
  padding: 17px 20px;
  max-width: none;
  width: 100%;
  border-radius: 12px;
}
.welcome-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 455px;
  background:
    radial-gradient(ellipse at center, #ffe21c10, transparent 65%),
    linear-gradient(135deg, #192229, #05090d);
}
.welcome-logo:before,
.welcome-logo:after {
  display: none;
}
.welcome-logo img {
  transform: none;
  width: 100%;
  max-width: 340px;
  filter: drop-shadow(0 10px 22px #ffe21c12);
}
.welcome-logo span {
  font-size: 10px;
  color: #a0acb9;
}
.welcome-features {
  margin-top: 29px;
  padding-top: 22px;
  border-color: #263743;
  justify-content: center;
  gap: 35px;
  font-size: 10px;
}
.server-page-heading {
  text-align: center;
  margin-bottom: 30px;
}
.server-page-heading h1 {
  font-size: 31px;
  letter-spacing: -0.8px;
}
.server-page-heading p {
  color: #94acc4;
}
.server-page-panel {
  max-width: 970px;
  margin: auto;
  border: 1px solid #40515f;
  border-radius: 22px;
  padding: 24px;
  background: linear-gradient(140deg, #10171e, #03080c);
}
.server-page-search {
  margin-bottom: 23px;
  padding: 5px 14px;
  border-radius: 13px;
  background: linear-gradient(#121c25, #0b131b);
  border-color: #344957;
}
.server-page-search input {
  font-size: 14px;
  padding: 15px 0;
}
.server-row {
  padding: 17px;
  border-radius: 14px;
  background: linear-gradient(115deg, #111a23, #070d13);
  border-color: #293e4d;
  margin-top: 13px;
  gap: 18px;
}
.server-row:hover,
.server-row.current {
  background: linear-gradient(100deg, #ffdc0020, #ffdc000a);
  border-color: #ffe21c;
  box-shadow: 0 0 20px #ffe21c15;
  transform: none;
}
.server-avatar {
  border-radius: 12px;
  height: 55px;
  width: 55px;
  font-size: 17px;
}
.server-info strong {
  font-size: 15px;
}
.server-info small {
  font-size: 11px;
  color: #a2b8ce;
}
.server-access {
  color: #a0b6ce;
  font-size: 10px;
}
.server-open {
  padding: 13px 17px;
  border-radius: 10px;
  background: linear-gradient(#1a2632, #101922);
  border-color: #3b5267;
  color: #e6eef7;
  font-size: 12px;
}
.server-row:hover .server-open,
.server-row.current .server-open {
  background: #ffe21c;
  color: #11170a;
  border-color: #ffe21c;
}
.server-page-note {
  max-width: 970px;
  margin: 22px auto;
  text-align: center;
  color: #849db5;
}
.savebar {
  background: #152736;
  border-color: #60768c;
  border-radius: 12px;
}
footer {
  color: #7891a7;
}
@media (max-width: 1200px) {
  :root {
    --sidebar: 235px;
  }
  .sidebar {
    padding: 27px 16px;
  }
  .brand {
    font-size: 31px;
    margin: 0 12px 31px;
  }
  .nav-item {
    font-size: 12px;
    padding: 16px 14px;
    gap: 14px;
  }
  .topbar {
    padding: 0 27px;
  }
  main {
    padding: 29px 27px;
  }
  .reference-stats .stat-card {
    padding: 18px 15px;
    gap: 12px;
  }
  .reference-stats .stat-symbol {
    width: 41px;
    height: 41px;
  }
  .reference-stats .stat-symbol svg {
    height: 23px;
    width: 23px;
  }
  .savebar {
    left: calc(50% + 117.5px);
  }
  .welcome-card,
  .welcome-logo {
    padding: 31px;
  }
  .welcome-card .wordmark {
    font-size: 52px;
  }
}
@media (max-width: 850px) {
  :root {
    --sidebar: 190px;
  }
  .brand {
    font-size: 26px;
    margin: 0 2px 30px;
  }
  .sidebar {
    padding: 24px 13px;
  }
  .server-picker {
    padding: 12px 9px;
  }
  .server-picker select {
    font-size: 10px;
  }
  .avatar {
    height: 30px;
    width: 30px;
    font-size: 10px;
  }
  .nav-item {
    font-size: 11px;
    padding: 14px 10px;
    gap: 11px;
  }
  .nav-item svg {
    height: 18px;
    width: 18px;
  }
  .reference-stats .stat-card {
    display: block;
    padding: 17px 15px;
  }
  .reference-stats .stat-symbol {
    width: 34px;
    height: 34px;
    margin-bottom: 12px;
  }
  .reference-stats .stat-top {
    font-size: 10px;
  }
  .reference-stats .stat-value {
    font-size: 25px;
  }
  .dashboard-status {
    min-width: 0;
    max-width: 175px;
  }
  .page-heading p {
    font-size: 12px;
  }
  .chart {
    height: 200px;
  }
  .savebar {
    left: calc(50% + 95px);
  }
  .gateway main {
    padding: 27px;
  }
  .gateway-top {
    margin-bottom: 39px;
  }
  .welcome-grid {
    gap: 20px;
    min-height: 420px;
  }
  .welcome-card,
  .welcome-logo {
    padding: 26px;
  }
  .welcome-card .wordmark {
    font-size: 40px;
  }
  .welcome-card h1 {
    font-size: 21px;
  }
  .welcome-card .primary-button,
  .welcome-card .ghost-button {
    font-size: 11px;
    padding: 15px;
  }
  .welcome-logo {
    min-height: 420px;
  }
  .welcome-logo img {
    max-width: 255px;
  }
  .server-access {
    display: none;
  }
  .server-info strong {
    font-size: 13px;
  }
  .server-open {
    font-size: 10px;
    padding: 12px;
  }
  .server-page-panel {
    padding: 20px;
  }
}
@media (max-width: 600px) {
  :root {
    --sidebar: 0px;
  }
  .sidebar {
    width: 100%;
    padding: 22px 18px;
    border-bottom: 1px solid #273742;
  }
  .brand {
    font-size: 30px;
    margin: 0 0 22px;
  }
  .server-picker {
    margin: 0 0 16px;
    padding: 12px;
  }
  .server-picker select {
    font-size: 11px;
  }
  .sidebar nav {
    gap: 7px;
  }
  .nav-item {
    margin: 0;
    padding: 11px 13px;
    font-size: 11px;
    gap: 0;
  }
  .workspace {
    margin-left: 0;
  }
  .topbar {
    height: 52px;
    padding: 0 18px;
  }
  main {
    padding: 24px 18px;
  }
  .page-heading h1 {
    font-size: 29px;
  }
  .page-heading p {
    font-size: 11px;
  }
  .dashboard-status {
    max-width: none;
    width: 100%;
    min-width: 0;
    padding: 12px 15px;
  }
  .dashboard-status strong {
    font-size: 10px;
  }
  .dashboard-status small {
    font-size: 9px;
  }
  .reference-stats {
    gap: 9px;
  }
  .reference-stats .stat-card {
    padding: 14px 11px;
    border-radius: 12px;
  }
  .reference-stats .stat-symbol {
    height: 28px;
    width: 28px;
    border-radius: 8px;
  }
  .reference-stats .stat-symbol svg {
    height: 18px;
    width: 18px;
  }
  .reference-stats .stat-top,
  .reference-stats .stat-card:last-child .stat-top {
    font-size: 9px;
  }
  .reference-stats .stat-value {
    font-size: 24px;
  }
  .reference-stats .stat-caption {
    font-size: 8px;
  }
  .panel {
    border-radius: 14px;
  }
  .panel-head {
    padding: 20px 18px;
  }
  .panel h2 {
    font-size: 14px;
  }
  .panel-head p {
    font-size: 10px;
  }
  .range-select {
    font-size: 9px;
    padding: 8px 10px;
  }
  .chart {
    height: 175px;
  }
  .chart-wrap {
    padding: 0 12px 16px;
  }
  .chart-summary {
    font-size: 8px;
  }
  .activity-list {
    padding: 0 18px 7px;
  }
  .activity-icon {
    height: 28px;
    width: 28px;
  }
  .activity-copy strong {
    font-size: 10px;
  }
  .activity-copy p {
    font-size: 8px;
  }
  .activity-time {
    font-size: 8px;
  }
  .section-tabs button {
    font-size: 9px;
    padding: 9px 10px;
  }
  .setup-banner,
  .banana-extra {
    padding: 21px 19px;
    border-radius: 14px;
  }
  .setup-banner h2 {
    font-size: 19px;
  }
  .setup-banner p,
  .banana-extra p {
    font-size: 10px;
  }
  .form-panel {
    padding: 22px;
  }
  .wizard-content {
    padding: 23px;
  }
  .wizard-content h2 {
    font-size: 21px;
  }
  .savebar {
    left: 50%;
  }
  .gateway main {
    padding: 25px 18px;
  }
  .gateway-top {
    margin-bottom: 30px;
  }
  .wordmark {
    font-size: 31px;
  }
  .welcome-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 0;
  }
  .welcome-card {
    padding: 28px;
  }
  .welcome-card .wordmark {
    font-size: 47px;
    margin-bottom: 15px;
  }
  .welcome-eyebrow {
    font-size: 9px;
    letter-spacing: 2px;
    margin-bottom: 21px;
  }
  .welcome-card h1 {
    font-size: 24px;
  }
  .welcome-card p {
    font-size: 12px;
  }
  .welcome-card .primary-button,
  .welcome-card .ghost-button {
    font-size: 12px;
    padding: 15px 18px;
  }
  .welcome-logo {
    min-height: 265px;
    padding: 24px;
  }
  .welcome-logo img {
    max-width: 205px;
  }
  .welcome-features {
    gap: 15px;
    margin-top: 27px;
    align-items: center;
  }
  .server-page-panel {
    padding: 15px;
    border-radius: 17px;
  }
  .server-page-heading h1 {
    font-size: 28px;
  }
  .server-page-search input {
    font-size: 12px;
    padding: 12px 0;
  }
  .server-row {
    padding: 15px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .server-avatar {
    height: 43px;
    width: 43px;
    font-size: 14px;
  }
  .server-info {
    min-width: 170px;
  }
  .server-info strong {
    font-size: 13px;
  }
  .server-info small {
    font-size: 10px;
  }
  .server-open {
    width: 100%;
    font-size: 11px;
    justify-content: space-between;
    padding: 12px;
    margin-top: 4px;
  }
  .server-page-note {
    font-size: 10px;
  }
}
/* Final reference proportions and gateway compositions. */
:root {
  --sidebar: 300px;
}
.topbar {
  height: 64px;
}
.brand {
  font-size: 36px;
  margin: 0 23px 29px;
}
.sidebar {
  padding-top: 29px;
}
.server-picker {
  margin-bottom: 31px;
  min-height: 67px;
}
.nav-item {
  padding: 17px 22px;
  margin: 14px 0;
  font-size: 14px;
}
.reference-stats .stat-card {
  padding: 17px;
  min-height: 98px;
}
.reference-stats .stat-symbol {
  width: 57px;
  height: 57px;
}
.reference-stats .stat-value {
  font-size: 26px;
  margin-top: 9px;
}
.reference-stats .stat-caption {
  font-size: 8px;
}
.reference-stats .stat-card:first-child .stat-symbol {
  background: #1b2833;
  color: #b1c3df;
}
.reference-stats .stat-card:last-child .stat-symbol {
  background: #c2a30e24;
}
.panel-head {
  padding: 19px 22px 15px;
}
.chart {
  height: 207px;
}
.activity-row {
  padding: 11px 0;
}
.activity-list {
  padding-bottom: 8px;
}
.activity-copy strong {
  font-weight: 500;
}
.topbar .breadcrumbs {
  visibility: hidden;
}
.top-actions {
  position: relative;
  margin-left: auto;
}
.top-actions #open-tools,
.top-actions .text-link[href],
.top-actions #mode-badge {
  display: none;
}
.header-account {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  color: #f4f6fb;
  font-size: 12px;
  font-weight: 500;
  padding: 0;
}
.header-avatar {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #8ba0ff, #4764f4);
  color: white;
  font-size: 21px;
  box-shadow: 0 0 15px #4a71ff25;
}
.account-chevron {
  color: #a4bad1;
  font-size: 19px;
  margin-left: 4px;
}
.savebar {
  left: calc(50% + 150px);
}
.gateway main {
  max-width: 1290px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 44px 45px;
}
.gateway .gateway-top {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  min-height: 83px;
}
.gateway-top .wordmark {
  font-size: 66px;
  letter-spacing: -2.2px;
}
.gateway-top #gateway-account {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 10px;
  padding: 8px 11px;
  opacity: 0.65;
}
.gateway .server-page-heading {
  margin: 0 0 29px;
}
.server-page-heading h1 {
  font-size: 16px;
  letter-spacing: 7px;
  font-weight: 600;
  color: #a3b4c8;
}
.server-page-panel {
  width: 100%;
  max-width: 1020px;
  padding: 27px;
  border-radius: 22px;
}
.server-page-search {
  padding: 6px 17px;
  margin-bottom: 27px;
  min-height: 63px;
}
.server-page-search input {
  font-size: 16px;
}
.server-row {
  min-height: 97px;
  padding: 15px 17px;
}
.server-avatar {
  width: 66px;
  height: 66px;
  border-radius: 15px;
  font-size: 21px;
}
.server-info strong {
  font-size: 18px;
}
.server-info small {
  font-size: 13px;
}
.server-access {
  font-size: 12px;
  min-width: 175px;
}
.server-open {
  font-size: 13px;
  padding: 16px 19px;
}
.server-page-note {
  font-size: 9px;
  margin: 17px auto 0;
}
.landing-reference {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 580px;
}
.landing-reference .welcome-grid {
  width: 100%;
  max-width: 1190px;
  gap: 30px;
  min-height: 480px;
}
.welcome-card,
.welcome-logo {
  padding: 45px;
  border-radius: 26px;
  border-color: #556471;
  background: linear-gradient(135deg, #1a2229, #040709);
}
.welcome-card .wordmark {
  font-size: 70px;
  letter-spacing: -2.7px;
  text-align: center;
  margin-bottom: 17px;
}
.welcome-card .welcome-eyebrow {
  font-size: 14px;
  letter-spacing: 9px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: #8d9cb0;
  order: 1;
  margin: 0 0 31px;
}
.welcome-card .primary-button,
.welcome-card .ghost-button {
  padding: 20px 24px;
  font-size: 19px;
  font-weight: 600;
  border-radius: 15px;
  margin-bottom: 15px;
  justify-content: space-between;
  min-height: 75px;
}
.welcome-card .primary-button > svg:first-child {
  width: 23px;
  height: 23px;
}
.welcome-card .primary-button > span {
  flex: 1;
  text-align: center;
}
.welcome-card .primary-button > svg:last-child,
.welcome-card .ghost-button > svg {
  width: 24px;
  height: 24px;
}
.welcome-card small {
  text-align: center;
  font-size: 9px;
  order: 6;
  margin-top: 5px;
}
.welcome-logo {
  min-height: 480px;
  padding: 26px;
}
.welcome-logo img {
  max-width: 430px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 25px #ffe21c10);
}
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background:
    radial-gradient(ellipse at center, #28312725, transparent 65%), #020405;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #f0f4fa;
}
.page-loader[hidden] {
  display: none;
}
.loader-brand {
  font-size: 40px;
  letter-spacing: -1.5px;
  font-weight: 750;
}
.loader-brand > span {
  color: #ffe21c;
}
.loader-orbit {
  position: relative;
  width: 122px;
  height: 122px;
  margin: 32px 0 23px;
  display: grid;
  place-items: center;
  border: 1px solid #eac92e24;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ffe21c0b, transparent 70%);
}
.loader-orbit:before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px solid transparent;
  border-top-color: #ffe21c;
  border-right-color: #ffe21c44;
  border-radius: 50%;
  animation: banana-orbit 1.4s linear infinite;
}
.loader-orbit img {
  height: 91px;
  width: 91px;
  object-fit: contain;
}
.page-loader h2 {
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -0.3px;
  margin: 0 0 10px;
}
.page-loader p {
  font-size: 12px;
  color: #8ea7c1;
  margin: 0;
  text-align: center;
  padding: 0 20px;
  line-height: 1.8;
}
.loader-track {
  height: 3px;
  width: 165px;
  background: #1b2a37;
  border-radius: 3px;
  margin-top: 28px;
  overflow: hidden;
}
.loader-track span {
  display: block;
  width: 50%;
  height: 100%;
  background: #ffe21c;
  border-radius: 3px;
  animation: banana-track 1.15s ease-in-out infinite;
}
@keyframes banana-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes banana-track {
  0% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(310%);
  }
}
@media (max-width: 1200px) {
  :root {
    --sidebar: 245px;
  }
  .brand {
    font-size: 31px;
    margin: 0 14px 31px;
  }
  .sidebar {
    padding: 27px 17px;
  }
  .nav-item {
    font-size: 13px;
    padding: 16px;
    margin: 12px 0;
  }
  .reference-stats .stat-symbol {
    width: 46px;
    height: 46px;
  }
  .savebar {
    left: calc(50% + 122.5px);
  }
  .gateway main {
    padding: 35px;
  }
  .welcome-card,
  .welcome-logo {
    padding: 32px;
  }
  .welcome-card .wordmark {
    font-size: 56px;
  }
  .welcome-card .primary-button,
  .welcome-card .ghost-button {
    font-size: 15px;
    padding: 17px 21px;
    min-height: 63px;
  }
  .server-access {
    min-width: 140px;
    font-size: 10px;
  }
  .server-info strong {
    font-size: 15px;
  }
  .server-info small {
    font-size: 11px;
  }
  .server-open {
    font-size: 11px;
  }
  .server-avatar {
    width: 57px;
    height: 57px;
  }
  .gateway-top .wordmark {
    font-size: 56px;
  }
}
@media (max-width: 850px) {
  :root {
    --sidebar: 190px;
  }
  .sidebar {
    padding: 24px 13px;
  }
  .brand {
    font-size: 26px;
    margin: 0 2px 28px;
  }
  .nav-item {
    font-size: 11px;
    padding: 14px 10px;
    margin: 10px 0;
    gap: 12px;
  }
  .reference-stats .stat-card {
    padding: 17px 15px;
    min-height: 0;
  }
  .reference-stats .stat-symbol {
    width: 34px;
    height: 34px;
  }
  .savebar {
    left: calc(50% + 95px);
  }
  .gateway main {
    padding: 27px;
  }
  .landing-reference .welcome-grid {
    gap: 20px;
    min-height: 420px;
  }
  .welcome-card,
  .welcome-logo {
    padding: 25px;
  }
  .welcome-card .wordmark {
    font-size: 43px;
    letter-spacing: -1.8px;
  }
  .welcome-card .welcome-eyebrow {
    font-size: 11px;
    letter-spacing: 6px;
    margin-bottom: 23px;
  }
  .welcome-card .primary-button,
  .welcome-card .ghost-button {
    font-size: 12px;
    padding: 16px;
    min-height: 57px;
    border-radius: 11px;
  }
  .welcome-card .primary-button > svg:first-child,
  .welcome-card .primary-button > svg:last-child,
  .welcome-card .ghost-button > svg {
    width: 18px;
    height: 18px;
  }
  .welcome-logo {
    min-height: 420px;
  }
  .server-avatar {
    height: 51px;
    width: 51px;
  }
  .server-info strong {
    font-size: 14px;
  }
  .server-open {
    padding: 13px 16px;
    font-size: 11px;
  }
  .server-access {
    display: none;
  }
  .server-page-search input {
    font-size: 14px;
  }
  .server-page-panel {
    padding: 21px;
  }
}
@media (max-width: 600px) {
  :root {
    --sidebar: 0px;
  }
  .sidebar {
    width: 100%;
    padding: 21px 18px;
  }
  .brand {
    font-size: 30px;
    margin: 0 0 21px;
  }
  .server-picker {
    margin: 0 0 16px;
    min-height: 0;
  }
  .nav-item {
    font-size: 11px;
    margin: 0;
    padding: 11px 14px;
  }
  .topbar .breadcrumbs {
    display: none;
  }
  .top-actions {
    width: 100%;
    justify-content: space-between;
  }
  .top-actions .mobile-servers {
    display: inline-flex;
    order: 0;
  }
  .header-account {
    order: 1;
    font-size: 10px;
    gap: 7px;
  }
  .header-avatar {
    height: 27px;
    width: 27px;
    font-size: 17px;
  }
  .account-chevron {
    font-size: 16px;
  }
  .reference-stats .stat-symbol {
    height: 28px;
    width: 28px;
  }
  .reference-stats .stat-card {
    padding: 14px 11px;
  }
  .chart {
    height: 175px;
  }
  .savebar {
    left: 50%;
  }
  .gateway main {
    padding: 28px 18px;
    justify-content: flex-start;
  }
  .gateway-top .wordmark {
    font-size: 43px;
    letter-spacing: -1.5px;
  }
  .gateway .gateway-top {
    margin-top: 18px;
    margin-bottom: 6px;
    min-height: 70px;
  }
  .gateway-top #gateway-account {
    position: fixed;
    top: 10px;
    right: 12px;
    font-size: 8px;
    padding: 5px 7px;
  }
  .server-page-heading h1 {
    font-size: 12px;
    letter-spacing: 4px;
  }
  .gateway .server-page-heading {
    margin-bottom: 22px;
  }
  .server-page-panel {
    padding: 15px;
    border-radius: 17px;
  }
  .server-page-search {
    min-height: 0;
    padding: 4px 10px;
    margin-bottom: 19px;
  }
  .server-page-search input {
    font-size: 12px;
    padding: 12px 0;
  }
  .server-row {
    padding: 14px;
    gap: 12px;
    min-height: 0;
  }
  .server-avatar {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }
  .server-info strong {
    font-size: 13px;
  }
  .server-info small {
    font-size: 10px;
  }
  .server-open {
    width: 100%;
    justify-content: space-between;
    font-size: 11px;
    padding: 12px;
  }
  .landing-reference {
    min-height: 0;
    margin-top: 25px;
  }
  .landing-reference .welcome-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    min-height: 0;
  }
  .welcome-card {
    padding: 33px 27px;
    border-radius: 22px;
  }
  .welcome-card .wordmark {
    font-size: 55px;
    letter-spacing: -2px;
  }
  .welcome-card .welcome-eyebrow {
    font-size: 11px;
    letter-spacing: 7px;
    margin-bottom: 27px;
  }
  .welcome-card .primary-button,
  .welcome-card .ghost-button {
    font-size: 13px;
    padding: 17px;
    min-height: 58px;
    border-radius: 12px;
  }
  .welcome-logo {
    min-height: 270px;
    padding: 20px;
    border-radius: 22px;
  }
  .welcome-logo img {
    max-width: 235px;
  }
  .loader-brand {
    font-size: 35px;
  }
  .page-loader h2 {
    font-size: 16px;
  }
  .loader-orbit {
    height: 103px;
    width: 103px;
  }
  .loader-orbit img {
    height: 77px;
    width: 77px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .loader-orbit:before,
  .loader-track span {
    animation: none;
  }
  .loader-track span {
    width: 100%;
  }
}
.welcome-card .welcome-eyebrow {
  display: block;
  text-transform: uppercase;
  text-align: center;
}
.server-page-heading h1 {
  text-transform: uppercase;
}
.welcome-card .ghost-button > span:not(.invite-plus) {
  flex: 1;
  text-align: center;
}
.invite-plus {
  font-size: 33px;
  font-weight: 350;
  line-height: 1;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.server-gateway main {
  display: block;
  padding-top: 30px;
}
.server-gateway .gateway-top {
  min-height: 83px;
  margin: 0 0 12px;
}
.server-gateway .server-page-heading {
  margin-bottom: 25px;
}
.server-gateway .server-page-heading h1 {
  margin: 0;
}
.server-gateway .server-page-panel {
  margin: 0 auto;
}
.server-page-search input[type="text"] {
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
}
.server-gateway .server-page-note {
  margin: 20px auto 0;
}
@media (max-width: 600px) {
  .server-gateway main {
    padding-top: 30px;
  }
  .server-gateway .gateway-top {
    min-height: 69px;
    margin-bottom: 9px;
  }
  .server-gateway .server-page-heading {
    margin-bottom: 22px;
  }
}
.header-profile {
  position: relative;
}
.header-profile summary {
  list-style: none;
  cursor: pointer;
}
.header-profile summary::-webkit-details-marker {
  display: none;
}
.profile-menu {
  position: absolute;
  right: 0;
  top: 45px;
  min-width: 170px;
  padding: 10px;
  border: 1px solid #354b5d;
  background: #0c1721;
  border-radius: 10px;
  box-shadow: 0 10px 30px #0009;
  z-index: 10;
}
.profile-menu button {
  width: 100%;
  font-size: 11px !important;
  text-align: left;
  justify-content: flex-start;
}
@media (max-width: 850px) {
  .reference-stats .stat-card,
  .reference-stats .stat-card:first-child,
  .reference-stats .stat-card:last-child {
    display: block;
  }
  .reference-stats .stat-symbol {
    margin-bottom: 12px;
  }
  .reference-stats .stat-top,
  .reference-stats .stat-card:last-child .stat-top {
    font-size: 10px;
  }
  .reference-stats .stat-caption,
  .reference-stats .stat-card:last-child .stat-caption {
    font-size: 8px;
  }
}
@media (max-width: 600px) {
  .reference-stats .stat-top,
  .reference-stats .stat-card:last-child .stat-top {
    font-size: 9px;
  }
  .reference-stats .stat-value {
    font-size: 24px;
  }
  .reference-stats .stat-symbol {
    margin-bottom: 10px;
  }
}
/* Brighter surfaces and task-focused layouts. */
body {
  background:
    radial-gradient(ellipse at 85% 0%, #30313a, transparent 55%), #141921;
  color: #f7f8fc;
}
.sidebar {
  background: linear-gradient(155deg, #252b35, #151b25);
  border-right-color: #465164;
}
.topbar {
  background: #1b222c;
  border-bottom-color: #414c5c;
}
.panel {
  background: linear-gradient(125deg, #2c3644, #222b38);
  border-color: #526177;
  box-shadow: 0 8px 30px #0002;
  border-radius: 16px;
}
.panel p,
.page-heading p {
  color: #c4d0e2;
}
.page-heading h1 {
  font-size: 32px;
  letter-spacing: -0.7px;
}
.nav-item {
  margin: 5px 0;
  padding: 13px 18px;
  color: #c3cede;
}
.nav-item.active {
  background: linear-gradient(100deg, #ffdf3930, #ffdf3910);
  color: #ffea69;
  border-color: #ecd039;
  box-shadow:
    inset 3px 0 #ffe44a,
    0 0 24px #ffe44a12;
}
.server-picker {
  background: #ffe13912;
  border-color: #d8bd39;
}
.primary-button {
  background: linear-gradient(120deg, #ffec70, #ffdc31);
  box-shadow: 0 4px 18px #ffdc3120;
  color: #161709;
}
.ghost-button {
  background: #303d4f;
  border-color: #596d87;
  color: #e0e8f5;
}
.ghost-button:hover {
  background: #3e5067;
  border-color: #a5b2c7;
}
.setup-banner {
  margin: 0 0 22px;
  border: 1px solid #a38f46;
  background: linear-gradient(115deg, #655735, #343d4b 75%);
  border-radius: 16px;
  padding: 24px 28px;
}
.setup-banner h2 {
  font-size: 22px;
}
.setup-banner .badge {
  background: #ffe047;
  color: #282209;
  border: 0;
}
.reference-stats {
  margin-bottom: 22px;
  gap: 18px;
}
.reference-stats .stat-card,
.reference-stats .stat-card:first-child,
.reference-stats .stat-card:last-child {
  background: linear-gradient(125deg, #324055, #263347);
  border-color: #5c7394;
  min-height: 112px;
  border-radius: 16px;
}
.reference-stats .stat-card .stat-symbol {
  background: #77baff24;
  color: #8bc6ff;
}
.reference-stats .stat-card:nth-child(2) .stat-symbol {
  background: #5be0cf24;
  color: #6cf3dc;
}
.reference-stats .stat-card:last-child .stat-symbol {
  background: #ffe34324;
  color: #ffe55b;
}
.overview-columns {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
  margin-bottom: 22px;
}
.overview-columns .panel {
  margin: 0;
}
.server-information h2 {
  margin-bottom: 18px;
}
.activity-row.activity-event {
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #526177;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 14px 4px;
}
.activity-event:hover {
  background: #ffffff08;
}
.activity-event:focus-visible {
  outline: 2px solid #ffe343;
  outline-offset: 2px;
}
.activity-icon {
  background: #ffdf3924;
  color: #ffe447;
}
.activity-copy p {
  font-size: 12px;
}
.activity-time {
  font-size: 11px;
}
.banana-extra {
  background: linear-gradient(110deg, #2f4d58, #303c52);
  border: 1px solid #6e9aac;
  border-radius: 16px;
  margin: 22px 0;
  padding: 24px;
}
.extra-icon {
  color: #69efd9;
  background: #69efd921;
}
.field input[type="text"],
.field select,
.field textarea {
  background: #182334;
  border-color: #647e9f;
  color: #f1f5fb;
}
.optional-heading {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #526177;
}
.focused-form {
  max-width: 760px;
}
.statistics-columns {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 22px;
}
.statistics-columns .chart {
  height: 240px;
}
.breakdown {
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: center;
  gap: 20px;
}
.breakdown svg {
  width: 100%;
  fill: #c5d0e3;
  font-size: 12px;
}
.breakdown .donut-total {
  fill: #fff;
  font-size: 29px;
  font-weight: 700;
}
.chart-key {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}
.key-0 {
  background: #ffe343;
}
.key-1 {
  background: #a994ff;
}
.key-2 {
  background: #5be0cf;
}
.key-3 {
  background: #77baff;
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.metrics-grid > div {
  padding: 18px;
  background: #ffffff05;
  border: 1px solid #596b85;
  border-radius: 12px;
}
.metrics-grid span {
  display: block;
  font-size: 12px;
  color: #c3cfe1;
}
.metrics-grid strong {
  display: block;
  font-size: 27px;
  margin-top: 10px;
  color: #ffea73;
}
.config-row {
  border-color: #536580;
}
.chart text {
  fill: #c3cfe1;
}
.chart line {
  stroke: #536580;
}
.gateway {
  background: radial-gradient(ellipse at center, #35382e, #111923 75%);
}
.welcome-card,
.welcome-logo,
.server-page-panel {
  background: linear-gradient(125deg, #303b4a, #212c3b);
  border-color: #687d98;
}
.server-row {
  background: linear-gradient(120deg, #35455b, #2b394f);
  border-color: #5e7593;
}
.server-page-search {
  background: #1d2c41;
  border-color: #687d98;
}
.welcome-card small,
.server-page-note {
  color: #c0cfe3;
}
@media (max-width: 1200px) {
  .statistics-columns {
    grid-template-columns: 1fr;
  }
  .breakdown {
    grid-template-columns: 200px 1fr;
  }
  .metrics-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 850px) {
  .overview-columns {
    grid-template-columns: 1fr;
  }
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .nav-item {
    padding: 12px;
  }
  .page-heading h1 {
    font-size: 27px;
  }
}
@media (max-width: 600px) {
  .setup-banner,
  .banana-extra {
    padding: 20px;
    gap: 16px;
    flex-wrap: wrap;
  }
  .setup-banner .primary-button,
  .banana-extra .primary-button {
    width: 100%;
    justify-content: center;
  }
  .breakdown {
    grid-template-columns: 140px 1fr;
    gap: 12px;
  }
  .reference-stats {
    gap: 9px;
  }
  .reference-stats .stat-card,
  .reference-stats .stat-card:first-child,
  .reference-stats .stat-card:last-child {
    padding: 14px 10px;
  }
  .page-heading h1 {
    font-size: 25px;
  }
  .activity-time {
    max-width: 70px;
    text-align: right;
  }
  .metrics-grid strong {
    font-size: 24px;
  }
}
.workspace {
  background:
    radial-gradient(ellipse at 80% 0%, #333b443d, transparent 60%), #141b25;
}
.bar-chart {
  width: 100%;
  margin-top: 18px;
  font-size: 12px;
  fill: #c5d1e4;
}
.bar-0 {
  fill: #ffe343;
}
.bar-1 {
  fill: #a994ff;
}
.bar-2 {
  fill: #5be0cf;
}
.sidebar {
  overflow-y: auto;
}
#nav {
  flex-shrink: 0;
}
.sidebar-bottom {
  margin-top: 24px;
}
.reference-stats .stat-card:first-child .stat-symbol {
  background: #77baff24;
  color: #8bc6ff;
}
.breakdown svg {
  width: 100%;
  height: auto;
  min-width: 0;
  display: block;
}
.bar-chart {
  height: auto;
  max-height: none;
  display: block;
}
.statistics-columns .chart {
  height: auto;
  min-height: 180px;
  width: 100%;
  display: block;
}
.statistics-columns .activity-chart {
  margin-bottom: 22px;
}
.statistics-columns .form-panel {
  margin-bottom: 22px;
}
/* Reference palette: black glass, steel borders, banana yellow. */
:root {
  --bg: #020405;
  --panel: #090e12;
  --raised: #111920;
  --line: #24313b;
  --yellow: #ffe21c;
  --text: #f6f7fa;
  --muted: #a0b6cb;
}
body,
.workspace {
  background:
    radial-gradient(ellipse at 70% 35%, #15232a18, transparent 65%), #020405;
  color: #f6f7fa;
}
.sidebar {
  background: linear-gradient(130deg, #080c0f, #020405);
  border-right-color: #21303a;
  box-shadow: none;
}
.topbar {
  background: #010304;
  border-bottom-color: #1b2831;
}
.panel {
  background: linear-gradient(125deg, #0c1217, #070c10);
  border-color: #24313b;
  box-shadow: none;
}
.panel h2,
.page-heading h1,
.form-panel h2,
.stat-value {
  color: #f6f7fa;
}
.panel p,
.page-heading p,
.form-panel p,
.field small,
.toggle-row p,
.muted,
.activity-copy p,
.activity-time {
  color: #a0b6cb;
}
.nav-item {
  color: #adc1d6;
}
.nav-item svg {
  color: #9fb6ce;
}
.nav-item:hover {
  background: #151b20;
}
.nav-item.active {
  background: linear-gradient(90deg, #ffdf2728, #ffdf2709);
  color: #fffbe7;
  border-color: #d5bd18;
  box-shadow:
    inset 3px 0 #ffe21c,
    0 0 25px #ffdc0012;
}
.nav-item.active svg {
  color: #ffe21c;
}
.server-picker {
  background: linear-gradient(110deg, #ffe21c14, #070b08);
  border-color: #bda51a;
}
.server-picker select {
  color: #f1f3ec;
}
.avatar {
  background: #24240d;
  color: #ffe45b;
}
.brand-accent {
  color: #ffe21c;
}
.primary-button {
  background: linear-gradient(120deg, #ffeb45, #ffe018);
  border-color: #ffe95c;
  color: #090d05;
  box-shadow: 0 0 23px #ffdc001a;
}
.primary-button:hover {
  background: #fff05f;
  box-shadow: 0 0 23px #ffdc0030;
}
.ghost-button {
  background: linear-gradient(#111a22, #090f15);
  border-color: #2e404f;
  color: #c1d2e3;
}
.ghost-button:hover {
  background: #1b2631;
  border-color: #657888;
}
.setup-banner {
  background: linear-gradient(115deg, #ffdf2715, #090e12 80%);
  border-color: #6f621c;
  color: #f6f7fa;
  box-shadow: none;
}
.setup-banner h2 {
  color: #f6f7fa;
}
.setup-banner p {
  color: #a0b6cb;
}
.setup-banner .badge {
  background: #ffe21c14;
  color: #ffe45b;
  border: 1px solid #bda51a55;
}
.reference-stats .stat-card,
.reference-stats .stat-card:first-child,
.reference-stats .stat-card:last-child {
  background: linear-gradient(120deg, #0c1217, #070c10);
  border-color: #24313b;
}
.reference-stats .stat-card .stat-top,
.reference-stats .stat-card .stat-caption {
  color: #adc1d6;
}
.reference-stats .stat-card:first-child .stat-symbol,
.reference-stats .stat-card:nth-child(2) .stat-symbol {
  background: #17212a;
  color: #a8bdd7;
}
.reference-stats .stat-card:last-child .stat-symbol {
  background: #302b0b;
  color: #ffe21c;
}
.activity-icon {
  background: #302b0b;
  color: #ffe21c;
}
.activity-row.activity-event,
.config-row,
.toggle-row,
.optional-heading {
  border-color: #24313b;
}
.activity-event:hover {
  background: #ffffff05;
}
.config-row span {
  color: #a0b6cb;
}
.config-row strong {
  color: #f6f7fa;
}
.banana-extra {
  background: linear-gradient(110deg, #ffe21c0c, #090e12);
  border-color: #3f3b22;
  color: #f6f7fa;
}
.banana-extra h2 {
  color: #f6f7fa;
}
.banana-extra p {
  color: #a0b6cb;
}
.extra-icon {
  background: #ffe21c14;
  color: #ffe21c;
}
.field input[type="text"],
.field select,
.field textarea,
input[type="text"],
select,
textarea {
  background: #0c151e;
  border-color: #334556;
  color: #edf2f8;
}
.field input::placeholder,
input::placeholder {
  color: #a0b6cb;
}
.notice-preview {
  background: #101920;
  border-color: #334556;
  color: #f6f7fa;
}
.notice-preview p,
.notice-preview small {
  color: #adc1d6;
}
.badge {
  background: #ffe21c08;
  border-color: #c9b6342a;
  color: #cfbf6e;
}
.locked-banner {
  background: #ffe21c0a;
  border-color: #776b2655;
  color: #e4d58a;
}
.metrics-grid > div {
  background: #111920;
  border-color: #2e404f;
}
.metrics-grid span {
  color: #a0b6cb;
}
.metrics-grid strong {
  color: #ffe21c;
}
.chart text,
.bar-chart,
.breakdown svg {
  fill: #adc1d6;
}
.chart line {
  stroke: #24313b;
}
.chart-summary {
  color: #a0b6cb;
}
.key-0,
.bar-0 {
  background: #ffe21c;
  fill: #ffe21c;
}
.key-1,
.bar-1 {
  background: #a0b6cb;
  fill: #a0b6cb;
}
.key-2,
.bar-2 {
  background: #7189a0;
  fill: #7189a0;
}
.key-3 {
  background: #3c4f62;
}
body.gateway,
body.gateway .workspace {
  background:
    radial-gradient(ellipse at 50% 45%, #23374412, transparent 65%), #000;
}
.welcome-card,
.welcome-logo,
.server-page-panel {
  background: linear-gradient(135deg, #1a2229, #040709);
  border-color: #556471;
  box-shadow: none;
}
.welcome-logo {
  background:
    radial-gradient(ellipse at center, #ffe21c10, transparent 65%),
    linear-gradient(135deg, #192229, #05090d);
}
.server-row {
  background: linear-gradient(120deg, #111920, #080d12);
  border-color: #293b48;
}
.server-row:hover,
.server-row.current {
  background: linear-gradient(110deg, #ffe21c20, #ffe21c08);
  border-color: #ffe21c;
  box-shadow: 0 0 20px #ffe21c12;
}
.server-open {
  background: linear-gradient(#1a232d, #10171e);
  border-color: #344653;
  color: #f6f7fa;
}
.server-row.current .server-open,
.server-row:hover .server-open {
  background: linear-gradient(#ffeb45, #ffe018);
  color: #090d05;
}
.server-access,
.server-info small,
.welcome-card small,
.server-page-note {
  color: #a0b6cb;
}
.server-page-search {
  background: linear-gradient(120deg, #17212b, #0c141c);
  border-color: #334556;
}
.welcome-eyebrow,
.server-page-heading h1 {
  color: #a0b6cb;
}
.page-loader {
  background:
    radial-gradient(ellipse at center, #28312725, transparent 65%), #020405;
}
.page-loader p {
  color: #a0b6cb;
}
.loader-brand {
  color: #f6f7fa;
}
.loader-orbit {
  background: #ffe21c08;
}
.profile-menu {
  background: #0c1721;
  border-color: #354b5d;
}
footer {
  color: #a0b6cb;
}
.server-dialog {
  background: #0c1721;
  color: #f6f7fa;
  border-color: #354b5d;
}
.server-dialog p {
  color: #a0b6cb;
}
#toast,
.savebar {
  background: #111920;
  color: #f6f7fa;
  border-color: #4c4a29;
}
.hero {
  background: linear-gradient(115deg, #ffe21c15, #090e12);
  border-color: #6f621c;
}
.premium-help .command {
  background: #111920;
  color: #ffe45b;
}
.wizard-progress li {
  color: #a0b6cb;
}
.wizard-progress li.current {
  color: #ffe21c;
}
/* Consistent spacing and the reference palette on entry screens. */
body.gateway,
body.gateway .workspace {
  background:
    radial-gradient(ellipse at 50% 45%, #17232c18, transparent 65%), #000;
}
.welcome-card,
.welcome-logo,
.server-page-panel {
  border-color: #34414d;
  background: linear-gradient(135deg, #171d23, #060a0e);
}
.welcome-logo {
  background:
    radial-gradient(ellipse at center, #ffe21c0d, transparent 65%),
    linear-gradient(135deg, #171d23, #060a0e);
}
.server-row {
  background: linear-gradient(120deg, #10171d, #080d11);
}
.welcome-card .welcome-eyebrow {
  color: #a0b6cb;
}
.form-panel > h2:not(:first-child) {
  margin-top: 28px;
}
.form-panel > .field {
  margin-top: 20px;
}
.overview-columns {
  align-items: start;
}
.overview-columns .panel {
  height: 100%;
}
.panel-head {
  gap: 18px;
}
.activity-copy {
  min-width: 0;
}
.activity-copy p {
  overflow-wrap: anywhere;
}
.config-row {
  gap: 18px;
}
.config-row strong {
  text-align: right;
  overflow-wrap: anywhere;
  min-width: 0;
}
.wizard-actions {
  gap: 16px;
}
.page-loader h2 {
  margin-bottom: 22px;
}
.setup-banner,
.banana-extra {
  gap: 24px;
}
.sidebar-bottom {
  padding-top: 14px;
}
.settings-layout {
  gap: 24px;
}
.server-page-search {
  gap: 14px;
}
.server-page-search > span {
  flex-shrink: 0;
}
.server-info {
  min-width: 0;
}
.server-info strong {
  overflow-wrap: anywhere;
}
.server-row {
  gap: 18px;
}
.welcome-card small {
  margin-top: 22px;
  line-height: 1.7;
}
.scenario-steps {
  list-style: none;
  padding-left: 0;
}
.optional-heading {
  margin-top: 28px;
}
@media (max-width: 600px) {
  .page-heading h1 {
    line-height: 1.25;
  }
  .panel-head {
    align-items: flex-start;
    gap: 12px;
  }
  .panel-head .ghost-button {
    flex-shrink: 0;
  }
  .config-row strong {
    max-width: 60%;
  }
  .server-row {
    gap: 12px;
  }
  .wizard-actions {
    flex-wrap: wrap;
  }
  .server-page-heading h1 {
    letter-spacing: 3px;
  }
  .overview-columns .panel {
    height: auto;
  }
}
/* Reference proportions: readable type, glass panels, restrained yellow glow. */
.panel {
  background: linear-gradient(135deg, #0e151a, #070c10);
  border: 1px solid #27343f;
  border-radius: 15px;
}
.panel h2 {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.35px;
}
.panel p,
.page-heading p {
  font-size: 15px;
  line-height: 1.6;
}
.panel-head {
  padding: 20px 23px 16px;
}
.form-panel {
  padding: 24px;
}
.page-heading h1 {
  font-size: 34px;
}
.nav-item {
  font-size: 15px;
  min-height: 54px;
}
.nav-item.active {
  background: linear-gradient(100deg, #ffdf2730, #ffdf2710);
  border-color: #ebce18;
  box-shadow:
    inset 3px 0 #ffe21c,
    0 0 22px #ffdc001c;
}
.server-picker {
  border-color: #d9bc16;
  background: linear-gradient(110deg, #ffe21c1b, #070b08);
}
.reference-stats .stat-card,
.reference-stats .stat-card:first-child,
.reference-stats .stat-card:last-child {
  min-height: 100px;
  padding: 18px;
  border-radius: 15px;
}
.reference-stats .stat-top {
  font-size: 14px;
}
.reference-stats .stat-value {
  font-size: 29px;
}
.reference-stats .stat-symbol {
  width: 62px;
  height: 62px;
}
.reference-stats .stat-symbol svg {
  width: 31px;
  height: 31px;
}
.reference-stats .stat-caption {
  font-size: 11px;
}
.activity-copy strong {
  font-size: 14px;
}
.activity-copy p,
.activity-time {
  font-size: 13px;
}
.activity-row.activity-event {
  padding: 12px 0;
}
.activity-icon {
  width: 48px;
  height: 44px;
  border-radius: 10px;
}
.activity-list {
  padding: 0 23px 16px;
}
.config-row {
  padding: 15px 0;
  font-size: 14px;
}
.primary-button,
.ghost-button {
  font-size: 14px;
}
.primary-button {
  background: linear-gradient(120deg, #ffeb45, #ffe018);
  box-shadow: 0 0 25px #ffdc001a;
}
.setup-banner,
.banana-extra {
  padding: 23px;
  border-radius: 15px;
}
.setup-banner h2,
.banana-extra h2 {
  font-size: 21px;
}
.setup-banner p,
.banana-extra p {
  font-size: 14px;
}
.welcome-card,
.welcome-logo {
  border-color: #4f5b67;
  background: linear-gradient(135deg, #1a2026, #060a0d);
  box-shadow: inset 0 1px #ffffff09;
}
.welcome-card .primary-button {
  box-shadow: 0 0 35px #ffdf2725;
}
.welcome-card .ghost-button {
  background: linear-gradient(135deg, #1b2229, #090d11);
  border-color: #46515c;
  color: #f5f7fa;
}
.server-page-panel {
  background: linear-gradient(135deg, #10161b, #05090d);
  border-color: #34414d;
}
.server-row {
  border-color: #2c3945;
  background: linear-gradient(120deg, #11181e, #080d11);
  min-height: 98px;
}
.server-row:hover,
.server-row.current {
  border-color: #ffe21c;
  background: linear-gradient(110deg, #ffe21c23, #ffe21c0c);
  box-shadow: 0 0 24px #ffe21c15;
}
.server-info strong {
  font-size: 20px;
}
.server-info small,
.server-access {
  font-size: 15px;
}
.server-open {
  font-size: 16px;
  padding: 18px 24px;
}
.server-avatar {
  background: #080b0f;
  color: #f4dc43;
  border: 1px solid #ffffff05;
}
.server-page-search {
  background: linear-gradient(120deg, #172029, #0c141b);
  border-color: #34414d;
}
.server-page-search input[type="text"] {
  font-size: 18px;
}
.green-dot {
  background: #19d329;
  box-shadow: 0 0 15px #19d32935;
}
.welcome-eyebrow {
  font-size: 18px !important;
  letter-spacing: 9px !important;
}
.server-page-heading h1 {
  font-size: 18px;
  letter-spacing: 7px;
}
.page-loader {
  background:
    radial-gradient(ellipse at center, #ffe21c07, transparent 65%), #020405;
}
@media (max-width: 850px) {
  .reference-stats .stat-card .stat-top {
    font-size: 12px;
  }
  .reference-stats .stat-symbol {
    width: 42px;
    height: 42px;
  }
  .reference-stats .stat-symbol svg {
    width: 23px;
    height: 23px;
  }
  .reference-stats .stat-value {
    font-size: 26px;
  }
  .server-info strong {
    font-size: 17px;
  }
  .server-info small {
    font-size: 13px;
  }
  .server-open {
    font-size: 14px;
    padding: 14px;
  }
}
@media (max-width: 600px) {
  .page-heading h1 {
    font-size: 26px;
  }
  .form-panel {
    padding: 20px;
  }
  .panel-head {
    padding: 18px;
  }
  .activity-list {
    padding: 0 18px 16px;
  }
  .reference-stats .stat-card,
  .reference-stats .stat-card:first-child,
  .reference-stats .stat-card:last-child {
    padding: 14px 10px;
  }
  .reference-stats .stat-card .stat-top {
    font-size: 10px;
  }
  .reference-stats .stat-card .stat-caption {
    font-size: 9px;
  }
  .reference-stats .stat-value {
    font-size: 25px;
  }
  .activity-time {
    font-size: 11px;
  }
  .activity-copy p {
    font-size: 12px;
  }
  .config-row {
    font-size: 12px;
  }
  .server-page-heading h1 {
    font-size: 14px;
    letter-spacing: 3px;
  }
  .server-page-search input[type="text"] {
    font-size: 15px;
  }
  .welcome-eyebrow {
    font-size: 14px !important;
    letter-spacing: 6px !important;
  }
}
/* Final reference match: no decorative ribbons or orbital framing. */
:root {
  --sidebar: 300px;
}
.workspace {
  background: linear-gradient(135deg, #05090b, #020405);
}
.sidebar {
  background: linear-gradient(135deg, #080c0e, #020405);
  border-right-color: #1c2831;
  padding: 27px 17px 22px;
}
.brand {
  font-size: 36px;
  margin: 0 22px 28px;
}
.server-picker {
  min-height: 68px;
  margin-bottom: 30px;
  padding: 14px;
  border-radius: 12px;
}
.nav-item {
  margin: 8px 0;
  padding: 16px 22px;
  min-height: 55px;
  font-size: 15px;
  border-radius: 11px;
  gap: 20px;
}
.nav-item.active {
  background: linear-gradient(100deg, #ffdc282d, #ffdc280b);
  border-color: #d9bf19;
  box-shadow:
    inset 3px 0 #ffe21c,
    0 0 24px #ffdc0018;
}
.topbar {
  height: 64px;
  background: #010304;
  border-bottom-color: #1a252c;
}
.header-avatar {
  background: linear-gradient(135deg, #7a89ff, #4a5cf0);
}
main {
  padding: 29px 37px;
}
.page-heading h1 {
  font-size: 34px;
}
.page-heading p {
  font-size: 16px;
  color: #a0b9d2;
}
.panel,
.reference-stats .stat-card,
.reference-stats .stat-card:first-child,
.reference-stats .stat-card:last-child {
  background: linear-gradient(135deg, #0b1216, #070c0f);
  border-color: #23313b;
  border-radius: 15px;
  box-shadow: none;
}
.reference-stats .stat-card,
.reference-stats .stat-card:first-child,
.reference-stats .stat-card:last-child {
  min-height: 100px;
  padding: 17px;
}
.reference-stats .stat-value {
  font-size: 28px;
}
.reference-stats .stat-top {
  font-size: 14px;
}
.reference-stats .stat-caption {
  font-size: 11px;
}
.panel h2 {
  font-size: 20px;
}
.panel p {
  font-size: 15px;
}
.primary-button {
  background: linear-gradient(135deg, #ffeb46, #ffe01c);
  border-color: #ffec68;
  color: #090d05;
  border-radius: 11px;
  box-shadow: 0 0 20px #ffde0017;
}
.ghost-button {
  background: linear-gradient(135deg, #151e26, #0a1117);
  border-color: #2d3d4a;
  border-radius: 9px;
  color: #c8d7e8;
}
.setup-banner,
.banana-extra {
  background: linear-gradient(135deg, #0d1418, #070c10);
  border-color: #29363e;
  border-radius: 15px;
  box-shadow: none;
}
.setup-banner .badge {
  background: #ffdf2712;
  border-color: #c9b63444;
  color: #e9d361;
}
.extra-icon {
  background: #312b0c;
  color: #ffe21c;
}
.welcome-card,
.welcome-logo {
  background: linear-gradient(135deg, #1a2026, #05090c);
  border: 1px solid #52606d;
  border-radius: 26px;
}
.welcome-logo {
  background:
    radial-gradient(ellipse at center, #ffe21c0a, transparent 65%),
    linear-gradient(135deg, #1a2026, #05090c);
}
.welcome-grid {
  gap: 30px;
  max-width: 1290px;
}
.welcome-card .primary-button,
.welcome-card .ghost-button {
  border-radius: 18px;
  font-size: 24px;
  min-height: 84px;
}
.welcome-card .primary-button {
  box-shadow: 0 0 30px #ffdf2729;
}
.welcome-card .ghost-button {
  background: linear-gradient(135deg, #191f25, #070c10);
  border-color: #3b4652;
}
.welcome-card .welcome-eyebrow {
  color: #8794a4;
}
.server-page-panel {
  background: linear-gradient(135deg, #10161b, #05090c);
  border-color: #34414e;
  border-radius: 23px;
  padding: 27px;
}
.server-row {
  background: linear-gradient(135deg, #11181e, #080d11);
  border-color: #293640;
  border-radius: 18px;
}
.server-row.current,
.server-row:hover {
  background: linear-gradient(110deg, #ffe21c23, #ffe21c0b);
  border-color: #ffe21c;
  box-shadow: 0 0 23px #ffe21c16;
}
.server-avatar {
  background: #070a0d;
  border-radius: 18px;
}
.server-open {
  border-radius: 14px;
}
.server-page-search {
  border-radius: 17px;
}
.server-page-heading h1 {
  color: #a0b6cb;
}
.sidebar {
  scrollbar-width: thin;
  scrollbar-color: #28333c transparent;
}
@media (max-width: 1200px) {
  :root {
    --sidebar: 245px;
  }
  main {
    padding: 27px;
  }
  .brand {
    font-size: 31px;
    margin-left: 10px;
  }
  .welcome-card .primary-button,
  .welcome-card .ghost-button {
    font-size: 20px;
  }
}
@media (max-width: 850px) {
  :root {
    --sidebar: 190px;
  }
  .nav-item {
    font-size: 13px;
    padding: 13px 10px;
    gap: 12px;
  }
  .brand {
    font-size: 28px;
    margin: 0 5px 26px;
  }
  .reference-stats .stat-card .stat-top {
    font-size: 11px;
  }
  .reference-stats .stat-value {
    font-size: 26px;
  }
}
@media (max-width: 600px) {
  :root {
    --sidebar: 0px;
  }
  .sidebar {
    padding: 22px 18px;
  }
  .brand {
    font-size: 29px;
    margin: 0 0 24px;
  }
  .nav-item {
    min-height: 42px;
    padding: 10px 13px;
    margin: 0;
  }
  .server-picker {
    margin-bottom: 20px;
  }
  main {
    padding: 24px 18px;
  }
  .page-heading h1 {
    font-size: 26px;
  }
  .page-heading p {
    font-size: 14px;
  }
  .welcome-card .primary-button,
  .welcome-card .ghost-button {
    font-size: 17px;
    min-height: 60px;
    border-radius: 13px;
  }
  .server-page-panel {
    padding: 17px;
  }
  .reference-stats .stat-card,
  .reference-stats .stat-card:first-child,
  .reference-stats .stat-card:last-child {
    padding: 14px 10px;
  }
  .reference-stats .stat-card .stat-top {
    font-size: 10px;
  }
  .reference-stats .stat-caption {
    font-size: 9px;
  }
  .reference-stats .stat-value {
    font-size: 25px;
  }
}
/* Clean containers and themed dropdowns across every page. */
.settings-layout {
  align-items: start;
  gap: 24px;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}
.settings-layout > *,
.statistics-columns > *,
.overview-columns > * {
  min-width: 0;
}
.settings-layout .info-card {
  position: static;
}
.panel {
  overflow-wrap: break-word;
}
.form-panel > h2 {
  line-height: 1.35;
}
.form-panel > .field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
  margin-bottom: 22px;
}
.field small {
  line-height: 1.6;
}
.toggle-row {
  gap: 20px;
  padding: 19px 0;
}
.toggle-row > div {
  min-width: 0;
}
.toggle-row .switch {
  flex-shrink: 0;
}
.settings-export {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.settings-export > div {
  min-width: 0;
}
.settings-export > button {
  flex-shrink: 0;
}
.role-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
}
.role-option {
  margin: 0;
}
.notice-preview {
  overflow-wrap: anywhere;
}
.statistics-columns {
  align-items: stretch;
  gap: 22px;
  margin-bottom: 22px;
}
.statistics-columns > .panel {
  margin-bottom: 0;
}
.wizard-shell {
  max-width: 1000px;
  margin: 0 auto;
}
.wizard-review .config-row {
  gap: 20px;
}
.wizard-progress {
  gap: 12px;
}
.premium-grid {
  gap: 20px;
  margin: 24px 0;
}
.feature-card {
  padding: 25px;
}
.panel-foot {
  padding: 18px 23px;
}
.scenario-steps li {
  margin-bottom: 16px;
}
.server-picker {
  gap: 12px;
}
.server-picker .themed-select {
  flex: 1;
  min-width: 0;
}
.select-source {
  display: none !important;
}
.themed-select {
  display: block;
  position: relative;
  min-width: 0;
  width: 100%;
}
.select-trigger {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 12px 42px 12px 14px;
  border: 1px solid #334556;
  border-radius: 10px;
  background: linear-gradient(135deg, #141e28, #0b141c);
  color: #e4edf8;
  font: inherit;
  font-size: 14px;
  text-align: left;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.select-trigger:after {
  content: "";
  position: absolute;
  right: 16px;
  top: 18px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #a0b6cb;
  border-bottom: 1.5px solid #a0b6cb;
  transform: rotate(45deg);
}
.select-trigger:hover {
  border-color: #798ca2;
}
.select-trigger:focus-visible,
.select-trigger[aria-expanded="true"] {
  outline: 2px solid #ffe21c;
  outline-offset: 2px;
}
.select-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.select-popup {
  position: fixed;
  z-index: 150;
  overflow: auto;
  padding: 7px;
  background: linear-gradient(135deg, #17212a, #0b131b);
  border: 1px solid #596779;
  border-radius: 12px;
  box-shadow: 0 16px 45px #0009;
  scrollbar-width: thin;
  scrollbar-color: #516172 transparent;
}
.select-option {
  display: block;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #cddbeb;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  line-height: 1.4;
}
.select-option[aria-selected="true"] {
  background: #ffe21c18;
  color: #ffe45b;
}
.select-option:hover,
.select-option:focus-visible {
  background: #ffe21c26;
  color: #fff2a6;
  outline: none;
}
.select-option:disabled {
  opacity: 0.45;
}
.server-picker .select-trigger {
  border: 0;
  background: transparent;
  padding-left: 0;
  font-size: 13px;
  color: #f5f6ed;
}
.server-picker .select-trigger:after {
  right: 5px;
}
.panel-head .themed-select {
  width: 155px;
  flex-shrink: 0;
}
.panel-head .select-trigger {
  min-height: 38px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.panel-head .select-trigger:after {
  top: 13px;
}
@media (max-width: 850px) {
  .settings-layout {
    grid-template-columns: 1fr;
  }
  .settings-export {
    flex-wrap: wrap;
  }
  .wizard-progress {
    gap: 8px;
  }
}
@media (max-width: 600px) {
  .panel-head {
    flex-wrap: wrap;
  }
  .panel-head .themed-select {
    width: 145px;
  }
  .settings-export > button {
    width: 100%;
    justify-content: center;
  }
  .toggle-row {
    gap: 14px;
  }
  .wizard-progress {
    flex-wrap: wrap;
  }
  .wizard-progress li {
    flex: 1 1 40%;
  }
  .feature-card {
    padding: 21px;
  }
  .server-picker .select-trigger {
    font-size: 12px;
  }
}