/* =========================================================
   YUHAXBALL — Premium HaxBall Room Hosting
   Design tokens
   ========================================================= */
:root{
  --bg: #050505;
  --bg-elevated: #0a0d12;
  --glass: rgba(255,255,255,0.045);
  --glass-strong: rgba(255,255,255,0.07);
  --glass-border: rgba(255,255,255,0.09);

  --primary: #2f7bff;
  --primary-soft: #5b9bff;
  --accent: #22d3ee;
  --violet: #7c6bff;
  --success: #34d399;
  --warning: #fbbf24;

  --text: #eaf0fa;
  --text-dim: #b4bdcf;
  --muted: #7c8798;

  --font-display: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --shadow-glow: 0 0 60px rgba(47,123,255,0.25);
  --ease: cubic-bezier(.16,.84,.44,1);
}

/* ---- Light theme override ---- */
[data-theme="light"]{
  --bg: #f4f6fb;
  --bg-elevated: #ffffff;
  --glass: rgba(15,23,42,0.04);
  --glass-strong: rgba(15,23,42,0.065);
  --glass-border: rgba(15,23,42,0.10);

  --primary: #2563eb;
  --primary-soft: #1d4ed8;
  --accent: #0891a8;
  --violet: #6d5bd0;
  --success: #16a34a;
  --warning: #b45309;

  --text: #10151f;
  --text-dim: #3c4658;
  --muted: #64708a;

  --shadow-glow: 0 0 60px rgba(37,99,235,0.15);
}

