.connection-panel{border:1px solid #ffffff19;border-radius:20px;background:linear-gradient(145deg,#172232,#101824);padding:24px;margin:20px 0;color:#e8edf4}.connection-panel h2,.connection-panel h3{margin:0 0 8px}.connection-panel p{color:#aab8cb;line-height:1.55}.connection-panel button{min-height:40px;border-radius:10px;padding:8px 14px}.connection-panel input{min-width:0;border:1px solid #ffffff25;background:#0b1521;border-radius:10px;padding:10px;color:inherit}.pair-qr-layout{display:flex;align-items:center;gap:28px;flex-wrap:wrap}.pair-qr{background:white;border-radius:14px;flex-shrink:0}.pair-qr-layout>div{flex:1;min-width:200px}.phone-pair{max-width:520px;margin:40px auto;padding:16px}.phone-pair form{display:grid;gap:18px}.phone-pair label{display:grid;gap:8px}.phone-pair input{font-size:18px;width:100%;box-sizing:border-box}.connection-icon{font-size:40px}.friends-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.friends-total{font-size:24px;color:#75d4bb}.friend-invite{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.friend-invite input{flex:1;min-width:160px}.friend-code{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px;background:#ffffff08;border-radius:12px}.friend-code span{width:100%;font-size:12px;color:#aab8cb}.friend-code code{overflow-wrap:anywhere}.friend-request,.friend-row{display:flex;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid #ffffff10;flex-wrap:wrap}.friend-request{background:#75d4bb0b;padding:14px;border-radius:12px;margin-top:14px}.friend-request>span{flex:1;min-width:180px}.friend-avatar{width:42px;height:42px;position:relative;background:#64748b33;border-radius:50%;display:grid;place-items:center;flex-shrink:0}.friend-avatar img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:50%}.friend-avatar i{position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;background:#6b7280;border:2px solid #14202e}.friend-avatar i.online{background:#65d4ac}.friend-info{display:grid;gap:5px;flex:1;min-width:100px}.friend-info small{color:#91a3b8;font-size:11px}.friend-active{font-size:12px;color:#75d4bb;border:1px solid #75d4bb55;border-radius:20px;padding:6px 10px}@media(max-width:600px){.connection-panel{padding:16px}.pair-qr-layout{justify-content:center;gap:16px}.friend-row button{font-size:12px;padding:6px 10px}.phone-pair{margin:10px auto}.friend-code code{font-size:12px}}.connection-panel button{background:#203348;color:#e8edf4;border:1px solid #526578;cursor:pointer}.connection-panel button.primary{background:#137c70;border-color:#2ab5a0}.connection-panel button:disabled{opacity:.5;cursor:default}.connection-panel .friend-row .ghost{width:auto}