@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg:#0A1618;
  --panel:#0F2224;
  --panel-2:#122A2C;
  --line:#1D3A3C;
  --mint:#00E5A0;
  --mint-dim:#0A8F6C;
  --amber:#FFB454;
  --amber-dim:#B87E2E;
  --coral:#FF6B6B;
  --teal:#37B8C9;
  --ink:#E8F3F1;
  --ink-dim:#7FA39D;
  --display:'Space Grotesk',sans-serif;
  --body:'Inter',-apple-system,sans-serif;
  --mono:'JetBrains Mono','SF Mono',Consolas,monospace;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--body);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal);}
:focus-visible{ outline:2px solid var(--mint); outline-offset:2px; }

.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:420px; margin:0 auto; padding:0 24px;}

nav{ padding:24px 0; display:flex; align-items:center; justify-content:space-between; }
.nav-mark{ font-family:var(--mono); font-size:13px; letter-spacing:.08em; color:var(--ink-dim); text-decoration:none; }
.nav-mark b{ color:var(--mint); }
.nav-links{ display:flex; gap:18px; align-items:center; font-size:13px; }
.nav-links a{ color:var(--ink-dim); text-decoration:none; }
.nav-links a:hover{ color:var(--ink); }

.auth-card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:40px;
  margin-top:60px;
}
.auth-card h1{ font-family:var(--display); font-size:28px; margin:0 0 8px; letter-spacing:-.01em; }
.auth-card .sub{ color:var(--ink-dim); font-size:14px; margin-bottom:28px; }

.field{ margin-bottom:18px; }
.field label{ display:block; font-size:12.5px; color:var(--ink-dim); margin-bottom:6px; font-weight:500; }
.field input, .field select{
  width:100%; font-family:var(--body); font-size:14.5px; color:var(--ink);
  background:var(--panel-2); border:1.5px solid var(--line); border-radius:9px; padding:12px 14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus{
  outline:none; border-color:var(--mint); box-shadow:0 0 0 3px rgba(0,229,160,.14);
}
.field .hint{ font-size:11.5px; color:var(--ink-dim); margin-top:5px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--body);
  font-weight:600; font-size:14.5px; padding:13px 22px; border-radius:10px; text-decoration:none;
  border:1.5px solid transparent; transition:all .15s ease; cursor:pointer; width:100%;
}
.btn-primary{ background:var(--mint); color:#052018; }
.btn-primary:hover{ background:#1FFFB8; }
.btn-primary:disabled{ opacity:.5; cursor:default; }
.btn-outline{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--teal); }
.btn-danger{ background:transparent; border-color:var(--coral); color:var(--coral); }
.btn-danger:hover{ background:rgba(255,107,107,.08); }
.btn-sm{ width:auto; padding:8px 14px; font-size:12.5px; }

.msg{ padding:12px 16px; border-radius:9px; font-size:13.5px; margin-bottom:18px; line-height:1.5; }
.msg-error{ background:rgba(255,107,107,.1); border:1px solid var(--coral); color:#FFB3B3; }
.msg-success{ background:rgba(0,229,160,.1); border:1px solid var(--mint-dim); color:var(--mint); }
.msg-info{ background:rgba(55,184,201,.1); border:1px solid var(--teal); color:var(--teal); }

.foot-link{ text-align:center; font-size:13.5px; color:var(--ink-dim); margin-top:20px; }

/* Dashboard */
.page-head{ margin:36px 0 28px; }
.page-head h1{ font-family:var(--display); font-size:32px; margin:0 0 6px; }
.page-head .sub{ color:var(--ink-dim); font-size:14.5px; }

.panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:28px; margin-bottom:20px; }
.panel h2{ font-family:var(--display); font-size:18px; margin:0 0 16px; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:800px){ .grid-2{ grid-template-columns:1fr; } }

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th{ text-align:left; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-dim); padding:0 10px 10px 0; border-bottom:1px solid var(--line); }
td{ padding:12px 10px 12px 0; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td{ border-bottom:none; }
tr.clickable{ cursor:pointer; }
tr.clickable:hover td{ color:var(--mint); }

.pill{ display:inline-block; font-family:var(--mono); font-size:10.5px; padding:3px 9px; border-radius:12px; text-transform:uppercase; }
.pill-prsp{ background:rgba(55,184,201,.12); color:var(--teal); border:1px solid var(--teal); }
.pill-pesp{ background:rgba(255,180,84,.12); color:var(--amber); border:1px solid var(--amber-dim); }
.pill-verified{ background:rgba(0,229,160,.12); color:var(--mint); border:1px solid var(--mint-dim); }
.pill-unverified{ background:rgba(255,107,107,.12); color:var(--coral); border:1px solid var(--coral); }
.pill-admin{ background:rgba(255,180,84,.15); color:var(--amber); border:1px solid var(--amber-dim); }

.empty{ text-align:center; color:var(--ink-dim); font-size:13.5px; padding:32px 0; }

.code-box{
  font-family:var(--mono); font-size:12px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:9px; padding:14px; word-break:break-all; color:var(--mint); position:relative;
  max-height:200px; overflow-y:auto; white-space:pre-wrap; line-height:1.6;
}
.copy-btn{
  position:absolute; top:8px; right:8px; font-family:var(--body); font-size:11px; background:var(--panel);
  border:1px solid var(--line); color:var(--ink-dim); padding:4px 9px; border-radius:6px; cursor:pointer;
}
.copy-btn:hover{ color:var(--ink); border-color:var(--teal); }

.event-row{ border:1px solid var(--line); border-radius:9px; margin-bottom:8px; overflow:hidden; }
.event-head{ display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--panel-2); font-family:var(--mono); font-size:11.5px; cursor:pointer; }
.event-body{ padding:14px; font-family:var(--mono); font-size:11.5px; color:var(--ink-dim); white-space:pre-wrap; display:none; border-top:1px solid var(--line); }
.event-body.open{ display:block; }
.dir-inbound{ color:var(--teal); }
.dir-outbound{ color:var(--amber); }
.status-ok{ color:var(--mint); }
.status-err{ color:var(--coral); }

.loading{ color:var(--ink-dim); font-size:13.5px; padding:20px 0; }

footer{ border-top:1px solid var(--line); padding:28px 0 48px; text-align:center; margin-top:40px; }
.footer-note{ font-size:12px; color:var(--ink-dim); }