:root{ --bg:#0b0b0f; --panel:#111827; --text:#e5e7eb; --muted:#9ca3af; --line:rgba(255,255,255,.08); --accent:#d50053; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:#0b0b0f; color:var(--text); }
a{ color:var(--text); text-decoration:none; opacity:.9; }
a:hover{ opacity:1; }
.topbar{ position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:16px; padding:12px 16px; background:rgba(17,24,39,.92); border-bottom:1px solid var(--line); backdrop-filter: blur(8px); }
.brand{ display:flex; align-items:baseline; gap:8px; }
.nav{ display:flex; gap:12px; flex:1; }
.right{ display:flex; align-items:center; gap:10px; }
.container{ max-width:1100px; margin:18px auto; padding:0 16px; }
.card{ background:rgba(17,24,39,.75); border:1px solid var(--line); border-radius:14px; padding:14px; }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.muted{ color:var(--muted); font-size:12px; }
.btn{ border:1px solid var(--line); background:linear-gradient(180deg, rgba(213,0,83,.25), rgba(213,0,83,.08)); color:var(--text); padding:8px 10px; border-radius:10px; cursor:pointer; }
.btn:hover{ filter:brightness(1.08); }
.btn-ghost{ background:transparent; }
.flash{ background:rgba(213,0,83,.12); border:1px solid rgba(213,0,83,.25); padding:10px; border-radius:12px; margin-bottom:12px; }
table{ width:100%; border-collapse:collapse; }
th,td{ padding:8px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:top; }
th{ text-align:left; color:#fff; font-weight:650; }
input,select,textarea{ width:100%; padding:9px 10px; border-radius:10px; border:1px solid var(--line); background:rgba(0,0,0,.25); color:var(--text); }
textarea{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.row{ display:flex; gap:10px; align-items:center; }
.row .grow{ flex:1; }
.pill{ display:inline-flex; padding:3px 8px; border-radius:999px; border:1px solid var(--line); font-size:12px; color:var(--muted); }
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.hidden{ display:none !important; }
.modal-card{ width:min(920px, 100%); background:rgba(17,24,39,.96); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.modal-head{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); }
.modal-body{ padding:12px 14px; display:grid; gap:10px; }
.chatlog{ height:260px; overflow:auto; border:1px solid var(--line); border-radius:12px; padding:10px; background:rgba(0,0,0,.18); }
.msg{ margin:0 0 10px; white-space:pre-wrap; }
@media (max-width: 780px){
  .grid{ grid-template-columns:1fr; }
  .nav{ overflow:auto; }
  .right .user{ display:none; }
}