html { scroll-behavior: smooth; }
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&family=Roboto+Mono:wght@400;500;700&display=swap');

/* ═══════════════════════════════════════════════
   WARPHOST — PROFESSIONAL DESIGN SYSTEM
   ═══════════════════════════════════════════════ */

:root {
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Roboto Mono', monospace;
  --bold: 600;

  /* Modern palette */
  --color-dark:      #1a1a1a;
  --color-dark-mode: #141414;
  --color-dark-mark: #222222;
  --color-dark-hover:#2a2a2a;
  --color-dark-text: #808080;
  --color-light:     #f8f9fa;
  --color-light-fade:#a0a0a0;
  --color-main:      #8b5cf6;
  --color-danger:    #fa5252;
  --color-success:   #40c057;
  --color-warn:      #fab005;
  --color-loading:   #a0a0a0;

  /* Semantic background layers */
  --bg:    #141414;
  --bg2:   #1a1a1a;
  --bg3:   #222222;
  --void:  #0a0a0a;

  /* Borders */
  --border:  rgba(255, 255, 255, 0.08);
  --border2: rgba(255, 255, 255, 0.15);

  /* Text levels */
  --t1: #ffffff;
  --t2: #e0e0e0;
  --t3: #999999;

  /* Primary accent */
  --p1:    #8b5cf6;
  --p2:    rgba(139, 92, 246, 0.4);
  --p3:    #a78bfa;
  --p-dim: rgba(139, 92, 246, 0.08);
  --p-dim2:rgba(139, 92, 246, 0.15);

  /* Green */
  --green: #40c057;
  --g1:    #40c057;
  --g2:    #fcc419;
  --g-dim: rgba(64,192,87,0.1);

  /* Red */
  --red:   #fa5252;

  /* Lavender */
  --lav:   #9775fa;

  /* Layout */
  --sidebar-width:  270px;
  --topbar-height:  56px;
  --header-height:  100px;
  
  /* Animations */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.1);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

/* ─── RESET ───────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font-main);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
  background-image:
    radial-gradient(circle at top left, rgba(139, 92, 246, 0.12), transparent 28%),
    radial-gradient(circle at top right, rgba(167, 139, 250, 0.08), transparent 24%),
    radial-gradient(circle at bottom center, rgba(64, 192, 87, 0.05), transparent 28%);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: linear-gradient(120deg, rgba(255,255,255,0.04), transparent 24%, transparent 76%, rgba(255,255,255,0.03));
  opacity: 0.24;
  mix-blend-mode: screen;
}

body > * {
  position: relative;
  z-index: 1;
}

@keyframes floatSoft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

@keyframes shimmerSweep {
  0% { transform: translateX(-120%) skewX(-18deg); }
  100% { transform: translateX(220%) skewX(-18deg); }
}

@keyframes borderPulse {
  0%, 100% { box-shadow: 0 0 0 rgba(139, 92, 246, 0); }
  50% { box-shadow: 0 0 24px rgba(139, 92, 246, 0.14); }
}

@keyframes subtleDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(16px, -12px, 0) scale(1.06); }
  100% { transform: translate3d(-8px, 8px, 0) scale(1); }
}




/* Base button hover transitions enhancement for more professional feel */
button, a.btn, .btn-hero {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

button::before, a.btn::before, .btn-hero::before,
.btn::before, .btn-primary-hub::before, .btn-upgrade::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.16), transparent);
  transform: translateX(-120%) skewX(-18deg);
  pointer-events: none;
}

button:hover::before, a.btn:hover::before, .btn-hero:hover::before,
.btn:hover::before, .btn-primary-hub:hover::before, .btn-upgrade:hover::before {
  animation: shimmerSweep 0.9s ease;
}


a { color: inherit; }

/* ═══════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════ */

aside.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-width);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  z-index: 200;
  transition: width var(--transition-normal);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.sidebar-logo-img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
  border: 1px solid var(--border2);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  animation: floatSoft 7s ease-in-out infinite;
}

.sidebar-logo:hover .sidebar-logo-img {
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.6);
}

.sidebar-brand {
  font-size: 16px;
  font-weight: 600;
  color: var(--t1);
  letter-spacing: .02em;
  line-height: 1;
}
.sidebar-brand span { color: var(--color-main); font-weight: 500; }

