/* Design systém: farby, systémové písmo, jemné doladenie. Načítava sa po style.css. */
:root {
  --font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --primary: #7c8cff;
  --primary-light: #a5b0ff;
  --primary-dark: #5b6cf0;
  --secondary: #c084fc;
  --accent: #f472b6;
  --bg-dark: #0b0d0e;
  --bg-darker: #080a0b;
  --bg-card: rgba(18, 21, 23, 0.88);
  --bg-card-hover: rgba(24, 28, 31, 0.94);
  --bg-input: rgba(11, 13, 14, 0.85);
  --border: rgba(124, 140, 255, 0.16);
  --glow: rgba(124, 140, 255, 0.4);
  --radius: 10px;
  --radius-lg: 14px;
  --radius-sm: 6px;
}
body { font-family: var(--font); }
.bg-gradient {
  background:
    radial-gradient(ellipse 80% 50% at 12% -10%, rgba(124, 140, 255, 0.2), transparent),
    radial-gradient(ellipse 60% 40% at 95% 5%, rgba(244, 114, 182, 0.13), transparent),
    radial-gradient(ellipse 60% 40% at 60% 105%, rgba(34, 211, 238, 0.1), transparent);
}
.bg-glow-1 { background: rgba(124, 140, 255, 0.12); }
.bg-glow-2 { background: rgba(192, 132, 252, 0.1); }
.bg-glow-3 { background: rgba(244, 114, 182, 0.08); }
.navbar, .navbar.scrolled { background: rgba(11, 13, 14, 0.9); }
.logo-text { background-image: linear-gradient(135deg, var(--primary-light), var(--secondary) 60%, var(--accent)); }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--secondary) 60%, var(--accent)); box-shadow: 0 4px 18px rgba(124, 140, 255, 0.3); }
.btn-primary:hover { box-shadow: 0 6px 26px rgba(124, 140, 255, 0.45); filter: brightness(1.08); }
@keyframes btnGlow {
  0%, 100% { box-shadow: 0 4px 15px rgba(124, 140, 255, 0.25); }
  50% { box-shadow: 0 4px 30px rgba(192, 132, 252, 0.5), 0 0 60px rgba(124, 140, 255, 0.22); }
}
.stat-card:hover, .server-card:hover { border-color: var(--primary); box-shadow: 0 16px 36px rgba(124, 140, 255, 0.16); }
.stat-card::before { background: linear-gradient(135deg, var(--primary), var(--accent)); }
.gradient-text { background-image: linear-gradient(135deg, var(--primary-light), var(--secondary) 55%, var(--accent)); }
svg.i { width: 1.1em; height: 1.1em; vertical-align: -0.18em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.ok { color: var(--success); } svg.i.bad { color: var(--danger); } svg.i.warn { color: var(--warning); }
.stat-icon svg.i, .empty-icon svg.i { width: 1em; height: 1em; color: var(--primary-light); }

/* Výkon: bez animovaných rozmazaných vrstiev, pozadie rieši .bg-gradient */
.bg-glow { display: none; }
footer { content-visibility: auto; contain-intrinsic-size: auto 400px; }
img { height: auto; }

/* Vzhľad */
::selection { background: rgba(124, 140, 255, 0.35); }
html { scrollbar-color: rgba(124, 140, 255, 0.4) transparent; scrollbar-width: thin; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.stat-card, .server-card, .dashboard-card, .form-card, .recruitment-card {
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), border-color 160ms ease, box-shadow 160ms ease;
}
.stat-card:hover, .server-card:hover { transform: translateY(-4px); }
/* Mobil */
html { -webkit-tap-highlight-color: transparent; }
body { overflow-x: hidden; }
a, button, label, input, select, textarea { touch-action: manipulation; }
img, video, iframe { max-width: 100%; }
@media (max-width: 768px) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  input, select, textarea { font-size: 16px !important; } /* iOS nezoomuje pri focuse */
  .btn, .nav-link, .filter-btn, .tag-checkbox, .hashtag-checkbox { min-height: 44px; }
  .btn { display: inline-flex; align-items: center; justify-content: center; }
  .container { padding-left: 16px; padding-right: 16px; }
  h1, .hero h1, .page-hero h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); line-height: 1.15; overflow-wrap: anywhere; }
  .servers-grid, .stats-grid, .about-grid, .contact-grid, .content-grid, .faq-wrapper { grid-template-columns: 1fr !important; }
  .hero, .page-hero { padding-top: 110px; padding-bottom: 40px; }
  .table-responsive, .legal-table-wrap, .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { max-width: 100%; }
  .search-form { flex-direction: column; gap: 10px; }
  .search-form .btn { width: 100%; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }
  .dashboard-item { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dashboard-item-actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .footer-content, .footer-grid { grid-template-columns: 1fr !important; gap: 24px; }
  .bg-grid { display: none; }
}
@media (max-width: 480px) {
  .stat-card:hover, .server-card:hover { transform: none; }
  .cookie-consent { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .cookie-consent-actions { width: 100%; }
  .cookie-consent-actions .btn { flex: 1 1 100%; }
  .back-to-top { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (hover: none) { .stat-card:hover, .server-card:hover { transform: none; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }