/* Bagwork — LIGHT, lime-forward + gold money. Matches the bright cartoon bag mascot. */
:root{
  --bg:#eef4da; --bg2:#e6eecb; --panel:#ffffff; --panel2:#f7fae9;
  --line:#d7e2b6; --line2:#c2d195;
  --ink:#1c2a06; --mute:#5f7038; --dim:#6b7a45;   /* --dim darkened: footers/hints were ~2.7:1 */
  /* Robinhood Chain lime (sampled from the bag mascot: #C3E725) — used as FILL */
  --green:#c3e725; --green2:#a9cf1a; --greenglow:rgba(140,173,20,.30);
  --lime:#c3e725; --lime-ink:#1a2600;   /* dark text that sits on lime */
  --acc:#6f8d0e;                          /* readable lime for links/labels on light */
  --gold:#a87a00; --gold2:#d9a400;        /* the coins → money numbers (--gold darkened for text contrast) */
  --bag:#97856d;
  --red:#d84a4a; --amber:#c8890e;
  --radius:16px; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(1200px 600px at 50% -8%,#f4f9e4 0,var(--bg) 55%) fixed;
  color:var(--ink); font-family:var(--mono); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--acc); text-decoration:none; font-weight:600}
a:hover{text-decoration:underline}
.wrap{max-width:1040px; margin:0 auto; padding:0 20px}
.mute{color:var(--mute)} .dim{color:var(--dim)} .green{color:var(--gold)} .gold{color:var(--gold)}
.mono{font-family:var(--mono)}
hr{border:none; border-top:1px solid var(--line); margin:28px 0}

/* header */
header.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  background:rgba(238,244,218,.85); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:20px; height:60px}
.brand{font-weight:800; font-size:19px; letter-spacing:.3px; color:var(--ink); display:flex; align-items:center; gap:9px}
.brand b{color:var(--acc)}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--green)}
.brand .bag{width:30px;height:30px;display:inline-block;background:url(/assets/bag-mascot.jpg) center/cover no-repeat;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.18);border:1.5px solid #12180022;transition:transform .15s}
.brand:hover .bag{transform:rotate(-6deg) scale(1.06)}
.nav nav{display:flex; gap:18px; margin-left:auto; align-items:center}
.nav nav a{color:var(--mute); font-size:14px; font-weight:600; white-space:nowrap}
.nav nav a:hover,.nav nav a.active{color:var(--ink); text-decoration:none}
/* the project's own X account — icon-only, matches the other nav links */
.nav nav a.xlink{display:flex; align-items:center; padding:2px}
.nav nav a.xlink:hover{color:var(--ink)}
/* phone: the brand + 4 links + a button don't fit at 375px — tighten instead of wrapping
   "for devs" onto a second line and shoving the header out of shape */
@media(max-width:560px){
  .nav .wrap{gap:10px; height:auto; min-height:54px; padding-top:7px; padding-bottom:7px}
  .nav nav{gap:13px; min-width:0; flex-wrap:wrap; justify-content:flex-end; row-gap:6px}
  .nav nav a{font-size:12.5px}
  .brand{font-size:16px; flex:0 0 auto}
  .brand .bag{width:25px; height:25px}
  /* the connect button is what pushed worker/dashboard past the viewport at 375px */
  .nav .btn.sm{padding:5px 9px; font-size:12px}
}
@media(max-width:430px){
  .nav nav{gap:11px}
  .nav nav a{font-size:12px}
  .nav .btn.sm{padding:4px 8px; font-size:11.5px}
  .brand{font-size:15px}
}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; justify-content:center;
  background:var(--green); color:var(--lime-ink); border:1.5px solid #12180022; border-radius:11px;
  padding:11px 18px; font-family:var(--mono); font-weight:800; font-size:14px; cursor:pointer;
  transition:transform .06s, box-shadow .2s; box-shadow:0 2px 0 rgba(0,0,0,.08)}
.btn:hover{box-shadow:0 6px 20px var(--greenglow); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}
.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line2); box-shadow:none}
.btn.ghost:hover{border-color:var(--acc); color:var(--acc)}
.btn.sm{padding:6px 12px; font-size:13px}
.btn.red{background:transparent;border:1.5px solid #e3b1b1;color:var(--red)}
.btn.red:hover{border-color:var(--red)}
.btn.wide{width:100%}

/* cards / panels */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px;
  box-shadow:0 1px 2px rgba(40,55,10,.04), 0 10px 30px rgba(60,80,10,.05)}
.grid{display:grid; gap:16px}
.grid.cols2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grid.cols3{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px;
  transition:border-color .2s, transform .1s, box-shadow .2s; display:block;
  box-shadow:0 1px 2px rgba(40,55,10,.04), 0 8px 22px rgba(60,80,10,.05)}