.sidebar-server {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sidebar-server-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--t3);
  margin-bottom: 6px;
}

.sidebar-server-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--t1);
}

.sidebar-server-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--t3);
  margin-top: 6px;
  font-weight: 500;
}

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.dot-green { 
  background: var(--color-success); 
  box-shadow: 0 0 8px rgba(64,192,87,0.4); 
}
.dot-green::after {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border: 1px solid var(--color-success);
  border-radius: 50%;
  animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}

.dot-red    { background: var(--color-danger); }
.dot-yellow { background: var(--color-warn); }
.dot-grey   { background: var(--t3); }

.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 8px 0;
  overflow-y: auto;
}

.sidebar-nav .nav-link {
}

.sidebar-nav .nav-link:nth-child(2n) { animation-delay: 0.04s; }
.sidebar-nav .nav-link:nth-child(3n) { animation-delay: 0.08s; }
.sidebar-nav .nav-link:nth-child(4n) { animation-delay: 0.12s; }
.sidebar-nav .nav-link:nth-child(5n) { animation-delay: 0.16s; }

.nav-section-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--t3);
  padding: 8px 20px 4px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px;
  color: var(--t2);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: all var(--transition-fast);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--p1), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-fast);
}

.nav-link svg {
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
  opacity: .7;
  transition: transform var(--transition-fast);
}

.nav-link:hover { 
  background: var(--bg3); 
  color: var(--t1); 
  transform: translateX(2px);
}
.nav-link:hover svg { 
  opacity: 1;
  transform: translateX(2px);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { 
  border-left-color: var(--color-main); 
  background: var(--p-dim); 
  color: var(--p1); 
}
.nav-link.active svg { 
  opacity: 1; 
  color: var(--p1);
}

.sidebar-upgrade {
  padding: 12px 20px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  margin-top: auto;
}

.btn-upgrade {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--p1), var(--p3));
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.btn-upgrade:hover { 
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), 0 0 20px rgba(139, 92, 246, 0.15);
  background: linear-gradient(135deg, var(--p3), var(--p1));
}

/* ═══════════════════════════════════════════════
   TOPBAR
   ═══════════════════════════════════════════════ */

header.topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--topbar-height);
  background: rgba(20, 20, 20, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 199;
  transition: left var(--transition-normal);
  animation: pageLiftIn 0.9s ease both;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}
.breadcrumb-parent  { color: var(--t3); transition: color var(--transition-fast); }
.breadcrumb-parent:hover { color: var(--t2); }
.breadcrumb-sep     { color: var(--color-dark-text); }
.breadcrumb-current { color: var(--t1); font-weight: 600; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.topbar-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--t1);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.topbar-menu-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--t1);
  transform: translateY(-1px);
}

.topbar-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 200px;
  margin-top: 8px;
  background: rgba(20, 20, 20, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.98);
  transition: all var(--transition-fast);
  z-index: 300;
}

.topbar-menu:hover .topbar-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.topbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--t2);
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.topbar-dropdown-item:last-child {
  border-bottom: none;
}

.topbar-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--t1);
  transform: translateX(3px);
}

.topbar-dropdown-item.danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* Dashboard topbar extras */
.logo-container { display: flex; align-items: center; gap: 12px; }
.user-info      { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--t2); }
.username       { font-weight: 600; color: var(--t1); }
.logout         { 
  color: var(--t3); 
  text-decoration: none; 
  font-size: 13px; 
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast); 
  background: transparent;
}
.logout:hover   { background: rgba(250,82,82,0.1); color: var(--color-danger); }

/* ═══════════════════════════════════════════════
   MAIN
   ═══════════════════════════════════════════════ */

main.main {
  margin-left: var(--sidebar-width);
  margin-top: 0;
  padding: calc(var(--topbar-height) + 16px) 40px 32px;
  min-height: calc(100vh - var(--topbar-height));
  transition: margin-left var(--transition-normal);
  animation: pageLiftIn 0.9s ease 0.05s both;
}

.main-inner       { max-width: 760px;  margin: 0 auto; }
.main-inner-wide  { max-width: 1000px;  margin: 0 auto; }



/* ═══════════════════════════════════════════════
   PAGE HEADERS
   ═══════════════════════════════════════════════ */

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--p1);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.page-subtitle {
  font-size: 14px;
  color: var(--t3);
  margin-bottom: 24px;
}