html, body{ transition: background-color .4s ease, color .4s ease; }
[data-theme="light"] .hero-grid-overlay{
  background-image:
    linear-gradient(rgba(15,23,42,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.05) 1px, transparent 1px);
}
[data-theme="light"] .aurora{ mix-blend-mode:multiply; opacity:.28; }
[data-theme="light"] .grain-overlay{ opacity:.02; }
[data-theme="light"] .price-value .mono,
[data-theme="light"] .hero-stat-value{ color:var(--text); }
[data-theme="light"] .btn-primary{ color:#ffffff; }
[data-theme="light"] .node-flag{ filter:drop-shadow(0 0 6px rgba(255,255,255,0.8)); }
[data-theme="light"] .console-line{ color:var(--text-dim); }
[data-theme="light"] ::selection{ background: var(--primary); color:#fff; }
[data-theme="light"] .navbar.scrolled{
  background: rgba(255,255,255,0.75);
  border-bottom:1px solid var(--glass-border);
}
[data-theme="light"] .nav-mobile{ background: rgba(255,255,255,0.98); }
[data-theme="light"] .price-ribbon{ color:#ffffff; }
[data-theme="light"] .btn-spinner{
  border:2px solid rgba(255,255,255,0.35); border-top-color:#ffffff;
}
[data-theme="light"] .reserve-form select option,
[data-theme="light"] .admin-add-form select option{
  background: var(--bg-elevated); color:var(--text);
}
[data-theme="light"] .modal-card{
  background: linear-gradient(160deg, rgba(255,255,255,0.98), rgba(255,255,255,0.94));
}
[data-theme="light"] .modal-card input,
[data-theme="light"] .modal-card select,
[data-theme="light"] .modal-card textarea{
  background: rgba(15,23,42,0.035);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden; width:100%;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow-x:hidden;
  width:100%;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font-family:inherit; cursor:pointer; background:none; border:none; color:inherit;}
img{max-width:100%; display:block;}
::selection{ background: var(--primary); color:#fff; }

.mono{ font-family: var(--font-mono); }
.gradient-text{
  background: linear-gradient(100deg, var(--accent), var(--primary-soft) 55%, var(--violet));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

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

/* =========================================================
   PRELOADER
   ========================================================= */
.preloader{
  position:fixed; inset:0; z-index:9999;
  background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .7s var(--ease), visibility .7s var(--ease);
}
.preloader.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-inner{ text-align:center; }
.preloader-mark{
  font-family:var(--font-display); font-weight:800; font-size:2rem;
  letter-spacing:.08em; color:var(--text);
  margin-bottom:1.4rem;
}
.preloader-bar{
  width:220px; height:2px; background:rgba(255,255,255,0.1);
  border-radius:2px; overflow:hidden; margin:0 auto;
}
.preloader-bar span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--primary));
  animation: loadbar 1.6s var(--ease) forwards;
}
@keyframes loadbar{ to{ width:100%; } }
.preloader-label{
  margin-top:1rem; font-family:var(--font-mono); font-size:.7rem;
  letter-spacing:.15em; color:var(--muted); text-transform:uppercase;
}

/* =========================================================
   CURSOR SPOTLIGHT
   ========================================================= */
.cursor-spotlight{
  position:fixed; top:0; left:0; width:600px; height:600px;
  border-radius:50%; pointer-events:none; z-index:2;
  background: radial-gradient(circle, rgba(47,123,255,0.12), transparent 70%);
  transform: translate(-50%,-50%);
  will-change:transform; transition: opacity .3s;
}
@media (max-width:900px){ .cursor-spotlight{ display:none; } }

/* =========================================================
   LAYOUT HELPERS
   ========================================================= */
.section{ position:relative; padding: 7.5rem 0; overflow:hidden; }

/* ---- Film grain texture (whole page) ---- */
.grain-overlay{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* ---- Ambient section glows ---- */
.section-glow{
  position:absolute; z-index:0; pointer-events:none;
  left:var(--gx, 50%); top:var(--gy, 50%);
  width:560px; height:560px; border-radius:50%;
  transform:translate(-50%,-50%);
  filter:blur(110px); opacity:.35; mix-blend-mode:screen;
}
.glow-blue{ background:radial-gradient(circle, rgba(47,123,255,0.55), transparent 65%); }
.glow-cyan{ background:radial-gradient(circle, rgba(34,211,238,0.5), transparent 65%); }
.glow-violet{ background:radial-gradient(circle, rgba(124,107,255,0.5), transparent 65%); }
@media (max-width:700px){ .section-glow{ width:360px; height:360px; filter:blur(80px); } }
.section-inner{ max-width:1200px; margin:0 auto; padding:0 2rem; position:relative; z-index:2; }
.section-head{ max-width:640px; margin-bottom:3.5rem; }
.section-eyebrow{
  display:inline-block; font-family:var(--font-mono); font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent);
  margin-bottom:1rem;
}
.section-title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.15; letter-spacing:-.01em;
}
.section-sub{ margin-top:1.1rem; color:var(--text-dim); font-size:1.02rem; max-width:52ch; }

.glass-card{
  background: linear-gradient(160deg, var(--glass-strong), var(--glass));
  border:1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:.85rem 1.6rem; border-radius:999px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), border-color .35s;
  white-space:nowrap;
}
.btn-primary{
  background: linear-gradient(100deg, var(--primary), var(--accent));
  color:#04070d; box-shadow: 0 8px 30px rgba(47,123,255,0.35);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(47,123,255,0.5); }
.btn-outline{
  border:1px solid var(--glass-border); color:var(--text);
  background: var(--glass);
}
.btn-outline:hover{ border-color:var(--accent); background:rgba(34,211,238,0.08); transform:translateY(-2px); }
.btn-ghost{
  color:var(--text-dim); border:1px solid var(--glass-border); background:var(--glass);
}
.btn-ghost:hover{ color:var(--text); border-color:var(--accent); background:rgba(34,211,238,0.08); }
.btn-small{ padding:.6rem 1.15rem; font-size:.85rem; }
.btn-large{ padding:1.05rem 2rem; font-size:1rem; }
.btn-block{ width:100%; }

/* =========================================================
   NAVBAR
   ========================================================= */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding: 1.1rem 0;
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s;
  border-bottom:1px solid transparent;
}
.navbar.scrolled{
  background: rgba(5,5,5,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: .75rem 0;
  border-bottom:1px solid var(--glass-border);
}
.nav-inner{
  max-width:1280px; margin:0 auto; padding:0 2rem;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand-logo{
  height:44px; width:44px; object-fit:cover; border-radius:12px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 22px rgba(34,211,238,0.35);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.brand:hover .brand-logo{ transform:scale(1.06); box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 0 30px rgba(34,211,238,0.55); }
.brand-logo-footer{ height:52px; width:52px; }

.nav-links{ display:flex; gap:2rem; }
.nav-links a{
  font-size:.88rem; color:var(--text-dim); display:flex; align-items:center; gap:.4rem;
  transition:color .3s;
}
.nav-links a span{ font-family:var(--font-mono); font-size:.7rem; color:var(--muted); }
.nav-links a:hover{ color:var(--text); }

.nav-cta{ display:flex; align-items:center; gap:.75rem; }

.theme-toggle{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--glass-border); background:rgba(255,255,255,0.02);
  color:var(--text-dim); position:relative; transition: border-color .3s, background .3s, transform .3s;
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent); transform:scale(1.06); }
.theme-toggle .theme-icon-sun,
.theme-toggle .theme-icon-moon{ position:absolute; font-size:.95rem; transition: opacity .3s, transform .3s; }
.theme-toggle .theme-icon-sun{ opacity:0; transform:rotate(-90deg) scale(.5); width:17px; height:17px; }
.theme-toggle .theme-icon-moon{ opacity:1; transform:rotate(0) scale(1); }
[data-theme="light"] .theme-toggle .theme-icon-sun{ opacity:1; transform:rotate(0) scale(1); }
[data-theme="light"] .theme-toggle .theme-icon-moon{ opacity:0; transform:rotate(90deg) scale(.5); }

.theme-toggle-mobile{
  width:100%; border-radius:12px; justify-content:flex-start; gap:.8rem;
  padding:.9rem 1rem; height:auto; position:relative;
}
.theme-toggle-mobile .theme-icon-sun,
.theme-toggle-mobile .theme-icon-moon{ position:static; }
.theme-toggle-mobile .theme-icon-moon{ display:inline-block; }
.theme-toggle-mobile .theme-icon-sun{ display:none; width:18px; height:18px; }
[data-theme="light"] .theme-toggle-mobile .theme-icon-moon{ display:none; }
[data-theme="light"] .theme-toggle-mobile .theme-icon-sun{ display:inline-block; }
.theme-toggle-label{ font-size:.95rem; color:var(--text-dim); }

.nav-burger{ display:none; flex-direction:column; gap:5px; padding:.4rem; }
.nav-burger span{ width:22px; height:2px; background:var(--text); border-radius:2px; transition:.3s; }

.nav-mobile{
  display:none; flex-direction:column; gap:1.1rem;
  padding: 1.5rem 2rem 2rem; background: rgba(5,5,5,0.97);
  border-top:1px solid var(--glass-border);
}
.nav-mobile a{ font-size:1rem; color:var(--text-dim); }
.nav-mobile.open{ display:flex; }

@media (max-width:960px){
  .nav-links, .nav-cta{ display:none; }
  .nav-burger{ display:flex; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding: 8rem 2rem 6rem;
  overflow:hidden;
}
.pitch-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-1; opacity:.4; pointer-events:none;
}

.aurora{
  position:absolute; border-radius:50%; filter:blur(90px); z-index:0; pointer-events:none;
  opacity:.55; mix-blend-mode:screen;
}
.aurora-1{
  width:640px; height:640px; top:-220px; left:-160px;
  background: radial-gradient(circle, rgba(47,123,255,0.55), transparent 65%);
  animation: drift1 18s ease-in-out infinite;
}
.aurora-2{
  width:560px; height:560px; bottom:-200px; right:-140px;
  background: radial-gradient(circle, rgba(124,107,255,0.45), transparent 65%);
  animation: drift2 22s ease-in-out infinite;
}
@keyframes drift1{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(60px,40px); } }
@keyframes drift2{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-50px,-30px); } }

