/*
 * Evolve Panel X v0.6.5 — Shadcn-inspired SaaS interface layer
 * This layer intentionally sits after the legacy stylesheet and theme stylesheet.
 * It preserves the PHP application while applying shared shadcn-style design tokens
 * and component primitives across the client portal, server workspace and admin area.
 */

:root {
  --background: var(--bg, #07090e);
  --foreground: #f8fafc;
  --card: #0e1219;
  --card-foreground: #f8fafc;
  --popover: #0c1017;
  --popover-foreground: #f8fafc;
  --primary: var(--accent, #3b82f6);
  --primary-hover: color-mix(in srgb, var(--primary) 86%, white 14%);
  --primary-foreground: #ffffff;
  --secondary: #171c25;
  --secondary-foreground: #eef2f7;
  --muted-surface: #111620;
  --muted-foreground: #8d98aa;
  --accent-surface: color-mix(in srgb, var(--primary) 12%, #111720);
  --accent-foreground: color-mix(in srgb, var(--primary) 55%, white 45%);
  --destructive: #ef5d71;
  --destructive-foreground: #fff7f8;
  --success: #2dd48a;
  --warning: #f5be58;
  --info: #65a8ff;
  --border-soft: rgba(148, 163, 184, .12);
  --border-strong: rgba(148, 163, 184, .22);
  --input: #111720;
  --ring: color-mix(in srgb, var(--primary) 68%, white 32%);
  --radius-xs: 7px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-md: 0 14px 35px rgba(0, 0, 0, .22);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, .42);
  --sidebar-width: 286px;
  --sidebar-collapsed-width: 82px;
  --topbar-height: 72px;
  --content-width: 1540px;
}

html:not(.dark) {
  color-scheme: light;
  --background: #f4f7fb;
  --foreground: #111827;
  --card: #ffffff;
  --card-foreground: #111827;
  --popover: #ffffff;
  --popover-foreground: #111827;
  --secondary: #eef2f7;
  --secondary-foreground: #111827;
  --muted-surface: #f1f5f9;
  --muted-foreground: #64748b;
  --accent-surface: color-mix(in srgb, var(--primary) 9%, white);
  --border-soft: rgba(15, 23, 42, .10);
  --border-strong: rgba(15, 23, 42, .18);
  --input: #ffffff;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .08);
  --shadow-md: 0 14px 35px rgba(15, 23, 42, .10);
  --shadow-lg: 0 28px 80px rgba(15, 23, 42, .16);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body::selection { background: color-mix(in srgb, var(--primary) 35%, transparent); color: white; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { text-underline-offset: 3px; }
[hidden] { display: none !important; }
.ui-icon { width: 18px; height: 18px; flex: 0 0 auto; }
.mobile-only { display: none !important; }

.app-backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 84% -12%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 68%),
    radial-gradient(700px 460px at 12% 100%, color-mix(in srgb, var(--accent-2, var(--primary)) 8%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--background) 90%, #101827 10%), var(--background));
}
.app-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .32;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}
html:not(.dark) .app-backdrop {
  background: radial-gradient(900px 520px at 84% -12%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 68%), #f4f7fb;
}

/* Application shell */
.saas-shell { min-height: 100vh; }
.shell-grid {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns .22s ease;
}
.workspace-sidebar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--background) 88%, #101622 12%);
  box-shadow: 12px 0 48px rgba(0,0,0,.12);
  transition: width .22s ease, transform .22s ease;
}
html:not(.dark) .workspace-sidebar { background: rgba(255,255,255,.92); backdrop-filter: blur(18px); }
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--topbar-height);
  padding: 14px 14px 12px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.product-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 11px;
  color: var(--foreground);
  text-decoration: none;
}
.product-mark {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border-soft));
  border-radius: 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 24%, #151a24), #0a0e14);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 22px color-mix(in srgb, var(--primary) 14%, transparent);
}
.product-mark img { width: 27px; height: 27px; object-fit: contain; }
.product-copy { min-width: 0; }
.product-copy strong, .product-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-copy strong { font-size: 15px; letter-spacing: -.015em; }
.product-copy small { margin-top: 1px; color: var(--muted-foreground); font-size: 10px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.workspace-switcher {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  margin: 14px 14px 4px;
  padding: 11px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--card) 84%, var(--primary) 5%);
  box-shadow: var(--shadow-sm);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.workspace-switcher:not(.static):hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--primary) 42%, var(--border-soft)); background: var(--accent-surface); }
.workspace-switcher-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--accent-foreground);
  border-radius: 11px;
  background: color-mix(in srgb, var(--primary) 16%, var(--secondary));
}
.workspace-switcher-icon.admin { color: #c4b5fd; background: rgba(124,58,237,.14); }
.workspace-switcher small, .workspace-switcher strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-switcher small { color: var(--muted-foreground); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.workspace-switcher strong { margin-top: 2px; font-size: 13px; }
.workspace-switcher-chevron { color: var(--muted-foreground); }
.sidebar-server-summary {
  display: grid;
  gap: 8px;
  margin: 8px 16px 2px;
  padding: 10px 12px;
  border-left: 2px solid color-mix(in srgb, var(--primary) 70%, transparent);
  color: var(--muted-foreground);
}
.sidebar-server-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; }
.sidebar-server-summary code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: color-mix(in srgb, var(--foreground) 76%, var(--muted-foreground)); }
.sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 7px 10px 16px; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.nav-section { margin-top: 10px; }
.nav-section-label {
  padding: 10px 10px 7px;
  color: color-mix(in srgb, var(--muted-foreground) 82%, transparent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .115em;
  text-transform: uppercase;
}
.navigation { display: flex; flex-direction: column; gap: 3px; }
.nav-item {
  position: relative;
  display: grid;
  grid-template-columns: 21px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 9px 11px;
  border-radius: 11px;
  color: #aeb7c5;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: color .15s ease, background .15s ease, transform .15s ease;
}
.nav-item:hover { color: var(--foreground); background: rgba(148,163,184,.075); }
.nav-item.active {
  color: var(--foreground);
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 16%, transparent), rgba(148,163,184,.055));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent);
}
.nav-item.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 99px;
  background: var(--primary);
  box-shadow: 0 0 14px color-mix(in srgb, var(--primary) 58%, transparent);
}
.nav-icon { width: 18px; height: 18px; color: #7e8999; }
.nav-item:hover .nav-icon, .nav-item.active .nav-icon { color: var(--accent-foreground); }
.nav-item b {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  min-height: 20px;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border-soft));
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--accent-foreground);
  font-size: 10px;
}
.sidebar-support-card {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 11px;
  margin: 18px 5px 0;
  padding: 13px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 8%, var(--card)), var(--card));
}
.sidebar-support-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--accent-foreground); background: color-mix(in srgb, var(--primary) 15%, var(--secondary)); }
.sidebar-support-card strong, .sidebar-support-card p { display: block; margin: 0; }
.sidebar-support-card p { margin-top: 2px; color: var(--muted-foreground); font-size: 10px; }
.sidebar-support-card a { display: inline-block; margin-top: 8px; color: var(--accent-foreground); font-size: 11px; font-weight: 750; }
.sidebar-footer-simple {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 12px 16px;
  border-top: 1px solid var(--border-soft);
  color: var(--muted-foreground);
  font-size: 10px;
}
.system-indicator { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.system-indicator i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px color-mix(in srgb, var(--success) 65%, transparent); }
.sidebar-overlay { display: none; }

.workspace-main { display: flex; min-width: 0; min-height: 100vh; flex-direction: column; }
.workspace-topbar {
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--topbar-height);
  padding: 11px clamp(18px, 2.4vw, 34px);
  border-bottom: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--background) 78%, transparent);
  backdrop-filter: blur(20px) saturate(130%);
}
.topbar-left, .topbar-actions, .page-context-title { display: flex; align-items: center; }
.topbar-left { min-width: 0; gap: 12px; }
.topbar-actions { justify-content: flex-end; gap: 8px; }
.page-context { min-width: 0; }
.page-context .eyebrow { margin-bottom: 2px; }
.page-context-title { min-width: 0; gap: 10px; }
.page-context-title h1 { overflow: hidden; margin: 0; color: var(--foreground); font-size: 16px; font-weight: 760; letter-spacing: -.018em; text-overflow: ellipsis; white-space: nowrap; }
.context-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  color: var(--muted-foreground);
  background: var(--secondary);
  font-size: 10px;
  font-weight: 700;
}
.admin-chip { color: #c4b5fd; border-color: rgba(139,92,246,.25); background: rgba(139,92,246,.10); }
.command-trigger {
  display: flex;
  align-items: center;
  gap: 9px;
  width: clamp(190px, 20vw, 300px);
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: color-mix(in srgb, var(--card) 86%, transparent);
  color: var(--muted-foreground);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, background .15s ease;
}
.command-trigger:hover { border-color: var(--border-strong); background: var(--card); }
.command-trigger span { flex: 1; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 25px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: color-mix(in srgb, var(--secondary) 84%, black 16%);
  color: var(--muted-foreground);
  font-family: inherit;
  font-size: 9px;
  font-weight: 750;
  box-shadow: inset 0 -1px rgba(255,255,255,.04);
}
.notification-button { position: relative; }
.notification-dot { position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border: 1px solid var(--background); border-radius: 50%; background: var(--primary); }
.workspace-content { flex: 1; width: 100%; }
.content-container {
  width: min(100%, var(--content-width));
  min-height: calc(100vh - var(--topbar-height) - 55px);
  margin: 0 auto;
  padding: clamp(22px, 2.8vw, 40px);
}

/* Collapsed desktop navigation */
body.sidebar-collapsed .shell-grid { grid-template-columns: var(--sidebar-collapsed-width) minmax(0,1fr); }
body.sidebar-collapsed .workspace-sidebar { width: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .product-copy,
body.sidebar-collapsed .workspace-switcher span,
body.sidebar-collapsed .workspace-switcher-chevron,
body.sidebar-collapsed .sidebar-server-summary,
body.sidebar-collapsed .nav-section-label,
body.sidebar-collapsed .nav-item span,
body.sidebar-collapsed .nav-item b,
body.sidebar-collapsed .sidebar-support-card,
body.sidebar-collapsed .sidebar-footer-simple .system-indicator { display: none; }
body.sidebar-collapsed .sidebar-header { justify-content: center; padding-inline: 10px; }
body.sidebar-collapsed .product-brand { gap: 0; }
body.sidebar-collapsed .sidebar-collapse-button { position: absolute; right: 7px; top: 20px; width: 28px; height: 28px; opacity: 0; }
body.sidebar-collapsed .workspace-sidebar:hover .sidebar-collapse-button { opacity: 1; }
body.sidebar-collapsed .workspace-switcher { grid-template-columns: 1fr; margin-inline: 13px; padding: 8px; }
body.sidebar-collapsed .workspace-switcher-icon { margin: auto; }
body.sidebar-collapsed .nav-item { grid-template-columns: 1fr; justify-items: center; padding-inline: 8px; }
body.sidebar-collapsed .nav-item.active::before { left: -2px; }
body.sidebar-collapsed .sidebar-footer-simple { justify-content: center; }

/* Shadcn-style primitive controls */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--secondary-foreground);
  background: var(--secondary);
  font-size: 13px;
  font-weight: 720;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .14s ease, border-color .14s ease, background .14s ease, color .14s ease, opacity .14s ease;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:active:not(:disabled) { transform: translateY(0); }
.button.primary { color: var(--primary-foreground); background: linear-gradient(180deg, var(--primary-hover), var(--primary)); border-color: color-mix(in srgb, var(--primary) 78%, white 22%); box-shadow: 0 9px 24px color-mix(in srgb, var(--primary) 20%, transparent), inset 0 1px rgba(255,255,255,.16); }
.button.primary:hover:not(:disabled) { filter: brightness(1.05); }
.button.ghost { border-color: var(--border-soft); color: var(--secondary-foreground); background: color-mix(in srgb, var(--secondary) 78%, transparent); }
.button.ghost:hover:not(:disabled) { border-color: var(--border-strong); background: color-mix(in srgb, var(--secondary) 96%, white 4%); }
.button.danger { color: var(--destructive-foreground); background: linear-gradient(180deg, color-mix(in srgb, var(--destructive) 85%, white 15%), var(--destructive)); border-color: color-mix(in srgb, var(--destructive) 75%, white 25%); }
.button.compact { min-height: 34px; padding: 7px 11px; font-size: 11px; border-radius: 9px; }
.button.full { width: 100%; }
.button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.button-row, .header-actions, .power-row, .top-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted-foreground);
  background: transparent;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.icon-button:hover { color: var(--foreground); border-color: var(--border-soft); background: var(--secondary); }
