/* CSNexxus shared visual language. Page styles own layout and responsive sizing. */
:root {
  --nexus-bg: #0d1015;
  --nexus-surface: #141820;
  --nexus-raised: #1d232d;
  --nexus-input: #10141b;
  --nexus-border: #303744;
  --nexus-text: #f4f0e8;
  --nexus-muted: #a6adb9;
  --nexus-subtle: #8892a2;
  --nexus-accent: #03dd98;
  --nexus-hover: #5ff0c0;
  --nexus-ink: #052e22;
  --nexus-tint: #10392d;
  --nexus-tint-border: #1d7054;
  --nexus-tint-text: #c5f7e7;
  --nexus-selected: #0b4735;
  --nexus-selected-border: #03dd98;
  --nexus-highlight: linear-gradient(110deg, #0b4735, #122d25);
  --nexus-ring: 0 0 0 3px #03dd9824;
  --nexus-radius: 8px;
  --nexus-control-radius: 6px;
  --bg: var(--nexus-bg);
  --surface: var(--nexus-surface);
  --line: var(--nexus-border);
  --muted: var(--nexus-muted);
  --white: var(--nexus-text);
  --accent: var(--nexus-accent);
  --admin-bg: var(--nexus-bg);
  --admin-surface: var(--nexus-surface);
  --admin-raised: var(--nexus-raised);
  --admin-line: var(--nexus-border);
  --admin-text: var(--nexus-text);
  --admin-muted: var(--nexus-muted);
  --admin-accent: var(--nexus-accent);
}
body.nexuscs {
  --theme-bg: var(--nexus-bg);
  --theme-bg-2: var(--nexus-input);
  --theme-surface: var(--nexus-surface);
  --theme-surface-2: var(--nexus-raised);
  --theme-border: var(--nexus-border);
  --theme-text: var(--nexus-text);
  --theme-text-muted: var(--nexus-muted);
  --theme-primary: var(--nexus-accent);
  --theme-radius: var(--nexus-radius);
  --theme-gradient: var(--nexus-highlight);
  background-image: none;
}
body, .installation, .nexuscs { -webkit-font-smoothing: antialiased; }
.nexus-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  color: var(--nexus-text) !important;
  font-family: Inter, Arial, sans-serif;
  text-decoration: none;
}
.nexus-brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--nexus-hover);
}
.nexus-brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.nexus-brand-name { font-size: 25px; font-weight: 800; line-height: 1.2; letter-spacing: -1.1px; }
.nexus-brand-name > span { color: var(--nexus-accent); }
.nexus-brand-name small { display: block; margin-top: 5px; font-size: 7px; font-weight: 600; letter-spacing: 1.35px; color: var(--nexus-muted); }
.admin-sidebar > .nexus-brand { margin-inline: 10px; }
.site-footer .nexus-brand-mark { width: 36px; height: 36px; }
.site-footer .nexus-brand-name { font-size: 20px; }
.site-footer .nexus-brand-name small { display: none; }

/* Neutral surfaces share borders and curvature; mint signals action and progress. */
.install-card, .loadout-card, .rank-card, .server-card, .server-empty {
  background: var(--nexus-surface);
  border: 1px solid var(--nexus-border);
  border-radius: var(--nexus-radius);
}
.nexuscs .card, .nexuscs .widget, .nexuscs .widget-content, .nexuscs .chart-section {
  background: var(--nexus-surface) !important;
  border-color: var(--nexus-border) !important;
  border-radius: var(--nexus-radius) !important;
}
.site-header, .admin-topbar, .install-topbar { background: var(--nexus-bg); border-color: var(--nexus-border); }
.admin-sidebar, .feature-strip { background: var(--nexus-surface); border-color: var(--nexus-border); }
.eyebrow, .overline { color: var(--nexus-muted); }
.hero-copy > p, .section-heading > p, .feature-copy p, .getting-started p,
.install-heading p, .card-heading p, .prep-list p, .help-card p { color: var(--nexus-muted); }
.hero-note, .section-foot, .feature-copy small, .form-fields small,
.check-item small, .install-steps small { color: var(--nexus-subtle); }
.admin-nav-label, .admin-page-heading .overline { color: var(--nexus-subtle); }