.section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--p1);
  margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════ */

.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(139, 92, 246, 0.04);
  border-color: var(--border2);
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.06), transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s ease;
  pointer-events: none;
}
.card:hover::after { transform: translateX(120%); }

.card:nth-of-type(2n) { animation-delay: 0.04s; }
.card:nth-of-type(3n) { animation-delay: 0.08s; }
.card:nth-of-type(4n) { animation-delay: 0.12s; }

.card h2 {
  color: var(--t1);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ═══════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  color: #fff;
  white-space: nowrap;
}

.btn:hover        { transform: translateY(-2px); box-shadow: var(--shadow-sm), 0 0 20px rgba(139, 92, 246, 0.08); }
.btn:active       { transform: translateY(0); box-shadow: none; }
.btn-sm           { padding: 6px 12px; font-size: 12px; }
.btn-huge         { padding: 16px 42px; font-size: 16px; font-weight: 600; border-radius: 6px; letter-spacing: 0.5px; }

.btn-main         { background: #6d28d9; }
.btn-main:hover   { background: #5b21b6; }
.btn-purple       { background: #6d28d9; }
.btn-purple:hover { background: #5b21b6; }
.btn-success      { background: #6d28d9; color: #fff; border: 1px solid #6d28d9; }
.btn-success:hover{ background: #5b21b6; border-color: #5b21b6; }
.btn-danger       { background: #6d28d9; }
.btn-danger:hover { background: #5b21b6; }
.btn-dark         { background: #2a2a2a; border-color: var(--border); color: #fff; }
.btn-dark:hover   { background: #333333; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--t1);
}
.btn-ghost:hover  { 
  background: rgba(255,255,255,0.05); 
  border-color: rgba(255,255,255,0.2); 
}

.btn-main,
.btn-purple,
.btn-success,
.btn-danger,
.btn-dark,
.btn-ghost,
.btn-main:hover,
.btn-purple:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-dark:hover,
.btn-ghost:hover {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

/* ═══════════════════════════════════════════════
   BADGES & TAGS
   ═══════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.badge-green  { background: rgba(109,40,217,0.15);  color: #6d28d9; border: 1px solid rgba(109,40,217,0.25); }
.badge-gold   { background: rgba(109,40,217,0.15);  color: #6d28d9; border: 1px solid rgba(109,40,217,0.25); }
.badge-purple { background: rgba(109,40,217,0.15); color: #6d28d9; border: 1px solid rgba(109,40,217,0.25); }
.badge-red    { background: rgba(239,68,68,0.15);   color: #ef4444; border: 1px solid rgba(239,68,68,0.25); }

.tag          { display: inline-flex; padding: 2px 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 500; }
.tag-purple   { background: var(--p-dim); color: var(--p3); }
.tag-gold     { background: rgba(250,176,5,0.1); color: var(--color-warn); }
.tag-lav      { background: rgba(151,117,250,0.1); color: var(--lav); }

/* ═══════════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════════ */

.input {
  background: var(--void);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--t1);
  font-family: var(--font-main);
  font-size: 14px;
  padding: 8px 12px;
  outline: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  appearance: none;
  width: 100%;
}
.input:hover      { border-color: var(--border2); transform: translateY(-1px); }
.input:focus      { border-color: var(--color-main); box-shadow: 0 0 0 2px var(--p-dim2); transform: translateY(-1px); }
.input-mono       { font-family: var(--font-mono); font-size: 13px; }

select.input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23868e96' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

select.input option {
  background: var(--bg2);
  color: var(--t1);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="checkbox"] {
  accent-color: #6d28d9 !important;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════
   SWITCH
   ═══════════════════════════════════════════════ */

.switch {
  width: 40px; height: 22px;
  background: #2a2a2a;
  border-radius: 11px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
  border: 1px solid var(--border);
}
.switch::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  background: #999999;
  border-radius: 50%;
  top: 2px; left: 2px;
  transition: transform var(--transition-normal), background var(--transition-normal);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.switch.on { background: #6d28d9; border-color: #6d28d9; }
.switch.on::after { transform: translateX(18px); background: #fff; }
  transition: transform .2s, background .2s;
}
.switch.on           { background: #6d28d9; }
.switch.on::after    { transform: translateX(16px); background: #fff; }

/* ═══════════════════════════════════════════════
   SETTING ROW
   ═══════════════════════════════════════════════ */

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.12);
  gap: 14px;
}
.setting-row:last-child { border-bottom: none; }

.setting-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: .02em;
}
.setting-key {
  font-size: 13px;
  color: var(--t3);
  font-family: var(--font-mono);
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════
   ROW LIST & DATA ROWS
   ═══════════════════════════════════════════════ */

.row-list {
  background: var(--bg2);
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
}

.row-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.12);
}

.data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  transition: background .1s;
}
.data-row:last-child { border-bottom: none; }
.data-row:hover      { background: rgba(255,255,255,0.03); }

/* ═══════════════════════════════════════════════
   FILE MANAGER
   ═══════════════════════════════════════════════ */

.file-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  transition: background .18s ease, transform .18s ease, color .18s ease;
  font-size: 12px;
  color: var(--t2);
  position: relative;
}
.file-row:hover      { background: rgba(255,255,255,0.04); transform: translateX(2px); }
.file-row:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════
   WORLD CARDS
   ═══════════════════════════════════════════════ */

.world-card {
  background: var(--bg2);
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  transition: transform .2s ease, border-color .15s, box-shadow .2s ease;
}
.world-card:hover { border-color: rgba(0,0,0,0.35); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); }
.active-world     { border-color: rgba(31,215,141,.22); }

/* ═══════════════════════════════════════════════
   SOFTWARE CARDS
   ═══════════════════════════════════════════════ */

.sw-card {
  background: var(--bg3);
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 3px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sw-card:hover    { background: var(--bg2); border-color: rgba(0,0,0,0.35); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.14); }
.sw-card.selected { border-color: var(--color-main); background: rgba(43,135,211,0.07); }

/* ═══════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════ */

.progress-track         { height: 6px; background: rgba(0,0,0,0.3); border-radius: 3px; overflow: hidden; }
.progress-fill          { height: 100%; border-radius: 3px; transition: width .4s; }
.progress-fill-gold     { background: var(--color-warn); }
.progress-fill-blue     { background: var(--color-main); }
.progress-fill-green    { background: var(--color-success); }

/* ═══════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════ */

.toast {
  position: fixed;
  bottom: 20px; right: 20px;
  background: var(--bg2);
  border: 1px solid rgba(0,0,0,0.3);
  border-left: 3px solid var(--color-main);
  border-radius: 3px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--t1);
  transform: translateY(12px);
  opacity: 0;
  transition: opacity .2s, transform .2s, filter .2s;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
.toast.show  { opacity: 1; transform: translateY(0); filter: blur(0); }
.toast-icon  { color: var(--color-success); flex-shrink: 0; }

/* ═══════════════════════════════════════════════
   DASHBOARD — SERVER STATUS
   ═══════════════════════════════════════════════ */

.server-ip {
  background: #1a1a1a;
  color: var(--t1);
  padding: 22px 16px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  border-radius: 3px 3px 0 0;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid var(--border);
  border-bottom: none;
}

.status {
  padding: 11px 16px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  border-radius: 0 0 3px 3px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1px solid rgba(0,0,0,0.2);
  border-top: none;
  animation: borderPulse 3.5s ease-in-out infinite;
}
.status.offline { background: #dc2626; border-color: #991b1b; }
.status.online  { background: #10b981; color: #ffffff; border-color: #059669; }
.status.loading { background: #999999; color: #ffffff; border-color: #666666; }

.server-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

/* ═══════════════════════════════════════════════
   STATS GRID
   ═══════════════════════════════════════════════ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.stat-item {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 14px;
  border-radius: 3px;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.stat-item:hover { transform: translateY(-2px); border-color: rgba(139, 92, 246, 0.22); box-shadow: 0 10px 22px rgba(0,0,0,0.12); }

.stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--t3);
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  margin-top: 5px;
  color: var(--t1);
  font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════
   OLD SIDEBAR NAV (dashboard / console pages)
   ═══════════════════════════════════════════════ */

.navigation-list,
aside.navigation {
  display: flex;
  flex-direction: column;
  padding-top: 8px;
}

.navigation-item,
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  color: var(--t2);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-left: 4px solid transparent;
  transition: background .12s, color .12s, border-color .12s, transform .12s ease;
  position: relative;
}

.navigation-item i, .nav-item i { width: 18px; text-align: center; font-size: 14px; }
.navigation-item:hover, .nav-item:hover { background: rgba(0,0,0,0.15); color: var(--t1); transform: translateX(2px); }
.navigation-item.active, .nav-item.active { border-left-color: var(--color-main); background: rgba(0,0,0,0.2); color: var(--t1); }

/* ═══════════════════════════════════════════════
   CONSOLE PAGE
   ═══════════════════════════════════════════════ */

.content { padding: 20px; max-width: 900px; }

.content > * {
}

.content > *:nth-child(2n) { animation-delay: 0.05s; }
.content > *:nth-child(3n) { animation-delay: 0.1s; }

.content h1 {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 14px;
  color: var(--t1);
}

.console-output {
  background: var(--void);
  border: 1px solid rgba(0,0,0,0.35);
  border-radius: 2px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t2);
  line-height: 1.85;
  margin-bottom: 8px;
  min-height: 300px;
  max-height: 90vh;
  overflow-y: auto;
}

.console-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--void);
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 2px;
  padding: 7px 10px;
  transition: border-color .15s, transform .15s ease, box-shadow .15s ease;
}
.console-input-row:focus-within { border-color: var(--color-main); transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.08); }
.console-input-row input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--t1);
  font-family: var(--font-mono);
  font-size: 12px;
  outline: none;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */

@media (max-width: 960px) {
  :root { --sidebar-width: 190px; }
}

 
/* ═══════════════════════════════════════════════
   BILLING & PLANS
   ═══════════════════════════════════════════════ */

.plan-card {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.plan-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.plan-card::after,
.glass-card-premium::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.06), transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s ease;
  pointer-events: none;
}

.plan-card:hover::after,
.glass-card-premium:hover::after { transform: translateX(120%); }

.plan-card.current {
  border-color: rgba(255, 255, 255, 0.12);
  background: #1a1a1a;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
}

.plan-card.current::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: #6d28d9;
}

.row-list {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
}
.row-list:hover {
  box-shadow: var(--shadow-md);
}
.row-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #1a1a1a;
}

