/* Only new connection screens. Existing layouts/tokens are unchanged. */
#connections .cx-shell,#connectioninvite .cx-shell{max-width:880px;padding-top:28px;padding-bottom:48px;overflow-wrap:anywhere}
#connections .cx-header,#connectioninvite .cx-header{margin:24px 0;position:static;background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:auto}
#connections h1,#connectioninvite h1{font-size:clamp(30px,5vw,42px);line-height:1.15;letter-spacing:-.025em;margin:14px 0}
#connections h2,#connectioninvite h2{font-size:23px;line-height:1.25;margin:0 0 14px}
#connections h3,#connectioninvite h3{font-size:19px;margin:0 0 7px}
#connections p,#connectioninvite p{font-size:16px;line-height:1.65}
#connections .cx-symbol,#connectioninvite .cx-symbol{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;background:color-mix(in srgb,var(--teal) 10%,transparent);color:var(--teal)}
#connections .cx-symbol svg,#connectioninvite .cx-symbol svg{width:27px;height:27px}
#connections .cx-privacy{display:flex;gap:12px;padding:16px 20px;border:1px solid var(--linea);border-radius:18px}
#connections .cx-privacy svg{flex-shrink:0;color:var(--teal);margin-top:5px}
#connections .cx-privacy p{margin:0}
#connections .cx-tabs,#connections .cx-toolbar,#connectioninvite .cx-toolbar{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
#connections .cx-section{margin-top:32px}
#connections .cx-list{display:grid;gap:12px}
#connections .cx-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0}
#connections .cx-row>div{min-width:0}
#connections .cx-row p{margin:0}
#connections .cx-row>.btn{flex-shrink:0}
#connections .cx-empty{text-align:center;padding:32px 24px}
#connections .cx-empty>svg{color:var(--teal);width:32px;height:32px;margin-bottom:12px}
#connections .cx-note,#connectioninvite .cx-note{font-size:15px;line-height:1.6}
#connections .cx-notice,#connectioninvite .cx-notice{border-left:3px solid var(--teal);padding-left:12px}
#connectioninvite .cx-notice:empty{display:none}
#connections .cx-generated,#connections .cx-confirm{margin:20px 0;border:1px solid var(--teal)}
#connections input{box-sizing:border-box;width:100%;min-width:0;font:inherit;font-size:16px;padding:12px;border:1px solid var(--linea);border-radius:12px;background:transparent;color:inherit;margin-top:8px}
#connections .cx-qr{width:min(100%,260px);margin:22px auto;color:#111;background:#fff;border-radius:12px;padding:10px;box-sizing:border-box}
#connections .cx-qr svg{display:block;width:100%;height:auto}
#connectioninvite .cx-invitation{max-width:680px}
#connections .btn,#connectioninvite .btn{min-height:44px;white-space:normal;text-align:center;font-size:16px}
#connections button:focus-visible,#connectioninvite button:focus-visible,#connections input:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
@media(max-width:540px){
 #connections .cx-shell,#connectioninvite .cx-shell{padding-top:18px;padding-bottom:calc(32px + env(safe-area-inset-bottom))}
 #connections .cx-row{align-items:stretch;flex-direction:column;gap:12px}
 #connections .cx-toolbar>.btn,#connectioninvite .cx-toolbar>.btn{flex:1 1 170px}
 #connections .cx-tabs>.btn{flex:1 1 130px}
 #connectioninvite .panel{padding:22px 18px}
}
@media(prefers-reduced-motion:reduce){#connections *,#connectioninvite *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}