*{box-sizing:border-box}html,body,#root{height:100%;margin:0;width:100%}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica Neue,Arial;background:var(--bg);color:var(--text);font-size:15px;line-height:1.45}:root{--bg:#0f1115;--panel:#151821;--muted:#9aa3b2;--text:#e6e9ef;--accent:#6aa0ff;--border:#262a36;--ok:#2ecc71;--bg-oscuro:#1a2030}.app{min-height:100vh;display:flex;justify-content:center;align-items:center;padding-block:24px;background:radial-gradient(1200px 600px at 20% -10%,-var(--bg-oscuro) 0%,transparent 40%),radial-gradient(900px 500px at 100% 10%,#1b2333 0%,transparent 40%),var(--bg)}.wrapper{width:min(1200px,100% - 64px);margin-inline:auto;padding:24px;display:flex;flex-direction:column;gap:16px}.header{display:flex;align-items:center;gap:12px;margin-bottom:6px}.header h1{font-size:28px;margin:0}.muted{color:var(--muted)}.grid{display:grid;gap:24px;width:100%;align-items:sutart}.grid-fixed{grid-template-columns:520px 1fr}@media(max-width:1100px){.grid-fixed{grid-template-columns:1fr}.app{align-items:flex-start}}.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 6px 24px #0000002e}.section-title{font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:4px 0 14px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-row>.full{grid-column:1 / -1}label{font-size:13px;color:var(--muted);display:block;margin-bottom:6px}input,select,textarea{width:100%;background:#0e121b;color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px 12px;outline:none;font-size:14px;transition:border-color .15s ease,box-shadow .15s ease}textarea{height:140px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}.toggle{display:flex;align-items:center;gap:8px}.btn{border:none;cursor:pointer;-webkit-user-select:none;user-select:none;padding:10px 14px;border-radius:10px;font-weight:600;background:var(--accent);color:#fff;transition:transform .06s ease,filter .2s ease}.btn:active{transform:translateY(1px) scale(.995)}.btn.secondary{background:#30364a;color:#cdd5e5}.hint{color:var(--muted);font-size:12px;margin-top:8px}.divider{height:1px;background:var(--border);margin:16px 0;border-radius:2px}.actions-row{display:flex;gap:10px;margin-top:12px}.preview .btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}.preview .section-title{margin-bottom:10px}.preview h3{color:#eaf0ff;margin:6px 0}.preview pre{white-space:pre-wrap;word-break:break-word;background:#0e121b;border:1px dashed var(--border);border-radius:12px;padding:14px 16px;color:#dfe6f3;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;line-height:1.55;overflow:auto}.stable-block{min-height:120px;max-height:260px}.sticky{position:sticky;top:16px}.server-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:stretch}.server-card{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:#0e121b;color:var(--text);cursor:pointer;transition:transform .06s ease,border-color .15s ease,box-shadow .15s ease,background .2s ease}.server-card:hover{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}.server-card input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}.server-name{font-weight:600;line-height:1.2;word-break:break-word}.scroll-panel .server-grid{max-height:280px;overflow-y:auto;padding-right:6px}.scroll-panel .server-grid::-webkit-scrollbar{width:8px}.scroll-panel .server-grid::-webkit-scrollbar-thumb{background:#3a3f4b;border-radius:4px}.scroll-panel .server-grid::-webkit-scrollbar-thumb:hover{background:#5a5f6b}@media(max-width:700px){.form-row{grid-template-columns:1fr}}@media(max-width:980px){.server-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}}@media(max-width:600px){.server-grid{grid-template-columns:1fr 1fr}}.table{width:100%;border-collapse:collapse;font-size:14px}.table th,.table td{border-bottom:1px solid var(--border);padding:10px 8px;vertical-align:top}.table th{text-align:left;color:#cfd6e7;position:sticky;top:0;background:color-mix(in srgb,var(--panel) 92%,black);z-index:1}.table tr:hover td{background:#0e121b}.center-page{display:flex;justify-content:center;align-items:flex-start;margin-top:40px}