/* ═══════════════════════════════════════════════
   ANIMATIONS & UX 
   ═══════════════════════════════════════════════ */

@keyframes slideUpFade {
  0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}

main.main .main-inner {
  animation: slideUpFade 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.nav-link {
  position: relative;
}
.nav-link::before {
  content: '';
  position: absolute;
  left: -3px; top: 50%;
  transform: translateY(-50%) scaleY(0);
  height: 60%; width: 3px;
  background: var(--color-main);
  border-radius: 0 4px 4px 0;
  transition: transform var(--transition-fast);
}
.nav-link.active::before {
  transform: translateY(-50%) scaleY(1);
}
.nav-link.active {
  border-left-color: transparent !important;
}

/* Toast Notification styling */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--t1);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 1000;
}
.toast.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ═══════════════════════════════════════════════
   CONSOLE
   ═══════════════════════════════════════════════ */
.console-output {
  background: var(--void);
  border: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: 16px;
  height: 480px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--t2);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}
.console-input-row {
  display: flex;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 12px 16px;
}
.console-input-row input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--t1);
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
  margin-right: 12px;
}


/* ═══════════════════════════════════════════════
   SITE BACKGROUND ANIMATION (MATRIX)
   ═══════════════════════════════════════════════ */
.matrix-container {
  position: fixed;
  top: 0; left: var(--sidebar-width);
  right: 0; bottom: 0;
  z-index: -1;
  background: radial-gradient(circle at center, rgba(139, 92, 246, 0.08) 0%, var(--bg) 80%);
  overflow: hidden;
  pointer-events: none;
}
.matrix-grid {
  width: 200%; height: 200%;
  position: absolute;
  top: -50%; left: -50%;
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  animation: gridPan 30s linear infinite;
  transform: perspective(600px) rotateX(45deg);
  transform-origin: center center;
}
@keyframes gridPan {
  0% { transform: perspective(600px) rotateX(45deg) translateY(0); }
  100% { transform: perspective(600px) rotateX(45deg) translateY(40px); }
}