.icon-button:focus-visible, .button:focus-visible, .nav-item:focus-visible, a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.theme-icon-sun { display: none; }
html:not(.dark) .theme-icon-sun { display: block; }
html:not(.dark) .theme-icon-moon { display: none; }

/* Typography and page headings */
.eyebrow { display: block; color: var(--accent-foreground); font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.page-header > div:first-child { min-width: 0; }
.page-header h1, .client-hero h1, .server-console-header h1 {
  margin: 5px 0 7px;
  color: var(--foreground);
  font-size: clamp(27px, 3vw, 38px);
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: -.045em;
}
.page-header p, .client-hero p, .server-console-header p { max-width: 760px; margin: 0; color: var(--muted-foreground); }
.muted { color: var(--muted-foreground) !important; }
.danger-text { color: #fb7185 !important; }

/* Cards, metrics and data surfaces */
.card, .metric-card, .server-live-card, .server-identity-card, .pricing-card, .node-card, .plugin-card, .commission-card, .export-card {
  border: 1px solid var(--border-soft);
  background: linear-gradient(145deg, color-mix(in srgb, var(--card) 96%, white 1.5%), var(--card));
  box-shadow: var(--shadow-sm);
}
.card {
  padding: clamp(18px, 2vw, 24px);
  border-radius: var(--radius-lg);
}
.card + .card { margin-top: 18px; }
.card:hover { border-color: color-mix(in srgb, var(--border-strong) 88%, var(--primary) 12%); }
.card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.card-heading h2, .card h2, .section-title h2 { margin: 0 0 4px; font-size: 16px; font-weight: 750; letter-spacing: -.018em; }
.card-heading p, .card > p { margin: 0; color: var(--muted-foreground); }
.card-heading > a { color: var(--accent-foreground); font-size: 12px; font-weight: 700; }
.metric-grid { display: grid; gap: 14px; margin-bottom: 18px; }
.metric-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.metric-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.metric-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.metric-card { position: relative; min-width: 0; padding: 18px; overflow: hidden; border-radius: var(--radius-md); }
.metric-card::after { content: ""; position: absolute; right: -28px; bottom: -42px; width: 110px; height: 110px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 8%, transparent); filter: blur(2px); }
.metric-card span, .metric-card small { position: relative; z-index: 1; display: block; color: var(--muted-foreground); }
.metric-card span { font-size: 11px; font-weight: 680; }
.metric-card strong { position: relative; z-index: 1; display: block; margin: 7px 0 3px; overflow: hidden; color: var(--foreground); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.12; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.metric-card small { font-size: 10px; }
.metric-card small a { color: inherit; }
.content-grid { display: grid; gap: 18px; margin-bottom: 18px; min-width: 0; }
.content-grid > *, .billing-admin-grid > *, .card { min-width: 0; max-width: 100%; }
.content-grid.two { grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr); }
.content-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.content-grid.narrow-wide { grid-template-columns: minmax(260px,.72fr) minmax(0,1.5fr); }
.stack { display: flex; flex-direction: column; gap: 18px; }
.stack .card { margin: 0; }

/* Client dashboard */
.client-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 188px;
  margin-bottom: 18px;
  padding: clamp(26px, 4vw, 42px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border-soft));
  border-radius: var(--radius-xl);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--primary) 13%, var(--card)), color-mix(in srgb, var(--card) 96%, transparent) 52%),
    var(--card);
  box-shadow: var(--shadow-md);
}
.client-hero::before { content: ""; position: absolute; inset: auto -90px -150px auto; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 20%, transparent), transparent 68%); }
.client-hero > * { position: relative; z-index: 1; }
.client-hero h1 { font-size: clamp(31px, 4vw, 45px); }
.client-server-section { margin-bottom: 18px; }
.server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 18px;
}
.server-grid.large { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
.server-tile {
  --server-accent: var(--primary);
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 306px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--server-accent) 18%, var(--border-soft));
  border-radius: 18px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--card) 97%, white 1%), color-mix(in srgb, var(--card) 96%, black 4%));
  color: var(--foreground);
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.025), 0 18px 45px rgba(0,0,0,.14);
  isolation: isolate;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.server-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(135deg, color-mix(in srgb, var(--server-accent) 7%, transparent), transparent 48%);
  opacity: .75;
}
.server-tile:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--server-accent) 48%, var(--border-soft));
  box-shadow: 0 1px 0 rgba(255,255,255,.045), 0 24px 58px rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb, var(--server-accent) 8%, transparent);
}
.server-tile:focus-visible {
  outline: 0;
  border-color: var(--server-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--server-accent) 24%, transparent), 0 24px 58px rgba(0,0,0,.28);
}
.server-tile--minecraft,
.server-tile--minecraft-java,
.server-tile--paper,
.server-tile--purpur,
.server-tile--forge,
.server-tile--neoforge { --server-accent: #4ade80; }
.server-tile--fivem,
.server-tile--gta,
.server-tile--gta-v { --server-accent: #fb923c; }
.server-tile--discord,
.server-tile--discord-bot,
.server-tile--nodejs,
.server-tile--javascript { --server-accent: #818cf8; }
.server-tile--python { --server-accent: #facc15; }
.server-tile--rust { --server-accent: #f87171; }
.server-tile--steam,
.server-tile--steamcmd { --server-accent: #38bdf8; }
.server-tile-visual {
  position: relative;
  display: flex;
  min-height: 116px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 17px;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--server-accent) 13%, var(--border-soft));
  background:
    radial-gradient(circle at 83% 12%, color-mix(in srgb, var(--server-accent) 30%, transparent), transparent 31%),
    linear-gradient(125deg, color-mix(in srgb, var(--server-accent) 20%, #121722), #0d1017 68%);
}
.server-visual-grid {
  position: absolute;
  inset: 0;
  opacity: .13;
  background-image:
    linear-gradient(color-mix(in srgb, var(--server-accent) 50%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--server-accent) 50%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to right, transparent, black 35%, black);
}
.server-visual-orbit {
  position: absolute;
  right: -44px;
  bottom: -72px;
  width: 180px;
  height: 180px;
  border: 1px solid color-mix(in srgb, var(--server-accent) 22%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 42px color-mix(in srgb, var(--server-accent) 8%, transparent), 0 0 45px color-mix(in srgb, var(--server-accent) 10%, transparent);
}
.server-game-mark {
  position: relative;
  z-index: 2;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--server-accent) 32%, rgba(255,255,255,.08));
  border-radius: 17px;
  background: color-mix(in srgb, #090b10 72%, var(--server-accent) 12%);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.24);
  backdrop-filter: blur(12px);
}
.server-game-mark span {
  align-self: end;
  color: color-mix(in srgb, var(--server-accent) 70%, white 30%);
  font-size: 21px;
  font-weight: 950;
  letter-spacing: -.04em;
  line-height: 1;
}
.server-game-mark small {
  align-self: start;
  max-width: 56px;
  margin-top: 4px;
  overflow: hidden;
  color: color-mix(in srgb, var(--foreground) 62%, var(--muted-foreground));
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.server-card-status { position: relative; z-index: 2; box-shadow: 0 8px 22px rgba(0,0,0,.18); backdrop-filter: blur(10px); }
.server-tile-body {
  display: flex;
  min-height: 188px;
  flex: 1;
  flex-direction: column;
  padding: 17px 18px 15px;
}
.server-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; }
.server-title-copy { min-width: 0; }
.server-kicker {
  display: block;
  margin-bottom: 4px;
  overflow: hidden;
  color: color-mix(in srgb, var(--server-accent) 68%, var(--muted-foreground));
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .075em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.server-title h3 {
  overflow: hidden;
  margin: 0;
  color: var(--foreground);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-card-arrow {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  color: var(--muted-foreground);
  background: color-mix(in srgb, var(--muted-surface) 86%, transparent);
  transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease;
}
.server-tile:hover .server-card-arrow {
  transform: translate(2px,-2px);
  border-color: color-mix(in srgb, var(--server-accent) 36%, var(--border-soft));
  color: color-mix(in srgb, var(--server-accent) 72%, white 28%);
  background: color-mix(in srgb, var(--server-accent) 10%, var(--muted-surface));
}
.server-description {
  display: -webkit-box;
  min-height: 32px;
  margin: 8px 0 14px;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 11px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.server-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
}
.server-resource-grid > span {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  grid-template-areas: "icon label" "icon value";
  column-gap: 7px;
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid var(--border-soft);
  border-radius: 11px;
  background: color-mix(in srgb, var(--muted-surface) 84%, transparent);
}
.server-resource-icon { grid-area: icon; align-self: center; color: color-mix(in srgb, var(--server-accent) 65%, var(--muted-foreground)); }
.server-resource-grid small {
  grid-area: label;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.server-resource-grid strong {
  grid-area: value;
  overflow: hidden;
  margin-top: 3px;
  color: color-mix(in srgb, var(--foreground) 90%, var(--muted-foreground));
  font-size: 11px;
  font-weight: 780;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.server-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  color: var(--muted-foreground);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.server-card-id,
.server-open-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.server-card-id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-open-label { color: color-mix(in srgb, var(--foreground) 72%, var(--muted-foreground)); transition: color .2s ease; }
.server-tile:hover .server-open-label { color: color-mix(in srgb, var(--server-accent) 72%, white 28%); }
.empty-inline, .empty-state { display: grid; place-items: center; min-height: 180px; padding: 36px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--muted-foreground); text-align: center; }
.empty-inline h3, .empty-state h1, .empty-state h2 { margin: 0 0 6px; color: var(--foreground); }
.empty-inline p, .empty-state p { margin: 0 0 14px; }
.payment-list { display: grid; gap: 3px; }
.payment-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 3px; border-bottom: 1px solid var(--border-soft); }
.payment-row:last-child { border-bottom: 0; }
.payment-row strong, .payment-row small { display: block; }
.payment-row small { margin-top: 2px; color: var(--muted-foreground); font-size: 10px; }

/* Badges and alerts */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted-foreground);
  background: var(--secondary);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.status i { display: none; }
.status.large { padding: 6px 10px; font-size: 10px; }
.status.healthy, .status.running, .status.active, .status.paid, .status.success, .status.enabled { color: #59dda0; border-color: rgba(45,212,138,.18); background: rgba(45,212,138,.09); }
.status.offline, .status.exited, .status.disabled, .status.suspended, .status.failed, .status.install_failed { color: #ff8797; border-color: rgba(239,93,113,.18); background: rgba(239,93,113,.09); }
.status.installing, .status.created, .status.pending, .status.awaiting_payment, .status.paid_pending_provision, .status.unknown { color: #ffd07a; border-color: rgba(245,190,88,.18); background: rgba(245,190,88,.09); }
.flash, .notice {
  padding: 13px 15px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: var(--muted-surface);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}
.flash { margin-bottom: 16px; white-space: pre-line; }
.flash strong { display: block; margin-bottom: 3px; }
.flash p { margin: 0; }
.flash.error { border-color: rgba(239,93,113,.28); background: rgba(239,93,113,.09); color: #ffc1c9; }
.flash.success { border-color: rgba(45,212,138,.26); background: rgba(45,212,138,.08); color: #a7f3ce; }
.flash.info { border-color: rgba(101,168,255,.25); background: rgba(101,168,255,.08); color: #c9e1ff; }
.notice strong { display: block; margin-bottom: 3px; }
.notice p { margin: 0; color: var(--muted-foreground); }

/* Forms */
.form-stack { display: flex; flex-direction: column; gap: 15px; }
.form-grid { display: grid; gap: 14px; }
.form-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.form-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
label { display: flex; flex-direction: column; gap: 7px; color: color-mix(in srgb, var(--foreground) 80%, var(--muted-foreground)); font-size: 11px; font-weight: 680; }
input, select, textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  outline: none;
  color: var(--foreground);
  background: var(--input);
  box-shadow: inset 0 1px rgba(255,255,255,.02);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
textarea { min-height: 110px; resize: vertical; }
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted-foreground) 70%, transparent); }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--border-strong) 75%, var(--primary) 25%); }
input:focus, select:focus, textarea:focus { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 17%, transparent); }
select { appearance: auto; }
.check { flex-direction: row; align-items: center; gap: 9px; }
.check input { width: 17px; min-height: 17px; height: 17px; accent-color: var(--primary); }
.inline-form { display: flex; align-items: center; gap: 8px; }
.inline-form input, .inline-form select { min-width: 150px; }
.form-actions-row, .form-actions { display: flex; justify-content: flex-end; gap: 9px; }
.field-hint { display: block; color: var(--muted-foreground); font-size: 10px; font-weight: 500; }
.separator { height: 1px; background: var(--border-soft); }
.code-editor, pre, code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.code-editor { min-height: 460px; border-radius: 12px; line-height: 1.6; tab-size: 4; }

/* Tables */
.table-wrap { overflow: auto; border: 1px solid var(--border-soft); border-radius: 13px; background: color-mix(in srgb, var(--card) 96%, transparent); }
.table-wrap table { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; }
th, td { padding: 12px 13px; border-bottom: 1px solid var(--border-soft); text-align: left; vertical-align: middle; }
th { position: sticky; top: 0; z-index: 1; color: var(--muted-foreground); background: color-mix(in srgb, var(--card) 94%, black 6%); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
tbody tr { transition: background .13s ease; }
tbody tr:hover { background: rgba(148,163,184,.035); }
tbody tr:last-child td { border-bottom: 0; }
td { color: color-mix(in srgb, var(--foreground) 88%, var(--muted-foreground)); }
td small, .strong-link small { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: 10px; }
.strong-link { color: var(--foreground); font-weight: 720; text-decoration: none; }
.strong-link:hover { color: var(--accent-foreground); }
.key-values { display: grid; }
.key-values > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.key-values > div:last-child { border-bottom: 0; }
.key-values span { color: var(--muted-foreground); }
.key-values strong { max-width: 66%; text-align: right; word-break: break-word; }

/* Tabs */
.tabbar, .tab-nav, .settings-tabs, .account-tabs, .billing-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: color-mix(in srgb, var(--secondary) 68%, transparent);
  scrollbar-width: none;
}
.tabbar::-webkit-scrollbar, .tab-nav::-webkit-scrollbar, .settings-tabs::-webkit-scrollbar, .account-tabs::-webkit-scrollbar, .billing-tabs::-webkit-scrollbar { display:none; }
.tabbar a, .tab-nav a, .settings-tabs a, .account-tabs a, .billing-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 11px;
  border: 0;
  border-radius: 8px;
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.tabbar a:hover, .tab-nav a:hover, .settings-tabs a:hover, .account-tabs a:hover, .billing-tabs a:hover { color: var(--foreground); }
.tabbar a.active, .tab-nav a.active, .settings-tabs a.active, .account-tabs a.active, .billing-tabs a.active { color: var(--foreground); background: var(--card); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border-soft); }

/* Server control workspace */
.server-console-page { display: grid; gap: 18px; }
.server-console-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.server-console-header h1 { font-size: clamp(30px, 4vw, 42px); }
.server-identity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.server-identity-card { display: grid; gap: 7px; min-width: 0; padding: 16px 18px; border-radius: var(--radius-md); }
.server-identity-card > span, .server-identity-card small { color: var(--muted-foreground); font-size: 10px; }
.server-identity-card > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.server-identity-card strong, .server-identity-card code { overflow: hidden; color: var(--foreground); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.copy-button { flex: 0 0 auto; padding: 5px 8px; border: 1px solid var(--border-soft); border-radius: 7px; color: var(--muted-foreground); background: var(--secondary); font-size: 9px; font-weight: 800; cursor: pointer; }
.copy-button:hover { color: var(--foreground); border-color: color-mix(in srgb, var(--primary) 38%, var(--border-soft)); }
.server-power-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: color-mix(in srgb, var(--card) 95%, transparent); box-shadow: var(--shadow-sm); }
.server-power-toolbar form { display: inline-flex; }
.server-power-toolbar .power-start { color: #04150d; border-color: color-mix(in srgb, var(--success) 78%, white 22%); background: linear-gradient(180deg, color-mix(in srgb, var(--success) 86%, white 14%), var(--success)); }
.server-admin-power { margin-left: auto; }
.server-live-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.server-live-card { position: relative; min-width: 0; padding: 17px; overflow: hidden; border-radius: var(--radius-md); }
.server-live-card::after { content: ""; position: absolute; inset: auto -30px -50px auto; width: 120px; height: 120px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 8%, transparent); }
.server-live-card span, .server-live-card small, .server-live-card strong { position: relative; z-index: 1; display: block; }
.server-live-card span, .server-live-card small { color: var(--muted-foreground); font-size: 10px; }
.server-live-card strong { margin: 7px 0 3px; overflow: hidden; color: var(--foreground); font-size: 21px; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.console-card { overflow: hidden; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: #070a0f; box-shadow: var(--shadow-md); }
.server-console-card { padding: 0; }
.console-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; border-bottom: 1px solid rgba(148,163,184,.12); background: linear-gradient(180deg,#0d121a,#0a0e14); }
.console-title-row h2 { margin: 3px 0 0; font-size: 15px; }
.console-refresh-note { color: #6f7a8c; font-size: 9px; }
#server-console { min-height: 420px; max-height: 58vh; margin: 0; padding: 17px 19px; overflow: auto; border: 0; border-radius: 0; color: #d7e2f0; background: #05070b; font-size: 12px; line-height: 1.55; white-space: pre-wrap; scrollbar-width: thin; scrollbar-color: #293141 transparent; }
.console-command { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; padding: 12px; border-top: 1px solid rgba(148,163,184,.12); background: #090d13; }
.console-command input { border-color: rgba(148,163,184,.16); background: #0d121a; }
.timeline { display: grid; }
.timeline-item, .timeline-row { position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; padding: 10px 0; }
.timeline-item > span, .timeline-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 50%, transparent); }
.timeline-item:not(:last-child)::after, .timeline-row:not(:last-child)::after { content: ""; position: absolute; left: 3px; top: 24px; bottom: -5px; width: 1px; background: var(--border-soft); }
.timeline strong, .timeline p, .timeline small { display: block; margin: 0; }
.timeline p { margin-top: 2px; color: var(--muted-foreground); }
.timeline small { margin-top: 3px; color: color-mix(in srgb, var(--muted-foreground) 70%, transparent); font-size: 9px; }

/* File manager */
.upload-card { margin-bottom: 18px; }
.file-dropzone { display: grid; place-items: center; min-height: 150px; padding: 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--muted-foreground); background: color-mix(in srgb, var(--muted-surface) 74%, transparent); text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.file-dropzone strong { color: var(--foreground); font-size: 14px; }
.file-dropzone span { margin-top: 5px; font-size: 10px; }
.file-dropzone:hover, .file-dropzone.dragging { border-color: var(--primary); background: var(--accent-surface); }
.upload-progress { display: grid; gap: 8px; margin-top: 12px; }
.upload-progress > div { display: flex; justify-content: space-between; color: var(--muted-foreground); font-size: 10px; }
progress { width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 999px; background: var(--secondary); accent-color: var(--primary); }
progress::-webkit-progress-bar { background: var(--secondary); }
progress::-webkit-progress-value { border-radius: 999px; background: var(--primary); }
.upload-result { margin-top: 10px; padding: 10px 12px; border-radius: 9px; font-size: 10px; }
.upload-result.success { color: #a7f3ce; background: rgba(45,212,138,.08); }
.upload-result.error { color: #ffc1c9; background: rgba(239,93,113,.09); }
.file-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.file-list { overflow: hidden; border: 1px solid var(--border-soft); border-radius: 13px; }
.file-row { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--border-soft); background: color-mix(in srgb, var(--card) 96%, transparent); }
.file-row:last-child { border-bottom: 0; }
.file-row:hover { background: rgba(148,163,184,.035); }
.file-main { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 11px 13px; }
.file-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-main small { color: var(--muted-foreground); font-size: 9px; }
.file-icon { display: grid; place-items: center; color: var(--accent-foreground); }
.file-row form { padding-right: 8px; }
.padded { padding: 16px; }

/* Pricing and billing */
.store-category { margin-bottom: 30px; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(270px,1fr)); gap: 16px; }
.pricing-card { position: relative; display: flex; flex-direction: column; gap: 13px; min-width: 0; padding: 23px; overflow: hidden; border-radius: var(--radius-lg); }
.pricing-card.featured { border-color: color-mix(in srgb, var(--primary) 52%, var(--border-soft)); box-shadow: 0 20px 60px color-mix(in srgb, var(--primary) 12%, transparent); }
.pricing-card.featured::after { content: ""; position: absolute; inset: -120px -80px auto auto; width: 220px; height: 220px; border-radius: 50%; background: color-mix(in srgb, var(--primary) 14%, transparent); filter: blur(4px); }
.pricing-card > * { position: relative; z-index: 1; }
.pricing-card h2 { margin: 0; font-size: 20px; }
.pricing-card > p { min-height: 44px; margin: 0; color: var(--muted-foreground); }
.plan-ribbon { position: absolute; top: 13px; right: 13px; z-index: 2; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); border-radius: 999px; color: var(--accent-foreground); background: color-mix(in srgb, var(--primary) 12%, var(--card)); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.plan-price { display: flex; align-items: flex-end; gap: 6px; }
.plan-price strong { font-size: 31px; line-height: 1; letter-spacing: -.05em; }
.plan-price span { color: var(--muted-foreground); font-size: 10px; }
.pricing-card ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pricing-card li { position: relative; padding-left: 18px; color: color-mix(in srgb, var(--foreground) 82%, var(--muted-foreground)); font-size: 11px; }
.pricing-card li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 900; }
.stock-line { display: grid; gap: 6px; color: var(--muted-foreground); font-size: 9px; }
.gateway-picker, .check-grid, .billing-admin-grid, .export-grid, .plugin-grid, .node-grid { display: grid; gap: 14px; }
.gateway-picker, .check-grid { grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); }
.billing-admin-grid { grid-template-columns: minmax(0,1.4fr) minmax(320px,.7fr); }
.export-grid, .plugin-grid, .node-grid { grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); }
.gateway-card, .commission-card, .export-card, .plugin-card, .node-card { padding: 18px; border-radius: var(--radius-md); }
.gateway-row, .commission-card, .export-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.bank-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.bank-reference, .bank-amount { padding: 15px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--muted-surface); }

/* Account, settings and admin detail screens */
.account-settings-grid { align-items: start; }
.account-sidebar-card { position: sticky; top: calc(var(--topbar-height) + 18px); }
.profile-summary-chip { display: flex; align-items: center; gap: 11px; min-width: 220px; padding: 10px 13px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); background: var(--card); }
.profile-summary-chip strong, .profile-summary-chip small { display: block; }
.profile-summary-chip small { margin-top: 2px; color: var(--muted-foreground); font-size: 10px; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent); border-radius: 10px; color: white; background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 82%, white 18%), var(--primary)); font-weight: 850; box-shadow: inset 0 1px rgba(255,255,255,.16); }
.avatar.large { width: 44px; height: 44px; border-radius: 13px; }
.profile-avatar { width: 76px; height: 76px; border-radius: 22px; font-size: 27px; box-shadow: 0 18px 44px color-mix(in srgb, var(--primary) 20%, transparent); }
.account-identity-card { display: grid; justify-items: center; padding: 14px 8px 22px; text-align: center; }
.account-identity-card h2 { margin: 12px 0 2px; }
.account-identity-card p { margin: 0 0 12px; color: var(--muted-foreground); }
.preference-list { display: grid; gap: 9px; }
.preference-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 12px; background: color-mix(in srgb, var(--card) 96%, transparent); cursor: pointer; }
.preference-row:hover { border-color: var(--border-strong); }
.preference-row strong, .preference-row small { display: block; }
.preference-row small { margin-top: 2px; color: var(--muted-foreground); font-size: 10px; }
.preference-row input { width: 18px; min-height: 18px; height: 18px; accent-color: var(--primary); }
.integration-card { display: flex; flex-direction: column; gap: 16px; }
.integration-heading { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 13px; }
.integration-heading h2, .integration-heading p { margin: 0; }
.integration-heading p { margin-top: 2px; color: var(--muted-foreground); }
.integration-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent); border-radius: 14px; color: var(--accent-foreground); background: color-mix(in srgb, var(--primary) 12%, var(--secondary)); }
.theme-picker, .account-theme-picker { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 12px; }
.theme-option { padding: 11px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--card); cursor: pointer; }
.theme-option:hover { border-color: var(--border-strong); }
.theme-preview { height: 74px; margin-bottom: 9px; border-radius: 9px; background: linear-gradient(145deg,var(--primary),var(--card)); }
.details-panel { border: 1px solid var(--border-soft); border-radius: 12px; background: var(--card); }
.details-panel summary { padding: 13px 15px; cursor: pointer; font-weight: 700; }
.details-panel > div, .details-panel > form { padding: 0 15px 15px; }
.secret-box, .command-box { padding: 12px; border: 1px solid var(--border-soft); border-radius: 10px; color: color-mix(in srgb, var(--foreground) 80%, var(--muted-foreground)); background: #080b10; font-family: "SFMono-Regular", Consolas, monospace; word-break: break-all; }
.danger-zone { border-color: rgba(239,93,113,.24); background: linear-gradient(145deg,rgba(239,93,113,.06),var(--card)); }

/* Profile menu */
.profile-menu { position: relative; }
.profile-trigger-modern { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 3px 6px 3px 4px; border: 1px solid transparent; border-radius: 12px; color: var(--foreground); background: transparent; cursor: pointer; }
.profile-trigger-modern:hover, .profile-menu.open .profile-trigger-modern { border-color: var(--border-soft); background: var(--secondary); }
.profile-trigger-copy { min-width: 0; text-align: left; }
.profile-trigger-copy strong, .profile-trigger-copy small { display: block; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-trigger-copy strong { font-size: 11px; }
.profile-trigger-copy small { color: var(--muted-foreground); font-size: 9px; }
.profile-popover { position: absolute; z-index: 120; width: min(310px,calc(100vw - 28px)); padding: 8px; border: 1px solid var(--border-strong); border-radius: 15px; background: color-mix(in srgb, var(--popover) 96%, transparent); color: var(--popover-foreground); box-shadow: var(--shadow-lg); backdrop-filter: blur(22px); }
.profile-menu-right .profile-popover { right: 0; top: calc(100% + 10px); }
.profile-popover-head { display: grid; grid-template-columns: 38px minmax(0,1fr); align-items: center; gap: 10px; padding: 8px; }
.profile-popover-head strong, .profile-popover-head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-popover-head small { margin-top: 2px; color: var(--muted-foreground); font-size: 10px; }
.profile-popover-divider { height: 1px; margin: 6px 4px; background: var(--border-soft); }
.profile-menu-item { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 9px; width: 100%; padding: 10px; border: 0; border-radius: 10px; color: var(--foreground); background: transparent; text-align: left; text-decoration: none; cursor: pointer; }
.profile-menu-item:hover, .profile-menu-item:focus-visible { outline: 0; background: var(--secondary); }
.profile-menu-item > svg { color: var(--accent-foreground); }
.profile-menu-item strong, .profile-menu-item small { display: block; }
.profile-menu-item strong { font-size: 11px; }
.profile-menu-item small { margin-top: 1px; color: var(--muted-foreground); font-size: 9px; }
.profile-popover form { margin: 0; }

/* Command palette */
.command-palette { position: fixed; inset: 0; z-index: 200; display: grid; place-items: start center; padding: min(14vh,130px) 16px 16px; }
.command-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.58); backdrop-filter: blur(8px); }
.command-dialog { position: relative; width: min(620px,100%); overflow: hidden; border: 1px solid var(--border-strong); border-radius: 17px; background: var(--popover); box-shadow: var(--shadow-lg); }
.command-input-wrap { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); }
.command-input-wrap svg { color: var(--muted-foreground); }
.command-input-wrap input { min-height: 38px; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 14px; }
.command-results { display: grid; max-height: min(460px,60vh); padding: 8px; overflow-y: auto; }
.command-group-label { padding: 7px 9px; color: var(--muted-foreground); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.command-results > a { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; color: var(--foreground); text-decoration: none; }
.command-results > a:hover, .command-results > a.command-selected { background: var(--secondary); }
.command-results > a > svg { color: var(--accent-foreground); }
.command-results strong, .command-results small { display: block; }
.command-results strong { font-size: 11px; }
.command-results small { margin-top: 1px; color: var(--muted-foreground); font-size: 9px; }
.command-empty { padding: 28px; color: var(--muted-foreground); text-align: center; }

/* Footer */
.panel-footer, .modern-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-height: 55px;
  margin-top: auto;
  padding: 15px clamp(18px,2.4vw,34px);
  border-top: 1px solid var(--border-soft);
  color: var(--muted-foreground);
  background: color-mix(in srgb, var(--background) 85%, transparent);
  font-size: 9px;
}
.panel-footer > span:last-child { display: flex; align-items: center; gap: 10px; }
.panel-footer a:hover { color: var(--foreground); }
.panel-footer i { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }

/* Authentication */
.auth-body, .modern-auth { min-height: 100vh; background: var(--background); }
.auth-noise { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(760px 520px at 22% 20%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 72%), radial-gradient(700px 500px at 90% 86%, color-mix(in srgb, var(--accent-2,var(--primary)) 9%, transparent), transparent 70%); }
.auth-shell { position: relative; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(430px,.8fr); min-height: 100vh; }
.auth-showcase { display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: clamp(28px,4vw,58px); border-right: 1px solid var(--border-soft); }
.auth-product-brand, .auth-mobile-brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; text-decoration: none; }
.auth-product-brand strong, .auth-product-brand small { display: block; }
.auth-product-brand strong { font-size: 15px; }
.auth-product-brand small { color: var(--muted-foreground); font-size: 10px; }
.auth-showcase-content { width: min(720px,100%); margin: auto 0; padding: 60px 0; }
.auth-showcase-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border-soft)); border-radius: 999px; color: var(--accent-foreground); background: color-mix(in srgb, var(--primary) 9%, transparent); font-size: 10px; font-weight: 760; }
.auth-showcase-content h1 { max-width: 760px; margin: 22px 0 16px; font-size: clamp(42px,5vw,72px); line-height: .99; letter-spacing: -.065em; }
.auth-showcase-content > p { max-width: 640px; margin: 0; color: var(--muted-foreground); font-size: 15px; }
.auth-feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 34px; }
.auth-feature-grid article { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 11px; padding: 13px; border: 1px solid var(--border-soft); border-radius: 13px; background: color-mix(in srgb, var(--card) 74%, transparent); }
.auth-feature-grid article > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--accent-foreground); background: color-mix(in srgb, var(--primary) 12%, var(--secondary)); }
.auth-feature-grid strong, .auth-feature-grid p { display: block; margin: 0; }
.auth-feature-grid strong { font-size: 11px; }
.auth-feature-grid p { margin-top: 2px; color: var(--muted-foreground); font-size: 9px; }
.auth-trust-row { display: flex; gap: 20px; flex-wrap: wrap; color: var(--muted-foreground); font-size: 9px; }
.auth-trust-row span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.auth-trust-row i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px color-mix(in srgb,var(--success) 60%,transparent); }
.auth-form-column { display: flex; flex-direction: column; min-height: 100vh; padding: clamp(22px,3vw,40px); background: color-mix(in srgb, var(--background) 92%, black 8%); }
.auth-form-header { display: flex; align-items: center; justify-content: space-between; }
.auth-mobile-brand { display: none; }
.version-pill { padding: 4px 8px; border: 1px solid var(--border-soft); border-radius: 999px; color: var(--muted-foreground); background: var(--secondary); font-size: 9px; }
.auth-form-stage, .auth-stage { display: grid; place-items: center; flex: 1; width: 100%; }
.auth-card { width: min(430px,100%); padding: clamp(24px,4vw,36px); border: 1px solid var(--border-soft); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--card) 96%, transparent); box-shadow: var(--shadow-lg); }
.auth-title span { color: var(--accent-foreground); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.auth-title h2 { margin: 7px 0 5px; font-size: 28px; letter-spacing: -.04em; }
.auth-title p { margin: 0 0 22px; color: var(--muted-foreground); }
.auth-card form { display: flex; flex-direction: column; gap: 15px; }
.auth-link { margin: 18px 0 0; color: var(--muted-foreground); text-align: center; font-size: 10px; }
.auth-link a { color: var(--accent-foreground); font-weight: 750; }
.auth-form-footer { color: var(--muted-foreground); font-size: 9px; text-align: center; }

/* Legacy shell compatibility for plugin pages */
.app-shell { min-height: 100vh; background: var(--background); }
.sidebar { border-color: var(--border-soft); background: var(--card); }
.main-area, .content { background: transparent; }
.topbar { border-color: var(--border-soft); background: color-mix(in srgb,var(--background) 80%,transparent); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--border-strong) 80%,transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: color-mix(in srgb,var(--border-strong) 86%,transparent); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb,var(--muted-foreground) 46%,transparent); background-clip: padding-box; }

