/* ═══════════════════════════════════
   FRAMEDROP v3 — Supabase Edition
   Aesthetic: Dark / Cinematic / Sharp
   Fonts: Syne + DM Sans
═══════════════════════════════════ */
:root {
  --bg:   #08080b;
  --bg1:  #0f0f14;
  --bg2:  #151520;
  --bg3:  #1c1c28;
  --bg4:  #232330;
  --b:    rgba(255,255,255,0.07);
  --b2:   rgba(255,255,255,0.13);
  --t:    #eeeaf8;
  --t2:   #9895b0;
  --t3:   #58556e;
  --ac:   #c8ff00;
  --ac2:  rgba(200,255,0,0.1);
  --pro:  #f5a623;
  --pro2: rgba(245,166,35,0.12);
  --red:  #ff4d4d;
  --blue: #3d7df5;
  --r:    12px;
  --rs:   8px;
  --nh:   60px;
  --sh:   0 12px 48px rgba(0,0,0,0.6);
  --tr:   .2s cubic-bezier(.4,0,.2,1);
  --fd:   'Syne', sans-serif;
  --fb:   'DM Sans', sans-serif;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--t); font-family:var(--fb); font-size:15px; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; max-width:100vw; }
a { text-decoration:none; color:inherit; }
button { font-family:var(--fb); cursor:pointer; border:none; background:none; }
input,select,textarea { font-family:var(--fb); font-size:14px; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg1); }
::-webkit-scrollbar-thumb { background:var(--bg4); border-radius:3px; }