/* ═══════════════════════════════════════════════
   NO-SCROLL LAYOUT (Console, Players, Files, Worlds)
   ═══════════════════════════════════════════════ */
body.no-scroll {
  overflow: hidden;
}
body.no-scroll main.main {
  height: calc(100vh - var(--topbar-height));
  display: flex;
  flex-direction: column;
}
body.no-scroll .main-inner, 
body.no-scroll .main-inner-wide {
  height: 100%;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-height) - 104px);
}
body.no-scroll .console-output {
  flex: 1;
  height: auto;
}

/* ═══════════════════════════════════════════════
   WORLDS UI REVAMP
   ═══════════════════════════════════════════════ */
.worlds-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  height: 100%;
}

.dimensions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.world-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.world-card:hover {
  border-color: var(--p3);
  transform: translateX(4px);
  background: var(--bg2);
}

.world-card.active-world {
  border-color: var(--p1);
  background: linear-gradient(90deg, rgba(139, 92, 246, 0.1), transparent);
  box-shadow: inset 3px 0 0 var(--p1);
}

.world-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.world-icon svg {
  width: 20px;
  height: 20px;
}

.world-icon.overworld {
  background: rgba(64, 192, 87, 0.1);
  color: var(--green);
}
.world-icon.nether {
  background: rgba(250, 82, 82, 0.1);
  color: var(--red);
}
.world-icon.end {
  background: rgba(167, 139, 250, 0.1);
  color: var(--lav);
}

