:root { color-scheme: dark; --bg:#0f1117; --card:#1a1d27; --line:#2a2f3d; --fg:#e6edf3; --muted:#9aa4b2; --accent:#3b82f6; --up:#3fb950; --danger:#f85149; }
* { box-sizing: border-box; }
body { margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); }
header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--line); }
header h1 { font-size:1.15rem; margin:0; }
main { max-width:900px; margin:0 auto; padding:1.25rem; }
.muted { color:var(--muted); }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1.25rem; margin:0 0 1rem; }
h2 { font-size:1.05rem; margin:0 0 .75rem; }
h3 { font-size:.95rem; margin:1rem 0 .5rem; }
label { display:block; font-size:.85rem; color:var(--muted); margin:.6rem 0 .2rem; }
input, select { width:100%; padding:.55rem .7rem; background:#0f1117; color:var(--fg); border:1px solid var(--line); border-radius:8px; font-size:.95rem; }
button { padding:.55rem .9rem; border:0; border-radius:8px; background:var(--accent); color:#fff; font-weight:600; cursor:pointer; font-size:.9rem; }
button.secondary { background:#2a2f3d; }
button.danger { background:var(--danger); }
button:disabled { opacity:.5; cursor:not-allowed; }
.row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.err { color:var(--danger); font-size:.85rem; margin-top:.5rem; min-height:1.1em; }
.ok { color:var(--up); font-size:.85rem; margin-top:.5rem; }
table { width:100%; border-collapse:collapse; font-size:.88rem; }
th, td { text-align:left; padding:.5rem .5rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:600; }
.badge { display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.72rem; background:#2a2f3d; margin:.1rem .2rem .1rem 0; }
.badge.trusted   { background:#c7a51f; color:#1a1400; }  /* yellow */
.badge.moderator { background:#d1712c; color:#1f0d00; }  /* orange */
.badge.admin     { background:#8a5cf0; color:#ffffff; }  /* purple */
.badge.owner     { background:#16a99a; color:#03231f; }  /* teal   */
code { background:#0f1117; padding:.15rem .4rem; border-radius:6px; border:1px solid var(--line); font-size:.82rem; word-break:break-all; }
.qr { width:180px; height:180px; border-radius:8px; background:#fff; padding:6px; }
.grid { display:grid; grid-template-columns:1fr 150px; gap:.6rem .9rem; align-items:center; margin-bottom:.4rem; }

/* server card: separate the name/status row from the action buttons */
.card-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1.1rem; }

/* terminal-style log viewer */
.terminal { display:none; margin-top:1.1rem; border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.35); }
.terminal.open { display:block; }
.terminal-bar { display:flex; align-items:center; gap:.6rem; padding:.45rem .7rem; background:#11141c; border-bottom:1px solid var(--line); }
.terminal-bar .dots { display:inline-flex; gap:.4rem; }
.terminal-bar .dots i { width:11px; height:11px; border-radius:50%; background:#3a3f4b; }
.terminal-bar .dots i:nth-child(1){ background:#ff5f56; } .terminal-bar .dots i:nth-child(2){ background:#ffbd2e; } .terminal-bar .dots i:nth-child(3){ background:#27c93f; }
.terminal-bar .t-title { color:var(--muted); font-size:.78rem; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.terminal-body { margin:0; max-height:360px; overflow:auto; padding:.8rem .9rem; background:#07090d; color:#cbd5e1; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.78rem; line-height:1.55; white-space:pre-wrap; word-break:break-word; }

/* invite form spacing */
.invite-note { margin-top:.9rem; }
.invite-out { margin-top:1rem; line-height:1.6; }
.invite-out code { display:inline-block; margin-top:.35rem; }

/* icon buttons (logs / console / copy) */
.head-right { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; background:#2a2f3d; color:var(--fg); border-radius:8px; }
.icon-btn:hover { background:#343b4d; }
.icon-btn.active { background:var(--accent); color:#fff; }
.icon-btn svg { display:block; }

/* interactive console input row */
.console-input { display:flex; gap:.5rem; padding:.55rem .6rem; background:#11141c; border-top:1px solid var(--line); }
.console-input input { flex:1; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.8rem; }
.console-input button { flex:0 0 auto; }

/* invite link + copy button */
.linkrow { display:flex; align-items:center; gap:.5rem; margin-top:.4rem; }
.linkrow code { flex:1; margin-top:0; }

/* live state badge + small icon buttons + misc */
.badge.state.up { background:#12331f; color:#7ee2a8; }
.badge.state.down { background:#3a2a2a; color:#f0a3a3; }
.icon-btn.sm { width:30px; height:30px; }
.icon-btn.sm svg { width:15px; height:15px; }
.icon-btn.danger:hover { background:var(--danger); color:#fff; }
.actionmsg { color:var(--muted); font-size:.82rem; align-self:center; }
.secret { user-select:all; letter-spacing:1px; }
.uactions { white-space:nowrap; text-align:right; }
.uactions .icon-btn { margin-left:.25rem; }
.subrow td { background:#12141c; }
.utable th, .utable td { vertical-align:middle; }
.ta-r { text-align:right; }

/* cascading role picker popout */
.role-menu { position:absolute; z-index:200; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.35rem; min-width:250px; box-shadow:0 12px 34px rgba(0,0,0,.55); }
.rm-item { position:relative; display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.5rem .6rem; border-radius:7px; }
.rm-item:hover { background:#2a2f3d; }
.rm-cur { font-size:.72rem; }
.rm-sub { display:none; position:absolute; left:100%; top:-1px; margin-left:3px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.3rem; min-width:150px; box-shadow:0 12px 34px rgba(0,0,0,.55); }
.rm-item:hover > .rm-sub { display:block; }
.rm-opt { padding:.45rem .6rem; border-radius:6px; cursor:pointer; font-size:.85rem; white-space:nowrap; }
.rm-opt:hover { background:var(--accent); color:#fff; }
.rm-opt.sel { color:var(--accent); }

/* whitelist editor */
.wlbox { display:none; margin-top:1.1rem; border:1px solid var(--line); border-radius:10px; padding:.9rem; background:#12141c; }
.wlbox.open { display:block; }
.wl-head { font-size:.9rem; font-weight:600; margin-bottom:.7rem; }
.wl-list { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.7rem; min-height:1.5rem; }
.wl-chip { display:inline-flex; align-items:center; gap:.3rem; background:#2a2f3d; border-radius:999px; padding:.22rem .35rem .22rem .7rem; font-size:.82rem; }
.wl-chip button { background:none; color:var(--muted); padding:0 .25rem; font-size:1.05rem; line-height:1; }
.wl-chip button:hover { color:var(--danger); }
.wl-add { display:flex; gap:.5rem; }
.wl-add input { flex:1; }