:root{
--bg-0:#dcecc9;--card-a:#fdfbee;--card-b:#f6f2dd;
--line:rgba(150,106,14,.3);--line-soft:rgba(74,116,52,.18);
--gold:#d9930f;--gold-deep:#b87708;--amber:#f2b430;--green:#2f9440;--green-deep:#237a32;--red:#c74436;
--text:#26331d;--text-2:#4d6442;--text-3:#7b9070;
--ink:#3d2413;
--r:14px;--r-lg:20px;
--font-display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
--font-body:system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{min-height:100vh;color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.45;overflow-x:hidden;
background:radial-gradient(1100px 700px at 88% -10%,rgba(242,180,48,.14),transparent 60%),radial-gradient(900px 600px at -10% 110%,rgba(35,122,50,.18),transparent 55%),linear-gradient(180deg,#c9debc 0%,#b9d3a4 60%,#accb96 100%);
background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(rgba(61,36,19,.03) 1px,transparent 1px);background-size:3px 3px;opacity:.6}
.hidden{display:none!important}
.muted{color:var(--text-3)}
a{color:var(--gold-deep)}
a:hover{color:var(--gold)}
.banner{position:relative;z-index:2;text-align:center;padding:8px 16px;font-size:12.5px;font-family:var(--font-mono);background:rgba(242,180,48,.25);border-bottom:1px solid var(--line);color:#8a6206}
.shell{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:22px 32px 28px;min-height:100vh;display:flex;flex-direction:column}

/* header */
header.top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line-soft)}
.brand{display:flex;align-items:center;text-decoration:none}
.brand .logo{height:96px;margin:-14px 0;width:auto;display:block;filter:drop-shadow(0 3px 6px rgba(61,36,19,.25));transition:transform .15s}
.brand:hover .logo{transform:scale(1.03)}
.right-tools{display:flex;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;font-family:var(--font-mono);font-size:12px;font-weight:600}
.pill svg{width:14px;height:14px}
.net-pill{background:rgba(47,148,64,.12);border:1px solid rgba(47,148,64,.4);color:var(--green-deep)}
.net-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.view-pill{background:rgba(242,180,48,.15);border:1px solid var(--line);color:var(--gold-deep)}
.mini-pill{background:rgba(242,180,48,.15);border:1px solid var(--line);color:var(--gold-deep);font-size:11px;letter-spacing:.06em}
.icon-btn{display:inline-flex;align-items:center;gap:6px;padding:9px;min-width:38px;height:38px;justify-content:center;border-radius:11px;background:rgba(253,251,238,.7);border:1px solid var(--line-soft);color:var(--text-2);text-decoration:none;font-family:var(--font-body);font-weight:700;font-size:12.5px;transition:color .15s,border-color .15s,background .15s,transform .12s}
.icon-btn svg{width:17px;height:17px}
.icon-btn:hover{color:var(--gold-deep);border-color:var(--gold);background:rgba(242,180,48,.14);transform:translateY(-1px)}
.icon-btn.docs{padding:9px 13px}
.btn-connect{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;background:linear-gradient(140deg,var(--amber) 0%,var(--gold) 100%);color:var(--ink);font-family:var(--font-body);font-weight:700;font-size:13.5px;letter-spacing:.06em;border:2px solid var(--ink);border-radius:12px;cursor:pointer;box-shadow:0 4px 0 var(--ink),0 8px 18px rgba(184,119,8,.3);transition:transform .15s,box-shadow .15s,filter .18s}
.btn-connect:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 5px 0 var(--ink),0 10px 22px rgba(184,119,8,.38)}
.btn-connect:active{transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.btn-connect.is-connected{background:var(--card-a);color:var(--text);font-family:var(--font-mono);box-shadow:0 3px 0 var(--ink)}

/* statbar */
.statbar{display:flex;align-items:center;gap:22px;padding:14px 20px;background:rgba(253,251,238,.75);border:1px solid var(--line-soft);border-radius:var(--r);margin:18px 0;box-shadow:0 4px 14px rgba(61,36,19,.06)}
.statbar .item{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--text-2)}
.statbar .label{text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;color:var(--text-3);font-weight:700}
.statbar .val{font-family:var(--font-mono);color:var(--text);font-weight:700;font-size:14px}
.statbar .val.gold{color:var(--gold-deep)}
.statbar .sep{width:1px;height:18px;background:var(--line-soft)}
.statbar .live{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.16em;font-weight:700}
.statbar .live .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}

