:root{
  --bg:#0f1115; --bg2:#171a21; --bg3:#1f242e; --border:#2a3039;
  --white:#eef1f5; --gray:#9aa4b2; --green:#33c26b; --blue:#3b82f6;
  --yellow:#e2b93b; --red:#e05656;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--white);
  font-family:"Microsoft YaHei UI","Segoe UI",Arial,sans-serif;font-size:14px;}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
  padding:12px 20px;background:var(--bg2);border-bottom:1px solid var(--border);}
.brand{font-weight:bold;font-size:16px}
.topbar nav{display:flex;align-items:center;flex-wrap:wrap}
.topbar nav a{margin-left:16px;color:var(--gray)}
.topbar nav a:hover{color:var(--white)}
.topbar nav form.nav-out{display:inline;margin-left:16px}
.topbar nav form.nav-out button{background:none;border:none;padding:0;color:var(--gray);
  cursor:pointer;font-size:14px;font-family:inherit}
.topbar nav form.nav-out button:hover{color:var(--white)}

.container{max-width:1040px;margin:24px auto;padding:0 16px}
.jump{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.jump a{background:var(--bg3);color:var(--white);padding:6px 12px;border-radius:20px;
  border:1px solid var(--border);font-size:13px}
.jump a:hover{text-decoration:none;border-color:var(--blue);color:var(--white)}
.foot{text-align:center;color:var(--gray);padding:24px;font-size:12px}

.card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  padding:20px;margin-bottom:18px}
.card h2{margin:0 0 14px;font-size:16px}
.card h3{margin:18px 0 10px;font-size:14px;color:var(--gray)}

.balance{font-size:34px;font-weight:bold;color:var(--green)}
.muted{color:var(--gray)}
.small{font-size:12px}

.btn{display:inline-block;background:var(--green);color:#fff;border:none;
  border-radius:8px;padding:9px 16px;cursor:pointer;font-size:14px}
.btn:hover{filter:brightness(1.08);text-decoration:none;color:#fff}
.btn.blue{background:var(--blue)}
.btn.gray{background:var(--bg3);color:var(--white);border:1px solid var(--border)}
.btn.red{background:var(--red)}
.btn.sm{padding:5px 10px;font-size:12px}

.field{margin-bottom:12px}
.field label{display:block;margin-bottom:5px;color:var(--gray);font-size:13px}
input,select,textarea{width:100%;background:var(--bg);color:var(--white);
  border:1px solid var(--border);border-radius:8px;padding:9px 10px;font-size:14px}
textarea{min-height:80px;font-family:Consolas,monospace}
.inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.inline .field{flex:1;min-width:120px}

table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--border);font-size:13px}
th{color:var(--gray);font-weight:normal}

.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px}
.tag.pending{background:#3a3320;color:var(--yellow)}
.tag.grabbing{background:#23324a;color:var(--blue)}
.tag.delivered{background:#1c3a28;color:var(--green)}
.tag.cancelled,.tag.refunded{background:#3a2323;color:var(--red)}

.flash{padding:10px 14px;border-radius:8px;margin-bottom:16px;font-size:13px}
.flash.ok{background:#1c3a28;color:var(--green)}
.flash.bad{background:#3a2323;color:var(--red)}

.auth{max-width:360px;margin:8vh auto}
.auth h1{text-align:center;font-size:20px;margin-bottom:6px}
.auth p{text-align:center;color:var(--gray);margin-top:0}

.account-box{background:var(--bg);border:1px dashed var(--green);border-radius:8px;
  padding:14px;font-family:Consolas,monospace;white-space:pre-wrap;word-break:break-all;
  color:var(--green)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.seg{display:flex;gap:18px;padding:8px 0}
.seg label{color:var(--white);cursor:pointer}
.acc{margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.acc:last-child{border-bottom:none}
.cd{color:var(--yellow);font-variant-numeric:tabular-nums}
code{font-family:Consolas,monospace;background:var(--bg);padding:2px 7px;border-radius:4px;
  letter-spacing:1px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}
