:root{
  --bg:#0a0a12; --bg2:#101018; --card:#14141f; --line:rgba(153,69,255,.22);
  --purple:#9945FF; --green:#14F195; --txt:#eef; --dim:#9aa0b5; --red:#ff6b6b;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(1200px 600px at 80% -10%,rgba(153,69,255,.14),transparent),
             radial-gradient(1000px 500px at 10% 110%,rgba(20,241,149,.08),transparent),var(--bg);
  color:var(--txt);
}
.wrap{max-width:960px;margin:0 auto;padding:22px 16px 60px}
header.top{text-align:center;margin-bottom:18px}
.mascot{font-size:54px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
h1{font-size:clamp(26px,5vw,40px);margin:6px 0 4px;
   background:linear-gradient(90deg,var(--purple),var(--green));
   -webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--dim);font-size:15px;max-width:640px;margin:0 auto}
.tabs{display:flex;gap:8px;justify-content:center;margin:20px 0;flex-wrap:wrap}
.tab{background:var(--card);border:1px solid var(--line);color:var(--txt);
     border-radius:999px;padding:10px 20px;font-size:15px;cursor:pointer}
.tab.active{background:linear-gradient(90deg,rgba(153,69,255,.35),rgba(20,241,149,.25));
     border-color:var(--purple);font-weight:700}
.panel{display:none}
.panel.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;
      padding:20px;margin-bottom:16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.card h2{font-size:19px;margin-bottom:6px}
.card p.hint{color:var(--dim);font-size:14px;margin-bottom:14px;line-height:1.5}
label{display:block;font-size:13px;color:var(--dim);margin:12px 0 6px;font-weight:600}
input[type=text],input[type=password],input[type=number],select,textarea{
  width:100%;background:#0d0d16;border:1px solid var(--line);border-radius:12px;
  color:var(--txt);padding:12px 14px;font-size:15px;font-family:inherit}
textarea{resize:vertical;min-height:110px;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--purple)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1;min-width:140px}
.btn{display:inline-block;border:none;cursor:pointer;border-radius:12px;
     padding:12px 22px;font-size:15px;font-weight:700;color:#06110c;
     background:linear-gradient(90deg,var(--green),#7ef7c4);margin-top:14px}
.btn.purple{background:linear-gradient(90deg,var(--purple),#c084fc);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.btn.danger{background:transparent;border:1px solid var(--red);color:var(--red)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.small{padding:8px 14px;font-size:13px;margin-top:8px}
.status{font-size:14px;margin-top:10px;min-height:20px}
.status.ok{color:var(--green)} .status.err{color:var(--red)} .status.dim{color:var(--dim)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;word-break:break-all;
      background:#0d0d16;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
/* chat */
#chatlog{display:flex;flex-direction:column;gap:12px;max-height:52vh;overflow-y:auto;
         padding:6px 2px;margin-bottom:12px}
.msg{max-width:88%;padding:12px 15px;border-radius:16px;line-height:1.55;font-size:15px;white-space:pre-wrap;word-break:break-word}
.msg.user{align-self:flex-end;background:linear-gradient(135deg,rgba(153,69,255,.4),rgba(153,69,255,.18));
          border:1px solid rgba(153,69,255,.5);border-bottom-right-radius:6px}
.msg.assistant{align-self:flex-start;background:rgba(255,255,255,.05);
          border:1px solid var(--line);border-bottom-left-radius:6px}
.msg.system{align-self:center;font-size:13px;color:var(--dim);background:transparent;border:1px dashed var(--line)}
.msg .who{font-size:11px;opacity:.6;margin-bottom:4px;font-weight:700}
.chatbar{display:flex;gap:8px}
.chatbar input{flex:1}
.agentline{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
.agentline .pill{background:rgba(255,255,255,.06);border:1px solid var(--line);
                 border-radius:999px;padding:6px 14px;font-size:13px;color:var(--dim)}
.agentline .pill b{color:var(--txt)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);
     box-shadow:0 0 8px var(--green);margin-right:6px}
.dot.off{background:var(--red);box-shadow:0 0 8px var(--red)}
/* wallet */
.addrbox{display:flex;gap:8px;align-items:center;margin:10px 0}
.addrbox .mono{flex:1}
.bal{font-size:30px;font-weight:800;margin:8px 0 2px}
.bal small{font-size:14px;color:var(--dim);font-weight:400}
.tokrow{display:flex;justify-content:space-between;padding:9px 2px;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}
.tokrow span:last-child{font-weight:700}
details{margin-top:12px}
details summary{cursor:pointer;color:var(--dim);font-size:14px}
.warn{background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.35);border-radius:12px;
      padding:12px 14px;font-size:13.5px;line-height:1.55;color:#ffd7d7;margin-top:12px}
.note{background:rgba(20,241,149,.07);border:1px solid rgba(20,241,149,.3);border-radius:12px;
      padding:12px 14px;font-size:13.5px;line-height:1.55;color:#c9ffe9;margin-top:12px}
footer{text-align:center;margin-top:40px;font-size:13px;color:var(--dim)}
footer a{color:var(--green);text-decoration:none}
kbd{background:#0d0d16;border:1px solid var(--line);border-radius:6px;padding:1px 7px;font-size:12px}