/* grid */
main.grid{flex:1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px}
.col-left,.col-right{display:flex;flex-direction:column;gap:18px;min-width:0}

/* action card */
.action{position:relative;padding:26px;border-radius:var(--r-lg);border:1px solid var(--line-soft);overflow:hidden;
background:radial-gradient(420px 220px at 0% 0%,rgba(242,180,48,.14),transparent 70%),radial-gradient(420px 220px at 100% 100%,rgba(47,148,64,.1),transparent 70%),linear-gradient(160deg,var(--card-a),var(--card-b));
box-shadow:0 14px 36px rgba(61,36,19,.12)}
.action::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(180deg,rgba(217,147,15,.6),rgba(217,147,15,0)) top/100% 2px no-repeat}
.action-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.action-head h2{font-family:var(--font-display);font-weight:700;letter-spacing:.12em;font-size:19px;color:var(--text);margin:0;text-transform:uppercase}
.action-head h2 em{font-style:normal;color:var(--gold-deep)}
.field{display:flex;align-items:center;padding:16px 18px;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);margin-bottom:12px;transition:border-color .2s,box-shadow .2s}
.field:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(217,147,15,.14)}
.field input{flex:1;background:transparent;border:0;outline:none;font-family:var(--font-mono);font-size:32px;font-weight:600;color:var(--text);min-width:0}
.field input::placeholder{color:var(--text-3)}
.field .suffix{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(242,180,48,.16);border:1px solid var(--line);border-radius:10px;color:var(--gold-deep);font-weight:700;font-family:var(--font-mono);font-size:13px;letter-spacing:.08em}
.field .suffix .e{width:16px;height:16px;background:linear-gradient(140deg,var(--amber),var(--gold-deep));clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.quick{display:flex;gap:8px;margin-bottom:12px}
.quick button{flex:1;background:#fff;color:var(--gold-deep);border:1px solid var(--line);padding:10px 0;border-radius:10px;font-family:var(--font-mono);font-size:12.5px;font-weight:700;cursor:pointer;transition:background .15s,color .15s,transform .12s,border-color .15s}
.quick button:hover{background:rgba(242,180,48,.14);color:var(--ink);border-color:var(--gold)}
.quick button:active{transform:translateY(1px)}
.preview{font-family:var(--font-mono);font-size:12px;color:var(--text-3);padding:0 4px 14px}
.btn-deposit{position:relative;width:100%;padding:18px 22px;border:2px solid var(--ink);border-radius:14px;background:linear-gradient(120deg,var(--amber) 0%,var(--gold) 55%,var(--gold-deep) 100%);color:var(--ink);font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;overflow:hidden;box-shadow:0 5px 0 var(--ink),0 12px 26px rgba(184,119,8,.32);transition:transform .15s,box-shadow .2s}
.btn-deposit::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .6s ease}
.btn-deposit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 0 var(--ink),0 14px 30px rgba(184,119,8,.4)}
.btn-deposit:hover:not(:disabled)::after{left:130%}
.btn-deposit:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
button:disabled{opacity:.45;cursor:not-allowed;filter:saturate(.5)}
.secondary-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.sec-cell{display:flex;flex-direction:column;gap:5px}
.btn-sec{appearance:none;background:#fff;border:1px solid var(--line-soft);color:var(--text);padding:12px 14px;border-radius:12px;font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.06em;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 3px 0 rgba(61,36,19,.15);transition:background .15s,border-color .15s,transform .12s,box-shadow .15s}
.btn-sec svg{width:15px;height:15px;color:var(--gold-deep)}
.btn-sec:hover:not(:disabled){background:rgba(47,148,64,.07);border-color:rgba(47,148,64,.35)}
.btn-sec:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 rgba(61,36,19,.15)}
.sec-note{font-family:var(--font-mono);font-size:11px;color:var(--text-3);text-align:center}
.facts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;padding:12px 14px;background:rgba(47,148,64,.06);border:1px dashed var(--line-soft);border-radius:var(--r);font-family:var(--font-mono);font-size:11.5px;color:var(--text-2)}
.facts b{color:var(--text-3);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:10px;margin-right:5px}

