:root{color-scheme:dark;font:16px/1.45 system-ui,sans-serif;background:#101310;color:#f0f4ec;--accent:#c6f473;--muted:#a9b2a1;--edge:#384334}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0}main{max-width:650px;margin:auto;padding:28px 16px 48px}
header{display:flex;gap:14px;align-items:center;margin:12px 0 24px}.brand{background:var(--accent);color:#1a250d;border-radius:14px;display:grid;place-items:center;width:50px;height:50px;font-weight:800}
h1,h2,p{margin:0}h1{font-size:1.9rem;line-height:1.1}h2{font-size:1.12rem;margin:0 0 12px}header p,label,small{color:var(--muted)}label{display:block;margin:8px 0 6px}
.card,.connection{padding:16px;border:1px solid var(--edge);background:#191f18;border-radius:16px;margin:0 0 12px}.connection{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}.online{color:var(--accent)}
input,select,button{font:inherit;color:inherit;border:1px solid #475544;border-radius:9px;padding:10px;background:#222b21;min-width:0}button{cursor:pointer;font-weight:650}button:disabled{cursor:default;opacity:.45}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.primary,[aria-pressed=true]{background:var(--accent);color:#19230e;border-color:var(--accent)}#login input{width:100%;margin:0 0 10px}.tabs,.pair,.letters{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:10px}.letters{grid-template-columns:repeat(6,minmax(0,1fr))}.letters button{padding:10px 2px}.letters small{display:block;font-size:.72rem}
ul{padding:0;margin:0;list-style:none}li{padding:7px 0;border-top:1px solid var(--edge);color:var(--muted)}#login-error,#feedback{min-height:1.5em;margin-top:8px;color:#d8e6ce}