:root { --bg:#070a0f; --panel:#0e141d; --line:#202b3a; --text:#f7f9fc; --muted:#8995a6; --cyan:#18d9e7; --purple:#7968ff; --danger:#ff7188; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { color-scheme:dark; }
body { margin:0; min-width:320px; background:var(--bg); color:var(--text); font-family:"Manrope",sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
.brand { font-size:15px; font-weight:800; letter-spacing:-.5px; }
.brand > span { display:inline-grid; place-items:center; width:34px; height:34px; margin-right:9px; border-radius:10px; background:linear-gradient(135deg,var(--cyan),var(--purple)); color:#071015; }
.brand em { color:var(--cyan); font-style:normal; }
.eyebrow { color:var(--cyan) !important; font-size:10px !important; font-weight:800; letter-spacing:1.8px; }
.login-screen { position:fixed; inset:0; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 25% 20%,rgba(24,217,231,.13),transparent 35%),radial-gradient(circle at 80% 80%,rgba(121,104,255,.15),transparent 40%),var(--bg); }
.login-card { width:min(430px,100%); padding:36px; border:1px solid var(--line); border-radius:22px; background:rgba(14,20,29,.97); box-shadow:0 30px 100px #0009; }
.login-card .brand { margin-bottom:35px; }
h1 { margin:5px 0 8px; font-size:34px; letter-spacing:-1.6px; }
.login-card > p:not(.eyebrow,.error) { margin:0 0 26px; color:var(--muted); font-size:12px; line-height:1.6; }
label { display:grid; gap:8px; margin:15px 0; color:#c9d0da; font-size:11px; font-weight:700; }
input,select { width:100%; border:1px solid #2a3646; border-radius:10px; outline:0; background:#0a0f16; color:var(--text); padding:13px 14px; }
input:focus,select:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(24,217,231,.1); }
form > button[type=submit] { width:100%; border:0; border-radius:10px; padding:14px; background:linear-gradient(135deg,var(--cyan),#36b8ff); color:#061014; font-size:11px; font-weight:800; }
.error { min-height:17px; color:var(--danger); font-size:10px; }
header { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 5vw; border-bottom:1px solid var(--line); background:#0b1017; }
header > div:first-child { display:flex; align-items:center; gap:20px; }
header small { color:var(--muted); font-size:9px; letter-spacing:1.5px; }
.account { display:flex; align-items:center; gap:18px; color:var(--muted); font-size:11px; }
.account button,.refresh,.manage,.block-user,.delete-user { border:1px solid #2a3747; border-radius:8px; background:#121a25; color:var(--text); padding:9px 13px; font-size:10px; font-weight:700; }
.content { width:min(1180px,92vw); margin:0 auto; padding:50px 0; }
.heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:28px; }
.heading h1 { margin:3px 0 0; }
.stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-bottom:20px; }
.stats article { display:flex; flex-direction:column; gap:9px; padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.stats span { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:1px; }
.stats strong { font-size:28px; }
.provider-section { margin: 34px 0 20px; }
.provider-title { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:16px; }
.provider-title h2 { margin:3px 0 0; font-size:23px; }
.provider-title > span { color:var(--muted); font-size:9px; }
.provider-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.provider-stats article { position:relative; overflow:hidden; min-height:128px; }
.provider-stats article::after { content:""; position:absolute; width:90px; height:90px; right:-35px; top:-35px; border-radius:50%; background:var(--card-color); opacity:.12; }
.provider-stats small { color:#657387; font-size:9px; }
.provider-credit { --card-color:#20e0a1; border-color:#174a3c !important; }
.provider-credit strong { color:#43eab4; }
.provider-requests { --card-color:#3d8dff; border-color:#213f69 !important; }
.provider-requests strong { color:#65a5ff; }
.provider-apis { --card-color:#ffad38; border-color:#59421f !important; }
.provider-apis strong { color:#ffbc5d; }
.provider-token { --card-color:#9b7cff; border-color:#41356c !important; }
.provider-token strong { color:#a993ff; font-size:21px; }
.provider-token strong[data-status="active"] { color:#43eab4; }
.provider-token strong[data-status="blocked"] { color:#ff7188; }
.provider-token strong[data-status="degraded"] { color:#ffbc5d; }
.panel { overflow:hidden; border:1px solid var(--line); border-radius:15px; background:var(--panel); }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px; border-bottom:1px solid var(--line); }
.toolbar input { max-width:410px; }
.toolbar span { color:var(--muted); font-size:10px; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; }
th,td { padding:16px 20px; border-bottom:1px solid #1a2431; text-align:left; font-size:11px; }
th { color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:1px; }
.user { display:flex; align-items:center; gap:11px; }
.user > span { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:#182332; color:var(--cyan); font-size:10px; }
.credits { color:#65e9ae; }
.manage:hover,.refresh:hover { border-color:var(--cyan); color:var(--cyan); }
.user-actions { display:flex; flex-wrap:wrap; gap:6px; }
.block-user { color:#ffbd63; border-color:#51401f; }
.block-user:hover { border-color:#ffad38; }
.delete-user { color:#ff8497; border-color:#512735; }
.delete-user:hover { border-color:#ff7188; }
.user-status { display:inline-flex; border-radius:20px; padding:4px 8px; font-size:8px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; }
.user-status.active { border:1px solid #1d614d; background:#103128; color:#4ce8b6; }
.user-status.blocked { border:1px solid #693041; background:#351923; color:#ff8297; }
.deletion-date { display:block; margin-top:6px; color:#7d8999; font-size:8px; white-space:nowrap; }
.empty { padding:35px; text-align:center; color:var(--muted); font-size:11px; }
dialog { width:min(430px,calc(100% - 30px)); border:1px solid #2a3747; border-radius:18px; background:#0e151f; color:var(--text); padding:0; box-shadow:0 30px 100px #000c; }
dialog::backdrop { background:#030508cc; backdrop-filter:blur(4px); }
dialog form { position:relative; padding:30px; }
dialog h2 { margin:5px 0; font-size:25px; }
dialog form > p:not(.eyebrow,.error) { color:var(--muted); font-size:10px; }
.close { position:absolute; top:18px; right:18px; border:0; background:transparent; color:var(--muted); font-size:24px; }
.toast { position:fixed; right:25px; bottom:25px; transform:translateY(20px); opacity:0; padding:13px 17px; border:1px solid #2c4350; border-radius:10px; background:#101b21; color:#bdf9e0; font-size:11px; transition:.2s; pointer-events:none; }
.toast.show { transform:none; opacity:1; }
@media (max-width:700px) {
  header { padding:0 18px; } header small,.account span { display:none; }
  .content { padding:30px 0; } .stats { grid-template-columns:1fr; }
  .provider-stats { grid-template-columns:1fr; }
  .heading { align-items:center; } .heading h1 { font-size:27px; }
  th:nth-child(2),td:nth-child(2) { display:none; }
}