/* Responsive */
@media (max-width: 1180px) {
  .command-trigger { width: 42px; padding: 0; justify-content: center; }
  .command-trigger span, .command-trigger kbd { display: none; }
  .topbar-primary { display: none; }
  .metric-grid.four, .server-live-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .content-grid.two, .billing-admin-grid { grid-template-columns: 1fr; }
  .account-sidebar-card { position: static; }
}

@media (max-width: 860px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: inline-grid !important; }
  .shell-grid, body.sidebar-collapsed .shell-grid { display: block; }
  .workspace-sidebar, body.sidebar-collapsed .workspace-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(88vw,310px);
    transform: translateX(-103%);
    box-shadow: 30px 0 80px rgba(0,0,0,.52);
  }
  .workspace-sidebar.open { transform: translateX(0); }
  .sidebar-overlay { position: fixed; inset: 0; z-index: 55; display: block; pointer-events: none; opacity: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(4px); transition: opacity .2s ease; }
  .workspace-sidebar.open + .sidebar-overlay { pointer-events: auto; opacity: 1; }
  body.sidebar-collapsed .product-copy,
  body.sidebar-collapsed .workspace-switcher span,
  body.sidebar-collapsed .workspace-switcher-chevron,
  body.sidebar-collapsed .sidebar-server-summary,
  body.sidebar-collapsed .nav-section-label,
  body.sidebar-collapsed .nav-item span,
  body.sidebar-collapsed .nav-item b,
  body.sidebar-collapsed .sidebar-support-card,
  body.sidebar-collapsed .sidebar-footer-simple .system-indicator { display: revert; }
  body.sidebar-collapsed .workspace-switcher { grid-template-columns: 38px minmax(0,1fr) 18px; margin-inline: 14px; padding: 11px; }
  body.sidebar-collapsed .nav-item { grid-template-columns: 21px minmax(0,1fr) auto; justify-items: initial; padding-inline: 11px; }
  .workspace-topbar { min-height: 64px; padding: 9px 13px; }
  .page-context-title h1 { font-size: 14px; }
  .content-container { min-height: calc(100vh - 64px - 78px); padding: 18px 14px 28px; }
  .profile-trigger-modern { padding: 3px; }
  .client-hero { min-height: 0; align-items: flex-start; flex-direction: column; padding: 24px; }
  .client-hero .header-actions { width: 100%; }
  .client-hero .header-actions .button { flex: 1; }
  .page-header, .server-console-header { align-items: flex-start; flex-direction: column; }
  .page-header .header-actions { width: 100%; }
  .page-header .header-actions .button { flex: 1; }
  .form-grid.two, .form-grid.three, .server-identity-grid, .bank-grid { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: auto; }
  .inline-form { align-items: stretch; flex-direction: column; }
  .inline-form input, .inline-form select, .inline-form .button { width: 100%; min-width: 0; }
  .file-toolbar { justify-content: stretch; }
  .file-toolbar .inline-form { width: 100%; }
  .panel-footer { align-items: flex-start; flex-direction: column; gap: 5px; min-height: 72px; padding: 14px; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-showcase { display: none; }
  .auth-form-column { min-height: 100vh; padding: 18px; }
  .auth-mobile-brand { display: inline-flex; }
  .auth-form-header { padding-bottom: 22px; }
  .auth-card { padding: 24px; }
}

