:root{
  --bg:#0B0E14;
  --bg-panel:#12161F;
  --bg-panel2:#171C27;
  --buy:#33D69F;
  --sell:#FF5C72;
  --gold:#65C9F7;
  --gold-soft:#B7EAFF;
  --text:#E7E9EE;
  --text-dim:#838B9C;
  --line:rgba(231,233,238,0.08);
  --line-strong:rgba(231,233,238,0.16);
}
*{margin:0; padding:0; box-sizing:border-box;}
body{background:var(--bg); color:var(--text); font-family:'Inter',-apple-system,sans-serif; line-height:1.6;}
h1,h2,h3{font-family:'Sora',sans-serif; letter-spacing:-0.01em;}
a{color:var(--gold); text-decoration:none;}
.wrap{max-width:1100px; margin:0 auto; padding:0 24px;}

.topbar{position:sticky; top:0; z-index:50; background:rgba(11,14,20,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:16px 0;}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between;}
.brand{font-family:'Sora',sans-serif; font-weight:700; font-size:1.05rem;}
.topbar nav a{margin-left:18px; color:var(--text-dim); font-size:0.92rem;}
.topbar nav a:hover{color:var(--text);}

.auth-wrap{min-height:80vh; display:flex; align-items:center; justify-content:center; padding:40px 20px;}
.auth-card{width:100%; max-width:420px; background:var(--bg-panel); border:1px solid var(--line-strong); border-radius:14px; padding:34px;}
.auth-card h1{font-size:1.4rem; margin-bottom:6px;}
.auth-card .sub{color:var(--text-dim); font-size:0.9rem; margin-bottom:24px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:0.85rem; color:var(--text-dim); margin-bottom:6px;}
.field input, .field select{width:100%; padding:12px 14px; border-radius:9px; background:var(--bg); border:1px solid var(--line-strong); color:var(--text); font-size:0.95rem;}
.field input:focus, .field select:focus{outline:none; border-color:var(--gold);}
.btn{display:inline-block; padding:12px 22px; border-radius:9px; font-weight:600; font-size:0.92rem; border:none; cursor:pointer; text-align:center;}
.btn-block{width:100%;}
.btn-gold{background:var(--gold); color:#0c1220;}
.btn-gold:hover{opacity:0.9;}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--line-strong);}
.auth-foot{text-align:center; margin-top:18px; font-size:0.88rem; color:var(--text-dim);}

.alert{padding:12px 14px; border-radius:9px; font-size:0.85rem; margin-bottom:18px;}
.alert-error{background:rgba(255,92,114,0.1); color:var(--sell); border:1px solid rgba(255,92,114,0.3);}
.alert-ok{background:rgba(51,214,159,0.1); color:var(--buy); border:1px solid rgba(51,214,159,0.3);}

.page{padding:40px 0 70px;}
.page h1{font-size:1.6rem; margin-bottom:6px;}
.page .sub{color:var(--text-dim); margin-bottom:30px;}

table{width:100%; border-collapse:collapse; background:var(--bg-panel); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
th,td{text-align:left; padding:12px 14px; font-size:0.88rem; border-bottom:1px solid var(--line);}
th{color:var(--text-dim); font-weight:600; background:var(--bg-panel2); text-transform:uppercase; font-size:0.72rem; letter-spacing:0.04em;}
tr:last-child td{border-bottom:none;}
.table-wrap{overflow-x:auto; border-radius:12px;}

.badge{display:inline-block; padding:4px 10px; border-radius:999px; font-size:0.78rem; font-weight:600;}
.badge-Pending{background:rgba(101,201,247,0.12); color:var(--gold);}
.badge-Paid{background:rgba(51,214,159,0.12); color:var(--buy);}
.badge-Delivered{background:rgba(183,234,255,0.15); color:var(--gold-soft);}
.badge-Failed, .badge-Fake{background:rgba(255,92,114,0.12); color:var(--sell);}

.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:30px;}
.stat-card{background:var(--bg-panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px;}
.stat-card .num{font-family:'Sora',sans-serif; font-size:1.6rem; font-weight:700;}
.stat-card .label{color:var(--text-dim); font-size:0.82rem; margin-top:4px;}

.status-select{padding:7px 10px; border-radius:7px; background:var(--bg); border:1px solid var(--line-strong); color:var(--text); font-size:0.82rem;}
.section-title{font-size:1.1rem; margin:36px 0 14px;}
.empty{color:var(--text-dim); padding:30px; text-align:center;}
@media(max-width:700px){ .wrap{padding:0 16px;} .auth-card{padding:24px;} }