.world-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.world-name {
  font-weight: 600;
  color: var(--t1);
  font-size: 14px;
  display: flex;
  align-items: center;
}

.world-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--t3);
}

.world-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.world-card:hover .world-actions {
  opacity: 1;
}

/* Global solid surfaces for all pages */
.card,
.row-list,
.plan-card,
.world-card,
.sw-card,
.world-details-panel,
.console-input-row,
.console-wrapper .console-input-row,
.console-output,
.console-wrapper,
.server-ip,
header.topbar,
aside.sidebar {
  background-color: var(--bg2) !important;
}

/* Keep current plan card visual while staying opaque */
.plan-card.current {
  background: linear-gradient(180deg, rgba(51, 154, 240, 0.12) 0%, var(--bg3) 100%);
}

.icon-btn {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--t2);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.icon-btn:hover {
  background: var(--p1);
  border-color: var(--p1);
  color: #fff;
}

.icon-btn.danger:hover {
  background: var(--danger);
  border-color: var(--danger);
}

.world-details-panel {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  height: 100%;
  overflow-y: auto;
}

.details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.generation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.setting-item label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--t3);
  display: block;
  margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════
   FULL WIDTH CONSOLE REVAMP
   ═══════════════════════════════════════════════ */
.main.console-full {
  padding: 0 !important;
  margin: 0 !important;
  position: absolute;
  top: var(--topbar-height);
  left: var(--sidebar-width);
  right: 0;
  bottom: 0;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  box-sizing: border-box;
  overflow: hidden;
}

.console-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  background: #1a1a1a;
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
}

.console-wrapper .console-output {
  flex: 1;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 0;
  height: 100%;
  min-height: auto;
  padding: 24px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
}

.console-wrapper .console-output div {
  color: var(--t2);
  margin-bottom: 8px;
}

.console-wrapper .console-input-row {
  padding: 16px 24px;
  background: rgba(26, 26, 26, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 12px;
}

.console-wrapper .console-input-row input {
  height: 40px;
  font-size: 14px;
  flex: 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: var(--t1);
  padding: 0 12px;
}

.console-wrapper .console-input-row input::placeholder {
  color: var(--t3);
}

.console-wrapper .console-input-row .btn {
  height: 40px;
  padding: 0 20px;
  flex-shrink: 0;
}
}


/* ═══════════════════════════════════════════════
   SCROLLABLE TABS (Players)
   ═══════════════════════════════════════════════ */