.hero-grid-overlay{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 40%, transparent 100%);
}

.hero-inner{ position:relative; z-index:2; max-width:840px; text-align:center; margin:0 auto; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em;
  padding:.5rem 1rem; border-radius:999px; text-transform:uppercase;
  background: rgba(34,211,238,0.08); border:1px solid rgba(34,211,238,0.25); color:var(--accent);
  margin-bottom:1.8rem;
}
.pulse-dot{
  width:7px; height:7px; border-radius:50%; background:var(--success);
  box-shadow:0 0 0 rgba(52,211,153,.6); animation: pulse 1.8s infinite;
}
.pulse-dot.small{ width:6px; height:6px; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(52,211,153,.6); }
  70%{ box-shadow:0 0 0 8px rgba(52,211,153,0); }
  100%{ box-shadow:0 0 0 0 rgba(52,211,153,0); }
}

.hero-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2.6rem, 7vw, 5rem); line-height:1.04; letter-spacing:-.02em;
}
.hero-title .line{ display:block; }

.hero-sub{
  margin: 1.6rem auto 0; max-width:52ch; color:var(--text-dim); font-size:1.1rem;
}

.hero-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.4rem; }

.hero-stats{
  display:flex; align-items:center; justify-content:center; gap:1.6rem;
  margin-top:3.6rem; flex-wrap:wrap;
}
.hero-stat{ text-align:left; }
.hero-stat-value{ font-family:var(--font-display); font-weight:700; font-size:1.9rem; }
.hero-stat-label{ font-size:.8rem; color:var(--muted); }
.hero-stat-divider{ width:1px; height:34px; background:var(--glass-border); }

.scroll-indicator{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.7rem; letter-spacing:.15em; color:var(--muted); text-transform:uppercase;
  z-index:2;
}
.scroll-line{ width:1px; height:38px; background:var(--glass-border); position:relative; overflow:hidden; }
.scroll-line i{
  position:absolute; top:-38px; left:0; width:100%; height:100%;
  background:linear-gradient(var(--accent), transparent);
  animation: scrollmove 2.2s ease-in-out infinite;
}
@keyframes scrollmove{ to{ top:38px; } }

/* =========================================================
   FEATURES
   ========================================================= */
.feature-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;
}
@media (max-width:1000px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .feature-grid{ grid-template-columns:1fr; } }

.feature-card{
  padding:1.9rem 1.6rem; border-radius:var(--radius-md);
  background: linear-gradient(160deg, var(--glass-strong), var(--glass));
  border:1px solid var(--glass-border);
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s;
}
.feature-card:hover{
  transform: translateY(-6px);
  border-color: rgba(34,211,238,0.35);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.feature-icon{
  width:46px; height:46px; border-radius:13px; margin-bottom:1.1rem;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
  background: linear-gradient(140deg, rgba(47,123,255,0.25), rgba(34,211,238,0.15));
  color: var(--accent); border:1px solid rgba(34,211,238,0.25);
}
.feature-card h3{ font-family:var(--font-display); font-size:1.05rem; margin-bottom:.5rem; font-weight:600; }
.feature-card p{ color:var(--text-dim); font-size:.9rem; }

/* =========================================================
   WHY CHOOSE US
   ========================================================= */
.why-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:4rem; align-items:center; }
@media (max-width:900px){ .why-inner{ grid-template-columns:1fr; } }

.why-list{ margin-top:1.6rem; display:flex; flex-direction:column; gap:.85rem; }
.why-list li{ display:flex; align-items:flex-start; gap:.7rem; color:var(--text-dim); font-size:.98rem; }
.why-list i{ color:var(--success); margin-top:.25rem; }

.ball-card{ padding:3rem; display:flex; align-items:center; justify-content:center; min-height:340px; }
.ball-orbit{ position:relative; width:220px; height:220px; }
.ball-core{
  position:absolute; inset:0; margin:auto; width:70px; height:70px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  background: radial-gradient(circle at 35% 30%, #fff, #cfd9ea 40%, #4a5568 100%);
  color:#1a1a1a; box-shadow:0 0 50px rgba(47,123,255,0.5);
  animation: floaty 5s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
.orbit-ring{
  position:absolute; inset:0; margin:auto; border-radius:50%;
  border:1px dashed rgba(255,255,255,0.15);
}
.ring-1{ width:100%; height:100%; animation: spin 26s linear infinite; }
.ring-2{ width:70%; height:70%; animation: spin 18s linear infinite reverse; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.orbit-dot{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background: var(--accent); box-shadow:0 0 12px var(--accent);
}
.dot-1{ top:0; left:50%; }
.dot-2{ top:50%; right:0; background:var(--violet); box-shadow:0 0 12px var(--violet); }
.dot-3{ bottom:8%; left:12%; background:var(--primary-soft); box-shadow:0 0 12px var(--primary-soft); }

/* =========================================================
   GAMEPLAY PREVIEW
   ========================================================= */
.gameplay-frame{
  position:relative; max-width:820px; margin:0 auto; padding:.6rem;
}
.gameplay-video{
  display:block; width:100%; height:auto; border-radius:20px;
  aspect-ratio:16/9; object-fit:cover;
}
.gameplay-frame-glow{
  position:absolute; inset:-2px; z-index:-1; border-radius:inherit;
  background: linear-gradient(135deg, var(--primary), var(--accent), var(--violet));
  filter: blur(28px); opacity:.35;
}
.gameplay-mute-btn{
  position:absolute; right:1.6rem; bottom:1.6rem; z-index:2;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(5,5,5,0.55); border:1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px); color:var(--text);
  transition: background .3s, border-color .3s, transform .3s;
}
.gameplay-mute-btn:hover{ background:rgba(5,5,5,0.75); border-color:var(--accent); transform:scale(1.06); }
.gameplay-mute-btn.is-unmuted{ color:var(--accent); border-color:rgba(34,211,238,0.4); }

/* =========================================================
   LIVE STATUS
   ========================================================= */
.status-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
@media (max-width:800px){ .status-grid{ grid-template-columns:repeat(2,1fr); } }
.status-grid-3{ grid-template-columns:repeat(3,1fr); max-width:820px; margin:0 auto; }
@media (max-width:700px){ .status-grid-3{ grid-template-columns:1fr; } }
.status-card{
  padding:2rem 1.6rem; text-align:center;
}
.status-card i{ font-size:1.3rem; color:var(--accent); margin-bottom:1rem; }
.status-value{ font-family:var(--font-display); font-weight:700; font-size:2.2rem; }
.status-value .unit{ font-size:1.1rem; color:var(--text-dim); }
.status-label{ margin-top:.4rem; color:var(--muted); font-size:.85rem; }

/* =========================================================
   LOCATIONS
   ========================================================= */
.locations-wrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:2.5rem; align-items:center; }
@media (max-width:900px){ .locations-wrap{ grid-template-columns:1fr; } }

.europe-map{ padding:1.6rem; aspect-ratio:900/843; max-width:420px; margin:0 auto; width:100%; }
.europe-map-field{
  position:relative; width:100%; height:100%; border-radius:18px; overflow:hidden;
  background: radial-gradient(circle at 50% 45%, rgba(34,211,238,0.06), transparent 65%);
  border:1px solid var(--glass-border);
}
.europe-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: saturate(1.15) brightness(1.05);
  opacity:.95;
}
.radar-node{
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
}
.node-flag{ font-size:1.4rem; filter:drop-shadow(0 0 8px rgba(0,0,0,0.6)); position:relative; z-index:2; }
.node-pulse{
  position:absolute; width:14px; height:14px; border-radius:50%;
  background:var(--success); box-shadow:0 0 0 0 rgba(52,211,153,.7);
  animation: nodepulse 2.4s ease-out infinite;
}
.node-warn .node-pulse{ background:var(--warning); box-shadow:0 0 0 0 rgba(251,191,36,.7); animation-name: nodepulsewarn; }
@keyframes nodepulse{ 0%{ box-shadow:0 0 0 0 rgba(52,211,153,.6);} 100%{ box-shadow:0 0 0 22px rgba(52,211,153,0);} }
@keyframes nodepulsewarn{ 0%{ box-shadow:0 0 0 0 rgba(251,191,36,.6);} 100%{ box-shadow:0 0 0 22px rgba(251,191,36,0);} }

.locations-table{ display:flex; flex-direction:column; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--glass-border); }
.loc-row{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; align-items:center;
  padding:1.1rem 1.4rem; border-bottom:1px solid var(--glass-border);
  background: var(--glass);
}
.loc-row:last-child{ border-bottom:none; }
.loc-head{ background:transparent; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; }
.loc-name{ font-weight:600; }
.loc-status{ font-size:.88rem; display:flex; align-items:center; gap:.4rem; }
.loc-status.ok{ color:var(--success); }
.loc-status.warn{ color:var(--warning); }
.loc-ping{ font-size:.85rem; color:var(--text-dim); }
@media (max-width:560px){
  .loc-row{ grid-template-columns:1fr; gap:.3rem; }
}

/* =========================================================
   PRICING
   ========================================================= */
.pricing-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; align-items:stretch;
}
@media (max-width:1050px){ .pricing-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .pricing-grid{ grid-template-columns:1fr; } }

.price-card{
  padding:2.2rem 1.8rem; display:flex; flex-direction:column;
  position:relative; transition:transform .4s var(--ease), box-shadow .4s;
}
.price-card:hover{ transform:translateY(-6px); }
.price-card-featured{
  border-color: rgba(34,211,238,0.4);
  box-shadow: 0 25px 70px rgba(47,123,255,0.25);
  transform: scale(1.03);
  z-index:1;
}
.price-card-featured::before{
  content:"";
  position:absolute; inset:-16px; z-index:-1; border-radius:inherit;
  background: linear-gradient(135deg, var(--primary), var(--accent), var(--violet));
  filter: blur(22px);
  animation: featured-pulse 3.2s ease-in-out infinite;
}
@keyframes featured-pulse{
  0%, 100%{ opacity:.32; filter:blur(20px); }
  50%{ opacity:.62; filter:blur(28px); }
}
.price-card-featured:hover{ transform: scale(1.03) translateY(-6px); }
.price-ribbon{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background: linear-gradient(100deg,var(--primary),var(--accent));
  color:#04070d; font-size:.72rem; font-weight:700; letter-spacing:.05em;
  padding:.4rem 1rem; border-radius:999px; text-transform:uppercase;
}
.price-card-head{ display:flex; flex-direction:column; gap:.3rem; margin-bottom:1.4rem; }
.price-name{ font-family:var(--font-display); font-weight:700; font-size:1.15rem; }
.price-tag{ font-size:.8rem; color:var(--muted); }
.price-value{ display:flex; align-items:baseline; gap:.35rem; margin-bottom:.3rem; }
.price-value .mono{ font-size:2.4rem; font-weight:700; }
.price-per{ color:var(--muted); font-size:.9rem; }
.price-save{ font-size:.8rem; color:var(--success); font-weight:600; margin-bottom:1.6rem; }
.price-features{ display:flex; flex-direction:column; gap:.65rem; margin-bottom:1.8rem; flex:1; }
.price-features li{ display:flex; align-items:flex-start; gap:.55rem; font-size:.88rem; color:var(--text-dim); }
.price-features i{ color:var(--accent); margin-top:.2rem; }

