/* Xenal Theme (Sci-Fi / Neon / Glass) */

:root{
  --x-bg: #040817;
  --x-panel: rgba(10, 20, 38, .55);
  --x-panel-2: rgba(8, 16, 32, .75);
  --x-border: rgba(120, 220, 255, .22);
  --x-border-2: rgba(255, 80, 150, .18);
  --x-text: #dbeafe;
  --x-muted: rgba(219, 234, 254, .72);
  --x-cyan: #36e3ff;
  --x-pink: #ff3d8a;
  --x-glow: 0 0 0.75rem rgba(54, 227, 255, .20), 0 0 2.5rem rgba(255, 61, 138, .10);
  --x-radius: 18px;
}

body.theme-xenal{
  background: var(--x-bg);
  color: var(--x-text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  letter-spacing: .2px;
  overflow-x: hidden;
}

/* Starfield + subtle nebula */
body.theme-xenal::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(1200px 800px at 70% 0%, rgba(255,61,138,.16), transparent 55%),
    radial-gradient(900px 700px at 20% 10%, rgba(54,227,255,.14), transparent 55%),
    radial-gradient(800px 800px at 80% 80%, rgba(54,227,255,.08), transparent 50%),
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.55), transparent 50%),
    radial-gradient(1px 1px at 60% 40%, rgba(255,255,255,.45), transparent 50%),
    radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.35), transparent 50%),
    radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,.35), transparent 50%),
    radial-gradient(1px 1px at 75% 65%, rgba(255,255,255,.28), transparent 50%);
  opacity: .95;
}

/* Layout helpers */
.theme-wrap{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 18px;
}

.theme-main{
  padding: 18px 0 52px;
}

/* Header */
.theme-header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(4, 8, 23, .62);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(120, 220, 255, .12);
}

.xenal-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 14px;
}

.xenal-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: var(--x-text);
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.xenal-brand__mark{
  display:inline-flex;
  width: 34px;
  height: 34px;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(54,227,255,.18), rgba(255,61,138,.16));
  border: 1px solid rgba(120, 220, 255, .20);
  box-shadow: var(--x-glow);
}

.xenal-brand__text{
  font-size: 14px;
  opacity: .92;
}

.xenal-nav{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.xenal-nav a{
  color: rgba(219,234,254,.85);
  text-decoration:none;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
}

.xenal-nav a:hover,
.xenal-nav a.is-active{
  border-color: rgba(54,227,255,.24);
  background: rgba(10, 20, 38, .55);
  box-shadow: 0 0 0.9rem rgba(54,227,255,.10);
}

.xenal-nav__pill{
  border-color: rgba(255,61,138,.22) !important;
  background: rgba(255,61,138,.07);
}

/* Glass + Panels */
.xenal-glass{
  background: linear-gradient(180deg, rgba(10, 20, 38, .60), rgba(8, 16, 32, .78));
  border: 1px solid var(--x-border);
  border-radius: var(--x-radius);
  box-shadow: var(--x-glow);
}

.xenal-panel{
  padding: 16px;
}

.xenal-panel--narrow{
  margin-top: 14px;
}

.xenal-placeholder{
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px dashed rgba(120,220,255,.22);
  color: rgba(219,234,254,.78);
}

/* Background glows inside page */
.xenal-page{
  position: relative;
  padding-top: 18px;
}

.xenal-bg-glow{
  position:absolute;
  pointer-events:none;
  filter: blur(40px);
  opacity: .55;
  z-index: -1;
}

.xenal-bg-glow--one{
  width: 520px;
  height: 520px;
  left: -140px;
  top: 120px;
  background: radial-gradient(circle at 30% 30%, rgba(54,227,255,.55), transparent 60%);
}

.xenal-bg-glow--two{
  width: 520px;
  height: 520px;
  right: -180px;
  top: 30px;
  background: radial-gradient(circle at 60% 30%, rgba(255,61,138,.45), transparent 62%);
}

/* Hero */
.xenal-hero{
  padding: 22px;
  overflow: hidden;
  position: relative;
  min-height: 260px;
}

.xenal-hero::after{
  content:"";
  position:absolute;
  inset: -2px;
  pointer-events:none;
  background:
    radial-gradient(900px 320px at 40% 0%, rgba(54,227,255,.12), transparent 60%),
    radial-gradient(700px 260px at 80% 20%, rgba(255,61,138,.10), transparent 60%);
}

.xenal-hero-block section{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.xenal-hero-block h2{
  font-size: clamp(34px, 4.2vw, 58px) !important;
  font-weight: 900 !important;
  line-height: .95 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.xenal-hero-block p{
  color: var(--x-muted) !important;
  max-width: 56ch;
  margin-top: 10px !important;
}

.xenal-hero-block a{
  display: inline-flex !important;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  text-decoration:none !important;
  background: linear-gradient(135deg, rgba(54,227,255,.20), rgba(255,61,138,.16)) !important;
  border: 1px solid rgba(120,220,255,.25) !important;
  color: var(--x-text) !important;
  box-shadow: var(--x-glow) !important;
}

.xenal-hero-addon{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(120,220,255,.12);
  color: var(--x-muted);
}

/* Sections */
.xenal-section{
  margin-top: 20px;
}

.xenal-section h2{
  font-size: 16px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(219,234,254,.92);
  margin: 0 0 10px;
}

.xenal-section h2::after{
  content:"";
  display:block;
  width: 42px;
  height: 2px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--x-cyan), transparent);
  opacity: .9;
}

/* Cards block (v2) overrides (Tailwind output) */
.xenal-cards .grid{
  display: grid;
  gap: 12px !important;
}

.xenal-cards--servers .grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.xenal-cards--stats .grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.xenal-cards--teams .grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.xenal-cards--events .grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1100px){
  .xenal-cards--servers .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .xenal-cards--stats .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .xenal-cards--teams .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px){
  .xenal-cards--servers .grid,
  .xenal-cards--stats .grid,
  .xenal-cards--teams .grid,
  .xenal-cards--events .grid{ grid-template-columns: 1fr; }
}

