/* Earnivor — “Sunrise Ledger” design system */
:root{
  --paper:#fbf9f4; --card:#ffffff; --ink:#1c2a24; --mut:#66756d; --line:#e5e1d5;
  --pine:#0e5a43; --pine-d:#0a4433; --gold:#ffb427; --gold-soft:#fff3da; --mint:#e7f2ec;
  --err:#a4362b; --err-soft:#fde8e6; --ok-soft:#e0f2e7;
  --red:#e01e2b; --red-d:#b5121e;
  --r:20px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);
  font-family:"Segoe UI",Candara,"Trebuchet MS",sans-serif;font-size:16px;line-height:1.6}
.serif{font-family:Georgia,"Palatino Linotype",serif;font-weight:700;letter-spacing:-.01em}
.mono{font-family:Consolas,"Courier New",monospace;font-variant-numeric:tabular-nums}
button{font:inherit;cursor:pointer;border:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}

/* nav */
.nav{display:flex;align-items:center;gap:26px;padding:22px 0;flex-wrap:wrap}
.logo{font-size:23px;color:var(--pine);text-decoration:none}
.logo .coin{display:inline-block;width:14px;height:14px;border-radius:50%;
  background:var(--gold);border:2.5px solid var(--pine);vertical-align:baseline;margin-left:2px}
/* brand lockup: wolf-coin mark + wordmark */
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand-mark{height:36px;width:auto;display:block}
.brand-name{font-size:22px;color:var(--pine);font-weight:700}
/* hero logo on the homepage */
.hero-logo{height:132px;width:auto;display:block;margin-bottom:20px}
@media(max-width:860px){.hero-logo{height:104px;margin:0 auto 18px}}
.nav .links{display:flex;gap:22px;margin-left:auto;font-size:14.5px;color:var(--mut);align-items:center}
.nav .links a{text-decoration:none}
.nav .links a:hover{color:var(--ink)}
.nav .links a.on{color:var(--pine);font-weight:700}

