/* Neo FX theme (dark, glass, heavy) */
:root{
  --bg0:#05060a;
  --bg1:#070a12;
  --stroke:rgba(255,255,255,.16);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --accent:#7dd3fc;
  --accent2:#a78bfa;
  --accent3:#22c55e;
  --danger:#fb7185;
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --glow:0 0 40px rgba(125,211,252,.25), 0 0 90px rgba(167,139,250,.12);
  --r:18px;
  --fx-shift-x:0px;
  --fx-shift-y:0px;
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{height:100%;overscroll-behavior:none;background:var(--bg0);}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 900px at 20% 10%, #0c1330 0%, transparent 55%),
              radial-gradient(1000px 700px at 80% 15%, #1a0b2e 0%, transparent 55%),
              radial-gradient(900px 800px at 60% 80%, #052b25 0%, transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color:var(--text);
  overflow-x:hidden;
  position:relative;
  touch-action: manipulation;
}
.fx-bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.fx{position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none; overflow:hidden;}

/* Canvas FX layer used on some admin pages */
#fxCanvas{position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none;}
/* Ensure main content is above FX layers */
.wrap,.container{position:relative; z-index:1;}
.fx-layer{position:absolute; inset:-80px; opacity:.9;}
.fx-noise{position:absolute; inset:0; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); mix-blend-mode:overlay; opacity:.18;}
.fx-blob{width:520px;height:520px;border-radius:999px;position:absolute;
  background: radial-gradient(circle at 30% 30%, rgba(125,211,252,.55), transparent 60%),
              radial-gradient(circle at 70% 60%, rgba(167,139,250,.45), transparent 62%),
              radial-gradient(circle at 50% 80%, rgba(34,197,94,.25), transparent 60%);
  filter: blur(18px); opacity:.55; animation: blob 10s ease-in-out infinite;}
.fx-blob.b2{width:720px;height:720px;opacity:.35;filter: blur(26px);animation-duration:14s;}
.fx-blob.b3{width:420px;height:420px;opacity:.25;filter: blur(16px);animation-duration:12s;}
@keyframes blob{0%{transform:translate3d(-40px,-20px,0) scale(1)}35%{transform:translate3d(60px,50px,0) scale(1.08)}70%{transform:translate3d(-20px,80px,0) scale(.96)}100%{transform:translate3d(-40px,-20px,0) scale(1)}}
.fx-stars{position:absolute;inset:-120px;
  background: radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.65) 40%, transparent 42%),
             radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.55) 40%, transparent 42%),
             radial-gradient(1px 1px at 65% 35%, rgba(255,255,255,.45) 40%, transparent 42%),
             radial-gradient(1px 1px at 80% 70%, rgba(255,255,255,.6) 40%, transparent 42%),
             radial-gradient(1px 1px at 55% 90%, rgba(255,255,255,.45) 40%, transparent 42%);
  background-size:280px 280px; opacity:.22; animation: stars 18s linear infinite;}
@keyframes stars{from{transform:translate3d(0,0,0)}to{transform:translate3d(-140px,60px,0)}}
.container{max-width:980px;margin:0 auto;padding:24px 16px 56px;position:relative;z-index:1;}
.wrap{position:relative;z-index:1;}
.brand{display:flex;justify-content:center;margin:18px 0 20px;}
.brand img{width:min(320px,86vw);height:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.55)) drop-shadow(0 0 28px rgba(125,211,252,.18));
  transform: translate3d(var(--fx-shift-x), var(--fx-shift-y), 0); transition: transform .25s ease;}
.card{position:relative;background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border:1px solid var(--stroke);border-radius:var(--r);box-shadow:var(--shadow);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);overflow:hidden;}
.card::before{content:"";position:absolute;inset:-2px;
  background: radial-gradient(700px 240px at 12% 5%, rgba(125,211,252,.18), transparent 50%),
              radial-gradient(600px 200px at 88% 10%, rgba(167,139,250,.14), transparent 55%),
              radial-gradient(700px 250px at 50% 110%, rgba(34,197,94,.10), transparent 60%);
  opacity:.85;pointer-events:none;}
