:root{
  /* Campaignify: black/white wordmark with a lime spark. Dark is the default theme. */
  --accent:#BDFA25; --accent-rgb:189,250,37; --on-accent:#0B0C0E;
  --bg:#0B0C0E; --bg2:#101114; --panel:#141519; --card:#1A1C21; --line:rgba(255,255,255,.09);
  --ink:#F5F6F2; --muted:#A0A3A9; --dim:#6F737A;
  --gold:var(--accent); --gold2:#D7FF7A; --link:#C9FF52; --blue:#7FD6FF; --blue-rgb:127,214,255; --blue2:#1795C9;
  --ok:#3DD68C; --bad:#FF6B6B; --amber:#F8C13E;
  --hover:rgba(255,255,255,.05); --field:rgba(255,255,255,.035); --chipbg:rgba(255,255,255,.03);
  --side-bg:linear-gradient(180deg,#101114,#0B0C0E);
  --panel-bg:linear-gradient(180deg,rgba(26,28,33,.85),rgba(20,21,25,.85));
  --thumb-bg:#121317; --btn2:#1D1F24; --btn2-hover:#262930;
  --glow:radial-gradient(1100px 560px at 75% -12%,rgba(var(--accent-rgb),.10),transparent 60%);
  --shadow:0 18px 40px -18px rgba(0,0,0,.8);
  --r:16px; --display:"Space Grotesk",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif;
  color-scheme:dark;
}
:root[data-theme=light]{
  --bg:#F6F7F4; --bg2:#FFFFFF; --panel:#FFFFFF; --card:#FFFFFF; --line:rgba(11,12,14,.10);
  --ink:#0B0C0E; --muted:#585C63; --dim:#80848B;
  --gold2:#3F6B00; --link:#3F6B00; --blue:#0F7FB0; --blue-rgb:15,127,176;
  --hover:rgba(11,12,14,.05); --field:#FFFFFF; --chipbg:#FFFFFF;
  --side-bg:#FFFFFF;
  --panel-bg:#FFFFFF;
  --thumb-bg:#E9EBE6; --btn2:#EEF0EB; --btn2-hover:#E3E6DF;
  --glow:radial-gradient(1100px 560px at 75% -12%,rgba(var(--accent-rgb),.22),transparent 60%);
  --shadow:0 16px 36px -20px rgba(11,12,14,.35);
  color-scheme:light;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme=dark]){
    --bg:#F6F7F4; --bg2:#FFFFFF; --panel:#FFFFFF; --card:#FFFFFF; --line:rgba(11,12,14,.10);
    --ink:#0B0C0E; --muted:#585C63; --dim:#80848B;
    --gold2:#3F6B00; --link:#3F6B00; --blue:#0F7FB0; --blue-rgb:15,127,176;
    --hover:rgba(11,12,14,.05); --field:#FFFFFF; --chipbg:#FFFFFF;
    --side-bg:#FFFFFF; --panel-bg:#FFFFFF;
    --thumb-bg:#E9EBE6; --btn2:#EEF0EB; --btn2-hover:#E3E6DF;
    --glow:radial-gradient(1100px 560px at 75% -12%,rgba(var(--accent-rgb),.22),transparent 60%);
    --shadow:0 16px 36px -20px rgba(11,12,14,.35);
    color-scheme:light;
  }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased}
body{background:var(--glow),var(--bg);min-height:100vh}
a{color:var(--link)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;margin:0 0 .35em;font-weight:700}
h1{font-size:44px;line-height:1.05} h2{font-size:22px} h3{font-size:16px}
.gold{color:var(--gold2)} .muted{color:var(--muted)} .dim{color:var(--dim)} .small{font-size:13px}
.eyebrow{font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);margin:0 0 10px}

