/* 2.4 / Quiet community UI. Uses the existing dark Valorant-inspired palette. */
.social-view[hidden]{display:none!important;}
.social-view{padding:20px 0 34px;animation:social-arrive .26s cubic-bezier(.22,1,.36,1) both;}
.social-banner{margin:0 0 22px;padding:32px 35px;background:linear-gradient(110deg,var(--tp-hero),var(--tp-hero));border:1px solid var(--tp-border);border-radius:11px;}
.social-banner h1{font-family:Onest,Manrope,sans-serif;font-size:clamp(26px,4vw,43px);line-height:1.12;letter-spacing:-.04em;color:var(--tp-heading);margin:10px 0 9px;font-weight:780;}
.social-banner h1 span{color:var(--tp-accent);}
.social-banner p{color:var(--tp-text);max-width:590px;font-size:13px;line-height:1.7;margin:0;}
.social-main{display:flex;flex-direction:column;gap:16px;}
.social-columns{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:start;}
.social-card{border:1px solid var(--tp-border);border-radius:11px;background:linear-gradient(160deg,var(--tp-card),var(--tp-card));padding:24px;min-width:0;}
.social-card h2{font-family:Onest,Manrope,sans-serif;font-size:18px;color:var(--tp-heading);font-weight:740;letter-spacing:-.025em;margin:0 0 17px;}
.social-card h3{color:var(--tp-heading);font-size:13px;font-weight:700;margin:22px 0 11px;}
.social-row-title{display:flex;align-items:start;justify-content:space-between;gap:15px;}
.social-profile-row,.social-member-main{display:flex;align-items:center;gap:12px;min-width:0;}
.social-profile-row{flex-wrap:wrap;}
.social-avatar{border:1px solid var(--tp-accent);background:linear-gradient(140deg,var(--tp-avatar),var(--tp-avatar));width:52px;height:52px;flex:0 0 52px;display:grid;place-items:center;font-weight:760;font-size:23px;color:var(--tp-heading);border-radius:10px;}
.social-identity{display:flex;flex-direction:column;gap:3px;min-width:0;}
.social-identity strong{font-size:15px;font-weight:730;color:var(--tp-heading);overflow-wrap:anywhere;}
.social-identity small{font-size:12px;color:var(--tp-text);overflow-wrap:anywhere;}
.social-chip{font-size:10px;line-height:1.35;font-weight:650;border-radius:20px;border:1px solid var(--tp-border);background:var(--tp-chip);color:var(--tp-text);padding:5px 9px;white-space:nowrap;}
.social-chip.is-private{border-color:var(--tp-border);background:var(--tp-chip);color:var(--tp-text);}
.social-chip.is-public{border-color:var(--tp-border);background:var(--tp-chip);color:var(--tp-success);}
.social-profile-hero .social-muted{margin-top:16px;}
.social-muted{color:var(--tp-text);font-size:12px;line-height:1.65;margin:8px 0;}
.social-stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.social-stat{display:flex;flex-direction:column;justify-content:center;gap:9px;min-height:100px;border-radius:9px;border:1px solid var(--tp-border);background:var(--tp-card);padding:15px;}
.social-stat small{font-size:9px;font-weight:670;color:var(--tp-text);letter-spacing:.09em;line-height:1.45;}
.social-stat strong{font-family:Onest,Manrope,sans-serif;font-size:clamp(17px,2vw,27px);font-weight:730;color:var(--tp-heading);line-height:1.1;overflow-wrap:anywhere;}
.social-chart{height:148px;display:grid;grid-template-columns:repeat(6,1fr);align-items:end;gap:8px;padding:10px 4px;}
.social-chart-col{display:flex;flex-direction:column;align-items:center;justify-content:end;height:100%;gap:5px;min-width:0;}
.social-chart-col>span{font-size:10px;color:var(--tp-text);font-variant-numeric:tabular-nums;}
.social-chart-track{width:100%;max-width:38px;height:90px;border-radius:5px;background:var(--tp-progressTrack);display:flex;flex-direction:column;justify-content:end;overflow:hidden;}
.social-chart-track i{display:block;width:100%;background:linear-gradient(180deg,var(--tp-chart),var(--tp-chart));border-radius:5px 5px 0 0;transition:height .35s ease;}
.social-chart-col small{color:var(--tp-text);font-size:9px;text-align:center;white-space:nowrap;}
.social-form{display:flex;flex-direction:column;gap:15px;}
.social-form label{display:flex;flex-direction:column;gap:8px;font-weight:650;color:var(--tp-text);font-size:12px;}
.social-form input,.social-search input{min-width:0;background:var(--tp-input);border:1px solid var(--tp-border);border-radius:7px;min-height:44px;color:var(--tp-heading);padding:11px 12px;font:inherit;font-size:13px;outline:none;}
.social-form input:focus,.social-search input:focus{border-color:var(--tp-focus);box-shadow:0 0 0 3px color-mix(in srgb, var(--tp-accent) 10.6%, transparent);}
.social-form button{align-self:flex-start;}
.social-privacy-setting{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid var(--tp-border);margin-top:24px;padding-top:20px;}
.social-privacy-setting strong{font-size:14px;color:var(--tp-heading);}
.social-privacy-setting p{font-size:11px;color:var(--tp-text);line-height:1.65;margin:7px 0;}
.social-switch{border:1px solid var(--tp-border);background:var(--tp-chip);border-radius:100px;width:54px;height:31px;flex:0 0 54px;padding:3px;cursor:pointer;display:flex;align-items:center;transition:background .2s,border-color .2s;}
.social-switch i{width:23px;height:23px;border-radius:50%;background:var(--tp-chip);transition:transform .2s,background .2s;}
.social-switch.active{background:var(--tp-accent);border-color:var(--tp-accent);}
.social-switch.active i{transform:translateX(22px);background:var(--tp-accent);}
.social-note{padding:15px 17px;background:var(--tp-surfaceAlt);border:1px dashed var(--tp-border);border-radius:8px;color:var(--tp-text);font-size:12px;line-height:1.6;}
.social-search{display:flex;gap:9px;margin:16px 0 10px;max-width:660px;}
.social-search input{flex:1;}
.social-search-results{display:flex;flex-direction:column;gap:7px;margin-top:14px;}
.social-member{border:1px solid var(--tp-border);background:var(--tp-card);border-radius:9px;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0;min-width:0;transition:border-color .18s ease,background .18s ease;}
.social-member:hover{border-color:var(--tp-accent);background:var(--tp-surfaceAlt);}
.social-member .social-avatar{width:41px;height:41px;flex-basis:41px;font-size:18px;}
.social-member .social-identity strong{font-size:12px;}
.social-member .social-identity small{font-size:11px;}
.social-member-main{flex-wrap:wrap;}
.social-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto;}
.social-member .btn,.social-actions .btn{font-size:11px;min-height:37px;border-radius:7px;padding:8px 11px;}
.social-profile-hero .social-actions{margin:16px 0 0;}
.social-back{align-self:flex-start;}
.social-private-block{text-align:center;padding:48px 24px;}
.social-private-block p{font-size:13px;color:var(--tp-text);max-width:430px;margin:10px auto;}
.social-lock{font-size:48px;color:var(--tp-accent);display:block;margin-bottom:10px;}
.social-plan-overview{border-top:1px solid var(--tp-border);margin-top:20px;padding-top:18px;}
.social-plan-overview strong{font-size:14px;color:var(--tp-heading);}
.social-plan-overview p{font-size:12px;color:var(--tp-text);line-height:1.6;}
.social-counter{font-size:11px;font-weight:650;color:var(--tp-text);background:var(--tp-chip);border-radius:13px;padding:3px 7px;margin-left:5px;}
.social-section-gap{margin-top:26px!important;}
@keyframes social-arrive{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
@media(min-width:701px){.social-card .social-actions{flex-shrink:0;}}
@media(max-width:960px){.social-columns{grid-template-columns:1fr;}.social-card{padding:20px;}}
@media(max-width:700px){
 .social-view{padding:14px 0 95px;}
 .social-banner{padding:23px 19px;}.social-banner h1{font-size:29px;}
 .social-card{padding:16px;}
 .social-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
 .social-stat{min-height:87px;padding:11px;}
 .social-member{align-items:flex-start;flex-direction:column;padding:12px;}
 .social-member .social-actions{margin-left:0;}
 .social-member-main{width:100%;}
 .social-search{flex-direction:column;}
 .social-search button{min-height:43px;}
 .social-profile-hero .social-actions{margin-left:0;}
 .mobile-dock button small{letter-spacing:-.02em;}
}