.xenal-cards article{
  background: rgba(10, 20, 38, .62) !important;
  border: 1px solid rgba(120,220,255,.18) !important;
  border-radius: 16px !important;
  box-shadow: 0 0 0.9rem rgba(54,227,255,.08) !important;
  color: rgba(219,234,254,.92) !important;
  position: relative;
  overflow: hidden;
}

.xenal-cards article::before{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background: radial-gradient(320px 180px at 20% 0%, rgba(54,227,255,.10), transparent 60%);
}

.xenal-cards article p{
  color: rgba(219,234,254,.72) !important;
}

.xenal-cards article h3{
  color: rgba(219,234,254,.96) !important;
  letter-spacing: .3px;
}

/* Make icon line look like a status pill */
.xenal-cards article p.text-xs{
  display:inline-flex !important;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,61,138,.22);
  background: rgba(255,61,138,.06);
  color: rgba(255,150,200,.95) !important;
}

/* Links */
.xenal-cards article a{
  color: rgba(54,227,255,.92) !important;
  text-decoration: none !important;
}

.xenal-cards article a:hover{
  text-decoration: underline !important;
}

/* Footer CTA */
.xenal-footer-cta{
  margin-top: 24px;
  padding: 20px;
  text-align: center;
}

.xenal-footer-cta h2{
  margin: 0 0 10px;
}

.xenal-footer-cta p{
  margin: 0;
  color: var(--x-muted);
}

/* Footer */
.theme-footer{
  margin-top: 24px;
  border-top: 1px solid rgba(120,220,255,.12);
  background: rgba(4, 8, 23, .62);
}

.xenal-footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 18px 0;
  color: rgba(219,234,254,.72);
  font-size: 13px;
}

.xenal-footer-nav{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.xenal-footer-nav a{
  color: rgba(219,234,254,.78);
  text-decoration:none;
  padding: 6px 10px;
  border-radius: 12px;
}

.xenal-footer-nav a:hover{
  background: rgba(10, 20, 38, .55);
  color: rgba(219,234,254,.92);
}

/* Auth pages */
.xenal-auth-wrap{
  padding: 26px 0 42px;
  display:flex;
  justify-content:center;
}

.xenal-auth-box{
  width: min(520px, 100%);
  padding: 18px;
}

.xenal-kicker{
  display:inline-flex;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(54,227,255,.08);
  border: 1px solid rgba(54,227,255,.20);
  color: rgba(54,227,255,.92);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
}

.xenal-muted{
  color: var(--x-muted);
}

.xenal-auth-form{
  margin-top: 14px;
  display:grid;
  gap: 10px;
}

.xenal-auth-form input,
.xenal-auth-form select,
.xenal-auth-form textarea{
  width: 100%;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(10, 20, 38, .60);
  border: 1px solid rgba(120,220,255,.18);
  color: rgba(219,234,254,.95);
  outline: none;
}

.xenal-auth-form input:focus{
  border-color: rgba(54,227,255,.45);
  box-shadow: 0 0 0 4px rgba(54,227,255,.10);
}

.xenal-auth-actions{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
}

.xenal-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: 12px;
  text-decoration:none;
  border: 1px solid rgba(120,220,255,.22);
  background: rgba(10, 20, 38, .55);
  color: rgba(219,234,254,.92);
}

.xenal-btn--primary{
  background: linear-gradient(135deg, rgba(54,227,255,.22), rgba(255,61,138,.18));
  border-color: rgba(120,220,255,.25);
  box-shadow: var(--x-glow);
}

.error{
  color: rgba(255, 140, 170, .98);
}

.success{
  color: rgba(110, 255, 210, .92);
}


