:root { --ink:#16202a; --muted:#6e7b87; --paper:#f7f7f5; --line:#dfe3e2; --accent:#2f6f62; --discord:#5865f2; --telegram:#229ed9; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }
.shell { max-width:1080px; margin:auto; padding:28px 32px 80px; } header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.header-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.brand { color:var(--ink); text-decoration:none; font-size:25px; font-weight:800; letter-spacing:-1px; }
.hero { display:grid; grid-template-columns:1.2fr .8fr; gap:80px; align-items:center; min-height:calc(100vh - 110px); }
.eyebrow { color:var(--accent); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin:0 0 12px; }
h1 { font-size:clamp(36px,5vw,62px); line-height:1.02; letter-spacing:-.055em; margin:0; } h2 { margin:0; letter-spacing:-.03em; }
.lead { color:var(--muted); font-size:19px; max-width:460px; margin-top:24px; }.card { background:white; border:1px solid var(--line); border-radius:16px; box-shadow:0 10px 35px #263a3310; }
.auth-card { padding:28px; }.auth-title { margin-bottom:18px; font-size:24px; }
.muted { color:var(--muted); font-size:14px; margin:0; }.optional { color:var(--muted); font-weight:500; }.hint { color:var(--muted); font-size:12px; font-weight:500; }
form { display:grid; gap:16px; } label, legend { display:grid; gap:7px; font-size:14px; font-weight:700; } input { width:100%; border:1px solid #cbd3d1; border-radius:8px; padding:11px 12px; font:inherit; } input:focus { outline:2px solid #b8dbd3; border-color:var(--accent); }
.button { border:1px solid transparent; border-radius:8px; cursor:pointer; font:inherit; font-weight:750; padding:10px 15px; }.primary { background:var(--accent); color:white; }.ghost { background:transparent; border-color:var(--line); color:var(--ink); }.error { min-height:1.2em; color:#b42318; font-size:14px; margin:0; }.success { min-height:1.2em; color:var(--accent); font-size:14px; margin:0; }.hidden { display:none !important; }
.page-title { display:flex; justify-content:space-between; gap:20px; align-items:end; margin:76px 0 28px; }.page-title h1 { font-size:36px; }.connections { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.connection { padding:20px; }.connection-top,.connection-footer { display:flex; justify-content:space-between; align-items:center; }.status { color:var(--accent); font-size:13px; font-weight:800; }.status::before { content:""; display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:currentColor; }.status.paused { color:var(--muted); }
.icon-button { background:none; border:0; color:var(--muted); cursor:pointer; font-size:22px; }.description { margin:18px 0 0; font-size:18px; letter-spacing:-.02em; }.platforms { display:flex; align-items:center; gap:10px; margin:18px 0 10px; font-weight:800; }.discord { color:var(--discord); }.telegram { color:var(--telegram); }.arrow { color:var(--muted); font-size:21px; }.ids { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; }.thread { color:var(--ink); font-size:13px; font-weight:700; margin:6px 0 0; }.direction { font-size:13px; color:var(--muted); }
.empty { padding:48px; text-align:center; border:1px dashed #b8c5c1; border-radius:16px; color:var(--muted); }.empty h2 { color:var(--ink); }
dialog { width:min(480px,calc(100vw - 32px)); border:0; border-radius:16px; padding:0; box-shadow:0 25px 70px #0004; } dialog::backdrop { background:#16202a66; } dialog form { padding:24px; }.dialog-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; } fieldset { display:grid; gap:10px; border:0; padding:0; }.choice { grid-template-columns:auto 1fr; align-items:center; cursor:pointer; font-weight:500; }.choice input { width:auto; }
@media (max-width:720px) { .shell { padding:22px 20px 50px; }.hero { grid-template-columns:1fr; gap:36px; min-height:auto; padding:70px 0; }.page-title { margin-top:48px; align-items:start; flex-direction:column; }.page-title h1 { font-size:32px; } }