/* A single primary action style, with the larger desktop sizes supplied by each page. */
.button, .primary-button, .secondary-button, .filter-tabs button, .copy-address,
.search-box, .form-fields input, .pill, .status-badge { border-radius: var(--nexus-control-radius); }
.button-primary, .primary-button {
  background: var(--nexus-accent);
  border-color: var(--nexus-accent);
  color: var(--nexus-ink) !important;
  box-shadow: none;
}
.button-primary:hover, .primary-button:hover { background: var(--nexus-hover); border-color: var(--nexus-hover); }
.button:not(.button-primary), .secondary-button, .copy-address {
  background: var(--nexus-raised);
  border-color: var(--nexus-border);
  color: var(--nexus-text) !important;
}
.button:not(.button-primary):hover, .secondary-button:hover, .copy-address:hover { background: #30271f; border-color: var(--nexus-tint-border); }
.nexuscs .btn-primary, .nexuscs .btn-success {
  background: var(--nexus-accent) !important;
  border-color: var(--nexus-accent) !important;
  color: var(--nexus-ink) !important;
  border-radius: var(--nexus-control-radius) !important;
}
.nexuscs .btn-primary:hover, .nexuscs .btn-success:hover { background: var(--nexus-hover) !important; border-color: var(--nexus-hover) !important; }
.nexuscs .btn-outline-primary { background: var(--nexus-tint) !important; color: var(--nexus-tint-text) !important; border-color: var(--nexus-tint-border) !important; }
.nexuscs .btn-outline-primary:hover { background: var(--nexus-selected) !important; border-color: var(--nexus-selected-border) !important; }
.text-link, .help-card .inline-link { color: var(--nexus-accent); }
.text-link:hover, .help-card .inline-link:hover { color: var(--nexus-hover); }
.search-box, .form-fields input { background: var(--nexus-input); border-color: var(--nexus-border); }
.search-box:focus-within, .form-fields input:focus { border-color: var(--nexus-accent); box-shadow: var(--nexus-ring); }
.search-box input:focus-visible { outline: none; }
.nexuscs .form-control, .nexuscs .form-select { background: var(--nexus-input) !important; border-color: var(--nexus-border) !important; border-radius: var(--nexus-control-radius) !important; }
.nexuscs .form-control:focus, .nexuscs .form-select:focus { border-color: var(--nexus-accent) !important; box-shadow: var(--nexus-ring) !important; }

/* Selected states and successful checks use the same bright mint family. */
.filter-tabs button.active, .nexuscs .admin-nav-link.active,
.installation .install-steps .current > span, .installation .install-steps .complete > span,
.installation .check-icon, .nexuscs .admin-user > span:first-child {
  background: var(--nexus-selected);
  border-color: var(--nexus-selected-border);
  color: var(--nexus-tint-text);
}
.nexuscs .admin-nav-link.active > i { color: var(--nexus-hover); }
.installation .check-summary.is-ready, .community-banner, .toast {
  background: var(--nexus-highlight);
  border-color: var(--nexus-selected-border);
  box-shadow: none;
  border-radius: var(--nexus-radius);
}
.installation .check-summary.is-ready h2 { color: var(--nexus-text); }
.installation .check-summary.is-ready p, .community-banner p, .toast { color: var(--nexus-tint-text); }
.installation .check-summary.is-ready .summary-icon { background: var(--nexus-accent); color: var(--nexus-ink); border-color: var(--nexus-hover); }
.installation .check-summary.is-ready .status-badge { background: var(--nexus-selected); border-color: var(--nexus-selected-border); color: var(--nexus-tint-text); }
.installation .check-value { color: #c5f7e7; }
.installation .guide-card, .nexuscs .sidebar-tip, .installation .inline-note {
  background: var(--nexus-tint);
  border-color: var(--nexus-tint-border);
  border-radius: var(--nexus-radius);
}
.installation .guide-card > p, .installation .guide-card .prep-list p,
.nexuscs .sidebar-tip p, .installation .inline-note { color: var(--nexus-tint-text); }
.nexuscs .sidebar-tip > span, .nexuscs .sidebar-tip a, .installation .prep-list li > span { color: var(--nexus-hover); }
.nexuscs .badge-primary, .nexuscs .badge-light-primary, .nexuscs .note-primary,
.nexuscs .nav-tabs .nav-link.active { background: var(--nexus-selected) !important; border-color: var(--nexus-selected-border) !important; color: var(--nexus-tint-text) !important; }
.installation .check-failed .check-icon { background: #ff927524; color: var(--admin-danger); }
.installation .check-failed .check-value { color: var(--admin-danger); }

/* The loadout illustration belongs to the same palette as the interface. */
.hero-art { border-color: var(--nexus-tint-border); background: radial-gradient(ellipse at 55% 40%, #03dd9818, transparent 70%), #191a20; }
.art-grid { opacity: .65; }
.art-word { color: #41eab020; }
.orbit { border-color: #5ff0c040; }
.art-coordinate, .art-caption, .weapon-label small, .weapon-label strong span, .rank-art-label { color: var(--nexus-tint-text); }
.art-caption { border-top-color: var(--nexus-tint-border); }
.server-cover { background: radial-gradient(at 80% 80%, #23846466, transparent), var(--nexus-tint); }
.rank-art { background: radial-gradient(ellipse, #03dd9830, transparent 70%); }
.rank-emblem { background: linear-gradient(120deg, #19c591, #17684e 50%, #5ff0c0); color: var(--nexus-text); }
.rank-wing { color: var(--nexus-hover); }
.banner-symbol { color: #03dd9838; }

@media (min-width: 1024px) {
  .button, .primary-button, .secondary-button, .nexuscs .btn { transition: background-color .15s, border-color .15s; }
  .nexuscs .admin-breadcrumb, .nexuscs .admin-community-link, .site-footer p, .site-footer nav, .install-footer { font-size: 13px; }
}
@media (max-width: 720px) {
  .nexus-brand { gap: 8px; }
  .nexus-brand-mark { width: 34px; height: 34px; }
  .nexus-brand-mark svg { width: 23px; height: 23px; }
  .nexus-brand-name { font-size: 18px; }
  .nexus-brand-name small { font-size: 6px; letter-spacing: .5px; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .primary-button, .secondary-button, .nexuscs .btn { transition: none; }
}

/* Shared geometry: equal tracks, identical card anatomy, and one spacing scale. */
:root {
  --nexus-content-width: 1440px;
  --nexus-gap: 24px;
  --nexus-card-padding: 32px;
  --nexus-card-header-height: 112px;
  --nexus-card-title: 20px;
}
.shell, .install-shell { width: min(var(--nexus-content-width), calc(100% - 80px)); }
.nexus-grid, .experience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--nexus-gap);
  align-items: stretch;
}
.nexus-card, .experience-grid > article, .server-card {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  background: var(--nexus-surface);
  border: 1px solid var(--nexus-border);
  border-radius: var(--nexus-radius);
  box-shadow: none;
}
.nexus-card-header, .experience-grid .card-topline {
  min-height: var(--nexus-card-header-height);
  padding: 24px var(--nexus-card-padding);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--nexus-border);
  background: transparent;
}
.nexus-card-header h2 {
  margin: 0;
  font: 650 var(--nexus-card-title)/1.35 Inter, Arial, sans-serif;
  letter-spacing: -.35px;
  color: var(--nexus-text);
}
.nexus-card-header p { margin: 7px 0 0; color: var(--nexus-muted); font-size: 13px; line-height: 1.7; }
.nexus-card-badge { flex-shrink: 0; color: var(--nexus-subtle); text-transform: uppercase; font-size: 10px; letter-spacing: .6px; }
.nexus-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: var(--nexus-gap);
  padding: var(--nexus-card-padding);
}
.nexus-card-body > .check-list, .nexus-card-body > .form-fields { padding: 0; }
.nexus-card-body > .prep-list { margin: 0; }
.nexus-card-body .prep-list li { margin: 0 0 24px; }
.nexus-card-body .prep-list li:last-child { margin-bottom: 0; }
.nexus-card-bottom { margin-top: auto; }
.nexus-card-body .inline-note {
  padding: 16px;
  border-radius: var(--nexus-control-radius);
  background: var(--nexus-input);
  border-color: var(--nexus-border);
  color: var(--nexus-muted);
}
.extension-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.extension-checks .check-item { min-width: 0; padding-block: 14px; gap: 8px; border-bottom: 1px solid var(--nexus-border); }
.extension-checks .check-icon { width: 22px; height: 22px; font-size: 12px; }
.extension-checks .check-item strong { font-size: 13px; }
.extension-checks .check-item small { display: none; }
.extension-checks .check-value { font-size: 12px; }
.extension-checks .check-help { font-size: 11px; }
.nexus-card-body .check-item:last-child { border-bottom: 1px solid var(--nexus-border); }
.install-heading { max-width: none; margin-bottom: 32px; }
.install-heading h1 { font-size: 40px; line-height: 1.2; margin: 12px 0 16px; }
.install-heading p { max-width: none; }
.check-summary { padding: 24px var(--nexus-card-padding); margin-bottom: var(--nexus-gap); }
.install-actions { margin-top: var(--nexus-gap); padding-top: var(--nexus-gap); }
.field-pair { gap: var(--nexus-gap); }
.server-grid { gap: var(--nexus-gap); grid-auto-rows: 1fr; align-items: stretch; }
.server-body, .feature-copy { padding: var(--nexus-card-padding); display: flex; flex-direction: column; flex: 1; }
.server-actions { margin-top: auto; }
.feature-copy h3 { font-family: Inter, Arial, sans-serif; font-size: 28px; font-weight: 650; line-height: 1.3; letter-spacing: -.6px; }
.feature-copy p { max-width: none; margin: 16px 0 24px; }
.feature-copy .text-link { margin-top: auto; }
.feature-copy small { margin-top: 24px; }
.loadout-image, .rank-art { height: 280px; flex: 0 0 280px; }
.community-banner { padding: var(--nexus-card-padding); }
.section { padding-top: 80px; }
.section-heading { margin-bottom: var(--nexus-gap); }
.getting-started { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nexus-gap); }
.nexuscs .admin-page-body .row { --bs-gutter-x: var(--nexus-gap); --bs-gutter-y: var(--nexus-gap); }
.nexuscs .admin-page-body .row > [class*="col-"] { display: flex; flex-direction: column; min-width: 0; }
.nexuscs .admin-page-body .row > [class*="col-"] > .card { flex: 1; height: 100%; }
.nexuscs .card { padding: 0 !important; }
.nexuscs .card-header {
  min-height: var(--nexus-card-header-height);
  padding: 24px var(--nexus-card-padding) !important;
  display: flex;
  align-items: center;
  text-align: left !important;
  border-bottom: 1px solid var(--nexus-border) !important;
}
.nexuscs .card-header h2, .nexuscs .card-header h3, .nexuscs .card-header h4,
.nexuscs .card-header h5, .nexuscs .card-header strong, .nexuscs h2.card-header {
  font-size: var(--nexus-card-title) !important;
  font-weight: 650;
  line-height: 1.35;
  text-align: left !important;
  margin: 0;
}
.nexuscs .card-body { padding: var(--nexus-card-padding) !important; }
.nexuscs .chart-section { background: transparent !important; border: 0 !important; }
.nexuscs .chart-section .interval-container { padding: 0 0 var(--nexus-gap) !important; }
.nexus-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nexus-gap); margin: 0 0 var(--nexus-gap); }
.nexus-stat-grid > div { width: auto; padding: 0; margin: 0 !important; display: flex; }
.nexuscs .nexus-stat-grid .card { flex: 1; min-height: 180px; }
.nexuscs .nexus-stat-grid .card-body { display: flex; flex-direction: column; justify-content: center; }
.nexuscs .nexus-stat-grid .card-body > .d-flex { width: 100%; flex: 1; align-items: center; }
.nexuscs .nexus-stat-grid .dash-active-stat { position: static !important; align-self: flex-end; margin: 0 !important; }
@media (min-width: 1024px) and (max-width: 1399px) {
  .nexus-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  :root { --nexus-card-padding: 24px; --nexus-card-header-height: 96px; --nexus-card-title: 18px; }
  .nexus-grid, .experience-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .nexus-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shell, .install-shell { width: calc(100% - 48px); }
  .nexus-card-header p { font-size: 12px; }
  .section { padding-top: 56px; }
  .install-heading h1 { font-size: 34px; }
}
@media (max-width: 600px) {
  :root { --nexus-gap: 16px; --nexus-card-padding: 20px; --nexus-card-header-height: 88px; }
  .shell, .install-shell { width: calc(100% - 32px); }
  .nexus-card-header, .experience-grid .card-topline { padding-block: 20px; }
  .nexus-card-badge { font-size: 8px; }
  .nexus-card-header p { font-size: 11px; }
  .extension-checks { grid-template-columns: minmax(0, 1fr); }
  .field-pair, .getting-started { grid-template-columns: minmax(0, 1fr); }
  .install-heading h1 { font-size: 30px; }
  .feature-copy h3 { font-size: 25px; }
  .nexus-stat-grid { grid-template-columns: minmax(0, 1fr); }
  .loadout-image, .rank-art { height: 230px; flex-basis: 230px; }
}
/* Server cards use the same header dimensions as the other cards. */
.server-cover {
  height: var(--nexus-card-header-height);
  flex: 0 0 var(--nexus-card-header-height);
  padding: 24px var(--nexus-card-padding);
  border-bottom: 1px solid var(--nexus-border);
  align-items: center;
}
.server-cover > strong { font-family: Inter, Arial, sans-serif; font-size: var(--nexus-card-title); font-weight: 650; }
.auth-feedback { padding-top: 24px; }
.nexus-notice { padding: 20px 24px; background: var(--nexus-tint); border: 1px solid var(--nexus-tint-border); border-radius: var(--nexus-radius); color: var(--nexus-tint-text); font-size: 14px; }
.nexus-notice p { color: inherit; margin: 6px 0 0; }
.nexus-notice-error { background: #321d1b; border-color: #aa5f50; color: #ffd3c8; }