/* ============================================================
   /campaigns, /campaigns/<slug>, /exchange/<slug> (api/campaign_pages.php)
   On top of styles.css; uses its colour and font variables.
   ============================================================ */
.tt-page-main.cp-main{max-width:1180px}
.cp-wrap{--cp-gold:#E3B341;--cp-green:var(--green-bright,#3FCB80);display:flex;flex-direction:column;gap:30px}
[data-theme=light] .cp-wrap{--cp-gold:#A0670F}
.cp-eb{display:inline-flex;align-items:center;gap:9px;margin:0 0 12px;font:600 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-bright)}
.cp-eb i{width:7px;height:7px;border-radius:50%;background:var(--red-bright);box-shadow:0 0 0 4px rgba(217,40,46,.14)}
.cp-lead{margin:0;font-size:16px;line-height:1.65;color:var(--text-dim);max-width:640px}
.cp-empty{margin:0;padding:18px;border:1px dashed var(--border);border-radius:14px;color:var(--text-dim);text-align:center}
.cp-sec h2,.cp-notify h2{margin:0 0 14px;font:600 24px/1.25 var(--font-display);color:var(--text)}
.cp-sec p{margin:0;font-size:15.5px;line-height:1.7;color:var(--text-dim)}

/* buttons */
.cp-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cp-btn,.cp-btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:11px;font:600 14.5px/1 var(--font-ui);text-decoration:none;cursor:pointer;border:0;transition:filter .15s,box-shadow .15s,transform .15s}
.cp-btn{color:#fff;background:linear-gradient(180deg,#E2353B,#B81F24);box-shadow:0 2px 0 #7d1013,0 12px 24px -14px rgba(217,40,46,.9)}
.cp-btn:hover{filter:brightness(1.08)}
.cp-btn:disabled{opacity:.6;cursor:default;filter:none}
.cp-btn.is-on{background:linear-gradient(180deg,#2FB572,#1E8F57);box-shadow:0 2px 0 #12603a}
.cp-btn2{color:var(--text);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}
.cp-btn2:hover{box-shadow:inset 0 0 0 1px var(--text-faint);transform:translateY(-1px)}

/* status pill */
.cp-pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font:700 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.cp-pill i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:cpDot 1.8s ease-out infinite}
@keyframes cpDot{0%{box-shadow:0 0 0 0 rgba(63,203,128,.6)}80%,100%{box-shadow:0 0 0 7px rgba(63,203,128,0)}}
.cp-pill.is-live{color:var(--cp-green);background:rgba(63,203,128,.12)}
.cp-pill.is-soon{color:var(--cp-gold);background:rgba(227,179,65,.13)}
.cp-pill.is-ended{color:var(--text-faint);background:var(--surface-2)}

.cp-wrap section{padding:0;border-top:0}
.cp-logo{width:44px;height:44px;border-radius:50%;flex:none;background:var(--surface-2);box-shadow:0 0 0 1px var(--border)}
.cp-lw{position:relative;display:grid;place-items:center;overflow:hidden}
.cp-lw img{display:block;width:100%;height:100%;object-fit:cover}
.cp-lw.is-ph::before{content:attr(data-l);font:700 18px var(--font-ui);color:var(--text)}

/* ---------- campaign page hero ---------- */
.cp-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;padding:34px;border:1px solid var(--border);border-radius:22px;overflow:hidden;
  background:radial-gradient(circle at 85% 20%,rgba(217,40,46,.16),transparent 45%),radial-gradient(circle at 0% 100%,rgba(227,179,65,.07),transparent 40%),var(--surface)}
.cp-hero.is-ended{background:var(--surface)}
.cp-hero-ex{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.cp-hero-ex>span:not(.cp-pill){display:flex;flex-direction:column;min-width:0}
.cp-hero-ex b{font:600 16px var(--font-ui);color:var(--text)}
.cp-hero-ex small{font:500 12.5px var(--font-ui);color:var(--text-faint)}
.cp-hero h1,.cp-hubhead h1,.cp-xhead h1{margin:0 0 14px;font:700 clamp(30px,4vw,44px)/1.12 var(--font-display);letter-spacing:-.01em;color:var(--text)}
.cp-facts{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
.cp-facts>div{min-width:120px;padding:10px 14px;border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--border)}
.cp-facts dt{font:600 10.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.cp-facts dd{margin:6px 0 0;font:600 15px var(--font-ui);color:var(--text)}
.cp-facts .cp-cd dd{color:var(--cp-green);font-family:var(--font-mono)}

/* the voucher ticket */
.cp-ticket{display:flex;justify-content:center;perspective:1200px}
.cp-ticket-in{position:relative;width:min(360px,100%);padding:22px 24px 18px;border-radius:18px;color:#F2F0EB;overflow:hidden;
  background:radial-gradient(130% 120% at 0% 0%,#3A2A12 0%,#1A1610 45%,#0E0D0B 100%);
  box-shadow:inset 0 0 0 1px rgba(227,179,65,.35),0 40px 70px -36px rgba(0,0,0,.9),0 16px 34px -22px rgba(227,179,65,.45);transform:rotate(-3deg)}
.cp-ticket-in::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(227,179,65,.05) 0 2px,transparent 2px 14px);pointer-events:none}
.cp-ticket-top{position:relative;display:flex;align-items:center;gap:10px;font:700 11px/1 var(--font-mono);letter-spacing:.14em;color:#D9B562}
.cp-ticket-logo{width:28px;height:28px;border-radius:50%;background:#000}
.cp-ticket-logo.is-ph::before{font-size:13px;color:#fff}
.cp-ticket-rw{position:relative;margin:20px 0 6px;font:800 clamp(30px,3.6vw,42px)/1.05 var(--font-display);color:#F7E3B0;text-shadow:0 2px 0 #4a3510,0 14px 28px rgba(0,0,0,.6)}
.cp-ticket-note{position:relative;font:500 13.5px/1.4 var(--font-ui);color:#C9B48A}
.cp-ticket-cut{position:relative;height:0;margin:18px -24px 14px;border-top:2px dashed rgba(227,179,65,.4)}
.cp-ticket-cut::before,.cp-ticket-cut::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--surface)}
.cp-ticket-cut::before{left:-11px}.cp-ticket-cut::after{right:-11px}
.cp-ticket-ft{position:relative;display:flex;justify-content:space-between;font:700 11px/1 var(--font-mono);letter-spacing:.14em;color:#D9B562}
.cp-ticket-img{display:none}

/* ---------- body ---------- */
.cp-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:34px;align-items:start}
.cp-main{display:flex;flex-direction:column;gap:30px;min-width:0}
.cp-steps{list-style:none;margin:0;padding:0;counter-reset:cp;display:flex;flex-direction:column;gap:10px}
.cp-steps li{counter-increment:cp;position:relative;padding:14px 16px 14px 58px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);font-size:15px;line-height:1.55;color:var(--text)}
.cp-steps li::before{content:counter(cp);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--font-mono);color:#fff;background:linear-gradient(180deg,#E2353B,#B81F24)}
.cp-dates{width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--border)}
.cp-dates th,.cp-dates td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);font-size:15px}
.cp-dates tr:last-child th,.cp-dates tr:last-child td{border-bottom:0}
.cp-dates th{width:34%;font:600 11px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);background:var(--surface)}
.cp-dates td{color:var(--text)}
.cp-dates small{color:var(--text-faint)}
.cp-faq{display:flex;flex-direction:column;gap:8px}
.cp-faq details{border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}
.cp-faq summary{padding:14px 44px 14px 16px;cursor:pointer;list-style:none;position:relative;font:600 15px/1.45 var(--font-ui);color:var(--text)}
.cp-faq summary::-webkit-details-marker{display:none}
.cp-faq summary::after{content:"+";position:absolute;right:16px;top:12px;font:400 20px/1 var(--font-ui);color:var(--text-faint)}
.cp-faq details[open] summary::after{content:"–"}
.cp-faq details p{padding:0 16px 16px;font-size:14.5px}