.card:hover{border-color:var(--line2); transform:translateY(-2px); text-decoration:none; box-shadow:0 12px 30px rgba(60,80,10,.10)}
.card h3{margin:0 0 4px; font-size:17px; color:var(--ink)}
.tick{color:var(--acc); font-weight:800}

/* pills / badges */
.pill{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px;
  font-size:12px; border:1px solid var(--line2); color:var(--mute); background:#f2f6e2; font-weight:600}
.pill.green{color:#4f6a0a; border-color:#b9d06a; background:#eaf5c6}
.pill.gold{color:#9a6f00; border-color:#e6c877; background:#fbf3d6}
.pill.red{color:var(--red); border-color:#e3b1b1; background:#fbeced}
.pill.amber{color:#9a6f00; border-color:#e6c877; background:#fdf3dc}
/* funding warnings — a bounty the bag can't back */
.pill.warn{color:#8a4b00; border-color:#efc389; background:#fdeed8}
.warn-note{color:#8a4b00; font-weight:600}
/* inner panel — a nested box inside a .panel, one step down in the light theme */
.panel.inner{background:var(--panel2); border-color:var(--line2); box-shadow:none}
.badge-type{text-transform:uppercase; letter-spacing:.6px; font-size:11px}

/* forms */
label{display:block; font-size:13px; color:var(--mute); margin:14px 0 6px; font-weight:600}
input,textarea,select{width:100%; background:#fbfdf3; border:1px solid var(--line2); color:var(--ink);
  border-radius:9px; padding:11px 12px; font-family:var(--mono); font-size:14px}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--greenglow)}
textarea{resize:vertical; min-height:70px}
.row{display:flex; gap:12px; flex-wrap:wrap}
.row>*{flex:1; min-width:120px}
.hint{font-size:12px; color:var(--dim); margin-top:5px}

/* stat */
.stat{display:flex; flex-direction:column; gap:2px}
.stat .n{font-size:22px; font-weight:800; color:var(--ink)}
.stat .n.green{color:var(--gold)}
.stat .l{font-size:12px; color:var(--mute); text-transform:uppercase; letter-spacing:.5px}
.stats{display:flex; gap:26px; flex-wrap:wrap}

/* code / addr */
.addr{font-size:13px; background:#f6f9ec; border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; color:var(--mute); word-break:break-all; display:flex; align-items:center; gap:8px; justify-content:space-between}
.copy{cursor:pointer; color:var(--acc); font-size:12px; white-space:nowrap; font-weight:700}

/* hero — lime band with the bag mascot (mascot bg matches --lime so it blends) */
.hero{position:relative; background:var(--lime); border-radius:26px; margin:26px 0 40px;
  padding:46px 44px; text-align:center; overflow:hidden;
  box-shadow:0 18px 50px rgba(140,173,20,.28), inset 0 0 0 2px rgba(0,0,0,.06)}
.hero.split{display:grid; grid-template-columns:1.15fr .85fr; gap:20px; align-items:center; text-align:left}
.hero .htext{position:relative; z-index:2}
.hero .kicker{color:#33470a; font-size:12.5px; letter-spacing:2px; text-transform:uppercase; margin-bottom:14px; font-weight:800}
.hero h1{font-size:clamp(38px,6.5vw,70px); margin:0 0 12px; line-height:.96; letter-spacing:-2px; color:var(--lime-ink); text-wrap:balance}
/* White on lime is only ~1.4:1 as flat colour. Keep the two-tone poster look, but give the
 * letters a dark edge + deeper drop so they're actually defined against the band. */
.hero h1 .g{
  color:#fff;
  -webkit-text-stroke:1.25px var(--lime-ink);
  paint-order:stroke fill;
  text-shadow:0 3px 0 rgba(26,38,0,.32);
}
.hero p.tag{font-size:20px; color:var(--lime-ink); margin:0 0 4px; font-weight:800}
.hero p.sub{font-size:15px; color:#3a4d0f; max-width:52ch; margin:14px auto 24px; font-weight:500}
.hero.split p.sub{margin:14px 0 24px}
.hero .row{justify-content:center}
.hero.split .row{justify-content:flex-start}
.hero .btn{background:var(--lime-ink); color:var(--lime); border-color:transparent; box-shadow:0 6px 20px rgba(0,0,0,.22)}
.hero .btn:hover{box-shadow:0 10px 28px rgba(0,0,0,.32)}
.hero .btn.ghost{background:rgba(255,255,255,.35); color:var(--lime-ink); border:2px solid rgba(16,24,0,.4)}
.hero .btn.ghost:hover{border-color:var(--lime-ink); color:var(--lime-ink)}
.hero .mascot-wrap{display:flex; justify-content:center; align-items:center}
.hero .mascot-img{width:100%; max-width:310px; height:auto; animation:bob 3.6s ease-in-out infinite}
@media(max-width:720px){ .hero.split{grid-template-columns:1fr; text-align:center}
  .hero{padding:38px 24px} .hero.split .row{justify-content:center} .hero .mascot-img{max-width:200px} }

/* table-ish list rows */
.rowitem{display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line)}
.rowitem:first-child{border-top:none}
.grow{flex:1; min-width:0}

/* toast */
.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); opacity:0;
  background:#ffffff; border:1px solid var(--line2); color:var(--ink);
  padding:12px 18px; border-radius:10px; font-size:14px; z-index:200; transition:.3s; max-width:90vw; box-shadow:0 12px 40px rgba(40,55,10,.18); font-weight:600}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast--error{border-color:#e3b1b1} .toast--success{border-color:#b9d06a}

/* misc */
.center{text-align:center}
.muted-box{background:#f6f9ec; border:1px dashed var(--line2); border-radius:10px; padding:16px; color:var(--mute); font-size:14px}
.spinner{width:16px;height:16px;border:2px solid var(--line2);border-top-color:var(--acc);border-radius:50%;display:inline-block;animation:spin .7s linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
footer{border-top:1px solid var(--line); margin-top:60px; padding:30px 0; color:var(--dim); font-size:13px; text-align:center}
.hide{display:none!important}

/* ===== motion ===== */
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-10px) rotate(2deg)}}

/* scrolling meme ticker */
.ticker{overflow:hidden; white-space:nowrap; background:#eaf1d3;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:26px 0 40px}
.ticker__track{display:inline-flex; animation:marq 24s linear infinite; will-change:transform}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker b{display:inline-flex; align-items:center; padding:11px 0; font-size:13.5px; font-weight:800;
  letter-spacing:1.5px; color:var(--acc); text-transform:uppercase}
.ticker b::after{content:""; width:18px; height:18px; margin:0 24px; border-radius:5px;
  background:url(/assets/bag-mascot.jpg) center/cover no-repeat}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .mascot-img,.ticker__track,.dotlive{animation:none} }

/* platform stat strip */
.statstrip{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin:0 0 40px}
.statstrip .tile{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 10px; text-align:center;
  box-shadow:0 1px 2px rgba(40,55,10,.04), 0 8px 20px rgba(60,80,10,.05)}
.statstrip .tile .n{font-size:24px; font-weight:800; color:var(--gold); letter-spacing:-.5px; line-height:1.1}
.statstrip .tile .l{font-size:11px; color:var(--mute); text-transform:uppercase; letter-spacing:.5px; margin-top:5px}
@media(max-width:860px){ .statstrip{grid-template-columns:repeat(3,1fr)} }
@media(max-width:480px){ .statstrip{grid-template-columns:repeat(2,1fr)} }

/* king of the bagwork */
.king{display:flex; align-items:center; gap:18px; padding:20px 22px; margin:0 0 44px;
  background:linear-gradient(110deg,#fbf1cf,#f7fae9 60%); border:1px solid #e6c877; border-radius:16px;
  box-shadow:0 10px 34px rgba(191,139,0,.10); flex-wrap:wrap}
.king .crown{font-size:40px; filter:drop-shadow(0 3px 8px rgba(191,139,0,.35))}
.king .who{flex:1; min-width:160px}
.king .who .lbl{font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#a9760a; font-weight:800}
.king .who .h{font-size:20px; font-weight:800; color:var(--ink); margin-top:2px}
.king .who .sub{font-size:13px; color:var(--mute); margin-top:2px}
.king .amt{text-align:right}
.king .amt .n{font-size:24px; font-weight:800; color:var(--gold)}
.king .amt .l{font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--mute)}

/* holder badge */
.hbadge{display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:999px;
  font-size:11.5px; font-weight:800; border:1px solid #e6c877; color:#9a6f00; background:#fbf3d6}

/* ---- feature panel: a section that should read as its own thing ---- */
.panel.feature{
  background:linear-gradient(180deg,#fcfdf5 0,#f4f8e4 100%);
  border-color:var(--line2);
  border-top:3px solid var(--lime);
  position:relative; overflow:hidden;
}
.panel.feature::after{      /* soft lime bloom in the corner, purely decorative */
  content:""; position:absolute; top:-70px; right:-70px; width:220px; height:220px;
  background:radial-gradient(circle,var(--greenglow) 0,transparent 70%); pointer-events:none;
}
.panel.feature > *{position:relative; z-index:1}

/* contract address bar — the thing degens look for first */
.cabar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px;
  background:var(--lime); border:1px solid var(--line2); border-radius:12px; padding:12px 16px}
.cabar .lbl{font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--lime-ink); opacity:.75}
.cabar .val{font-family:var(--mono); font-weight:800; font-size:17px; color:var(--lime-ink);
  word-break:break-all; flex:1 1 260px; min-width:0}
.cabar .val.soon{letter-spacing:2px; text-transform:uppercase; opacity:.7}
.cabar button{flex:0 0 auto; border:1px solid var(--lime-ink); background:var(--lime-ink); color:var(--lime);
  font-family:var(--mono); font-weight:800; font-size:12px; padding:7px 13px; border-radius:8px; cursor:pointer}
.cabar button:hover{opacity:.85}
@media(max-width:520px){ .cabar .val{font-size:14px} }

/* $BAGWORK tiers */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px}
@media(max-width:640px){ .tiers{grid-template-columns:1fr} }
.tier{
  border:1px solid var(--line2); border-radius:14px; padding:18px 16px; background:var(--panel);
  box-shadow:0 1px 2px rgba(40,55,10,.05);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tier:hover{transform:translateY(-3px); box-shadow:0 8px 22px rgba(60,80,10,.10); border-color:var(--tier-accent,var(--line2))}
/* the medal sits in a tinted disc so each tier reads at a glance */
.tier .badge{
  font-size:20px; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--tier-soft,#f2f6e2); border:1px solid var(--tier-accent,var(--line2));
}
.tier .nm{font-weight:800; margin:12px 0 3px; color:var(--ink); font-size:16px}
.tier .req{font-size:12.5px; color:var(--mute); font-variant-numeric:tabular-nums}
.tier .perks{margin-top:14px; padding-top:12px; border-top:1px dashed var(--line2); display:grid; gap:5px}
.tier .perk{font-size:12.5px; color:var(--mute); display:flex; align-items:baseline; gap:7px}
.tier .perk b{color:var(--tier-ink,var(--acc)); font-weight:800; font-variant-numeric:tabular-nums}
/* per-tier accents — gold / silver / bronze, readable on the light ground */
.tier[data-k="gold"]  {--tier-accent:#e3c25e; --tier-soft:#fdf4d8; --tier-ink:#9a6f00}
.tier[data-k="silver"]{--tier-accent:#c2c8cf; --tier-soft:#f2f4f6; --tier-ink:#5d6b76}
.tier[data-k="bronze"]{--tier-accent:#d9a97e; --tier-soft:#fbeddf; --tier-ink:#8a5a2b}

/* faq */
.faq details{border-top:1px solid var(--line); padding:14px 0}
.faq details:first-child{border-top:none}
.faq summary{cursor:pointer; font-weight:800; color:var(--ink); list-style:none; display:flex; justify-content:space-between; gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--acc); font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--mute); margin:10px 0 0; font-size:14px}

/* sort control */
.sortsel{background:#fbfdf3; border:1px solid var(--line2); color:var(--ink); border-radius:8px;
  padding:6px 10px; font-family:var(--mono); font-size:13px; font-weight:600}

/* coin avatar + funded glow */
.avatar{width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  font-weight:800; font-size:17px; color:#fff; flex:0 0 auto; box-shadow:0 3px 10px rgba(40,55,10,.18); border:1.5px solid rgba(0,0,0,.12)}
.card.funded{border-color:#a9cf1a; box-shadow:0 0 0 1px #cbe56b, 0 8px 24px rgba(140,173,20,.14)}
.card.funded:hover{box-shadow:0 0 0 1px #a9cf1a, 0 12px 34px rgba(140,173,20,.22)}

/* leaderboard + activity feed */
.lbrow{display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line)}
.lbrow:first-child{border-top:none}
.rank{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-weight:800;
  font-size:13px; background:#eef4da; border:1px solid var(--line2); color:var(--mute); flex:0 0 auto}
.rank.g1{background:#fbf1cf; border-color:#e6c877; color:#a9760a}
.rank.g2{background:#eef1f4; border-color:#c4ccd4; color:#7b8894}
.rank.g3{background:#f7ead9; border-color:#dcb389; color:#a8703c}
.feedrow{display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--line); font-size:13.5px}
.feedrow:first-child{border-top:none}
.feedrow b.green{color:var(--gold)}
.lbrow b.green{color:var(--gold)}
.dotlive{width:8px; height:8px; border-radius:50%; background:var(--green2); box-shadow:0 0 8px rgba(140,173,20,.6);
  flex:0 0 auto; animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.3}}
.two{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:14px}
@media(max-width:760px){ .two{grid-template-columns:1fr} }