@media (max-width: 560px) {
  .metric-grid.four, .metric-grid.three, .metric-grid.two, .server-live-grid { grid-template-columns: 1fr; }
  .server-grid, .server-grid.large { grid-template-columns: 1fr; }
  .server-tile { grid-template-columns: 58px minmax(0,1fr); }
  .server-art { min-height: 58px; }
  .server-power-toolbar .button { min-width: 84px; flex: 1; }
  .server-admin-power { width: 100%; margin-left: 0; }
  .server-admin-power .button { width: 100%; }
  #server-console { min-height: 350px; max-height: 52vh; padding: 14px; font-size: 11px; }
  .console-command { grid-template-columns: 1fr; }
  .file-main { grid-template-columns: 28px minmax(0,1fr); }
  .file-main small { display: none; }
  .pricing-grid { grid-template-columns: 1fr; }
  .profile-menu-right .profile-popover { position: fixed; top: 70px; right: 12px; left: 12px; width: auto; }
  .command-palette { padding-top: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.client-sidebar .navigation>a[href="/admin/service-pack"]{display:none!important}

/* v0.6.5 — scalable administration workspace */
.admin-portal {
  --content-width: 1680px;
  --card: #0d1118;
  --muted-surface: #111721;
}
.admin-portal .app-backdrop {
  background:
    radial-gradient(1050px 560px at 82% -14%, rgba(82,117,255,.15), transparent 68%),
    radial-gradient(820px 520px at 8% 108%, rgba(124,58,237,.08), transparent 72%),
    linear-gradient(180deg,#080b11,#07090e 52%,#06080c);
}
.admin-portal .workspace-sidebar {
  border-right-color: rgba(148,163,184,.10);
  background: linear-gradient(180deg,rgba(11,15,22,.98),rgba(7,10,15,.99));
  box-shadow: 20px 0 70px rgba(0,0,0,.18);
}
.admin-portal .sidebar-header { background: rgba(255,255,255,.012); }
.admin-portal .workspace-switcher {
  border-color: rgba(139,92,246,.22);
  background: linear-gradient(145deg,rgba(139,92,246,.10),rgba(25,31,44,.58));
}
.admin-portal .nav-section {
  margin-top: 11px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 14px;
}
.admin-portal .nav-section:has(.nav-item.active) {
  border-color: rgba(148,163,184,.08);
  background: rgba(255,255,255,.018);
}
.admin-portal .nav-item { min-height: 40px; }
.admin-portal .workspace-topbar {
  border-bottom-color: rgba(148,163,184,.10);
  background: rgba(7,10,15,.78);
}
.admin-portal .content-container { padding-top: clamp(24px,2.4vw,36px); }
.admin-portal .modern-footer { border-top-color: rgba(148,163,184,.08); background: rgba(7,10,15,.52); }

.admin-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(330px,.65fr);
  gap: 24px;
  margin-bottom: 18px;
  padding: clamp(26px,3.5vw,44px);
  overflow: hidden;
  border: 1px solid rgba(111,136,255,.24);
  border-radius: 24px;
  background:
    linear-gradient(115deg,rgba(63,94,251,.16),rgba(17,22,32,.86) 43%,rgba(12,16,24,.96)),
    var(--card);
  box-shadow: 0 24px 68px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.04);
}
.admin-hero::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  right: -160px;
  top: -260px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(108,134,255,.27),transparent 68%);
  filter: blur(4px);
}
.admin-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg,black,transparent 75%);
}
.admin-hero > * { position: relative; z-index: 1; }
.admin-hero-copy { align-self: center; max-width: 820px; }
.admin-hero h1 {
  max-width: 760px;
  margin: 8px 0 10px;
  font-size: clamp(34px,4vw,54px);
  line-height: 1.02;
  letter-spacing: -.055em;
}
.admin-hero p { max-width: 720px; margin: 0; color: #9aa6b8; font-size: 14px; }
.admin-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.admin-status-panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(148,163,184,.13);
  border-radius: 18px;
  background: rgba(5,8,13,.60);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 1px rgba(255,255,255,.03);
}
.admin-status-head,.admin-status-foot,.admin-capacity-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.admin-status-head { margin-bottom: 18px; }
.admin-status-head small,.admin-status-foot,.admin-capacity-row span { color: var(--muted-foreground); font-size: 10px; }
.admin-capacity-row { margin: 11px 0 7px; }
.admin-capacity-row strong { font-size: 11px; }
.admin-status-panel progress,.admin-node-mini progress { width:100%; height:7px; overflow:hidden; border:0; border-radius:99px; background:#171d28; }
.admin-status-panel progress::-webkit-progress-bar,.admin-node-mini progress::-webkit-progress-bar { background:#171d28; }
.admin-status-panel progress::-webkit-progress-value,.admin-node-mini progress::-webkit-progress-value { border-radius:99px; background:linear-gradient(90deg,var(--primary),#8b5cf6); }
.admin-status-panel progress::-moz-progress-bar,.admin-node-mini progress::-moz-progress-bar { border-radius:99px; background:linear-gradient(90deg,var(--primary),#8b5cf6); }
.admin-status-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft); }

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.admin-metric-card {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) 20px;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 17px;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  color: var(--foreground);
  background: linear-gradient(145deg,rgba(19,25,36,.92),rgba(11,15,22,.96));
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.admin-metric-card::after { content:""; position:absolute; inset:auto -36px -48px auto; width:120px; height:120px; border-radius:50%; background:color-mix(in srgb,var(--primary) 10%,transparent); }
.admin-metric-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--primary) 35%,var(--border-soft)); box-shadow:var(--shadow-md); }
.admin-metric-card.attention { border-color:rgba(239,93,113,.28); }
.admin-metric-card.attention .admin-metric-icon { color:#ff91a0; background:rgba(239,93,113,.10); }
.admin-metric-icon { position:relative; z-index:1; display:grid; place-items:center; width:44px; height:44px; border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border-soft)); border-radius:13px; color:var(--accent-foreground); background:color-mix(in srgb,var(--primary) 11%,var(--secondary)); }
.admin-metric-card > div { position:relative; z-index:1; min-width:0; }
.admin-metric-card small,.admin-metric-card p { display:block; margin:0; color:var(--muted-foreground); }
.admin-metric-card small { font-size:10px; font-weight:700; }
.admin-metric-card strong { display:block; margin:4px 0 1px; overflow:hidden; font-size:24px; line-height:1.1; letter-spacing:-.035em; text-overflow:ellipsis; white-space:nowrap; }
.admin-metric-card p { font-size:9px; }
.metric-arrow { position:relative; z-index:1; color:#596476; }
.admin-metric-card:hover .metric-arrow { color:var(--accent-foreground); }

.admin-overview-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(340px,.7fr); gap:18px; margin-bottom:18px; }
.admin-overview-grid .card { margin:0; }
.table-wrap.borderless { border:0; border-radius:0; background:transparent; }
.table-wrap.borderless th { background:transparent; }
.admin-activity-list { display:grid; gap:3px; }
.admin-activity-list article { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--border-soft); }
.admin-activity-list article:last-child { border-bottom:0; }
.activity-icon { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--border-soft); border-radius:10px; color:var(--accent-foreground); background:var(--secondary); }
.activity-icon svg { width:15px; height:15px; }
.admin-activity-list strong,.admin-activity-list p { display:block; margin:0; }
.admin-activity-list strong { font-size:11px; text-transform:capitalize; }
.admin-activity-list p,.admin-activity-list time { color:var(--muted-foreground); font-size:9px; }
.admin-activity-list time { white-space:nowrap; }
.admin-node-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.admin-node-mini { padding:15px; border:1px solid var(--border-soft); border-radius:14px; background:color-mix(in srgb,var(--card) 96%,white 1%); }
.admin-node-mini-head { display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; margin-bottom:12px; }
.admin-node-symbol { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; color:var(--accent-foreground); background:var(--accent-surface); }
.admin-node-mini strong,.admin-node-mini small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-node-mini small { color:var(--muted-foreground); font-size:9px; }