.scrollable-tabs {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 8px; /* Room for scrollbar */
  scrollbar-width: thin;
}
.scrollable-tabs::-webkit-scrollbar {
  height: 4px;
}
.scrollable-tabs::-webkit-scrollbar-thumb {
  background: var(--p3);
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════
   FILES ALIGNMENT
   ═══════════════════════════════════════════════ */
main.file-manager-layout {
  display: flex;
  height: calc(100vh - var(--topbar-height)) !important;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════
   BUTTON UPGRADES & COLORS
   ═══════════════════════════════════════════════ */
:root {
  --green: #6EE7B7; /* Lighter, pastel */
  --red: #FDA4AF;   /* Lighter, pastel */
}

/* Override .card background to be opaque with neutral border */
.card {
  background: #1a1a1a !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}



.dimensions-list {
  height: 100% !important;
}
.world-card {
  flex: 1 !important;
  display: flex !important;
  align-items: center;
}
.worlds-layout .setting-item {
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════
   USER ADJUSTMENTS (Sidebar, IP, Colors)
   ═══════════════════════════════════════════════ */
:root {
  --color-success: #10b981 !important; /* Rich emerald */
  --color-danger:  #f43f5e !important; /* Soft rose/red */
  --green: #10b981 !important;
  --red:   #f43f5e !important;
}

.sidebar-nav .nav-link {
  font-size: 15px !important;
  padding: 10px 14px !important;
}

.server-actions .btn-huge {
  font-size: 18px !important;
  padding: 16px 36px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
}

.btn-gold {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #fff !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════
   FINAL REFINEMENTS (Teal, Magenta, New Buttons)
   ═══════════════════════════════════════════════ */
:root {
  --color-success: #14b8a6 !important; /* Teal */
  --color-danger:  #d946ef !important; /* Magenta */
  --green: #14b8a6 !important;
  --red:   #d946ef !important;
}

/* Small adjustments for Worlds UI to fix awkward spacing */
.world-details-panel {
  display: flex !important;
  flex-direction: column;
}
.worlds-layout .stats-grid {
  gap: 16px !important;
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}
.worlds-layout .stat-item {
  padding: 16px !important;
}
.worlds-layout .generation-grid {
  gap: 16px !important;
  margin-top: 12px !important;
}

/* Scrollbar tweaks */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg1);
}
::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.4);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--p2);
}

/* Offline status coloring to match site */
.dot-red { 
    background: var(--p2) !important; 
    box-shadow: 0 0 8px rgba(139,92,246,0.6) !important;
}
.status.offline { 
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--p3) !important; 
    border: 1px solid rgba(139, 92, 246, 0.3) !important; 
}

/* Base button defaults to Purple, except start/stop */
.btn {
  background-color: var(--p1) !important;
  box-shadow: none !important;
  border-color: var(--p2) !important;
  color: #fff !important;
}
.btn:hover {
  background-color: var(--p2) !important;
  box-shadow: none !important;
  border-color: var(--p4) !important;
}

/* Ensure success/danger overrides work */
.btn-success {
  background-color: var(--color-success) !important;
  border-color: #2dd4bf !important;
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3) !important;
  color: #fff !important;
}
.btn-success:hover {
  background-color: #0d9488 !important;
}

.btn-danger {
  background-color: var(--color-danger) !important;
  border-color: #e879f9 !important;
  box-shadow: 0 4px 12px rgba(217, 70, 239, 0.3) !important;
  color: #fff !important;
}
.btn-danger:hover {
  background-color: #c026d3 !important;
}

/* Fix Start/Stop Button hover turning pink */
.btn-success:hover {
  border-color: #0d9488 !important;
  box-shadow: 0 8px 24px rgba(20, 184, 166, 0.5) !important;
}

.btn-danger:hover {
  border-color: #c026d3 !important;
  box-shadow: 0 8px 24px rgba(217, 70, 239, 0.5) !important;
}

