@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root,
html.dark {
  color-scheme: dark;
  --theme-color: #e87536;
  --brand-logo: url('/flamehosting-logo.svg');
  --background: #0d1117;
  --foreground: #e9edf2;
  --card: #131922;
  --card-foreground: #e9edf2;
  --popover: #171e28;
  --popover-foreground: #e9edf2;
  --primary: #e87536;
  --primary-foreground: #17120f;
  --secondary: #f08b4b;
  --secondary-foreground: #17120f;
  --muted: #1a222d;
  --muted-foreground: #a0aab7;
  --accent: #293340;
  --accent-foreground: #edf1f5;
  --destructive: #dc5d5d;
  --destructive-foreground: #fff7f5;
  --border: #28313d;
  --input: #111720;
  --input-border: #36414e;
  --ring: #f08b4b;
  --chart-1: #e87536;
  --chart-2: #f3ad72;
  --chart-3: #c96035;
  --chart-4: #43b887;
  --chart-5: #dc5d5d;
  --state-foreground: #17120f;
  --success: #43b887;
  --success-foreground: #07150f;
  --warning: #e5a34b;
  --warning-foreground: #17120f;
  --caution: #e87536;
  --caution-foreground: #17120f;
  --sidebar: #10151c;
  --sidebar-foreground: #dce2e9;
  --sidebar-primary: #e87536;
  --sidebar-primary-foreground: #17120f;
  --sidebar-accent: #1b232e;
  --sidebar-accent-foreground: #f0f3f6;
  --sidebar-border: #252e39;
  --sidebar-ring: #f08b4b;
  --terminal-background: #090d12;
  --terminal-foreground: #fff;
  --terminal-selection: #ffb36b;
  --terminal-selection-foreground: #1b120b;
  --terminal-ansi-black: #090d12;
  --terminal-ansi-red: #e46b63;
  --terminal-ansi-green: #61bb86;
  --terminal-ansi-yellow: #e5a34b;
  --terminal-ansi-blue: #76a8d8;
  --terminal-ansi-magenta: #c18ac1;
  --terminal-ansi-cyan: #69b9c5;
  --terminal-ansi-white: #e8edf2;
  --terminal-ansi-bright-black: #75808e;
  --terminal-ansi-bright-red: #ef827a;
  --terminal-ansi-bright-green: #83cfa1;
  --terminal-ansi-bright-yellow: #f0bd6c;
  --terminal-ansi-bright-blue: #91bee6;
  --terminal-ansi-bright-magenta: #d4a1d2;
  --terminal-ansi-bright-cyan: #86d0d8;
  --terminal-ansi-bright-white: #fff;
  --editor-selection: rgb(244 151 78 / 52%);
  --editor-selected-foreground: #1b120b;
  --panel-accent-orange: #e87536;
  --panel-accent-red: #c9604a;
  --fh-line: #28313d;
  --fh-muted: #9ba6b3;
  --radius: 0.7rem;
}

