:root{
  --bg:#0a0d12; --panel:#0f1520; --panel2:#0b111b; --text:#e6e9ef; --muted:#9aa4b2;
  --line:#1b2433; --accent:#22c55e; --warn:#f59e0b; --danger:#ef4444;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background:var(--bg); color:var(--text); }
a{ color:inherit; text-decoration:none; }
.shell{ display:grid; grid-template-columns: 270px 1fr; min-height:100vh; }
aside{ background:var(--panel2); border-right:1px solid var(--line); padding:16px; }
.brand{ font-weight:950; letter-spacing:.2px; display:flex; align-items:center; gap:10px; }
.badge{ font-size:11px; font-weight:900; color:#0a0d12; background:var(--accent); padding:4px 8px; border-radius:999px; }
.nav{ margin-top:14px; display:flex; flex-direction:column; gap:6px; }
.nav a{ padding:10px 10px; border-radius:12px; color:var(--muted); font-weight:800; border:1px solid transparent; }
.nav a.active{ background:rgba(255,255,255,0.05); color:var(--text); border-color:var(--line); }
.nav a:hover{ background:rgba(255,255,255,0.04); color:var(--text); }

.statuscard{ margin-top:14px; background:rgba(255,255,255,0.02); border:1px solid var(--line); border-radius:16px; padding:14px; }
.label{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-weight:900; }
.small{ font-size:13px; color:var(--muted); }

main{ padding:18px; }
.top{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.h1{ font-size:22px; font-weight:950; margin:0; }
.pill{ color:var(--muted); font-weight:900; border:1px solid var(--line); padding:7px 10px; border-radius:999px; background:rgba(255,255,255,0.03); }

.grid{ display:grid; grid-template-columns: 1fr 520px; gap:14px; margin-top:14px; align-items:start; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px; }
.email{ margin-top:8px; padding:12px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,0.03); font-weight:950; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; align-items:center; }
.btn{ padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,0.05); color:var(--text); font-weight:950; cursor:pointer; }
.btn.primary{ border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.12); }
.btn.danger{ border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.10); }
.btn:hover{ background:rgba(255,255,255,0.08); }

table{ width:100%; border-collapse:collapse; margin-top:10px; }
th,td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:top; }
th{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.1em; }

.msgrow{ cursor:pointer; }
.msgrow:hover{ background:rgba(255,255,255,0.03); }

.code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:12px; background:rgba(0,0,0,.35); border:1px solid var(--line);
  padding:12px; border-radius:12px; margin-top:10px; color:#d1d5db; white-space:pre-wrap; word-break:break-word;
}
.kv{ margin-top:8px; color:var(--muted); font-size:13px; }
.footer{ margin-top:16px; font-size:13px; color:var(--muted); }
.notice{ margin-top:12px; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.25); border-radius:16px; padding:12px; }

@media (max-width: 1100px){
  .grid{ grid-template-columns:1fr; }
}
@media (max-width: 860px){
  .shell{ grid-template-columns:1fr; }
  aside{ position:sticky; top:0; z-index:5; }
}