/* side */
.cp-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:90px}
.cp-story{display:block;border-radius:14px;overflow:hidden;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);text-decoration:none;color:inherit}
.cp-story img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface-2)}
.cp-story span{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px}
.cp-story em{font:600 10.5px var(--font-mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--red-bright)}
.cp-story b{font:600 16px/1.35 var(--font-display);color:var(--text)}
.cp-story:hover b{color:var(--red-bright)}
.cp-side-box{padding:14px 16px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);display:flex;flex-direction:column}
.cp-side-box h3{margin:0 0 6px;font:600 11px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.cp-side-box a{display:flex;flex-direction:column;gap:2px;padding:9px 0;border-top:1px solid var(--border);font-size:14px;line-height:1.4;color:var(--text);text-decoration:none}
.cp-side-box h3+a{border-top:0}
.cp-side-box a:hover{color:var(--red-bright)}
.cp-side-box small{font:500 11.5px var(--font-mono);color:var(--text-faint)}

/* notify */
.cp-notify{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:22px 24px;border-radius:18px;
  background:radial-gradient(circle at 100% 0%,rgba(217,40,46,.12),transparent 50%),var(--surface);box-shadow:inset 0 0 0 1px var(--border)}
.cp-notify-ic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;color:var(--red-bright);background:rgba(217,40,46,.1);box-shadow:inset 0 0 0 1px rgba(217,40,46,.3)}
.cp-notify h2{margin:0 0 4px;font-size:21px}
.cp-notify p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text-dim)}
.cp-notify-a{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cp-notify-m{font:500 12.5px var(--font-ui);color:var(--text-dim);text-align:right;max-width:240px}
.cp-notify-m a{color:var(--red-bright)}
.cp-disc{margin:0;padding-top:16px;border-top:1px solid var(--border);font-size:12.5px;line-height:1.6;color:var(--text-faint)}

/* ---------- cards (hub, exchange hub) ---------- */
.cp-hubhead{padding:6px 0 0}
.cp-hubstats{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cp-hubstats span{padding:7px 12px;border-radius:999px;font:600 12.5px var(--font-ui);color:var(--text-dim);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}
.cp-hubstats b{color:var(--text);margin-right:3px}
.cp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.cp-card{display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:16px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);text-decoration:none;color:var(--text);transition:box-shadow .15s,transform .15s}
.cp-card:hover{box-shadow:inset 0 0 0 1px var(--text-faint);transform:translateY(-2px)}
.cp-card.is-ended{opacity:.8}
.cp-card-top{display:flex;align-items:center;gap:10px}
.cp-card-top .cp-logo{width:34px;height:34px}
.cp-card-top .cp-lw.is-ph::before{font-size:14px}
.cp-card-ex{display:flex;flex-direction:column;min-width:0;flex:1}
.cp-card-ex b{font:600 14.5px var(--font-ui)}
.cp-card-ex small{font:500 12px var(--font-ui);color:var(--text-faint)}
.cp-card-rw{font:700 24px/1.15 var(--font-display);color:var(--text)}
.cp-card-t{font-size:14px;line-height:1.5;color:var(--text-dim)}
.cp-card-ft{display:flex;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid var(--border);font:600 12px var(--font-mono);color:var(--text-faint)}
.cp-go{color:var(--red-bright)}
.cp-card.is-compact .cp-card-rw{font-size:20px}

/* ---------- exchange hub ---------- */
.cp-xhead{display:flex;gap:24px;align-items:flex-start;padding:28px;border-radius:22px;background:radial-gradient(circle at 90% 10%,rgba(217,40,46,.12),transparent 45%),var(--surface);box-shadow:inset 0 0 0 1px var(--border)}
.cp-xlogo{width:84px;height:84px;border-radius:22px;flex:none;background:var(--surface-2);box-shadow:0 0 0 1px var(--border)}
.cp-xlogo.is-ph::before{font-size:34px}
.cp-news{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--border)}
.cp-nrow{display:flex;gap:14px;align-items:center;padding:12px 14px;border-top:1px solid var(--border);text-decoration:none;color:inherit;background:var(--surface)}
.cp-nrow:first-child{border-top:0}
.cp-nimg{width:120px;height:68px;border-radius:8px;overflow:hidden;flex:none;background:var(--surface-2)}
.cp-nimg img{display:block;width:100%;height:100%;object-fit:cover}
.cp-nrow>span{display:flex;flex-direction:column;gap:5px;min-width:0}
.cp-nrow em{font:600 10.5px var(--font-mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--red-bright)}
.cp-nrow b{font:600 16px/1.35 var(--font-display);color:var(--text)}
.cp-nrow:hover b{color:var(--red-bright)}

@media(max-width:960px){
  .cp-hero{grid-template-columns:1fr;gap:26px;padding:24px}
  .cp-ticket{order:-1}
  .cp-cols{grid-template-columns:1fr}
  .cp-side{position:static}
}
@media(max-width:640px){
  .tt-page-main.cp-main{padding-left:16px;padding-right:16px}
  .cp-hero{padding:20px 18px;border-radius:18px}
  .cp-ticket-in{transform:none}
  .cp-facts>div{flex:1;min-width:0}
  .cp-acts .cp-btn,.cp-acts .cp-btn2{flex:1 1 100%}
  .cp-notify{grid-template-columns:1fr;text-align:left}
  .cp-notify-ic{display:none}
  .cp-notify-a{align-items:stretch}.cp-notify-a .cp-btn{width:100%}.cp-notify-m{text-align:left;max-width:none}
  .cp-xhead{flex-direction:column;padding:20px}
  .cp-xlogo{width:64px;height:64px;border-radius:18px}
  .cp-nimg{width:96px;height:56px}
  .cp-nrow b{font-size:15px}
  .cp-steps li{padding-left:54px}
}
@media(prefers-reduced-motion:reduce){.cp-pill i{animation:none}}