/* cards */
.card{padding:20px 22px;border-radius:var(--r-lg);background:linear-gradient(160deg,var(--card-a),var(--card-b));border:1px solid var(--line-soft);box-shadow:0 10px 26px rgba(61,36,19,.1)}
.card h4{margin:0 0 8px;font-family:var(--font-display);font-size:15px;letter-spacing:.16em;color:var(--text);text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:9px}
.card h4 svg{width:17px;height:17px;color:var(--green-deep);flex:none}
.card h4 .badge{font-family:var(--font-mono);font-size:10px;background:rgba(242,180,48,.2);color:var(--gold-deep);padding:2px 8px;border-radius:999px;letter-spacing:.1em;border:1px solid var(--line)}
.card .sub{color:var(--text-2);font-size:13px;margin:0 0 12px;line-height:1.55}
.card .sub b{color:var(--text)}
.lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.15em;color:var(--text-3);font-weight:700}
.mono{font-family:var(--font-mono)}
.row-kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 12px;background:#fff;border:1px solid var(--line-soft);border-radius:10px;margin-top:10px}
.row-kv .v{font-size:12.5px;color:var(--text)}
.lnk{display:inline-block;margin-top:10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(217,147,15,.5);padding-bottom:2px}

/* band */
.empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:14px 20px 22px;color:var(--text-3);font-size:13.5px}
.empty .mascot{height:150px;width:auto;filter:drop-shadow(0 8px 14px rgba(61,36,19,.2));animation:bob 4.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.band-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.band-grid .c{padding:13px 15px;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);display:flex;flex-direction:column;gap:4px}
.band-grid .v{font-family:var(--font-mono);font-size:20px;font-weight:700;color:var(--text)}
.band-grid .v.gold{color:var(--gold-deep)}
.band-grid .v.green{color:var(--green-deep)}
.band-grid .sub{font-family:var(--font-mono);font-size:11px;color:var(--text-3)}
.tank{padding:13px 15px;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r)}
.tank-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.chip-bonus{font-family:var(--font-mono);font-size:10.5px;padding:3px 9px;border-radius:999px;background:rgba(47,148,64,.12);border:1px solid rgba(47,148,64,.4);color:var(--green-deep);letter-spacing:.06em}
.bar{height:12px;border-radius:999px;background:rgba(74,116,52,.14);border:1px solid var(--line-soft);overflow:hidden}
.fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--gold-deep),var(--amber));box-shadow:0 0 10px rgba(242,180,48,.6);transition:width .8s cubic-bezier(.22,1,.36,1)}
.tank-note{margin-top:8px;font-size:11.5px;color:var(--text-3);font-family:var(--font-mono);line-height:1.5}

/* how it works */
.steps{display:flex;flex-direction:column;gap:10px}
.step{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;background:#fff;border:1px solid var(--line-soft);border-radius:10px;font-size:12.5px;color:var(--text-2);line-height:1.5}
.step b{color:var(--text);text-transform:uppercase;letter-spacing:.08em;font-size:11.5px}
.step .n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(242,180,48,.2);border:1px solid var(--line);color:var(--gold-deep);font-family:var(--font-mono);font-size:11px;font-weight:700;margin-top:1px}

