/* Connect 2026 visual system: additive, no API or database changes */
:root{--green:#27d99a;--bg:#0c100f;--panel:#111715;--panel2:#1c2420;--text:#eef6f1;--muted:#8b9d93;--border:#26342c;--ring:#35e3a2}
body{font-size:14px;-webkit-font-smoothing:antialiased;letter-spacing:-.012em}
button,a,input,textarea{transition:background-color .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,label[role=button]:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
button:disabled{opacity:.55;cursor:not-allowed}
.app{max-width:1360px;grid-template-columns:248px minmax(0,680px) minmax(240px,320px);justify-content:center;min-height:100dvh}
.sidebar{position:sticky;top:0;height:100dvh;border-right:1px solid var(--border);padding:30px 15px;gap:5px}
.sidebar .brand{margin:0 12px 31px;font-size:25px}
.sidebtn{display:flex;align-items:center;gap:13px;border-radius:999px;padding:13px 18px;font-size:15px;font-weight:560;color:var(--text)}
.sidebtn:hover{background:var(--panel2)}
.sidebtn.active{background:#193e2d;color:#60edb4}
.sidebtn svg{width:21px;height:21px;flex-shrink:0;stroke-width:1.8}
.profilelink{border:1px solid var(--border);background:var(--panel);border-radius:16px;margin-top:auto;padding:16px;line-height:1.65}
.themebtn{border-radius:999px;background:var(--panel2);color:var(--text);border:1px solid var(--border);padding:10px 16px}
.feed{padding:0;max-width:none;border-right:1px solid var(--border);min-height:100vh}
.feed>h2{font-size:22px;font-weight:750;letter-spacing:-.6px;margin:0;padding:23px 24px 3px}
.feed>.feed-sub{padding:0 24px 17px;border-bottom:1px solid var(--border);display:block}
.tabs{margin:0;display:flex;gap:0;position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px);z-index:4}
.tabs button{flex:1;padding:18px 6px 16px;font-weight:650;font-size:14px;border-bottom:3px solid transparent}
.tabs button.active{border-bottom-color:var(--green)}
.composer{border:0;border-radius:0;background:transparent;border-bottom:1px solid var(--border);margin:0;padding:20px 23px}
.composer textarea{background:transparent;border:0;border-radius:0;min-height:100px;padding:8px 0;font-size:18px;line-height:1.5;color:var(--text);outline:none}
.composer textarea::placeholder{color:var(--muted)}
.composer-bottom{border-top:1px solid var(--border);padding-top:14px;margin-top:7px}
.composer-bottom button,.primary{background:var(--green);border:0;color:#062017;font-weight:750;border-radius:999px;padding:11px 23px;box-shadow:none}
.primary:hover,.composer-bottom button:hover{background:#54eab0;transform:translateY(-1px)}
.secondary,.profile-edit-btn{background:transparent;border:1px solid #516158;color:var(--text);border-radius:999px;font-weight:650;padding:11px 19px}
.secondary:hover,.profile-edit-btn:hover{background:var(--panel2);border-color:var(--green)}
.post{background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;margin:0;padding:19px 23px}
.post:hover{background:color-mix(in srgb,var(--panel) 42%,transparent)}
.post-head{align-items:center;gap:12px}
.post-head strong{font-size:14px;font-weight:750}
.post-head small{font-size:12px}
.avatar{height:43px;width:43px;flex-shrink:0;border:1px solid #ffffff16}
.post p{font-size:14px;line-height:1.65}
.post-actions{border:0;margin-top:10px;padding:0}
.post-actions .sidebtn{font-size:12px;padding:8px 10px;min-width:0}
.feed-post{padding:18px 23px;border-bottom:1px solid var(--border)}
.feed-post .post-body{font-size:15px;line-height:1.6;margin-top:8px}
.feed-actions{gap:2px}
.feed-actions button{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:8px 10px;font-size:15px}
.feed-actions button:hover{background:#27d99a17}
.feed-actions button.selected{color:var(--green)}
.feed-actions button span{font-size:12px}
.detail-post{background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;margin:0}
.detail-post:hover{background:transparent}
.aside{padding:25px 20px;border:0}
.aside input{border-radius:999px;background:var(--panel2);border:1px solid transparent;padding:14px 19px;color:var(--text)}
.aside input:focus{border-color:var(--green);outline:none}
.sidecard{border-radius:18px;background:var(--panel);border:1px solid var(--border);padding:20px}
.sidecard h3{font-size:17px;letter-spacing:-.3px}
.suggestion button{font-weight:700;border-radius:999px;padding:8px 11px}
.profile-shell{border:0;border-bottom:1px solid var(--border);border-radius:0;margin:0;background:transparent}
.profile-banner{height:230px}
.profile-details{padding:0 24px 24px}
.profile-avatar{height:116px;width:116px;border-width:5px}
.profile-details h2{font-size:25px}
.profile-edit-btn{border-radius:999px}
.profile-tabs{margin:0;padding:19px;border-bottom:1px solid var(--border)}
.profile-modal-bg,.modalbg{backdrop-filter:blur(12px);background:#000b}
.profile-modal,.modal{border-radius:24px;background:var(--panel);border:1px solid #34483c;box-shadow:0 24px 80px #0008}
.profile-modal label,.modal label{color:var(--text);font-weight:650}
.profile-modal input:not([type=file]):not([type=range]),.profile-modal textarea,.modal input{border-radius:12px;border:1px solid var(--border);background:var(--panel2);color:var(--text)}
.profile-modal input:focus,.profile-modal textarea:focus,.modal input:focus{border-color:var(--green);outline:none}
.profile-form-actions{position:sticky;bottom:-26px;background:var(--panel);padding:14px 0}
.profile-close,.close{border-radius:50%;height:36px;width:36px;display:grid;place-items:center;background:var(--panel2);color:var(--text);font-size:23px}
.profile-close:hover,.close:hover{background:#345040}
.file-control{display:inline-flex;align-items:center;gap:9px;cursor:pointer;background:var(--panel2);border:1px solid var(--border);border-radius:999px;padding:10px 15px;color:var(--text);font-weight:650;font-size:13px}
.file-control:hover{background:#254134;border-color:var(--green)}
.file-control svg{width:18px;height:18px}
.file-control input[type=file]{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden!important;clip-path:inset(50%)!important}
.file-control:focus-within{outline:2px solid var(--green);outline-offset:3px}
.file-name{color:var(--muted);font-size:12px;max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crop-preview{border-radius:14px}
.avatar-crop{border-radius:50%}
.crop-zoom input{accent-color:var(--green)}
.toast-stack{position:fixed;bottom:22px;right:22px;z-index:200;display:grid;gap:10px;max-width:min(390px,calc(100vw - 30px))}
.toast{background:#20332a;color:#f4fff8;border:1px solid #406a54;border-radius:13px;box-shadow:0 14px 45px #0007;padding:14px 18px;font-size:13px}
.light{--green:#12875f;--bg:#f7faf8;--panel:#fff;--panel2:#eaf1ec;--text:#18271f;--muted:#63776b;--border:#dce8df;--ring:#12875f}
.light .sidebtn.active{background:#d9f4e5;color:#116d4d}
.light .sidebtn{color:var(--text)}
.light .primary,.light .composer-bottom button{color:#fff}
.light .profilelink{color:var(--text)}
@media(max-width:1100px){.app{grid-template-columns:215px minmax(0,680px)}.aside{display:none}}
@media(max-width:720px){
 .app{display:block;padding-bottom:70px}
 .sidebar{position:fixed;top:auto;bottom:0;left:0;right:0;height:66px;display:flex;flex-direction:row;align-items:center;justify-content:space-around;z-index:30;background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(16px);border-top:1px solid var(--border);border-right:0;padding:6px}
 .sidebar .brand,.sidebar .profilelink,.sidebar .themebtn{display:none}
 .sidebar .sidebtn{display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;padding:7px 3px;font-size:10px;border-radius:12px;flex:1;white-space:nowrap}
 .sidebar .sidebtn svg{height:22px;width:22px}
 .sidebar .sidebtn[data-page="Random Chat"]{color:var(--green)}
 .feed{min-height:100dvh;border:0}
 .feed>h2{padding:19px 16px 3px}
 .feed>.feed-sub{padding:0 16px 15px}
 .composer{padding:15px 17px}
 .post,.feed-post{padding:16px 13px}
 .profile-banner{height:155px}
 .profile-details{padding:0 17px 20px}
 .profile-avatar{height:92px;width:92px}
 .toast-stack{bottom:80px;right:12px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}