:root { --bg:#0e0f13; --panel:#16181f; --line:#262a35; --txt:#e7e9ee; --muted:#8b90a0; --accent:#5865f2; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--txt); }
a { color:#9aa3ff; text-decoration:none; }
.muted { color:var(--muted); }
.small { font-size:12px; }
code { background:#1e2230; padding:1px 6px; border-radius:6px; }

.center { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.card-box { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:32px; max-width:420px; text-align:center; }
.card-box h1 { margin-top:0; }

.btn { display:inline-block; background:#222634; color:var(--txt); border:1px solid var(--line); padding:10px 16px; border-radius:10px; cursor:pointer; font-size:14px; }
.btn:hover { background:#2a2f40; }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover { filter:brightness(1.1); }

.topbar { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line); background:var(--panel); }
.wrap { max-width:1000px; margin:24px auto; padding:0 16px; }

.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin-top:16px; }
.server-card { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; text-align:center; color:var(--txt); transition:.15s; }
.server-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.server-card img, .server-ph { width:64px; height:64px; border-radius:50%; object-fit:cover; margin:0 auto 10px; }
.server-ph { background:#2a2f40; display:flex; align-items:center; justify-content:center; font-size:28px; }
.server-name { font-size:14px; }

.editor { display:flex; gap:20px; padding:20px; flex-wrap:wrap; }
.canvas-col { flex:1 1 560px; }
.card-canvas { position:relative; width:100%; max-width:640px; aspect-ratio:16/9; background:#000 center/cover no-repeat; border:1px solid var(--line); border-radius:12px; overflow:hidden; user-select:none; }
.el { position:absolute; transform:translate(-50%,-50%); cursor:grab; white-space:nowrap; z-index:2; }
.el.text { font-weight:700; color:#fff; text-shadow:0 1px 4px #000; }
.el.avatar { border-radius:50%; background:rgba(255,255,255,.15); border:2px dashed #fff; }
.el.banner { z-index:1; white-space:normal; border-radius:10px; background:rgba(88,101,242,.18); border:2px dashed #5865f2; color:#cdd2ff; display:flex; align-items:center; justify-content:center; font-size:13px; }
.el.selected { outline:2px solid var(--accent); outline-offset:2px; }

.panel { flex:0 0 280px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; }
.panel h3 { margin:14px 0 6px; font-size:13px; text-transform:uppercase; color:var(--muted); }
.panel select { width:100%; background:#11131a; color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:6px; }
.panel input[type=file] { width:100%; color:var(--muted); font-size:12px; margin-bottom:8px; }
.pad { display:flex; flex-direction:column; align-items:center; gap:6px; margin:8px 0; }
.pad button, .row button { background:#222634; color:#fff; border:1px solid var(--line); border-radius:8px; padding:8px 12px; cursor:pointer; }
.pad > div { display:flex; gap:30px; }
.row { display:flex; gap:8px; margin:8px 0; }
#save { width:100%; margin-top:14px; }
.coords { margin-top:8px; }

/* Настройки сервера */
.settings { max-width:720px; }
.sgroup { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin-bottom:14px; }
.sgroup h3 { margin:0 0 10px; font-size:14px; }
.sfield { display:flex; align-items:center; gap:12px; padding:6px 0; }
.sfield label { flex:1; font-size:13px; color:var(--txt); }
.sfield input[type=text], .sfield input[type=number] { flex:0 0 240px; background:#11131a; color:var(--txt); border:1px solid var(--line); border-radius:8px; padding:8px; }
.sfield input[type=checkbox] { width:20px; height:20px; }
.savebar { position:sticky; bottom:0; display:flex; align-items:center; gap:12px; padding:12px 0; background:linear-gradient(transparent, var(--bg) 40%); }
@media (max-width:560px){ .sfield{flex-direction:column;align-items:stretch;} .sfield input{flex:1 1 auto;} }