:root{
  --bg:#0f1511; --panel:#16201a; --panel2:#1d2a22; --line:#2a3b30;
  --ink:#e8f0e9; --dim:#9fb3a5; --acc:#4ea36a; --acc2:#7fcf9a;
  --warn:#e0a13c; --bad:#d9635a; --good:#5ec27f;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.55 "Segoe UI",system-ui,-apple-system,Roboto,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0 0 .5rem; line-height:1.2}
h2{font-size:1.5rem; margin-bottom:1rem}
h3{font-size:1.05rem; color:var(--acc2)}
p{margin:.4rem 0}
a{color:var(--acc2)}
code,pre{font-family:"Cascadia Mono",Consolas,monospace}
.muted{color:var(--dim)}
.fine{color:var(--dim); font-size:.82rem}
.err{color:var(--bad); background:rgba(217,99,90,.1); border:1px solid rgba(217,99,90,.3);
     padding:.55rem .7rem; border-radius:8px; font-size:.9rem}

/* ---- gate ---- */
.gate{display:grid; grid-template-columns:1.1fr .9fr; min-height:100vh}
.gate-art{padding:clamp(2rem,6vw,5rem); background:
  radial-gradient(1200px 500px at 10% -10%, rgba(78,163,106,.22), transparent 60%), var(--panel)}
.gate-art h1{font-size:clamp(2.4rem,5vw,3.4rem); letter-spacing:-.02em}
.lede{font-size:1.15rem; color:var(--acc2); margin-bottom:1.6rem}
.sell{list-style:none; padding:0; margin:0 0 1.6rem}
.sell li{padding:.6rem 0 .6rem 1.6rem; position:relative; border-top:1px solid var(--line)}
.sell li::before{content:'\2713'; position:absolute; left:0; color:var(--acc)}
.gate-form{padding:clamp(2rem,5vw,4rem); display:flex; flex-direction:column; justify-content:center}
.tabs{display:flex; gap:.4rem; margin-bottom:1.2rem}
.tab{flex:1; padding:.6rem; background:var(--panel); color:var(--dim);
     border:1px solid var(--line); border-radius:8px; cursor:pointer; font:inherit}
.tab.on{background:var(--acc); color:#08130c; border-color:var(--acc); font-weight:600}

/* ---- form bits ---- */
.fld{display:flex; flex-direction:column; gap:.3rem; margin-bottom:.85rem}
.fld>span{font-size:.82rem; color:var(--dim); text-transform:uppercase; letter-spacing:.04em}
input,select,textarea{
  background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:.6rem .7rem; font:inherit; width:100%;
}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--acc2); outline-offset:1px}
.fld.check{flex-direction:row; align-items:center; gap:.5rem}
.fld.check input{width:auto}
.fld.check span{text-transform:none; letter-spacing:0; color:var(--ink); font-size:.95rem}
.fld.end{justify-content:flex-end}
.fld.wide2{grid-column:span 2}
button{cursor:pointer; font:inherit}
.primary,.as-btn{
  background:var(--acc); color:#08130c; border:0; border-radius:8px;
  padding:.65rem 1.1rem; font-weight:600; text-decoration:none; display:inline-block; text-align:center;
}
.primary:hover,.as-btn:hover{background:var(--acc2)}
.primary.wide{width:100%}
.primary[disabled]{opacity:.5; cursor:progress}
.ghost{background:transparent; color:var(--dim); border:1px solid var(--line); border-radius:8px; padding:.4rem .8rem}
.ghost:hover{color:var(--ink); border-color:var(--acc)}
.link{background:none; border:0; color:var(--dim); text-decoration:underline}
.link:hover{color:var(--ink)}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0 1rem}
.row{display:flex; gap:.6rem; margin-bottom:.8rem}
.row input{flex:1}

/* ---- shell ---- */
.top{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  padding:.7rem clamp(1rem,3vw,2rem); background:var(--panel);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.brand{font-weight:700; letter-spacing:-.01em; color:var(--acc2); font-size:1.15rem}
#nav{display:flex; gap:.2rem; flex:1; flex-wrap:wrap}
#nav button{background:none; border:0; color:var(--dim); padding:.45rem .7rem; border-radius:7px}
#nav button:hover{color:var(--ink); background:var(--panel2)}
#nav button.on{color:var(--ink); background:var(--panel2); box-shadow:inset 0 -2px 0 var(--acc)}
.who{display:flex; align-items:center; gap:.6rem; font-size:.88rem; color:var(--dim)}
.pill{background:var(--panel2); border:1px solid var(--line); color:var(--acc2);
      padding:.15rem .55rem; border-radius:999px; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em}
main{padding:clamp(1rem,3vw,2rem); max-width:1180px; margin:0 auto}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
      padding:1.1rem 1.2rem; margin-bottom:1rem}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-bottom:1rem}
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1rem}
.stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:1rem}
.stat b{display:block; font-size:1.8rem; line-height:1.1; color:var(--acc2)}
.stat span{color:var(--dim); font-size:.85rem}
.steps{margin:.4rem 0 1rem; padding-left:1.1rem; color:var(--dim)}
.steps li{margin:.3rem 0}
.steps b{color:var(--ink)}

.list{display:flex; flex-direction:column; gap:.6rem}
.item{background:var(--panel); border:1px solid var(--line); border-radius:10px;
      padding:.8rem 1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap}
.item .grow{flex:1; min-width:200px}
.item b{display:block}
.item small{color:var(--dim)}

.chips{display:flex; flex-wrap:wrap; gap:.4rem}
.chip{background:var(--panel2); border:1px solid var(--line); color:var(--dim);
      border-radius:999px; padding:.35rem .8rem; font-size:.88rem}
.chip.on{background:var(--acc); border-color:var(--acc); color:#08130c; font-weight:600}

table{width:100%; border-collapse:collapse; font-size:.92rem}
th,td{text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--line)}
th{color:var(--dim); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.04em}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}

pre{background:var(--panel2); border:1px solid var(--line); border-radius:8px;
    padding:.8rem; overflow:auto; font-size:.82rem; color:var(--dim); white-space:pre-wrap}

.bar{height:9px; background:var(--panel2); border-radius:999px; overflow:hidden; margin:.5rem 0}
.bar i{display:block; height:100%; background:var(--acc)}
.bar i.over{background:var(--warn)}

.tag{display:inline-block; padding:.12rem .5rem; border-radius:6px; font-size:.76rem;
     text-transform:uppercase; letter-spacing:.04em; font-weight:600}
.tag.good{background:rgba(94,194,127,.15); color:var(--good)}
.tag.medium{background:rgba(224,161,60,.15); color:var(--warn)}
.tag.high{background:rgba(217,99,90,.15); color:var(--bad)}
.tag.low{background:rgba(159,179,165,.15); color:var(--dim)}

.window{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin:.8rem 0}
.window div{background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:.7rem; text-align:center}
.window div.mid{border-color:var(--acc); background:rgba(78,163,106,.12)}
.window b{display:block; font-size:1.05rem}
.window span{color:var(--dim); font-size:.78rem; text-transform:uppercase; letter-spacing:.04em}

.toast{position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%);
       background:var(--panel2); border:1px solid var(--acc); color:var(--ink);
       padding:.7rem 1.1rem; border-radius:10px; z-index:50; max-width:90vw}

@media (max-width:820px){
  .gate{grid-template-columns:1fr}
  .window{grid-template-columns:1fr}
}