*{ margin:0; padding:0; box-sizing:border-box;}
html, body{ width:100%; overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column;  -webkit-overflow-scrolling:touch; scroll-behavior:smooth;}
.main{ flex:1;}
:root{ --primary-color:#6366f1; --primary-dark:#4f46e5; --secondary-color:#8b5cf6; --success-color:#10b981; --danger-color:#ef4444; --warning-color:#f59e0b; --bg-dark:#0f172a; --bg-card:#1e293b; --bg-hover:#334155; --text-primary:#f1f5f9; --text-secondary:#94a3b8; --border-color:#334155;}
[data-theme="blue"]{ --primary-color:#3b82f6; --primary-dark:#2563eb; --secondary-color:#60a5fa; --bg-dark:#0f172a; --bg-card:#1e3a8a; --bg-hover:#1e40af;}
[data-theme="purple"]{ --primary-color:#8b5cf6; --primary-dark:#7c3aed; --secondary-color:#a78bfa; --bg-dark:#1e1b4b; --bg-card:#312e81; --bg-hover:#4c1d95;}
[data-theme="green"]{ --primary-color:#10b981; --primary-dark:#059669; --secondary-color:#34d399; --bg-dark:#064e3b; --bg-card:#065f46; --bg-hover:#047857;}
[data-theme="orange"]{ --primary-color:#f59e0b; --primary-dark:#d97706; --secondary-color:#fbbf24; --bg-dark:#7c2d12; --bg-card:#9a3412; --bg-hover:#c2410c;}
[data-theme="red"]{ --primary-color:#ef4444; --primary-dark:#dc2626; --secondary-color:#f87171; --bg-dark:#7f1d1d; --bg-card:#991b1b; --bg-hover:#b91c1c;}
[data-theme="light"]{ --primary-color:#6366f1; --primary-dark:#4f46e5; --secondary-color:#8b5cf6; --bg-dark:#f8fafc; --bg-card:#ffffff; --bg-hover:#f1f5f9; --text-primary:#0f172a; --text-secondary:#475569; --border-color:#e2e8f0;}
body{ font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background:var(--bg-dark); color:var(--text-primary); min-height:100vh; line-height:1.6; position:relative; overflow-x:hidden;}
body::before{ content:''; position:fixed; top:0; left:0; width:100%; height:100%; background: radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--primary-color) 15%, transparent) 0%, transparent 50%), radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--secondary-color) 15%, transparent) 0%, transparent 50%), radial-gradient(circle at 40% 20%, color-mix(in srgb, var(--primary-color) 10%, transparent) 0%, transparent 50%), linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-card) 50%, var(--bg-dark) 100%); background-size:200% 200%; animation:gradientShift 15s ease infinite; z-index:-2; pointer-events:none;  will-change:background-position; transform:translateZ(0); -webkit-transform:translateZ(0);  animation-play-state:running;}
body::after{ content:''; position:fixed; top:0; left:0; width:100%; height:100%; background-image: radial-gradient(2px 2px at 20% 30%, color-mix(in srgb, var(--primary-color) 30%, transparent), transparent), radial-gradient(2px 2px at 60% 70%, color-mix(in srgb, var(--secondary-color) 30%, transparent), transparent), radial-gradient(1px 1px at 50% 50%, color-mix(in srgb, var(--primary-color) 20%, transparent), transparent), radial-gradient(1px 1px at 80% 10%, color-mix(in srgb, var(--secondary-color) 20%, transparent), transparent), radial-gradient(2px 2px at 90% 60%, color-mix(in srgb, var(--primary-color) 30%, transparent), transparent), radial-gradient(1px 1px at 33% 80%, color-mix(in srgb, var(--secondary-color) 20%, transparent), transparent); background-repeat:repeat; background-size:200px 200px; animation:particleMove 20s linear infinite; z-index:-1; pointer-events:none; opacity:0.6;  will-change:transform; transform:translateZ(0); -webkit-transform:translateZ(0);}
[data-theme="light"] body::after{ opacity:0.2;}
@keyframes gradientShift{ 0%, 100%{ background-position:0% 50%; }
 50%{ background-position:100% 50%; }
}
@keyframes particleMove{ 0%{ transform:translate3d(0, 0, 0); }
 100%{ transform:translate3d(-200px, -200px, 0); }
}
@media (prefers-reduced-motion:reduce){ body::before, body::after{ animation:none !important; }
}
.container{ width:100%; max-width:100%; margin:0 auto; padding:0 1rem;}
@media (max-width:768px){ .order-section, .features-section, .promo-section, .how-it-works-section, .games-section, .faq-section, .stats{ padding:3rem 1.5rem; margin:1.5rem auto; border-radius:1.5rem; }
}
#serverPanel{ padding:0 2rem;}
@media (max-width:768px){ .container{ padding:0 0.75rem; }
  #serverPanel{ padding:0 1rem; }
}
@media (min-width:1920px){ .container{ padding:0 2rem; }
  #serverPanel{ padding:0 3rem; }
}
@media (min-width:2560px){ .container{ padding:0 3rem; }
  #serverPanel{ padding:0 4rem; }
}
.header{ background:rgba(30, 41, 59, 0.95); border-bottom:1px solid var(--border-color); padding:0.5rem 0; position:sticky; top:0; z-index:100;}
.header-content{ display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:45px; position:relative;}
.logo{ display:flex; align-items:center; gap:0.75rem; position:relative; flex-shrink:0;}
.logo a{ display:flex; align-items:center; gap:0.75rem; text-decoration:none; color:inherit;}
.logo-img{ width:36px; height:36px; object-fit:contain; transition:transform 0.3s ease, filter 0.3s ease; filter:drop-shadow(0 0 3px rgba(255, 0, 255, 0.8)) drop-shadow(0 0 6px rgba(0, 255, 255, 0.8)) drop-shadow(0 0 9px rgba(255, 0, 255, 0.6)) drop-shadow(0 0 12px rgba(0, 255, 255, 0.4)); flex-shrink:0;}
.logo:hover .logo-img{ transform:scale(1.1) rotate(5deg); filter:drop-shadow(0 0 5px rgba(255, 0, 255, 1)) drop-shadow(0 0 10px rgba(0, 255, 255, 1)) drop-shadow(0 0 15px rgba(255, 0, 255, 0.8)) drop-shadow(0 0 20px rgba(0, 255, 255, 0.6));}
.logo-icon{ font-size:1.5rem;}
.logo h1{ font-size:1rem; font-weight:700; background:linear-gradient(90deg,  #ff00ff 0%,  #00ffff 25%,  #ff00ff 50%,  #00ffff 75%,  #ff00ff 100%); background-size:200% 100%; animation:neonFlow 3s linear infinite; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin:0; text-shadow:0 0 5px rgba(255, 0, 255, 0.5), 0 0 10px rgba(0, 255, 255, 0.5), 0 0 15px rgba(255, 0, 255, 0.3); filter:drop-shadow(0 0 3px rgba(255, 0, 255, 0.4));}
.nav{ display:flex; align-items:center; gap:1rem; flex:1; justify-content:flex-end; height:100%; position:relative;}
.nav-link{ color:var(--text-secondary); text-decoration:none; transition:all 0.3s ease; font-weight:500; display:flex; align-items:center; height:100%; padding:0.375rem 0.75rem; font-size:0.875rem; border-radius:0.375rem; position:relative;}
.nav-link:hover{ color:var(--primary-color); background:rgba(99, 102, 241, 0.1);}
.nav-link.active{ color:var(--primary-color); background:rgba(99, 102, 241, 0.15);}
.chats-icon-link{ position:relative; display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; padding:0; border-radius:0.5rem; transition:all 0.3s ease;}
.chats-icon{ font-size:1.25rem; line-height:1; transition:transform 0.3s ease; filter:drop-shadow(0 0 2px rgba(99, 102, 241, 0.5));}
.chats-icon-link:hover .chats-icon{ transform:scale(1.15); filter:drop-shadow(0 0 4px rgba(99, 102, 241, 0.8));}
.chats-icon-link:hover{ background:rgba(99, 102, 241, 0.15); color:var(--primary-color);}
.chats-badge{ position:absolute; top:-0.25rem; right:-0.25rem; min-width:1.125rem; height:1.125rem; padding:0 0.25rem; background:linear-gradient(135deg, #ef4444, #f87171); color:white; border-radius:0.5625rem; font-size:0.625rem; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid var(--bg-dark); box-shadow:0 0 8px rgba(239, 68, 68, 0.6), 0 0 16px rgba(239, 68, 68, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); animation:pulseBadge 2s ease-in-out infinite; z-index:10;}
.chats-badge:empty{ display:none;}
@keyframes pulseBadge{ 0%, 100%{ transform:scale(1); box-shadow:0 0 8px rgba(239, 68, 68, 0.6), 0 0 16px rgba(239, 68, 68, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3); }
 50%{ transform:scale(1.1); box-shadow:0 0 12px rgba(239, 68, 68, 0.8), 0 0 24px rgba(239, 68, 68, 0.6), 0 2px 6px rgba(0, 0, 0, 0.4); }
}
.chats-icon-link.has-unread .chats-icon{ animation:neonPulse 2s ease-in-out infinite; filter:drop-shadow(0 0 4px rgba(99, 102, 241, 0.8)) drop-shadow(0 0 8px rgba(99, 102, 241, 0.6)) drop-shadow(0 0 12px rgba(99, 102, 241, 0.4));}
@keyframes neonPulse{ 0%, 100%{ filter:drop-shadow(0 0 4px rgba(99, 102, 241, 0.8)) drop-shadow(0 0 8px rgba(99, 102, 241, 0.6)) drop-shadow(0 0 12px rgba(99, 102, 241, 0.4)); }
 50%{ filter:drop-shadow(0 0 6px rgba(99, 102, 241, 1)) drop-shadow(0 0 12px rgba(99, 102, 241, 0.8)) drop-shadow(0 0 18px rgba(99, 102, 241, 0.6)); }
}
.hero{ text-align:center; padding:2rem 0;}
.hero-content{ text-align:center; max-width:900px; margin:0 auto; padding:0.5rem 0 1rem;}
.hero-title{ font-size:clamp(1.5rem, 3.5vw, 2rem); font-weight:800; margin-bottom:0.5rem; line-height:1.25; background:linear-gradient(135deg, #ffffff 0%, #a78bfa 50%, #6366f1 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; letter-spacing:-0.02em; display:flex; flex-direction:column; gap:0.125rem; align-items:center; justify-content:center;}
.hero-title-main,.hero-title-accent{ display:block; background:linear-gradient(135deg, #ffffff 0%, #c4b5fd 50%, #818cf8 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; filter:drop-shadow(0 2px 8px rgba(99, 102, 241, 0.3));}
.hero-title-accent{ background:linear-gradient(135deg, #a78bfa 0%, #6366f1 50%, #4f46e5 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
.hero-subtitle{ font-size:clamp(0.8125rem, 1.25vw, 0.9375rem); color:rgba(255, 255, 255, 0.85); margin:0 auto; max-width:600px; line-height:1.5; font-weight:500; letter-spacing:0.02em; text-transform:none; font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background:linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(200, 200, 255, 0.8) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
.btn{ padding:0.5rem 1rem; border:none; border-radius:0.375rem; font-size:0.8125rem; font-weight:600; cursor:pointer; transition:all 0.3s; font-family:inherit;}
.btn-primary{ background:linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color:white; white-space:nowrap; min-width:100px; font-weight:600;}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 25px rgba(99, 102, 241, 0.4); background:linear-gradient(135deg, var(--primary-dark), var(--primary-color));}
.nav .btn-primary{ padding:0.375rem 0.875rem; font-size:0.8125rem; min-width:auto; border-radius:0.375rem; display:inline-flex; align-items:center; gap:0.375rem; height:2rem; line-height:1.2; box-sizing:border-box;}
.nav .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(99, 102, 241, 0.35);}
.btn-balance{ padding:0.375rem 0.875rem; border:none; border-radius:0.375rem; font-size:0.8125rem; font-weight:600; cursor:pointer; transition:all 0.3s ease; font-family:inherit; background:linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 191, 36, 0.15)); border:1px solid rgba(245, 158, 11, 0.3); color:#f59e0b; display:inline-flex; align-items:center; gap:0.625rem; height:2rem; line-height:1.2; position:relative; overflow:visible; white-space:nowrap; box-sizing:border-box;}
.balance-display{ color:var(--text-primary); font-weight:600; font-size:0.75rem; white-space:nowrap; opacity:1; transition:opacity 0.3s ease;}
.btn-balance .balance-icon{ font-size:1.5rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; transition:transform 0.3s ease; line-height:1; width:1.2rem; height:1.2rem;}
.btn-balance .balance-text{ max-width:0; overflow:hidden; opacity:0; transition:all 0.3s ease; white-space:nowrap;}
.btn-balance:hover{ background:linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(251, 191, 36, 0.25)); border-color:rgba(245, 158, 11, 0.5); transform:translateY(-1px); box-shadow:0 6px 20px rgba(245, 158, 11, 0.3); padding-right:0.875rem;}
.btn-balance:hover .balance-text{ max-width:200px; opacity:1; margin-left:0.25rem;}
.btn-balance:hover .balance-icon{ transform:rotate(90deg) scale(1.15);}
.btn-balance:active{ transform:translateY(0); box-shadow:0 2px 10px rgba(245, 158, 11, 0.2);}
.btn-primary:active{ transform:translateY(0);}
.btn-secondary{ background:var(--bg-card); color:var(--text-primary); border:1px solid var(--border-color);}
.btn-secondary:hover{ background:var(--bg-hover);}
.btn-success{ background:var(--success-color); color:white;}
.btn-danger{ background:var(--danger-color); color:white;}
.btn-warning{ background:var(--warning-color); color:white;}
.btn-sm{ padding:0.375rem 0.75rem; font-size:0.75rem;}
.stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1rem; margin:2rem auto; padding:4rem 2rem; max-width:1400px; width:100%; position:relative; background:linear-gradient(135deg, rgba(20, 25, 35, 0.6) 0%, rgba(30, 40, 55, 0.6) 100%); border-radius:2rem; box-shadow:0 10px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(16, 185, 129, 0.1); overflow:hidden;}
.stats::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,  #00ffff 0%,  #ff00ff 25%,  #00ffff 50%,  #ff00ff 75%,  #00ffff 100%); background-size:200% 100%; animation:neonFlow 3s linear infinite; box-shadow:0 0 10px rgba(0, 255, 255, 0.5), 0 0 20px rgba(255, 0, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.3); border-radius:2rem 2rem 0 0; z-index:2;}
.stats > *{ position:relative; z-index:1;}
.stat-card{ background:var(--bg-card); border:1px solid var(--border-color); border-radius:0.75rem; padding:1rem; display:flex; align-items:center; gap:1rem; transition:transform 0.3s, box-shadow 0.3s;}
.stat-card:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(0, 0, 0, 0.3);}
.stat-icon{ font-size:2rem;}
.stat-value{ font-size:1.5rem; font-weight:700; color:var(--primary-color);}
.stat-label{ color:var(--text-secondary); font-size:0.75rem;}
.section-title{ font-size:2rem; font-weight:700; text-align:center; margin-bottom:2.5rem; background:linear-gradient(135deg, var(--text-primary), var(--primary-color)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; position:relative;}
.section-title::after{ content:''; position:absolute; bottom:-0.5rem; left:50%; transform:translateX(-50%); width:60px; height:3px; background:linear-gradient(90deg, transparent, var(--primary-color), transparent); border-radius:2px;}
.features-section{ padding:4rem 2rem; margin:2rem auto; max-width:1400px; position:relative; background:linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(51, 65, 85, 0.6) 100%); border-radius:2rem; box-shadow:0 10px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(99, 102, 241, 0.1); overflow:hidden;}
.features-section::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,  #00ffff 0%,  #ff00ff 25%,  #00ffff 50%,  #ff00ff 75%,  #00ffff 100%); background-size:200% 100%; animation:neonFlow 3s linear infinite; box-shadow:0 0 10px rgba(0, 255, 255, 0.5), 0 0 20px rgba(255, 0, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.3); border-radius:2rem 2rem 0 0; z-index:2;}
.features-section > *{ position:relative; z-index:1;}
.features-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.5rem; margin-top:2rem;}
.feature-card{ background:var(--bg-card); border:1px solid var(--border-color); border-radius:1rem; padding:2rem; text-align:center; transition:all 0.3s ease; position:relative; overflow:hidden;}
.feature-card::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent); transition:left 0.5s ease;}
.feature-card:hover::before{ left:100%;}
.feature-card:hover{ transform:translateY(-8px); border-color:var(--primary-color); box-shadow:0 12px 40px rgba(99, 102, 241, 0.2), 0 0 0 1px rgba(99, 102, 241, 0.1);}
.feature-icon{ font-size:3rem; margin-bottom:1rem; display:inline-block; transition:transform 0.3s ease;}
.feature-card:hover .feature-icon{ transform:scale(1.1) rotate(5deg);}
.feature-title{ font-size:1.25rem; font-weight:600; margin-bottom:0.75rem; color:var(--text-primary);}
.feature-description{ color:var(--text-secondary); font-size:0.875rem; line-height:1.6;}
.promo-section{ padding:3rem 2rem; margin:2rem auto; max-width:1400px; position:relative; background:linear-gradient(135deg, rgba(25, 30, 45, 0.7) 0%, rgba(40, 50, 70, 0.7) 100%); border-radius:2rem; box-shadow:0 10px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(139, 92, 246, 0.1); overflow:hidden;}
.promo-section::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,  #00ffff 0%,  #ff00ff 25%,  #00ffff 50%,  #ff00ff 75%,  #00ffff 100%); background-size:200% 100%; animation:neonFlow 3s linear infinite; box-shadow:0 0 10px rgba(0, 255, 255, 0.5), 0 0 20px rgba(255, 0, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.3); border-radius:2rem 2rem 0 0; z-index:2;}
.promo-section > *{ position:relative; z-index:1;}
.promo-card{ background:linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15)); border:1px solid rgba(99, 102, 241, 0.3); border-radius:1.5rem; padding:3rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; position:relative; overflow:hidden; box-shadow:0 10px 40px rgba(99, 102, 241, 0.1), 0 0 0 1px rgba(99, 102, 241, 0.1);}
.promo-card::before{ content:''; position:absolute; top:-50%; right:-50%; width:200%; height:200%; background:radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%); animation:promoGlow 4s ease-in-out infinite;}
@keyframes promoGlow{ 0%, 100%{transform:scale(1);opacity:0.5}
 50%{transform:scale(1.1);opacity:0.8}
}
.promo-content-wrapper{ flex:1; z-index:1; position:relative;}
.promo-badge{ display:inline-block; background:linear-gradient(135deg, #ef4444, #dc2626); color:white; padding:0.375rem 0.875rem; border-radius:1rem; font-size:0.75rem; font-weight:600; margin-bottom:1rem; box-shadow:0 4px 12px rgba(239, 68, 68, 0.3);}
.promo-title{ font-size:2rem; font-weight:700; margin-bottom:0.75rem; color:var(--text-primary);}
.promo-text{ color:var(--text-secondary); font-size:1rem; margin-bottom:1.5rem; line-height:1.6;}
.promo-visual{ z-index:1; position:relative;}
.promo-icon-large{ font-size:6rem; opacity:0.3; animation:float 3s ease-in-out infinite;}
@keyframes float{ 0%, 100%{transform:translateY(0px)}
 50%{transform:translateY(-20px)}
}
.btn-large{ padding:0.875rem 2rem; font-size:1rem;}
.how-it-works-section{ padding:4rem 2rem; margin:2rem auto; max-width:1400px; position:relative; background:linear-gradient(135deg, rgba(20, 25, 35, 0.6) 0%, rgba(35, 45, 60, 0.6) 100%); border-radius:2rem; box-shadow:0 10px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(245, 158, 11, 0.1); overflow:hidden;}
.how-it-works-section::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,  #00ffff 0%,  #ff00ff 25%,  #00ffff 50%,  #ff00ff 75%,  #00ffff 100%); background-size:200% 100%; animation:neonFlow 3s linear infinite; box-shadow:0 0 10px rgba(0, 255, 255, 0.5), 0 0 20px rgba(255, 0, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.3); border-radius:2rem 2rem 0 0; z-index:2;}
.how-it-works-section > *{ position:relative; z-index:1;}
.steps-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:2rem; margin-top:2rem; position:relative;}
.step-card{ background:var(--bg-card); border:1px solid var(--border-color); border-radius:1rem; padding:2rem; text-align:center; position:relative; transition:all 0.3s ease;}
.step-card::after{ content:''; position:absolute; top:50%; right:-1rem; width:2rem; height:2px; background:linear-gradient(90deg, var(--primary-color), transparent); transform:translateY(-50%); opacity:0.3;}
.step-card:last-child::after{ display:none;}
.step-card:hover{ transform:translateY(-5px); border-color:var(--primary-color); box-shadow:0 10px 30px rgba(99, 102, 241, 0.15);}
.step-number{ width:48px; height:48px; background:linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:700; margin:0 auto 1rem; box-shadow:0 4px 12px rgba(99, 102, 241, 0.3);}
.step-title{ font-size:1.125rem; font-weight:600; margin-bottom:0.5rem; color:var(--text-primary);}
.step-description{ color:var(--text-secondary); font-size:0.875rem; line-height:1.6;}
.games-section{ padding:4rem 2rem; margin:2rem auto; max-width:1400px; position:relative; background:linear-gradient(135deg, rgba(30, 41, 59, 0.6) 0%, rgba(45, 55, 75, 0.6) 100%); border-radius:2rem; box-shadow:0 10px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.1); overflow:hidden;}
.games-section::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,  #00ffff 0%,  #ff00ff 25%,  #00ffff 50%,  #ff00ff 75%,  #00ffff 100%); background-size:200% 100%; animation:neonFlow 3s linear infinite; box-shadow:0 0 10px rgba(0, 255, 255, 0.5), 0 0 20px rgba(255, 0, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.3); border-radius:2rem 2rem 0 0; z-index:2;}
.games-section > *{ position:relative; z-index:1;}
.games-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1.5rem; margin-top:2rem;}
.game-card{ background:var(--bg-card); border:1px solid var(--border-color); border-radius:1rem; padding:2rem 1.5rem; text-align:center; transition:all 0.3s ease; cursor:pointer;}
.game-card:hover{ transform:translateY(-5px) scale(1.02); border-color:var(--primary-color); box-shadow:0 12px 40px rgba(99, 102, 241, 0.2);}
.game-icon{ font-size:3.5rem; margin-bottom:1rem; filter:drop-shadow(0 0 10px rgba(99, 102, 241, 0.3)); transition:transform 0.3s ease;}
.game-card:hover .game-icon{ transform:scale(1.1) rotate(-5deg);}
.game-name{ font-size:1.125rem; font-weight:600; margin-bottom:0.5rem; color:var(--text-primary);}
.game-description{ color:var(--text-secondary); font-size:0.8125rem;}
.faq-section{ padding:4rem 2rem; margin:2rem auto; max-width:1400px; position:relative; background:linear-gradient(135deg, rgba(25, 30, 45, 0.7) 0%, rgba(40, 50, 70, 0.7) 100%); border-radius:2rem; box-shadow:0 10px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(139, 92, 246, 0.1); overflow:hidden;}
.faq-section::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,  #00ffff 0%,  #ff00ff 25%,  #00ffff 50%,  #ff00ff 75%,  #00ffff 100%); background-size:200% 100%; animation:neonFlow 3s linear infinite; box-shadow:0 0 10px rgba(0, 255, 255, 0.5), 0 0 20px rgba(255, 0, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.3); border-radius:2rem 2rem 0 0; z-index:2;}
.faq-section > *{ position:relative; z-index:1;}
.faq-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:1.5rem; margin-top:2rem;}
.faq-item{ background:var(--bg-card); border:1px solid var(--border-color); border-radius:1rem; padding:1.5rem; transition:all 0.3s ease;}
.faq-item:hover{ border-color:var(--primary-color); box-shadow:0 8px 24px rgba(99, 102, 241, 0.1);}
.faq-question{ font-size:1rem; font-weight:600; margin-bottom:0.75rem; color:var(--text-primary);}
.faq-answer{ color:var(--text-secondary); font-size:0.875rem; line-height:1.6;}
.forum-categories{ margin-top:2rem;}
@keyframes spin{ to{ transform:rotate(360deg); }
}
.spinner{ display:inline-block; width:20px; height:20px; border:3px solid var(--border-color); border-top-color:var(--primary-color); border-radius:50%; animation:spin 1s linear infinite;}
.forum-category-card{ transition:all 0.3s ease;}
.forum-category-card:hover{ transform:translateY(-3px); border-color:var(--primary-color); box-shadow:0 8px 24px rgba(99, 102, 241, 0.15);}
.topic-card{ transition:all 0.3s ease;}
.topic-card:hover{ transform:translateY(-2px); border-color:var(--primary-color); box-shadow:0 6px 20px rgba(99, 102, 241, 0.1);}
.forum-post{ transition:all 0.3s ease;}
.forum-post:hover{ border-color:var(--primary-color);}
.post-author{ transition:all 0.3s ease;}
.post-content{ word-break:break-word;}
@media (max-width:768px){ .section-title{ font-size:1.5rem; }
  .features-grid, .steps-grid, .games-grid, .faq-grid{ grid-template-columns:1fr; }
  .promo-card{ flex-direction:column; text-align:center; }
  .promo-icon-large{ font-size:4rem; }
  .step-card::after{ display:none; }
  .forum-post{ flex-direction:column; }
  .post-author{ min-width:auto; width:100%; }
}
.section-title{ font-size:1.25rem; font-weight:700; margin-bottom:1rem;}
.servers-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:1rem; width:100%;}
.server-card{ background:var(--bg-card); border:1px solid var(--border-color); border-radius:0.5rem; padding:0.75rem; transition:all 0.3s;}
.server-card:hover{ transform:translateY(-5px); box-shadow:0 10px 30px rgba(0, 0, 0, 0.3); border-color:var(--primary-color);}
.server-header{ display:flex; justify-content:space-between; align-items:start; margin-bottom:1rem;}
.server-name{ font-size:0.875rem; font-weight:600; margin-bottom:0.25rem;}
.server-status{ display:inline-flex; align-items:center; gap:0.375rem; padding:0.1875rem 0.5rem; border-radius:0.75rem; font-size:0.75rem; font-weight:500;}
.status-online{ background:rgba(16, 185, 129, 0.2); color:var(--success-color);}
.status-offline{ background:rgba(239, 68, 68, 0.2); color:var(--danger-color);}
.status-restarting{ background:rgba(245, 158, 11, 0.2); color:var(--warning-color);}
.status-dot{ width:8px; height:8px; border-radius:50%; display:inline-block;}
.status-online .status-dot{ background:var(--success-color); animation:pulse 2s infinite;}
.status-offline .status-dot{ background:var(--danger-color);}
.status-restarting .status-dot{ background:var(--warning-color); animation:pulse 1s infinite;}
@keyframes pulse{ 0%, 100%{opacity:1}
 50%{opacity:0.5}
}
.server-info{ margin-bottom:1rem;}
.server-info-item{ display:flex; justify-content:space-between; padding:0.5rem 0; border-bottom:1px solid var(--border-color); color:var(--text-secondary); font-size:0.875rem;}
.server-info-item:last-child{ border-bottom:none;}
.server-info-label{ font-weight:500;}
.server-info-value{ color:var(--text-primary);}
.server-actions{ display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:1rem;}
.modal{ display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.8); backdrop-filter:blur(5px);}
.modal-content{ background:var(--bg-card); margin:1% auto; border:1px solid var(--border-color); border-radius:0.75rem; width:90%; max-width:90vw; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; position:relative;}
@media (min-width:768px){ .modal-content{ max-width:500px; }
}
@media (min-width:1920px){ .modal-content{ max-width:650px; }
}
@media (min-width:2560px){ .modal-content{ max-width:800px; }
}
.modal-header{ display:flex; justify-content:space-between; align-items:center; padding:0.75rem; border-bottom:1px solid var(--border-color);}
.modal-header h3{ font-size:1.125rem; font-weight:600;}
.close{ color:var(--text-secondary); font-size:1.5rem; font-weight:bold; cursor:pointer; transition:color 0.3s;}
.close:hover{ color:var(--text-primary);}
.modal-close{ background:var(--bg-hover); border:1px solid var(--border-color); border-radius:0.375rem; color:var(--text-secondary); font-size:1.25rem; font-weight:600; cursor:pointer; padding:0.375rem 0.625rem; width:32px; height:32px; display:flex; align-items:center; justify-content:center; transition:all 0.2s ease; line-height:1; opacity:0.8;}
.modal-close:hover{ background:var(--danger-color); border-color:var(--danger-color); color:white; opacity:1; transform:scale(1.05); box-shadow:0 0 8px rgba(239, 68, 68, 0.4);}
.modal-close:active{ transform:scale(0.95);}
.modal-body{ padding:1rem; overflow-y:auto; flex:1; min-height:0;}
.modal-body::-webkit-scrollbar{ width:8px;}
.modal-body::-webkit-scrollbar-track{ background:transparent; border-radius:4px;}
.modal-body::-webkit-scrollbar-thumb{ background:var(--bg-hover); border-radius:4px; transition:background 0.3s;}
.modal-body::-webkit-scrollbar-thumb:hover{ background:var(--primary-color);}
.modal-body{ scrollbar-width:thin; scrollbar-color:var(--bg-hover) transparent;}
.form-group{ margin-bottom:0.75rem; padding:0.75rem; background:var(--bg-card); border:1px solid var(--border-color); border-radius:0.375rem; transition:all 0.3s ease;}
.form-group:hover{ border-color:rgba(99, 102, 241, 0.3); background:rgba(30, 41, 59, 0.8);}
.form-group label{ display:block; margin-bottom:0.375rem; color:var(--text-primary); font-weight:600; font-size:0.8125rem; letter-spacing:0.02em;}
.form-group input,.form-group select{ width:100%; padding:0.5rem 0.75rem; background:var(--bg-dark); border:1px solid var(--border-color); border-radius:0.375rem; color:var(--text-primary); font-size:0.8125rem; font-family:inherit; transition:all 0.3s ease;}
.form-group input:hover,.form-group select:hover{ border-color:rgba(99, 102, 241, 0.6); background:rgba(15, 23, 42, 0.9);}
.form-group input:focus,.form-group select:focus{ outline:none; border-color:var(--primary-color); box-shadow:0 0 0 3px rgba(99, 102, 241, 0.15); background:var(--bg-dark);}
.form-group input[type="number"]{ -moz-appearance:textfield; appearance:textfield; padding-right:3rem; position:relative;}
.form-group input[type="number"]::-webkit-inner-spin-button,.form-group input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0;}
.form-group input[type="number"]{ background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%), linear-gradient(225deg, var(--text-secondary) 50%, transparent 50%), linear-gradient(315deg, transparent 50%, var(--text-secondary) 50%); background-position: calc(100% - 0.5rem) calc(50% - 0.25rem), calc(100% - 0.5rem) calc(50% - 0.25rem), calc(100% - 0.5rem) calc(50% + 0.25rem), calc(100% - 0.5rem) calc(50% + 0.25rem); background-size:0.4rem 0.4rem, 0.4rem 0.4rem, 0.4rem 0.4rem, 0.4rem 0.4rem; background-repeat:no-repeat; padding-right:2.5rem;}
.form-group input[type="number"]:hover{ background-image: linear-gradient(45deg, transparent 50%, var(--primary-color) 50%), linear-gradient(135deg, var(--primary-color) 50%, transparent 50%), linear-gradient(225deg, var(--primary-color) 50%, transparent 50%), linear-gradient(315deg, transparent 50%, var(--primary-color) 50%);}
.form-group input[type="number"]:focus{ background-image: linear-gradient(45deg, transparent 50%, var(--primary-color) 50%), linear-gradient(135deg, var(--primary-color) 50%, transparent 50%), linear-gradient(225deg, var(--primary-color) 50%, transparent 50%), linear-gradient(315deg, transparent 50%, var(--primary-color) 50%);}
.form-group small.form-help{ display:block; margin-top:0.75rem; color:var(--text-secondary); font-size:0.875rem; line-height:1.5; transition:all 0.3s ease;}
.form-group small.form-help#slotPriceInfo,.form-group small.form-help#tickratePriceInfo{ color:var(--primary-color); font-weight:600; padding:0.625rem 0.875rem; background:rgba(99, 102, 241, 0.15); border-radius:0.5rem; border-left:3px solid var(--primary-color); margin-top:0.75rem; display:inline-block; font-size:0.9rem;}
.modal-footer{ display:flex; justify-content:flex-end; gap:1rem; padding-top:1rem; border-top:1px solid var(--border-color);}
.order-section{ padding:4rem 2rem; margin:3rem auto 2rem; max-width:1400px; position:relative; background:linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(30, 41, 59, 0.6) 100%); border-radius:2rem; box-shadow:0 10px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(99, 102, 241, 0.1); overflow:hidden;}
.order-section::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,  #00ffff 0%,  #ff00ff 25%,  #00ffff 50%,  #ff00ff 75%,  #00ffff 100%); background-size:200% 100%; animation:neonFlow 3s linear infinite; box-shadow:0 0 10px rgba(0, 255, 255, 0.5), 0 0 20px rgba(255, 0, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.3); border-radius:2rem 2rem 0 0; z-index:2;}
.order-section > *{ position:relative; z-index:1;}
.section-subtitle{ text-align:center; color:var(--text-secondary); margin-bottom:3rem;}
.plans-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:1rem; margin-bottom:2rem; width:100%;}
.plan-card{ background:var(--bg-card); border:2px solid var(--border-color); border-radius:0.75rem; padding:1rem; transition:all 0.3s; cursor:pointer;}
.plan-card:hover{ transform:translateY(-3px); border-color:var(--primary-color); box-shadow:0 8px 20px rgba(99, 102, 241, 0.2);}
.plan-card.selected{ border-color:var(--primary-color); background:rgba(99, 102, 241, 0.1);}
.plan-header{ margin-bottom:1rem;}
.plan-name{ font-size:1.125rem; font-weight:700; margin-bottom:0.75rem;}
.plan-price{ display:flex; align-items:baseline; gap:0.5rem;}
.price-amount{ font-size:2.5rem; font-weight:700; color:var(--primary-color);}
.price-period{ color:var(--text-secondary); font-size:1rem;}
.plan-features ul{ list-style:none; margin-bottom:1rem;}
.plan-features li{ padding:0.5rem 0; border-bottom:1px solid var(--border-color); color:var(--text-secondary); font-size:0.8125rem;}
.plan-features li:last-child{ border-bottom:none;}
.plan-features li::before{ content:'✓ '; color:var(--success-color); font-weight:bold; margin-right:0.375rem;}
.order-form-container{ margin-top:3rem;}
.order-form-card{ background:var(--bg-card); border:1px solid var(--border-color); border-radius:1rem; padding:2rem; max-width:600px; margin:0 auto;}
.order-form-card h3{ font-size:1.5rem; margin-bottom:1.5rem;}
.selected-plan-info{ background:rgba(99, 102, 241, 0.1); border:1px solid var(--primary-color); border-radius:0.5rem; padding:1rem; margin-bottom:1.5rem;}
.selected-plan{ color:var(--text-primary); font-size:1.1rem;}
.order-summary{ background:var(--bg-dark); border:1px solid var(--border-color); border-radius:0.5rem; padding:1.5rem; margin:1.5rem 0;}
.installation-status{ background:var(--bg-dark); border:1px solid var(--border-color); border-radius:0.5rem; padding:1.5rem; margin:1.5rem 0;}
.installation-status h4{ margin-bottom:1rem; color:var(--text-primary);}
.progress-bar{ width:100%; height:8px; background:var(--bg-card); border-radius:4px; overflow:hidden; margin-bottom:0.75rem;}
.progress-fill{ height:100%; background:linear-gradient(90deg, var(--primary-color), var(--secondary-color)); width:0%; transition:width 0.3s ease; border-radius:4px;}
.progress-text{ color:var(--text-secondary); font-size:0.875rem; margin:0;}
.summary-row{ display:flex; justify-content:space-between; padding:0.75rem 0; border-bottom:1px solid var(--border-color);}
.summary-row:last-child{ border-bottom:none; font-weight:600; font-size:1.1rem;}
.summary-row .price{ color:var(--primary-color); font-size:1.25rem;}
.btn-large{ width:100%; padding:0.75rem; font-size:0.9375rem;}
.loading{ text-align:center; padding:4rem 0;}
.spinner{ border:4px solid var(--border-color); border-top:4px solid var(--primary-color); border-radius:50%; width:50px; height:50px; animation:spin 1s linear infinite; margin:0 auto 1rem;}
@keyframes spin{ 0%{transform:rotate(0deg)}
 100%{transform:rotate(360deg)}
}
.spinner-small{ display:inline-block; border:2px solid rgba(255, 255, 255, 0.1); border-top:2px solid currentColor; border-radius:50%; width:14px; height:14px; animation:spin 0.8s linear infinite; margin-right:6px; vertical-align:middle;}
.panel-section{ background:transparent; border:none; border-radius:0; padding:0; margin-bottom:0;}
.panel-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem;}
.server-block-wrapper{ margin-top:1rem; margin-bottom:2rem;}
.server-neon-bar{ width:100%; height:4px; background:linear-gradient(90deg,  #ff00ff 0%,  #00ffff 25%,  #ff00ff 50%,  #00ffff 75%,  #ff00ff 100%); background-size:200% 100%; animation:neonFlow 3s linear infinite; box-shadow:0 0 10px rgba(255, 0, 255, 0.5), 0 0 20px rgba(0, 255, 255, 0.5), 0 0 30px rgba(255, 0, 255, 0.3); border-radius:1rem 1rem 0 0; margin-top:0; margin-bottom:0;}
.server-top-section{ background:var(--bg-card); border:1px solid var(--border-color); border-radius:0 0 1rem 1rem; padding:0; margin-top:0; margin-bottom:0; box-shadow:0 4px 6px rgba(0, 0, 0, 0.1); position:relative; overflow:hidden;}
.server-resources-background{ position:absolute; top:0; left:0; right:0; bottom:0; z-index:0; pointer-events:none; opacity:0.15; display:flex; flex-direction:column; gap:0;}
.resource-graph-bg-wrapper{ width:100%; height:33.333%; position:relative; display:flex; align-items:center;}
.resource-graph-bg{ width:100%; height:100%; display:block; position:absolute; top:0; left:0;}
.resource-label-bg-container{ position:absolute; right:1.5rem; top:0.75rem; z-index:1; pointer-events:none; display:flex; flex-direction:column; align-items:flex-end; gap:0.25rem;}
.resource-label-bg{ font-size:0.7rem; font-weight:700; color:var(--text-primary); opacity:0.8; text-transform:uppercase; letter-spacing:0.1em; text-shadow:0 0 20px rgba(255, 255, 255, 0.5); font-family:'Inter', sans-serif; line-height:1;}
.resource-percent-bg{ font-size:0.85rem; font-weight:600; opacity:0.9; text-shadow:0 0 15px rgba(255, 255, 255, 0.6); font-family:'Inter', sans-serif; line-height:1; letter-spacing:0.05em;}
.resource-graph-bg-wrapper:nth-child(1) .resource-label-bg{ color:#14b8a6; opacity:0.85;}
.resource-graph-bg-wrapper:nth-child(1) .resource-percent-bg{ color:#14b8a6; opacity:0.95;}
.resource-graph-bg-wrapper:nth-child(2) .resource-label-bg{ color:#3b82f6; opacity:0.85;}
.resource-graph-bg-wrapper:nth-child(2) .resource-percent-bg{ color:#3b82f6; opacity:0.95;}
.resource-graph-bg-wrapper:nth-child(3) .resource-label-bg{ color:#f59e0b; opacity:0.85;}
.resource-graph-bg-wrapper:nth-child(3) .resource-percent-bg{ color:#f59e0b; opacity:0.95;}
.resource-graph-bg-wrapper:nth-child(1){ background:linear-gradient(180deg, rgba(20, 184, 166, 0.1) 0%, transparent 100%);}
.resource-graph-bg-wrapper:nth-child(2){ background:linear-gradient(180deg, rgba(59, 130, 246, 0.1) 0%, transparent 100%);}
.resource-graph-bg-wrapper:nth-child(3){ background:linear-gradient(180deg, rgba(245, 158, 11, 0.1) 0%, transparent 100%);}
@keyframes neonFlow{ 0%{ background-position:0% 50%; }
 100%{ background-position:200% 50%; }
}
.server-top-section > .server-header{ padding:1rem 2rem 0 2rem; position:relative; z-index:1;}
.server-top-section > .server-info-section{ padding:0 2rem 1rem 2rem; position:relative; z-index:1;}
.server-header{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;}
.server-header-info{ display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap;}
.server-info-badge{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; background:var(--bg-card); border:1px solid var(--border-color); border-radius:1rem; font-weight:600; font-size:0.875rem; transition:all 0.3s ease; color:var(--text-primary); position:relative; overflow:hidden;}
.server-info-badge::before{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)); opacity:0; transition:opacity 0.3s ease;}
.server-info-badge:hover::before{ opacity:1;}
.server-info-badge:hover{ border-color:rgba(99, 102, 241, 0.4); transform:translateY(-1px); box-shadow:0 4px 12px rgba(99, 102, 241, 0.2);}
.server-info-badge .info-icon{ font-size:1rem; opacity:0.8; position:relative; z-index:1;}
.server-info-badge .info-label{ color:var(--text-secondary); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.5px; position:relative; z-index:1;}
.server-info-badge .info-value{ color:var(--text-primary); font-weight:700; margin-left:0.25rem; position:relative; z-index:1;}
.server-resources{ display:flex; flex-direction:column; gap:0.25rem; padding:0; background:transparent; margin-bottom:1rem;}
.resource-graph-item{ display:flex; align-items:center; gap:0.5rem;}
.resource-graph-label{ font-size:0.75rem; font-weight:600; color:var(--text-secondary); min-width:60px; text-align:right;}
.resource-graph-max{ font-size:0.7rem; font-weight:500; color:var(--text-secondary); min-width:90px; text-align:left; opacity:0.8; white-space:nowrap;}
.resource-graph-wrapper{ flex:1; position:relative;}
.resource-graph-canvas{ width:100%; height:50px; display:block; background:transparent; position:relative;}
.resource-divider{ position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent); opacity:0.5;}
.resource-item{ display:flex; flex-direction:column; gap:0.75rem;}
.resource-header{ display:flex; justify-content:space-between; align-items:center;}
.resource-label{ font-size:0.875rem; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:0.5px;}
.resource-value{ font-size:0.875rem; font-weight:700; color:var(--text-primary);}
.resource-progress-wrapper{ display:flex; justify-content:center; align-items:center;}
.resource-progress-circle{ position:relative; width:60px; height:60px;}
.progress-ring{ transform:rotate(-90deg);}
.progress-ring-circle-bg{ fill:none; stroke:rgba(99, 102, 241, 0.1); stroke-width:6;}
.progress-ring-circle{ fill:none; stroke:#f59e0b; stroke-width:6; stroke-linecap:round; stroke-dasharray:163.36; stroke-dashoffset:163.36; transition:stroke-dashoffset 0.5s ease, stroke 0.3s ease;}
.progress-ring-circle.cpu-low{ stroke:#10b981;}
.progress-ring-circle.cpu-medium{ stroke:#f59e0b;}
.progress-ring-circle.cpu-high{ stroke:#ef4444;}
.progress-circle-value{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:0.75rem; font-weight:700; color:var(--text-primary);}
.resource-progress-bar-wrapper{ display:flex; flex-direction:column; gap:0.5rem;}
.resource-progress-bar{ width:100%; height:8px; background:rgba(99, 102, 241, 0.1); border-radius:4px; overflow:hidden; position:relative;}
.resource-progress-fill{ height:100%; background:linear-gradient(90deg, #f97316, #ea580c); border-radius:4px; transition:width 0.5s ease, background 0.3s ease; position:relative; overflow:hidden;}
.resource-progress-fill::after{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation:shimmer 2s infinite;}
.resource-progress-fill.ram-low{ background:linear-gradient(90deg, #10b981, #059669);}
.resource-progress-fill.ram-medium{ background:linear-gradient(90deg, #f59e0b, #d97706);}
.resource-progress-fill.ram-high{ background:linear-gradient(90deg, #f97316, #ea580c);}
.resource-progress-fill.memory-low{ background:linear-gradient(90deg, #10b981, #059669);}
.resource-progress-fill.memory-medium{ background:linear-gradient(90deg, #f59e0b, #d97706);}
.resource-progress-fill.memory-high{ background:linear-gradient(90deg, #f97316, #ea580c);}
.resource-progress-text{ font-size:0.75rem; color:var(--text-secondary); font-weight:500;}
@keyframes shimmer{ 0%{ transform:translateX(-100%); }
 100%{ transform:translateX(100%); }
}
.server-title-group{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; width:100%;}
.server-title-group .server-status-badge{ justify-self:start;}
.server-title-group .server-title{ justify-self:center; text-align:center;}
.server-title-group .server-ip-display{ justify-self:end;}
@media (max-width:768px){ .server-title-group{ grid-template-columns:1fr; gap:0.75rem; }
  .server-title-group .server-status-badge, .server-title-group .server-title, .server-title-group .server-ip-display{ justify-self:center; }
  .server-resources{ grid-template-columns:1fr; gap:1rem; padding:1rem; }
  .server-header{ flex-direction:column; align-items:flex-start; }
  .server-header-info{ width:100%; justify-content:center; }
}
.server-title{ font-size:1.75rem; font-weight:700; margin:0; background:linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
.server-status-badge{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; background:var(--bg-card); border:1px solid var(--border-color); border-radius:1rem; font-weight:600; font-size:0.875rem; transition:all 0.3s ease; color:var(--text-primary); position:relative; overflow:hidden;}
.server-status-badge::before{ content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)); opacity:0; transition:opacity 0.3s ease;}
.server-status-badge:hover::before{ opacity:1;}
.server-status-badge:hover{ border-color:rgba(99, 102, 241, 0.4); transform:translateY(-1px); box-shadow:0 4px 12px rgba(99, 102, 241, 0.2);}
.server-status-badge .status-dot{ position:relative; z-index:1;}
.server-status-badge #serverStatusText{ position:relative; z-index:1;}
.server-ip-display{ display:inline-flex; align-items:center; gap:0.625rem; padding:0.5rem 1rem; background:linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2)); border:1px solid rgba(99, 102, 241, 0.4); border-radius:0.625rem; color:var(--text-primary); font-size:0.9375rem; font-weight:700; font-family:'Courier New', monospace; cursor:pointer; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden; box-shadow:0 2px 8px rgba(99, 102, 241, 0.15);}
.server-ip-display::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition:left 0.5s;}
.server-ip-display:hover::before{ left:100%;}
.server-ip-display:hover{ background:linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3)); border-color:rgba(99, 102, 241, 0.6); transform:translateY(-2px); box-shadow:0 6px 20px rgba(99, 102, 241, 0.3);}
.server-ip-display:active{ transform:translateY(0); box-shadow:0 2px 8px rgba(99, 102, 241, 0.2);}
.ip-icon{ font-size:1.125rem; opacity:0.9; filter:drop-shadow(0 0 4px rgba(99, 102, 241, 0.5)); transition:all 0.3s ease;}
.server-ip-display:hover .ip-icon{ opacity:1; transform:scale(1.1); filter:drop-shadow(0 0 6px rgba(99, 102, 241, 0.7));}
.ip-text{ color:#ffffff; letter-spacing:0.75px; text-shadow:0 0 8px rgba(99, 102, 241, 0.6), 0 0 12px rgba(139, 92, 246, 0.4); transition:all 0.3s ease;}
.server-ip-display:hover .ip-text{ text-shadow:0 0 12px rgba(99, 102, 241, 0.8), 0 0 16px rgba(139, 92, 246, 0.6);}
.server-ip-display.copied{ background:linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(5, 150, 105, 0.3)); border-color:rgba(16, 185, 129, 0.5); box-shadow:0 4px 16px rgba(16, 185, 129, 0.3);}
.server-info-section{ margin-top:1.5rem;}
.server-control-buttons{ display:flex; justify-content:center; align-items:center; gap:1rem; margin-top:2.5rem; flex-wrap:wrap;}
.info-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:0.75rem; width:100%;}
#tab-info .info-grid{ grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));}
#tab-configuration .info-grid{ grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));}
@media (max-width:768px){ #tab-info .info-grid{ grid-template-columns:1fr; }
  #tab-configuration .info-grid{ grid-template-columns:1fr; }
}
.info-grid-compact{ display:flex; gap:0.75rem; width:100%; flex-wrap:wrap;}
.info-card-compact{ background:linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)); border:1px solid rgba(99, 102, 241, 0.2); border-radius:0.5rem; padding:0.75rem 1rem; text-align:center; transition:all 0.3s ease; position:relative; overflow:hidden; flex:1; min-width:150px; max-width:300px;}
.info-card-compact::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--primary-color), var(--secondary-color)); transform:scaleX(0); transition:transform 0.3s ease;}
.info-card-compact:hover{ transform:translateY(-2px); border-color:rgba(99, 102, 241, 0.4); box-shadow:0 4px 12px rgba(99, 102, 241, 0.2);}
.info-card-compact:hover::before{ transform:scaleX(1);}
.info-label-compact{ color:var(--text-secondary); font-size:0.75rem; margin-bottom:0.5rem; text-transform:uppercase; letter-spacing:0.5px; font-weight:500;}
.info-value-compact{ font-size:1rem; font-weight:700; margin-bottom:0.5rem; color:var(--text-primary); word-break:break-all; line-height:1.2;}
.info-card{ background:var(--bg-card); border:1px solid var(--border-color); border-radius:0.375rem; padding:0.75rem; text-align:left; transition:all 0.3s ease; position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:auto; margin-bottom:0;}
.info-card:hover{ border-color:rgba(99, 102, 241, 0.3); background:rgba(30, 41, 59, 0.8);}
.info-label{ display:block; color:var(--text-primary); font-size:0.8125rem; margin-bottom:0.375rem; font-weight:600; letter-spacing:0.02em; line-height:1.2;}
.info-value{ font-size:0.875rem; font-weight:600; margin-bottom:0.25rem; color:var(--text-primary); word-break:break-all; line-height:1.3;}
.info-card .btn{ margin-top:0.5rem; align-self:flex-start; padding:0.375rem 0.75rem; font-size:0.75rem;}
.subsection-title{ font-size:1.125rem; font-weight:600; margin-bottom:1rem; color:var(--text-primary);}
.actions-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:1rem;}
.action-btn{ display:flex; flex-direction:column; align-items:center; gap:0.5rem; padding:1.5rem; border:none; border-radius:0.5rem; font-size:1rem; font-weight:600; cursor:pointer; transition:all 0.3s;}
.action-icon{ font-size:2rem;}
.server-control-buttons{ display:flex; justify-content:center; align-items:center; gap:1rem; margin-top:2.5rem; flex-wrap:wrap;}
.control-btn{ display:flex; align-items:center; gap:0.5rem; padding:0.625rem 1.25rem; border:none; border-radius:0.5rem; font-size:0.875rem; font-weight:600; cursor:pointer; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden; box-shadow:0 2px 8px rgba(0, 0, 0, 0.15); white-space:nowrap;}
.control-btn::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition:left 0.5s;}
.control-btn:hover::before{ left:100%;}
.control-btn:hover{ transform:translateY(-2px); box-shadow:0 4px 16px rgba(0, 0, 0, 0.25);}
.control-btn:active{ transform:translateY(0); box-shadow:0 2px 8px rgba(0, 0, 0, 0.15);}
.control-btn.btn-success{ background:linear-gradient(135deg, #10b981, #059669); color:white; box-shadow:0 2px 8px rgba(16, 185, 129, 0.3);}
.control-btn.btn-success:hover{ background:linear-gradient(135deg, #059669, #047857); box-shadow:0 4px 16px rgba(16, 185, 129, 0.4);}
.control-btn.btn-danger{ background:linear-gradient(135deg, #ef4444, #dc2626); color:white; box-shadow:0 2px 8px rgba(239, 68, 68, 0.3);}
.control-btn.btn-danger:hover{ background:linear-gradient(135deg, #dc2626, #b91c1c); box-shadow:0 4px 16px rgba(239, 68, 68, 0.4);}
.control-btn.btn-warning{ background:linear-gradient(135deg, #f59e0b, #d97706); color:white; box-shadow:0 2px 8px rgba(245, 158, 11, 0.3);}
.control-btn.btn-warning:hover{ background:linear-gradient(135deg, #d97706, #b45309); box-shadow:0 4px 16px rgba(245, 158, 11, 0.4);}
.control-icon{ font-size:1rem; line-height:1; filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));}
.settings-form{ margin-top:1rem; padding:1.5rem; background:rgba(30, 41, 59, 0.4); border-radius:1rem; border:1px solid var(--border-color);}
.form-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:0.75rem; margin-bottom:0;}
.connection-info{ margin-top:1rem;}
.connection-item{ background:var(--bg-dark); border:1px solid var(--border-color); border-radius:0.5rem; padding:1rem; margin-bottom:1rem;}
.connection-item label{ display:block; color:var(--text-secondary); font-size:0.875rem; margin-bottom:0.5rem;}
.connection-value{ display:flex; align-items:center; gap:1rem;}
.connection-value code{ flex:1; background:var(--bg-card); padding:0.5rem; border-radius:0.25rem; font-family:'Courier New', monospace; word-break:break-all;}
.logs-container{ margin-top:1rem;}
.logs-header{ display:flex; justify-content:flex-end; margin-bottom:1rem;}
.logs-content{ background:var(--bg-dark); border:1px solid var(--border-color); border-radius:0.5rem; padding:1rem; max-height:400px; overflow-y:auto; font-family:'Courier New', monospace; font-size:0.875rem;}
.installation-console{ margin-top:1rem;}
.console-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;}
.console-status{ color:var(--warning-color); font-weight:600; display:flex; align-items:center; gap:0.5rem;}
.console-status::before{ content:'⏳'; animation:pulse 2s infinite;}
.console-status.completed::before{ content:'✅'; animation:none;}
.console-status.error::before{ content:'❌'; animation:none;}
@keyframes pulse{ 0%, 100%{opacity:1}
 50%{opacity:0.5}
}
.console-split-container{ display:grid; grid-template-columns:1fr 300px; gap:0.75rem; margin-top:0.5rem;}
.console-content-wrapper{ display:flex; flex-direction:column; min-height:400px; height:400px; max-height:400px; overflow:hidden;}
.console-content{ background:var(--bg-dark); border:1px solid var(--border-color); border-radius:0.375rem; padding:0.5rem; height:400px; min-height:400px; line-height:1.2; max-height:400px; overflow-y:auto; overflow-x:hidden; font-family:'Courier New', monospace; font-size:0.75rem; line-height:1.2; flex-shrink:0; box-sizing:border-box;}
.console-commands-panel{ background:var(--bg-card); border:1px solid var(--border-color); border-radius:0.375rem; padding:0.75rem; display:flex; flex-direction:column; height:400px; min-height:400px; max-height:400px; box-sizing:border-box;}
.commands-title{ font-size:0.875rem; font-weight:600; margin:0 0 0.5rem 0; color:var(--text-primary);}
.commands-search{ margin-bottom:0.5rem;}
.commands-search-input{ width:100%; padding:0.5rem; background:var(--bg-dark); border:1px solid var(--border-color); border-radius:0.375rem; color:var(--text-primary); font-size:0.8125rem; transition:all 0.3s ease;}
.commands-search-input:focus{ outline:none; border-color:var(--primary-color); box-shadow:0 0 0 2px rgba(99, 102, 241, 0.1);}
.commands-list{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:0.25rem;}
#commandsList::-webkit-scrollbar{ width:8px;}
#commandsList::-webkit-scrollbar-track{ background:rgba(15, 23, 42, 0.8); border-radius:10px; border:1px solid rgba(51, 65, 85, 0.3);}
#commandsList::-webkit-scrollbar-thumb{ background:linear-gradient(135deg, rgba(99, 102, 241, 0.7), rgba(139, 92, 246, 0.7)); border-radius:10px; border:1px solid rgba(99, 102, 241, 0.3); transition:all 0.3s ease;}
#commandsList::-webkit-scrollbar-thumb:hover{ background:linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(139, 92, 246, 0.9)); border-color:rgba(99, 102, 241, 0.5);}
#commandsList::-webkit-scrollbar-thumb:active{ background:linear-gradient(135deg, rgba(99, 102, 241, 1), rgba(139, 92, 246, 1));}
#commandsList{ scrollbar-width:thin; scrollbar-color:rgba(99, 102, 241, 0.7) rgba(15, 23, 42, 0.8);}
.commands-loading{ text-align:center; color:var(--text-secondary); font-size:0.75rem; padding:1rem;}
.command-item{ padding:0.5rem; background:var(--bg-dark); border:1px solid var(--border-color); border-radius:0.375rem; cursor:pointer; transition:all 0.2s ease; font-size:0.75rem;}
.command-item:hover{ background:rgba(99, 102, 241, 0.1); border-color:rgba(99, 102, 241, 0.3); transform:translateX(2px);}
.command-name{ font-weight:600; color:var(--primary-color); margin-bottom:0.25rem;}
.command-description{ color:var(--text-secondary); font-size:0.6875rem; line-height:1.3;}
.command-usage{ color:var(--text-secondary); font-size:0.6875rem; font-family:'Courier New', monospace; margin-top:0.25rem; opacity:0.8;}
@media (max-width:1024px){ .console-split-container{ flex-direction:column; }
  .console-commands-panel{ width:100% !important; max-height:250px; }
}
.console-content::-webkit-scrollbar{ width:8px;}
.console-content::-webkit-scrollbar-track{ background:rgba(30, 41, 59, 0.5); border-radius:10px; margin:4px 0;}
.console-content::-webkit-scrollbar-thumb{ background:linear-gradient(135deg, rgba(99, 102, 241, 0.6), rgba(139, 92, 246, 0.6)); border-radius:10px; border:1px solid rgba(99, 102, 241, 0.3); transition:all 0.3s ease;}
.console-content::-webkit-scrollbar-thumb:hover{ background:linear-gradient(135deg, rgba(99, 102, 241, 0.8), rgba(139, 92, 246, 0.8)); box-shadow:0 0 8px rgba(99, 102, 241, 0.5);}
.console-content{ scrollbar-width:thin; scrollbar-color:rgba(99, 102, 241, 0.6) rgba(30, 41, 59, 0.5);}
#tab-console .panel-section{ padding:0.5rem;}
#tab-console .subsection-title{ font-size:0.8125rem; margin-bottom:0.375rem; padding:0;}
#tab-console #consoleStatusMessage{ padding:0.5rem; margin-bottom:0.5rem; font-size:0.75rem;}
.console-input-container{ display:flex; gap:0.5rem; margin-bottom:0.5rem; padding:0.5rem; background:linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1)); border:1px solid rgba(99, 102, 241, 0.2); border-radius:0.5rem; box-shadow:0 4px 6px rgba(0, 0, 0, 0.1);}
.console-input-container #consoleCommandInput{ flex:1; padding:0.5rem 0.75rem; background:var(--bg-dark); border:1px solid var(--border-color); border-radius:0.375rem; color:var(--text-primary); font-size:0.8125rem; font-family:'Courier New', monospace; transition:all 0.3s ease; outline:none;}
.console-input-container #consoleCommandInput::placeholder{ color:var(--text-secondary); opacity:0.7;}
.console-input-container #consoleCommandInput:focus{ border-color:var(--primary-color); background:rgba(99, 102, 241, 0.05); box-shadow:0 0 0 3px rgba(99, 102, 241, 0.1); transform:translateY(-1px);}
.console-input-container .btn{ padding:0.5rem 0.875rem; border-radius:0.375rem; font-weight:600; font-size:0.8125rem; transition:all 0.3s ease; border:none; cursor:pointer; white-space:nowrap; position:relative; overflow:hidden;}
.console-input-container .btn::before{ content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%; background:rgba(255, 255, 255, 0.2); transform:translate(-50%, -50%); transition:width 0.6s, height 0.6s;}
.console-input-container .btn:hover::before{ width:300px; height:300px;}
.console-input-container .btn-success{ background:linear-gradient(135deg, var(--success-color), #059669); color:white; box-shadow:0 4px 12px rgba(16, 185, 129, 0.3);}
.console-input-container .btn-success:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(16, 185, 129, 0.4);}
.console-input-container .btn-success:active{ transform:translateY(0);}
.console-input-container .btn-secondary{ background:var(--bg-card); color:var(--text-primary); border:2px solid var(--border-color); box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);}
.console-input-container .btn-secondary:hover{ background:var(--bg-hover); border-color:var(--primary-color); transform:translateY(-2px); box-shadow:0 4px 12px rgba(99, 102, 241, 0.2);}
.console-input-container .btn-secondary:active{ transform:translateY(0);}
.console-line{ padding:0; margin:0; line-height:1.2; color:inherit !important; white-space:pre-wrap; word-wrap:break-word; min-height:auto;}
.console-line.success{ color:var(--success-color);}
.console-line.error{ color:var(--danger-color);}
.console-line.info{ color:var(--primary-color);}
.console-line.warning{ color:var(--warning-color);}
.log-line{ padding:0.25rem 0; color:var(--text-secondary); border-bottom:1px solid rgba(255, 255, 255, 0.05); word-wrap:break-word;}
.log-line:last-child{ border-bottom:none;}
.log-line.log-error{ color:var(--danger-color); background:rgba(239, 68, 68, 0.1); border-left:3px solid var(--danger-color); padding-left:0.75rem; padding-right:0.5rem;}
.log-line.log-warning{ color:var(--warning-color); background:rgba(245, 158, 11, 0.1); border-left:3px solid var(--warning-color); padding-left:0.75rem; padding-right:0.5rem;}
.log-line.log-success{ color:var(--success-color); background:rgba(16, 185, 129, 0.1); border-left:3px solid var(--success-color); padding-left:0.75rem; padding-right:0.5rem;}
.log-line.log-info{ color:var(--primary-color); background:rgba(99, 102, 241, 0.1); border-left:3px solid var(--primary-color); padding-left:0.75rem; padding-right:0.5rem;}
.text-muted{ color:var(--text-secondary); text-align:center; padding:2rem;}
.nav-link.active{ color:var(--primary-color);}
.auth-section{ display:flex; justify-content:center; align-items:center; min-height:50vh; padding:1.5rem 0;}
.auth-card{ background:var(--bg-card); border:1px solid var(--border-color); border-radius:0.75rem; padding:1.5rem; max-width:400px; width:100%;}
.auth-title{ font-size:1.5rem; font-weight:700; margin-bottom:0.375rem; text-align:center;}
.auth-subtitle{ text-align:center; color:var(--text-secondary); margin-bottom:1.25rem; font-size:0.875rem;}
.auth-form{ margin-bottom:1rem;}
.auth-footer{ text-align:center; padding-top:1.5rem; border-top:1px solid var(--border-color); color:var(--text-secondary);}
.auth-footer a{ color:var(--primary-color); text-decoration:none; font-weight:500;}
.auth-footer a:hover{ text-decoration:underline;}
.auth-nav{ display:flex; gap:1rem; align-items:center; position:relative;}
.user-nav{ display:flex; align-items:center; gap:1rem; position:relative; height:100%;}
.user-dropdown{ position:relative; display:inline-block;}
.user-name{ color:var(--text-primary); font-weight:500; cursor:pointer; padding:0.375rem 0.875rem; border-radius:0.375rem; transition:all 0.2s ease; display:inline-flex; align-items:center; gap:0.5rem; background:rgba(99, 102, 241, 0.1); border:1px solid rgba(99, 102, 241, 0.2); position:relative; white-space:nowrap; user-select:none; height:2rem; line-height:1.2; font-size:0.8125rem; box-sizing:border-box;}
.user-icon{ font-size:0.9375rem; opacity:0.9;}
.user-name::after{ display:none;}
.user-dropdown.active .user-name::after{ transform:rotate(180deg);}
.user-name:hover{ background:rgba(99, 102, 241, 0.2); border-color:rgba(99, 102, 241, 0.4); transform:translateY(-1px); box-shadow:0 4px 12px rgba(99, 102, 241, 0.2);}
.dropdown-menu{ display:none; position:absolute; top:calc(100% + 0.5rem); right:0; background:var(--bg-card); border:1px solid var(--border-color); border-radius:0.5rem; box-shadow:0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.1); min-width:180px; z-index:1000; overflow:hidden; animation:fadeInDown 0.2s ease-out;}
#userSuggestions{  transform:translateZ(0);}
@keyframes fadeInDown{ from{ opacity:0; transform:translateY(-10px); }
 to{ opacity:1; transform:translateY(0); }
}
.user-dropdown.active .dropdown-menu,.user-dropdown.active .dropdown-menu{ display:block;}
.dropdown-item{ display:flex; align-items:center; gap:0.625rem; padding:0.625rem 0.875rem; color:var(--text-primary); text-decoration:none; transition:all 0.2s ease; border:none; background:none; width:100%; text-align:left; cursor:pointer; font-size:0.8125rem; font-family:inherit; font-weight:500; border-bottom:1px solid rgba(255, 255, 255, 0.05); position:relative;}
.dropdown-item:last-child{ border-bottom:none;}
.dropdown-item span:first-child{ font-size:0.875rem; opacity:0.9; width:1rem; display:flex; align-items:center; justify-content:center;}
.dropdown-item:hover{ background:linear-gradient(90deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1)); color:var(--primary-color); padding-left:1rem;}
.dropdown-item:hover span:first-child{ opacity:1; transform:scale(1.1);}
.dropdown-item.active{ background:linear-gradient(90deg, var(--primary-color), var(--secondary-color)); color:white; border-bottom-color:transparent;}
.dropdown-item:active{ transform:scale(0.98);}
.dropdown-item.active:hover{ background:linear-gradient(90deg, var(--primary-dark), var(--primary-color)); padding-left:1.25rem;}
.auth-message{ margin-top:2rem;}
.footer{ background:var(--bg-card); border-top:1px solid var(--border-color); padding:2rem 0 1rem; margin-top:auto; position:relative;}
.footer-content{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1.5rem; margin-bottom:1.5rem;}
.footer-section{ display:flex; flex-direction:column; gap:0.75rem;}
.footer-title{ font-size:1.25rem; font-weight:700; background:linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:0.375rem;}
.footer-description{ color:var(--text-secondary); font-size:0.8125rem; line-height:1.5;}
.footer-heading{ font-size:0.875rem; font-weight:600; color:var(--text-primary); margin-bottom:0.375rem;}
.footer-links{ list-style:none; display:flex; flex-direction:column; gap:0.75rem;}
.footer-links li a{ color:var(--text-secondary); text-decoration:none; font-size:0.875rem; transition:color 0.2s, padding-left 0.2s; display:inline-block;}
.footer-links li a:hover{ color:var(--primary-color); padding-left:0.5rem;}
.footer-social{ display:flex; gap:1rem; margin-top:0.5rem;}
.social-link{ display:flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; background:rgba(99, 102, 241, 0.1); border:1px solid rgba(99, 102, 241, 0.2); border-radius:0.5rem; color:var(--text-primary); text-decoration:none; font-size:1.25rem; transition:all 0.2s;}
.social-link:hover{ background:rgba(99, 102, 241, 0.2); border-color:rgba(99, 102, 241, 0.4); transform:translateY(-2px);}
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:1rem; border-top:1px solid var(--border-color); flex-wrap:wrap; gap:1rem;}
.footer-bottom p{ color:var(--text-secondary); font-size:0.8125rem; margin:0;}
.footer-version{ color:var(--text-secondary); font-size:0.75rem; opacity:0.7;}
.auth-required-message{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:3rem 2rem; background:var(--bg-card); border:1px solid var(--border-color); border-radius:1rem; max-width:500px; margin:2rem auto; box-shadow:0 4px 20px rgba(0, 0, 0, 0.3);}
.auth-icon{ font-size:4rem; margin-bottom:1.5rem; filter:drop-shadow(0 4px 8px rgba(99, 102, 241, 0.3)); animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{ 0%, 100%{ transform:scale(1); opacity:1; }
 50%{ transform:scale(1.1); opacity:0.8; }
}
.auth-title{ font-size:1.75rem; font-weight:700; color:var(--text-primary); margin-bottom:0.75rem; background:linear-gradient(135deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
.auth-description{ color:var(--text-secondary); font-size:1rem; line-height:1.6; margin-bottom:2rem;}
.auth-btn{ display:inline-flex; align-items:center; justify-content:center; padding:0.875rem 2rem; background:linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color:white; text-decoration:none; border-radius:0.5rem; font-weight:600; font-size:1rem; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow:0 4px 12px rgba(99, 102, 241, 0.3); position:relative; overflow:hidden;}
.auth-btn::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition:left 0.5s;}
.auth-btn:hover::before{ left:100%;}
.auth-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 20px rgba(99, 102, 241, 0.4);}
.auth-btn:active{ transform:translateY(0); box-shadow:0 4px 12px rgba(99, 102, 241, 0.3);}
@media (max-width:768px){ .footer-content{ grid-template-columns:1fr; gap:2rem; }
  .footer-bottom{ flex-direction:column; text-align:center; }
}
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:1.5rem; margin-bottom:2rem;}
.tabs{ display:flex; gap:0; margin-bottom:0; border-bottom:none; background:transparent; padding:0; border-radius:0;}
.error-tabs{ display:flex; gap:0.5rem; margin-bottom:1.5rem; border-bottom:2px solid var(--bg-hover); padding-bottom:0.5rem;}
.error-tab-btn{ background:transparent; border:none; color:var(--text-secondary); padding:0.75rem 1.5rem; cursor:pointer; border-radius:0.5rem 0.5rem 0 0; font-size:0.875rem; font-weight:500; transition:all 0.2s ease; position:relative; display:flex; align-items:center; gap:0.5rem;}
.error-tab-btn:hover{ background:var(--bg-hover); color:var(--text-primary);}
.error-tab-btn.active{ background:var(--bg-card); color:var(--primary-color); border-bottom:2px solid var(--primary-color); margin-bottom:-2px;}
.error-category-tab{ display:none;}
.error-category-tab.active{ display:block;}
.error-badge-small{ background:var(--danger-color); color:white; border-radius:10px; padding:0.125rem 0.5rem; font-size:0.75rem; font-weight:600; min-width:20px; text-align:center;}
.error-badge{ display:inline-block; background:#ff4444; color:white; border-radius:10px; padding:2px 8px; font-size:0.75rem; font-weight:bold; margin-left:0.5rem; min-width:20px; text-align:center;}
.tab-btn{ padding:0.75rem 1.5rem; background:transparent; border:none; border-bottom:3px solid transparent; color:var(--text-secondary); font-size:0.9375rem; font-weight:500; cursor:pointer; transition:all 0.3s; font-family:inherit; border-radius:0.5rem 0.5rem 0 0; position:relative;}
.tab-btn:hover{ color:var(--text-primary); background:rgba(99, 102, 241, 0.1);}
.tab-btn.active{ color:var(--primary-color); border-bottom-color:var(--primary-color); background:var(--bg-card); font-weight:600; border:1px solid var(--border-color); border-bottom:none; border-radius:0.5rem 0.5rem 0 0; z-index:1; position:relative;}
.tab-content{ display:none; background:var(--bg-card); border:1px solid var(--border-color); border-top:none; border-radius:0 0 0.75rem 0.75rem; padding:1.5rem; margin-bottom:2rem; margin-top:-1px; position:relative; z-index:0;}
.tab-content.active{ display:block;}
.section-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem;}
.table-container{ overflow-x:auto; background:var(--bg-card); border:1px solid var(--border-color); border-radius:0.5rem;}
.admin-table{ width:100%; border-collapse:collapse;}
.admin-table thead{ background:var(--bg-dark);}
.admin-table th{ padding:1rem; text-align:left; font-weight:600; color:var(--text-primary); border-bottom:2px solid var(--border-color);}
.admin-table td{ padding:1rem; border-bottom:1px solid var(--border-color); color:var(--text-secondary);}
.admin-table tbody tr:hover{ background:var(--bg-hover);}
.admin-table tbody tr:last-child td{ border-bottom:none;}
.badge{ display:inline-block; padding:0.25rem 0.75rem; border-radius:1rem; font-size:0.875rem; font-weight:500;}
.badge-admin{ background:rgba(99, 102, 241, 0.2); color:var(--primary-color);}
.badge-user{ background:rgba(148, 163, 184, 0.2); color:var(--text-secondary);}
.status-badge{ display:inline-flex; align-items:center; gap:0.5rem; padding:0.25rem 0.75rem; border-radius:1rem; font-size:0.875rem; font-weight:500;}
.status-badge.status-online{ background:rgba(16, 185, 129, 0.2); color:var(--success-color);}
.status-badge.status-offline{ background:rgba(239, 68, 68, 0.2); color:var(--danger-color);}
.status-badge.status-unknown{ background:rgba(148, 163, 184, 0.2); color:var(--text-secondary);}
.game-servers-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(350px, 1fr)); gap:1.5rem;}
.game-server-card{ background:var(--bg-card); border:1px solid var(--border-color); border-radius:1rem; padding:1.5rem; transition:all 0.3s;}
.game-server-card:hover{ transform:translateY(-5px); box-shadow:0 10px 30px rgba(0, 0, 0, 0.3); border-color:var(--primary-color);}
.game-server-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;}
.game-server-header h4{ font-size:1.25rem; font-weight:600;}
.game-server-info{ margin-bottom:1rem;}
.game-server-info .info-item{ padding:0.5rem 0; border-bottom:1px solid var(--border-color); color:var(--text-secondary); font-size:0.875rem;}
.game-server-info .info-item:last-child{ border-bottom:none;}
.game-server-actions{ display:flex; gap:0.5rem; flex-wrap:wrap;}
@media (max-width:768px){ .hero-title{ font-size:2rem; }
 .servers-grid{ grid-template-columns:1fr; }
 .stats{ grid-template-columns:1fr; }
 .nav{ gap:1rem; }
 .plans-grid{ grid-template-columns:1fr; }
 .form-row{ grid-template-columns:1fr; }
 .info-grid{ grid-template-columns:1fr; }
 .actions-grid{ grid-template-columns:1fr; }
 .server-control-buttons{ flex-direction:column; }
 .control-btn{ width:100%; justify-content:center; }
 .server-header{ flex-direction:column; align-items:flex-start; }
  .server-block-wrapper{ margin-top:0.75rem; margin-bottom:1.5rem; }
  .server-top-section > .server-header{ padding:0.75rem 1.5rem 0 1.5rem; }
  .server-top-section > .server-info-section{ padding:0 1.5rem 0.75rem 1.5rem; }
}
@media (min-width:1400px){ .servers-grid{ grid-template-columns:repeat(auto-fill, minmax(400px, 1fr)); }
  .info-grid{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
  .stats{ grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (min-width:1920px){ .servers-grid{ grid-template-columns:repeat(auto-fill, minmax(450px, 1fr)); }
  .info-grid{ grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); }
  .stats{ grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); }
  .plans-grid{ grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); }
}
@media (min-width:2560px){ .servers-grid{ grid-template-columns:repeat(auto-fill, minmax(500px, 1fr)); }
  .info-grid{ grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
  .stats{ grid-template-columns:repeat(auto-fit, minmax(360px, 1fr)); }
  .plans-grid{ grid-template-columns:repeat(auto-fit, minmax(400px, 1fr)); }
  .section-title{ font-size:2.5rem; }
  .hero-title{ font-size:4rem; }
}
@media (min-width:3840px){ .servers-grid{ grid-template-columns:repeat(auto-fill, minmax(600px, 1fr)); }
  .info-grid{ grid-template-columns:repeat(auto-fit, minmax(350px, 1fr)); }
  .stats{ grid-template-columns:repeat(auto-fit, minmax(450px, 1fr)); }
  .plans-grid{ grid-template-columns:repeat(auto-fit, minmax(500px, 1fr)); }
  .section-title{ font-size:3rem; }
  .hero-title{ font-size:5rem; }
}
.notification{ position:fixed; top:1rem; right:1rem; min-width:300px; max-width:420px; padding:0.875rem 1rem; border-radius:0.5rem; background:var(--bg-card); border:1px solid var(--border-color); box-shadow:0 10px 30px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2); z-index:10000; display:flex; align-items:center; gap:0.75rem; animation:notificationSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1); font-size:0.875rem; line-height:1.4; word-wrap:break-word; transition:all 0.25s ease;}
.notification-icon-wrapper{ width:36px; height:36px; min-width:36px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:0.375rem; font-size:1.125rem;}
.notification-icon{ font-size:1.125rem; line-height:1; display:flex; align-items:center; justify-content:center;}
.notification-content{ flex:1; display:flex; flex-direction:column; gap:0; min-width:0;}
.notification-message{ font-weight:500; color:var(--text-primary); font-size:0.875rem; line-height:1.5; word-wrap:break-word; white-space:pre-line;}
.notification-close{ background:none; border:none; color:var(--text-secondary); font-size:1.25rem; cursor:pointer; padding:0.25rem; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:0.25rem; transition:all 0.2s ease; flex-shrink:0; line-height:1; opacity:0.7;}
.notification-close:hover{ background:var(--bg-hover); color:var(--text-primary); opacity:1;}
.notification-success{ background:var(--bg-card); border:1px solid rgba(0, 255, 255, 0.5); box-shadow:0 10px 30px rgba(0, 0, 0, 0.3),  0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 255, 255, 0.3), 0 0 8px rgba(0, 255, 255, 0.4), 0 0 16px rgba(0, 255, 255, 0.2), inset 0 0 8px rgba(0, 255, 255, 0.1);}
.notification-success .notification-icon-wrapper{ background:rgba(0, 255, 255, 0.15); box-shadow:0 0 8px rgba(0, 255, 255, 0.3);}
.notification-success .notification-icon{ color:#00ffff; filter:drop-shadow(0 0 4px rgba(0, 255, 255, 0.8));}
.notification-error{ background:var(--bg-card); border:1px solid rgba(255, 0, 255, 0.5); box-shadow:0 10px 30px rgba(0, 0, 0, 0.3),  0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 0, 255, 0.3), 0 0 8px rgba(255, 0, 255, 0.4), 0 0 16px rgba(255, 0, 255, 0.2), inset 0 0 8px rgba(255, 0, 255, 0.1);}
.notification-error .notification-icon-wrapper{ background:rgba(255, 0, 255, 0.15); box-shadow:0 0 8px rgba(255, 0, 255, 0.3);}
.notification-error .notification-icon{ color:#ff00ff; filter:drop-shadow(0 0 4px rgba(255, 0, 255, 0.8));}
.notification-warning{ background:var(--bg-card); border:1px solid rgba(255, 200, 0, 0.5); box-shadow:0 10px 30px rgba(0, 0, 0, 0.3),  0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 200, 0, 0.3), 0 0 8px rgba(255, 200, 0, 0.4), 0 0 16px rgba(255, 200, 0, 0.2), inset 0 0 8px rgba(255, 200, 0, 0.1);}
.notification-warning .notification-icon-wrapper{ background:rgba(255, 200, 0, 0.15); box-shadow:0 0 8px rgba(255, 200, 0, 0.3);}
.notification-warning .notification-icon{ color:#ffc800; filter:drop-shadow(0 0 4px rgba(255, 200, 0, 0.8));}
.notification-info{ background:var(--bg-card); border:1px solid rgba(99, 102, 241, 0.5); box-shadow:0 10px 30px rgba(0, 0, 0, 0.3),  0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(99, 102, 241, 0.3), 0 0 8px rgba(99, 102, 241, 0.4), 0 0 16px rgba(99, 102, 241, 0.2), inset 0 0 8px rgba(99, 102, 241, 0.1);}
.notification-info .notification-icon-wrapper{ background:rgba(99, 102, 241, 0.15); box-shadow:0 0 8px rgba(99, 102, 241, 0.3);}
.notification-info .notification-icon{ color:var(--primary-color); filter:drop-shadow(0 0 4px rgba(99, 102, 241, 0.8));}
@keyframes notificationSlideIn{ from{ transform:translateX(calc(100% + 1.5rem)); opacity:0; }
 to{ transform:translateX(0); opacity:1; }
}
@keyframes notificationSlideOut{ from{ transform:translateX(0); opacity:1; }
 to{ transform:translateX(calc(100% + 1.5rem)); opacity:0; }
}
.notification-slide-out{ animation:notificationSlideOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;}
@media (max-width:768px){ .notification{ top:1rem; right:1rem; left:1rem; min-width:auto; max-width:none; }
}
 .server-title-group{ width:100%; justify-content:space-between; }
 .server-top-section{ padding:1.5rem; }
 .info-grid{ grid-template-columns:1fr; }
}
.monitoring-section{ padding:4rem 2rem; margin:3rem auto 2rem; max-width:1400px; position:relative; background:linear-gradient(135deg, rgba(15, 23, 42, 0.6) 0%, rgba(30, 41, 59, 0.6) 100%); border-radius:2rem; box-shadow:0 10px 40px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(99, 102, 241, 0.1); overflow:hidden;}
.monitoring-section::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,  #00ffff 0%,  #ff00ff 25%,  #00ffff 50%,  #ff00ff 75%,  #00ffff 100%); background-size:200% 100%; animation:neonFlow 3s linear infinite; box-shadow:0 0 10px rgba(0, 255, 255, 0.5), 0 0 20px rgba(255, 0, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.3); border-radius:2rem 2rem 0 0; z-index:2;}
.monitoring-header{ text-align:center; margin-bottom:2rem;}
.file-tree-container{ font-family:'Courier New', monospace; font-size:0.875rem;}
.file-tree-item{ margin:0.125rem 0;}
.file-tree-item-header{ display:flex; align-items:center; padding:0.25rem 0.5rem; cursor:pointer; border-radius:0.25rem; transition:background-color 0.2s ease;}
.file-tree-item-header:hover{ background-color:var(--bg-hover);}
.file-tree-icon{ margin-right:0.5rem; font-size:0.875rem;}
.file-tree-name{ flex:1; color:var(--text-primary);}
.file-tree-children{ margin-left:1rem; border-left:1px solid var(--border-color); padding-left:0.5rem;}
.command-item{ display:flex; flex-direction:column; padding:0.75rem; margin:0.25rem 0; background:var(--bg-hover); border-radius:0.375rem; border:1px solid var(--border-color); cursor:pointer; transition:all 0.2s ease;}
.command-item:hover{ background:var(--bg-secondary); transform:translateY(-1px); box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);}
.command-name{ font-weight:600; color:var(--primary-color); margin-bottom:0.25rem;}
.command-desc{ color:var(--text-primary); margin-bottom:0.25rem; font-size:0.875rem;}
.command-example{ color:var(--text-secondary); font-size:0.75rem; font-family:'Courier New', monospace; background:var(--bg-primary); padding:0.25rem 0.5rem; border-radius:0.25rem; border:1px solid var(--border-color);}
.player-card, .map-card, .server-card{ display:flex; flex-direction:column; padding:1rem; background:var(--bg-secondary); border-radius:0.5rem; border:1px solid var(--border-color); transition:all 0.2s ease;}
.player-card:hover, .map-card:hover, .server-card:hover{ transform:translateY(-2px); box-shadow:0 4px 12px rgba(0, 0, 0, 0.15); border-color:var(--primary-color);}
.server-card-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:0.75rem;}
.server-card-title{ font-size:1.125rem; font-weight:600; color:var(--text-primary);}
.server-card-status{ padding:0.25rem 0.75rem; border-radius:1rem; font-size:0.75rem; font-weight:600; text-transform:uppercase;}
.server-card-status.status-online{ background:var(--success-color); color:white;}
.server-card-status.status-offline{ background:var(--error-color); color:white;}
.server-card-status.status-creating{ background:var(--warning-color); color:white;}
.server-card-status.status-verifying{ background:var(--info-color); color:white;}
.server-card-info{ display:flex; flex-direction:column; gap:0.5rem; margin-bottom:1rem;}
.server-card-detail{ display:flex; justify-content:space-between; align-items:center;}
.server-card-detail .label{ color:var(--text-secondary); font-size:0.875rem;}
.server-card-detail .value{ color:var(--text-primary); font-weight:500;}
.server-card-actions{ margin-top:auto;}
.server-card-actions .btn{ width:100%;}
.user-suggestion-item{ padding:0.5rem 0.75rem; cursor:pointer; border-bottom:1px solid var(--border-color); transition:background-color 0.2s ease;}
.user-suggestion-item:hover{ background:var(--bg-hover);}
.user-suggestion-item:last-child{ border-bottom:none;}
.spinner{ width:1rem; height:1rem; border:2px solid var(--bg-hover); border-top:2px solid var(--primary-color); border-radius:50%; animation:spin 1s linear infinite;}
@keyframes spin{ 0%{transform:rotate(0deg)}
 100%{transform:rotate(360deg)}
}
@media (max-width:768px){ .command-item{ padding:0.5rem; }
 .server-card-info{ gap:0.25rem; }
 .server-card-detail{ font-size:0.875rem; }
}
.monitoring-controls{ display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:2rem; padding:1.5rem; background:rgba(30, 41, 59, 0.3); border-radius:1rem; border:1px solid var(--border-color);}
.filter-group{ display:flex; flex-direction:column; gap:0.5rem; flex:1; min-width:150px;}
.filter-group label{ font-size:0.875rem; font-weight:600; color:var(--text-secondary);}
.filter-select{ padding:0.5rem 0.75rem; background:var(--bg-dark); border:1px solid var(--border-color); border-radius:0.375rem; color:var(--text-primary); font-size:0.875rem; font-family:inherit; transition:all 0.3s ease;}
.filter-select:hover{ border-color:rgba(99, 102, 241, 0.6);}
.filter-select:focus{ outline:none; border-color:var(--primary-color); box-shadow:0 0 0 3px rgba(99, 102, 241, 0.15);}
.monitoring-table-container{ background:rgba(30, 41, 59, 0.3); border-radius:1rem; padding:1.5rem; border:1px solid var(--border-color); overflow-x:auto;}
.loading-indicator{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem; gap:1rem;}
.monitoring-table{ width:100%; border-collapse:collapse; background:transparent;}
.monitoring-table thead{ background:rgba(30, 41, 59, 0.5); position:sticky; top:0; z-index:10;}
.monitoring-table th{ padding:1rem; text-align:left; font-weight:600; color:var(--text-primary); font-size:0.875rem; text-transform:uppercase; letter-spacing:0.05em; border-bottom:2px solid var(--border-color);}
.monitoring-table td{ padding:1rem; border-bottom:1px solid var(--border-color); color:var(--text-secondary); font-size:0.875rem;}
.monitoring-table tbody tr{ transition:all 0.2s ease;}
.monitoring-table tbody tr:hover{ background:rgba(99, 102, 241, 0.1); transform:translateX(4px);}
.monitoring-table tbody tr:last-child td{ border-bottom:none;}
.rating-badge{ display:inline-flex; flex-direction:column; align-items:center; gap:0.25rem; padding:0.5rem 0.75rem; border-radius:0.5rem; font-weight:600; min-width:80px;}
.rating-value{ font-size:1.125rem; font-weight:700;}
.rating-stars{ font-size:0.75rem; line-height:1;}
.server-name-cell{ display:flex; flex-direction:column; gap:0.25rem;}
.server-mode{ font-size:0.75rem; color:var(--text-secondary); font-weight:400;}
.server-ip{ background:rgba(99, 102, 241, 0.1); padding:0.25rem 0.5rem; border-radius:0.25rem; font-family:'Courier New', monospace; font-size:0.8125rem;}
.players-cell{ display:flex; flex-direction:column; gap:0.5rem; min-width:120px;}
.players-info{ display:flex; justify-content:space-between; align-items:center; font-size:0.875rem;}
.players-count{ font-weight:600; color:var(--text-primary);}
.players-percent{ color:var(--text-secondary); font-size:0.75rem;}
.players-bar{ width:100%; height:6px; background:var(--bg-hover); border-radius:3px; overflow:hidden;}
.players-bar-fill{ height:100%; border-radius:3px; transition:width 0.3s ease;}
.server-uptime{ color:var(--text-secondary); font-size:0.875rem;}
.empty-message,.error-message{ text-align:center; padding:3rem; color:var(--text-secondary); font-size:1rem;}
@media (max-width:768px){ .monitoring-controls{ flex-direction:column; }
  .filter-group{ min-width:100%; }
  .monitoring-table{ font-size:0.75rem; }
  .monitoring-table th, .monitoring-table td{ padding:0.75rem 0.5rem; }
}
.console-content{ background:#0d1117 !important; color:#c9d1d9 !important; font-family:'Courier New', 'Consolas', 'Monaco', monospace !important; font-size:0.75rem !important; line-height:1.4 !important; padding:1rem !important; border-radius:0.5rem !important; border:1px solid #30363d !important; box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.3) !important;}
.console-line{ margin:0; padding:0; word-wrap:break-word; white-space:pre-wrap; line-height:1.2; min-height:auto; color:inherit !important;}
.console-line-system{ color:#58a6ff;}
.console-line-error{ color:#f85149;}
.console-line-warning{ color:#d29922;}
.console-line-success{ color:#3fb950;}
.console-line-info{ color:#8b949e;}
.console-line [style*="color"]{ display:inline;}
.console-status{ font-size:0.75rem; font-weight:500; padding:0.25rem 0.5rem; border-radius:0.25rem; background:rgba(255, 255, 255, 0.1);}
.console-status-connected{ color:#3fb950;}
.console-status-disconnected{ color:#f85149;}
.console-status::before{ content:'●'; margin-right:0.25rem;}
.console-status-disconnected::before{ content:'○';}
.console-input-container input{ background:#0d1117 !important; border:1px solid #30363d !important; color:#c9d1d9 !important; font-family:'Courier New', 'Consolas', 'Monaco', monospace !important;}
.console-input-container input:focus{ border-color:#58a6ff !important; outline:none; box-shadow:0 0 0 2px rgba(88, 166, 255, 0.2) !important;}
.console-input-container input::placeholder{ color:#6e7681 !important;}
.console-content::-webkit-scrollbar{ width:8px; height:8px;}
.console-content::-webkit-scrollbar-track{ background:#161b22; border-radius:4px;}
.console-content::-webkit-scrollbar-thumb{ background:#30363d; border-radius:4px;}
.console-content::-webkit-scrollbar-thumb:hover{ background:#484f58;}
.scrolling *{ animation-play-state:paused !important; transition:none !important;}
.scrolling .server-card,.scrolling .status-badge,.scrolling .btn{ will-change:auto !important; transform:none !important;}
@media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}
.server-card,.status-badge,.btn-primary,.btn-secondary{ will-change:transform; transform:translateZ(0); backface-visibility:hidden; -webkit-backface-visibility:hidden;}
::-webkit-scrollbar{ width:8px; height:8px;}
::-webkit-scrollbar-track{ background:var(--bg-secondary);}
::-webkit-scrollbar-thumb{ background:var(--text-muted); border-radius:4px;}
::-webkit-scrollbar-thumb:hover{ background:var(--primary-color);}
/* ========================================== СТИЛІ ДЛЯ СИСТЕМИ ПОВІДОМЛЕНЬ ========================================== */#notification-container{ position:fixed; top:20px; right:20px; z-index:10000; max-width:400px; pointer-events:none;}
#notification-container > div{ pointer-events:auto; margin-bottom:10px; box-shadow:0 4px 12px rgba(0, 0, 0, 0.15); border-radius:6px; overflow:hidden;}
.graph-placeholder{ padding:40px; text-align:center; color:var(--text-muted); background:var(--bg-secondary); border:2px dashed var(--border-color); border-radius:8px; font-style:italic;}
.progress-bar{ height:8px; background:var(--bg-secondary); border-radius:4px; overflow:hidden; margin:8px 0;}
.progress-fill{ height:100%; border-radius:4px; transition:width 0.3s ease, background-color 0.3s ease;}
.status-online{color:var(--success-color)}
.status-offline{color:var(--danger-color)}
.status-creating{color:var(--warning-color)}
.status-installing{color:var(--warning-color)}
.status-restarting{color:var(--warning-color)}
.status-error{color:var(--danger-color)}
.file-tree{ max-height:400px; overflow-y:auto; border:1px solid var(--border-color); border-radius:6px; background:var(--bg-primary);}
.file-item{ padding:8px 12px; border-bottom:1px solid var(--border-color); cursor:pointer; transition:background-color 0.2s ease;}
.file-item:hover{ background:var(--bg-hover);}
.file-item:last-child{ border-bottom:none;}
.loading{ padding:20px; text-align:center; color:var(--text-muted); font-style:italic;}
/* ========================================== СТИЛІ ДЛЯ МОДАЛЬНИХ ВІКОН ========================================== */.modal{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.7); z-index:10000; animation:fadeIn 0.3s ease;}
.modal-content{ position:relative; margin:5% auto; max-width:600px; background:var(--bg-primary); border-radius:8px; box-shadow:0 10px 30px rgba(0, 0, 0, 0.3); animation:slideIn 0.3s ease;}
.modal-header{ display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid var(--border-color);}
.modal-header h3{ margin:0; color:var(--text-primary);}
.modal-close{ background:none; border:none; font-size:24px; cursor:pointer; color:var(--text-muted); padding:0; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:background-color 0.2s ease;}
.modal-close:hover{ background:var(--bg-hover); color:var(--text-primary);}
.modal-body{ padding:20px; max-height:70vh; overflow-y:auto;}
@keyframes fadeIn{ from{opacity:0}
 to{opacity:1}
}
@keyframes slideIn{ from{ transform:translateY(-50px); opacity:0; }
 to{ transform:translateY(0); opacity:1; }
}
.payment-methods{ display:flex; gap:10px; flex-wrap:wrap; margin-top:15px;}
.server-item, .player-item, .map-item{ padding:12px; border:1px solid var(--border-color); border-radius:6px; margin-bottom:8px; cursor:pointer; transition:all 0.2s ease; background:var(--bg-secondary);}
.server-item:hover, .player-item:hover, .map-item:hover{ background:var(--bg-hover); border-color:var(--primary-color); transform:translateY(-2px);}
.server-item h4, .player-item .player-name, .map-item .map-name{ margin:0 0 5px 0; color:var(--text-primary);}
.server-item p, .player-item .player-score{ margin:0; color:var(--text-muted); font-size:14px;}
.players-count{ font-weight:600; color:var(--primary-color); margin-bottom:15px;}
.players-grid{ display:grid; gap:8px;}
.maps-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px;}
.map-item.current{ border-color:var(--success-color); background:rgba(40, 167, 69, 0.1);}
.current-badge{ display:inline-block; padding:2px 8px; background:var(--success-color); color:white; border-radius:12px; font-size:12px; margin-top:5px;}

/* CSS Containment для кращої продуктивності */
.main-content {
    contain: layout style paint;
}

.sidebar {
    contain: layout style;
}

.card, .panel, .modal {
    contain: layout style paint;
}

/* Оптимізація для мобільних пристроїв */
@media (max-width: 768px) {
    * {
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}