/* buttons */
.btn{display:inline-block;padding:12px 26px;border-radius:999px;font-weight:700;text-decoration:none;text-align:center}
.btn-pine{background:var(--pine);color:#fff}
.btn-pine:hover{background:var(--pine-d)}
.btn-gold{background:var(--gold);color:#4a3200}
.btn-gold:hover{background:#ffc44f}
.btn-line{border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
.btn-sm{padding:8px 18px;font-size:13.5px}

/* flash */
.flash{margin:14px 0;padding:13px 18px;border-radius:14px;font-size:14.5px;font-weight:600}
.flash.ok{background:var(--ok-soft);color:var(--pine)}
.flash.err{background:var(--err-soft);color:var(--err)}

/* landing hero */
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;padding:56px 0 30px}
@media(max-width:860px){.hero{grid-template-columns:1fr}}
.hero h1{font-size:clamp(38px,5.6vw,58px);line-height:1.06;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--pine);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:10px;
  background:var(--gold);opacity:.45;z-index:-1;border-radius:3px}
.hero p{color:var(--mut);font-size:17.5px;max-width:50ch;margin:20px 0 28px}
.trust{display:flex;gap:22px;margin-top:26px;font-size:13.5px;color:var(--mut);flex-wrap:wrap}
.trust b{color:var(--pine);font-size:19px;display:block}

.phone{justify-self:center;width:300px;background:var(--pine);border-radius:34px;padding:12px;
  box-shadow:0 24px 60px rgba(14,90,67,.25)}
.scr{background:var(--paper);border-radius:24px;padding:18px 14px;font-size:12.5px}
.scr .hi{font-size:13px;color:var(--mut)}
.scr .bal{background:var(--pine);color:#fff;border-radius:16px;padding:14px;margin:10px 0}
.scr .bal .l{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.scr .bal .v{font-size:26px;font-weight:700}
.scr .mini{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:9px 10px;margin-bottom:7px}
.scr .mini .pr{margin-left:auto;font-weight:700;color:var(--pine)}

/* platform icons */
.ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:12px;font-weight:800;color:#fff;flex:none}
.ic.sm{width:26px;height:26px;border-radius:8px;font-size:11px}
.ic.lg{width:40px;height:40px;border-radius:12px;font-size:13px}
.ic.yt{background:#c4302b}
.ic.ig{background:#c13584}

/* sections */
.band{background:var(--mint);padding:56px 0;margin-top:46px}
.band h2,.sect h2{font-size:32px;margin-bottom:8px}
.lede{color:var(--mut);max-width:58ch;margin-bottom:32px}
.sect{padding:64px 0 8px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px}
.step .n{width:34px;height:34px;border-radius:50%;background:var(--gold);color:#4a3200;
  display:grid;place-items:center;font-weight:800;margin-bottom:14px}
.step h3{font-size:18.5px;margin-bottom:6px}
.step p{color:var(--mut);font-size:14.5px}
.rates{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:16px}
.rate{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.rate .top{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.rate h3{font-size:17.5px}
.rate .amt{font-size:26px;color:var(--pine);font-weight:700}
.rate small{color:var(--mut)}
.pays{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:70px}
.pay{flex:1;min-width:220px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.pay b{display:block;margin-bottom:4px}
.pay small{color:var(--mut)}
.pay .tagb{float:right;font-size:11px;background:var(--gold-soft);color:#7a5200;
  padding:3px 10px;border-radius:999px;font-weight:700}
.foot{border-top:1px solid var(--line);padding:30px 0 56px;display:flex;gap:18px;flex-wrap:wrap;
  color:var(--mut);font-size:13.5px;align-items:center;margin-top:40px}
.foot nav{margin-left:auto;display:flex;gap:18px}
.foot a{text-decoration:none}

/* auth card */
.auth{max-width:420px;margin:48px auto 80px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:34px}
.auth h1{font-size:26px;margin-bottom:6px}
.auth .sub{color:var(--mut);font-size:14.5px;margin-bottom:22px}
.auth label{display:block;font-size:13px;font-weight:700;margin:14px 0 6px}
.auth input,.auth select{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--paper);font:inherit}
.auth .btn{width:100%;margin-top:22px}
.auth .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.auth .row2{grid-template-columns:1fr}}
.tgbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:12px 16px;margin:16px 0}
.tgbar .tg-txt{font-size:14px}
.tgbar form{margin:0}
.affbar .aff-stats{display:block;color:var(--mut);margin-top:2px}
.affbar .aff-copy{display:flex;gap:8px;align-items:center;flex:1;min-width:260px;max-width:420px}
.affbar .aff-copy input{flex:1;min-width:0;padding:9px 12px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--bg);font:inherit;font-size:13px;color:var(--mut)}
.theme-pick{display:flex;gap:12px}
.tp-opt{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--card);font:inherit;font-size:14.5px;
  font-weight:700;cursor:pointer;color:inherit}
.tp-opt.on{border-color:var(--pine);box-shadow:0 0 0 2px var(--ok-soft)}
.tp-swatch{width:22px;height:22px;border-radius:7px;border:1px solid var(--line)}
.tp-swatch.tp-light{background:#faf6ee}
.tp-swatch.tp-dark{background:#152420}
.auth .alt{text-align:center;font-size:14px;color:var(--mut);margin-top:18px}

/* dashboard */
.hello{font-size:30px;margin:14px 0 22px}
.hello small{display:block;font-size:15px;color:var(--mut);font-family:"Segoe UI",sans-serif;font-weight:400}
.wgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px;margin-bottom:30px}
@media(max-width:820px){.wgrid{grid-template-columns:1fr}}
.wc{border-radius:var(--r);padding:24px;border:1px solid var(--line);background:var(--card)}
.wc.main{background:linear-gradient(135deg,var(--pine),var(--pine-d));color:#fff;border:0}
.wc .l{font-size:11px;letter-spacing:.15em;text-transform:uppercase;opacity:.8}
.wc .v{font-size:36px;font-weight:700;margin:6px 0 4px;color:var(--pine)}
.wc.main .v{color:#fff}
.wc small{opacity:.75;font-size:12.5px}
.wc .btn{margin-top:16px;padding:10px 22px;font-size:14px}

.fchips{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.fc{padding:8px 18px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);
  color:var(--mut);font-size:13.5px;font-weight:600}
.fc.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* vertical task cards — thumbnail on top, red Earn pill + green Start in the footer */
.task-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,340px));gap:20px;
  margin-bottom:44px;justify-content:start}
.task-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease}
.task-card:hover{border-color:var(--pine);box-shadow:0 10px 28px rgba(14,90,67,.14);transform:translateY(-3px)}
.tc-thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#2a2a2a,#111);
  background-size:cover;background-position:center}
.tc-thumb.ig{background:linear-gradient(135deg,#f09433,#bc1888)}
.tc-plat{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.72);border-radius:6px;
  padding:4px 8px;display:flex;align-items:center;gap:6px;color:#fff;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700}
.tc-plat svg{display:block}
.tc-play{position:absolute;inset:0;margin:auto;width:52px;height:36px;background:rgba(0,0,0,.5);
  border-radius:11px;display:grid;place-items:center;opacity:.9}
.tc-play::after{content:"";border-left:14px solid #fff;border-top:9px solid transparent;
  border-bottom:9px solid transparent;margin-left:3px}
.tc-body{padding:14px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.tc-body h3{font-size:16px}
.tc-body p{font-size:13px;color:var(--mut)}
.tc-meta{font-size:12px;color:var(--mut);margin-top:2px;font-weight:600}
.tc-foot{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;gap:12px;background:var(--paper)}
.earn-pill{display:inline-flex;align-items:center;gap:7px;background:var(--red);color:#fff;
  font-weight:800;font-size:21px;padding:7px 15px;border-radius:999px;font-variant-numeric:tabular-nums;
  box-shadow:0 3px 10px rgba(224,30,43,.28)}
.earn-pill small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;font-weight:700}
.btn-start{flex:none;display:inline-flex;align-items:center;gap:7px;background:var(--pine);color:#fff;
  font-weight:700;font-size:14.5px;padding:11px 20px;border-radius:12px;white-space:nowrap;
  transition:background .15s,transform .15s}
.task-card:hover .btn-start{background:var(--pine-d)}
.btn-start .arw{transition:transform .16s ease}
.task-card:hover .btn-start .arw{transform:translateX(4px)}
.badge{display:inline-block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;padding:3px 9px;border-radius:999px;align-self:flex-start}
.badge.yt{background:rgba(196,48,43,.12);color:#c4302b}
.badge.ig{background:rgba(188,24,136,.12);color:#bc1888}
.trow .slots{margin-left:auto;font-size:12.5px;color:var(--mut);text-align:right}
.trow .amt{font-size:19px;font-weight:700;color:var(--pine);width:84px;text-align:right}
.empty{background:var(--card);border:1.5px dashed var(--line);border-radius:var(--r);
  padding:40px;text-align:center;color:var(--mut)}

.subs h2{font-size:22px;margin-bottom:14px}
.sub{display:flex;gap:12px;align-items:center;padding:13px 16px;background:var(--card);
  border:1px solid var(--line);border-radius:14px;margin-bottom:8px;font-size:14.5px;flex-wrap:wrap}
.sub .when{color:var(--mut);font-size:12.5px}
.sub .s-main{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sub .s-main b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub .s-meta{color:var(--mut);font-size:12.5px}
.sub .s-meta .rej{color:var(--err)}
.pill{margin-left:auto;font-size:12px;font-weight:700;padding:5px 13px;border-radius:999px;white-space:nowrap}
.pill.rev{background:var(--gold-soft);color:#7a5200}
.pill.ok{background:var(--ok-soft);color:var(--pine)}
.pill.no{background:var(--err-soft);color:var(--err)}
.pill.warn{background:var(--err-soft);color:var(--err);margin-left:8px}
.sub .amt{width:74px;text-align:right;font-weight:700;color:var(--pine)}
.sub .amt.muted{color:var(--mut);font-weight:400}
.subs{margin-bottom:70px}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(28,42,36,.45);display:none;place-items:center;z-index:99;padding:20px}
.modal-bg.on{display:grid}
.modal{width:min(520px,100%);background:var(--card);border-radius:var(--r);padding:30px;max-height:92vh;overflow-y:auto}
.modal.big{width:min(600px,100%);padding:26px 28px}
.modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.modal-head h3{font-size:24px;margin:0}
.modal-x{background:transparent;border:0;font-size:26px;line-height:1;color:var(--mut);cursor:pointer;padding:0 4px}
.modal-x:hover{color:var(--ink)}
.proof-hero{display:flex;gap:16px;align-items:center;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:16px}
.proof-hero .pthumb{width:132px;height:82px;border-radius:10px;flex:none;background-size:cover;
  background-position:center;display:grid;place-items:center;color:#fff;font-weight:800;font-size:22px}
.proof-hero .pthumb.yt{background:#c4302b}
.proof-hero .pthumb.ig{background:linear-gradient(135deg,#f09433,#bc1888)}
.proof-hero .pinfo{min-width:0}
.proof-hero .pinfo b{display:block;font-size:17px;margin:5px 0 3px}
.proof-hero .pinfo .meta{font-size:12.5px;color:var(--mut)}
.proof-hero .pinfo .rew{font-size:13.5px;margin-top:5px}
.proof-hero .pinfo .rew #pReward{color:var(--pine);font-weight:700}
.btn-open{display:block;text-align:center;background:var(--pine);color:#fff;
  padding:12px;border-radius:12px;text-decoration:none;font-weight:700;margin-bottom:14px}
.btn-open:hover{background:var(--pine-d)}
.proof-instr{font-size:13.5px;color:var(--mut);background:var(--gold-soft);
  border-radius:10px;padding:10px 13px;margin-bottom:14px}
.proof-steps{margin:0 0 16px 18px;font-size:14px}
.proof-steps li{margin-bottom:5px}
.proof-steps b{color:var(--pine)}
.modal h3{font-size:22px;margin-bottom:4px}
.modal .subtitle{color:var(--mut);font-size:14px;margin-bottom:16px}
.modal ol{margin:0 0 18px 18px;font-size:14.5px}
.modal ol li{margin-bottom:6px}
.modal ol b{color:var(--pine)}
.modal label{display:block;font-size:13px;font-weight:700;margin:12px 0 6px}
.modal input[type=text]{width:100%;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);
  background:var(--paper);font:inherit}
.drop{display:block;border:2px dashed var(--line);border-radius:14px;padding:22px;text-align:center;
  color:var(--mut);font-size:14px;background:var(--paper);cursor:pointer;margin-bottom:4px}
.drop:hover{border-color:var(--pine)}
.drop b{color:var(--ink)}
.drop .hint{font-size:12px}
.drop input{margin-top:8px}
.drop #pPreview{max-height:180px;max-width:100%;border-radius:10px;border:1px solid var(--line)}
.modal .acts{display:flex;gap:10px;margin-top:20px}
.modal .acts .btn{flex:1}
.tasklink{display:inline-block;margin:4px 0 8px;color:var(--pine);font-weight:700;word-break:break-all}

/* wallet + admin tables */
.tbl-scroll{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:36px}
table.tab{width:100%;border-collapse:collapse;font-size:14px}
.tab th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
.tab td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.tab tr:last-child td{border-bottom:0}
.wd-form{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;margin-bottom:36px}
.wd-form .row{display:flex;gap:12px;flex-wrap:wrap}
.wd-form .row>div{flex:1;min-width:180px}
.wd-form label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.wd-form input,.wd-form select{width:100%;padding:12px 14px;border-radius:12px;
  border:1.5px solid var(--line);background:var(--paper);font:inherit}
.wd-form .btn{margin-top:16px}
.hint{font-size:12.5px;color:var(--mut);margin-top:8px}

/* admin review cards */
.rev{display:flex;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;margin-bottom:14px;flex-wrap:wrap;align-items:flex-start}
.rev img{width:220px;max-width:100%;border-radius:12px;border:1px solid var(--line)}
.rev .info{flex:1;min-width:240px;font-size:14.5px}
.rev .info b{font-size:16px}
.rev .info .kv{color:var(--mut);margin:2px 0}
.rev form{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.rev input[type=text]{padding:9px 12px;border-radius:10px;border:1.5px solid var(--line);
  background:var(--paper);font:inherit;font-size:13.5px;flex:1;min-width:160px}
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:22px 0 32px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
.stat .l{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.stat .v{font-size:24px;font-weight:700;color:var(--pine)}
h2.adm{font-size:24px;margin:34px 0 14px}
.inline-form{display:inline}

/* ---------- dark theme (opt-in via data-theme="dark"; admin dashboard only) ---------- */
:root[data-theme="dark"]{
  --paper:#0f1712;
  --card:#18211b;
  --ink:#e8eee6;
  --mut:#94a390;
  --line:#2b362d;
  --pine:#37c98f;        /* brightened so headings/values/links read on dark */
  --pine-d:#0b1712;
  --gold:#ffc244;
  --gold-soft:#3a2f12;
  --mint:#152219;
  --err:#ff7063;
  --err-soft:#3a1c19;
  --ok-soft:#123122;
}
:root[data-theme="dark"] .btn-pine{color:#07130d}
:root[data-theme="dark"] .btn-gold{color:#3a2600}
:root[data-theme="dark"] .wc .v{color:var(--pine)}
:root[data-theme="dark"] .wc.main{background:linear-gradient(135deg,#0e5a43,#0a3a2c);color:#fff}
:root[data-theme="dark"] .pill.ok{color:#5fe0a6}
:root[data-theme="dark"] .fc.on{background:var(--pine);color:#07130d;border-color:var(--pine)}

/* theme toggle button in the admin bar */
.theme-toggle{display:inline-flex;align-items:center;gap:7px;background:transparent;
  border:1.5px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;
  padding:7px 14px;font-size:13.5px;font-weight:600;cursor:pointer}
.theme-toggle:hover{border-color:#fff}
.theme-toggle .ico{font-size:15px;line-height:1}