/* Xenal compatibility layer for utility-based CMS templates */
.theme-xenal .mx-auto { margin-left: auto; margin-right: auto; }
.theme-xenal .max-w-5xl { max-width: 72rem; }
.theme-xenal .max-w-4xl { max-width: 56rem; }
.theme-xenal .w-full { width: 100%; }
.theme-xenal .px-4 { padding-left: 1rem; padding-right: 1rem; }
.theme-xenal .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.theme-xenal .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.theme-xenal .p-3 { padding: 0.75rem; }
.theme-xenal .p-4 { padding: 1rem; }
.theme-xenal .p-5 { padding: 1.25rem; }
.theme-xenal .p-6 { padding: 1.5rem; }
.theme-xenal .p-8 { padding: 2rem; }
.theme-xenal .mt-1 { margin-top: 0.25rem; }
.theme-xenal .mt-2 { margin-top: 0.5rem; }
.theme-xenal .mt-3 { margin-top: 0.75rem; }
.theme-xenal .mt-4 { margin-top: 1rem; }
.theme-xenal .mt-5 { margin-top: 1.25rem; }
.theme-xenal .mt-6 { margin-top: 1.5rem; }
.theme-xenal .space-y-2 > * + * { margin-top: 0.5rem; }
.theme-xenal .space-y-3 > * + * { margin-top: 0.75rem; }
.theme-xenal .space-y-4 > * + * { margin-top: 1rem; }
.theme-xenal .space-y-5 > * + * { margin-top: 1.25rem; }
.theme-xenal .space-y-6 > * + * { margin-top: 1.5rem; }
.theme-xenal .space-y-8 > * + * { margin-top: 2rem; }
.theme-xenal .grid { display: grid; }
.theme-xenal .gap-2 { gap: 0.5rem; }
.theme-xenal .gap-3 { gap: 0.75rem; }
.theme-xenal .gap-4 { gap: 1rem; }
.theme-xenal .flex { display: flex; }
.theme-xenal .flex-wrap { flex-wrap: wrap; }
.theme-xenal .items-center { align-items: center; }
.theme-xenal .justify-between { justify-content: space-between; }
.theme-xenal .rounded { border-radius: 0.375rem; }
.theme-xenal .rounded-lg { border-radius: 0.6rem; }
.theme-xenal .rounded-2xl { border-radius: 1rem; }
.theme-xenal .border { border: 1px solid rgba(56, 189, 248, 0.35); }
.theme-xenal .border-dashed { border-style: dashed; }
.theme-xenal .text-xs { font-size: 0.78rem; }
.theme-xenal .text-sm { font-size: 0.92rem; }
.theme-xenal .text-lg { font-size: 1.15rem; }
.theme-xenal .text-xl { font-size: 1.3rem; }
.theme-xenal .text-3xl { font-size: 2rem; }
.theme-xenal .font-semibold { font-weight: 700; }
.theme-xenal .uppercase { text-transform: uppercase; }
.theme-xenal .tracking-\[0\.2em\],
.theme-xenal .tracking-\[0\.3em\] { letter-spacing: 0.2em; }
.theme-xenal .hidden { display: none !important; }
.theme-xenal input,
.theme-xenal textarea,
.theme-xenal select {
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: rgba(2, 6, 23, 0.85);
  color: #dbeafe;
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
}
.theme-xenal a { color: #67e8f9; }
.theme-xenal a:hover { color: #a5f3fc; }
.theme-xenal .prose { color: #dbeafe; line-height: 1.65; }
.theme-xenal .prose p { margin: 0.7rem 0; }

/* Responsive helpers used by public templates */
@media (min-width: 768px) {
  .theme-xenal .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-xenal .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .theme-xenal .md\:col-span-2 { grid-column: span 2 / span 2; }
  .theme-xenal .md\:col-span-4 { grid-column: span 4 / span 4; }
}
@media (min-width: 1024px) {
  .theme-xenal .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Cookie consent UI styles for Xenal (not dependent on utility CSS framework) */
.theme-xenal #cookie-banner {
  position: fixed;
  right: 1rem;
  left: 1rem;
  bottom: 1rem;
  z-index: 50;
  max-width: 46rem;
  margin-left: auto;
  border-radius: 14px;
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: rgba(2, 6, 23, 0.96);
  box-shadow: 0 0 30px rgba(8, 47, 73, 0.6);
  padding: 1rem;
}
.theme-xenal #cookie-settings-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.78);
  padding: 1rem;
}
.theme-xenal #cookie-settings-modal.is-open { display: flex; }
.theme-xenal #cookie-settings-modal > div {
  width: min(42rem, 100%);
  max-height: 85vh;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: rgba(2, 6, 23, 0.98);
  color: #dbeafe;
}
.theme-xenal [data-cookie-accept],
.theme-xenal [data-cookie-save],
.theme-xenal [data-cookie-reject],
.theme-xenal [data-cookie-settings],
.theme-xenal [data-cookie-close],
.theme-xenal [data-cookie-open] {
  border: 1px solid rgba(103, 232, 249, 0.45);
  border-radius: 8px;
  padding: 0.45rem 0.7rem;
  font-weight: 600;
  background: rgba(15, 23, 42, 0.75);
  color: #e2e8f0;
}
.theme-xenal [data-cookie-accept],
.theme-xenal [data-cookie-save] {
  background: linear-gradient(90deg, #06b6d4, #2563eb);
  color: #fff;
}
.theme-xenal [data-cookie-toggle] { accent-color: #22d3ee; }