/* =============================================================
   CLUB 218 — THEME LAYER v1
   Additive Premium Design System (Neon Pink × Neon Blue)
   © 2026 Club 218 / apg-export
   -------------------------------------------------------------
   Usage:  <link rel="stylesheet" href="/theme.css">
   Loaded AFTER existing <style> in each HTML file.
   ============================================================= */

:root{
  /* ── Extended palette (additive, won't override existing) ── */
  --pink-50:#fff0f7;  --pink-100:#ffd3e6; --pink-300:#ff7eb3;
  --pink-500:#e8177a; --pink-600:#c2105f; --pink-700:#8b0a44;
  --blue-50:#eaf3ff;  --blue-100:#c7defe; --blue-300:#7baef7;
  --blue-500:#2979ff; --blue-600:#1e5ed1; --blue-700:#143f8a;

  /* ── Semantic surface tokens ── */
  --surface-0:#04020a;   /* page bg */
  --surface-1:#0a0614;   /* card bg */
  --surface-2:#120a20;   /* card hover */
  --surface-3:#1a1030;   /* elevated */
  --hairline:rgba(240,236,250,.06);
  --hairline-strong:rgba(240,236,250,.12);

  /* ── Dual-accent gradients ── */
  --grad-dual:linear-gradient(135deg,#e8177a 0%,#7c3aed 50%,#2979ff 100%);
  --grad-dual-soft:linear-gradient(135deg,rgba(232,23,122,.18),rgba(124,58,237,.12),rgba(41,121,255,.18));
  --grad-pink:linear-gradient(135deg,#ff4da6 0%,#e8177a 50%,#8b0a44 100%);
  --grad-blue:linear-gradient(135deg,#7baef7 0%,#2979ff 50%,#143f8a 100%);
  --grad-radial-pink:radial-gradient(ellipse at center,rgba(232,23,122,.35) 0%,transparent 65%);
  --grad-radial-blue:radial-gradient(ellipse at center,rgba(41,121,255,.30) 0%,transparent 65%);

  /* ── Refined glow shadows ── */
  --glow-sm-pink:0 0 12px rgba(232,23,122,.35);
  --glow-md-pink:0 0 24px rgba(232,23,122,.45),0 0 60px rgba(232,23,122,.18);
  --glow-lg-pink:0 0 40px rgba(232,23,122,.55),0 0 100px rgba(232,23,122,.25);
  --glow-sm-blue:0 0 12px rgba(41,121,255,.35);
  --glow-md-blue:0 0 24px rgba(41,121,255,.45),0 0 60px rgba(41,121,255,.18);
  --glow-lg-blue:0 0 40px rgba(41,121,255,.55),0 0 100px rgba(41,121,255,.25);
  --glow-dual:0 0 20px rgba(232,23,122,.30),0 0 40px rgba(41,121,255,.25);

  /* ── Elevation (neutral depth) ── */
  --elev-1:0 1px 2px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.25);
  --elev-2:0 4px 12px rgba(0,0,0,.5),0 8px 24px rgba(0,0,0,.3);
  --elev-3:0 10px 30px rgba(0,0,0,.6),0 20px 60px rgba(0,0,0,.4);

  /* ── Motion ── */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:140ms;
  --dur-base:280ms;
  --dur-slow:520ms;

  /* ── Radius ── */
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  /* ── Z-stack ── */
  --z-toast:11000; --z-cmdk:10500; --z-modal:10000; --z-nav:8500; --z-fab:8000;
}

/* ── Reduced motion respect ── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* =============================================================
   ANIMATED AMBIENT BACKDROP (opt-in via .ambient on <body>)
   ============================================================= */
.ambient{position:relative;isolation:isolate}
.ambient::before,.ambient::after{
  content:"";position:fixed;inset:auto;width:55vmax;height:55vmax;
  border-radius:50%;filter:blur(120px);opacity:.35;pointer-events:none;z-index:-1;
  animation:ambientFloat 22s var(--ease-out) infinite alternate;
}
.ambient::before{background:var(--grad-radial-pink);top:-10vmax;left:-10vmax}
.ambient::after{background:var(--grad-radial-blue);bottom:-10vmax;right:-10vmax;animation-delay:-11s}
@keyframes ambientFloat{
  0%  {transform:translate3d(0,0,0) scale(1)}
  50% {transform:translate3d(4vw,-3vh,0) scale(1.08)}
  100%{transform:translate3d(-3vw,4vh,0) scale(.95)}
}

/* =============================================================
   GLASS CARDS — three depths
   ============================================================= */
.glass{
  background:linear-gradient(180deg,rgba(240,236,250,.04),rgba(240,236,250,.01));
  border:1px solid var(--hairline);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-radius:var(--r-lg);
  box-shadow:var(--elev-1);
}
.glass-strong{
  background:linear-gradient(180deg,rgba(240,236,250,.08),rgba(240,236,250,.02));
  border:1px solid var(--hairline-strong);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border-radius:var(--r-lg);
  box-shadow:var(--elev-2);
}
.glass-pink{
  background:linear-gradient(180deg,rgba(232,23,122,.10),rgba(232,23,122,.02));
  border:1px solid rgba(232,23,122,.25);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-radius:var(--r-lg);
  box-shadow:var(--glow-sm-pink),var(--elev-1);
}
.glass-blue{
  background:linear-gradient(180deg,rgba(41,121,255,.10),rgba(41,121,255,.02));
  border:1px solid rgba(41,121,255,.25);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border-radius:var(--r-lg);
  box-shadow:var(--glow-sm-blue),var(--elev-1);
}

/* ── Animated gradient border (premium card frame) ── */
.neon-frame{position:relative;border-radius:var(--r-lg);background:var(--surface-1);padding:1px;isolation:isolate}
.neon-frame::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--ang,0deg),#e8177a,#7c3aed,#2979ff,#7c3aed,#e8177a);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:rotateBorder 6s linear infinite;
}
.neon-frame > *{position:relative;z-index:1;border-radius:inherit;background:var(--surface-1)}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes rotateBorder{to{--ang:360deg}}

