/* File: assets/css/style.css — NEON CURSOR single dark theme.
 * Glow/neon is layered ON TOP of the existing card/grid skeleton;
 * no structural/size rules here. */

:root{ --cyan:#22d3ee; --magenta:#e879f9; --elec:#3b82f6; --ink:#0b0c10; --panel:#101218; }
html,body{background:#0b0c10}
body{
  background-image:
    radial-gradient(circle at 12% -10%,rgba(34,211,238,.10),transparent 42%),
    radial-gradient(circle at 88% 0,rgba(232,121,249,.10),transparent 45%),
    radial-gradient(circle at 50% 120%,rgba(59,130,246,.08),transparent 55%);
  background-attachment:fixed;
}
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(34,211,238,.25);border-radius:5px}
::selection{background:rgba(232,121,249,.35);color:#fff}

.glass-card{
  background:rgba(255,255,255,.025)!important;
  border-color:rgba(34,211,238,.14)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
.glass-card:hover{
  border-color:rgba(34,211,238,.55)!important;
  box-shadow:0 0 0 1px rgba(34,211,238,.25),0 10px 40px -10px rgba(34,211,238,.35)!important;
}

.neon-text{text-shadow:0 0 8px rgba(34,211,238,.55),0 0 22px rgba(34,211,238,.30)}

/* logo: soft cyberpunk neon-sign breathing glow (not a hard blink) */
@keyframes neonBreath{
  0%{
    text-shadow:
      0 0 4px rgba(255,255,255,.55),
      0 0 10px rgba(34,211,238,.45),
      0 0 22px rgba(34,211,238,.28),
      0 0 40px rgba(232,121,249,.16);
  }
  100%{
    text-shadow:
      0 0 6px rgba(255,255,255,.85),
      0 0 16px rgba(34,211,238,.80),
      0 0 34px rgba(34,211,238,.55),
      0 0 62px rgba(232,121,249,.34);
  }
}
.neon-logo{
  color:#fff;
  animation:neonBreath 3.2s ease-in-out infinite alternate;
  will-change:text-shadow;
  transition:text-shadow .35s ease;
}
.group:hover .neon-logo,.neon-logo:hover{
  animation-play-state:paused;
  text-shadow:
    0 0 7px rgba(255,255,255,.95),
    0 0 20px rgba(34,211,238,.95),
    0 0 42px rgba(34,211,238,.70),
    0 0 78px rgba(232,121,249,.45);
}
@media (prefers-reduced-motion: reduce){
  .neon-logo{animation:none;text-shadow:0 0 6px rgba(34,211,238,.6),0 0 18px rgba(34,211,238,.35)}
}

/* HERO wordmark — stylish neon-sign flicker (flickers, then glows) */
@keyframes neonFlicker{
  0%,18%,22%,25%,53%,57%,100%{
    opacity:1;
    text-shadow:
      0 0 6px rgba(255,255,255,.9),
      0 0 14px rgba(34,211,238,.85),
      0 0 30px rgba(34,211,238,.6),
      0 0 60px rgba(232,121,249,.4),
      0 0 90px rgba(232,121,249,.25);
  }
  20%,24%,55%{
    opacity:.78;
    text-shadow:0 0 4px rgba(255,255,255,.5),0 0 10px rgba(34,211,238,.35);
  }
}
.neon-flicker{
  color:#fff;
  animation:neonFlicker 4.5s linear infinite;
  will-change:opacity,text-shadow;
}
@media (prefers-reduced-motion: reduce){
  .neon-flicker{animation:none;text-shadow:0 0 8px rgba(34,211,238,.6),0 0 22px rgba(34,211,238,.35)}
}
.neon-text-m{text-shadow:0 0 8px rgba(232,121,249,.55),0 0 22px rgba(232,121,249,.30)}
.neon-ico{filter:drop-shadow(0 0 6px rgba(34,211,238,.7))}
.neon-line{box-shadow:0 1px 0 rgba(34,211,238,.15),0 6px 24px -16px rgba(34,211,238,.5)}
h1,h2,h3{color:#fff}

.bg-gold,.dark .bg-gold{background:#22d3ee!important;box-shadow:0 0 14px rgba(34,211,238,.7)}
.bg-neon,.dark .bg-neon{background:#e879f9!important}

.nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  transform:scaleX(0);transform-origin:left;transition:transform .25s;
}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link.active{color:#22d3ee}

.neon-btn{box-shadow:0 0 0 1px rgba(232,121,249,.15)}
.add-btn{
  background:linear-gradient(120deg,#22d3ee,#3b82f6)!important;color:#04141a!important;
  box-shadow:0 0 18px rgba(34,211,238,.45)!important;border:none!important;
}
.add-btn:hover{box-shadow:0 0 26px rgba(34,211,238,.7)!important}
.preview-btn,.dropdown-container > button{
  border-color:rgba(34,211,238,.3)!important;color:#22d3ee!important;background:rgba(34,211,238,.06)!important;
}
.preview-btn:hover,.dropdown-container > button:hover{
  box-shadow:0 0 16px rgba(34,211,238,.55)!important;border-color:#22d3ee!important;
}
.preview-btn.active{
  background:linear-gradient(120deg,#22d3ee,#e879f9)!important;color:#04141a!important;
  box-shadow:0 0 22px rgba(34,211,238,.7)!important;border-color:transparent!important;
}

.dropdown-menu{background:#0d0f15!important;border-color:rgba(34,211,238,.2)!important;
  box-shadow:0 18px 50px -10px rgba(0,0,0,.8),0 0 0 1px rgba(34,211,238,.15)!important}
.dropdown-menu a:hover{background:rgba(34,211,238,.1)!important;color:#22d3ee!important}
input,select,textarea{caret-color:#22d3ee}

.pill{background:rgba(255,255,255,.03);border:1px solid rgba(34,211,238,.18);color:#cbd5e1;transition:.2s}
.pill:hover{border-color:rgba(34,211,238,.5);color:#fff;box-shadow:0 0 14px rgba(34,211,238,.35)}
.pill.active{background:linear-gradient(120deg,#22d3ee,#e879f9);color:#04141a;border-color:transparent;
  box-shadow:0 0 20px rgba(34,211,238,.55)}

.cursor-live,
.cursor-live a,.cursor-live button,.cursor-live [role="button"],.cursor-live .preview-btn{
  cursor:var(--cur,auto)!important;
}

#toasts{position:fixed;bottom:1.5rem;right:1.5rem;z-index:120;display:flex;flex-direction:column;gap:.6rem}
.toast{display:flex;align-items:center;gap:.6rem;padding:.8rem 1.1rem;border-radius:.9rem;font-size:.88rem;
  background:#0d0f15;color:#e5e7eb;border:1px solid rgba(34,211,238,.25);
  box-shadow:0 0 22px rgba(34,211,238,.25);animation:tin .35s cubic-bezier(.16,1,.3,1) both}
.toast.ok{border-left:4px solid #22d3ee}
.toast.err{border-left:4px solid #ef4444}
.toast.warn{border-left:4px solid #f59e0b}
.toast.leaving{animation:tout .3s ease forwards}
@keyframes tin{from{opacity:0;transform:translateY(14px)}}
@keyframes tout{to{opacity:0;transform:translateY(14px)}}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}}
.rise{animation:riseIn .5s cubic-bezier(.16,1,.3,1) both}

.neon-hero{
  background:
    linear-gradient(rgba(34,211,238,.04) 1px,transparent 1px) 0 0/100% 38px,
    linear-gradient(90deg,rgba(232,121,249,.04) 1px,transparent 1px) 0 0/38px 100%;
  border-bottom:1px solid rgba(34,211,238,.15);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* Footer right-side neon sign — animated "tabela" effect */
.neon-sign-frame{
  border:2px solid rgba(34,211,238,.45);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(13,16,24,.85),rgba(20,24,34,.85));
  box-shadow:
    0 0 18px rgba(34,211,238,.25),
    0 0 60px rgba(232,121,249,.15),
    inset 0 0 22px rgba(34,211,238,.08);
  animation:signFrame 3.4s ease-in-out infinite alternate;
}
@keyframes signFrame{
  0%{box-shadow:0 0 12px rgba(34,211,238,.18),0 0 40px rgba(232,121,249,.10),inset 0 0 14px rgba(34,211,238,.06);border-color:rgba(34,211,238,.32)}
  100%{box-shadow:0 0 26px rgba(34,211,238,.55),0 0 80px rgba(232,121,249,.30),inset 0 0 28px rgba(34,211,238,.14);border-color:rgba(34,211,238,.72)}
}
.neon-sign-bolt{
  filter:drop-shadow(0 0 6px rgba(34,211,238,.85)) drop-shadow(0 0 16px rgba(34,211,238,.45));
}
.neon-sign-text{
  color:#fff;
  animation:signFlicker 4.6s linear infinite;
}
@keyframes signFlicker{
  0%,18%,22%,25%,53%,57%,100%{
    opacity:1;
    text-shadow:0 0 7px rgba(255,255,255,.9),0 0 16px rgba(34,211,238,.85),0 0 32px rgba(34,211,238,.55),0 0 60px rgba(232,121,249,.35);
  }
  20%,24%,55%{
    opacity:.72;
    text-shadow:0 0 4px rgba(255,255,255,.5),0 0 10px rgba(34,211,238,.35);
  }
}
@media (prefers-reduced-motion:reduce){
  .neon-sign-frame,.neon-sign-bolt,.neon-sign-text{animation:none}
}

/* ============================================================================
   Light theme — activated via <html class="light">. The brand neon palette
   stays the same; we just flip the surfaces from ink to paper so the site
   stays usable in daytime / bright environments.
   ============================================================================*/
html.light{color-scheme:light}
html.light body{background:#f4f6fb;color:#0f172a}
html.light .bg-ink\/85{background:rgba(255,255,255,.85) !important}
html.light .bg-panel,
html.light .bg-panel\/40,
html.light .bg-panel\/50,
html.light .bg-panel\/60{background:#fff !important}
html.light .glass-card{
  background:linear-gradient(180deg,#ffffff,#f6f7fb) !important;
  border-color:rgba(15,23,42,.08) !important;
  color:#0f172a !important;
}
html.light .border-cyan\/15,
html.light .border-cyan\/20,
html.light .border-cyan\/25,
html.light .border-white\/10{border-color:rgba(34,211,238,.35) !important}
html.light .text-white,
html.light .neon-text,
html.light .neon-logo{color:#0f172a !important}
html.light .text-slate-300{color:#334155 !important}
html.light .text-slate-400{color:#475569 !important}
html.light .text-slate-500{color:#64748b !important}
html.light .text-slate-600{color:#475569 !important}
html.light .neon-flicker{text-shadow:0 0 6px rgba(34,211,238,.25),0 0 18px rgba(232,121,249,.18)}
html.light .pill{background:#fff !important;color:#0f172a !important;border-color:rgba(15,23,42,.12) !important}
html.light .pill.active{background:rgba(34,211,238,.18) !important;color:#0e7490 !important;border-color:rgba(34,211,238,.6) !important}
html.light .neon-sign-frame{background:linear-gradient(135deg,#f9fafb,#eef2f7)}
html.light .neon-sign-text{color:#0f172a}
html.light header.fixed{box-shadow:0 1px 0 rgba(15,23,42,.06)}
html.light .nav-link{color:#334155}
/* Smooth color transitions when flipping themes */
html,body,header,footer,.glass-card,.pill,.bg-panel,.bg-panel\/40,.bg-panel\/50{
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}

/* ============================================================================
   Mobile slider → vertical grid (no slider on phones, per user request)
   Each .row-slide stacks under the previous one so all 32 cards appear as
   one long, scrollable list. Arrows + dots are hidden; the row-track flex
   becomes column. The slide's inner grid is grid-cols-1 already (see main.js).
   ============================================================================*/
@media (max-width: 639px) {
  .row-track{
    flex-direction:column !important;
    transform:none !important;
    transition:none !important;
    cursor:default !important;
    gap:1.5rem;
    touch-action:auto !important;
  }
  .row-slide{ width:100% !important; flex:0 0 auto !important; }
  .row-arrow, .row-dots{ display:none !important; }
}

/* ============================================================================
   Sidebar ad strips (left + right) on wide screens. Hidden by default; shown
   only when there's actual room next to the 1480px content container so the
   ads never overlap content. Admin sets the code in Settings → ad_sidebar.
   ============================================================================*/
.ad-side{
  position:fixed; top:6.5rem; z-index:30;
  width:160px; max-height:calc(100vh - 8rem); overflow:hidden;
  display:none;
}
.ad-side-left { left:1rem; }
.ad-side-right{ right:1rem; }
@media (min-width: 1820px){
  .ad-side{ display:block; }
}
.ad-side > *{ max-width:100%; }