.pricing-note{
  margin-top:2.2rem; display:flex; align-items:center; gap:.6rem;
  font-size:.88rem; color:var(--muted); flex-wrap:wrap;
}
.pricing-note i{ color:var(--accent); }
.pricing-note strong{ color:var(--text-dim); }

/* =========================================================
   FAQ
   ========================================================= */
.faq-list{ display:flex; flex-direction:column; gap:.9rem; max-width:800px; }
.faq-item{
  border:1px solid var(--glass-border); border-radius:var(--radius-md); overflow:hidden;
  background:var(--glass);
}
.faq-question{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:1.2rem 1.5rem; font-family:var(--font-display); font-size:1rem; font-weight:600;
  text-align:left;
}
.faq-question i{ color:var(--accent); transition:transform .35s var(--ease); flex-shrink:0; margin-left:1rem; }
.faq-item.open .faq-question i{ transform:rotate(45deg); }
.faq-answer{
  max-height:0; overflow:hidden; transition:max-height .4s var(--ease);
}
.faq-answer p{ padding:0 1.5rem 1.4rem; color:var(--text-dim); font-size:.92rem; }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-card{
  padding:3.2rem; display:grid; grid-template-columns:1.3fr .7fr; gap:3rem; align-items:start;
}
@media (max-width:900px){ .contact-card{ grid-template-columns:1fr; padding:2.2rem; } }
.contact-form-block{ grid-column:1 / -1; max-width:520px; }
.contact-actions{ display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
.contact-divider{
  display:flex; align-items:center; gap:1rem; margin:2.2rem 0 1.6rem;
  color:var(--muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.1em;
}
.contact-divider::before, .contact-divider::after{
  content:""; flex:1; height:1px; background:var(--glass-border);
}
.contact-form-success{
  display:none; flex-direction:column; align-items:center; text-align:center; padding:1rem 0;
}
.contact-form-success.show{ display:flex; }
.contact-form-success .success-check{ width:64px; height:64px; }
.contact-form-success p{ color:var(--text-dim); font-size:.9rem; margin-top:1rem; }
.contact-meta{ display:flex; flex-direction:column; gap:1rem; border-left:1px solid var(--glass-border); padding-left:2rem; }
@media (max-width:900px){ .contact-meta{ border-left:none; padding-left:0; border-top:1px solid var(--glass-border); padding-top:1.5rem; } }
.contact-meta-row{ display:flex; align-items:center; gap:.7rem; font-size:.9rem; color:var(--text-dim); }
.contact-meta-row i{ color:var(--accent); width:18px; }
.contact-meta-row a{ color:inherit; transition:color .3s; }
.contact-meta-row a:hover{ color:var(--accent); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ border-top:1px solid var(--glass-border); padding:3.5rem 0 2rem; }
.footer-inner{ max-width:1200px; margin:0 auto; padding:0 2rem; }
.footer-top{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1.5rem;
  padding-bottom:2.2rem; border-bottom:1px solid var(--glass-border);
}
.footer-links{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.footer-links a{ color:var(--text-dim); font-size:.9rem; }
.footer-links a:hover{ color:var(--accent); }
.footer-social{ display:flex; gap:.8rem; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--glass-border);
  display:flex; align-items:center; justify-content:center; transition:.3s;
}
.footer-social a:hover{ background:rgba(34,211,238,0.1); border-color:var(--accent); color:var(--accent); }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  padding-top:1.6rem; font-size:.8rem; color:var(--muted);
}
.footer-credit{ color:var(--accent); font-weight:600; transition:opacity .3s; }
.footer-credit:hover{ opacity:.75; text-decoration:underline; }

/* =========================================================
   MAGNETIC BUTTON HELPER (JS adds transform, this eases it)
   ========================================================= */
.magnetic{ will-change:transform; }

/* =========================================================
   RESERVATION MODAL
   ========================================================= */
.modal-overlay{
  position:fixed; inset:0; z-index:2000;
  background: rgba(2,3,5,0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding: 2rem;
  opacity:0; visibility:hidden;
  transition: opacity .35s var(--ease), visibility .35s var(--ease);
}
.modal-overlay.open{ opacity:1; visibility:visible; }

.modal-card{
  width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
  padding:2.4rem; position:relative;
  transform: translateY(24px) scale(.97); opacity:0;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.modal-overlay.open .modal-card{ transform: translateY(0) scale(1); opacity:1; }

.modal-close{
  position:absolute; top:1.2rem; right:1.2rem;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--glass-border); display:flex; align-items:center; justify-content:center;
  color:var(--text-dim); transition:.3s;
}
.modal-close:hover{ color:var(--text); border-color:var(--accent); background:rgba(34,211,238,0.08); }

.modal-title{ font-family:var(--font-display); font-weight:700; font-size:1.6rem; margin-top:.5rem; }
.modal-sub{ color:var(--text-dim); font-size:.9rem; margin-top:.6rem; margin-bottom:1.8rem; }

.reserve-form,
.contact-form,
.auth-form{ display:flex; flex-direction:column; gap:1.1rem; }
.form-row label{
  display:block; font-size:.72rem; color:var(--muted); text-transform:uppercase;
  letter-spacing:.06em; margin-bottom:.4rem;
}
.form-static{
  padding:.7rem .9rem; border-radius:8px; background:rgba(34,211,238,0.08);
  border:1px solid rgba(34,211,238,0.25); color:var(--accent); font-size:.9rem; font-weight:600;
}
.reserve-form input,
.reserve-form select,
.reserve-form textarea,
.contact-form input,
.contact-form textarea,
.auth-form input,
.auth-form textarea{
  width:100%; padding:.75rem .9rem; border-radius:8px;
  background:rgba(255,255,255,0.03); border:1px solid var(--glass-border);
  color:var(--text); font-family:var(--font-body); font-size:.9rem;
  transition: border-color .3s;
}
.reserve-form textarea,
.contact-form textarea,
.auth-form textarea{ resize:vertical; }
.reserve-form input:focus,
.reserve-form select:focus,
.reserve-form textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus,
.auth-form input:focus,
.auth-form textarea:focus{ outline:none; border-color:var(--accent); }
.reserve-form select option{ background:#0a0d12; color:var(--text); }

.form-status{
  min-height:1.2rem; font-size:.85rem; text-align:center;
}
.form-status.success{ color:var(--success); }
.form-status.error{ color:#ff6b6b; }

.reserve-form button[disabled]{ opacity:.6; pointer-events:none; }

/* ---- Honeypot (anti-spam) ---- */
.honeypot-field{
  position:absolute; left:-9999px; top:-9999px;
  width:1px; height:1px; overflow:hidden;
}

/* ---- Loading spinner inside submit button ---- */
.btn-spinner{
  display:none; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(4,7,13,0.25); border-top-color:#04070d;
  animation: spin-btn .7s linear infinite;
}
.reserve-form button.is-loading .btn-spinner{ display:inline-block; }
.reserve-form button.is-loading #reserveBtnIcon{ display:none; }
@keyframes spin-btn{ to{ transform:rotate(360deg); } }

/* ---- Success view ---- */
.reserve-success{
  display:none; flex-direction:column; align-items:center; text-align:center;
  padding: 1.2rem 0 .4rem;
}
.reserve-success.show{ display:flex; }
.reserve-success .modal-title{ margin-top:1.4rem; }
.reserve-success .modal-sub{ margin-bottom:1.8rem; }
.reserve-success .btn{ max-width:220px; }

.success-check{ width:84px; height:84px; }
.success-check-circle{
  stroke: var(--success);
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:226;
  stroke-dashoffset:226;
  animation: draw-circle .5s ease-out forwards;
  filter: drop-shadow(0 0 12px rgba(52,211,153,0.5));
}
.success-check-mark{
  stroke: var(--success);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:40;
  stroke-dashoffset:40;
  animation: draw-check .35s ease-out .45s forwards;
}
@keyframes draw-circle{ to{ stroke-dashoffset:0; } }
@keyframes draw-check{ to{ stroke-dashoffset:0; } }

/* =========================================================
   AUTH PAGES (login / register / dashboard)
   ========================================================= */
.auth-main{ position:relative; z-index:2; min-height:100vh; display:flex; align-items:center; }
.auth-section{
  width:100%; padding: 9rem 2rem 5rem; display:flex; justify-content:center;
}
.auth-card{
  width:100%; max-width:460px; padding:2.6rem;
}
.auth-title{
  font-family:var(--font-display); font-weight:700; font-size:1.7rem; margin-top:.5rem;
}
.auth-sub{ color:var(--text-dim); font-size:.92rem; margin-top:.6rem; margin-bottom:1.8rem; }

.auth-alert{
  background:rgba(255,107,107,0.08); border:1px solid rgba(255,107,107,0.3);
  border-radius:10px; padding:.9rem 1.1rem; margin-bottom:1.4rem;
}
.auth-alert p{
  display:flex; align-items:flex-start; gap:.5rem; font-size:.85rem; color:#ff9b9b;
  margin:0;
}
.auth-alert p + p{ margin-top:.4rem; }
.auth-alert i{ margin-top:.2rem; flex-shrink:0; }

.password-field{ position:relative; }
.password-field input{ padding-right:2.8rem; }
.password-toggle{
  position:absolute; right:.7rem; top:50%; transform:translateY(-50%);
  color:var(--muted); padding:.3rem; transition:color .3s;
}
.password-toggle:hover{ color:var(--accent); }

.auth-switch{
  text-align:center; margin-top:1.6rem; font-size:.88rem; color:var(--text-dim);
}
.auth-switch a{ color:var(--accent); font-weight:600; }
.auth-switch a:hover{ text-decoration:underline; }

/* ---- Dashboard ---- */
.dashboard-section{ align-items:flex-start; padding-top:9.5rem; }
.dashboard-wrap{ width:100%; max-width:1240px; margin:0 auto; }
.dashboard-head{ margin-bottom:3rem; text-align:center; }
.dashboard-head .auth-title{ font-size:2rem; }

.dashboard-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:1.8rem; margin-bottom:2.8rem;
}
@media (max-width:600px){ .dashboard-grid{ grid-template-columns:1fr; } }

.dashboard-card{ padding:2.2rem; }
.dashboard-card h3{
  font-family:var(--font-display); font-size:1.1rem; font-weight:600; margin-bottom:1.1rem;
}
.dashboard-list{ display:flex; flex-direction:column; gap:.8rem; }
.dashboard-list li{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  font-size:.88rem; border-bottom:1px solid var(--glass-border); padding-bottom:.7rem;
}
.dashboard-list li:last-child{ border-bottom:none; padding-bottom:0; }
.dashboard-list li span{ color:var(--muted); flex-shrink:0; }
.dashboard-list li strong{
  color:var(--text); font-weight:600; text-align:right;
  min-width:0; overflow-wrap:break-word; word-break:break-word;
}

.dashboard-empty{ color:var(--text-dim); font-size:.88rem; margin-bottom:1.4rem; }

.dashboard-logout{ display:flex; justify-content:center; }

/* =========================================================
   DASHBOARD ROOMS TABLE / ADMIN PANEL
   ========================================================= */
.dashboard-card-wide{ grid-column: 1 / -1; }

.room-table{
  border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--glass-border);
}
.room-row{
  display:grid; grid-template-columns: 1.2fr .9fr .9fr .9fr .9fr;
  gap:1rem; align-items:center; padding:.9rem 1.1rem;
  border-bottom:1px solid var(--glass-border); background:var(--glass);
  font-size:.85rem;
}
.referral-table .room-row{ grid-template-columns: 1fr .7fr .7fr .8fr .5fr; }
.room-row:last-child{ border-bottom:none; }
.room-row-head{
  background:transparent; color:var(--muted); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.08em;
}
.room-name{ font-weight:600; color:var(--text); }
.room-status{ display:flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:600; }
.room-status.paid{ color:var(--success); }
.room-status.unpaid{ color:var(--warning); }
.room-expired{ color:#ff6b6b; }
.room-expired em{ font-style:normal; font-size:.78rem; }

.admin-card{ padding:2.4rem; margin-bottom:2rem; }
.admin-card h3{
  font-family:var(--font-display); font-size:1.1rem; font-weight:600;
  margin-bottom:1.4rem; display:flex; align-items:center; gap:.6rem;
}
.admin-card h3 i{ color:var(--accent); }

.admin-form-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; margin-bottom:1.4rem;
}
@media (max-width:1100px){ .admin-form-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:900px){ .admin-form-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .admin-form-grid{ grid-template-columns:1fr; } }
.admin-add-form select{
  width:100%; padding:.75rem .9rem; border-radius:8px;
  background:rgba(255,255,255,0.03); border:1px solid var(--glass-border);
  color:var(--text); font-family:var(--font-body); font-size:.9rem;
}
.admin-add-form select option{ background:#0a0d12; color:var(--text); }

.admin-room-table .room-row{ grid-template-columns: .8fr 1.1fr .8fr .8fr .8fr .8fr .5fr; }
.admin-row-actions{ display:flex; align-items:center; gap:.9rem; justify-content:flex-end; }
.admin-row-actions a{ color:var(--muted); transition:color .3s; }
.admin-row-actions a:hover{ color:var(--accent); }
.admin-delete-form{ display:inline-flex; margin:0; }
.admin-delete-btn{ color:var(--muted); transition:color .3s; }
.admin-delete-btn:hover{ color:#ff6b6b; }

.auth-alert-success{
  background:rgba(52,211,153,0.08); border-color:rgba(52,211,153,0.3);
}
.auth-alert-success p{ color:var(--success); }

@media (max-width:700px){
  .room-row{
    grid-template-columns:1fr; row-gap:.55rem; padding:1.1rem;
  }
  .admin-room-table .room-row{ grid-template-columns:1fr; }
  .room-row-head{ display:none; }
  .room-row > span{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
  .room-row > span[data-label]::before{
    content: attr(data-label); font-size:.7rem; text-transform:uppercase;
    letter-spacing:.06em; color:var(--muted); font-weight:600; flex-shrink:0;
  }
  .room-row .admin-row-actions{ justify-content:flex-end; padding-top:.4rem; border-top:1px solid var(--glass-border); }
}

.auth-forgot-link{
  display:inline-block; margin-top:.5rem; font-size:.8rem; color:var(--muted);
  transition:color .3s;
}
.auth-forgot-link:hover{ color:var(--accent); text-decoration:underline; }

.room-plan{
  display:inline-block; font-size:.78rem; font-weight:600; color:var(--accent);
  background:rgba(34,211,238,0.08); border:1px solid rgba(34,211,238,0.25);
  padding:.2rem .6rem; border-radius:999px; width:fit-content;
}

.dashboard-wrap-narrow{ max-width:700px; }
.dashboard-wrap-narrow .admin-card{ margin-bottom:2rem; }

/* =========================================================
   ADMIN TABS / MESSAGES INBOX
   ========================================================= */
.admin-tabs{ display:flex; gap:.8rem; margin-bottom:1.6rem; flex-wrap:wrap; }
.admin-tab{
  display:flex; align-items:center; gap:.5rem; padding:.6rem 1.2rem;
  border-radius:999px; border:1px solid var(--glass-border); background:var(--glass);
  color:var(--text-dim); font-size:.88rem; font-weight:600; transition:.3s;
}
.admin-tab:hover{ border-color:var(--accent); color:var(--accent); }
.admin-tab.active{
  background: linear-gradient(100deg, var(--primary), var(--accent));
  color:#04070d; border-color:transparent;
}
.admin-tab-badge{
  background:#ff6b6b; color:#fff; font-size:.7rem; font-weight:700;
  min-width:18px; height:18px; border-radius:999px; display:inline-flex;
  align-items:center; justify-content:center; padding:0 .35rem;
}
.admin-tab.active .admin-tab-badge{ background:rgba(4,7,13,0.25); color:#04070d; }

.nav-badge{
  background:#ff6b6b; color:#fff; font-size:.65rem; font-weight:700;
  min-width:16px; height:16px; border-radius:999px; display:inline-flex;
  align-items:center; justify-content:center; padding:0 .3rem; margin-left:.3rem;
}

.message-card{ padding:1.8rem; }
.message-card.message-pending{ border-color:rgba(251,191,36,0.35); }
.message-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.8rem; flex-wrap:wrap; gap:.5rem;
}
.message-type{ font-size:.82rem; font-weight:600; color:var(--text-dim); }
.message-date{ font-size:.78rem; color:var(--muted); }
.message-card h3{
  font-family:var(--font-display); font-size:1.05rem; font-weight:600; margin-bottom:.4rem;
}
.message-contact{
  display:flex; align-items:center; gap:.5rem; font-size:.85rem;
  color:var(--muted); margin-bottom:1rem;
}
.message-contact i{ color:var(--accent); }
.message-body{
  white-space:pre-wrap; word-break:break-word; font-family:var(--font-body);
  font-size:.9rem; color:var(--text-dim); background:rgba(255,255,255,0.02);
  border:1px solid var(--glass-border); border-radius:8px; padding:1rem;
  margin:0 0 1.2rem;
}
.message-reply-shown{
  background:rgba(52,211,153,0.06); border:1px solid rgba(52,211,153,0.2);
  border-radius:8px; padding:1rem;
}
.message-reply-shown p{ margin-top:.5rem; font-size:.88rem; color:var(--text-dim); }

.reply-form{ display:flex; flex-direction:column; gap:.8rem; }
.reply-form textarea{
  width:100%; padding:.75rem .9rem; border-radius:8px;
  background:rgba(255,255,255,0.03); border:1px solid var(--glass-border);
  color:var(--text); font-family:var(--font-body); font-size:.9rem; resize:vertical;
}
.reply-form textarea:focus{ outline:none; border-color:var(--accent); }

.message-head-right{ display:flex; align-items:center; gap:.9rem; }

/* =========================================================
   MOBILE POLISH — auth pages, dashboard, admin, modal
   ========================================================= */
@media (max-width:600px){
  .auth-section{ padding: 7rem 1.1rem 3.5rem; }
  .auth-card{ padding:1.8rem 1.4rem; max-width:100%; }
  .auth-title{ font-size:1.4rem; }
  .dashboard-head{ margin-bottom:1.8rem; }
  .dashboard-head .auth-title{ font-size:1.6rem; }
  .admin-card{ padding:1.5rem 1.2rem; }
  .admin-card h3{ font-size:1rem; }
  .dashboard-card{ padding:1.5rem 1.3rem; }
  .modal-overlay{ padding:.9rem; }
  .modal-card{ padding:1.6rem 1.3rem; max-height:92vh; }
  .modal-title{ font-size:1.3rem; }
  .admin-tabs{ gap:.5rem; }
  .admin-tab{ padding:.5rem .9rem; font-size:.82rem; }
  .message-card{ padding:1.3rem; }
  .message-head{ align-items:flex-start; }
  .dashboard-logout{ padding-top:.5rem; }

  /* Prevent iOS Safari from auto-zooming when a form field is focused */
  .reserve-form input, .reserve-form select, .reserve-form textarea,
  .contact-form input, .contact-form textarea,
  .auth-form input, .auth-form textarea, .admin-add-form select, .reply-form textarea{
    font-size:16px;
  }
}

/* =========================================================
   OVERFLOW SAFETY NET
   Grid/flex children (especially ones containing form inputs)
   can force their track wider than the viewport on mobile unless
   explicitly told they're allowed to shrink below their content size.
   ========================================================= */
.pricing-grid > *,
.feature-grid > *,
.dashboard-grid > *,
.admin-form-grid > *,
.status-grid > *,
.locations-wrap > *,
.hero-stats > *,
.form-row,
.room-row > *{
  min-width:0;
}
.room-name, .room-plan, .message-contact, .auth-title, .dashboard-head .auth-title{
  overflow-wrap:break-word; word-break:break-word;
}
img, video, svg, canvas{ max-width:100%; }

/* =========================================================
   ANALYTICS
   ========================================================= */
.analytics-summary{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-bottom:1.6rem;
}
@media (max-width:900px){ .analytics-summary{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .analytics-summary{ grid-template-columns:1fr; } }
.analytics-stat{
  padding:1.6rem; display:flex; flex-direction:column; gap:.5rem; text-align:center;
}
.analytics-stat-label{
  font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
}
.analytics-stat-value{
  font-family:var(--font-display); font-weight:700; font-size:2rem; color:var(--text);
}
.analytics-chart-wrap{ position:relative; height:280px; }

.g-recaptcha{ transform-origin:left top; }
@media (max-width:360px){
  .g-recaptcha{ transform:scale(0.9); }
}

.recaptcha-notice{
  font-size:.75rem; color:var(--muted); line-height:1.5; margin:0;
}
.recaptcha-notice a{ color:var(--accent); }
.recaptcha-notice a:hover{ text-decoration:underline; }

.message-card-inline{ margin-bottom:1.4rem; }
.message-card-inline:last-child{ margin-bottom:0; }

/* =========================================================
   REFERRALS
   ========================================================= */
.referral-link-row{ display:flex; gap:.8rem; flex-wrap:wrap; }
.referral-link-row input{
  flex:1; min-width:200px; padding:.75rem .9rem; border-radius:8px;
  background:rgba(255,255,255,0.03); border:1px solid var(--glass-border);
  color:var(--text); font-family:var(--font-mono); font-size:.85rem;
}
.referral-link-row .btn{ flex-shrink:0; }
.referral-code-note{ margin-top:1rem; font-size:.85rem; color:var(--text-dim); }
.referral-summary{ grid-template-columns:repeat(2,1fr); }
@media (max-width:560px){ .referral-summary{ grid-template-columns:1fr; } }

/* =========================================================
   LEADERBOARD
   ========================================================= */
.referral-leaderboard-cta{ margin-bottom:2rem; }
.leaderboard-table .room-row{ grid-template-columns: .7fr 1.6fr .8fr; }
.leaderboard-me{ text-align:center; margin-bottom:2rem; }
.leaderboard-me-row{
  display:flex; align-items:baseline; justify-content:center; gap:.8rem; margin-top:.6rem;
}
.leaderboard-me-rank{
  font-family:var(--font-display); font-weight:800; font-size:2.2rem;
  background: linear-gradient(100deg, var(--accent), var(--primary-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.leaderboard-me-visits{ color:var(--text-dim); font-size:.95rem; }
.leaderboard-row-me{
  background: rgba(34,211,238,0.08); border-left:2px solid var(--accent);
}