.compact-metrics .metric-card { padding:15px 16px; }
.compact-metrics .metric-card strong { font-size:23px; }
.data-card { padding:0; overflow:hidden; }
.data-card > .card-heading { padding:20px 20px 0; }
.data-toolbar {
  display:grid;
  grid-template-columns:minmax(260px,1.8fr) repeat(3,minmax(130px,.65fr)) auto auto;
  align-items:end;
  gap:10px;
  padding:15px 18px;
  border-bottom:1px solid var(--border-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent);
}
.data-toolbar.compact-toolbar { grid-template-columns:minmax(220px,1.4fr) minmax(130px,.65fr) auto auto; padding:12px 0 16px; border-bottom:0; background:transparent; }
.data-toolbar > label { min-width:0; }
.data-toolbar > label > span { color:var(--muted-foreground); font-size:9px; text-transform:uppercase; letter-spacing:.07em; }
.data-search { position:relative; display:block; }
.data-search > svg { position:absolute; left:11px; top:50%; z-index:1; width:16px; height:16px; color:var(--muted-foreground); transform:translateY(-50%); pointer-events:none; }
.data-search input { padding-left:36px; }
.per-page-control { width:88px; }
.data-toolbar-actions { display:flex; align-items:center; gap:7px; padding-bottom:1px; }
.inline-control-form,.compact-search-form { display:flex; align-items:end; gap:10px; flex-wrap:wrap; }
.inline-control-form label { min-width:min(420px,100%); }
.compact-search-form .data-search { flex:1; min-width:220px; }
.data-table { border:0; border-radius:0; background:transparent; }
.data-table table { min-width:900px; }
.data-table th { top:0; background:#0d121a; }
.entity-cell { display:flex; align-items:center; gap:10px; min-width:0; }
.entity-cell > span:last-child { min-width:0; }
.entity-icon { display:grid; place-items:center; width:36px; height:36px; flex:0 0 auto; border:1px solid color-mix(in srgb,var(--primary) 24%,var(--border-soft)); border-radius:10px; color:var(--accent-foreground); background:color-mix(in srgb,var(--primary) 10%,var(--secondary)); font-size:10px; font-weight:900; }
.empty-compact { padding:22px; color:var(--muted-foreground); text-align:center; }
.data-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px; padding:10px 18px; border-top:1px solid var(--border-soft); color:var(--muted-foreground); font-size:10px; }
.pagination { display:flex; align-items:center; gap:5px; }
.pagination-button,.pagination-page { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:34px; height:34px; padding:0 10px; border:1px solid var(--border-soft); border-radius:9px; color:var(--muted-foreground); background:var(--secondary); font-size:10px; font-weight:720; text-decoration:none; }
.pagination-button svg { width:14px; height:14px; }
.pagination-button:hover,.pagination-page:hover { color:var(--foreground); border-color:var(--border-strong); }
.pagination-page.active { color:white; border-color:color-mix(in srgb,var(--primary) 72%,white 12%); background:var(--primary); }
.pagination-button.disabled { opacity:.4; cursor:not-allowed; }
.pagination-gap { min-width:22px; text-align:center; }
.action-code { padding:4px 7px; border:1px solid var(--border-soft); border-radius:6px; color:#b8c9ff; background:#0a0e15; }
.metadata-details { position:relative; }
.metadata-details summary { width:max-content; color:var(--accent-foreground); font-size:10px; font-weight:700; cursor:pointer; }
.metadata-details pre { max-width:520px; max-height:260px; margin:8px 0 0; padding:10px; overflow:auto; border:1px solid var(--border-soft); border-radius:9px; color:#c9d5e5; background:#070a0f; font-size:9px; white-space:pre-wrap; word-break:break-word; }

.admin-create-panel { margin-bottom:18px; border-color:color-mix(in srgb,var(--primary) 26%,var(--border-soft)); background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 5%,var(--card)),var(--card)); }
.user-directory { display:grid; }
.user-directory-row { border-bottom:1px solid var(--border-soft); }
.user-directory-row:last-child { border-bottom:0; }
.user-directory-row > summary { display:grid; grid-template-columns:minmax(250px,1.2fr) minmax(280px,1fr) auto 20px; align-items:center; gap:16px; padding:14px 18px; cursor:pointer; list-style:none; transition:background .14s ease; }
.user-directory-row > summary::-webkit-details-marker { display:none; }
.user-directory-row > summary:hover,.user-directory-row[open] > summary { background:rgba(148,163,184,.035); }
.user-directory-meta { display:flex; align-items:center; gap:14px; flex-wrap:wrap; color:var(--muted-foreground); font-size:10px; }
.user-directory-meta span:not(:last-child)::after { content:""; display:inline-block; width:3px; height:3px; margin-left:14px; border-radius:50%; background:#4b5565; vertical-align:middle; }
.row-chevron { color:var(--muted-foreground); transition:transform .16s ease; }
.user-directory-row[open] .row-chevron { transform:rotate(180deg); }
.user-editor { padding:18px; border-top:1px solid var(--border-soft); background:rgba(7,10,15,.54); }

.section-heading { margin-top:18px; padding-top:18px; border-top:1px solid var(--border-soft); }
.sync-card { margin-bottom:18px; }
.scalable-grid { grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); }
.scalable-list > article { border-radius:13px; }
.source-path { display:block; margin:8px 0 12px; overflow:hidden; color:var(--muted-foreground); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width: 1250px) {
  .admin-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-overview-grid { grid-template-columns:1fr; }
  .data-toolbar { grid-template-columns:minmax(240px,1.5fr) repeat(2,minmax(125px,.7fr)); auto; }
  .data-toolbar .per-page-control { width:auto; }
  .data-toolbar-actions { grid-column:auto; }
  .user-directory-row > summary { grid-template-columns:minmax(220px,1fr) minmax(220px,.8fr) auto 20px; }
}
@media (max-width: 980px) {
  .admin-hero { grid-template-columns:1fr; }
  .admin-status-panel { min-height:220px; }
  .data-toolbar,.data-toolbar.compact-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .data-toolbar .data-search { grid-column:1/-1; }
  .data-toolbar-actions { grid-column:1/-1; }
  .user-directory-row > summary { grid-template-columns:minmax(0,1fr) auto 20px; }
  .user-directory-meta { grid-column:1/-1; grid-row:2; }
}
@media (max-width: 680px) {
  .admin-hero { padding:22px; border-radius:18px; }
  .admin-hero h1 { font-size:34px; }
  .admin-metric-grid { grid-template-columns:1fr; }
  .data-toolbar,.data-toolbar.compact-toolbar { grid-template-columns:1fr; }
  .data-toolbar > *, .data-toolbar .data-search, .data-toolbar-actions { grid-column:auto; width:100%; }
  .data-toolbar-actions .button { flex:1; }
  .data-footer { align-items:flex-start; flex-direction:column; }
  .pagination { width:100%; overflow-x:auto; padding-bottom:2px; }
  .pagination-button span { display:none; }
  .user-directory-row > summary { grid-template-columns:minmax(0,1fr) auto 18px; padding:13px; }
  .user-directory-meta { gap:8px; }
  .admin-activity-list article { grid-template-columns:32px minmax(0,1fr); }
  .admin-activity-list time { grid-column:2; }
}

