/* ============================================================
   VOLCODE PORTAL — هوية بصرية مطابقة لـ volcodefx.com
   ============================================================ */

:root {
  --bg:#050506; --bg-raised:#0b0b0d; --bg-input:#111114;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16);
  --text:#f4f6f9; --text-dim:#9a9ea7; --text-faint:#62666e;
  --red:#e5484d; --red-dim:rgba(229,72,77,.12);
  --green:#30a46c; --green-dim:rgba(48,164,108,.12);
  --amber:#ffa500; --amber-dim:rgba(255,165,0,.12);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,'Courier New',monospace;
  --radius:10px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased}
body{min-height:100vh}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

.shell{max-width:1080px;margin:0 auto;padding:24px 20px 80px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;
  border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(5,5,6,.9);backdrop-filter:blur(12px);z-index:20}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:700;letter-spacing:.06em;font-size:15px}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red)}
.brand .ai{color:var(--red)}
.topbar-actions{display:flex;align-items:center;gap:12px;font-size:13px}

.card{background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:20px}
.card-title{font-family:var(--serif);font-size:22px;font-weight:400;margin:0 0 6px}
.card-sub{color:var(--text-dim);font-size:13.5px;line-height:1.7;margin:0 0 22px}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:100%;max-width:420px}

.field{margin-bottom:16px}
label{display:block;font-size:12.5px;color:var(--text-dim);margin-bottom:7px}
label .req{color:var(--red);margin-inline-start:3px}
input,select,textarea{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:8px;
  color:var(--text);padding:12px 14px;font-size:15px;font-family:inherit;transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red)}
input::placeholder{color:var(--text-faint)}
input[dir=ltr],.mono{font-family:var(--mono);letter-spacing:.02em}
.hint{font-size:11.5px;color:var(--text-faint);margin-top:6px;line-height:1.6}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.row{grid-template-columns:1fr}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 20px;
  border-radius:8px;border:1px solid transparent;font-size:14.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:opacity .15s,background .15s}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--red);color:#fff}
.btn-primary:hover:not(:disabled){opacity:.88}
.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--text)}
.btn-ghost:hover:not(:disabled){background:rgba(255,255,255,.04)}
.btn-sm{width:auto;padding:7px 13px;font-size:12.5px;font-weight:500}

.alert{padding:12px 15px;border-radius:8px;font-size:13.5px;line-height:1.65;margin-bottom:18px;border:1px solid}
.alert-error{background:var(--red-dim);border-color:rgba(229,72,77,.3);color:#ff9ca0}
.alert-success{background:var(--green-dim);border-color:rgba(48,164,108,.3);color:#6ee7a8}

.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:11.5px;
  font-weight:600;border:1px solid;white-space:nowrap}
.badge-active{background:var(--green-dim);border-color:rgba(48,164,108,.35);color:#6ee7a8}
.badge-pending{background:var(--amber-dim);border-color:rgba(255,165,0,.35);color:#ffcc70}
.badge-expired{background:var(--red-dim);border-color:rgba(229,72,77,.35);color:#ff9ca0}
.badge-disabled{background:rgba(255,255,255,.05);border-color:var(--border);color:var(--text-faint)}

.status-hero{display:flex;align-items:center;gap:16px;padding:20px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--bg-input);margin-bottom:20px}
.status-hero .icon{font-size:30px;line-height:1}
.status-hero h3{margin:0 0 4px;font-size:16px;font-weight:600}
.status-hero p{margin:0;font-size:13px;color:var(--text-dim);line-height:1.6}

.steps{display:grid;gap:12px;margin:0;padding:0;list-style:none;counter-reset:s}
.steps li{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;background:var(--bg-input);
  border:1px solid var(--border);border-radius:8px;font-size:13.5px;line-height:1.65;color:var(--text-dim)}
.steps li::before{counter-increment:s;content:counter(s);flex:0 0 24px;height:24px;display:grid;place-items:center;
  background:var(--red);color:#fff;border-radius:50%;font-size:12px;font-weight:700;font-family:var(--mono)}
.steps li b{color:var(--text)}

.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:900px}
th,td{padding:11px 13px;text-align:start;border-bottom:1px solid var(--border);white-space:nowrap}
th{background:var(--bg-input);font-weight:600;color:var(--text-dim);font-size:11.5px;letter-spacing:.04em}
tbody tr:hover{background:rgba(255,255,255,.02)}
td.mono{font-family:var(--mono);font-size:12.5px}

.stat-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.stat{flex:1 1 130px;background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px}
.stat .k{font-size:11.5px;color:var(--text-dim)}
.stat .v{font-size:26px;font-weight:700;font-family:var(--mono);margin-top:5px}

.muted{color:var(--text-dim)}
.center{text-align:center}
.small{font-size:12.5px}
.mt{margin-top:18px}
.divider{height:1px;background:var(--border);margin:24px 0;border:0}
.actions-inline{display:flex;gap:7px;flex-wrap:wrap}
.spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-page{min-height:60vh;display:grid;place-items:center;color:var(--text-dim);font-size:14px}