html, body, button, input, select, textarea {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-feature-settings: "kern" 1, "liga" 1;
}
body {
  min-width: 320px;
  color: var(--foreground);
  background: #0d1117;
}
h1, h2, h3, h4, h5, h6,
[data-slot="card-title"], [data-slot="dialog-title"] {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  letter-spacing: -0.025em;
}
::selection { color: #1b120b; background: #ffb36b; }
.cm-editor .cm-selectionBackground,
.cm-editor.cm-focused .cm-selectionBackground { background: rgb(244 151 78 / 52%) !important; }
.cm-editor .cm-content ::selection { color: #1b120b !important; background: #ffb36b !important; }
a { transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease; }
button, [role="button"] {
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
button.bg-primary, a.bg-primary, [data-slot="button"].bg-primary {
  color: #17120f !important;
  border-color: transparent !important;
  background: #e87536 !important;
  box-shadow: none !important;
  font-weight: 650;
}
button.bg-primary:hover, a.bg-primary:hover, [data-slot="button"].bg-primary:hover { background: #f08b4b !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #f08b4b !important;
  outline-offset: 2px;
}
input, select, textarea, [data-ui="input"], [data-ui="select-trigger"] {
  border-radius: 0.55rem !important;
  background-color: #10161e !important;
}
input:hover, select:hover, textarea:hover, [data-ui="input"]:hover { border-color: #485463 !important; }
input:focus, select:focus, textarea:focus, [data-ui="input"]:focus {
  border-color: #e87536 !important;
  box-shadow: 0 0 0 3px rgb(232 117 54 / 16%) !important;
}
.bg-card, [data-slot="card"] {
  border: 1px solid #28313d;
  background-color: #131922;
  box-shadow: none;
}
.bg-popover, [data-slot="popover-content"], [data-slot="dropdown-menu-content"],
[data-slot="select-content"], [data-slot="dialog-content"] {
  border-color: #303b48 !important;
  background-color: #171e28;
  box-shadow: 0 18px 44px rgb(0 0 0 / 35%);
}
[aria-current="page"], [data-active="true"] { color: #f08b4b; }
hr, [data-slot="separator"] { border-color: #28313d; }
table thead, [data-slot="table-header"] { color: #aeb8c4; }
tr:hover td { background-color: rgb(232 117 54 / 4%); }
progress, [role="progressbar"] { accent-color: #e87536; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #10151c; }
::-webkit-scrollbar-thumb { border: 2px solid #10151c; border-radius: 10px; background: #3a4654; }
::-webkit-scrollbar-thumb:hover { background: #e87536; }

/* Login and recovery */
main form > div.bg-card {
  overflow: hidden;
  border: 1px solid #2d3743;
  border-radius: 1rem !important;
  background: #131922 !important;
  box-shadow: 0 24px 70px rgb(0 0 0 / 32%);
}
main form > div.bg-card::before { display: none; }
svg[aria-label="Pterodactyl"] {
  width: 210px !important;
  height: 64px !important;
  padding: 0 !important;
  background: url('/flamehosting-logo.svg') center / contain no-repeat;
}
svg[aria-label="Pterodactyl"] path { display: none; }
main h2 { color: #f1f4f7; font-size: clamp(1.7rem, 3vw, 2.1rem) !important; }
main form button.bg-primary { min-height: 48px; border-radius: 0.6rem !important; text-transform: none; }
main > div > p a[href*="pterodactyl.io"] { display: none; }
main > div > p::after { color: #8f9aa7; content: "FlameHosting · Panel de control"; }

/* App shell, compact top bar and quiet navigation */
body > div:has(#logo) .max-w-panel,
body > div:has(#logo) [class~="side-navigation:max-w-panel"],
main#main .max-w-panel,
main#main [class~="side-navigation:max-w-panel"] {
  width: 100% !important;
  max-width: none !important;
}
body > div:has(#logo) .bg-background.shadow-md {
  min-height: 4.25rem;
  border-bottom: 1px solid #252e39;
  background: #10151c !important;
  box-shadow: none !important;
}
body > div:has(#logo) #logo + div,
body > div:has(#logo) #logo + div > * { min-height: 4.25rem; }
body > div:has(#logo) #logo { padding-left: clamp(0.75rem, 2vw, 1.75rem); }
body > div:has(#logo) #logo img { max-height: 2rem; }
body > div:has(#logo) #logo a { color: #edf1f5; }
body > div:has(#logo) #logo + div a,
body > div:has(#logo) #logo + div button { color: #b7c0ca; }
body > div:has(#logo) #logo + div a:hover,
body > div:has(#logo) #logo + div button:hover { color: #f08b4b; }
body > div:has(#logo) #logo + div [data-status="active"],
body > div:has(#logo) #logo + div [aria-current="page"] { color: #f08b4b; }
body > div:has(#logo) #logo + div [data-status="active"]::after,
body > div:has(#logo) #logo + div [aria-current="page"]::after {
  background: #e87536;
  box-shadow: none;
}
main#main { min-width: 0; padding: 0 !important; }
main#main > .mx-auto, main#main .max-w-panel { max-width: 100%; }
main#main [class~="side-navigation:max-w-panel"] {
  min-height: calc(100dvh - 4.25rem);
  margin: 0 !important;
}
main#main [class~="side-navigation:max-w-panel"] > [class~="side-navigation:flex-1"] {
  min-height: calc(100dvh - 4.25rem);
  padding: 1.5rem clamp(1rem, 2.2vw, 2.25rem) 2.5rem;
}
main#main [class~="side-navigation:w-sidebar"],
nav[aria-label="Administration"] {
  width: 16.5rem !important;
  min-height: calc(100dvh - 4.25rem);
  padding-top: 1.25rem !important;
  border: 0 !important;
  border-right: 1px solid #252e39 !important;
  border-radius: 0 !important;
  background: #10151c !important;
  box-shadow: none !important;
}
main#main [class~="side-navigation:w-sidebar"] a,
nav[aria-label="Administration"] a {
  min-height: 2.65rem;
  margin: 0.12rem 0.55rem;
  padding: 0.58rem 0.8rem !important;
  border-radius: 0.45rem;
  color: #aab4c0;
  font-size: 0.9rem;
  transition: color 140ms ease, background-color 140ms ease;
}
main#main [class~="side-navigation:w-sidebar"] a:hover,
nav[aria-label="Administration"] a:hover { color: #eef1f5; background: #1b232e; }
main#main [class~="side-navigation:w-sidebar"] a[data-status="active"],
nav[aria-label="Administration"] a[aria-current="page"],
nav[aria-label="Administration"] a[data-status="active"] {
  color: #f08b4b;
  background: rgb(232 117 54 / 10%);
}
main#main [class~="side-navigation:w-sidebar"] a[data-status="active"]::before {
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: #e87536;
  content: "";
}

/* Consistent page canvas and headings */
main#main > div, main#main section { min-width: 0; }
main#main h1 { color: #edf1f5; font-weight: 650; letter-spacing: -0.035em; }
main#main h2, main#main h3 { color: #e4e9ef; font-weight: 620; letter-spacing: -0.02em; }
main#main p { line-height: 1.58; }
main#main .text-muted-foreground { color: #9ba6b3 !important; }
main#main [data-slot="card"], main#main .bg-card {
  border-color: #28313d;
  border-radius: 0.75rem !important;
  background: #131922 !important;
  box-shadow: none !important;
}
main#main [data-slot="card-title"] { color: #e9edf2; font-weight: 620; }
main#main [data-slot="card"]:has(a:hover), main#main a[data-slot="card"]:hover {
  border-color: #3a4654;
}
main#main table { border-collapse: separate; border-spacing: 0; }
main#main thead th { color: #aab4c0; background: #161d26; border-bottom: 1px solid #28313d; }
main#main tbody tr:hover td { background: rgb(232 117 54 / 4%); }
main#main [data-slot="badge"] { border-color: #34404d; background: #1a232e; font-weight: 600; }
main#main [role="tablist"] { border-color: #28313d; background: #10161e; }
main#main [role="tab"][data-state="active"] {
  color: #f08b4b;
  border-color: #3b4653;
  background: #1b232e;
  box-shadow: none;
}
main#main button, main#main a[role="button"], main#main [data-slot="button"] { transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
main#main button:active, main#main a[role="button"]:active, main#main [data-slot="button"]:active { transform: none; }
main#main input, main#main select, main#main textarea {
  border-color: #34404d !important;
  border-radius: 0.55rem !important;
  background-color: #0f151d !important;
}

/* Keep the dashboard welcome banner aligned with its actual content. */
main#main section[style*="flame-dashboard"],
main#main .fh-dashboard-welcome {
  min-height: 11.5rem !important;
  justify-content: center !important;
  padding: 1.5rem clamp(1.25rem, 3vw, 2.25rem) !important;
  border: 1px solid rgb(232 117 54 / 22%) !important;
  border-radius: 1rem !important;
  background-color: #10151c !important;
  background-image: linear-gradient(90deg, rgba(8, 8, 10, 0.58), rgba(8, 8, 10, 0.3), rgba(8, 8, 10, 0.58)), url('/assets/flame-dashboard-volcanic.D2Gin5Rc.png') !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow: none !important;
  text-align: center !important;
}
main#main section[style*="flame-dashboard"] > div,
main#main .fh-dashboard-welcome > div {
  width: 100%;
  max-width: 54rem !important;
  margin: 0 auto !important;
  text-align: center !important;
}
main#main section[style*="flame-dashboard"] p:first-child {
  font-size: clamp(1.9rem, 4vw, 3rem) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
main#main section[style*="flame-dashboard"] p:last-child { margin-top: 0.5rem !important; color: #c1c8d2 !important; font-size: 1rem !important; font-weight: 400 !important; }
main#main .fh-dashboard-welcome p:first-child { margin-bottom: 0.5rem !important; color: #8793a1 !important; font-size: 0.65rem !important; letter-spacing: 0.1em; }
main#main .fh-dashboard-welcome p:nth-child(2) { font-size: clamp(1.5rem, 3vw, 2rem) !important; font-weight: 620 !important; line-height: 1.2 !important; }
main#main .fh-dashboard-welcome p:last-child { margin-top: 0.45rem !important; color: #aab4c0 !important; font-size: 0.95rem !important; font-weight: 400 !important; }

/* Success states use a quiet green surface and a high-contrast live indicator. */
main#main [role="status"][class*="success"] {
  border-color: rgb(73 189 129 / 42%) !important;
  color: #b9f3d3 !important;
  background-color: rgb(34 112 73 / 22%) !important;
}
main#main [role="status"][class*="success"] [aria-hidden="true"] {
  color: #6ee7a5 !important;
  background-color: #6ee7a5 !important;
  box-shadow: 0 0 0.55rem rgb(110 231 165 / 55%);
}

/* Console server address and power controls. */
.fh-console-toolbar { min-width: 0; }
.fh-console-address-card {
  display: flex;
  min-width: 7.5rem;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #303a46;
  border-radius: 0.55rem;
  background: #0f151d;
}
.fh-console-address-card > span:first-child {
  color: #8d99a7;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fh-console-address-card strong { color: #edf1f5; font: 600 0.9rem/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; }
.fh-console-alias { min-width: 13rem; }
.fh-console-power-actions > div {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem !important;
}
.fh-console-power-actions button,
.fh-console-power-actions [data-slot="button"] {
  min-width: 0;
  min-height: 2.7rem !important;
  justify-content: center !important;
  padding: 0.45rem 0.65rem !important;
  border-radius: 0.55rem !important;
}
.fh-console-power-actions button > span:last-child,
.fh-console-power-actions [data-slot="button"] > span:last-child {
  display: inline-flex !important;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
}
.fh-console-power-actions button > span:last-child > span:first-child,
.fh-console-power-actions [data-slot="button"] > span:last-child > span:first-child,
.fh-console-power-actions button > span:last-child > svg:last-child,
.fh-console-power-actions [data-slot="button"] > span:last-child > svg:last-child { display: none !important; }
.fh-console-power-actions button > span:last-child > span:nth-child(2),
.fh-console-power-actions [data-slot="button"] > span:last-child > span:nth-child(2) { flex: initial !important; text-align: center !important; }
.fh-console-power-actions button > span:last-child > span:nth-child(2) > span:first-child,
.fh-console-power-actions [data-slot="button"] > span:last-child > span:nth-child(2) > span:first-child {
  color: #fff !important;
  font-size: 0.82rem !important;
}
.fh-console-power-actions button > span:last-child > span:nth-child(2) > span:last-child,
.fh-console-power-actions [data-slot="button"] > span:last-child > span:nth-child(2) > span:last-child { display: none !important; }
.fh-demo-console-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid #303a46;
  border-radius: 0.8rem;
  background: #131922;
}
.fh-demo-toolbar-heading {
  margin: 0 0 0.65rem;
  color: #aab4c0;
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fh-demo-addresses { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.fh-demo-power-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.fh-demo-power-actions button {
  min-height: 2.65rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid #36414e;
  border-radius: 0.55rem;
  color: #e9edf2;
  background: #1a222d;
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
}
.fh-demo-power-actions button:hover { border-color: #657487; background: #222c38; }
.fh-demo-power-actions .fh-demo-power-start { border-color: #bd642e; color: #17120f; background: #e87536; }
.fh-demo-power-actions .fh-demo-power-start:hover { background: #f08b4b; }
.fh-demo-power-actions .fh-demo-power-stop { border-color: #713c43; color: #ffb6b2; background: #321c22; }
.fh-demo-power-actions .fh-demo-power-stop:hover { border-color: #a05059; background: #41232a; }
.fh-demo-action-notice {
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgb(229 163 75 / 34%);
  border-radius: 0.5rem;
  color: #f1c987;
  background: rgb(229 163 75 / 8%);
  font-size: 0.76rem;
  line-height: 1.45;
}

body[data-preview="local"] main#main div:has(> canvas) { position: relative; }
.fh-status-pill,
main#main span:has(> span[class~="bg-current"][class~="rounded-full"]) { align-items: center !important; }
.fh-demo-console-output {
  position: absolute;
  z-index: 3;
  inset: 0.9rem 1rem;
  overflow: hidden;
  color: #c8d1db;
  pointer-events: none;
  font: 0.77rem/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.fh-demo-console-output strong { color: #8493a4; font: 600 0.62rem/1.4 "IBM Plex Sans", "Segoe UI", sans-serif; letter-spacing: 0.1em; }
.fh-demo-console-output pre { margin: 0.7rem 0 0; color: #c8d1db; font: inherit; white-space: pre-wrap; }

/* Authentication, server list, account and admin utility sections */
.fh-auth-shell {
  position: relative;
  max-width: 900px !important;
  padding: 2.25rem 1.25rem 1.5rem !important;
  border: 1px solid #29333e;
  border-radius: 1rem;
  background: #111720;
  box-shadow: 0 28px 70px rgb(0 0 0 / 34%);
}
.fh-auth-language { position: absolute; top: 0.8rem; right: 1rem; z-index: 2; }
.fh-auth-heading { margin: 0 auto 1rem; text-align: center; }
.fh-auth-kicker { color: #e87536; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; }
.fh-auth-heading h2 { font-size: clamp(1.55rem, 4vw, 2.2rem); font-weight: 650; }
.fh-auth-heading p { margin: -0.3rem 0 0.85rem; color: #a0aab7; font-size: 0.9rem; }
.fh-auth-shell form > div { border: 1px solid #2c3743; background: #141b24; border-radius: 0.8rem; box-shadow: none; }
.fh-auth-shell form button[type="submit"] { border: 0; border-radius: 0.55rem; background: #e87536; color: #17120f; font-weight: 650; box-shadow: none; }
.fh-server-list-heading, .fh-account-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem;
  margin: 0 0 1.25rem;
  padding: 1.2rem 1.35rem;
  border: 1px solid #29333e;
  border-radius: 0.8rem;
  background: #131922;
}
.fh-server-list-heading > div { min-width: 0; }
.fh-server-list-heading h1, .fh-account-heading h1 { margin-top: 0.2rem; }
.fh-server-search { width: min(360px, 100%); color: #aab4c0; font-size: 0.75rem; }
.fh-server-search input { display: block; width: 100%; height: 2.6rem; margin-top: 0.4rem; padding: 0 0.8rem; border: 1px solid #34404d; border-radius: 0.55rem; background: #0f151d; color: #edf1f5; }
.fh-server-search input:focus { border-color: #e87536; box-shadow: 0 0 0 3px rgb(232 117 54 / 14%); }
.fh-admin-health {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.6fr);
  gap: 1.5rem;
  align-items: center;
  padding: 1.25rem 1.4rem;
  border: 1px solid #29333e;
  border-radius: 0.8rem;
  background: #131922;
}
.fh-admin-health h3 { margin: 0.25rem 0; font-size: 1.15rem; font-weight: 650; color: #e9edf2; }
.fh-admin-health p:last-child { margin: 0; color: #9ba6b3; font-size: 0.82rem; }
.fh-admin-health-metrics { display: flex; align-items: center; justify-content: flex-end; gap: 1.75rem; }
.fh-admin-health-metrics > div { display: grid; gap: 0.25rem; }
.fh-admin-health-metrics strong { color: #f08b4b; font-size: 1.45rem; }
.fh-admin-health-metrics span { color: #aab4c0; font-size: 0.7rem; }
.fh-admin-health-link { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.65rem 0.8rem; border-radius: 0.55rem; background: #202935; color: #e9edf2; text-decoration: none; font-size: 0.78rem; font-weight: 600; }
.fh-admin-health-link:hover { background: #293442; color: #f08b4b; }

/* Server overview modeled after the reference: hero, health cards, usage area and side controls. */
.fh-server-dashboard { width: 100%; max-width: 100%; color: #f3f5f8; }
.fh-maintenance-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid rgb(255 122 26 / 55%);
    border-left: 4px solid var(--panel-accent-orange);
    border-radius: 0.7rem;
    color: #ffe0ca;
    background: linear-gradient(100deg, rgb(255 148 31 / 16%), rgb(255 122 26 / 9%));
}
.fh-maintenance-banner svg { flex: 0 0 auto; color: var(--panel-accent-orange); }
.fh-server-hero {
    display: flex;
    min-height: 11.5rem;
    align-items: stretch;
    gap: 1.4rem;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid #30303a;
    border-top-color: rgb(255 179 67 / 78%);
    border-right-color: rgb(255 148 31 / 68%);
    border-radius: 1rem;
    background: linear-gradient(112deg, #151821 0%, #10141d 56%, #11131b 100%);
    box-shadow: 0 16px 42px rgb(0 0 0 / 30%);
}
.fh-server-art {
    position: relative;
    display: flex;
    width: min(18rem, 26%);
    min-width: 12rem;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 1.1rem;
    border: 1px solid rgb(255 122 26 / 32%);
    border-radius: 0.8rem;
    color: #ffd4bf;
    background:
        linear-gradient(145deg, rgb(255 148 31 / 52%), transparent 53%),
        radial-gradient(ellipse at 75% 0%, rgb(255 122 26 / 68%), transparent 48%),
        linear-gradient(145deg, #2c1b12, #171923 62%, #0d121b);
}
.fh-server-art::before, .fh-server-art::after {
    position: absolute;
    right: -10%;
    bottom: -25%;
    width: 85%;
    height: 74%;
    border: 1px solid rgb(255 203 167 / 20%);
    border-radius: 45% 55% 0 0;
    background: linear-gradient(155deg, rgb(255 122 26 / 50%), rgb(120 43 50 / 78%) 54%, #151821 55%);
    content: "";
    transform: rotate(-11deg);
}
.fh-server-art::after {
    right: 32%;
    bottom: -45%;
    width: 57%;
    height: 80%;
    background: linear-gradient(145deg, rgb(255 122 26 / 42%), rgb(70 32 43 / 92%) 58%, #10141d 59%);
    transform: rotate(14deg);
}
.fh-server-art > * { position: relative; z-index: 1; }
.fh-server-art span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; line-height: 1.3; }
.fh-server-art-glow { position: absolute; top: 20%; right: 13%; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: #ffb268; box-shadow: none; }
.fh-server-identity { display: flex; min-width: 0; flex: 1; flex-direction: column; justify-content: space-between; padding: 0.5rem 0.6rem 0.4rem 0; }
.fh-server-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; }
.fh-server-title-row h1 { margin: 0.2rem 0 0.35rem; color: #f8f7f7; font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.15; }
.fh-eyebrow { margin: 0; color: #8993a3; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.13em; }
.fh-server-description { max-width: 56rem; margin: 0; color: #b3bdca; font-size: 0.92rem; line-height: 1.55; }
.fh-state-pill { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.5rem; padding: 0.48rem 0.78rem; border: 1px solid #303846; border-radius: 999px; color: #c6cfda; background: #191f29; font-size: 0.78rem; font-weight: 600; }
.fh-state-pill i, .fh-live-label i { width: 0.48rem; height: 0.48rem; border-radius: 50%; background: #727d8c; }
.fh-state-pill.is-running { border-color: rgb(10 185 126 / 30%); color: #72e3bd; background: rgb(10 185 126 / 10%); }
.fh-state-pill.is-running i, .fh-live-label i { background: #18c993; box-shadow: 0 0 0.7rem rgb(24 201 147 / 70%); }
.fh-state-pill.is-maintenance { border-color: rgb(255 122 26 / 36%); color: #ffbc86; background: rgb(255 148 31 / 12%); }
.fh-state-pill.is-maintenance i { background: var(--panel-accent-orange); }
.fh-state-pill.is-offline i { background: #8d97a5; }
.fh-server-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; color: #b4bfce; font-size: 0.82rem; }
.fh-server-meta span { display: inline-flex; align-items: center; gap: 0.48rem; }
.fh-server-meta svg { color: #ff9a69; }
.fh-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); align-items: start; gap: 1.15rem; margin-top: 1.15rem; }
.fh-dashboard-primary, .fh-dashboard-aside { display: flex; min-width: 0; flex-direction: column; gap: 1.15rem; }
.fh-metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem; }
.fh-metric-card { display: flex; min-height: 6.6rem; gap: 0.75rem; padding: 1rem; border: 1px solid #252c39; border-radius: 0.85rem; background: linear-gradient(145deg, #111722, #0e121a); }
.fh-metric-icon, .fh-heading-icon { display: grid; width: 2.65rem; height: 2.65rem; flex: 0 0 auto; place-items: center; border: 1px solid #2b3442; border-radius: 0.75rem; color: #ff895f; background: rgb(255 148 31 / 11%); }
.fh-tone-orange .fh-metric-icon { color: #ff9a49; background: rgb(255 122 26 / 12%); }
.fh-tone-green .fh-metric-icon { color: #39d6a5; background: rgb(24 201 147 / 11%); }
.fh-tone-blue .fh-metric-icon { color: #ffb343; background: rgb(255 179 67 / 12%); }
.fh-metric-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 0.15rem; }
.fh-metric-copy strong { overflow: hidden; color: #f4f6fa; font-size: 1.15rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.fh-muted { color: #929dad; font-size: 0.74rem; }
.fh-meter { height: 0.28rem; margin-top: 0.42rem; overflow: hidden; border-radius: 999px; background: #252d3a; }
.fh-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--panel-accent-red), var(--panel-accent-orange)); }
.fh-tone-green .fh-meter span { background: #18c993; }
.fh-tone-blue .fh-meter span { background: #ffb343; }
.fh-panel-card { padding: 1rem; border: 1px solid #252c39; border-radius: 0.9rem; background: linear-gradient(145deg, #111722, #0e121a); box-shadow: 0 10px 28px rgb(0 0 0 / 18%); }
.fh-section-heading { display: flex; min-width: 0; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.fh-section-heading.compact { margin-bottom: 0.9rem; }
.fh-heading-icon { width: 2.35rem; height: 2.35rem; border-radius: 0.7rem; color: #dce3ed; background: #171e29; }
.fh-heading-icon.orange { color: #ff9256; background: rgb(255 148 31 / 11%); }
.fh-section-heading h2 { margin: 0; color: #edf0f5; font-size: 0.98rem; font-weight: 650; }
.fh-section-heading p { margin: 0.15rem 0 0; color: #8792a2; font-size: 0.73rem; }
.fh-live-label { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: auto; color: #9ba7b6; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.09em; }
.fh-live-label i { width: 0.42rem; height: 0.42rem; }
.fh-chart-area { position: relative; min-height: 12rem; overflow: hidden; border-top: 1px solid #222a36; border-radius: 0.3rem; background: repeating-linear-gradient(to bottom, transparent 0, transparent 2.7rem, rgb(108 123 145 / 12%) 2.75rem), repeating-linear-gradient(to right, transparent 0, transparent 5.4rem, rgb(108 123 145 / 8%) 5.45rem); }
.fh-chart-grid { position: absolute; inset: 0.7rem 0.65rem 1.9rem; display: flex; flex-direction: column; justify-content: space-between; }
.fh-chart-grid i { display: block; border-top: 1px dashed rgb(137 151 171 / 16%); }
.fh-chart-empty { position: absolute; inset: 0.5rem 0 1.65rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; text-align: center; }
.fh-chart-empty-icon { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border: 1px solid #34303a; border-radius: 50%; color: #ff875e; background: #191820; }
.fh-chart-empty strong { color: #dce2eb; font-size: 0.83rem; }
.fh-chart-empty > span:last-child { color: #858f9f; font-size: 0.74rem; }
.fh-chart-axis { position: absolute; right: 0.6rem; bottom: 0.15rem; left: 0.6rem; display: flex; justify-content: space-between; color: #8893a2; font-size: 0.67rem; }
.fh-live-bars { position: absolute; inset: 1.2rem 0.9rem 2rem; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.fh-live-bars > div { display: grid; grid-template-columns: 4rem minmax(3rem, 1fr) minmax(6rem, auto); align-items: center; gap: 0.75rem; color: #adb8c7; font-size: 0.76rem; }
.fh-live-bars b { height: 0.4rem; overflow: hidden; border-radius: 99px; background: #252d3a; }
.fh-live-bars b i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--panel-accent-red), var(--panel-accent-orange)); }
.fh-live-bars strong { color: #e4e9f0; font-size: 0.72rem; font-weight: 500; text-align: right; }
.fh-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.fh-detail-row { display: grid; min-width: 0; grid-template-columns: 1rem minmax(5rem, 0.75fr) minmax(0, 1fr); align-items: center; gap: 0.55rem; padding: 0.62rem 0; border-top: 1px solid rgb(255 255 255 / 4%); color: #9ca8b8; font-size: 0.76rem; }
.fh-detail-row svg { color: #a8b4c3; }
.fh-detail-row strong { overflow: hidden; color: #e1e6ee; font-size: 0.75rem; font-weight: 500; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.fh-actions-panel { padding: 1rem; }
.fh-action-button { display: flex; width: 100%; min-height: 2.75rem; align-items: center; gap: 0.65rem; margin-top: 0.48rem; padding: 0.6rem 0.75rem; border: 1px solid #242d3b; border-radius: 0.65rem; color: #dce3ec; background: #171e29; font-size: 0.8rem; font-weight: 600; text-align: left; text-decoration: none; transition: border-color 150ms ease, background 150ms ease, transform 150ms ease; }
.fh-action-button > svg:last-child { margin-left: auto; color: #8290a1; }
.fh-action-button:not(:disabled):hover { transform: translateY(-1px); border-color: rgb(255 122 26 / 42%); background: #1c2430; }
.fh-action-button.start { border-color: rgb(255 148 31 / 30%); color: #ff9b71; background: linear-gradient(100deg, rgb(255 148 31 / 15%), rgb(255 122 26 / 8%)); }
.fh-action-button:disabled { cursor: not-allowed; opacity: 0.45; }
.fh-node-panel .fh-detail-row { grid-template-columns: 1rem minmax(7rem, 0.9fr) minmax(0, 1fr); }
.fh-node-footer { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.55rem; padding: 0.75rem; border: 1px solid #262e3b; border-radius: 0.65rem; color: #9ca8b8; background: #151b25; font-size: 0.72rem; }
.fh-node-footer svg { color: #ff9a69; }
.fh-node-footer span { overflow: hidden; margin-left: auto; color: #e1e6ee; text-overflow: ellipsis; white-space: nowrap; }
.fh-shortcuts-panel { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 0.3rem; }
.fh-shortcuts-panel .fh-eyebrow { margin: 0 0 0.3rem 0.35rem; }
.fh-shortcuts-panel a { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.4rem; color: #adb7c5; font-size: 0.78rem; text-decoration: none; }
.fh-shortcuts-panel a svg:last-child { margin-left: auto; color: #7d8998; }
.fh-shortcuts-panel a:hover { color: #ff9a69; }

@media (max-width: 1200px) {
    .fh-dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem); }
    .fh-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    main#main [class~="side-navigation:max-w-panel"] { display: block; }
    main#main [class~="side-navigation:w-sidebar"] { width: 100% !important; min-height: 0; border-right: 0 !important; border-bottom: 1px solid #202631 !important; }
    main#main [class~="side-navigation:max-w-panel"] > [class~="side-navigation:flex-1"] { min-height: 0; padding: 1rem; }
    .fh-dashboard-grid { grid-template-columns: 1fr; }
    .fh-dashboard-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 620px) {
    .fh-server-hero { flex-direction: column; }
    .fh-server-art { width: 100%; min-width: 0; min-height: 8rem; }
    .fh-server-title-row { flex-direction: column; }
    .fh-server-meta { gap: 0.65rem 1rem; }
    .fh-metrics-grid { grid-template-columns: 1fr 1fr; gap: 0.55rem; }
    .fh-metric-card { min-height: 6rem; gap: 0.5rem; padding: 0.7rem; }
    .fh-metric-icon { width: 2.1rem; height: 2.1rem; }
    .fh-details-grid, .fh-dashboard-aside { grid-template-columns: 1fr; }
    .fh-detail-row { grid-template-columns: 1rem minmax(5rem, 0.8fr) minmax(0, 1fr); }
}



/* Server overview components */
html body,
html body button,
html body input,
html body select,
html body textarea,
html body [class~="font-sans"],
html body [class~="font-header"],
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif !important;
}
html body [class~="font-mono"], html body code, html body pre, html body kbd {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
}
.fh-server-hero, .fh-metric-card, .fh-panel-card { box-shadow: none; }
.fh-server-hero { border-color: #2b3541; border-top-color: #394550; border-right-color: #2b3541; border-radius: 0.85rem; background: #131922; }
.fh-server-art { border-color: #303a46; border-radius: 0.7rem; color: #d5dce4; background: linear-gradient(145deg, #26303a, #171e27 70%); }
.fh-server-art::before, .fh-server-art::after { display: none; }
.fh-server-art-glow { background: #e87536; box-shadow: none; }
.fh-server-title-row h1 { color: #edf1f5; font-weight: 650; }
.fh-server-description, .fh-server-meta { color: #aab4c0; }
.fh-server-meta svg, .fh-node-footer svg { color: #e87536; }
.fh-dashboard-grid { gap: 1rem; margin-top: 1rem; }
.fh-dashboard-primary, .fh-dashboard-aside { gap: 1rem; }
.fh-metric-card, .fh-panel-card { border-color: #29333e; border-radius: 0.75rem; background: #131922; }
.fh-metric-icon, .fh-heading-icon { border-color: #35404c; border-radius: 0.6rem; color: #e87536; background: #1d252f; }
.fh-tone-orange .fh-metric-icon, .fh-heading-icon.orange { color: #f08b4b; background: rgb(232 117 54 / 10%); }
.fh-tone-green .fh-metric-icon { color: #60bf8a; background: rgb(67 184 135 / 10%); }
.fh-tone-blue .fh-metric-icon { color: #7eb0dc; background: rgb(126 176 220 / 10%); }
.fh-section-heading h2, .fh-chart-empty strong { color: #e9edf2; }
.fh-section-heading p, .fh-muted, .fh-live-label { color: #99a4b1; }
.fh-state-pill, .fh-node-footer { border-color: #323d49; color: #bac3cd; background: #1a222c; }
.fh-action-button { border-color: #303a46; border-radius: 0.55rem; color: #dce2e9; background: #1a222c; }
.fh-action-button.start { border-color: rgb(232 117 54 / 28%); color: #f08b4b; background: rgb(232 117 54 / 8%); }
.fh-action-button:not(:disabled):hover { border-color: #465361; background: #202a35; transform: none; }
.fh-maintenance-banner { border-color: rgb(229 163 75 / 40%); color: #f1c47f; background: rgb(229 163 75 / 8%); }

@media (max-width: 1023px) {
  main#main [class~="side-navigation:w-sidebar"], nav[aria-label="Administration"] { width: 14.5rem !important; }
  .fh-dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); }
  .fh-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  main form > div.bg-card { padding: 1.25rem !important; }
  main form > div.bg-card > div:first-child { min-width: 0; }
  svg[aria-label="Pterodactyl"] { width: 180px !important; height: 58px !important; }
  main#main [class~="side-navigation:max-w-panel"] > [class~="side-navigation:flex-1"] { padding: 1rem 0.85rem 2rem; }
  .fh-server-list-heading, .fh-account-heading { align-items: stretch; flex-direction: column; padding: 1rem; }
  .fh-server-search { width: 100%; }
  .fh-admin-health { grid-template-columns: 1fr; }
  .fh-admin-health-metrics { justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
  .fh-dashboard-grid { grid-template-columns: 1fr; }
  .fh-demo-console-toolbar { grid-template-columns: 1fr; }
  .fh-console-alias { min-width: 0; }
  .fh-server-hero { flex-direction: column; }
  .fh-server-art { width: 100%; min-height: 7rem; }
  .fh-server-identity { gap: 1rem; padding: 0.3rem; }
  .fh-server-title-row { flex-wrap: wrap; }
  .fh-details-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .fh-metrics-grid { grid-template-columns: 1fr; }
  .fh-live-bars > div { grid-template-columns: 3.3rem minmax(2rem, 1fr); }
  .fh-live-bars strong { grid-column: 2; }
  .fh-state-pill { margin-top: 0.25rem; }
  .fh-demo-power-actions { grid-template-columns: 1fr; }
  .fh-console-power-actions > div { grid-template-columns: 1fr !important; }
  .fh-console-power-actions button,
  .fh-console-power-actions [data-slot="button"] { justify-content: flex-start !important; }
  .fh-console-power-actions button > span:first-child,
  .fh-console-power-actions [data-slot="button"] > span:first-child { display: inline-flex !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Server area: one quiet surface system, with orange reserved for the active path. */
[data-flame-server-panel] {
  --fh-server-bg: #0b0f14;
  --fh-server-surface: #111720;
  --fh-server-surface-raised: #151d27;
  --fh-server-line: #26313d;
  --fh-server-text: #edf1f5;
  --fh-server-muted: #9aa6b5;
  color: var(--fh-server-text);
}
[data-flame-server-panel] main [class*="rounded-[18px_3px_18px_3px]"] { border-radius: 0.95rem !important; }
[data-flame-server-panel] main [class*="border-border"] { border-color: rgb(255 255 255 / 6%) !important; }
[data-flame-server-panel] main [class*="shadow-lg"],
[data-flame-server-panel] main [class*="shadow-sm"] { box-shadow: none !important; }
[data-flame-server-panel] main [class*="bg-card"] { background-color: var(--fh-server-surface) !important; }

.fh-server-page-heading {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.25rem 0 1.35rem;
}
.fh-server-page-context {
  margin: 0;
  overflow: hidden;
  color: #e87536;
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.fh-server-page-heading h1 {
  margin: 0;
  color: var(--fh-server-text);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  font-weight: 680;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.fh-server-navigation { scrollbar-width: none; }
.fh-server-navigation::-webkit-scrollbar { display: none; }
.fh-server-navigation > div > a,
.fh-server-navigation > div > div {
  border: 0 !important;
  border-radius: 0.72rem !important;
  box-shadow: none !important;
}
.fh-server-navigation > div > a:hover,
.fh-server-navigation > div > div:hover {
  color: var(--fh-server-text) !important;
  background: rgb(255 152 46 / 7%) !important;
}
.fh-server-navigation > div > a[data-status="active"],
.fh-server-navigation > div > div[data-status="active"] {
  color: #ff9a45 !important;
  background: rgb(232 117 54 / 12%) !important;
  box-shadow: none !important;
}

.fh-server-overview-hero {
  min-height: 10rem;
  border: 0;
  background: #121820;
  box-shadow: none;
}
.fh-server-game-art {
  min-height: 8.5rem;
  background: #1a2029;
}
.fh-server-game-art img { filter: saturate(0.88); }
.fh-server-art-fallback { color: rgb(255 153 69 / 72%); }
.fh-server-identity { padding-right: 0.5rem; }
.fh-server-state { border: 0 !important; }
.fh-server-overview .fh-server-state.text-success,
.fh-server-overview .fh-server-state[class*="text-success"] { color: #5bd49e !important; background: rgb(24 201 147 / 11%) !important; }
.fh-server-overview .fh-server-state[class*="text-warning"] { color: #ffc17f !important; background: rgb(255 152 46 / 11%) !important; }
.fh-server-overview .fh-server-state[class*="text-muted"] { color: #a4afbd !important; background: #1a222c !important; }
.fh-server-overview .fh-server-meta span { background: rgb(255 255 255 / 3%); }

.fh-server-surface,
.fh-server-stat-card,
.fh-server-chart-card,
.fh-server-recent-activity {
  border: 0 !important;
  border-radius: 0.95rem !important;
  background: var(--fh-server-surface) !important;
  box-shadow: none !important;
}
.fh-server-stat-card {
  min-height: 6.2rem;
  gap: 0.8rem;
  transition: background-color 140ms ease;
}
.fh-server-stat-card:hover { background: var(--fh-server-surface-raised) !important; }
.fh-server-stat-card > div:nth-child(2) {
  border: 0;
  border-radius: 0.75rem;
  box-shadow: none;
  background: #1b2530;
}
.fh-server-stat-card p { margin-block: 0.1rem; }
.fh-server-network-strip {
  border: 0;
  border-radius: 0.75rem;
  background: var(--fh-server-surface);
}
.fh-server-network-strip strong { color: var(--fh-server-text); }

.fh-server-chart-card .group-hover\:text-foreground { color: var(--fh-server-text); }
.fh-server-chart-card > div:first-child { border-color: rgb(255 255 255 / 5%) !important; }
.fh-server-chart-card > div:last-child { padding-top: 0.7rem; }
.fh-server-recent-activity > header { border-color: rgb(255 255 255 / 5%) !important; }
.fh-server-activity-list > li { border-color: rgb(255 255 255 / 5%) !important; }
.fh-server-detail-row { border: 0; }
.fh-server-detail-row + .fh-server-detail-row { border-top: 1px solid rgb(255 255 255 / 5%); }
.fh-server-detail-row svg { color: #9aa6b5; }

.fh-server-power button {
  border-width: 1px;
  border-color: transparent;
  border-radius: 0.72rem;
  background: var(--fh-server-surface-raised);
  box-shadow: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.fh-server-power button:not(:disabled):hover { transform: none; background: #202a35; }
.fh-server-power .fh-server-power-start {
  border-color: rgb(24 201 147 / 25%);
  color: #65d9a8;
  background: rgb(24 201 147 / 8%);
}
.fh-server-power .fh-server-power-restart { color: #dce3ec; }
.fh-server-power .fh-server-power-stop { border-color: rgb(239 68 68 / 20%); }
.fh-server-power-inline { display: flex; width: auto; flex: 0 0 auto; align-items: center; }
.fh-server-power-inline > div { display: flex; width: auto; align-items: center; gap: 0.4rem; }
.fh-server-power-inline > div > button {
  width: 2.65rem;
  min-width: 2.65rem;
  height: 2.65rem;
  min-height: 2.65rem;
  flex: 0 0 2.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #2a3441;
  border-radius: 0.75rem;
  background: #171d26;
  color: #edf1f6;
  box-shadow: none;
  opacity: 1 !important;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.fh-server-power-inline > div > button > span:first-child {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 1.15rem;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: inherit !important;
}
.fh-server-power-inline .fh-server-power-start { border-color: rgb(255 146 46 / 45%); }
.fh-server-power-inline .fh-server-power-start:not(:disabled) {
  border-color: #ff922e;
  background: #ff922e;
  color: #1a120c;
  box-shadow: 0 3px 10px rgb(244 125 25 / 16%);
}
.fh-server-power-inline .fh-server-power-start:not(:disabled):hover {
  border-color: #ffac50;
  background: #ffa044;
  box-shadow: 0 5px 16px rgb(244 125 25 / 22%);
}
.fh-server-power-inline .fh-server-power-start:not(:disabled) > span:first-child {
  color: #1a120c !important;
}
.fh-server-power-inline .fh-server-power-start:disabled {
  border-color: #293240;
  background: #171d26;
  color: #aab4c0;
  box-shadow: none;
  opacity: 1 !important;
}
.fh-server-power-inline .fh-server-power-icon-start { color: #1a120c !important; }
.fh-server-power-inline .fh-server-power-icon-restart { color: #ff9a35 !important; }
.fh-server-power-inline .fh-server-power-icon-stop { color: #ff7378 !important; }
.fh-server-power-inline .fh-server-power-restart:not(:disabled):hover {
  border-color: #48576b;
  background: #202936;
  box-shadow: 0 4px 12px rgb(0 0 0 / 14%);
}
.fh-server-power-inline .fh-server-power-stop:not(:disabled) {
  border-color: rgb(239 86 91 / 34%);
  background: rgb(239 68 68 / 7%);
  color: #f2e7e8;
}
.fh-server-power-inline .fh-server-power-stop:not(:disabled):hover {
  border-color: rgb(239 86 91 / 58%);
  background: rgb(239 68 68 / 13%);
  box-shadow: 0 4px 12px rgb(239 68 68 / 8%);
}
.fh-server-power-inline .fh-server-power-restart:disabled,
.fh-server-power-inline .fh-server-power-stop:disabled {
  border-color: #252e3a;
  background: #141a22;
  color: #a0aab8;
  opacity: 1 !important;
}
.fh-server-power-inline .fh-server-power-start:disabled .fh-server-power-icon-start,
.fh-server-power-inline .fh-server-power-restart:disabled .fh-server-power-icon-restart,
.fh-server-power-inline .fh-server-power-stop:disabled .fh-server-power-icon-stop { color: #8490a0 !important; }
.fh-server-power-inline button:disabled { cursor: not-allowed; }
.fh-server-power-inline button:focus-visible {
  outline: 2px solid rgb(255 145 43 / 75%);
  outline-offset: 2px;
}
@media (max-width: 640px) {
  .fh-server-power-inline { width: auto; flex-basis: auto; }
  .fh-server-power-inline > div { gap: 0.3rem; }
  .fh-server-power-inline > div > button {
    width: 2.4rem;
    min-width: 2.4rem;
    height: 2.4rem;
    min-height: 2.4rem;
    flex-basis: 2.4rem;
  }
}

.flame-server-panel input:not([type="checkbox"]):not([type="radio"]),
.flame-server-panel select,
.flame-server-panel textarea {
  border-color: var(--fh-server-line) !important;
  border-radius: 0.68rem !important;
  background-color: #0d131b !important;
  box-shadow: none;
}
.flame-server-panel input:focus-visible,
.flame-server-panel select:focus-visible,
.flame-server-panel textarea:focus-visible {
  border-color: rgb(232 117 54 / 65%) !important;
  outline: 3px solid rgb(232 117 54 / 17%);
  outline-offset: 1px;
}
.flame-server-panel [role="alert"] { border-left-width: 0 !important; border-radius: 0.75rem !important; }
.fh-server-console-surface {
  border: 0;
  background: var(--fh-server-surface);
  box-shadow: none;
}
.fh-server-terminal-viewport {
  height: min(52vh, 34rem);
  min-height: 18rem;
  overflow: hidden;
  border: 0 !important;
  background: #090d13 !important;
  box-shadow: none !important;
}
.fh-server-terminal-canvas,
.fh-server-terminal-mount {
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}
.fh-server-terminal-mount,
.fh-server-terminal-mount:focus,
.fh-server-terminal-mount:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}
.flame-server-panel table { border-collapse: separate; border-spacing: 0; }
.flame-server-panel table thead { color: var(--fh-server-muted); background: rgb(255 255 255 / 2%); }
.flame-server-panel table tbody tr + tr { border-top: 1px solid rgb(255 255 255 / 5%); }

/* Account settings: keep nested section headings compact and align every account page. */
.fh-account-area main h2,
.fh-account-settings h2 {
  margin-block: 0;
  font-size: 1.125rem !important;
  line-height: 1.3;
}
.fh-account-area main h3,
.fh-account-settings h3 {
  margin-block: 0;
  line-height: 1.3;
}
.fh-account-navigation > div > a[data-status="active"],
.fh-account-navigation > div > div[data-status="active"] {
  border-radius: 0.85rem !important;
  background: rgb(255 145 43 / 10%) !important;
  box-shadow: inset 3px 0 0 #ff912b !important;
}
.fh-account-settings input:not([type="checkbox"]):not([type="radio"]),
.fh-account-settings select,
.fh-account-settings textarea {
  border-radius: 0.7rem;
  background-color: #0d131b;
  box-shadow: none;
}
.fh-account-settings input:focus-visible,
.fh-account-settings select:focus-visible,
.fh-account-settings textarea:focus-visible {
  outline: 2px solid rgb(255 145 43 / 40%);
  outline-offset: 2px;
}
.fh-account-settings table { border-collapse: separate; border-spacing: 0; }
.fh-account-settings table thead { color: #9ca8b8; background: rgb(255 255 255 / 2%); }
.fh-account-settings table tbody tr + tr { border-top: 1px solid rgb(255 255 255 / 5%); }
.fh-account-widget > .bg-card {
  overflow: hidden;
  border-color: rgb(148 163 184 / 14%);
  border-radius: 1rem;
  background: #111720;
  box-shadow: none;
}
.fh-account-widget > .bg-card > .bg-muted\/70 {
  border-bottom-color: rgb(148 163 184 / 12%);
  background: rgb(255 255 255 / 2%);
}

@media (max-width: 1023px) {
  .fh-server-navigation { border: 0 !important; background: transparent !important; box-shadow: none !important; }
  .fh-server-navigation > div { gap: 0.25rem !important; padding-inline: 0.85rem !important; }
  .fh-server-navigation > div > a,
  .fh-server-navigation > div > div { padding: 0.65rem 0.85rem !important; }
  .fh-server-page-heading { margin-bottom: 1rem; }
  .fh-server-overview-hero > div:last-child { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .fh-server-terminal-viewport { height: min(48vh, 30rem); min-height: 16rem; }
  .fh-server-overview-hero { min-height: 0; }
  .fh-server-game-art { min-height: 7rem; }
  .fh-server-stat-card { min-height: 5.7rem; padding: 0.8rem; }
  .fh-server-network-strip { padding: 0.8rem; }
  .fh-server-network-strip > span:last-child { margin-left: 0; }
}

/* Grouped server navigation */
.fh-server-nav-content { display: flex; flex-direction: column; gap: 0.25rem; padding-inline: 0.25rem; }
main#main .fh-server-navigation .fh-server-nav-toggle,
main#main .fh-server-navigation a.fh-server-nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: calc(100% - 1.1rem);
  min-height: 2.65rem;
  margin: 0.12rem 0.55rem;
  padding: 0.58rem 0.8rem !important;
  border: 0;
  border-radius: 0.45rem;
  color: #aab4c0;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease;
}
main#main .fh-server-navigation .fh-server-nav-toggle { cursor: pointer; justify-content: flex-start; }
main#main .fh-server-navigation .fh-server-nav-toggle > span:first-child { flex: 1; min-width: 0; }
main#main .fh-server-navigation .fh-server-nav-toggle:hover,
main#main .fh-server-navigation a.fh-server-nav-link:hover { color: #eef1f5; background: #1b232e; }
main#main .fh-server-navigation .fh-server-nav-toggle[data-active],
main#main .fh-server-navigation a.fh-server-nav-link[data-status="active"] { color: #f08b4b; background: rgb(232 117 54 / 10%); }
.fh-server-nav-children { margin: 0.1rem 0 0.35rem 1.3rem; padding-left: 0.25rem; border-left: 1px solid #303a46; }
main#main .fh-server-navigation .fh-server-nav-children a.fh-server-nav-link { width: calc(100% - 0.3rem); margin: 0.08rem 0.15rem; padding-left: 0.95rem !important; font-size: 0.86rem; }
.fh-server-nav-chevron { margin-left: auto; color: #7d8998; }

/* Flame Control: shared visual system for the customer panel and administration. */
:root,
html.dark {
  --fh-canvas: #0d1117;
  --fh-surface: #131922;
  --fh-surface-raised: #171e28;
  --fh-surface-sunken: #0f151d;
  --fh-line: #28313d;
  --fh-line-strong: #36414e;
  --fh-text: #e9edf2;
  --fh-muted: #a0aab7;
  --fh-brand: #e87536;
  --fh-brand-hover: #f08b4b;
  --fh-brand-soft: rgb(232 117 54 / 11%);
  --fh-card-radius: 0.85rem;
  --fh-control-radius: 0.6rem;
}

html,
body {
  background-color: var(--fh-canvas);
  color: var(--fh-text);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}

body { letter-spacing: 0.005em; }

body > div:has(#logo) header {
  border-color: var(--fh-line) !important;
  background: rgb(13 17 23 / 94%) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}

body > div:has(#logo) header nav > a,
body > div:has(#logo) header nav > button {
  min-height: 2.65rem;
  margin-inline: 0.15rem;
  border-radius: 0.65rem;
  box-shadow: none !important;
}

body > div:has(#logo) header nav > a[data-status="active"],
body > div:has(#logo) header nav > a[aria-current="page"] {
  color: #ff9b55 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body > div:has(#logo) header nav > a[data-status="active"]::after,
body > div:has(#logo) header nav > a[aria-current="page"]::after { display: none; }

main#main h1,
main#main h2,
main#main h3,
main#main h4 {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  letter-spacing: -0.025em;
}

main#main [data-slot="card"],
main#main .bg-card,
main#main .fh-server-list-panel {
  border-color: var(--fh-line) !important;
  border-radius: var(--fh-card-radius) !important;
  background-color: var(--fh-surface) !important;
  box-shadow: none !important;
}

main#main input:not([type="checkbox"]):not([type="radio"]),
main#main select,
main#main textarea {
  border-color: var(--fh-line-strong) !important;
  border-radius: var(--fh-control-radius) !important;
  background-color: var(--fh-surface-sunken) !important;
  color: var(--fh-text);
}

main#main input:focus-visible,
main#main select:focus-visible,
main#main textarea:focus-visible {
  border-color: var(--fh-brand) !important;
  box-shadow: 0 0 0 3px rgb(232 117 54 / 17%) !important;
}

main#main button,
main#main a[role="button"],
main#main [data-slot="button"] {
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

main#main button:active,
main#main a[role="button"]:active,
main#main [data-slot="button"]:active { transform: none; }

main#main .fh-dashboard-welcome {
  min-height: 9.5rem !important;
  justify-content: center !important;
  border-color: rgb(232 117 54 / 25%) !important;
  border-radius: 1rem !important;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 2%) !important;
  text-align: center !important;
}

main#main .fh-dashboard-welcome > img {
  opacity: 0.4;
  filter: saturate(0.55) brightness(0.72);
}
main#main .fh-dashboard-welcome > div:nth-child(2) {
  background-image:
    radial-gradient(ellipse at center, rgb(255 255 255 / 8%) 0%, rgb(255 255 255 / 3%) 34%, transparent 68%),
    linear-gradient(100deg, rgb(9 13 18 / 56%), rgb(9 13 18 / 40%) 55%, rgb(9 13 18 / 54%)) !important;
}
main#main .fh-dashboard-welcome > div:last-child { max-width: 58rem !important; margin-inline: auto !important; text-align: center !important; }
main#main .fh-dashboard-welcome p:first-child { color: #ffad71 !important; }
main#main .fh-dashboard-welcome h1 { color: #fff !important; font-size: clamp(1.7rem, 3vw, 2.35rem) !important; }
main#main .fh-dashboard-welcome h1 span { color: #ff9850 !important; }
main#main .fh-dashboard-welcome p:last-child { max-width: 44rem; margin-inline: auto !important; color: #d0d6de !important; }

main#main .fh-server-list-panel { overflow: clip; }
main#main .fh-server-list-header { border-bottom: 1px solid rgb(255 255 255 / 5%); }
main#main .fh-server-row-compact { border-color: rgb(255 255 255 / 7%) !important; }
main#main .fh-server-row-compact:hover { background: rgb(232 117 54 / 4%) !important; }
main#main .fh-server-row-detailed { border-color: var(--fh-line) !important; background: rgb(15 21 29 / 55%) !important; }
main#main .fh-server-row-detailed:hover { border-color: rgb(232 117 54 / 36%) !important; }

main#main .fh-file-list-toolbar { margin-bottom: 0.65rem !important; }
main#main .fh-file-row {
  min-height: 3.2rem;
  margin-block: 0.28rem;
  border: 1px solid rgb(40 49 61 / 75%);
  border-radius: 0.68rem !important;
  background: #131922 !important;
  transition: border-color 140ms ease, background-color 140ms ease;
}
main#main .fh-file-row:hover { border-color: rgb(232 117 54 / 38%); background: #171e28 !important; }

.fh-admin-sidebar {
  border-color: var(--fh-line) !important;
  background: var(--fh-canvas) !important;
  transition: width 180ms ease;
}

.fh-admin-sidebar nav[aria-label="Administration"] > section > p {
  margin: 0.9rem 0 0.45rem;
  color: #7f8b99 !important;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fh-admin-sidebar nav[aria-label="Administration"] a {
  min-height: 2.55rem;
  border-radius: 0.65rem !important;
  transition: color 140ms ease, background-color 140ms ease;
}

.fh-admin-sidebar nav[aria-label="Administration"] a[data-status="active"],
.fh-admin-sidebar nav[aria-label="Administration"] a[aria-current="page"] {
  color: #ff9b55 !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (min-width: 1280px) {
  .fh-admin-sidebar[data-admin-sidebar-collapsed="true"] nav[aria-label="Administration"] {
    align-items: center;
    padding-inline: 0.45rem;
  }

  .fh-admin-sidebar[data-admin-sidebar-collapsed="true"] nav[aria-label="Administration"] > section > p { display: none; }
  .fh-admin-sidebar[data-admin-sidebar-collapsed="true"] nav[aria-label="Administration"] a {
    width: 2.75rem;
    justify-content: center;
    gap: 0;
    margin-inline: 0;
    padding-inline: 0.5rem !important;
    box-shadow: none !important;
  }
  .fh-admin-sidebar[data-admin-sidebar-collapsed="true"] nav[aria-label="Administration"] .fh-admin-compact-label { display: none; }
  .fh-admin-sidebar[data-admin-sidebar-collapsed="true"] nav[aria-label="Administration"] .contents { display: none; }
}

main#main .fh-console-toolbar,
main#main .fh-console-panel,
main#main .fh-server-overview-hero,
main#main .fh-server-chart-card,
main#main .fh-server-recent-activity {
  border-color: var(--fh-line) !important;
  border-radius: var(--fh-card-radius) !important;
  background-color: var(--fh-surface) !important;
}

main#main .fh-server-terminal-viewport,
main#main .xterm-viewport,
main#main .xterm-screen { background-color: #090d12 !important; }
main#main .fh-server-terminal-viewport {
  border-color: #28313d !important;
  border-radius: 0.72rem 0.72rem 0 0 !important;
  background-color: #090d12 !important;
}

main#main [data-responsive-table] table thead { background: #171e28; }
main#main [data-responsive-table] tbody tr { border-color: var(--fh-line); }
main#main [data-responsive-table] tbody tr:hover { border-color: rgb(232 117 54 / 35%); }

::selection { color: #1b120b; background: #ffb36b; }

@media (max-width: 1279px) {
  .fh-admin-sidebar { width: 100% !important; }
  .fh-admin-sidebar > div:first-child { display: none !important; }
}

@media (max-width: 700px) {
  body > div:has(#logo) header { backdrop-filter: none; }
  main#main .fh-dashboard-welcome { min-height: 8.5rem !important; }
  main#main .fh-dashboard-welcome > div:last-child { padding-inline: 1.1rem !important; }
  main#main .fh-server-list-header { padding: 1rem !important; }
  main#main .fh-server-list-header h2 { font-size: 1.35rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* Active navigation uses Flame orange text without a filled tab or marker. */
body > div:has(#logo) header nav > a[data-status="active"],
body > div:has(#logo) header nav > a[aria-current="page"],
main#main [class~="side-navigation:w-sidebar"] a[data-status="active"],
nav[aria-label="Administration"] a[aria-current="page"],
nav[aria-label="Administration"] a[data-status="active"],
.fh-admin-sidebar nav[aria-label="Administration"] a[aria-current="page"],
.fh-admin-sidebar nav[aria-label="Administration"] a[data-status="active"],
.fh-account-navigation > div > a[data-status="active"],
.fh-account-navigation > div > div[data-status="active"],
.fh-server-navigation > div > a[data-status="active"],
.fh-server-navigation > div > div[data-status="active"],
main#main .fh-server-navigation .fh-server-nav-toggle[data-active],
main#main .fh-server-navigation a.fh-server-nav-link[data-status="active"] {
  color: #ff9b55 !important;
  background: transparent !important;
  box-shadow: none !important;
}

main#main [class~="side-navigation:w-sidebar"] a[data-status="active"]::before { display: none !important; }

main#main .fh-admin-heading-card > header,
main#main .fh-admin-heading-card > header > div,
main#main .fh-admin-heading-card > header h1,
main#main .fh-admin-heading-card > header p {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}