/* referral */
.ref-input{display:flex;align-items:center;background:#fff;border:1px solid var(--line-soft);border-radius:10px;padding:6px 6px 6px 12px;gap:8px}
.ref-input input{flex:1;background:transparent;border:0;outline:none;color:var(--text);font-family:var(--font-mono);font-size:12.5px;min-width:0}
.ref-input button{appearance:none;background:linear-gradient(140deg,var(--amber),var(--gold));color:var(--ink);font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:7px;border:1.5px solid var(--ink);cursor:pointer;box-shadow:0 2px 0 var(--ink);transition:filter .15s,transform .12s,box-shadow .12s}
.ref-input button:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 3px 0 var(--ink)}
.ref-input button:active{transform:translateY(1px);box-shadow:0 1px 0 var(--ink)}
.ref-dash{margin-top:14px}
.ref-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.ref-tiles .t{padding:12px 14px;background:#fff;border:1px solid var(--line-soft);border-radius:10px;display:flex;flex-direction:column;gap:4px}
.ref-tiles .v{font-family:var(--font-mono);font-size:18px;font-weight:700;color:var(--text)}
.ref-tiles .v.gold{color:var(--gold-deep)}
.ref-table{width:100%;border-collapse:collapse;font-family:var(--font-mono);font-size:11.5px}
.ref-table th{text-align:left;padding:8px 10px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--line-soft);font-weight:700}
.ref-table td{padding:9px 10px;color:var(--text-2);border-bottom:1px solid var(--line-soft)}
.ref-table tr:last-child td{border-bottom:0}
.ref-table tr:hover td{background:rgba(242,180,48,.08)}

/* 6+1 */
.way-strip{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.way-strip .d{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;font-weight:700}
.way-strip .d.c{background:rgba(47,148,64,.12);border:1px solid rgba(47,148,64,.4);color:var(--green-deep)}
.way-strip .d.k{background:rgba(242,180,48,.2);border:1px solid var(--line);color:var(--gold-deep)}
.way-lbl{font-family:var(--font-mono);font-size:10.5px;color:var(--text-3);letter-spacing:.14em;text-transform:uppercase;margin-left:4px}

/* footer */
footer.bottom{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-soft);color:var(--text-3);font-size:12px;line-height:1.6}
footer.bottom p{margin:0 0 8px;max-width:900px}
footer.bottom b{color:var(--text-2);font-weight:700}

/* toasts */
.toasts{position:fixed;right:22px;bottom:22px;display:flex;flex-direction:column;gap:8px;z-index:200;align-items:flex-end}
.toast{padding:10px 16px;background:#fffdf3;border:1px solid var(--line);border-radius:12px;color:var(--text);font-size:12.5px;font-family:var(--font-mono);box-shadow:0 10px 26px rgba(61,36,19,.2);animation:toastIn .25s ease}
.toast.ok{border-color:rgba(47,148,64,.5);color:var(--green-deep)}
.toast.err{border-color:rgba(199,68,54,.55);color:var(--red)}
@keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* responsive */
@media (max-width:1080px){main.grid{grid-template-columns:1fr}}
@media (max-width:720px){
.shell{padding:16px}
header.top{flex-wrap:wrap}
.brand .logo{height:72px;margin:-10px 0}
.right-tools{flex-wrap:wrap}
.icon-btn{min-width:34px;height:34px;padding:7px}
.icon-btn svg{width:15px;height:15px}
.icon-btn.docs{padding:7px}
.docs-lbl{display:none}
.statbar{flex-wrap:wrap;gap:12px}
.statbar .sep{display:none}
.statbar .live{margin-left:0;width:100%}
.field input{font-size:24px}
.secondary-row{grid-template-columns:1fr}
.band-grid{grid-template-columns:1fr}
.ref-table th:nth-child(4),.ref-table td:nth-child(4){display:none}
}