/* shell */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;padding:22px 14px;border-right:1px solid var(--line);background:var(--side-bg)}
.logo{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;padding:4px 10px 22px}
.logo img{width:38px;height:38px}
.logo b{display:block;font:700 19px var(--display)} .logo span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.side a.nav{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;color:var(--muted);text-decoration:none;font-weight:600}
.side a.nav svg{width:18px;height:18px;flex:none}
.side a.nav:hover{color:var(--ink);background:var(--hover)}
.side a.nav.on{color:var(--ink);background:rgba(var(--accent-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.35)}
.side a.nav.on svg{color:var(--gold2)}
.side .grow{flex:1}
.pill{display:flex;align-items:center;gap:10px;border:1px solid rgba(var(--accent-rgb),.55);color:var(--gold2);border-radius:999px;padding:9px 14px;font-weight:700;text-decoration:none;background:rgba(var(--accent-rgb),.08)}
.pill i{width:18px;height:18px;border-radius:50%;background:var(--gold);display:inline-block;box-shadow:inset 0 0 0 4px rgba(0,0,0,.18)}
.side .tag{margin:14px 10px 0;font:600 11px var(--body);letter-spacing:.14em;color:var(--dim)}
.side form{margin:0}
.side .linkbtn{background:none;border:0;color:var(--dim);cursor:pointer;font:600 13px var(--body);padding:8px 14px;text-align:left}
.side .linkbtn:hover{color:var(--ink)}

.page{display:grid;grid-template-columns:1fr 330px;gap:28px;padding:30px 32px 60px;max-width:1500px}
.page.full{grid-template-columns:1fr}
@media (max-width:1180px){.page{grid-template-columns:1fr}.rail{display:none}}
@media (max-width:760px){.shell{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px}.side .grow,.side .tag,.logo span{display:none}.logo{padding:0 8px 0 0}.side a.nav{padding:8px 10px}.side a.nav span{display:none}.page{padding:20px 16px}h1{font-size:32px}}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:12px 20px;font:700 14px var(--body);cursor:pointer;text-decoration:none;color:var(--on-accent);background:var(--accent);box-shadow:0 8px 24px -12px rgba(var(--accent-rgb),.8)}
.btn:hover{filter:brightness(1.05)}
.btn.dark{background:var(--btn2);color:var(--ink);box-shadow:none;border:1px solid var(--line)}
.btn.dark:hover{background:var(--btn2-hover)}
.btn.sm{padding:8px 14px;font-size:13px;border-radius:10px}
.btn svg{width:16px;height:16px}
.search{display:flex;gap:14px;margin:22px 0 26px}
.search .field{flex:1;display:flex;align-items:center;gap:10px;background:var(--field);border:1px solid var(--line);border-radius:12px;padding:0 14px}
.search .field svg{width:18px;height:18px;color:var(--muted)}
.search input{flex:1;background:none;border:0;color:var(--ink);font:inherit;padding:13px 0;outline:none}
label{display:block;font-weight:600;font-size:13px;margin:16px 0 8px;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font:inherit;background:var(--field);color:var(--ink)}
textarea{min-height:130px;resize:vertical;line-height:1.5}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px}
input[type=file]{color:var(--muted)}
.flash{background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.45);border-radius:12px;padding:12px 16px;margin-bottom:14px;color:var(--gold2)}
.panel{background:var(--panel-bg);border:1px solid var(--line);border-radius:20px;padding:22px}

