📄 Source: style.css
:root {
--bg:#0f1115; --panel:#171a21; --panel-2:#1e222b; --border:#2a2f3a;
--text:#e6e8ee; --muted:#8b93a7; --accent:#4d6bfe;
--green:#3ecf8e; --red:#ef4444; --yellow:#f5b544;
--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
background:var(--bg); color:var(--text); line-height:1.5; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.topbar { display:flex; align-items:center; justify-content:space-between;
padding:14px 22px; background:var(--panel); border-bottom:1px solid var(--border); }
.topbar h1 { font-size:17px; font-weight:600; margin:0; }
.topbar .who { font-size:13px; color:var(--muted); }
.layout { display:grid; grid-template-columns:280px 1fr; gap:18px;
padding:18px; max-width:1400px; margin:0 auto; }
@media (max-width:820px){ .layout{ grid-template-columns:1fr; } }
.card { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:16px; }
.card h2 { margin:0 0 12px 0; font-size:14px; font-weight:600; color:var(--muted);
text-transform:uppercase; letter-spacing:0.04em; }
.server-list { list-style:none; padding:0; margin:0; }
.server-list li { padding:10px 12px; border-radius:8px; cursor:pointer;
display:flex; align-items:center; justify-content:space-between; gap:10px;
border:1px solid transparent; }
.server-list li:hover { background:var(--panel-2); }
.server-list li.active { background:var(--panel-2); border-color:var(--accent); }
.server-list .name { font-weight:500; }
.server-list .meta { font-size:12px; color:var(--muted); }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--muted); }
.dot.running { background:var(--green); box-shadow:0 0 8px var(--green); }
.dot.stopped { background:var(--red); }
.controls { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
button { background:var(--panel-2); color:var(--text); border:1px solid var(--border);
border-radius:7px; padding:7px 12px; font-size:13px; cursor:pointer; font-family:inherit; }
button:hover { border-color:var(--accent); }
button.primary { background:var(--accent); border-color:var(--accent); }
button.primary:hover { filter:brightness(1.1); }
button.danger { border-color:var(--red); color:#ffd6d6; }
button.danger:hover { background:#3a1a1a; }
button:disabled { opacity:0.45; cursor:not-allowed; }
.console { background:#0a0c10; border:1px solid var(--border); border-radius:8px;
padding:12px; font-family:var(--mono); font-size:12.5px; line-height:1.45;
white-space:pre-wrap; word-break:break-word; height:460px; overflow-y:auto; color:#c8d0e0; }
.cmd-row { display:flex; gap:8px; margin-top:10px; }
.cmd-row input { flex:1; background:var(--panel-2); border:1px solid var(--border);
color:var(--text); border-radius:7px; padding:8px 11px; font-family:var(--mono); font-size:13px; }
.cmd-row input:focus { outline:1px solid var(--accent); }
.muted { color:var(--muted); font-size:13px; }
.error { color:var(--red); font-size:13px; }
.ok { color:var(--green); font-size:13px; }
.players { list-style:none; padding:0; margin:0; }
.players li { padding:6px 0; border-bottom:1px solid var(--border); font-size:14px; }
.players li:last-child { border-bottom:none; }
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card { width:100%; max-width:380px; background:var(--panel); border:1px solid var(--border);
border-radius:12px; padding:26px; }
.login-card h1 { margin:0 0 18px 0; font-size:18px; }
.login-card label { display:block; font-size:13px; color:var(--muted); margin:10px 0 4px; }
.login-card input[type=text], .login-card input[type=password] { width:100%;
background:var(--panel-2); border:1px solid var(--border); color:var(--text);
border-radius:7px; padding:9px 11px; font-size:14px; }
.login-card button { width:100%; margin-top:18px; padding:10px; font-size:14px; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); }
th { color:var(--muted); font-weight:500; }
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.65); display:none;
align-items:center; justify-content:center; z-index:50; }
.modal-backdrop.open { display:flex; }
.modal { background:var(--panel); border:1px solid var(--border); border-radius:12px;
padding:22px; max-width:420px; width:90%; }
.modal h3 { margin:0 0 10px 0; font-size:16px; }
.modal .row { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; }
← Back