@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,Segoe UI,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;color:#222;background-color:#edeef0;line-height:1.5}a{color:#4a76a8;text-decoration:none}a:hover{text-decoration:underline}ul{list-style:none}.layout-wrapper{max-width:1340px;margin:0 auto;padding:56px 20px 20px;display:grid;grid-template-columns:200px 1fr 280px;gap:20px;min-height:100vh}.layout-wrapper--full{grid-template-columns:200px 1fr}.left-menu{position:sticky;top:56px;height:fit-content;max-height:calc(100vh - 76px);overflow-y:auto}.main-content{min-width:0}.right-sidebar{position:sticky;top:56px;height:fit-content;max-height:calc(100vh - 76px);overflow-y:auto}.ex-header{position:fixed;top:0;left:0;right:0;height:48px;z-index:1000;background-color:#4a76a8;display:flex;align-items:center;padding:0 20px;box-shadow:0 1px 3px #0000001f}.ex-header__left{display:flex;align-items:center;gap:20px;flex-shrink:0}.ex-header__logo{display:flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none}.ex-header__logo-icon{width:28px;height:28px;background:#fff3;border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:#fff;flex-shrink:0}.ex-header__logo-text{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.3px}.ex-header__search{flex:1;max-width:420px;margin:0 20px;position:relative}.ex-header__search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#ffffff80;pointer-events:none;display:flex}.ex-header__search-input{width:100%;height:32px;padding:0 14px 0 36px;border:none;border-radius:8px;background-color:#ffffff2e;color:#fff;font-size:13px;font-family:Inter,sans-serif;outline:none;transition:background-color .15s}.ex-header__search-input::placeholder{color:#ffffff80}.ex-header__search-input:focus{background-color:#ffffff47}.ex-header__right{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}.ex-header__icon-btn{width:36px;height:36px;border:none;border-radius:8px;background:transparent;color:#fffc;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s,color .15s;position:relative}.ex-header__icon-btn:hover{background:#ffffff26;color:#fff}.ex-header__icon-btn .badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 5px;border-radius:8px;background:#f57c00;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;border:2px solid #4a76a8}.ex-header__user{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 8px 4px 4px;border-radius:8px;transition:background-color .15s;margin-left:6px}.ex-header__user:hover{background:#ffffff26}.ex-header__user-avatar{width:30px;height:30px;border-radius:50%;object-fit:cover}.ex-header__user-name{color:#fff;font-size:13px;font-weight:500;max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ex-header__user-arrow{color:#fff9;display:flex;transition:transform .15s}.ex-header__user-arrow.open{transform:rotate(180deg)}.ex-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:220px;background:#fff;border:1px solid #d9dee5;border-radius:10px;box-shadow:0 8px 24px #0000001f;z-index:1100;overflow:hidden}.ex-dropdown__header{padding:12px 16px;border-bottom:1px solid #edeef0;font-size:13px;font-weight:600;color:#222}.ex-dropdown__list{display:flex;flex-direction:column}.ex-dropdown__item{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:13px;color:#222;cursor:pointer;transition:background-color .15s;text-decoration:none;border:none;background:none;width:100%;text-align:left;font-family:Inter,sans-serif}.ex-dropdown__item:hover{background-color:#f0f2f5;text-decoration:none}.ex-dropdown__item--danger{color:#e64646}.ex-dropdown__divider{height:1px;background:#edeef0;margin:4px 0}.sidebar-nav{display:flex;flex-direction:column;gap:1px;padding:8px 0}.sidebar-nav__item{display:flex;align-items:center;gap:12px;padding:8px 12px;font-size:13px;font-weight:500;color:#555;cursor:pointer;border-radius:8px;text-decoration:none;transition:background-color .15s,color .15s}.sidebar-nav__item:hover{background-color:#e0e4e9;color:#222;text-decoration:none}.sidebar-nav__item.active{background-color:#d4dce8;color:#4a76a8;font-weight:600}.sidebar-nav__item-icon{display:flex;flex-shrink:0;opacity:.7}.sidebar-nav__item.active .sidebar-nav__item-icon{opacity:1}.sidebar-nav__item-badge{margin-left:auto;background:#e64646;color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;padding:0 6px;border-radius:9px;display:flex;align-items:center;justify-content:center}.sidebar-nav__divider{height:1px;background:#d9dee5;margin:6px 12px}.sidebar-nav__footer{padding:8px 12px;font-size:11px;color:#999}.sidebar-ad{margin:12px 12px 8px;padding:12px;background:#f5f6f8;border-radius:8px;border:1px solid #d9dee5;text-align:center;font-size:12px;color:#818c99}.card{background:#fff;border:1px solid #d9dee5;border-radius:8px;box-shadow:0 1px 3px #0000000a}.card+.card{margin-top:12px}.card__header{padding:14px 20px;border-bottom:1px solid #edeef0;font-size:14px;font-weight:600}.card__body{padding:16px 20px}.profile-card{background:#fff;border:1px solid #d9dee5;border-radius:10px;overflow:hidden;box-shadow:0 1px 3px #0000000a}.profile-card__cover{height:200px;background:linear-gradient(135deg,#4a76a8,#3b5998,#2e4a7a);position:relative}.profile-card__body{display:flex;gap:24px;padding:0 24px 24px;margin-top:-60px;align-items:flex-end}.profile-card__avatar-wrapper{flex-shrink:0}.profile-card__avatar{width:120px;height:120px;border-radius:50%;border:4px solid #fff;object-fit:cover;box-shadow:0 2px 8px #0000001a}.profile-card__info{flex:1;padding-top:60px}.profile-card__name{font-size:22px;font-weight:700;color:#222;display:flex;align-items:center;gap:6px}.profile-card__status{font-size:13px;color:#818c99;margin-top:2px}.profile-card__status--editable{cursor:pointer;color:#4a76a8}.profile-card__status--editable:hover{text-decoration:underline}.profile-card__actions{display:flex;gap:8px;padding-top:60px;flex-shrink:0}.ex-tabs{display:flex;border-bottom:1px solid #edeef0;background:#fff;padding:0 20px}.ex-tabs__item{padding:12px 16px;font-size:13px;font-weight:500;color:#818c99;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;white-space:nowrap}.ex-tabs__item:hover{color:#4a76a8}.ex-tabs__item.active{color:#4a76a8;border-bottom-color:#4a76a8;font-weight:600}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 18px;font-size:13px;font-family:Inter,sans-serif;font-weight:500;border-radius:8px;border:1px solid transparent;cursor:pointer;outline:none;transition:background-color .15s,border-color .15s,color .15s;line-height:1.4;text-decoration:none;white-space:nowrap}.btn:hover{text-decoration:none}.btn-primary{background-color:#4a76a8;color:#fff;border-color:#4a76a8}.btn-primary:hover{background-color:#3b5998;border-color:#3b5998}.btn-secondary{background-color:#fff;color:#4a76a8;border-color:#d9dee5}.btn-secondary:hover{background-color:#f0f2f5;border-color:#c4cad3}.btn-danger{background-color:#e64646;color:#fff;border-color:#e64646}.btn-danger:hover{background-color:#cf3a3a;border-color:#cf3a3a}.btn-success{background-color:#4bb34b;color:#fff;border-color:#4bb34b}.btn-success:hover{background-color:#3ca03c;border-color:#3ca03c}.btn--sm{padding:5px 12px;font-size:12px}.btn--lg{padding:10px 28px;font-size:15px}.btn--full{width:100%}.btn--icon{padding:7px;min-width:34px;min-height:34px}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 7px;border-radius:10px;background-color:#4a76a8;color:#fff;font-size:11px;font-weight:600;line-height:1}.avatar{border-radius:50%;object-fit:cover;display:block}.avatar--xs{width:24px;height:24px}.avatar--sm{width:34px;height:34px}.avatar--md{width:50px;height:50px}.avatar--lg{width:200px;height:200px}.input-field{padding:8px 12px;border:1px solid #d9dee5;border-radius:8px;font-size:13px;font-family:Inter,sans-serif;color:#222;background-color:#fff;outline:none;transition:border-color .15s;width:100%}.input-field:focus{border-color:#4a76a8;box-shadow:0 0 0 3px #4a76a81a}textarea.input-field{resize:vertical;min-height:60px}.post-composer{background:#fff;border:1px solid #d9dee5;border-radius:10px;padding:16px;display:flex;align-items:center;gap:12px;box-shadow:0 1px 3px #0000000a}.post-composer__avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}.post-composer__input{flex:1;padding:10px 16px;border:1px solid #d9dee5;border-radius:8px;font-size:13px;font-family:Inter,sans-serif;color:#818c99;cursor:pointer;background-color:#f5f6f8;outline:none;transition:background-color .15s,border-color .15s}.post-composer__input:hover{background-color:#edeef0}.post-composer__input:focus{background-color:#fff;border-color:#4a76a8;color:#222}.post-composer__tools{display:flex;gap:4px;flex-shrink:0}.post-composer__tool{width:34px;height:34px;border:none;border-radius:8px;background:transparent;color:#818c99;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s,color .15s}.post-composer__tool:hover{background-color:#f0f2f5;color:#4a76a8}.upload-card{background:#fff;border:2px dashed #d9dee5;border-radius:10px;padding:32px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;transition:border-color .15s,background-color .15s}.upload-card:hover{border-color:#4a76a8;background-color:#f8faff}.upload-card__icon{color:#818c99;transition:color .15s}.upload-card:hover .upload-card__icon{color:#4a76a8}.upload-card__text{font-size:14px;font-weight:600;color:#818c99;transition:color .15s}.upload-card:hover .upload-card__text{color:#4a76a8}.post-card{background:#fff;border:1px solid #d9dee5;border-radius:10px;box-shadow:0 1px 3px #0000000a}.post-card+.post-card{margin-top:12px}.post-card__header{display:flex;align-items:center;gap:10px;padding:14px 18px 0}.post-card__author{flex:1;min-width:0}.post-card__author-name{font-size:13px;font-weight:600;color:#222;cursor:pointer}.post-card__author-name:hover{color:#4a76a8;text-decoration:none}.post-card__date{font-size:12px;color:#818c99;margin-top:1px}.post-card__body{padding:10px 18px 14px;font-size:14px;line-height:1.6;word-wrap:break-word}.post-card__image{max-width:100%;display:block;margin:8px 0;border-radius:8px}.post-card__actions{display:flex;align-items:center;gap:8px;padding:8px 18px;border-top:1px solid #edeef0}.post-card__action{display:flex;align-items:center;gap:6px;font-size:13px;color:#818c99;cursor:pointer;padding:6px 12px;border-radius:8px;transition:background-color .15s,color .15s}.post-card__action:hover{background-color:#f0f2f5;color:#555}.post-card__action.liked{color:#e64646}.post-card__action-count{font-weight:600}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:#818c99;text-align:center}.empty-state__icon{margin-bottom:16px;opacity:.3}.empty-state__text{font-size:15px;font-weight:500}.empty-state__subtext{font-size:13px;margin-top:4px;color:#a8a8a8}.stats-row{display:flex;gap:24px;margin-top:8px}.stats-row__item{text-align:center}.stats-row__value{font-size:18px;font-weight:700;color:#222}.stats-row__label{font-size:12px;color:#818c99;margin-top:1px}.info-table{width:100%;font-size:13px;border-collapse:collapse}.info-table td{padding:6px 16px 6px 0;vertical-align:top}.info-table__label{color:#818c99;width:140px;font-weight:500}.info-table__value{color:#222}.feed-section{background:#fff;border:1px solid #d9dee5;border-radius:10px;overflow:hidden;box-shadow:0 1px 3px #0000000a}.online-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background-color:#4bb34b;border:2px solid #fff;flex-shrink:0}.input-group{display:flex;gap:8px;align-items:center}.comment{display:flex;gap:10px;margin-bottom:10px}.comment__avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;object-fit:cover}.comment__body{flex:1;background:#f5f6f8;border-radius:8px;padding:8px 12px;min-width:0}.comment__author{font-weight:600;color:#222;font-size:13px;cursor:pointer}.comment__author:hover{color:#4a76a8;text-decoration:none}.comment__text{font-size:13px;margin-top:2px;word-wrap:break-word}.comment__date{font-size:11px;color:#818c99;margin-top:4px}.comments-section{border-top:1px solid #edeef0;padding:12px 18px 14px;background:#fafbfc}.comments-section__toggle{font-size:13px;color:#4a76a8;cursor:pointer;margin-bottom:10px}.comments-section__toggle:hover{text-decoration:underline}.comment__input-wrapper{display:flex;gap:8px;align-items:center;margin-top:10px}.comment__input{flex:1;padding:8px 14px;border:1px solid #d9dee5;border-radius:8px;font-size:13px;font-family:Inter,sans-serif;outline:none;resize:none;min-height:36px;transition:border-color .15s}.comment__input:focus{border-color:#4a76a8;box-shadow:0 0 0 3px #4a76a81a}.friends-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:10px}.friend-card{background:#fff;border:1px solid #d9dee5;border-radius:10px;padding:16px 12px;text-align:center;transition:box-shadow .15s;display:flex;flex-direction:column;align-items:center;gap:8px}.friend-card:hover{box-shadow:0 2px 8px #00000014}.friend-card__avatar{width:64px;height:64px;border-radius:50%;object-fit:cover}.friend-card__name{font-size:13px;font-weight:600;color:#222;cursor:pointer}.friend-card__name:hover{color:#4a76a8;text-decoration:none}.groups-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;padding:10px}.group-card{background:#fff;border:1px solid #d9dee5;border-radius:10px;padding:16px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;transition:box-shadow .15s}.group-card:hover{box-shadow:0 2px 8px #00000014}.group-card__avatar{width:80px;height:80px;border-radius:50%;object-fit:cover}.group-card__name{font-size:13px;font-weight:600;color:#222}.group-card__members{font-size:12px;color:#818c99}.photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px;padding:10px}.photo-thumb{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:1;background-color:#f0f2f5;border-radius:6px}.photo-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .2s}.photo-thumb:hover img{transform:scale(1.05)}.videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:10px}.video-card{border:1px solid #d9dee5;border-radius:10px;overflow:hidden;cursor:pointer;transition:box-shadow .15s;background:#fff}.video-card:hover{box-shadow:0 2px 8px #00000014}.video-card__thumb{position:relative;width:100%;aspect-ratio:16 / 9;background-color:#000;overflow:hidden}.video-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .2s}.video-card:hover .video-card__thumb img{transform:scale(1.05)}.video-card__play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;background:#0009;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .15s}.video-card:hover .video-card__play-overlay{background:#4a76a8d9}.video-card__play-icon{width:0;height:0;border-style:solid;border-width:9px 0 9px 16px;border-color:transparent transparent transparent #fff;margin-left:4px}.video-card__duration{position:absolute;bottom:6px;right:6px;background:#000000b3;color:#fff;font-size:11px;padding:2px 6px;border-radius:4px}.video-card__info{padding:10px 12px}.video-card__title{font-size:13px;font-weight:600;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.video-card__views{font-size:12px;color:#818c99;margin-top:2px}.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;padding:10px}.album-card{border:1px solid #d9dee5;border-radius:10px;overflow:hidden;cursor:pointer;transition:box-shadow .15s;background:#fff}.album-card:hover{box-shadow:0 2px 8px #00000014}.album-card__cover{width:100%;aspect-ratio:1;object-fit:cover;display:block}.album-card__info{padding:10px 12px}.album-card__title{font-size:13px;font-weight:600;color:#222}.album-card__count{font-size:12px;color:#818c99;margin-top:2px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:1500;display:flex;align-items:center;justify-content:center;padding:20px}.modal{background-color:#fff;border-radius:12px;box-shadow:0 8px 30px #00000026;max-width:560px;width:100%;max-height:80vh;display:flex;flex-direction:column}.modal__header{padding:18px 24px;border-bottom:1px solid #edeef0;display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:600}.modal__close{border:none;background:none;font-size:22px;cursor:pointer;color:#818c99;padding:4px;line-height:1;border-radius:6px;transition:background-color .15s}.modal__close:hover{background-color:#f0f2f5;color:#222}.modal__body{padding:24px;overflow-y:auto;flex:1}.modal__footer{padding:16px 24px;border-top:1px solid #edeef0;display:flex;justify-content:flex-end;gap:8px}.spinner{display:inline-block;width:24px;height:24px;border:3px solid #edeef0;border-top:3px solid #4a76a8;border-radius:50%;animation:spin .7s linear infinite}.spinner--sm{width:16px;height:16px;border-width:2px}.spinner--lg{width:40px;height:40px;border-width:4px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background-color:#edeef0;padding:20px}.auth-page__box{background:#fff;border:1px solid #d9dee5;border-radius:12px;padding:40px;width:100%;max-width:400px;box-shadow:0 4px 16px #0000000f}.auth-page__logo{text-align:center;margin-bottom:28px}.auth-page__logo-icon{width:48px;height:48px;background:#4a76a8;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:24px;color:#fff;margin:0 auto 12px}.auth-page__logo-text{font-size:22px;font-weight:700;color:#222}.auth-page__title{font-size:16px;font-weight:400;color:#818c99;text-align:center;margin-bottom:24px}.auth-page__field{margin-bottom:14px}.auth-page__field label{display:block;font-size:12px;font-weight:600;color:#818c99;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px}.auth-page__field input{width:100%;padding:10px 14px;border:1px solid #d9dee5;border-radius:8px;font-size:14px;font-family:Inter,sans-serif;outline:none;transition:border-color .15s}.auth-page__field input:focus{border-color:#4a76a8;box-shadow:0 0 0 3px #4a76a81a}.auth-page__submit{margin-top:20px}.auth-page__submit button{width:100%;padding:11px;border:none;border-radius:8px;background-color:#4a76a8;color:#fff;font-size:15px;font-weight:600;font-family:Inter,sans-serif;cursor:pointer;transition:background-color .15s}.auth-page__submit button:hover{background-color:#3b5998}.auth-page__links{text-align:center;margin-top:18px;font-size:13px}.auth-page__links a{color:#4a76a8;margin:0 8px}.auth-page__error{background-color:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:13px}.music-bar{position:fixed;bottom:0;left:0;right:0;height:52px;background:#4a76a8;display:flex;align-items:center;gap:12px;padding:0 16px;z-index:1000;color:#fff;font-size:13px}.music-bar__cover{width:36px;height:36px;border-radius:6px;background:#ffffff26;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.music-bar__cover-img{width:100%;height:100%;object-fit:cover}.music-bar__info{display:flex;align-items:center;gap:6px;min-width:0;flex:0 0 auto;max-width:220px}.music-bar__title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.music-bar__separator{opacity:.7;flex-shrink:0}.music-bar__artist{opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.music-bar__progress-wrap{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;padding:0 12px}.music-bar__progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:#ffffff40;outline:none;cursor:pointer}.music-bar__progress::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer}.music-bar__progress::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:none;cursor:pointer}.music-bar__time{display:flex;justify-content:space-between;font-size:11px;opacity:.8}.music-bar__controls{display:flex;gap:6px;flex-shrink:0}.music-bar__btn{background:#ffffff26;border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:background .15s}.music-bar__btn:hover{background:#ffffff4d}.notif-dropdown{position:absolute;top:calc(100% + 6px);right:0;width:360px;background:#fff;border:1px solid #d9dee5;border-radius:10px;box-shadow:0 8px 24px #0000001f;z-index:1100;display:none;overflow:hidden}.notif-dropdown.open{display:block}.notif-dropdown__header{padding:14px 18px;border-bottom:1px solid #edeef0;font-size:14px;font-weight:600}.notif-dropdown__list{max-height:360px;overflow-y:auto}.notif-item{display:flex;align-items:center;gap:10px;padding:12px 18px;cursor:pointer;transition:background-color .15s;border-bottom:1px solid #f0f2f5}.notif-item:hover{background-color:#f5f6f8}.notif-item__avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0;object-fit:cover}.notif-item__body{flex:1;min-width:0}.notif-item__text{font-size:13px;color:#222;line-height:1.4}.notif-item__time{font-size:11px;color:#818c99;margin-top:2px}.notif-popup-container{position:fixed;top:56px;right:16px;z-index:2000;display:flex;flex-direction:column;gap:6px;max-width:320px}.notif-popup{background:#fff;border:1px solid #d9dee5;border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 16px #0000001f;animation:notifSlideIn .3s ease-out;font-size:13px}@keyframes notifSlideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.messages-page{display:flex;height:calc(100vh - 76px);min-height:500px;border:1px solid #d9dee5;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #0000000a}.messages-page__sidebar{width:320px;border-right:1px solid #d9dee5;display:flex;flex-direction:column;flex-shrink:0}.messages-page__sidebar-header{padding:16px 18px;font-size:15px;font-weight:600;border-bottom:1px solid #d9dee5;display:flex;justify-content:space-between;align-items:center}.messages-page__sidebar-search{padding:10px 14px;border-bottom:1px solid #edeef0}.messages-page__sidebar-search input{width:100%;padding:8px 12px;border:1px solid #d9dee5;border-radius:8px;font-size:13px;font-family:Inter,sans-serif;outline:none;background:#f5f6f8}.messages-page__sidebar-search input:focus{border-color:#4a76a8;background:#fff}.messages-page__dialog-list{flex:1;overflow-y:auto}.dialog-item{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;transition:background-color .15s;border-bottom:1px solid #f0f2f5}.dialog-item:hover{background:#f5f6f8}.dialog-item.active{background:#e5ebf5}.dialog-item__avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;object-fit:cover}.dialog-item__info{flex:1;min-width:0}.dialog-item__name{font-size:13px;font-weight:600;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialog-item__preview{font-size:12px;color:#818c99;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}.dialog-item__meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}.dialog-item__time{font-size:11px;color:#818c99}.dialog-item__unread{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#4a76a8;color:#fff;font-size:11px;font-weight:700;line-height:18px}.messages-page__thread{flex:1;display:flex;flex-direction:column;min-width:0}.messages-page__thread-header{padding:14px 18px;border-bottom:1px solid #d9dee5;display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;color:#222}.messages-page__messages{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:6px;background:#fafbfc}.message{max-width:70%;padding:10px 14px;border-radius:18px;font-size:13px;line-height:1.4;word-wrap:break-word;position:relative}.message--own{align-self:flex-end;background:#d5e4f7;border-bottom-right-radius:4px}.message--other{align-self:flex-start;background:#fff;border:1px solid #e7e8ec;border-bottom-left-radius:4px}.message__time{font-size:10px;color:#818c99;margin-top:4px;text-align:right;opacity:.7}.messages-page__input-area{padding:12px 18px;border-top:1px solid #d9dee5;display:flex;gap:8px;align-items:flex-end}.messages-page__input-area textarea{flex:1;padding:10px 14px;border:1px solid #d9dee5;border-radius:8px;font-size:13px;font-family:Inter,sans-serif;resize:none;min-height:38px;max-height:120px;outline:none}.messages-page__input-area textarea:focus{border-color:#4a76a8}.messages-page__send-btn{padding:9px 20px;border:none;border-radius:8px;background:#4a76a8;color:#fff;font-size:13px;font-weight:600;font-family:Inter,sans-serif;cursor:pointer;transition:background-color .15s;height:38px}.messages-page__send-btn:hover{background:#3b5998}.friends-page{background:#fff;border:1px solid #d9dee5;border-radius:10px;box-shadow:0 1px 3px #0000000a}.friends-page__header{padding:16px 20px;border-bottom:1px solid #d9dee5;font-size:15px;font-weight:600}.friends-page__tabs{display:flex;border-bottom:1px solid #edeef0;padding:0 20px}.friends-page__tab{padding:10px 16px;font-size:13px;font-weight:500;color:#818c99;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}.friends-page__tab:hover{color:#4a76a8}.friends-page__tab.active{color:#4a76a8;border-bottom-color:#4a76a8;font-weight:600}.friends-page__search{padding:14px 20px;border-bottom:1px solid #edeef0}.friends-page__search input{width:100%;max-width:320px;padding:8px 12px;border:1px solid #d9dee5;border-radius:8px;font-size:13px;font-family:Inter,sans-serif;outline:none}.friends-page__search input:focus{border-color:#4a76a8}.groups-page{background:#fff;border:1px solid #d9dee5;border-radius:10px;box-shadow:0 1px 3px #0000000a}.groups-page__header{padding:16px 20px;border-bottom:1px solid #d9dee5;font-size:15px;font-weight:600;display:flex;justify-content:space-between;align-items:center}.group-create{max-width:500px;margin:0 auto;padding:20px}.group-create__title{font-size:16px;font-weight:600;margin-bottom:16px}.group-create__field{margin-bottom:14px}.group-create__field label{display:block;font-size:12px;font-weight:600;color:#818c99;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px}.group-create__field input,.group-create__field textarea,.group-create__field select{width:100%;padding:8px 12px;border:1px solid #d9dee5;border-radius:8px;font-size:13px;font-family:Inter,sans-serif;outline:none}.group-create__field input:focus,.group-create__field textarea:focus{border-color:#4a76a8}.group-create__field textarea{resize:vertical;min-height:80px}.photos-page,.videos-page{background:#fff;border:1px solid #d9dee5;border-radius:10px;box-shadow:0 1px 3px #0000000a}.photos-page__header,.videos-page__header{padding:16px 20px;border-bottom:1px solid #d9dee5;font-size:15px;font-weight:600}.profile__edit-form{display:flex;flex-direction:column;gap:12px;max-width:450px;padding:20px;background:#fff;border:1px solid #d9dee5;border-radius:10px}.profile__edit-row{display:flex;flex-direction:column;gap:4px}.profile__edit-row label{font-size:12px;font-weight:600;color:#818c99;text-transform:uppercase;letter-spacing:.3px}.profile__edit-row .input-field{padding:8px 12px;border:1px solid #d9dee5;border-radius:8px;font-size:13px;font-family:Inter,sans-serif;outline:none}.profile__edit-row .input-field:focus{border-color:#4a76a8;box-shadow:0 0 0 3px #4a76a81a}.profile__edit-row textarea.input-field{resize:vertical;min-height:50px}.profile__edit-actions{display:flex;gap:8px;margin-top:4px}.verified-badge{display:inline-flex;vertical-align:middle;color:#2a7bff}.u-mb-10{margin-bottom:10px}.u-mt-10{margin-top:10px}.u-text-center{text-align:center}.u-text-muted{color:#818c99}.u-flex{display:flex}.u-flex-center{display:flex;align-items:center;justify-content:center}.u-gap-8{gap:8px}.u-gap-12{gap:12px}.ex-header__hamburger{display:none;width:34px;height:34px;background:none;border:none;cursor:pointer;flex-direction:column;justify-content:center;gap:4px;padding:6px;margin-right:8px;border-radius:8px;flex-shrink:0}.ex-header__hamburger:hover{background:#ffffff26}.ex-header__hamburger span{display:block;height:2px;background:#fff;border-radius:2px}.ex-header__search-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;color:#fffc;border-radius:8px}.ex-header__search-toggle:hover{background:#ffffff26}.left-menu__overlay,.left-menu__close{display:none}.lightbox-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;z-index:2000;display:flex;align-items:center;justify-content:center;cursor:zoom-out}.lightbox-overlay__image{max-width:90vw;max-height:90vh;object-fit:contain;cursor:default}.lightbox-overlay__close{position:absolute;top:16px;right:16px;width:36px;height:36px;border:none;background:#0006;color:#fff;font-size:24px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .15s}.lightbox-overlay__close:hover{background:#0009}.lightbox-overlay__prev,.lightbox-overlay__next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:none;background:#0006;color:#fff;font-size:22px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background-color .15s}.lightbox-overlay__prev:hover,.lightbox-overlay__next:hover{background:#0009}.lightbox-overlay__prev{left:16px}.lightbox-overlay__next{right:16px}.post-create{background:#fff;border:1px solid #d9dee5;border-radius:10px;padding:16px;margin-bottom:12px;box-shadow:0 1px 3px #0000000a}.post-create__top{display:flex;gap:10px;margin-bottom:10px}.post-create__textarea{flex:1;padding:10px 14px;border:1px solid #d9dee5;border-radius:8px;font-size:13px;font-family:Inter,sans-serif;resize:none;min-height:40px;outline:none}.post-create__textarea:focus{border-color:#4a76a8;box-shadow:0 0 0 3px #4a76a81a}.post-create__bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}.post-create__attachments{display:flex;gap:8px}.post-create__attach-btn{background:none;border:none;cursor:pointer;font-size:13px;color:#818c99;padding:6px 10px;border-radius:8px;transition:background-color .15s;display:flex;align-items:center;gap:6px;font-family:Inter,sans-serif}.post-create__attach-btn:hover{background-color:#f0f2f5}.error-alert{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;border-radius:8px;padding:10px 14px;margin-bottom:12px;font-size:13px}.music-picker-item{display:flex;align-items:center;gap:10px;padding:10px 0;cursor:pointer;border-bottom:1px solid #edeef0;transition:background-color .15s}.music-picker-item:hover{background-color:#f5f6f8}@media (max-width: 1024px){.layout-wrapper{grid-template-columns:180px 1fr}.right-sidebar{display:none}}@media (max-width: 768px){.ex-header__hamburger{display:flex}.ex-header__search-toggle{display:inline-flex}.ex-header__search{display:none;position:absolute;top:48px;left:0;right:0;max-width:100%;margin:0;padding:8px 12px;background:#3b5998;z-index:999}.ex-header__search.open{display:block}.ex-header__logo-text{display:none}.layout-wrapper{grid-template-columns:1fr;padding:56px 0 0;gap:0}.left-menu{position:fixed;top:0;left:-270px;width:270px;height:100vh;background:#fff;z-index:1200;padding-top:8px;overflow-y:auto;transition:left .25s ease;box-shadow:2px 0 12px #00000026}.left-menu.open{left:0}.left-menu__close{display:block;text-align:right;padding:4px 12px 8px}.left-menu__close button{background:none;border:none;font-size:22px;cursor:pointer;color:#818c99;padding:4px 8px}.left-menu__overlay{display:block;position:fixed;top:0;left:0;right:0;bottom:0;background:#0006;z-index:1100}.main-content{padding:0}.profile-card__body{flex-direction:column;align-items:center;text-align:center}.profile-card__actions,.profile-card__info{padding-top:0}.messages-page{height:calc(100vh - 48px);min-height:400px}.messages-page__sidebar{width:100%;border-right:none}.messages-page__thread{display:none}.messages-page__thread.open{display:flex;position:fixed;top:48px;left:0;right:0;bottom:0;z-index:100;background:#fff}.profile-card__cover{height:130px}.profile-card__avatar{width:90px;height:90px}.notif-dropdown{width:320px}.friends-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.groups-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.photos-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.videos-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.album-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.modal{max-width:100%;max-height:100vh;border-radius:0}.modal-overlay{padding:0;align-items:flex-end}.auth-page__box{padding:24px 20px;max-width:100%}}@media (max-width: 480px){.ex-header{padding:0 10px}body{font-size:13px}.profile-card__cover{height:100px}.profile-card__avatar{width:70px;height:70px}.profile-card__name{font-size:18px}.post-composer{flex-wrap:wrap}.post-composer__tools{width:100%;justify-content:flex-end}.friends-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}.groups-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.photos-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}.videos-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.notif-dropdown{width:calc(100vw - 8px)}.message{max-width:85%}}