/* =============================================================
   BUTTONS — refined dual-accent system
   ============================================================= */
.btn218{
  --btn-bg:transparent;--btn-fg:#fff;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.8rem;border-radius:var(--r-pill);
  font-family:"Bebas Neue","DM Sans",sans-serif;font-weight:500;
  font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bd);
  cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--dur-base) var(--ease-spring),
             box-shadow var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out);
  user-select:none;
}
.btn218::before{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  transform:translateX(-100%);transition:transform .8s var(--ease-out),opacity .2s;
}
.btn218:hover::before{opacity:1;transform:translateX(100%)}
.btn218:active{transform:translateY(1px) scale(.98)}
.btn218:focus-visible{outline:2px solid #fff;outline-offset:3px}

.btn218.is-pink{--btn-bg:var(--grad-pink);--btn-bd:transparent;box-shadow:var(--glow-md-pink)}
.btn218.is-pink:hover{box-shadow:var(--glow-lg-pink);transform:translateY(-2px)}
.btn218.is-blue{--btn-bg:var(--grad-blue);--btn-bd:transparent;box-shadow:var(--glow-md-blue)}
.btn218.is-blue:hover{box-shadow:var(--glow-lg-blue);transform:translateY(-2px)}
.btn218.is-dual{--btn-bg:var(--grad-dual);box-shadow:var(--glow-dual)}
.btn218.is-dual:hover{box-shadow:0 0 36px rgba(232,23,122,.5),0 0 64px rgba(41,121,255,.4);transform:translateY(-2px)}
.btn218.is-ghost-pink{--btn-bd:rgba(232,23,122,.5);color:var(--pink-300)}
.btn218.is-ghost-pink:hover{background:rgba(232,23,122,.1);color:#fff;border-color:var(--pink-500);box-shadow:var(--glow-sm-pink)}
.btn218.is-ghost-blue{--btn-bd:rgba(41,121,255,.5);color:var(--blue-300)}
.btn218.is-ghost-blue:hover{background:rgba(41,121,255,.1);color:#fff;border-color:var(--blue-500);box-shadow:var(--glow-sm-blue)}
.btn218.is-sm{padding:.55rem 1.1rem;font-size:.78rem}
.btn218.is-lg{padding:1.05rem 2.4rem;font-size:1rem}
.btn218[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}

/* ── Magnetic button (use [data-magnetic]) ── */
[data-magnetic]{transition:transform .25s var(--ease-spring) !important}

/* =============================================================
   INPUTS / FORMS — clean dark with focus glow
   ============================================================= */
.field218{
  width:100%;padding:.85rem 1rem;
  background:var(--surface-1);
  color:#f0ecfa;
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-md);
  font-family:"DM Sans",sans-serif;font-size:.95rem;
  transition:border-color var(--dur-base),box-shadow var(--dur-base),background var(--dur-base);
  outline:none;
}
.field218::placeholder{color:rgba(240,236,250,.35)}
.field218:hover{border-color:rgba(240,236,250,.22)}
.field218:focus{
  border-color:var(--pink-500);
  box-shadow:0 0 0 3px rgba(232,23,122,.18),var(--glow-sm-pink);
  background:var(--surface-2);
}
.field218.is-blue:focus{
  border-color:var(--blue-500);
  box-shadow:0 0 0 3px rgba(41,121,255,.18),var(--glow-sm-blue);
}
.field218[aria-invalid="true"]{
  border-color:#ff3d3d;box-shadow:0 0 0 3px rgba(255,61,61,.18),0 0 16px rgba(255,61,61,.3);
}

/* =============================================================
   CHIPS / BADGES
   ============================================================= */
.chip218{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.32rem .8rem;border-radius:var(--r-pill);
  font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:var(--surface-2);color:rgba(240,236,250,.7);
  border:1px solid var(--hairline-strong);
}
.chip218.is-pink{background:rgba(232,23,122,.12);color:var(--pink-300);border-color:rgba(232,23,122,.3)}
.chip218.is-blue{background:rgba(41,121,255,.12);color:var(--blue-300);border-color:rgba(41,121,255,.3)}
.chip218.is-live{background:#ff3d3d;color:#fff;border-color:#ff3d3d;animation:pulseLive 1.6s ease-in-out infinite}
.chip218.is-success{background:rgba(0,230,118,.12);color:#7ff0b6;border-color:rgba(0,230,118,.35)}
.chip218.is-warn{background:rgba(255,179,0,.12);color:#ffd07f;border-color:rgba(255,179,0,.35)}
@keyframes pulseLive{50%{box-shadow:0 0 14px rgba(255,61,61,.7)}}
.chip218 .dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor}

/* =============================================================
   STAT CARDS (admin/dashboard)
   ============================================================= */
.stat218{
  padding:1.4rem 1.5rem;border-radius:var(--r-lg);
  background:var(--surface-1);border:1px solid var(--hairline);
  position:relative;overflow:hidden;
  transition:transform var(--dur-base) var(--ease-spring),border-color var(--dur-base);
}
.stat218::after{
  content:"";position:absolute;top:-30%;right:-30%;width:140px;height:140px;
  border-radius:50%;background:var(--grad-radial-pink);opacity:.6;pointer-events:none;
  transition:opacity var(--dur-base);
}
.stat218.is-blue::after{background:var(--grad-radial-blue)}
.stat218:hover{transform:translateY(-3px);border-color:var(--hairline-strong)}
.stat218:hover::after{opacity:.9}
.stat218 .label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(240,236,250,.55);font-weight:600}
.stat218 .value{font-family:"Bebas Neue",sans-serif;font-size:2.4rem;letter-spacing:.02em;line-height:1.05;margin:.4rem 0 .25rem;color:#fff}
.stat218 .delta{font-size:.78rem;color:#7ff0b6;display:inline-flex;align-items:center;gap:.25rem}
.stat218 .delta.is-down{color:#ff8585}

/* =============================================================
   TABLES — admin grid style
   ============================================================= */
.tbl218{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem}
.tbl218 thead th{
  text-align:left;padding:.85rem 1rem;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:rgba(240,236,250,.55);
  background:var(--surface-1);border-bottom:1px solid var(--hairline-strong);
  position:sticky;top:0;z-index:2;
}
.tbl218 tbody td{padding:.95rem 1rem;border-bottom:1px solid var(--hairline)}
.tbl218 tbody tr{transition:background var(--dur-fast)}
.tbl218 tbody tr:hover{background:rgba(232,23,122,.04)}
.tbl218 tbody tr.is-selected{background:rgba(41,121,255,.08)}

/* =============================================================
   TOAST SYSTEM (works with theme.js)
   ============================================================= */
#t218-toasts{position:fixed;top:1.2rem;right:1.2rem;z-index:var(--z-toast);display:flex;flex-direction:column;gap:.6rem;pointer-events:none}
.t218-toast{
  pointer-events:auto;min-width:280px;max-width:380px;
  padding:.95rem 1.15rem .95rem 1.15rem;
  background:var(--surface-2);border:1px solid var(--hairline-strong);border-radius:var(--r-md);
  box-shadow:var(--elev-3);color:#f0ecfa;font-size:.9rem;line-height:1.45;
  display:flex;align-items:flex-start;gap:.75rem;
  animation:toastIn .35s var(--ease-spring);
  border-left:3px solid var(--pink-500);
}
.t218-toast.is-success{border-left-color:#00e676}
.t218-toast.is-error{border-left-color:#ff3d3d;box-shadow:var(--elev-3),0 0 18px rgba(255,61,61,.25)}
.t218-toast.is-info{border-left-color:var(--blue-500);box-shadow:var(--elev-3),0 0 18px rgba(41,121,255,.18)}
.t218-toast.is-out{animation:toastOut .25s var(--ease-out) forwards}
.t218-toast .ico{flex:none;width:18px;height:18px;margin-top:1px;color:var(--pink-300)}
.t218-toast.is-success .ico{color:#7ff0b6}
.t218-toast.is-error .ico{color:#ff8585}
.t218-toast.is-info .ico{color:var(--blue-300)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(20px) scale(.95)}}

/* =============================================================
   COMMAND PALETTE (⌘K)
   ============================================================= */
.cmdk218-overlay{
  position:fixed;inset:0;z-index:var(--z-cmdk);
  background:rgba(4,2,10,.72);backdrop-filter:blur(8px);
  display:none;align-items:flex-start;justify-content:center;padding-top:14vh;
  animation:fadeIn .2s var(--ease-out);
}
.cmdk218-overlay.is-open{display:flex}
.cmdk218{
  width:min(640px,92vw);background:var(--surface-1);
  border:1px solid var(--hairline-strong);border-radius:var(--r-lg);
  box-shadow:var(--elev-3),var(--glow-md-pink);
  overflow:hidden;animation:cmdkIn .3s var(--ease-spring);
}
@keyframes fadeIn{from{opacity:0}}
@keyframes cmdkIn{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:none}}
.cmdk218 input{
  width:100%;padding:1.15rem 1.4rem;background:transparent;border:none;outline:none;
  color:#f0ecfa;font-size:1.05rem;border-bottom:1px solid var(--hairline-strong);
}
.cmdk218 input::placeholder{color:rgba(240,236,250,.4)}
.cmdk218-list{max-height:50vh;overflow-y:auto;padding:.5rem}
.cmdk218-item{
  display:flex;align-items:center;gap:.85rem;padding:.7rem .9rem;border-radius:var(--r-md);
  color:rgba(240,236,250,.85);cursor:pointer;font-size:.92rem;
  transition:background var(--dur-fast);
}
.cmdk218-item:hover,.cmdk218-item.is-active{background:rgba(232,23,122,.12);color:#fff}
.cmdk218-item .kbd{margin-left:auto;font-size:.7rem;color:rgba(240,236,250,.4);font-family:ui-monospace,monospace}
.cmdk218-empty{padding:1.5rem;text-align:center;color:rgba(240,236,250,.45);font-size:.9rem}

/* =============================================================
   SKELETONS (loading)
   ============================================================= */
.skel218{
  background:linear-gradient(90deg,var(--surface-1) 0%,var(--surface-2) 50%,var(--surface-1) 100%);
  background-size:200% 100%;border-radius:var(--r-sm);
  animation:skelShimmer 1.4s linear infinite;
}
@keyframes skelShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* =============================================================
   SCROLL PROGRESS BAR (top of viewport, theme.js drives it)
   ============================================================= */
#t218-scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:9000;
  background:var(--grad-dual);box-shadow:0 0 12px rgba(232,23,122,.6);
  transition:width 80ms linear;pointer-events:none;
}

/* =============================================================
   DIVIDERS
   ============================================================= */
.div218{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--hairline-strong),transparent);margin:2rem 0}
.div218.is-pink{background:linear-gradient(90deg,transparent,var(--pink-500),transparent);box-shadow:0 0 12px rgba(232,23,122,.4)}
.div218.is-blue{background:linear-gradient(90deg,transparent,var(--blue-500),transparent);box-shadow:0 0 12px rgba(41,121,255,.4)}

/* =============================================================
   TEXT GRADIENTS
   ============================================================= */
.text-grad-pink,.text-grad-blue,.text-grad-dual{
  background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
}
.text-grad-pink{background-image:var(--grad-pink)}
.text-grad-blue{background-image:var(--grad-blue)}
.text-grad-dual{background-image:var(--grad-dual)}

/* =============================================================
   FOCUS-VISIBLE — global accessible ring
   ============================================================= */
:focus-visible{outline:2px solid var(--pink-500);outline-offset:3px;border-radius:4px}
button:focus-visible,a:focus-visible{outline-color:var(--pink-500)}

/* =============================================================
   MODERN SCROLLBAR
   ============================================================= */
*{scrollbar-width:thin;scrollbar-color:var(--pink-500) transparent}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--pink-500),var(--blue-500));
  border-radius:4px;border:2px solid var(--surface-0);
}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ff4da6,#64b5f6)}

/* =============================================================
   UTILITY CLASSES
   ============================================================= */
.glow-pink{box-shadow:var(--glow-md-pink)}
.glow-blue{box-shadow:var(--glow-md-blue)}
.glow-dual{box-shadow:var(--glow-dual)}
.hover-lift{transition:transform var(--dur-base) var(--ease-spring),box-shadow var(--dur-base)}
.hover-lift:hover{transform:translateY(-4px);box-shadow:var(--elev-2)}
.no-scrollbar{scrollbar-width:none}.no-scrollbar::-webkit-scrollbar{display:none}
.is-clickable{cursor:pointer}
.flex218{display:flex;gap:.75rem;align-items:center}
.grid218{display:grid;gap:1rem}
.grid218.cols-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid218.cols-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid218.cols-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* =============================================================
   PRINT
   ============================================================= */
@media print{
  .ambient::before,.ambient::after,#t218-toasts,#t218-scroll-progress,.cmdk218-overlay{display:none !important}
  body{background:#fff;color:#000}
}