/* ── LOADER ── */
.loader { position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; align-items:center; justify-content:center; transition:opacity .4s ease, visibility .4s ease; }
.loader.out { opacity:0; visibility:hidden; pointer-events:none; }
.loader-inner { display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.loader-inner .lmark { font-size:2rem; color:var(--ac); animation:pulse 1s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.lbar { width:150px; height:2px; background:var(--bg4); border-radius:2px; overflow:hidden; }
.lfill { height:100%; background:var(--ac); animation:lload 1.4s ease forwards; }
@keyframes lload { from{width:0} to{width:100%} }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── BUTTONS ── */
.btn-primary { background:var(--ac); color:#08080b; font-weight:700; font-size:14px; padding:.5rem 1.25rem; border-radius:var(--rs); transition:var(--tr); display:inline-block; border:none; cursor:pointer; font-family:var(--fb); }
.btn-primary:hover { background:#d8ff1a; transform:translateY(-1px); box-shadow:0 4px 20px rgba(200,255,0,.28); }
.btn-primary:active { transform:none; }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-ghost { color:var(--t2); font-size:14px; font-weight:500; padding:.5rem 1rem; border-radius:var(--rs); border:1px solid var(--b2); transition:var(--tr); background:none; cursor:pointer; font-family:var(--fb); display:inline-block; }
.btn-ghost:hover { color:var(--t); background:var(--bg3); }
.btn-outline { background:transparent; border:1px solid var(--b2); color:var(--t); font-weight:600; font-size:14px; padding:.5rem 1.25rem; border-radius:var(--rs); transition:var(--tr); cursor:pointer; font-family:var(--fb); }
.btn-outline:hover { border-color:var(--ac); color:var(--ac); }
.btn-lg { padding:.75rem 1.85rem; font-size:15px; }
.btn-full { width:100%; text-align:center; display:block; }

/* ── NAV ── */
.nav { position:fixed; top:0; left:0; right:0; z-index:500; height:var(--nh); display:flex; align-items:center; padding:0 clamp(1rem,5vw,2.5rem); gap:1rem; background:rgba(8,8,11,.82); backdrop-filter:blur(22px); border-bottom:1px solid var(--b); transition:var(--tr); }
.nav.scrolled { background:rgba(8,8,11,.97); }
.logo { font-family:var(--fd); font-weight:800; font-size:1.15rem; letter-spacing:-.03em; display:flex; align-items:center; gap:.4rem; flex-shrink:0; }
.lmark { color:var(--ac); }
.nav-links { display:flex; align-items:center; gap:.1rem; margin-left:.75rem; }
.nl { padding:.4rem .85rem; border-radius:7px; font-size:14px; font-weight:500; color:var(--t2); transition:var(--tr); }
.nl:hover,.nl.active { color:var(--t); background:var(--bg3); }
.nl-pro { color:var(--pro)!important; }
.nl-pro:hover { background:var(--pro2)!important; }
.nav-right { display:flex; align-items:center; gap:.6rem; margin-left:auto; }
.nav-guest { display:flex; gap:.5rem; align-items:center; }
.icon-btn { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--t2); transition:var(--tr); }
.icon-btn:hover { background:var(--bg3); color:var(--t); }
.hburg { flex-direction:column; gap:5px; width:34px; padding:5px; display:none; }
.hburg span { height:2px; background:var(--t2); border-radius:2px; display:block; }

/* Chip + Dropdown */
.chip { display:flex; align-items:center; gap:.55rem; padding:.25rem .7rem .25rem .25rem; background:var(--bg3); border:1px solid var(--b2); border-radius:100px; transition:var(--tr); }
.chip:hover { border-color:var(--ac); }
.chip-av { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--ac),#4af); display:flex; align-items:center; justify-content:center; font-family:var(--fd); font-weight:800; font-size:12px; color:#08080b; flex-shrink:0; }
.chip-name { font-size:13px; font-weight:600; max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav-user { position:relative; }
.dropdown { position:absolute; top:calc(100% + 10px); right:0; background:var(--bg2); border:1px solid var(--b2); border-radius:var(--r); padding:.5rem; min-width:195px; opacity:0; pointer-events:none; transform:translateY(-8px); transition:var(--tr); box-shadow:var(--sh); z-index:600; }
.dropdown.open { opacity:1; pointer-events:all; transform:translateY(0); }
.dd-head { padding:.4rem .75rem .5rem; }
.dd-head span:first-child { display:block; font-family:var(--fd); font-weight:700; font-size:14px; }
.dd-plan { display:block; font-size:12px; color:var(--t3); margin-top:2px; }
.dd-plan.pro { color:var(--pro); font-weight:600; }
.ddsep { height:1px; background:var(--b); margin:.4rem 0; }
.ddi { display:block; padding:.5rem .75rem; border-radius:7px; font-size:13px; color:var(--t2); transition:var(--tr); }
.ddi:hover { background:var(--bg3); color:var(--t); }
.ddi-pro { color:var(--pro)!important; }
.ddi-out { color:var(--red)!important; }

/* ── SEARCH ── */
.search-ov { position:fixed; inset:0; z-index:700; background:rgba(8,8,11,.96); backdrop-filter:blur(24px); padding:5rem 1.5rem 2rem; display:flex; flex-direction:column; align-items:center; animation:fadeIn .15s ease; }
.search-inner { width:100%; max-width:560px; }
.sbox { display:flex; align-items:center; gap:.85rem; background:var(--bg2); border:1px solid var(--b2); border-radius:var(--r); padding:.85rem 1.2rem; margin-bottom:1rem; }
.sbox svg { flex-shrink:0; color:var(--t3); }
.sbox input { flex:1; background:none; border:none; outline:none; color:var(--t); font-size:1.05rem; font-family:var(--fb); }
.sbox input::placeholder { color:var(--t3); }
#sClose { color:var(--t3); font-size:15px; padding:4px 8px; border-radius:5px; transition:var(--tr); }
#sClose:hover { color:var(--t); background:var(--bg4); }
.sri { display:flex; align-items:center; gap:.85rem; background:var(--bg2); border:1px solid var(--b); border-radius:var(--rs); padding:.8rem 1.1rem; margin-bottom:.4rem; cursor:pointer; transition:var(--tr); }
.sri:hover { border-color:var(--b2); background:var(--bg3); }
.sri-thumb { width:52px; height:38px; border-radius:7px; flex-shrink:0; object-fit:cover; background:var(--bg4); }
.sri-t { font-weight:600; font-size:14px; }
.sri-m { font-size:12px; color:var(--t3); margin-top:2px; }
.sempty { color:var(--t3); text-align:center; padding:2rem; }

/* ── HERO ── */
.hero { position:relative; min-height:calc(100vh - var(--nh)); display:grid; grid-template-columns:1fr 1fr; align-items:center; padding:clamp(2rem,6vw,5rem) clamp(1.5rem,6vw,5rem); padding-top:calc(clamp(2rem,6vw,5rem) + var(--nh)); gap:3rem; overflow:hidden; }
.hero-grid { position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size:60px 60px; mask-image:radial-gradient(ellipse 70% 90% at 88% 50%,rgba(0,0,0,.4) 0%,transparent 70%); }
.hero-glow { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 50% 60% at 80% 40%, rgba(200,255,0,.04) 0%, transparent 70%); }
.hcontent { position:relative; z-index:1; }
.htag { display:inline-flex; background:var(--ac2); border:1px solid rgba(200,255,0,.2); color:var(--ac); font-size:12px; font-weight:600; letter-spacing:.05em; padding:.35rem .9rem; border-radius:100px; margin-bottom:1.5rem; }
.htitle { font-family:var(--fd); font-size:clamp(2.8rem,6vw,5rem); font-weight:800; line-height:1.05; letter-spacing:-.04em; margin-bottom:1.25rem; }
.htitle em { color:var(--ac); font-style:normal; }
.hsub { color:var(--t2); max-width:420px; line-height:1.75; margin-bottom:2rem; font-size:1.05rem; }
.hbtns { display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.hstats { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.hs { display:flex; flex-direction:column; gap:2px; }
.hs span { font-family:var(--fd); font-weight:700; font-size:1.3rem; }
.hs small { font-size:12px; color:var(--t3); }
.hsdiv { width:1px; height:32px; background:var(--b2); }

/* Hero visual */
.hvisual { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:1rem; height:340px; }
.hcard { background:var(--bg2); border:1px solid var(--b); border-radius:var(--r); overflow:hidden; position:relative; animation:float 6s ease-in-out infinite; }
.hcard:nth-child(1) { grid-row:span 2; animation-delay:0s; }
.hcard:nth-child(2) { animation-delay:.8s; }
.hcard:nth-child(3) { animation-delay:1.6s; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.hcard-bg { width:100%; height:100%; }
.hcard-b { position:absolute; bottom:.65rem; left:.65rem; display:flex; gap:.35rem; }

/* ── SECTIONS ── */
.section { max-width:1300px; margin:0 auto; padding:3rem 1rem 3rem 1rem; box-sizing:border-box; width:100%; }
.shead { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.75rem; flex-wrap:wrap; gap:.75rem; }
.stitle { font-family:var(--fd); font-size:clamp(1.4rem,3vw,1.8rem); font-weight:800; letter-spacing:-.035em; }
.smore { color:var(--t3); font-size:13px; transition:var(--tr); }
.smore:hover { color:var(--ac); }

/* Badges */
.badge { font-size:10px; font-weight:800; padding:3px 7px; border-radius:5px; letter-spacing:.04em; }
.b-pro  { background:var(--pro); color:#08080b; }
.b-new  { background:var(--ac); color:#08080b; }
.b-4k   { background:var(--blue); color:#fff; }
.b-free { background:var(--bg3); color:var(--t2); border:1px solid var(--b2); }

/* Pills */
.pills { display:flex; gap:.35rem; flex-wrap:wrap; }
.pill { padding:.35rem .9rem; border-radius:100px; font-size:13px; font-weight:500; border:1px solid var(--b); color:var(--t2); cursor:pointer; transition:var(--tr); background:none; font-family:var(--fb); }
.pill:hover { border-color:var(--b2); color:var(--t); }
.pill.active { background:var(--ac); border-color:var(--ac); color:#08080b; font-weight:700; }

/* Cats scroll */
.cscroll { display:flex; gap:.85rem; overflow-x:auto; padding-bottom:.5rem; scrollbar-width:none; }
.cscroll::-webkit-scrollbar { display:none; }
.cchip { flex-shrink:0; background:var(--bg2); border:1px solid var(--b); border-radius:var(--r); padding:1rem 1.4rem; cursor:pointer; transition:var(--tr); text-align:center; min-width:115px; }
.cchip:hover { border-color:var(--b2); background:var(--bg3); transform:translateY(-2px); }
.cchip.active { border-color:var(--ac); background:var(--ac2); }
.ce { font-size:1.7rem; margin-bottom:.35rem; }
.cn { font-size:13px; font-weight:600; }
.cc { font-size:11px; color:var(--t3); margin-top:2px; }

/* Grid */
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; }
.pcard { background:var(--bg1); border:1px solid var(--b); border-radius:var(--r); overflow:hidden; cursor:pointer; transition:var(--tr); animation:fadeUp .4s ease both; }
.pcard:hover { border-color:var(--b2); transform:translateY(-3px); box-shadow:var(--sh); }
.pct { width:100%; height:168px; position:relative; overflow:hidden; }
.pct-inner { width:100%; height:100%; transition:transform .45s ease; }
.pcard:hover .pct-inner { transform:scale(1.05); }
.pct-inner img,.pct-bg { width:100%; height:100%; object-fit:cover; display:block; }
.pct-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(8,8,11,.45); opacity:0; transition:var(--tr); }
.pcard:hover .pct-play { opacity:1; }
.ppc { width:44px; height:44px; border-radius:50%; background:rgba(200,255,0,.9); display:flex; align-items:center; justify-content:center; }
.ppc svg { color:#08080b; margin-left:3px; }
.pct-badges { position:absolute; top:.65rem; left:.65rem; display:flex; gap:.35rem; }
.pinfo { padding:1rem 1.1rem 1.1rem; }
.pmeta { display:flex; align-items:center; justify-content:space-between; margin-bottom:.3rem; }
.pcat { font-size:11px; color:var(--t3); font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.pdl { font-size:11px; color:var(--t3); }
.ptitle { font-family:var(--fd); font-weight:700; font-size:1rem; letter-spacing:-.02em; margin-bottom:.3rem; }
.pdesc { font-size:13px; color:var(--t2); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ptags { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.65rem; }
.tag { font-size:11px; color:var(--t3); background:var(--bg3); padding:2px 8px; border-radius:4px; }
.more-wrap { text-align:center; padding:2rem 0; }
.empty { grid-column:1/-1; text-align:center; padding:5rem 2rem; color:var(--t3); }

/* ── PAGE HEADER ── */
.phead { text-align:center; padding:calc(var(--nh) + 3rem) 2rem 2.5rem; }
.phead h1 { font-family:var(--fd); font-size:clamp(2rem,5vw,3.2rem); font-weight:800; letter-spacing:-.04em; margin-bottom:.5rem; }
.phead p { color:var(--t2); font-size:1.05rem; }
.back-btn { display:inline-flex; align-items:center; gap:.5rem; font-size:14px; font-weight:500; color:var(--t3); padding:calc(var(--nh) + 1rem) 1.5rem 1rem; transition:var(--tr); }
.back-btn:hover { color:var(--t); }

/* cats grid */
.cgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1.1rem; }
.ccard { background:var(--bg1); border:1px solid var(--b); border-radius:var(--r); padding:2.25rem 1.5rem; text-align:center; cursor:pointer; transition:var(--tr); }
.ccard:hover { border-color:var(--b2); transform:translateY(-3px); box-shadow:var(--sh); }
.ccard .ce { font-size:2.4rem; }
.ccard .cn { font-family:var(--fd); font-weight:700; font-size:1rem; margin-top:.75rem; }
.ccard .cc { font-size:12px; color:var(--t3); margin-top:.25rem; }

/* ── PACK DETAIL ── */
.pdetail { max-width:880px; margin:0 auto; padding:0 clamp(1rem,5vw,3rem) 5rem; }
.pd-vid { width:100%; aspect-ratio:16/9; background:#000; border-radius:var(--r); overflow:hidden; border:1px solid var(--b); margin-bottom:1.5rem; position:relative; }
.pd-vid video,.pd-vid img,.pd-vid .pdbg { width:100%; height:100%; object-fit:cover; display:block; }
.pd-badges { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin-bottom:.5rem; }
.pd-title { font-family:var(--fd); font-weight:800; font-size:clamp(1.5rem,4vw,2.2rem); letter-spacing:-.035em; margin-bottom:1rem; }
.pd-desc { color:var(--t2); line-height:1.75; margin-bottom:2rem; }
.dlbox { background:var(--bg2); border:1px solid var(--b); border-radius:var(--r); padding:1.5rem; }
.dlbox h3 { font-family:var(--fd); font-weight:700; font-size:1rem; margin-bottom:1rem; }
.dlrow { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; background:var(--bg1); border:1px solid var(--b); border-radius:var(--rs); margin-bottom:.65rem; transition:var(--tr); }
.dlrow:last-child { margin-bottom:0; }
.dlrow:hover { border-color:var(--b2); }
.dll { display:flex; align-items:center; gap:.75rem; }
.dlico { width:38px; height:38px; border-radius:9px; background:var(--bg3); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dlt { font-weight:600; font-size:14px; }
.dls { font-size:12px; color:var(--t3); margin-top:2px; }
.bdl { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem 1rem; border-radius:7px; font-size:13px; font-weight:600; white-space:nowrap; transition:var(--tr); cursor:pointer; border:none; font-family:var(--fb); }
.bdl-free { background:var(--ac); color:#08080b; }
.bdl-free:hover { background:#d8ff1a; }
.bdl-pro { background:var(--pro2); color:var(--pro); border:1px solid rgba(245,166,35,.28); }
.bdl-pro:hover { background:rgba(245,166,35,.22); }
.bdl-lock { background:var(--bg3); color:var(--t3); border:1px solid var(--b); }
.bdl-lock:hover { border-color:var(--b2); color:var(--t); }

/* ── PRO ── */
.pro-wrap { max-width:640px; margin:0 auto; padding:calc(var(--nh) + 3rem) 2rem 5rem; text-align:center; }
.pro-tag-badge { display:inline-flex; background:var(--pro2); border:1px solid rgba(245,166,35,.28); color:var(--pro); font-size:13px; font-weight:700; letter-spacing:.06em; padding:.4rem 1rem; border-radius:100px; margin-bottom:1.5rem; }
.pro-h { font-family:var(--fd); font-size:clamp(2rem,5vw,3.2rem); font-weight:800; letter-spacing:-.04em; margin-bottom:1rem; }
.pro-h em { color:var(--ac); font-style:normal; }
.pro-sub { color:var(--t2); max-width:460px; margin:0 auto 2.5rem; font-size:1.05rem; line-height:1.75; }
.pcard { background:var(--bg2); border:1px solid var(--b2); border-radius:18px; padding:2.5rem; margin-bottom:2.5rem; text-align:left; }
.pcard-top { margin-bottom:1.75rem; }
.plabel { font-size:11px; font-weight:800; color:var(--pro); letter-spacing:.1em; text-transform:uppercase; }
.pnum { font-family:var(--fd); font-size:4rem; font-weight:800; letter-spacing:-.05em; line-height:1; margin-top:.25rem; display:flex; align-items:flex-start; gap:.1rem; }
.pnum sup { font-size:1.5rem; margin-top:.5rem; }
.pnum sub { font-size:1.1rem; color:var(--t3); font-weight:400; align-self:flex-end; margin-bottom:.25rem; }
.pfeats { list-style:none; margin-bottom:2rem; display:grid; gap:.7rem; }
.pfeats li { display:flex; align-items:center; gap:.75rem; font-size:15px; }
.pfeats li b { color:var(--ac); flex-shrink:0; }
.pnote { font-size:12px; color:var(--t3); text-align:center; margin-top:.85rem; }
.ctable { width:100%; border-collapse:collapse; margin-top:1.5rem; text-align:left; }
.ctable th,.ctable td { padding:.85rem 1rem; border-bottom:1px solid var(--b); font-size:14px; }
.ctable th { color:var(--t3); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.cy { color:var(--ac); font-weight:700; }
.cn { color:var(--t3); }

/* ── ADMIN ── */
.admin-wrap { display:grid; grid-template-columns:210px 1fr; min-height:calc(100vh - var(--nh)); padding-top:var(--nh); }
.aside { background:var(--bg1); border-right:1px solid var(--b); padding:1.75rem 1rem; display:flex; flex-direction:column; position:sticky; top:var(--nh); height:calc(100vh - var(--nh)); overflow-y:auto; }
.aside-logo { font-family:var(--fd); font-weight:800; font-size:1.1rem; padding:0 .75rem; margin-bottom:1.75rem; color:var(--ac); }
.anav { display:flex; flex-direction:column; gap:.2rem; flex:1; }
.ab { display:block; width:100%; text-align:left; padding:.6rem .85rem; border-radius:8px; font-size:14px; font-weight:500; color:var(--t2); transition:var(--tr); }
.ab:hover { color:var(--t); background:var(--bg2); }
.ab.active { color:var(--t); background:var(--bg3); font-weight:600; }
.amain { padding:2.5rem; overflow-y:auto; }
.atab { display:none; }
.atab.active { display:block; }
.atitle { font-family:var(--fd); font-weight:800; font-size:1.8rem; letter-spacing:-.035em; margin-bottom:1.5rem; }
.asub { font-family:var(--fd); font-weight:700; font-size:1.1rem; margin:2rem 0 1rem; }
.atab-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.astats { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:2rem; }
.ast { background:var(--bg2); border:1px solid var(--b); border-radius:var(--r); padding:1.25rem; }
.ast b { font-family:var(--fd); font-size:2rem; font-weight:800; letter-spacing:-.04em; color:var(--ac); display:block; }
.ast span { font-size:12px; color:var(--t3); display:block; margin-top:.25rem; }
.twrap { overflow-x:auto; border-radius:var(--r); border:1px solid var(--b); }
.atable { width:100%; border-collapse:collapse; }
.atable th,.atable td { padding:.85rem 1.1rem; text-align:left; border-bottom:1px solid var(--b); font-size:13px; }
.atable th { background:var(--bg2); color:var(--t3); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; }
.atable tr:last-child td { border-bottom:none; }
.atable tr:hover td { background:rgba(255,255,255,.015); }
.actb { display:flex; gap:.35rem; }
.bedit,.bdel { font-size:12px; font-weight:600; padding:3px 10px; border-radius:5px; cursor:pointer; font-family:var(--fb); border:none; }
.bedit { color:var(--ac); background:rgba(200,255,0,.1); }
.bedit:hover { background:rgba(200,255,0,.18); }
.bdel { color:var(--red); background:rgba(255,77,77,.08); }
.bdel:hover { background:rgba(255,77,77,.16); }

/* Upload form */
.uform { max-width:680px; display:grid; gap:1.2rem; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.fg { display:flex; flex-direction:column; gap:.4rem; }
.fg label { font-size:12px; font-weight:700; color:var(--t2); text-transform:uppercase; letter-spacing:.06em; }
.fg label small { font-weight:400; text-transform:none; letter-spacing:0; color:var(--t3); }
.fg input,.fg select,.fg textarea { background:var(--bg2); border:1px solid var(--b2); border-radius:var(--rs); color:var(--t); padding:.65rem .9rem; outline:none; transition:var(--tr); font-size:14px; }
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--ac); box-shadow:0 0 0 3px rgba(200,255,0,.08); }
.fg select option { background:var(--bg2); }
.fg textarea { resize:vertical; min-height:80px; }
.fchecks { display:flex; gap:1.5rem; flex-wrap:wrap; }
.fchecks label { display:flex; align-items:center; gap:.5rem; font-size:14px; font-weight:500; cursor:pointer; }
.fchecks input[type=checkbox] { accent-color:var(--ac); width:16px; height:16px; }
.fblock { background:var(--bg2); border:1px solid var(--b); border-radius:var(--r); padding:1.5rem; display:grid; gap:1rem; }
.fblock h4 { font-family:var(--fd); font-weight:700; font-size:.95rem; }
.fblock h4 small { font-weight:400; font-size:12px; color:var(--t3); font-family:var(--fb); display:block; margin-top:2px; }
.ptag { background:var(--pro); color:#08080b; font-size:9px; padding:2px 5px; border-radius:3px; font-weight:800; }
.faction { display:flex; gap:.85rem; justify-content:flex-end; }
.umsg { padding:.85rem 1rem; border-radius:var(--rs); font-size:14px; font-weight:500; }
.umsg.ok { background:rgba(200,255,0,.09); border:1px solid rgba(200,255,0,.22); color:var(--ac); }
.umsg.err { background:rgba(255,77,77,.08); border:1px solid rgba(255,77,77,.22); color:var(--red); }

/* ── FORMS ── */
.ferr { padding:.65rem .9rem; background:rgba(255,77,77,.08); border:1px solid rgba(255,77,77,.22); border-radius:7px; font-size:13px; color:var(--red); }

/* ── MODALS ── */
.backdrop { position:fixed; inset:0; z-index:800; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); }
.modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); z-index:900; background:var(--bg2); border:1px solid var(--b2); border-radius:18px; padding:2.5rem; width:min(450px,calc(100vw - 2rem)); max-height:calc(100vh - 4rem); overflow-y:auto; box-shadow:var(--sh); animation:modalIn .25s cubic-bezier(.34,1.5,.64,1) forwards; }
@keyframes modalIn { from{opacity:0;transform:translate(-50%,-48%) scale(.94)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
.mx { position:absolute; top:1rem; right:1rem; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:7px; color:var(--t3); font-size:14px; transition:var(--tr); }
.mx:hover { background:var(--bg4); color:var(--t); }
.modal h2 { font-family:var(--fd); font-size:1.5rem; font-weight:800; letter-spacing:-.03em; margin-bottom:.35rem; }
.msub { color:var(--t2); font-size:14px; margin-bottom:1.5rem; }
.modal form { display:grid; gap:1rem; }
.mfoot { text-align:center; font-size:13px; color:var(--t3); margin-top:.85rem; }
.mfoot a { color:var(--ac); font-weight:600; }

/* ── TOAST ── */
.toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); z-index:1000; background:var(--bg3); border:1px solid var(--b2); border-radius:var(--rs); padding:.75rem 1.5rem; font-size:14px; font-weight:500; white-space:nowrap; box-shadow:var(--sh); animation:fadeUp .3s ease; pointer-events:none; }
.toast.ok  { border-color:rgba(200,255,0,.3); color:var(--ac); }
.toast.err { border-color:rgba(255,77,77,.3); color:var(--red); }

/* ── ADMIN FAB ── */
.admin-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg3);
  border: 1px solid var(--b2);
  color: var(--t2);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--fb);
  padding: .6rem 1.1rem .6rem .85rem;
  border-radius: 100px;
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
  transition: var(--tr);
  cursor: pointer;
}
.admin-fab:hover {
  background: var(--bg4);
  border-color: var(--ac);
  color: var(--ac);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(0,0,0,.6);
}
.admin-fab svg { flex-shrink: 0; }

/* ── FOOTER ── */
.footer { border-top:1px solid var(--b); background:var(--bg1); padding:2rem clamp(1rem,5vw,3rem); }
.footer-in { max-width:1300px; margin:0 auto; display:flex; align-items:center; flex-wrap:wrap; gap:1rem; justify-content:space-between; }
.flinks { display:flex; gap:1.5rem; }
.flinks a { font-size:13px; color:var(--t3); transition:var(--tr); }
.flinks a:hover { color:var(--t); }
.fcopy { font-size:12px; color:var(--t3); }

/* ── ANIMATIONS ── */
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(16px) translateX(-50%)} to{opacity:1;transform:translateY(0) translateX(-50%)} }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .hero { grid-template-columns:1fr; padding-top:calc(var(--nh) + 2.5rem); }
  .hvisual { display:none; }
  .admin-wrap { grid-template-columns:1fr; }
  .aside { position:static; height:auto; padding:.85rem; flex-direction:row; align-items:center; gap:.5rem; overflow-x:auto; border-right:none; border-bottom:1px solid var(--b); }
  .aside-logo { margin-bottom:0; flex-shrink:0; }
  .anav { flex-direction:row; flex:unset; }
  #adminOut { margin-top:0; margin-left:auto; }
}
@media(max-width:640px) {
  .grid { grid-template-columns:repeat(2,1fr) !important; gap:0.6rem; }
  .section { padding:2rem 0.75rem !important; }
  .pcard { min-width:0; }
  .pinfo { padding:0.75rem; }
  .ptitle { font-size:0.85rem; }
  .pcat,.pdl { font-size:10px; }
  .tag { font-size:10px; }
  .nav-links { position:absolute; top:var(--nh); left:0; right:0; background:var(--bg1); border-bottom:1px solid var(--b); flex-direction:column; padding:.75rem; gap:.15rem; display:none; z-index:450; }
  .nav-links.open { display:flex; }
  .hburg { display:flex; }
  .frow { grid-template-columns:1fr; }
  .hbtns { flex-direction:column; }
  .modal { padding:1.75rem; }
  .pcard { padding:1.5rem; }
}

/* ── CONTACT PAGE ── */
.contact-wrap { display:grid; grid-template-columns:1fr 2fr; gap:2rem; max-width:1000px; margin:0 auto; }
.contact-info { display:flex; flex-direction:column; gap:1rem; }
.cinfo-card { background:var(--bg2); border:1px solid var(--b); border-radius:var(--r); padding:1.5rem; }
.cinfo-icon { font-size:1.75rem; margin-bottom:.5rem; }
.cinfo-card h3 { font-family:var(--fd); font-weight:700; font-size:1rem; margin-bottom:.35rem; }
.cinfo-card p { font-size:13px; color:var(--t2); line-height:1.6; }
.contact-form-wrap { background:var(--bg2); border:1px solid var(--b); border-radius:var(--r); padding:2rem; }
.contact-form { display:grid; gap:1rem; }

/* ── REVIEWS ── */
.reviews-section { margin-top:2.5rem; }
.reviews-title { font-family:var(--fd); font-weight:800; font-size:1.2rem; letter-spacing:-.02em; margin-bottom:1.25rem; display:flex; align-items:center; gap:.75rem; }
.avg-badge { background:var(--ac); color:#08080b; font-size:12px; font-weight:800; padding:3px 10px; border-radius:100px; }
.review-form { background:var(--bg2); border:1px solid var(--b); border-radius:var(--r); padding:1.5rem; margin-bottom:1.5rem; }
.review-form h4 { font-family:var(--fd); font-weight:700; font-size:.95rem; margin-bottom:1rem; }
.stars-input { display:flex; gap:.35rem; margin-bottom:1rem; }
.star-btn { font-size:1.5rem; background:none; border:none; cursor:pointer; color:var(--bg4); transition:var(--tr); line-height:1; padding:0; }
.star-btn.active,.star-btn:hover { color:#f5a623; }
.review-list { display:grid; gap:.85rem; }
.review-card { background:var(--bg2); border:1px solid var(--b); border-radius:var(--r); padding:1.25rem; }
.review-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; gap:.75rem; flex-wrap:wrap; }
.review-author { font-weight:600; font-size:14px; }
.review-stars { color:#f5a623; font-size:13px; letter-spacing:1px; }
.review-date { font-size:11px; color:var(--t3); }
.review-text { font-size:13px; color:var(--t2); line-height:1.6; }
.review-del { font-size:11px; color:var(--red); background:none; border:none; cursor:pointer; font-family:var(--fb); opacity:.7; }
.review-del:hover { opacity:1; }
.no-reviews { color:var(--t3); font-size:13px; padding:1.5rem 0; }
.login-to-review { background:var(--bg2); border:1px solid var(--b); border-radius:var(--r); padding:1.25rem; text-align:center; color:var(--t2); font-size:14px; margin-bottom:1.5rem; }
.login-to-review a { color:var(--ac); font-weight:600; cursor:pointer; }

@media(max-width:640px) {
  .contact-wrap { grid-template-columns:1fr; }
}

/* ── ROLE PICKER ── */
.role-cards { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:.5rem; }
.role-card { background:var(--bg3); border:1px solid var(--b2); border-radius:var(--r); padding:1.5rem 1rem; display:flex; flex-direction:column; align-items:center; gap:.4rem; cursor:pointer; transition:var(--tr); font-family:var(--fb); }
.role-card:hover { border-color:var(--ac); background:var(--ac2); transform:translateY(-2px); }
.role-icon { font-size:2rem; }
.role-title { font-family:var(--fd); font-weight:700; font-size:1rem; }
.role-sub { font-size:12px; color:var(--t3); }

/* ── CREATOR PANEL ── */
.creator-wrap { max-width:900px; margin:0 auto; padding:calc(var(--nh) + 2rem) 1rem 4rem; }
.creator-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
.creator-tabs { display:flex; gap:.35rem; margin-bottom:2rem; border-bottom:1px solid var(--b); padding-bottom:.75rem; }
.ctab { padding:.5rem 1.1rem; border-radius:7px; font-size:14px; font-weight:500; color:var(--t2); transition:var(--tr); font-family:var(--fb); }
.ctab:hover { color:var(--t); background:var(--bg3); }
.ctab.active { color:var(--t); background:var(--bg3); font-weight:600; }
.ctab-content { display:none; }
.ctab-content.active { display:block; }

/* Submission cards */
.sub-card { background:var(--bg2); border:1px solid var(--b); border-radius:var(--r); padding:1.25rem; margin-bottom:1rem; }
.sub-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; flex-wrap:wrap; gap:.5rem; }
.sub-title { font-family:var(--fd); font-weight:700; font-size:1rem; }
.sub-status { font-size:12px; font-weight:700; padding:3px 10px; border-radius:100px; }
.sub-pending  { background:rgba(245,166,35,.15); color:var(--pro); border:1px solid rgba(245,166,35,.3); }
.sub-approved { background:rgba(200,255,0,.1); color:var(--ac); border:1px solid rgba(200,255,0,.25); }
.sub-rejected { background:rgba(255,77,77,.1); color:var(--red); border:1px solid rgba(255,77,77,.25); }
.sub-meta { font-size:12px; color:var(--t3); margin-bottom:.5rem; }
.sub-comment { background:var(--bg3); border-radius:7px; padding:.75rem 1rem; font-size:13px; color:var(--t2); margin-top:.65rem; border-left:3px solid var(--ac); }
.sub-comment-label { font-size:11px; font-weight:700; color:var(--ac); margin-bottom:.25rem; text-transform:uppercase; letter-spacing:.05em; }

/* Requests in owner panel */
.req-card { background:var(--bg2); border:1px solid var(--b); border-radius:var(--r); padding:1.5rem; margin-bottom:1rem; }
.req-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; flex-wrap:wrap; gap:.5rem; }
.req-title { font-family:var(--fd); font-weight:700; font-size:1.1rem; }
.req-by { font-size:12px; color:var(--t3); }
.req-info { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.5rem; margin-bottom:1rem; }
.req-info-item { background:var(--bg3); border-radius:7px; padding:.5rem .75rem; font-size:12px; color:var(--t2); }
.req-info-item strong { display:block; color:var(--t); font-size:13px; margin-bottom:1px; }
.req-actions { display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap; }
.req-comment-input { flex:1; min-width:200px; }
.req-comment-input input { width:100%; background:var(--bg3); border:1px solid var(--b2); border-radius:var(--rs); color:var(--t); padding:.6rem .9rem; outline:none; font-size:13px; font-family:var(--fb); }
.req-comment-input input:focus { border-color:var(--ac); }
.btn-approve { background:rgba(200,255,0,.15); color:var(--ac); border:1px solid rgba(200,255,0,.3); font-size:13px; font-weight:700; padding:.55rem 1.1rem; border-radius:var(--rs); cursor:pointer; transition:var(--tr); font-family:var(--fb); }
.btn-approve:hover { background:rgba(200,255,0,.25); }
.btn-reject { background:rgba(255,77,77,.1); color:var(--red); border:1px solid rgba(255,77,77,.25); font-size:13px; font-weight:700; padding:.55rem 1.1rem; border-radius:var(--rs); cursor:pointer; transition:var(--tr); font-family:var(--fb); }
.btn-reject:hover { background:rgba(255,77,77,.2); }
.no-requests { text-align:center; padding:4rem 2rem; color:var(--t3); }

/* Add creator form */
.add-creator-form { background:var(--bg2); border:1px solid var(--b); border-radius:var(--r); padding:1.5rem; margin-bottom:1.5rem; }