/* Old simplistic Button Design specifically for Players, Backups, and Access pages */
.old-btn {
  display: inline-flex !important; 
  align-items: center !important; 
  justify-content: center !important; 
  gap: 8px !important;
  background: var(--bg3) !important; 
  border: 1px solid var(--border) !important; 
  color: var(--t1) !important;
  padding: 8px 16px !important; 
  border-radius: var(--radius-sm) !important;
  font-family: inherit !important; 
  font-size: 13px !important; 
  font-weight: 500 !important; 
  cursor: pointer !important;
  transition: all .2s ease !important; 
  white-space: nowrap !important; 
  outline: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.old-btn::after {
  display: none !important;
}

.old-btn:hover { 
  background: var(--bg1) !important; 
  border-color: var(--border2) !important; 
  transform: none !important;
  box-shadow: none !important;
}

.old-btn.btn-sm { 
  padding: 6px 12px !important; 
  font-size: 12px !important; 
}

.old-btn.btn-purple { 
  background: var(--lav) !important; 
  color: #fff !important; 
  border-color: var(--lav) !important; 
}
.old-btn.btn-purple:hover { 
  background: #845ef7 !important; 
  border-color: #845ef7 !important; 
}

.old-btn.btn-danger { 
  background: rgba(250, 82, 82, 0.1) !important; 
  border: 1px solid rgba(250, 82, 82, 0.2) !important; 
  color: var(--red) !important; 
}
.old-btn.btn-danger:hover { 
  background: rgba(250, 82, 82, 0.2) !important; 
  border-color: rgba(250, 82, 82, 0.3) !important; 
}

.old-btn.btn-ghost { 
  background: transparent !important; 
  border-color: transparent !important; 
}
.old-btn.btn-ghost:hover { 
  background: rgba(255, 255, 255, 0.05) !important; 
}

/* Custom Stop Button to avoid pink */
.btn-stop {
  background-color: #dc2626 !important; /* Bold distinctive red */
  border-color: #ef4444 !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
  color: #fff !important;
}
.btn-stop:hover {
  background-color: #b91c1c !important;
  border-color: #dc2626 !important;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.5) !important;
}

/* Redesigned Tab Buttons for Players Page */
.btn-tab {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  color: var(--t2) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.btn-tab:hover {
  background: rgba(139, 92, 246, 0.1) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
  color: var(--p1) !important;
}
.btn-tab.active-tab {
  background: var(--p1) !important;
  border-color: var(--p2) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3) !important;
}

/* Increase Sidebar Font Sizes */
.sidebar-nav .nav-link {
  font-size: 18px !important;
  padding: 12px 16px !important;
}
.nav-link svg {
  width: 18px; 
  height: 18px;
}
.sidebar-brand { font-size: 24px; }
.sidebar-server-name { font-size: 16px; }

/* Constrain Worlds Layout space */
.worlds-layout {
  grid-template-columns: 350px 1fr !important;
}
.world-details-panel {
  max-width: 700px; /* Prevent awkward wide empty space */
  justify-self: start;
  width: 100%;
}

/* =========================================
   PREMIUM GLASSMORPHISM CARDS (Features/About)
   ========================================= */
.glass-card-premium {
  background: rgba(20, 20, 20, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px; /* Adjust to match your var(--radius-lg) */
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.glass-card-premium:hover {
  transform: translateY(-6px);
  background: rgba(30, 30, 30, 0.6);
  border-color: rgba(139, 92, 246, 0.3); /* Purple hover border */
  box-shadow: 0 10px 40px -10px rgba(139, 92, 246, 0.15);
}

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

.icon-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* =========================================
   PRICING SECTION
   ========================================= */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.pricing-card {
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

/* The Pro Glow Effect */
.pricing-pro {
  background: rgba(25, 20, 35, 0.8);
  box-shadow: inset 0 0 0 1px #8b5cf6, 0 10px 40px rgba(139, 92, 246, 0.15);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #8b5cf6, #c4b5fd); /* Purple gradient */
  color: #fff;
  padding: 4px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.price-title {
  font-size: 24px;
  color: #fff;
  margin-bottom: 8px;
  font-weight: 700;
}

.price-amount {
  font-size: 48px;
  color: #fff;
  font-weight: 800;
  margin-bottom: 24px;
}

.price-amount span {
  font-size: 16px;
  color: #a0a0a0;
  font-weight: 500;
}

/* =========================================
   FAQ ACCORDION
   ========================================= */
.faq-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
}

.faq-accordion {
  background: rgba(20, 20, 20, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.faq-accordion:hover {
  background: rgba(30, 30, 30, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
}

.faq-accordion summary {
  padding: 24px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Hide default marker for webkit */
.faq-accordion summary::-webkit-details-marker {
  display: none;
}

/* Custom + icon */
.faq-accordion summary::after {
  content: '+';
  color: #8b5cf6;
  font-size: 24px;
  font-weight: 400;
  transition: transform 0.3s ease;
}

/* Rotate to 'x' when open */
.faq-accordion[open] summary::after {
  transform: rotate(45deg);
}

.faq-content {
  padding: 0 24px 24px;
  color: #a0a0a0; /* Match your var(--t3) */
  font-size: 15px;
  line-height: 1.7;
}