:root{
  --bg:#0a0b0d; --panel:#14161a; --panel2:#1b1e24; --line:#2a2e36;
  --txt:#e7e9ee; --muted:#9aa3b2; --amber:#f5a623; --amber2:#ffbe45;
  --green:#3ecf8e; --red:#ff5c5c; --blue:#5b9dff;
  --radius:12px; --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);line-height:1.5}
a{color:var(--amber2);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 22px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand a{color:var(--txt);font-weight:700;letter-spacing:.3px}
.badge{font-size:11px;padding:2px 8px;border-radius:20px;margin-left:8px;font-family:var(--mono)}
.badge-test{background:rgba(245,166,35,.15);color:var(--amber);border:1px solid rgba(245,166,35,.4)}
.nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.nav a{color:var(--muted);font-size:14px}
.nav a:hover{color:var(--txt);text-decoration:none}
.nav .user{color:var(--txt);font-size:13px;opacity:.8}
.nav .logout{color:var(--red)}

.wrap{max-width:1040px;margin:28px auto;padding:0 20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-bottom:20px}
.card h1,.card h2{margin-top:0}
h1{font-size:22px}h2{font-size:18px}

.flash{padding:12px 16px;border-radius:10px;margin-bottom:16px;font-size:14px;border:1px solid}
.flash-ok{background:rgba(62,207,142,.1);border-color:rgba(62,207,142,.4);color:var(--green)}
.flash-error{background:rgba(255,92,92,.1);border-color:rgba(255,92,92,.4);color:var(--red)}
.flash-info{background:rgba(91,157,255,.1);border-color:rgba(91,157,255,.4);color:var(--blue)}

label{display:block;font-size:13px;color:var(--muted);margin:14px 0 6px}
input,select,textarea{width:100%;padding:11px 13px;background:var(--panel2);border:1px solid var(--line);
  border-radius:9px;color:var(--txt);font-size:15px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber)}
input[inputmode="decimal"],.mono{font-family:var(--mono)}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>div{flex:1;min-width:120px}

.btn{display:inline-block;border:none;cursor:pointer;padding:12px 22px;border-radius:9px;
  font-size:15px;font-weight:600;font-family:inherit}
.btn-primary{background:var(--amber);color:#1a1300}
.btn-primary:hover{background:var(--amber2);text-decoration:none}
.btn-ghost{background:var(--panel2);color:var(--txt);border:1px solid var(--line)}
.btn-danger{background:rgba(255,92,92,.15);color:var(--red);border:1px solid rgba(255,92,92,.4)}
.btn-sm{padding:7px 12px;font-size:13px}
.btn-block{width:100%}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
td.mono,th.mono{font-family:var(--mono)}
.tag{font-size:12px;padding:3px 9px;border-radius:20px;font-family:var(--mono)}
.tag-success{background:rgba(62,207,142,.15);color:var(--green)}
.tag-pending{background:rgba(91,157,255,.15);color:var(--blue)}
.tag-failed,.tag-error{background:rgba(255,92,92,.15);color:var(--red)}
.tag-admin{background:rgba(245,166,35,.15);color:var(--amber)}
.tag-operator{background:rgba(154,163,178,.15);color:var(--muted)}

.muted{color:var(--muted)}
.right{text-align:right}
.amount{font-family:var(--mono);font-size:18px;font-weight:600}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.stat{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:16px}
.stat .v{font-size:26px;font-weight:700;font-family:var(--mono)}
.stat .l{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}

.login-box{max-width:380px;margin:8vh auto}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.result-icon{font-size:48px;text-align:center;margin-bottom:8px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:14px;margin-top:10px}
.kv .k{color:var(--muted)}

.footbar{display:flex;justify-content:space-between;max-width:1040px;margin:30px auto;padding:0 20px;
  color:var(--muted);font-size:12px;font-family:var(--mono)}
@media(max-width:560px){.wrap{margin:16px auto}.card{padding:18px}.topbar{padding:12px 16px}}