.card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg, rgba(255,255,255,.16), transparent 30%, transparent 70%, rgba(255,255,255,.10));
  transform: translate3d(calc(var(--fx-shift-x) * -1), calc(var(--fx-shift-y) * -1), 0); opacity:.35;pointer-events:none;}
.card-inner{position:relative;padding:18px 16px;}
.h1{font-size:clamp(22px,3.8vw,34px);margin:0 0 8px}
.p{color:var(--muted);margin:0 0 12px;line-height:1.35}
.grid{display:grid;gap:12px}
@media (min-width:720px){.grid.cols-2{grid-template-columns:1fr 1fr}.grid.cols-3{grid-template-columns:1fr 1fr 1fr}}
.btn{appearance:none;border:1px solid rgba(255,255,255,.18);color:var(--text);background:rgba(255,255,255,.06);
  border-radius:14px;padding:14px 14px;font-weight:800;letter-spacing:.2px;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.35);position:relative;overflow:hidden;}
.btn::before{content:"";position:absolute;inset:-2px;
  background: radial-gradient(320px 140px at 15% 20%, rgba(125,211,252,.30), transparent 60%),
              radial-gradient(320px 160px at 80% 60%, rgba(167,139,250,.22), transparent 62%);
  opacity:.8;pointer-events:none;}
.btn::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 20%, transparent 40%);
  transform: translateX(-120%);opacity:.55;}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.28)}
.btn:hover::after{transform:translateX(140%);transition:transform .9s ease}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.primary{border-color:rgba(125,211,252,.32);box-shadow:0 14px 36px rgba(0,0,0,.42), var(--glow);}
.btn.danger{border-color:rgba(251,113,133,.34)}
.btn.small{padding:10px 12px;border-radius:12px;font-weight:800}
.input, select{width:100%;background:rgba(10,14,24,.55);border:1px solid rgba(255,255,255,.18);color:var(--text);
  padding:12px 12px;border-radius:14px;outline:none;transition:border-color .12s ease, box-shadow .12s ease;}
.input:focus, select:focus{border-color:rgba(125,211,252,.40);box-shadow:0 0 0 4px rgba(125,211,252,.12)}
.row{display:flex;gap:10px;align-items:center}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:12px;color:rgba(255,255,255,.75)}
.hr{height:1px;background:rgba(255,255,255,.10);margin:12px 0}
.toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.16);padding:10px 12px;border-radius:14px;backdrop-filter:blur(12px);
  opacity:0;transition:opacity .2s ease, transform .2s ease;z-index:999;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

/* --- Global FX canvas safety (prevents 'empty page' on mobile) --- */
#fxCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;}

/* --- Admin tables/cards --- */
.nav{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.nav a{color:rgba(159,211,255,.95);text-decoration:none;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04)}
.nav a:hover{border-color:rgba(255,255,255,.20)}

.table{width:100%;border-collapse:separate;border-spacing:0 10px}
.tableWrap{overflow:auto;-webkit-overflow-scrolling:touch}
.table th{font-size:12px;color:rgba(255,255,255,.65);font-weight:700;text-align:left;padding:0 10px}
.table td{padding:12px 10px;background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}
.table tr td:first-child{border-left:1px solid rgba(255,255,255,.10);border-top-left-radius:14px;border-bottom-left-radius:14px}
.table tr td:last-child{border-right:1px solid rgba(255,255,255,.10);border-top-right-radius:14px;border-bottom-right-radius:14px}

@media (max-width:720px){
  .table.mobileHide{display:none}
  .cards{display:grid;gap:12px}
  .cardrow{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
  .tag{font-size:11px;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05)}
}

@media (min-width:721px){
  .cards{display:none}
}