/* v0.6.5 — bounded server creation directories */
.selection-search-card { margin-bottom:18px; border-color:color-mix(in srgb,var(--primary) 22%,var(--border-soft)); background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 4%,var(--card)),var(--card)); }
.selection-toolbar { grid-template-columns:minmax(260px,1fr) minmax(260px,1fr) auto; padding-bottom:0; }
.selection-toolbar .data-toolbar-actions { align-self:end; }
.create-server-form > .card-heading { padding:0 0 18px; border-bottom:1px solid var(--border-soft); }
.create-server-form label > small { display:block; margin-top:6px; color:var(--muted-foreground); font-size:9px; }
@media (max-width:900px) { .selection-toolbar { grid-template-columns:1fr; } .selection-toolbar .data-toolbar-actions { width:100%; } }

/* v0.6.5 — premium client server cards */
@media (max-width: 520px) {
  .server-grid,
  .server-grid.large { grid-template-columns: 1fr; gap: 14px; }
  .server-tile { min-height: 294px; border-radius: 16px; }
  .server-tile-visual { min-height: 106px; padding: 15px; }
  .server-game-mark { width: 62px; height: 62px; border-radius: 15px; }
  .server-tile-body { padding: 15px; }
  .server-resource-grid { gap: 5px; }
  .server-resource-grid > span { padding: 8px 6px; column-gap: 5px; }
  .server-resource-grid strong { font-size: 10px; }
  .server-open-label { font-size: 0; }
  .server-open-label svg { width: 16px; height: 16px; }
}