/* template cards */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:20px}
.tcard{text-decoration:none;color:var(--ink);display:block}
.thumb{position:relative;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:var(--thumb-bg);border:1px solid var(--line);transition:transform .2s,box-shadow .2s}
.thumb.tall{aspect-ratio:9/16}
.thumb video,.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tcard:hover .thumb{transform:translateY(-3px);box-shadow:var(--shadow),0 0 0 1px rgba(var(--accent-rgb),.6)}
.play{position:absolute;top:10px;left:10px;width:28px;height:28px;border-radius:50%;background:rgba(11,14,16,.65);backdrop-filter:blur(6px);display:grid;place-items:center}
.play svg{width:12px;height:12px;fill:#fff;margin-left:2px}
.dur{position:absolute;top:10px;right:10px;font:700 11px var(--body);background:rgba(11,14,16,.65);backdrop-filter:blur(6px);border-radius:7px;padding:3px 7px}
.chip{position:absolute;bottom:10px;left:10px;font:700 11px var(--body);border-radius:999px;padding:4px 10px;color:#fff;background:var(--blue2)}
.chip.video{background:#1795C9} .chip.image{background:#2C7A4B} .chip.motion{background:#6B4FD8}
.tcard .t{margin-top:10px;font-weight:600}
.tcard .s{font-size:12.5px;color:var(--muted);margin-top:2px}
.section-h{display:flex;justify-content:space-between;align-items:baseline;margin:34px 0 14px}

/* right rail */
.rail .panel{position:sticky;top:24px}
.rail h2{font-size:24px;margin-bottom:2px}
.ritem{display:grid;grid-template-columns:86px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.ritem:last-of-type{border-bottom:0}
.ritem .thumb{aspect-ratio:9/16;border-radius:10px}
.ritem b{display:block;font-weight:600;margin-bottom:6px}
.status{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--body);border-radius:999px;padding:4px 10px;background:rgba(61,214,140,.12);color:var(--ok)}
.status.running,.status.pending{background:rgba(var(--blue-rgb),.12);color:var(--blue)}
.status.failed{background:rgba(255,107,107,.12);color:var(--bad)}
.status .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.status.running .dot,.status.pending .dot{animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.25}}
.empty{border:1px dashed var(--line);border-radius:14px;padding:22px;text-align:center;color:var(--muted)}

/* create */
.create{display:grid;grid-template-columns:300px 1fr 300px;gap:24px;align-items:start}
@media (max-width:1180px){.create{grid-template-columns:1fr}}
.preview{position:sticky;top:24px}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.photo{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:1;background:var(--thumb-bg);cursor:pointer;border:2px solid transparent;margin:0}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo input{position:absolute;opacity:0}
.photo:has(input:checked){border-color:var(--gold);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.25)}
.photo .del{position:absolute;top:6px;right:6px}
.choices{display:flex;gap:8px;flex-wrap:wrap}
.choice{border:1px solid var(--line);border-radius:999px;padding:8px 14px;cursor:pointer;background:var(--chipbg);font:600 13px var(--body);color:var(--muted);margin:0}
.choice:has(input:checked){border-color:var(--accent);color:var(--on-accent);background:var(--accent)}
.choice input{display:none}
.price{font:700 40px var(--display);color:var(--gold2);line-height:1}
.rules{padding-left:18px;margin:8px 0 0;color:var(--muted);font-size:13px}
.rules li{margin:4px 0}
hr.line{border:0;border-top:1px solid var(--line);margin:18px 0}

/* library */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px}
.litem .thumb{aspect-ratio:9/16}
.litem.hl .thumb{box-shadow:0 0 0 2px var(--accent)}
.litem .meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}
.litem .brief{font-size:12.5px;color:var(--muted);margin:6px 0 0}
.wait{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:13px;padding:16px;background:radial-gradient(circle at 50% 40%,rgba(var(--blue-rgb),.16),transparent 60%)}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid rgba(var(--blue-rgb),.25);border-top-color:var(--blue);animation:spin 1s linear infinite;margin:0 auto 10px}
@keyframes spin{to{transform:rotate(360deg)}}

/* tables (admin) */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
code{font-size:12px;color:var(--gold2);word-break:break-all}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row input,.row select{width:auto}

/* auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth .panel{width:100%;max-width:440px;padding:34px}
.auth .logo{padding:0 0 20px}
.page.full{display:block}
.ritem .wait{font-size:10.5px;padding:6px}
.ritem .spinner{width:22px;height:22px;border-width:2px;margin-bottom:6px}
@media (max-width:760px){.tgrid{grid-template-columns:repeat(2,1fr);gap:12px}.lgrid{grid-template-columns:repeat(2,1fr);gap:12px}.search{flex-wrap:wrap}.search .btn{width:100%}}

/* wordmark + theme toggle */
.logo{flex-direction:column;align-items:flex-start;gap:6px}
.logo .wm{display:block;width:150px;height:auto;color:var(--ink)}
.logo .wm path:not(.wm-text){fill:var(--accent)}
.logo span{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.auth .logo .wm{width:190px}
.theme{display:flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:7px 12px;font:600 12px var(--body);cursor:pointer;margin:6px 0 0}
.theme:hover{color:var(--ink);border-color:rgba(var(--accent-rgb),.5)}
.theme svg{width:15px;height:15px}
.auth .theme{position:fixed;top:16px;right:16px;background:var(--panel)}
:root[data-theme=light] .play svg,:root[data-theme=light] .dur{color:#fff}
.dur{color:#fff}