/* Carry the landing page's navigation, type and spacing through the panel. */
:root body:not([data-view="home"]) {
  --bg: #0a0c0b;
  --panel: #151718;
  --panel2: #1b1e1e;
  --surface: #151718;
  --surface-raised: #1b1e1e;
  --border: #343b37;
  --text: #f4f7f4;
  --muted: #b1beb4;
  --accent: #9ddab2;
  --radius: 17px;
  background: radial-gradient(ellipse 900px 410px at 50% 0, #172019 0, #0d100e 64%, #0a0c0b 100%) fixed;
  color: var(--text);
  font: 16px 'Rajdhani', 'Segoe UI', sans-serif;
}
body:not([data-view="home"]) :is(h1,h2,h3,h4,button,input,select,textarea) { font-family: inherit; }
body:not([data-view="home"]) h1 { font-size: clamp(36px, 4vw, 52px); line-height: 1.08; letter-spacing: -.035em; }
body:not([data-view="home"]) h2 { letter-spacing: -.025em; }
body:not([data-view="home"]) p { line-height: 1.65; }

/* The header is the same component and the same visual treatment on every route. */
:root body:not([data-view="home"]) .site-header { padding: 18px 24px 0; background: transparent; border: 0; font-size: 16px; }
:root body:not([data-view="home"]) .site-header .header-inner {
  max-width: 1220px; min-height: 68px; padding: 8px 16px 8px 24px;
  background: #0c0d10f5; border: 1px solid #ffffff26; border-radius: 50px;
  box-shadow: 0 10px 30px #0006; gap: 20px;
}
:root body:not([data-view="home"]) .primary-nav { gap: 2px; }
:root body:not([data-view="home"]) .primary-nav a { font: 600 15px 'Rajdhani','Segoe UI',sans-serif; padding: 9px 12px; border-radius: 30px; }
:root body:not([data-view="home"]) .primary-nav a.active,
:root body:not([data-view="home"]) .primary-nav a:hover { color: #a7e5bd; background: #84d0a90c; border-color: transparent; }
:root body:not([data-view="home"]) .site-header .button.small { border-radius: 24px !important; font: 700 14px 'Rajdhani','Segoe UI',sans-serif; }
:root body:not([data-view="home"]) .site-header .button.ghost { background: transparent !important; border-color: transparent !important; border-radius: 24px !important; font: 700 14px 'Rajdhani','Segoe UI',sans-serif; }

/* Inner pages use the landing page's quiet green light and roomy cards. */
:root body:not([data-view="home"]) .page-context,
:root body:not([data-view="home"]) .shell>main { max-width: 1220px; }
:root body:not([data-view="home"]) .page-context { padding: 28px 24px 0; }
:root body:not([data-view="home"]) .shell>main { padding: 34px 24px 82px; }
:root body:not([data-view="home"]) :is(.server-status-card,.network-summary,.metric,.mc-panel,.workspace-card,.workspace-hero,.admin-panel,.admin-summary-grid article,.admin-server,.admin-user-card,.form-panel,.store-plan,.ledger-list,.plugin-card,.file-list,.choice,.empty,.diagnostic-hero,.diagnostic-card,.diagnostic-output,.support-card,.node-card,.support-status,.wallet-total,.balance-card,.sleep-guide,.current-software,.player-lists section,.error-panel) {
  background: #151819 !important;
  border: 1px solid #343b37 !important; border-radius: 17px !important;
  box-shadow: 0 14px 34px #00000026 !important;
}
:root body:not([data-view="home"]) :is(.server-status-card.online,.admin-finder) {
  background: linear-gradient(125deg,#1a3021,#131d16) !important;
  border-color: #52765b !important;
}
:root body:not([data-view="home"]) :is(.server-rail,.admin-tabs) { background: #151819; border-color: #343b37; border-radius: 17px; }
:root body:not([data-view="home"]) :is(.server-rail .tabs button.active,.admin-tabs button.active,.management-nav button.active) {
  background: #203b2a !important; border-color: #52765b !important; color: #c1f0cf !important; box-shadow: inset 3px 0 #9ddab2 !important;
}
:root body:not([data-view="home"]) :is(.button,.text-link) { font-size: 15px; }
:root body:not([data-view="home"]) .button { min-height: 42px; border-radius: 11px; padding: 10px 16px; }
:root body:not([data-view="home"]) .button:not(.danger):not(.server-stop):not(.secondary):not(.ghost) {
  background: #9ddab2 !important; border-color: #9ddab2 !important; color: #102017 !important; border-radius: 11px; font-weight: 700;
}
:root body:not([data-view="home"]) :is(.button.secondary,.button.ghost) { background: #202424 !important; border-color: #434a45 !important; border-radius: 11px; }
:root body:not([data-view="home"]) :is(input,select,textarea) { background: #101413 !important; border-color: #414a43 !important; border-radius: 10px; color: #f4f7f4; font-size: 16px; }
:root body:not([data-view="home"]) :is(input,select,textarea):focus-visible { border-color: #9ddab2 !important; box-shadow: 0 0 0 3px #9ddab226; }
body:not([data-view="home"]) :is(.button,button,a,summary):focus-visible { outline: 2px solid #a9ebbd; outline-offset: 3px; }

/* Give board controls, forms and plan cards a consistent breathing rhythm. */
body:not([data-view="home"]) :is(.management-nav,.server-rail .tabs,.admin-tabs,.support-heading-actions,.server-shortcuts,.admin-quick-links,.workspace-links) { gap: 10px; }
body:not([data-view="home"]) :is(.management-nav,.admin-tabs) { margin-bottom: 24px; }
body:not([data-view="home"]) :is(.actions,.form-actions,.hero-actions,.server-actions,.section-actions,.admin-actions) { gap: 12px; flex-wrap: wrap; }
body:not([data-view="home"]) :is(.server-status-card,.network-summary,.mc-panel,.workspace-card,.workspace-hero,.admin-panel,.admin-server,.admin-user-card,.form-panel,.store-plan,.support-card,.node-card,.wallet-total,.balance-card) { padding: clamp(20px, 2.5vw, 30px); }
body:not([data-view="home"]) :is(.server-status-card,.workspace-hero,.form-panel,.support-card,.store-plan) > :is(h2,h3,p) { margin-bottom: 14px; }
body:not([data-view="home"]) :is(.catalog,.store-grid,.plan-grid,.server-grid,.dashboard-grid,.support-layout,.admin-summary-grid) { gap: 20px; }
body:not([data-view="home"]) :is(.server-row,.file-row) { padding: 18px 20px; }
body:not([data-view="home"]) .management-nav button { min-height: 44px; padding: 11px 16px; }
body:not([data-view="home"]) .vps-panel .cards { gap: 20px; }
body:not([data-view="home"]) .vps-panel .card { padding: 26px; background: #191c1b; border-color: #3b443d; border-radius: 17px; }
body:not([data-view="home"]) .vps-panel .card-featured { background: linear-gradient(145deg,#24382a,#171e19); border-color: #71947b; }
body:not([data-view="home"]) .vps-panel .card p { margin: 16px 0; }
body:not([data-view="home"]) .vps-panel .meta { gap: 9px; margin: 20px 0; }
body:not([data-view="home"]) .vps-panel .meta span { padding: 8px 11px; background: #272d29; }
body:not([data-view="home"]) .vps-panel .price { margin: 20px 0 10px; }
body:not([data-view="home"]) .vps-panel .actions button { min-height: 42px; padding: 10px 16px; font-size: 15px; }
body:not([data-view="home"]) .vps-panel .vps-store-intro { padding: clamp(25px,4vw,42px); }
body:not([data-view="home"]) .vps-detail-grid { gap: 20px; margin: 22px 0 30px; }
body:not([data-view="home"]) .vps-access-card { padding: 28px; background: #191c1b; border-color: #3a423c; }
body:not([data-view="home"]) .vps-access-card label { margin: 16px 0; }
body:not([data-view="home"]) .vps-danger-zone { padding: 25px 28px; }

/* Port management keeps the list dark and uses green only for the main action. */
.vps-port-board { margin: 22px 0 30px; padding: 28px; border: 1px solid #3c4840; border-radius: 17px; background: #171b19; }
.vps-port-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.vps-port-heading h3 { margin: 9px 0; font-size: 23px; }
.vps-port-heading p { margin: 0; color: #b7c0b9; font-size: 15px; }
.vps-port-count { flex: none; padding: 7px 11px; border: 1px solid #4c6b54; border-radius: 99px; color: #b8e9c5; font-size: 13px; }
.vps-port-list { display: grid; gap: 10px; margin: 22px 0; }
.vps-port-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 17px; border: 1px solid #333d36; border-radius: 12px; background: #101513; }
.vps-port-row strong { display: block; color: #c1e9ca; font: 700 16px ui-monospace,SFMono-Regular,monospace; overflow-wrap: anywhere; }
.vps-port-row small { display: block; margin-top: 6px; color: #aab5ad; font-size: 13px; }
.vps-port-empty { margin: 0; padding: 20px; border: 1px dashed #39433b; border-radius: 12px; color: #aab5ad; }
.vps-port-board form { display: flex; align-items: end; gap: 12px; }
.vps-port-board form label { flex: 1; margin: 0; color: #d6dfd7; font-size: 14px; }
.vps-port-board form input { display: block; width: 100%; min-height: 43px; margin-top: 8px; }
.vps-port-board form button { flex: none; }
.vps-port-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 17px 0 10px; }
.vps-port-presets span { margin-right: 4px; color: #9eaaa1; font-size: 13px; }
.vps-port-presets button { padding: 7px 11px; border: 1px solid #414a43; border-radius: 99px; background: #222825; color: #d8e1da; font: inherit; font-size: 13px; cursor: pointer; }
.vps-port-presets button:hover { border-color: #83ba91; color: #b9ecc6; }
.vps-port-board>small { color: #9eaaa1; font-size: 13px; }
.vps-format-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 28px 0 16px; padding: 25px 28px; border: 1px solid #434a43; border-radius: 15px; background: #191c1b; }
.vps-format-card h3 { margin: 7px 0; font-size: 22px; }
.vps-format-card p { max-width: 650px; margin: 0; color: #b6beb8; font-size: 14px; }
.vps-format-card button { flex: none; }

/* Admin boards and secondary controls retain the charcoal layers of the home page. */
:root body:not([data-view="home"]) :is(.admin-hero,.admin-finder,.admin-action-panel,.admin-attention,.admin-recent,.admin-table-wrap,.admin-password,.admin-protected,.admin-vps-section,.node-placement-panel) {
  background: #151819 !important; border-color: #343b37 !important;
}
:root body:not([data-view="home"]) :is(.admin-quick-links button,.admin-action-panel>button,.workspace-links button,.server-shortcuts button) {
  background: #202424 !important; border-color: #414943 !important;
}
:root body:not([data-view="home"]) :is(.admin-quick-links button,.admin-action-panel>button,.workspace-links button,.server-shortcuts button):hover {
  background: #263229 !important; border-color: #729d7a !important;
}

@media (max-width: 1100px) {
  :root body:not([data-view="home"]) .site-header .header-inner { border-radius: 24px; padding: 12px 20px; }
}
@media (max-width: 800px) {
  :root body:not([data-view="home"]) .site-header { padding: 12px 14px 0; }
  :root body:not([data-view="home"]) .site-header .header-inner { min-height: 0; padding: 12px 14px; }
  :root body:not([data-view="home"]) .primary-nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  :root body:not([data-view="home"]) .page-context { padding: 24px 18px 0; }
  :root body:not([data-view="home"]) .shell>main { padding: 26px 18px 65px; }
}
@media (max-width: 540px) {
  :root body:not([data-view="home"]) .site-header .header-inner { padding: 10px; gap: 10px 4px; }
  :root body:not([data-view="home"]) .primary-nav { gap: 0; }
  :root body:not([data-view="home"]) .primary-nav a { font-size: 13px; padding: 8px 10px; }
  :root body:not([data-view="home"]) .site-header .button.small,
  :root body:not([data-view="home"]) .site-header .button.ghost { font-size: 11px; padding: 8px 10px; }
  :root body:not([data-view="home"]) :is(.server-status-card,.network-summary,.mc-panel,.workspace-card,.workspace-hero,.admin-panel,.admin-server,.admin-user-card,.form-panel,.store-plan,.support-card,.node-card,.wallet-total,.balance-card) { padding: 20px; }
  body:not([data-view="home"]) .vps-panel .card { padding: 22px; }
  body:not([data-view="home"]) .vps-port-card { padding: 20px; }
  .vps-port-board { padding: 20px; }
  .vps-port-heading { flex-direction: column; gap: 10px; }
  .vps-port-board form { flex-direction: column; align-items: stretch; }
  .vps-port-board form button { width: 100%; }
  .vps-format-card { flex-direction: column; align-items: flex-start; padding: 20px; }
}