:root { --bg:#0b0d10; --panel:#12161b; --ink:#e6eef8; --muted:#9fb3c8; --ok:#6ee7a8; --err:#f87171; --warn:#fbbf24; --accent:#60a5fa; }
html,body { height:100%; }
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; color:var(--ink); background:linear-gradient(180deg,#0b0d10,#0c1117); }
.wrap { max-width: 1000px; margin:24px auto; padding:0 16px; }
h1 { font-size:20px; margin:0 0 12px; }
.grid { display:grid; gap:10px; }
.onecol { grid-template-columns: 1fr; }
.twocol { grid-template-columns: 2.2fr 1fr; }
.row { display:grid; gap:10px; grid-template-columns: repeat(6, 1fr); }
label { font-size:12px; color:var(--muted); display:block; margin-bottom:6px; }
input,textarea,select { width:100%; padding:8px 10px; border:1px solid #1f2937; background:var(--panel); color:var(--ink); border-radius:10px; outline:none; }
input:focus,textarea:focus { border-color:#334155; box-shadow: 0 0 0 2px #0b4a7a40; }
.panel { background:var(--panel); border:1px solid #1f2937; border-radius:16px; padding:14px; }
.btns { display:flex; flex-wrap:wrap; gap:8px; }
button { background:#1f2937; color:#e5e7eb; border:1px solid #334155; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:600; }
button:hover { background:#273447; }
button.primary { background:#1d4ed8; border-color:#1e40af; }
button.primary:hover { background:#1e3a8a; }
button.danger { background:#7f1d1d; border-color:#991b1b; }
.log { background:#0b0f14; border:1px solid #1f2937; border-radius:16px; padding:10px; height:380px; overflow:auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:12px; line-height:1.5; }
.line { white-space:pre-wrap; word-break:break-word; margin:0; }
.ts { color:#7aa2d1; }
.dir-sent { color:#93c5fd; }
.dir-recv { color:#6ee7a8; }
.sys { color:#fbbf24; }
.err { color:#f87171; }
.pill { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; margin-left:8px; background:#0b1220; border:1px solid #1f3a5f; color:#9ec3ff;}
.flex { display:flex; gap:10px; align-items:center; }
.grow { flex:1; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.small { font-size:12px; color:var(--muted); }