/* v0.6.5 — ANSI-aware console and dedicated server activity stream */
.console-title-row { align-items: center; }
.console-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.console-capability, .console-tool-button { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; border: 1px solid var(--border); border-radius: 9px; color: var(--muted-foreground); background: color-mix(in srgb, var(--secondary) 72%, transparent); font-size: 11px; font-weight: 700; }
.console-capability { padding: 0 10px; }
.console-capability svg, .console-tool-button svg { width: 14px; height: 14px; }
.console-tool-button { padding: 0 10px; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease; }
.console-tool-button:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); color: var(--foreground); }
.console-tool-button.active { border-color: color-mix(in srgb, var(--primary) 55%, var(--border)); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--secondary)); }
.console-output#server-console { min-height: 420px; max-height: 58vh; margin: 0; padding: 12px 0; overflow: auto; border: 0; border-radius: 0; color: #d7e2f0; background: #05070b; font-family: "Cascadia Code", "JetBrains Mono", "SFMono-Regular", Consolas, monospace; font-size: 12px; line-height: 1.55; white-space: normal; scrollbar-width: thin; scrollbar-color: #293141 transparent; }
.console-output:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.console-line { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 8px; min-height: 24px; padding: 2px 18px; border-left: 2px solid transparent; }
.console-line:hover { background: rgba(255,255,255,.025); }
.console-line-icon { display: grid; width: 20px; height: 20px; margin-top: 1px; place-items: center; color: #64748b; }
.console-line-icon svg { width: 13px; height: 13px; }
.console-line-text { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.console-line--warning { border-left-color: rgba(250,204,21,.4); background: rgba(250,204,21,.025); }
.console-line--warning .console-line-icon { color: #facc15; }
.console-line--error { border-left-color: rgba(248,113,113,.55); background: rgba(248,113,113,.035); }
.console-line--error .console-line-icon { color: #f87171; }
.console-line--success .console-line-icon { color: #4ade80; }
.console-line--message .console-line-icon { color: #c084fc; }
.console-line--command .console-line-icon { color: #60a5fa; }
.ansi-bold { font-weight: 800; }
.ansi-dim { opacity: .65; }
.ansi-italic { font-style: italic; }
.ansi-underline { text-decoration: underline; text-underline-offset: 2px; }
.ansi-strike { text-decoration: line-through; }
.console-command { position: relative; }
.console-command-prompt { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border); border-radius: 8px; color: var(--primary); background: var(--secondary); font-family: monospace; font-size: 20px; }
.server-activity-page { display: grid; gap: 18px; }
.server-subpage-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.activity-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.activity-summary-card { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 17px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(145deg, color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--secondary) 72%, transparent)); box-shadow: var(--shadow-sm); }
.activity-summary-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid currentColor; border-radius: 12px; background: color-mix(in srgb, currentColor 9%, transparent); }
.activity-summary-icon svg { width: 20px; height: 20px; }
.activity-summary-icon.info { color: #60a5fa; }
.activity-summary-icon.success { color: #4ade80; }
.activity-summary-icon.danger { color: #f87171; }
.activity-summary-card small, .activity-summary-card p { color: var(--muted-foreground); }
.activity-summary-card small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.activity-summary-card strong { display: block; margin: 3px 0; font-size: 25px; letter-spacing: -.035em; }
.activity-summary-card p { margin: 0; font-size: 12px; }
.activity-stream-card { padding: 0; overflow: hidden; }
.activity-heading { padding: 20px 21px 12px; }
.activity-toolbar { margin: 0; padding: 0 21px 18px; border-bottom: 1px solid var(--border); }
.activity-toolbar .toolbar-search { min-width: min(360px, 100%); flex: 1 1 260px; }
.activity-stream { display: grid; }
.activity-event { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 17px 21px; border-bottom: 1px solid var(--border-soft); }
.activity-event:last-child { border-bottom: 0; }
.activity-event:hover { background: color-mix(in srgb, var(--secondary) 45%, transparent); }
.activity-event-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--border); border-radius: 11px; color: #60a5fa; background: var(--secondary); }
.activity-event-icon svg { width: 18px; height: 18px; }
.activity-event--danger .activity-event-icon { color: #f87171; background: rgba(248,113,113,.08); }
.activity-event--warning .activity-event-icon { color: #facc15; background: rgba(250,204,21,.08); }
.activity-event--success .activity-event-icon { color: #4ade80; background: rgba(74,222,128,.08); }
.activity-event-title { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.activity-event-title strong { font-size: 14px; }
.activity-event-title .status { padding: 3px 7px; font-size: 9px; }
.activity-event-body p { margin: 5px 0 0; color: var(--muted-foreground); font-size: 13px; line-height: 1.55; }
.activity-event > time { color: var(--muted-foreground); font-size: 11px; white-space: nowrap; }
.activity-metadata { margin-top: 9px; }
.activity-metadata summary { width: max-content; color: var(--primary); font-size: 11px; font-weight: 700; cursor: pointer; }
.activity-metadata pre { max-width: min(760px, 70vw); max-height: 240px; margin: 9px 0 0; padding: 12px; overflow: auto; border: 1px solid var(--border); border-radius: 9px; background: #07090d; color: #cbd5e1; font-size: 11px; white-space: pre-wrap; }
.activity-stream-card .data-footer { margin: 0; padding: 14px 21px; border-top: 1px solid var(--border); }
.activity-empty { margin: 0; border: 0; border-radius: 0; }
@media (max-width: 900px) {
  .activity-summary-grid { grid-template-columns: 1fr; }
  .activity-event { grid-template-columns: 38px minmax(0, 1fr); }
  .activity-event > time { grid-column: 2; }
}
@media (max-width: 700px) {
  .console-title-row { align-items: flex-start; flex-direction: column; }
  .console-toolbar { width: 100%; justify-content: flex-start; }
  .console-capability { display: none; }
  .console-output#server-console { min-height: 350px; max-height: 52vh; font-size: 11px; }
  .console-line { grid-template-columns: 20px minmax(0, 1fr); gap: 5px; padding: 2px 11px; }
  .server-subpage-header { flex-direction: column; }
  .activity-toolbar { align-items: stretch; flex-direction: column; }
  .activity-toolbar select, .activity-toolbar .button { width: 100%; }
  .activity-event { gap: 10px; padding: 15px; }
  .activity-event > time { white-space: normal; }
  .activity-metadata pre { max-width: calc(100vw - 110px); }
}


/* v0.6.5 server settings, startup, branding and administrative editor */
.settings-workspace,
.startup-workspace,
.admin-server-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 1.25rem;
  align-items: start;
}
.settings-main-column,
.startup-main-column,
.admin-server-main,
.settings-side-column,
.startup-side-column,
.admin-server-side {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}
.settings-card,
.brand-editor-card,
.identity-card,
.txadmin-card,
.sticky-action-card,
.resource-limit-editor {
  overflow: hidden;
}
.security-badge,
.code-language-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .38rem .62rem;
  color: var(--muted-foreground);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.credential-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.credential-item {
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--background) 64%, var(--card));
  min-width: 0;
}
.credential-item > span {
  display: block;
  margin-bottom: .45rem;
  color: var(--muted-foreground);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.credential-item > div,
.secret-control {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}
.credential-item code {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.credential-secret { grid-column: 1 / -1; }
.secret-control input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.settings-inline-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.settings-inline-action p { margin: 0; color: var(--muted-foreground); font-size: .83rem; }
.brand-preview {
  position: relative;
  min-height: 190px;
  margin-bottom: 1rem;
  border-radius: calc(var(--radius-xl) - 4px);
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--primary) 28%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--card) 72%, #0a1223), color-mix(in srgb, var(--background) 85%, #05080f));
}
.brand-preview img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}
.brand-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(2, 6, 14, .78));
  pointer-events: none;
}
.brand-preview small {
  position: absolute;
  left: .8rem;
  bottom: .7rem;
  z-index: 1;
  color: #f8fafc;
  font-weight: 700;
  font-size: .72rem;
}
.brand-preview-empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .5rem;
  color: var(--muted-foreground);
}
.brand-preview-empty strong { font-size: 2rem; color: var(--foreground); }
.brand-preview-empty small { position: static; color: var(--muted-foreground); }
.brand-preview-empty::after { display: none; }

.startup-summary-grid,
.admin-server-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .8rem;
  margin-bottom: 1.25rem;
}
.startup-summary-grid article,
.admin-server-summary article {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: linear-gradient(145deg, color-mix(in srgb, var(--card) 95%, transparent), color-mix(in srgb, var(--card) 72%, var(--background)));
  box-shadow: var(--shadow-sm);
}
.startup-summary-grid article > span,
.admin-server-summary article > span {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: var(--muted-foreground);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.startup-summary-grid strong,
.admin-server-summary strong,
.admin-server-summary code {
  display: block;
  overflow: hidden;
  margin: .55rem 0 .25rem;
  color: var(--foreground);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.startup-summary-grid small,
.admin-server-summary small { display: block; overflow: hidden; color: var(--muted-foreground); text-overflow: ellipsis; white-space: nowrap; }
.code-input { font-family: var(--font-mono); }
.startup-environment-editor { min-height: 330px; }
.option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}
.option-card {
  display: flex !important;
  align-items: flex-start;
  gap: .65rem;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--background) 62%, var(--card));
  cursor: pointer;
}
.option-card input { width: auto; margin-top: .2rem; }
.option-card span { display: grid; gap: .18rem; }
.option-card strong { color: var(--foreground); font-size: .86rem; }
.option-card small { color: var(--muted-foreground); line-height: 1.4; }
.switch-row {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--background) 62%, var(--card));
}
.switch-row span { display: grid; gap: .2rem; }
.switch-row small { color: var(--muted-foreground); line-height: 1.4; }
.switch-row input[type="checkbox"] { width: 2.7rem; height: 1.45rem; accent-color: var(--primary); }
.txadmin-card.enabled { border-color: color-mix(in srgb, var(--success) 42%, var(--border)); }
.sticky-action-card { position: sticky; top: calc(var(--topbar-height, 72px) + 1rem); }
.startup-apply-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 1.25rem;
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
.startup-apply-card h2,
.startup-apply-card p { margin: .25rem 0 0; }

.resource-limit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
.resource-limit-grid label {
  display: grid;
  gap: .55rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: color-mix(in srgb, var(--background) 62%, var(--card));
}
.resource-limit-grid label > span { display: flex; align-items: center; gap: .45rem; font-weight: 700; }
.resource-limit-grid label > div { display: flex; align-items: center; }
.resource-limit-grid input { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.resource-limit-grid em {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 3rem;
  border: 1px solid var(--input);
  border-left: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--muted-foreground);
  background: var(--muted);
  font-style: normal;
  font-size: .72rem;
  font-weight: 700;
}
.resource-limit-grid small { color: var(--muted-foreground); }
.admin-danger-zone { display: grid; gap: .7rem; }
.admin-danger-zone form { width: 100%; }
.full-width { width: 100%; justify-content: center; }
.table-actions { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; }

.server-tile-visual.has-thumbnail { background: #050914; }
.server-card-thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .76;
  transform: scale(1.01);
  transition: transform .35s ease, opacity .35s ease;
}
.server-tile:hover .server-card-thumbnail { transform: scale(1.055); opacity: .9; }
.server-tile-visual.has-thumbnail::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(2,6,18,.82), rgba(2,6,18,.16) 56%, rgba(2,6,18,.52));
}
.server-tile-visual.has-thumbnail .server-game-mark,
.server-tile-visual.has-thumbnail .server-card-status,
.server-tile-visual.has-thumbnail .server-visual-orbit,
.server-tile-visual.has-thumbnail .server-visual-grid,
.server-thumbnail-source { z-index: 2; }
.server-thumbnail-source {
  position: absolute;
  right: .8rem;
  bottom: .65rem;
  padding: .28rem .48rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(2,6,18,.45);
  backdrop-filter: blur(8px);
  font-size: .64rem;
  font-weight: 700;
}
.egg-thumbnail-preview { overflow: hidden; }
.egg-thumbnail-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.egg-thumbnail-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 300px) auto auto;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--background) 62%, var(--card));
}
.egg-thumbnail-form > div { display: grid; gap: .15rem; }
.egg-thumbnail-form small { color: var(--muted-foreground); }

.console-action-feedback {
  min-height: 1.2rem;
  margin-left: auto;
  color: var(--muted-foreground);
  font-size: .78rem;
  font-weight: 700;
}
.console-action-feedback.success { color: var(--success); }
.console-action-feedback.error { color: var(--destructive); }
.button.loading { opacity: .72; cursor: wait; }
.upload-card-below-files { margin-top: 1.25rem; }
.file-browser-card .file-list { max-height: none; }

@media (max-width: 1180px) {
  .startup-summary-grid,
  .admin-server-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resource-limit-grid { grid-template-columns: 1fr; }
  .option-grid { grid-template-columns: 1fr; }
  .egg-thumbnail-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .settings-workspace,
  .startup-workspace,
  .admin-server-editor { grid-template-columns: 1fr; }
  .sticky-action-card { position: static; }
  .credential-grid { grid-template-columns: 1fr; }
  .credential-secret { grid-column: auto; }
  .startup-apply-card { align-items: stretch; flex-direction: column; }
}
@media (max-width: 640px) {
  .startup-summary-grid,
  .admin-server-summary { grid-template-columns: 1fr; }
  .settings-inline-action { align-items: stretch; flex-direction: column; }
  .secret-control { flex-wrap: wrap; }
  .secret-control input { flex-basis: 100%; }
  .egg-thumbnail-form { grid-template-columns: 1fr; }
}


/* v0.6.5 — billing configuration is intentionally split into Plans and Gateways only */
.billing-config-header { margin-bottom: 1.1rem; }
.billing-config-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    padding: .55rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) + 2px);
    background: color-mix(in srgb, var(--card) 84%, transparent);
}
.billing-config-tabs > a {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 64px;
    padding: .75rem .9rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--muted-foreground);
    text-decoration: none;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.billing-config-tabs > a:hover {
    color: var(--foreground);
    background: color-mix(in srgb, var(--accent) 72%, transparent);
    border-color: color-mix(in srgb, var(--border) 82%, transparent);
    transform: translateY(-1px);
}
.billing-config-tabs > a.active {
    color: var(--foreground);
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 14%, var(--card)), var(--card));
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    box-shadow: 0 10px 30px color-mix(in srgb, var(--primary) 9%, transparent);
}
.billing-config-tabs .ui-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.billing-config-tabs span { display: grid; gap: .15rem; min-width: 0; }
.billing-config-tabs strong { font-size: .92rem; line-height: 1.2; }
.billing-config-tabs small { color: var(--muted-foreground); font-size: .76rem; font-weight: 500; }
.billing-admin-grid { align-items: start; }
@media (max-width: 720px) {
    .billing-config-tabs { grid-template-columns: 1fr; }
    .billing-config-tabs > a { min-height: 58px; }
}