body {
    background-color: #f8f9fa;
}
.jumbotron {
    padding: 2rem 1rem;
    background-color: #e9ecef;
    border-radius: 0.5rem;
}
.card-img-top {
    object-fit: cover;
}
.caption-text {
    font-style: italic;
}
.btn-sm {
    margin-right: 0.25rem;
}
.caption-text {
    font-style: italic;
    color: #6c757d;
}

/*Стили для карточек*/
.card-img-top {
    background-size: cover;
    background-position: center;
}
.card {
    transition: transform 0.2s;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Мобильные стили */
@media (max-width: 768px) {
    .card-img-top {
        height: 150px !important;
    }
    .card-body .btn {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
    .navbar-brand {
        font-size: 1.2rem;
    }
    .lightbox-toolbar {
        padding: 5px 10px;
    }
    .lightbox-btn span {
        display: none;
    }
    .lightbox-btn i {
        font-size: 1.2rem;
    }
    .lightbox-caption, .lightbox-tags-block {
        font-size: 0.7rem;
        bottom: 10px;
    }
}

/* Кастомные кнопки */
.btn-custom {
    border-radius: 30px;
    padding: 0.4rem 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.btn-custom:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn-outline-custom {
    background: transparent;
    border: 1px solid #dee2e6;
    color: #495057;
}
.btn-outline-custom:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
}
/* === Family Feed v1.2.0 === */
:root { --family-border:#dbdbdb; --family-text:#171717; --family-muted:#737373; --family-bg:#fafafa; }
body { background: var(--family-bg); color: var(--family-text); }
.app-container { padding-top: 28px; padding-bottom: 60px; }
.family-navbar { background: rgba(255,255,255,.96); border-bottom:1px solid var(--family-border); backdrop-filter: blur(12px); }
.family-navbar .navbar-toggler { border:0; }
.family-brand { color:#111 !important; font-weight:800; letter-spacing:-.5px; font-size:1.35rem; }
.family-brand i { margin-right:.35rem; }
.family-navlinks .nav-link, .family-navbar .nav-link { color:#262626 !important; font-weight:600; }
.family-navlinks .nav-link:hover { color:#000 !important; }
.family-search { height:36px; background:#efefef; border-radius:9px; align-items:center; padding:0 11px; color:#777; }
.family-search input { width:170px; border:0; outline:0; background:transparent; padding-left:8px; }
.family-user-link { display:flex; align-items:center; gap:8px; color:#222; text-decoration:none; font-size:.9rem; font-weight:600; }
.nav-icon-link { width:38px; height:38px; display:grid; place-items:center; color:#222; text-decoration:none; border-radius:50%; }
.nav-icon-link:hover { background:#f1f1f1; }
.family-avatar { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; flex:0 0 auto; background:linear-gradient(145deg,#232323,#777); color:#fff; font-weight:800; border:2px solid #fff; box-shadow:0 0 0 1px #d0d0d0; }
.family-avatar.mini { width:34px; height:34px; font-size:.85rem; }
.feed-shell { max-width:760px; margin:0 auto; }
.feed-topbar { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:24px; }
.feed-topbar h1 { margin:0; font-size:1.75rem; font-weight:800; }
.feed-topbar p { margin:.25rem 0 0; color:var(--family-muted); }
.feed-column { display:flex; flex-direction:column; gap:24px; max-width:680px; margin:0 auto; }
.single-post-column { padding-top:10px; }
.family-post { background:#fff; border:1px solid var(--family-border); border-radius:12px; overflow:hidden; }
.family-post-header { min-height:64px; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.family-author { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; min-width:0; }
.family-author strong { display:block; font-size:.92rem; }
.family-author small { display:block; color:var(--family-muted); font-size:.76rem; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:350px; }
.post-time { color:var(--family-muted); text-decoration:none; font-size:.75rem; white-space:nowrap; }
.post-carousel { position:relative; background:#0b0b0b; width:100%; overflow:hidden; }
.post-carousel-track { position:relative; width:100%; aspect-ratio:1/1; }
.post-slide { position:absolute; inset:0; display:none; align-items:center; justify-content:center; }
.post-slide.active { display:flex; }
.post-slide img, .post-slide video { width:100%; height:100%; object-fit:contain; background:#0b0b0b; }
.carousel-nav { position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; border-radius:50%; background:rgba(255,255,255,.88); color:#222; display:grid; place-items:center; z-index:3; opacity:.88; }
.carousel-nav.prev { left:12px; } .carousel-nav.next { right:12px; }
.carousel-counter { position:absolute; top:12px; right:12px; background:rgba(0,0,0,.58); color:#fff; padding:4px 8px; border-radius:12px; font-size:.72rem; z-index:3; }
.carousel-dots { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:5px; z-index:3; }
.carousel-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; } .carousel-dot.active { background:#fff; }
.post-actions { display:flex; justify-content:space-between; align-items:center; padding:10px 12px 2px; }
.post-actions-left { display:flex; gap:4px; }
.post-icon-btn { border:0; background:transparent; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; font-size:1.45rem; color:#171717; padding:0; }
.post-icon-btn:hover { background:#f4f4f4; }
.like-btn.active { color:#ed4956; } .save-btn.active { color:#111; }
.post-body { padding:0 14px 12px; font-size:.9rem; }
.likes-line { margin:2px 0 7px; }
.post-caption, .comment-row { margin:3px 0; line-height:1.4; word-break:break-word; }
.post-caption a, .comment-row a { color:inherit; text-decoration:none; }
.view-all-comments { display:inline-block; color:var(--family-muted); text-decoration:none; margin:5px 0; }
.comment-form { display:flex; gap:8px; border-top:1px solid #efefef; margin-top:10px; padding-top:10px; }
.comment-form input { flex:1; border:0; outline:0; min-width:0; background:transparent; }
.comment-form button { border:0; background:transparent; color:#0095f6; font-weight:700; }
.feed-empty { background:#fff; border:1px dashed #ccc; border-radius:16px; text-align:center; padding:60px 24px; }
.feed-empty-icon { font-size:3rem; margin-bottom:12px; }
.feed-empty h2 { font-weight:800; font-size:1.35rem; }
.feed-empty p { color:var(--family-muted); max-width:460px; margin:0 auto 20px; }
.compose-shell { max-width:680px; margin:0 auto; }
.compose-card { background:#fff; border:1px solid var(--family-border); border-radius:16px; padding:22px; }
.compose-heading { display:flex; gap:14px; align-items:flex-start; margin-bottom:18px; }
.compose-heading h1 { font-size:1.5rem; font-weight:800; margin:0; }.compose-heading p{margin:3px 0 0;color:var(--family-muted)}
.icon-link { color:#222; width:36px; height:36px; display:grid; place-items:center; text-decoration:none; border-radius:50%; }.icon-link:hover{background:#f2f2f2}
.upload-drop { min-height:190px; border:2px dashed #cfcfcf; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; margin-bottom:16px; background:#fafafa; }
.upload-drop:hover { border-color:#777; background:#f7f7f7; }.upload-drop i{font-size:2.8rem;margin-bottom:10px}.upload-drop strong{font-size:1.05rem}.upload-drop span{font-size:.82rem;color:var(--family-muted);margin-top:4px}
.compose-preview { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:16px; }.compose-preview:empty{display:none}.compose-preview-item{aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#111}.compose-preview-item img,.compose-preview-item video{width:100%;height:100%;object-fit:cover}
.profile-shell { max-width:920px; margin:0 auto; }.profile-head{display:flex;align-items:center;gap:54px;padding:24px 30px 34px}.profile-avatar{width:140px;height:140px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#222,#777);color:#fff;font-weight:800;font-size:3.5rem;flex:0 0 auto}.profile-info{flex:1}.profile-title-row{display:flex;align-items:center;gap:16px}.profile-title-row h1{font-size:1.65rem;margin:0;font-weight:500}.profile-stats{display:flex;gap:28px;margin:20px 0}.profile-divider{border-top:1px solid var(--family-border);text-align:center;padding:14px 0;font-size:.78rem;font-weight:700;letter-spacing:1px}.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.profile-tile{position:relative;aspect-ratio:1/1;background:#111;overflow:hidden;color:#fff}.profile-tile img,.profile-tile video{width:100%;height:100%;object-fit:cover}.profile-tile-overlay{position:absolute;inset:0;background:rgba(0,0,0,.38);display:flex;align-items:center;justify-content:center;gap:20px;opacity:0;transition:.15s}.profile-tile:hover .profile-tile-overlay{opacity:1}.video-mark{position:absolute;top:10px;right:10px;text-shadow:0 1px 3px #000}
@media(max-width:768px){.app-container{padding-top:14px}.family-nav-right{margin-top:10px}.feed-topbar{align-items:center}.feed-topbar p{display:none}.feed-shell{max-width:none}.family-post{border-radius:0;margin-left:-12px;margin-right:-12px;border-left:0;border-right:0}.post-carousel-track{aspect-ratio:4/5}.compose-card{border-radius:0;margin-left:-12px;margin-right:-12px;border-left:0;border-right:0}.compose-preview{grid-template-columns:repeat(3,1fr)}.profile-head{gap:22px;padding:12px 4px 24px}.profile-avatar{width:82px;height:82px;font-size:2rem}.profile-title-row{align-items:flex-start;flex-direction:column;gap:8px}.profile-title-row h1{font-size:1.25rem}.profile-stats{gap:14px;font-size:.82rem;margin:12px 0}.profile-grid{gap:2px}.carousel-nav{display:none}}

.post-header-actions{display:flex;align-items:center;gap:4px}.post-menu-btn{width:32px;height:32px;border:0;background:transparent;border-radius:50%;color:#555}.post-menu-btn:hover{background:#f1f1f1}

/* === Family Social v1.3.0 === */
.family-avatar { object-fit:cover; display:block; }
.notification-link { position:relative; }
.notification-badge { position:absolute; top:0; right:-2px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:#ed4956; color:#fff; font-size:.65rem; font-weight:800; line-height:17px; text-align:center; box-shadow:0 0 0 2px #fff; }
.post-username { display:block; color:var(--family-muted); font-size:.72rem; line-height:1.1; }
.comment-row { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.comment-copy { min-width:0; flex:1; }
.comment-delete { width:24px; height:24px; flex:0 0 auto; border:0; background:transparent; color:#aaa; border-radius:50%; opacity:0; transition:.15s; }
.comment-row:hover .comment-delete { opacity:1; }
.comment-delete:hover { background:#f1f1f1; color:#555; }
.comments-disabled { color:var(--family-muted); font-size:.82rem; padding:8px 0 2px; }
.profile-avatar-img { object-fit:cover; display:block; border:1px solid #ddd; }
.profile-username { color:var(--family-muted); font-size:.9rem; margin-top:2px; }
.profile-bio { white-space:pre-line; margin:0 0 8px; max-width:540px; }
.profile-joined { margin-bottom:0; }
.multi-mark { position:absolute; top:10px; right:10px; color:#fff; text-shadow:0 1px 3px #000; }
.settings-shell { max-width:720px; margin:0 auto; }
.settings-card, .admin-card { background:#fff; border:1px solid var(--family-border); border-radius:16px; padding:24px; }
.settings-title { display:flex; gap:14px; align-items:flex-start; margin-bottom:24px; }
.settings-title h1, .admin-heading h1, .activity-heading h1 { font-size:1.6rem; font-weight:800; margin:0; }
.settings-title p, .admin-heading p, .activity-heading p { margin:4px 0 0; color:var(--family-muted); }
.avatar-editor { display:flex; gap:20px; align-items:center; padding:18px; background:#fafafa; border:1px solid #eee; border-radius:14px; margin-bottom:22px; }
.avatar-editor img { width:96px; height:96px; border-radius:50%; object-fit:cover; border:1px solid #ddd; background:#eee; }
.activity-shell { max-width:760px; margin:0 auto; }
.activity-heading { margin-bottom:20px; }
.activity-list { background:#fff; border:1px solid var(--family-border); border-radius:14px; overflow:hidden; }
.activity-item { display:flex; align-items:center; gap:12px; padding:14px 16px; color:inherit; text-decoration:none; border-bottom:1px solid #efefef; }
.activity-item:last-child { border-bottom:0; }
.activity-item:hover { background:#fafafa; }
.activity-item.unread { background:#f4f9ff; }
.activity-copy { min-width:0; flex:1; }
.activity-copy small { color:var(--family-muted); }
.activity-comment { color:#555; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.activity-arrow { color:#bbb; font-size:.8rem; }
.admin-shell { max-width:1050px; margin:0 auto; }
.admin-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; margin-bottom:22px; }
.admin-card h2 { font-size:1.15rem; font-weight:800; margin:0 0 16px; }
.invite-created { background:#edf8f0; border:1px solid #b9dec2; border-radius:14px; padding:16px; margin-bottom:20px; }
.auth-shell { min-height:calc(100vh - 180px); display:grid; place-items:center; padding:24px 0; }
.auth-card { width:min(100%,430px); background:#fff; border:1px solid var(--family-border); border-radius:18px; padding:28px; }
.auth-brand { text-align:center; margin-bottom:24px; }
.auth-brand > i { font-size:2.1rem; margin-bottom:10px; }
.auth-brand h1 { font-size:1.7rem; font-weight:800; margin:0; }
.auth-brand p { color:var(--family-muted); margin:5px 0 0; }
.auth-note { color:var(--family-muted); font-size:.82rem; text-align:center; margin:18px 0 0; }

@media(max-width:768px){
    .comment-delete{opacity:1}
    .settings-card,.admin-card,.auth-card{border-radius:0;margin-left:-12px;margin-right:-12px;border-left:0;border-right:0}
    .avatar-editor{align-items:flex-start}.avatar-editor img{width:78px;height:78px}
    .admin-heading{align-items:flex-start;flex-direction:column}
    .activity-list{border-radius:0;margin-left:-12px;margin-right:-12px;border-left:0;border-right:0}
    .activity-item{padding:12px}
}

/* === Instagram UX & Memories v1.4.0 === */
.post-expand-btn { position:absolute; right:12px; bottom:12px; z-index:4; width:34px; height:34px; border:0; border-radius:50%; background:rgba(0,0,0,.56); color:#fff; display:grid; place-items:center; opacity:0; transition:.15s; }
.post-slide:hover .post-expand-btn { opacity:1; }
.likes-line-btn { display:block; border:0; background:transparent; padding:0; margin:2px 0 7px; color:inherit; text-align:left; }
.likes-line-btn:hover { text-decoration:underline; }
.social-mention { color:#00376b !important; font-weight:600; text-decoration:none !important; }
.social-mention:hover { text-decoration:underline !important; }

.memories-strip { max-width:680px; margin:0 auto 22px; background:#fff; border:1px solid var(--family-border); border-radius:14px; padding:14px 14px 12px; }
.memories-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.memories-head strong { display:block; font-size:.95rem; }
.memories-head span { display:block; color:var(--family-muted); font-size:.76rem; margin-top:1px; }
.memories-row { display:flex; gap:14px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:thin; }
.memory-bubble { flex:0 0 82px; color:inherit; text-decoration:none; text-align:center; }
.memory-ring { width:76px; height:76px; margin:0 auto 6px; padding:3px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#feda75,#d62976 56%,#4f5bd5); }
.memory-ring img, .memory-video { width:70px; height:70px; border-radius:50%; object-fit:cover; border:3px solid #fff; background:#161616; }
.memory-video { color:#fff; display:grid; place-items:center; }
.memory-years { display:block; font-size:.72rem; line-height:1.1; color:#444; }

.feed-loader-wrap { max-width:680px; margin:18px auto 0; text-align:center; }
.feed-load-more { border:1px solid var(--family-border); background:#fff; border-radius:999px; padding:9px 18px; font-weight:700; font-size:.86rem; }
.feed-load-more:hover { background:#f5f5f5; }
.feed-load-more.loading { opacity:.65; pointer-events:none; }
.feed-sentinel { height:24px; }
.feed-end { color:var(--family-muted); font-size:.8rem; padding:14px 0 4px; }

.social-modal[hidden], .media-viewer[hidden] { display:none !important; }
.social-modal { position:fixed; inset:0; z-index:1100; display:grid; place-items:center; padding:20px; }
.social-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.48); backdrop-filter:blur(2px); }
.social-modal-card { position:relative; z-index:1; width:min(92vw,430px); max-height:min(75vh,620px); background:#fff; border-radius:16px; box-shadow:0 20px 80px rgba(0,0,0,.26); overflow:hidden; }
.social-modal-card header { height:52px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid #eee; position:relative; }
.social-modal-card header button { position:absolute; right:10px; width:34px; height:34px; border:0; background:transparent; border-radius:50%; }
.social-modal-card header button:hover { background:#f2f2f2; }
.likes-modal-list { overflow:auto; max-height:calc(min(75vh,620px) - 52px); }
.likes-user { display:flex; align-items:center; gap:11px; padding:11px 14px; color:inherit; text-decoration:none; }
.likes-user:hover { background:#fafafa; }
.likes-user .family-avatar { width:42px; height:42px; }
.likes-user-copy { min-width:0; }
.likes-user-copy strong, .likes-user-copy span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.likes-user-copy span { color:var(--family-muted); font-size:.78rem; }
.likes-empty, .likes-loading { padding:32px 18px; color:var(--family-muted); text-align:center; }

.media-viewer { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; background:#050505; }
.media-viewer-backdrop { position:absolute; inset:0; }
.media-viewer-stage { position:relative; z-index:2; width:min(92vw,1500px); height:min(90vh,1000px); display:grid; place-items:center; }
.media-viewer-stage img, .media-viewer-stage video { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.media-viewer-stage video { width:min(100%,1400px); }
.media-viewer-close, .media-viewer-nav { position:absolute; z-index:4; border:0; color:#fff; background:rgba(25,25,25,.72); display:grid; place-items:center; border-radius:50%; }
.media-viewer-close { top:16px; right:18px; width:42px; height:42px; font-size:1.15rem; }
.media-viewer-nav { top:50%; transform:translateY(-50%); width:44px; height:44px; font-size:1.05rem; }
.media-viewer-nav.prev { left:18px; }
.media-viewer-nav.next { right:18px; }
.media-viewer-count { position:absolute; z-index:4; top:20px; left:50%; transform:translateX(-50%); color:#fff; background:rgba(0,0,0,.55); border-radius:999px; padding:5px 10px; font-size:.78rem; }
body.viewer-open, body.social-modal-open { overflow:hidden; }

.mobile-bottom-nav { display:none; }
.activity-avatar-placeholder { display:grid; place-items:center; }

@media(max-width:768px){
    body { padding-bottom:72px; }
    .app-container { padding-bottom:28px; }
    .mobile-bottom-nav { position:fixed; left:0; right:0; bottom:0; z-index:1050; height:64px; background:rgba(255,255,255,.97); border-top:1px solid var(--family-border); display:grid; grid-template-columns:repeat(5,1fr); padding-bottom:env(safe-area-inset-bottom); backdrop-filter:blur(16px); }
    .mobile-bottom-nav a { min-width:0; color:#555; text-decoration:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:1.15rem; position:relative; }
    .mobile-bottom-nav a > span:last-child { font-size:.62rem; font-weight:600; line-height:1; }
    .mobile-bottom-nav a.active { color:#111; }
    .mobile-bottom-nav .mobile-create i { font-size:1.45rem; }
    .mobile-avatar-wrap { width:25px; height:25px; position:relative; display:block; }
    .mobile-avatar-wrap img { width:25px; height:25px; border-radius:50%; object-fit:cover; border:1px solid #bbb; display:block; }
    .mobile-avatar-wrap b { position:absolute; right:-8px; top:-6px; min-width:16px; height:16px; border-radius:9px; padding:0 3px; line-height:16px; text-align:center; background:#ed4956; color:#fff; font-size:.58rem; border:2px solid #fff; box-sizing:content-box; }
    .memories-strip { border-radius:0; margin-left:-12px; margin-right:-12px; border-left:0; border-right:0; padding-left:12px; padding-right:12px; }
    .memory-bubble { flex-basis:76px; }
    .memory-ring { width:68px; height:68px; }
    .memory-ring img, .memory-video { width:62px; height:62px; }
    .post-expand-btn { opacity:1; width:32px; height:32px; bottom:10px; right:10px; }
    .feed-load-more { width:100%; max-width:260px; }
    .social-modal { padding:0; align-items:end; }
    .social-modal-card { width:100%; max-height:72vh; border-radius:18px 18px 0 0; }
    .media-viewer-stage { width:100vw; height:100vh; padding:52px 0 54px; }
    .media-viewer-nav { display:none; }
    .media-viewer-close { top:10px; right:10px; }
    .media-viewer-count { top:15px; }
}

/* === Stories, mentions & high-quality viewer v1.5.0 === */
.stories-strip { max-width:680px; margin:0 auto 18px; background:#fff; border:1px solid var(--family-border); border-radius:14px; padding:12px 12px 10px; }
.stories-row { display:flex; gap:14px; overflow-x:auto; padding:2px 2px 5px; scrollbar-width:thin; }
.story-bubble { flex:0 0 78px; color:inherit; text-decoration:none; text-align:center; }
.story-ring { width:70px; height:70px; margin:0 auto 6px; border-radius:50%; padding:3px; display:grid; place-items:center; background:#d8d8d8; }
.story-ring.unseen { background:linear-gradient(135deg,#feda75,#d62976 56%,#4f5bd5); }
.story-ring.seen { background:#cfcfcf; }
.story-ring.add { background:#ececec; }
.story-ring > img, .story-avatar-wrap { width:64px; height:64px; border-radius:50%; border:3px solid #fff; object-fit:cover; background:#eee; position:relative; display:block; }
.story-avatar-wrap img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.story-avatar-wrap b { position:absolute; right:-2px; bottom:-2px; width:22px; height:22px; border-radius:50%; background:#0095f6; color:#fff; border:2px solid #fff; display:grid; place-items:center; font-size:.62rem; }
.story-label { display:block; font-size:.69rem; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-own-actions { display:flex; flex-wrap:wrap; gap:8px; }

.mention-autocomplete { position:fixed; z-index:1800; background:#fff; border:1px solid #d9d9d9; border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,.16); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; max-height:min(360px, calc(100dvh - 16px)); }
.mention-autocomplete.open-above { box-shadow:0 -12px 34px rgba(0,0,0,.16); }
.mention-autocomplete[hidden] { display:none !important; }
.mention-option { width:100%; border:0; background:#fff; display:flex; align-items:center; gap:10px; padding:9px 11px; text-align:left; }
.mention-option:hover, .mention-option.active { background:#f4f4f4; }
.mention-option img { width:38px; height:38px; border-radius:50%; object-fit:cover; background:#ddd; flex:0 0 auto; }
.mention-option span { min-width:0; display:block; }
.mention-option strong, .mention-option small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mention-option strong { font-size:.86rem; }
.mention-option small { color:var(--family-muted); font-size:.73rem; }

/* Feed uses a dedicated high-quality WebP derivative; the 4K display is reserved for the viewer. */
.post-slide img { image-rendering:auto; }

/* Viewer: always fit inside the actual viewport first, then zoom on demand. */
.media-viewer { overflow:hidden; touch-action:none; }
.media-viewer-stage { position:absolute; z-index:2; inset:58px 66px 46px; width:auto; height:auto; min-width:0; min-height:0; overflow:hidden; display:grid; place-items:center; touch-action:none; }
.media-viewer-stage img, .media-viewer-stage video { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; user-select:none; -webkit-user-drag:none; }
.media-viewer-stage img { transform-origin:center center; transition:transform .08s ease-out; cursor:zoom-in; will-change:transform; }
.media-viewer-stage img.zoomed { cursor:grab; }
.media-viewer-stage img.zoomed:active { cursor:grabbing; }
.media-viewer-tools { position:absolute; z-index:5; left:50%; bottom:10px; transform:translateX(-50%); display:flex; align-items:center; gap:4px; padding:5px; background:rgba(25,25,25,.78); border:1px solid rgba(255,255,255,.12); border-radius:12px; backdrop-filter:blur(8px); }
.media-viewer-tools button, .media-viewer-tools a { min-width:34px; height:32px; padding:0 9px; border:0; border-radius:8px; background:transparent; color:#fff; text-decoration:none; display:grid; place-items:center; font-size:.75rem; }
.media-viewer-tools button:hover, .media-viewer-tools a:hover, .media-viewer-tools button.active { background:rgba(255,255,255,.14); }
.media-viewer-tools.video-mode button { display:none; }
.media-viewer-count { top:14px; }

.story-compose-card { max-width:620px; margin:0 auto; }
.story-upload-drop { min-height:230px; }
.story-compose-preview { grid-template-columns:1fr; }
.story-preview-item { aspect-ratio:9/16; max-height:560px; margin:0 auto; width:min(100%,320px); }
.story-preview-item img, .story-preview-item video { object-fit:contain; background:#111; }

.story-archive-shell { max-width:980px; margin:0 auto; }
.story-archive-heading { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:20px; }
.story-archive-heading h1 { font-size:1.65rem; font-weight:800; margin:0; }
.story-archive-heading p { color:var(--family-muted); margin:4px 0 0; }
.story-archive-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.story-archive-card { color:inherit; text-decoration:none; background:#fff; border:1px solid var(--family-border); border-radius:12px; overflow:hidden; }
.story-archive-media { position:relative; aspect-ratio:9/16; background:#111; }
.story-archive-media img, .story-archive-media video { width:100%; height:100%; object-fit:cover; }
.story-archive-meta { display:flex; justify-content:space-between; gap:8px; padding:9px 10px; font-size:.78rem; }
.story-archive-meta span { color:var(--family-muted); }

.story-viewer-body { margin:0; background:#050505; overflow:hidden; color:#fff; }
.story-viewer { position:fixed; inset:0; background:#050505; display:grid; place-items:center; overflow:hidden; }
.story-progress { position:absolute; z-index:20; top:max(10px,env(safe-area-inset-top)); left:18px; right:18px; display:flex; gap:4px; }
.story-progress-segment { height:3px; flex:1; background:rgba(255,255,255,.28); border-radius:4px; overflow:hidden; }
.story-progress-segment i { display:block; width:0; height:100%; background:#fff; border-radius:4px; }
.story-progress-segment i.done { width:100%; }
.story-viewer-header { position:absolute; z-index:18; top:25px; left:18px; right:18px; height:54px; display:flex; justify-content:space-between; align-items:center; gap:12px; pointer-events:none; }
.story-owner-link { pointer-events:auto; display:flex; align-items:center; gap:9px; color:#fff; text-decoration:none; text-shadow:0 1px 4px #000; }
.story-owner-link img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.65); }
.story-owner-link strong, .story-owner-link small { display:block; line-height:1.1; }
.story-owner-link strong { font-size:.86rem; }
.story-owner-link small { opacity:.8; font-size:.68rem; margin-top:2px; }
.story-viewer-header-actions { pointer-events:auto; display:flex; align-items:center; gap:6px; }
.story-viewer-header-actions button, .story-viewer-header-actions a { height:36px; min-width:36px; padding:0 9px; border:0; border-radius:18px; color:#fff; background:rgba(0,0,0,.42); text-decoration:none; display:flex; align-items:center; justify-content:center; gap:5px; }
.story-stage { position:absolute; inset:0; display:grid; place-items:center; background:#000; }
.story-media-host { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; }
.story-media-host img, .story-media-host video { max-width:100vw; max-height:100dvh; width:auto; height:auto; object-fit:contain; }
.story-hit { position:absolute; z-index:8; top:80px; bottom:0; width:38%; border:0; background:transparent; }
.story-hit.prev { left:0; }
.story-hit.next { right:0; }
.story-overlay-copy { position:absolute; z-index:12; left:50%; bottom:max(40px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(88vw,680px); text-align:center; pointer-events:none; text-shadow:0 2px 8px #000; }
.story-caption { display:inline-block; max-width:100%; background:rgba(0,0,0,.42); border-radius:12px; padding:8px 11px; font-size:1rem; line-height:1.35; }
.story-location { margin:0 auto 8px; display:table; background:rgba(0,0,0,.42); border-radius:999px; padding:5px 9px; font-size:.78rem; }
.story-mention { color:#fff; font-weight:800; }

@media(max-width:768px){
    .stories-strip { border-radius:0; margin-left:-12px; margin-right:-12px; border-left:0; border-right:0; padding-left:12px; padding-right:12px; }
    .story-bubble { flex-basis:72px; }
    .story-ring { width:66px; height:66px; }
    .story-ring > img, .story-avatar-wrap { width:60px; height:60px; }
    .mention-autocomplete { max-width:calc(100vw - 16px); }
    .media-viewer-stage { inset:50px 0 58px; padding:0; width:auto; height:auto; }
    .media-viewer-stage img, .media-viewer-stage video { max-width:100vw; max-height:calc(100dvh - 108px); }
    .media-viewer-tools { bottom:max(8px,env(safe-area-inset-bottom)); width:max-content; max-width:94vw; }
    .media-viewer-tools button, .media-viewer-tools a { min-width:32px; height:32px; padding:0 7px; }
    .story-archive-heading { align-items:flex-start; flex-direction:column; }
    .story-archive-grid { grid-template-columns:repeat(3,1fr); gap:5px; }
    .story-archive-card { border-radius:6px; }
    .story-archive-meta { padding:6px; font-size:.68rem; }
    .story-progress { left:8px; right:8px; top:max(8px,env(safe-area-inset-top)); }
    .story-viewer-header { left:10px; right:10px; top:20px; }
    .story-media-host img, .story-media-host video { max-width:100vw; max-height:100dvh; }
    .story-overlay-copy { bottom:max(28px,env(safe-area-inset-bottom)); width:92vw; }
}

/* === Live activity & version UI v1.5.2 === */
:root {
    --family-accent:#198754;
    --family-accent-soft:#eaf7ef;
    --family-accent-border:#b9dfc8;
}

.notification-badge[hidden], .mobile-avatar-wrap b[hidden] { display:none !important; }
.notification-live-pulse { animation:familyNotificationPulse .7s ease 2; }
@keyframes familyNotificationPulse {
    0%,100% { transform:scale(1); }
    45% { transform:scale(1.16); }
}
.family-live-notification {
    position:fixed; z-index:1900; top:78px; right:18px; display:flex; align-items:center; gap:9px;
    padding:10px 13px; border:1px solid var(--family-accent-border); border-radius:12px;
    background:#fff; color:#1d2b22; box-shadow:0 12px 36px rgba(0,0,0,.14);
    font-size:.84rem; font-weight:700; opacity:0; transform:translateY(-8px); pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
}
.family-live-notification i { color:var(--family-accent); }
.family-live-notification.show { opacity:1; transform:translateY(0); }

.family-version-card {
    margin:34px auto 8px; max-width:680px; position:relative; overflow:hidden;
    display:flex; align-items:center; gap:13px; padding:14px 16px;
    background:linear-gradient(135deg,#fff 0%,var(--family-accent-soft) 100%);
    border:1px solid var(--family-accent-border); border-radius:14px;
}
.family-version-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--family-accent); }
.family-version-icon { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:0 0 auto; background:var(--family-accent); color:#fff; font-size:1.08rem; }
.family-version-copy { min-width:0; }
.family-version-product { font-size:.82rem; font-weight:800; line-height:1.2; }
.family-version-product span { color:#657068; font-weight:600; }
.family-version-line { margin-top:4px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:.8rem; }
.family-version-line strong { color:var(--family-accent); }
.family-version-status { display:inline-flex; align-items:center; min-height:20px; padding:2px 7px; border-radius:999px; background:var(--family-accent); color:#fff; font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.3px; }
.family-version-release { margin-top:3px; color:#657068; font-size:.72rem; }

@media(max-width:768px) {
    .family-live-notification { top:12px; left:12px; right:12px; justify-content:center; }
    .family-version-card { margin:26px 0 6px; border-radius:12px; padding:12px 13px; }
    .family-version-product span { display:none; }
}

/* === Release history / changelog v1.5.3 === */
.feed-version-link {
    width:max-content; margin-top:7px; display:inline-flex; align-items:center; gap:6px;
    color:var(--family-accent); text-decoration:none; font-size:.76rem; font-weight:800;
    letter-spacing:.01em;
}
.feed-version-link:hover { color:#116a40; }
.feed-version-link i { font-size:.66rem; transition:transform .16s ease; }
.feed-version-link:hover i { transform:translateX(2px); }
.feed-version-dot { width:7px; height:7px; border-radius:50%; background:var(--family-accent); box-shadow:0 0 0 3px var(--family-accent-soft); }
.family-version-card-link { color:inherit; text-decoration:none; transition:transform .16s ease, box-shadow .16s ease; }
.family-version-card-link:hover { color:inherit; transform:translateY(-1px); box-shadow:0 10px 26px rgba(25,135,84,.10); }
.family-version-release i { margin-left:4px; font-size:.64rem; color:var(--family-accent); }

.release-page { max-width:1120px; margin:0 auto; padding:34px 0 72px; }
.release-hero { max-width:930px; margin:0 auto 22px; padding:0 34px 4px; }
.release-back { display:inline-flex; align-items:center; gap:7px; margin-bottom:36px; color:#657068; text-decoration:none; font-size:.82rem; font-weight:700; }
.release-back:hover { color:var(--family-accent); }
.release-eyebrow { color:#7d897f; font-size:.72rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.release-hero h1 { margin:13px 0 10px; color:#101810; font-size:clamp(2.25rem,5vw,4rem); font-weight:900; line-height:.98; letter-spacing:-.045em; }
.release-hero > p { max-width:730px; margin:0; color:#667066; font-size:1rem; line-height:1.65; }
.release-current-meta { margin-top:18px; display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid #dbe4dc; border-radius:999px; background:#fff; color:#677168; font-size:.76rem; }
.release-current-meta strong { color:var(--family-accent); }
.release-current-dot { width:8px; height:8px; border-radius:50%; background:#86d72f; box-shadow:0 0 0 4px rgba(134,215,47,.16); }

.release-timeline { position:relative; max-width:960px; margin:0 auto; padding:16px 0 0 54px; }
.release-timeline::before { content:""; position:absolute; left:15px; top:0; bottom:0; width:1px; background:#d7ded7; }
.release-entry { position:relative; margin:0 0 28px; }
.release-node { position:absolute; left:-45px; top:42px; width:16px; height:16px; border-radius:50%; background:#c8d0c9; border:4px solid #f6f8f4; box-shadow:0 0 0 1px #c8d0c9; }
.release-entry.current .release-node { background:#9bea35; box-shadow:0 0 0 1px #9bea35; }
.release-card { padding:27px 32px 29px; border:1px solid #dfe4df; border-radius:20px; background:#fff; box-shadow:0 10px 28px rgba(20,40,22,.045); }
.release-entry.current .release-card { border-color:#152015; background:#101a10; color:#fff; box-shadow:0 18px 44px rgba(12,30,14,.12); }
.release-card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; }
.release-kicker { color:var(--family-accent); font-size:.7rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.release-entry.current .release-kicker { color:#a1ed41; }
.release-card h2 { max-width:760px; margin:8px 0 0; color:#111811; font-size:clamp(1.25rem,2.2vw,1.65rem); font-weight:900; line-height:1.17; letter-spacing:-.02em; }
.release-entry.current .release-card h2 { color:#fff; }
.release-date { flex:0 0 auto; padding:6px 11px; border-radius:999px; background:#f0f4ef; color:#667067; font-size:.68rem; font-weight:800; white-space:nowrap; }
.release-entry.current .release-date { background:#263226; color:#e6eee6; }
.release-name-row { margin-top:13px; display:flex; align-items:center; gap:8px; color:#69746a; font-size:.78rem; font-weight:700; }
.release-entry.current .release-name-row { color:#b9c5b9; }
.release-name-row b { display:inline-flex; align-items:center; min-height:20px; padding:2px 8px; border-radius:999px; background:var(--family-accent); color:#fff; font-size:.6rem; text-transform:uppercase; letter-spacing:.04em; }
.release-name-row b.archive { background:#edf1ed; color:#7b857c; }
.release-change-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:34px; row-gap:12px; margin:23px 0 0; padding:20px 0 0; border-top:1px solid #e9ece9; list-style:none; }
.release-entry.current .release-change-list { border-color:#2a362a; }
.release-change-list li { display:flex; gap:9px; align-items:flex-start; color:#556057; font-size:.79rem; line-height:1.55; }
.release-entry.current .release-change-list li { color:#d4ddd4; }
.release-change-list i { margin-top:4px; color:#8edc2c; font-size:.72rem; }

body:has(.release-page) { background:#f6f8f4; }

@media(max-width:768px) {
    .feed-version-link { margin-top:4px; font-size:.72rem; }
    .release-page { padding:18px 0 92px; }
    .release-hero { padding:0 6px; }
    .release-back { margin-bottom:26px; }
    .release-hero h1 { font-size:2.55rem; }
    .release-hero > p { font-size:.9rem; }
    .release-current-meta { align-items:flex-start; border-radius:12px; }
    .release-timeline { padding-left:27px; }
    .release-timeline::before { left:5px; }
    .release-node { left:-28px; top:32px; width:12px; height:12px; border-width:3px; }
    .release-card { padding:20px 18px 22px; border-radius:16px; }
    .release-card-top { display:block; }
    .release-date { display:inline-flex; margin-top:12px; }
    .release-change-list { grid-template-columns:1fr; gap:10px; margin-top:18px; padding-top:17px; }
}

/* === Capture date & family memories v1.6.0 === */
.post-event-date { color:#6f7a72; }
.post-geo-link { color:#647067; text-decoration:none; }
.post-geo-link:hover { color:var(--family-accent); text-decoration:underline; }
.compose-card input[type="date"] { min-height:44px; }
.memory-date-source { color:#6d776f; font-size:.7rem; }

/* === Family cloud / library / people v1.7.0 === */
.library-shell,.people-shell,.albums-shell,.person-profile-shell,.search-page-shell { max-width:1120px; margin:0 auto; }
.library-hero,.people-hero,.albums-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin:14px 0 22px; }
.library-hero h1,.people-hero h1,.albums-hero h1,.library-compose h1,.person-form-shell h1,.album-form-shell h1,.media-detail-panel h1,.album-view-head h1 { margin:6px 0 8px; font-size:clamp(2rem,4vw,3rem); font-weight:900; letter-spacing:-.035em; }
.library-hero p,.people-hero p,.albums-hero p,.library-compose>p,.person-form-shell>p,.album-form-shell>p { max-width:760px; color:#69736b; line-height:1.6; margin:0; }
.library-eyebrow { color:var(--family-accent,#198754); font-size:.7rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.library-upload-btn { flex:0 0 auto; border-radius:12px; }
.library-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
.library-stats>div { padding:16px 18px; border:1px solid #e1e6e2; border-radius:16px; background:#fff; }
.library-stats strong { display:block; font-size:1.35rem; font-weight:900; }
.library-stats span { color:#7a837c; font-size:.76rem; }
.library-filters { display:grid; grid-template-columns:minmax(220px,1.7fr) repeat(4,minmax(120px,.75fr)) auto auto; gap:8px; padding:11px; background:#fff; border:1px solid #e1e5e1; border-radius:16px; margin-bottom:18px; }
.library-search,.people-search,.search-page-form { display:flex; align-items:center; gap:8px; border:1px solid #dfe4df; border-radius:10px; background:#f7f8f7; padding:0 11px; }
.library-search input,.people-search input,.search-page-form input { width:100%; min-width:0; border:0; outline:0; background:transparent; min-height:38px; }
.library-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; }
.library-tile { position:relative; display:block; aspect-ratio:1/1; overflow:hidden; background:#111; border-radius:5px; color:#fff; }
.library-tile img,.library-tile video { width:100%; height:100%; object-fit:cover; display:block; transition:transform .18s ease; }
.library-tile:hover img,.library-tile:hover video { transform:scale(1.015); }
.library-video-mark { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; text-shadow:0 2px 12px #000; font-size:1.25rem; }
.library-tile-meta { position:absolute; left:6px; right:6px; bottom:6px; display:flex; justify-content:flex-end; gap:5px; }
.library-tile-meta b { padding:3px 6px; border-radius:999px; background:rgba(0,0,0,.6); font-size:.62rem; }
.library-empty { margin:26px 0; min-height:320px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border:1px dashed #ccd4cd; border-radius:18px; background:#fff; padding:30px; }
.library-empty>i { font-size:2.5rem; margin-bottom:14px; color:#8b958c; }
.library-empty h2 { font-weight:900; }
.library-empty p { color:#778078; max-width:560px; }
.library-pagination { display:flex; justify-content:center; align-items:center; gap:14px; margin:24px 0; color:#6e776f; }
.library-compose,.person-form-shell,.album-form-shell,.album-delete-shell { max-width:760px; margin:0 auto; padding:12px 0 60px; }
.library-back { display:inline-flex; gap:7px; align-items:center; color:#687269; text-decoration:none; font-size:.82rem; font-weight:700; margin:8px 0 18px; }
.library-back:hover { color:var(--family-accent,#198754); }
.library-upload-form { margin-top:22px; }
.library-dropzone { min-height:280px; border:2px dashed #cbd4cc; border-radius:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; background:#fff; transition:.15s ease; }
.library-dropzone:hover { border-color:var(--family-accent,#198754); background:#fbfefb; }
.library-dropzone i { font-size:2.7rem; color:var(--family-accent,#198754); }
.library-dropzone strong { font-size:1.25rem; }
.library-dropzone span,.library-file-summary { color:#778078; font-size:.84rem; }
.library-dropzone input { position:absolute; width:1px; height:1px; opacity:0; }
.library-file-summary { margin:10px 0 16px; }
.media-detail-shell { max-width:1220px; margin:0 auto; }
.media-detail-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(330px,.75fr); gap:24px; }
.media-detail-preview { min-height:600px; display:flex; align-items:center; justify-content:center; background:#0e0e0e; border-radius:18px; overflow:hidden; }
.media-detail-preview img,.media-detail-preview video { max-width:100%; max-height:78vh; object-fit:contain; }
.media-detail-panel { padding:8px 0; }
.media-detail-panel h1 { font-size:1.5rem; overflow-wrap:anywhere; }
.media-detail-caption { color:#59635b; }
.media-metadata { border-top:1px solid #e4e8e4; border-bottom:1px solid #e4e8e4; padding:10px 0; margin:14px 0; }
.media-metadata div { display:grid; grid-template-columns:110px 1fr; gap:12px; padding:5px 0; font-size:.82rem; }
.media-metadata dt { color:#7a837c; font-weight:600; }.media-metadata dd { margin:0; font-weight:700; overflow-wrap:anywhere; }
.media-detail-section { margin-top:20px; padding-top:18px; border-top:1px solid #e5e8e5; }
.media-detail-section h2 { font-size:.92rem; font-weight:900; margin-bottom:10px; }
.people-check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; max-height:260px; overflow:auto; }
.people-check-grid label { display:flex; align-items:center; gap:8px; border:1px solid #e2e6e2; border-radius:10px; padding:8px 10px; background:#fff; font-size:.82rem; cursor:pointer; }
.people-check-grid label:has(input:checked) { border-color:#99c9aa; background:#f0f8f2; }
.people-check-grid input { accent-color:var(--family-accent,#198754); }
.attached-albums { display:grid; gap:6px; margin-bottom:9px; }
.attached-albums>div { display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:center; padding:8px 9px; border-radius:10px; background:#f5f7f5; }
.attached-albums a { color:#202820; text-decoration:none; font-weight:800; font-size:.82rem; }.attached-albums small { grid-column:1; color:#7d857e; font-size:.68rem; }.attached-albums form { grid-column:2; grid-row:1/3; }.attached-albums button { width:27px; height:27px; border:0; border-radius:50%; background:#fff; }
.people-search { max-width:600px; margin:0 0 22px; }.people-search button,.search-page-form button { margin-right:-7px; }
.people-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.person-card { display:flex; gap:13px; align-items:center; padding:15px; border:1px solid #e0e5e0; background:#fff; border-radius:16px; color:#171d18; text-decoration:none; transition:.15s ease; }
.person-card:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(20,40,25,.06); color:#171d18; }
.person-card img,.person-initial { width:66px; height:66px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.person-initial,.person-profile-initial { display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#172019,#647568); font-size:1.45rem; font-weight:900; }
.person-card h2 { margin:0; font-size:1rem; font-weight:900; }.person-card p { margin:2px 0; color:#6d766e; font-size:.78rem; }.person-card small { color:#7d857e; font-size:.7rem; }
.person-form { display:grid; gap:16px; margin-top:20px; }.person-form>label,.album-smart-form>label { display:grid; gap:6px; font-size:.82rem; font-weight:800; }.person-form label>span,.album-smart-form label>span { color:#838b84; font-weight:500; }.person-date-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.person-date-row label { display:grid; gap:6px; font-size:.82rem; font-weight:800; }
.person-profile-head { display:flex; align-items:center; gap:20px; padding:8px 0 24px; border-bottom:1px solid #e2e7e2; }.person-profile-head>img,.person-profile-initial { width:118px; height:118px; border-radius:50%; object-fit:cover; flex:0 0 auto; }.person-profile-head h1 { font-size:2rem; font-weight:900; margin:5px 0 0; }.person-nickname { color:#6d766e; margin:2px 0; }.person-life-dates { color:#59635a; font-size:.8rem; display:flex; gap:8px; }.person-account-link { display:inline-block; margin-top:7px; color:var(--family-accent,#198754); font-weight:800; text-decoration:none; font-size:.78rem; }.person-notes { max-width:760px; padding:16px 18px; background:#fff; border:1px solid #e3e7e3; border-radius:14px; margin:18px 0; white-space:pre-wrap; }.person-section-title { display:flex; align-items:center; gap:8px; margin:28px 0 12px; font-weight:900; }.person-section-title b { padding:2px 7px; border-radius:999px; background:#eaf4ed; color:#247d48; font-size:.7rem; }
.album-mini-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }.album-mini-grid>a { min-width:0; display:grid; grid-template-columns:54px 1fr; grid-template-rows:auto auto; gap:1px 9px; align-items:center; color:#1b211c; text-decoration:none; border:1px solid #e2e6e2; border-radius:12px; padding:8px; background:#fff; }.album-mini-grid img,.album-mini-grid>a>span { grid-row:1/3; width:54px; height:54px; border-radius:9px; object-fit:cover; background:#161b17; color:#fff; display:grid; place-items:center; }.album-mini-grid strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; }.album-mini-grid small { color:#7b847c; font-size:.66rem; }
.album-collection-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }.album-collection-card { overflow:hidden; border:1px solid #e0e5e1; background:#fff; border-radius:17px; color:#172018; text-decoration:none; transition:.16s ease; }.album-collection-card:hover { color:#172018; transform:translateY(-2px); box-shadow:0 10px 30px rgba(22,45,27,.07); }.album-collection-cover { position:relative; aspect-ratio:16/10; background:#111; }.album-collection-cover img,.album-collection-cover>span { width:100%; height:100%; object-fit:cover; display:grid; place-items:center; color:#fff; font-size:2rem; }.album-visibility { position:absolute; top:9px; right:9px; padding:5px 8px; border-radius:999px; background:rgba(0,0,0,.68); color:#fff; font-size:.6rem; }.album-collection-copy { padding:14px; }.album-collection-copy h2 { font-size:1.05rem; font-weight:900; margin:0 0 4px; }.album-collection-copy p { color:#687269; font-size:.78rem; margin:0 0 10px; height:2.4em; overflow:hidden; }.album-collection-meta { display:flex; gap:10px; flex-wrap:wrap; color:#7b847c; font-size:.67rem; }.album-people-preview { display:block; margin-top:8px; color:#3c5441; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.album-smart-form { display:grid; gap:17px; margin-top:18px; }.album-smart-form fieldset { border:1px solid #e1e6e2; border-radius:15px; padding:15px; background:#fff; }.album-smart-form legend { float:none; width:auto; margin:0 0 3px; font-size:.9rem; font-weight:900; }.album-smart-form fieldset>p { color:#788079; font-size:.76rem; }.album-visibility-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }.album-visibility-options>label { display:block; cursor:pointer; }.album-visibility-options input { position:absolute; opacity:0; }.album-visibility-options span { min-height:84px; display:flex; flex-direction:column; gap:4px; border:1px solid #dfe5df; border-radius:12px; padding:11px; }.album-visibility-options input:checked+span { border-color:#72b487; box-shadow:inset 0 0 0 1px #72b487; background:#f2faf4; }.album-visibility-options b { font-size:.82rem; }.album-visibility-options small { color:#737d75; font-size:.68rem; line-height:1.35; }.album-access-users { margin-top:12px; }.album-access-users>p { font-size:.75rem; font-weight:800; }
.album-view-head { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; margin-bottom:13px; }.album-view-head p { color:#667168; max-width:760px; }.album-view-head small { color:#808880; }.album-view-actions { display:flex; gap:6px; }.album-people-row { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:10px 0 18px; }.album-people-row>span { color:#7b847c; font-size:.72rem; font-weight:800; }.album-people-row a { padding:5px 8px; border-radius:999px; background:#edf6ef; color:#247744; text-decoration:none; font-size:.72rem; font-weight:800; }.album-children { padding:14px 0 22px; }.album-children h2,.album-add-panel h2 { font-size:1rem; font-weight:900; }.album-add-panel { display:grid; grid-template-columns:1fr minmax(320px,.9fr); gap:20px; align-items:center; border:1px solid #e2e6e2; border-radius:16px; background:#fff; padding:15px 17px; margin-bottom:16px; }.album-add-panel p { color:#6e786f; font-size:.78rem; margin:3px 0 0; }.album-add-panel form { display:flex; gap:8px; }.album-bulk-bar { display:flex; gap:7px; align-items:center; margin:8px 0 12px; }.album-bulk-bar #movePanel { display:flex; gap:6px; margin-left:auto; }.album-media-tile { position:relative; }.album-media-check { position:absolute; left:7px; top:7px; z-index:2; width:25px; height:25px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.9); }.album-media-actions { position:absolute; right:6px; top:6px; z-index:2; display:flex; gap:4px; }.album-media-actions button { width:28px; height:28px; border:0; border-radius:50%; background:rgba(255,255,255,.92); color:#222; }.album-media-actions button:hover { background:#fff; }.album-delete-shell { padding-top:40px; }.album-delete-shell h1 { font-weight:900; }
.search-page-shell h1 { font-weight:900; margin-bottom:16px; }.search-page-form { max-width:820px; margin-bottom:28px; }.search-section { margin:26px 0; }.search-section h2 { display:flex; gap:8px; align-items:center; font-size:1rem; font-weight:900; }.search-section h2 span { background:#edf2ed; color:#6c756d; padding:2px 7px; border-radius:999px; font-size:.68rem; }.search-people-row { display:flex; flex-wrap:wrap; gap:8px; }.search-people-row>a { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #e1e5e1; border-radius:12px; color:#1a211b; text-decoration:none; background:#fff; }.search-people-row img,.search-people-row b { width:36px; height:36px; border-radius:50%; object-fit:cover; display:grid; place-items:center; background:#1b231c; color:#fff; }.search-people-row span { display:grid; }.search-people-row strong { font-size:.78rem; }.search-people-row small { font-size:.66rem; color:#7b837c; }

@media(max-width:992px) {
    .library-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .library-filters { grid-template-columns:repeat(3,minmax(0,1fr)); }.library-search { grid-column:1/-1; }
    .people-grid,.album-collection-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.album-mini-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .media-detail-grid { grid-template-columns:1fr; }.media-detail-preview { min-height:420px; }
}
@media(max-width:768px) {
    .library-shell,.people-shell,.albums-shell,.person-profile-shell,.search-page-shell { padding-bottom:68px; }
    .library-hero,.people-hero,.albums-hero,.album-view-head { align-items:stretch; flex-direction:column; gap:13px; }.library-hero .btn,.people-hero .btn,.albums-hero .btn { width:max-content; }
    .library-hero h1,.people-hero h1,.albums-hero h1 { font-size:2rem; }.library-hero p,.people-hero p,.albums-hero p { font-size:.84rem; }
    .library-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }.library-stats>div { padding:12px 13px; }
    .library-filters { grid-template-columns:1fr 1fr; padding:8px; }.library-filters .btn-link { display:none; }
    .library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; }.library-tile { border-radius:2px; }
    .library-dropzone { min-height:240px; }.media-detail-preview { min-height:320px; border-radius:10px; }.media-detail-preview img,.media-detail-preview video { max-height:64vh; }
    .people-check-grid { grid-template-columns:1fr; }.people-grid,.album-collection-grid { grid-template-columns:1fr; }.person-date-row,.album-visibility-options { grid-template-columns:1fr; }
    .person-profile-head { align-items:flex-start; flex-wrap:wrap; }.person-profile-head>img,.person-profile-initial { width:88px; height:88px; }.person-profile-head .ms-auto { width:100%; }
    .album-mini-grid { grid-template-columns:1fr 1fr; }.album-add-panel { grid-template-columns:1fr; }.album-add-panel form { flex-direction:column; }.album-bulk-bar { flex-wrap:wrap; }.album-bulk-bar #movePanel { width:100%; margin:0; }.album-bulk-bar #movePanel select { min-width:0; flex:1; }
}
@media(max-width:430px) {
    .library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.library-filters { grid-template-columns:1fr 1fr; }.library-stats strong { font-size:1.12rem; }.library-stats span { font-size:.68rem; }
    .album-mini-grid { grid-template-columns:1fr; }.media-metadata div { grid-template-columns:95px 1fr; }.person-card { padding:12px; }.person-card img,.person-initial { width:56px; height:56px; }
}

/* v1.7.1 — social-first correction */
.social-albums-shell .albums-hero p { max-width: 720px; }
.shared-with-me { margin-top: 42px; padding-top: 30px; border-top: 1px solid #e5e7eb; }
.shared-with-me-head { margin-bottom: 20px; }
.shared-with-me-head h2 { margin: 4px 0 0; font-weight: 800; }
.shared-with-me > h3 { margin: 26px 0 14px; font-size: 1rem; font-weight: 800; }
.shared-media-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 16px; }
.shared-media-card { display: block; color: inherit; text-decoration: none; border: 1px solid #e4e7e5; border-radius: 16px; overflow: hidden; background: #fff; transition: transform .15s ease, box-shadow .15s ease; }
.shared-media-card:hover { color: inherit; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(16,24,20,.08); }
.shared-media-thumb { aspect-ratio: 1/1; background: #0a0c0b; position: relative; overflow: hidden; }
.shared-media-thumb img,.shared-media-thumb video { width:100%;height:100%;object-fit:cover;display:block; }
.shared-media-thumb > i { position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);color:#fff;font-size:1.6rem; }
.shared-media-card > div:last-child { padding: 11px 12px 13px; display:flex;flex-direction:column;gap:3px; }
.shared-media-card strong { font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shared-media-card small { color:#6b726e; }
.media-access-preview { display:flex;align-items:center;gap:16px;margin:18px 0 22px;padding:14px;border:1px solid #e5e7eb;border-radius:16px;background:#fff; }
.media-access-preview img,.media-access-preview video { width:110px;height:110px;object-fit:cover;border-radius:12px;background:#090b0a; }
.media-access-preview > div { display:flex;flex-direction:column;gap:4px;min-width:0; }
.media-access-preview strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.album-media-actions a { width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(18,24,21,.9);color:#fff;text-decoration:none; }
.album-media-actions a:hover { color:#fff;background:#178a55; }
.shared-media-page { max-width:1100px;margin:0 auto; }
.shared-media-page-card { display:grid;grid-template-columns:minmax(0,1fr) 300px;background:#fff;border:1px solid #e5e7eb;border-radius:20px;overflow:hidden; }
.shared-media-stage { min-height:520px;background:#080a09;display:grid;place-items:center; }
.shared-media-stage img,.shared-media-stage video { max-width:100%;max-height:78vh;object-fit:contain; }
.shared-media-info { padding:28px; }
.shared-media-info h1 { font-size:1.3rem;overflow-wrap:anywhere; }

.repost-btn { gap:5px; }
.repost-btn span { font-size:.75rem;font-weight:700;line-height:1; }
.repost-shell { margin: 0 14px 8px; border:1px solid #dfe4e1; border-radius:16px; overflow:hidden; background:#fbfcfb; }
.repost-author { display:flex;align-items:center;gap:10px;padding:12px 14px;color:inherit;text-decoration:none; }
.repost-author:hover { color:inherit;background:#f5f7f5; }
.repost-author img { width:36px;height:36px;border-radius:50%;object-fit:cover; }
.repost-author span { display:flex;flex-direction:column;line-height:1.15; }
.repost-author small { color:#707772;font-size:.78rem;margin-top:3px; }
.repost-caption { padding:0 14px 12px;white-space:pre-wrap;overflow-wrap:anywhere; }
.repost-carousel { border-top:1px solid #e6e9e7; border-bottom:1px solid #e6e9e7; }
.repost-open { display:flex;align-items:center;justify-content:space-between;padding:11px 14px;color:#166a46;text-decoration:none;font-size:.86rem;font-weight:700; }
.repost-open:hover { background:#f4f8f5;color:#0f5538; }
.repost-unavailable { padding:28px;display:flex;align-items:center;justify-content:center;gap:10px;color:#737a76; }

.search-social-shell { max-width:1100px;margin:0 auto; }
.search-social-head { margin-bottom:28px; }
.search-social-head h1 { font-size:clamp(1.6rem,3vw,2.6rem);font-weight:900;margin:.2rem 0; }
.search-social-head p { color:#69706c; }
.search-section { margin-top:34px; }
.search-section > h2 { margin-bottom:16px;font-weight:850; }

@media (max-width: 767.98px) {
  .shared-media-page-card { grid-template-columns:1fr; }
  .shared-media-stage { min-height:55vh; }
  .shared-media-info { padding:20px; }
  .media-access-preview img,.media-access-preview video { width:84px;height:84px; }
  .repost-shell { margin-left:8px;margin-right:8px; }
}
.repost-grid-mark { position:absolute;top:8px;left:8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.72);color:#fff;font-size:.8rem;z-index:3; }

/* v1.8.0 — social graph + privacy audiences */
.post-visibility { display:inline-flex!important;align-items:center;gap:5px;color:#747b77; }
.post-visibility.close { color:#b5294b; }
.post-visibility.family { color:#18794e; }
.post-visibility.private { color:#555d58; }
.privacy-grid-mark { position:absolute;right:8px;bottom:8px;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.72);color:#fff;font-size:.76rem;z-index:3; }

.audience-picker { margin: 16px 0 4px; padding:16px; border:1px solid #e1e6e3; border-radius:16px; background:#fafcfb; }
.audience-picker>.form-label { font-weight:800;display:flex;align-items:center;gap:7px;margin-bottom:8px; }
.audience-picker>.form-label i { color:#178a55; }
.audience-hint { color:#69716d;font-size:.78rem;margin-top:7px;line-height:1.35;min-height:1.1em; }
.audience-selected-panel { margin-top:13px;padding-top:12px;border-top:1px solid #e4e8e5; }
.audience-selected-title { font-size:.8rem;font-weight:800;margin-bottom:8px;color:#3e4842; }
.audience-contact-list { max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:4px;padding-right:3px; }
.audience-contact-row { display:grid;grid-template-columns:auto 38px minmax(0,1fr);gap:10px;align-items:center;padding:8px 9px;border-radius:11px;cursor:pointer; }
.audience-contact-row:hover { background:#eef5f1; }
.audience-contact-row img { width:38px;height:38px;border-radius:50%;object-fit:cover; }
.audience-contact-row>span { display:flex;flex-direction:column;min-width:0;line-height:1.15; }
.audience-contact-row strong { font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.audience-contact-row small { color:#737a76;font-size:.73rem;margin-top:3px; }
.audience-empty { padding:14px;border-radius:12px;background:#fff;border:1px dashed #cfd8d3;display:flex;align-items:center;gap:9px;color:#626a66;font-size:.82rem;flex-wrap:wrap; }
.audience-empty i { color:#178a55; }.audience-empty a { color:#14794d;font-weight:800; }

.contacts-shell { max-width:1080px;margin:0 auto;padding-bottom:40px; }
.contacts-hero { display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:22px; }
.contacts-hero h1 { margin:.2rem 0 .35rem;font-size:clamp(2rem,4vw,3.4rem);font-weight:950;letter-spacing:-.035em; }
.contacts-hero p { max-width:700px;color:#666e69;margin:0;line-height:1.5; }
.contact-counts { display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end; }
.contact-counts span { white-space:nowrap;padding:7px 10px;border:1px solid #dfe5e1;border-radius:999px;background:#fff;font-size:.76rem;color:#5d665f; }
.contact-counts strong { color:#151a17; }.contact-counts i { color:#178a55; }
.contact-counts .incoming-count { background:#edfff5;border-color:#b7e6ce;color:#116b43; }
.contact-search { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid #dfe5e1;border-radius:16px;background:#fff;padding:8px 9px 8px 14px;margin-bottom:32px;box-shadow:0 5px 18px rgba(19,33,25,.035); }
.contact-search i { color:#777f7a; }.contact-search input { border:0;outline:0;background:transparent;min-width:0;padding:8px 0;font-size:.94rem; }
.contact-search button { border:0;border-radius:11px;background:#171d19;color:#fff;padding:9px 16px;font-weight:800; }
.contact-section { margin:32px 0; }.contact-section.compact { margin-top:25px; }
.contact-section-head { display:flex;align-items:center;gap:10px;margin-bottom:14px; }.contact-section-head h2 { margin:0;font-size:1.2rem;font-weight:900; }
.contact-section-head>span { background:#eaf3ee;color:#176f49;min-width:25px;height:25px;padding:0 8px;border-radius:999px;display:grid;place-items:center;font-size:.72rem;font-weight:900; }
.contact-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px; }
.contact-card { position:relative;border:1px solid #e0e5e2;background:#fff;border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:12px;min-width:0;box-shadow:0 5px 20px rgba(18,30,23,.025); }
.contact-person { display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:0; }
.contact-person:hover { color:inherit; }.contact-person img { width:50px;height:50px;border-radius:50%;object-fit:cover;flex:none; }
.contact-person>span { display:flex;flex-direction:column;min-width:0;line-height:1.14; }.contact-person strong { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.93rem; }
.contact-person small { color:#737a76;margin-top:4px;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.circle-badge { align-self:flex-start;border-radius:999px;padding:4px 9px;font-size:.68rem;font-weight:900;text-transform:uppercase;letter-spacing:.035em;background:#edf1ef;color:#5d6761; }
.circle-badge.family { background:#e7f7ee;color:#167247; }.circle-badge.close { background:#fff0f3;color:#a82447; }
.contact-circle-select { display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.76rem;color:#6c746f; }.contact-circle-select select { max-width:130px; }
.contact-card-menu { border-top:1px solid #edf0ee;padding-top:9px;display:flex;gap:12px;flex-wrap:wrap; }.contact-card-menu button,.contact-text-btn,.profile-mini-action { border:0;background:none;padding:0;color:#606965;font-size:.73rem;font-weight:700; }.contact-card-menu button:hover,.contact-text-btn:hover,.profile-mini-action:hover { color:#151b17;text-decoration:underline; }.contact-card-menu .danger,.profile-mini-action.danger { color:#a43a42; }
.contact-actions,.contact-request-controls { display:flex;gap:7px;align-items:center; }.contact-request-controls select { min-width:105px;flex:1; }.contact-request-controls .btn { white-space:nowrap; }
.request-note,.contact-status { font-size:.78rem;color:#69716d;line-height:1.4; }.contact-status i { color:#178a55;margin-right:4px; }
.contact-list-rows { background:#fff;border:1px solid #e1e6e3;border-radius:16px;overflow:hidden; }.contact-row { display:flex;align-items:center;gap:14px;padding:11px 14px;border-bottom:1px solid #edf0ee; }.contact-row:last-child { border-bottom:0; }.contact-row .contact-person { flex:1; }.contact-row .contact-person img { width:40px;height:40px; }.pending-label { color:#818883;font-size:.74rem; }
.contact-empty { padding:34px;border:1px dashed #ccd6d0;border-radius:18px;text-align:center;color:#69716d;background:#fbfcfb; }.contact-empty>i { font-size:1.8rem;color:#178a55;margin-bottom:10px; }.contact-empty h3 { color:#1b211d;font-size:1rem;font-weight:850; }.contact-empty p { max-width:500px;margin:0 auto;font-size:.82rem; }

.profile-social-actions { margin-top:15px; }.profile-contact-state,.profile-blocked-note { display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:13px;background:#f5f8f6;border:1px solid #e0e6e2;font-size:.8rem; }.profile-contact-state>i { color:#178a55; }.profile-contact-state select { width:auto;min-width:110px; }.profile-blocked-note { background:#fff5f5;border-color:#efdddd;color:#71383c; }

.search-user-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px; }
.search-user-card { display:flex;align-items:center;gap:11px;padding:12px;border:1px solid #e1e6e3;border-radius:15px;background:#fff;color:inherit;text-decoration:none; }.search-user-card:hover { color:inherit;box-shadow:0 8px 22px rgba(18,30,23,.07); }.search-user-card img { width:48px;height:48px;border-radius:50%;object-fit:cover; }.search-user-card>span { display:flex;flex-direction:column;min-width:0; }.search-user-card small { color:#747b77;font-size:.75rem; }.search-user-card em { color:#69716d;font-size:.72rem;font-style:normal;margin-top:4px;line-height:1.3; }

.repost-modal-card { max-width:540px; }.repost-modal-body { padding:16px 18px;display:flex;flex-direction:column;gap:14px; }.repost-modal-body>label { display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:800; }.repost-modal-body>label>span { color:#7b827e;font-weight:400;font-size:.72rem; }.repost-modal-card footer { display:flex;justify-content:flex-end;gap:8px;padding:12px 18px 16px;border-top:1px solid #e9ecea; }.repost-selected { border:1px solid #e1e6e3;border-radius:12px;padding:10px;background:#fafcfb; }.repost-selected-title { font-size:.76rem;font-weight:850;margin-bottom:7px; }.repost-contact-list { max-height:230px;overflow:auto;display:flex;flex-direction:column;gap:3px; }.repost-contact-row { display:grid;grid-template-columns:auto 34px minmax(0,1fr);gap:8px;align-items:center;padding:6px;border-radius:9px;cursor:pointer; }.repost-contact-row:hover { background:#edf4f0; }.repost-contact-row img { width:34px;height:34px;border-radius:50%;object-fit:cover; }.repost-contact-row>span { display:flex;flex-direction:column;line-height:1.1; }.repost-contact-row strong { font-size:.78rem; }.repost-contact-row small { font-size:.68rem;color:#747b77;margin-top:3px; }.repost-contact-empty { font-size:.78rem;color:#69716d;padding:8px; }.repost-contact-empty a { color:#14794d;font-weight:800; }.repost-privacy-note { display:flex;gap:8px;padding:10px;border-radius:11px;background:#edf7f1;color:#3f5d4d;font-size:.72rem;line-height:1.4; }.repost-privacy-note i { color:#178a55;margin-top:2px; }

@media (max-width: 991.98px) {
    .contact-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .contacts-hero { align-items:flex-start;flex-direction:column; }.contact-counts { justify-content:flex-start; }
}
@media (max-width: 767.98px) {
    .contacts-shell { padding-bottom:76px; }.contact-grid { grid-template-columns:1fr; }.contacts-hero h1 { font-size:2rem; }
    .contact-search { grid-template-columns:auto minmax(0,1fr); }.contact-search button { grid-column:1/-1; }
    .contact-row { align-items:flex-start;flex-wrap:wrap; }.contact-row .contact-person { min-width:65%; }.pending-label { margin-left:54px; }
    .audience-picker { padding:13px; }.audience-contact-list { max-height:230px; }
    .profile-contact-state,.profile-blocked-note { align-items:stretch; }.profile-contact-state select { flex:1; }
    .repost-modal-card { width:min(94vw,540px);max-height:88vh;overflow:auto; }
}

/* v1.9.0 — личные сообщения */
.nav-inline-badge { display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;border-radius:999px;background:#178a55;color:#fff;font-size:.62rem;font-weight:900;vertical-align:1px; }
.nav-inline-badge[hidden],[data-message-badge][hidden] { display:none !important; }
.mobile-nav-icon-wrap { position:relative;display:inline-grid;place-items:center; }
.mobile-nav-icon-wrap>b { position:absolute;top:-7px;right:-11px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#178a55;color:#fff;font-size:.58rem;line-height:17px;text-align:center;font-weight:900;border:2px solid #fff; }
.message-live-pulse i { animation:messagePulse .75s ease; }
@keyframes messagePulse { 0%{transform:scale(1)} 35%{transform:scale(1.25)} 100%{transform:scale(1)} }
.family-live-message { position:fixed;right:22px;top:78px;z-index:11000;display:flex;align-items:center;gap:10px;min-width:245px;max-width:min(360px,calc(100vw - 28px));padding:11px 14px;border:1px solid #dce8e1;border-radius:16px;background:rgba(255,255,255,.97);box-shadow:0 16px 45px rgba(17,35,25,.16);opacity:0;transform:translateY(-12px);pointer-events:none;transition:.22s ease;text-align:left;color:#19201c; }
.family-live-message.show { opacity:1;transform:none;pointer-events:auto; }
.family-live-message-icon { width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#e8f7ef;color:#178a55;flex:none; }
.family-live-message>span:last-child { display:flex;flex-direction:column;min-width:0; }
.family-live-message strong { font-size:.84rem; }.family-live-message small { color:#68716c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

.messages-shell { max-width:980px;margin:0 auto;padding-bottom:48px; }
.messages-hero { display:flex;justify-content:space-between;align-items:flex-end;gap:22px;margin-bottom:28px; }
.messages-hero h1 { margin:.2rem 0 .35rem;font-size:clamp(2rem,4vw,3.4rem);font-weight:950;letter-spacing:-.035em; }
.messages-hero p { margin:0;color:#67706b;max-width:680px;line-height:1.5; }
.chat-section-title { display:flex;align-items:center;gap:9px;margin-bottom:12px; }.chat-section-title h2 { font-size:1.08rem;font-weight:900;margin:0; }.chat-section-title>span { color:#78807b;font-size:.74rem; }
.chat-start-section { margin:0 0 30px; }.chat-contact-strip { display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:thin; }
.chat-contact-card { flex:0 0 116px;margin:0; }.chat-contact-card button { width:100%;border:1px solid #e0e6e2;border-radius:17px;background:#fff;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#19201c;box-shadow:0 5px 18px rgba(19,33,25,.025); }
.chat-contact-card button:hover { border-color:#bed9ca;background:#fbfdfc; }.chat-contact-card img { width:58px;height:58px;border-radius:50%;object-fit:cover;margin-bottom:3px; }.chat-contact-card strong,.chat-contact-card small { width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.chat-contact-card strong { font-size:.78rem; }.chat-contact-card small { color:#78807b;font-size:.67rem; }.chat-contact-card .circle-badge { font-size:.59rem;margin-top:4px; }
.conversation-list { border:1px solid #e0e5e2;border-radius:19px;overflow:hidden;background:#fff;box-shadow:0 8px 26px rgba(19,33,25,.035); }.conversation-row { display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid #edf0ee;text-decoration:none;color:#1a211d; }.conversation-row:last-child { border-bottom:0; }.conversation-row:hover { background:#f8fbf9;color:#1a211d; }.conversation-row.unread { background:#f3fbf7; }
.conversation-avatar { width:54px;height:54px;position:relative; }.conversation-avatar img { width:54px;height:54px;border-radius:50%;object-fit:cover; }.conversation-avatar>i { position:absolute;right:-1px;bottom:-1px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#a44248;font-size:.65rem;box-shadow:0 1px 5px rgba(0,0,0,.13); }
.conversation-copy { min-width:0;display:flex;flex-direction:column;gap:5px; }.conversation-top { display:flex;align-items:center;justify-content:space-between;gap:8px; }.conversation-top strong { font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.conversation-top time { flex:none;color:#888f8a;font-size:.66rem; }.conversation-preview { color:#747c77;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.conversation-row.unread .conversation-preview { color:#35423b;font-weight:650; }.conversation-unread { min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:#178a55;color:#fff;display:grid;place-items:center;font-size:.66rem; }
.chat-empty { border:1px dashed #cdd8d2;border-radius:18px;padding:45px 20px;text-align:center;color:#6c756f;background:#fcfdfc; }.chat-empty>i { font-size:2rem;color:#178a55;margin-bottom:10px; }.chat-empty h3 { font-size:1rem;color:#1b211d;font-weight:900; }.chat-empty p { margin:0;font-size:.82rem; }

.chat-shell { max-width:900px;margin:0 auto;border:1px solid #e0e5e2;border-radius:20px;background:#f3f6f4;min-height:calc(100vh - 118px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 10px 35px rgba(17,31,23,.05); }
.chat-header { position:sticky;top:0;z-index:25;display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid #e4e8e5;padding:10px 13px; }.chat-back,.chat-header-actions>a { width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#253029;text-decoration:none; }.chat-back:hover,.chat-header-actions>a:hover { background:#edf3ef;color:#178a55; }.chat-peer { display:flex;align-items:center;gap:9px;color:#1b211d;text-decoration:none;min-width:0; }.chat-peer:hover { color:#1b211d; }.chat-peer img { width:42px;height:42px;border-radius:50%;object-fit:cover; }.chat-peer span { display:flex;flex-direction:column;min-width:0;line-height:1.12; }.chat-peer strong { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.88rem; }.chat-peer small { color:#77807a;font-size:.7rem;margin-top:4px; }
.chat-disabled-note { margin:10px 14px 0;padding:10px 12px;border:1px solid #efd9db;border-radius:12px;background:#fff6f6;color:#7f4247;font-size:.78rem; }
.chat-message-list { flex:1;overflow:auto;padding:20px 17px 18px;display:flex;flex-direction:column;gap:6px;min-height:420px;background:radial-gradient(circle at 20% 20%,rgba(23,138,85,.035),transparent 32%),#f4f7f5; }
.chat-day-empty { margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;color:#7a827d;gap:6px; }.chat-day-empty i { width:55px;height:55px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#178a55;font-size:1.35rem;box-shadow:0 6px 22px rgba(0,0,0,.05); }.chat-day-empty strong { color:#2b342f; }.chat-day-empty span { font-size:.76rem;max-width:330px; }
.chat-message { max-width:min(76%,620px);display:flex;align-items:flex-end;gap:6px;position:relative; }.chat-message.mine { align-self:flex-end;flex-direction:row-reverse; }.chat-message.theirs { align-self:flex-start; }.chat-bubble { min-width:92px;position:relative;padding:9px 11px 6px;border-radius:17px;background:#fff;box-shadow:0 1px 3px rgba(18,31,24,.08);word-break:break-word; }.chat-message.mine .chat-bubble { background:#dff5e9;border-bottom-right-radius:5px; }.chat-message.theirs .chat-bubble { border-bottom-left-radius:5px; }.chat-message-author { color:#167b4e;text-decoration:none;font-size:.7rem;font-weight:850;display:block;margin-bottom:3px; }.chat-message-text { white-space:pre-wrap;line-height:1.38;font-size:.86rem; }
.chat-message-meta { display:flex;justify-content:flex-end;align-items:center;gap:4px;color:#7d8680;margin-top:4px;font-size:.61rem; }.chat-read-state { color:#8a938e; }.chat-read-state.read { color:#178a55; }.chat-deleted-copy { display:flex;align-items:center;gap:6px;color:#858d88;font-style:italic;font-size:.78rem; }
.chat-reply-quote { width:100%;border:0;border-left:3px solid #178a55;border-radius:6px;background:rgba(255,255,255,.55);display:flex;flex-direction:column;text-align:left;padding:5px 7px;margin:0 0 7px;line-height:1.15; }.chat-reply-quote strong { color:#16794c;font-size:.68rem; }.chat-reply-quote span { max-width:280px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#64706a;font-size:.68rem;margin-top:3px; }
.chat-message-actions { opacity:0;display:flex;align-items:center;gap:2px;transition:.15s; }.chat-message:hover .chat-message-actions,.chat-message-actions:focus-within { opacity:1; }.chat-message-actions>button,.chat-react-menu>summary { width:29px;height:29px;border:0;border-radius:50%;display:grid;place-items:center;background:#fff;color:#68716c;box-shadow:0 2px 10px rgba(0,0,0,.07);cursor:pointer;list-style:none;font-size:.68rem; }.chat-react-menu { position:relative; }.chat-react-menu summary::-webkit-details-marker { display:none; }.chat-react-menu>div { position:absolute;z-index:20;bottom:35px;left:0;display:flex;gap:2px;padding:5px;background:#fff;border:1px solid #e3e7e4;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.12); }.chat-message.mine .chat-react-menu>div { left:auto;right:0; }.chat-react-menu>div button { border:0;background:transparent;width:30px;height:30px;border-radius:50%;font-size:1rem; }.chat-react-menu>div button:hover { background:#edf5f0; }
.chat-reactions { display:flex;flex-wrap:wrap;gap:3px;margin-top:6px; }.chat-reaction-chip { display:flex;align-items:center;gap:3px;border:1px solid #e2e7e4;background:#fff;border-radius:999px;padding:2px 6px;font-size:.72rem; }.chat-reaction-chip.mine { border-color:#8fd0ad;background:#effbf5; }.chat-reaction-chip b { font-size:.6rem;color:#69726d; }
.chat-highlight .chat-bubble { animation:chatHighlight 1.2s ease; } @keyframes chatHighlight { 0%,100%{box-shadow:0 1px 3px rgba(18,31,24,.08)} 35%{box-shadow:0 0 0 4px rgba(23,138,85,.2)} }
.chat-attachments { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;margin:3px -4px 4px;max-width:420px; }.chat-attachments.count-1 { grid-template-columns:1fr; }.chat-attachment { position:relative;display:block;overflow:hidden;border-radius:10px;background:#dfe5e1;aspect-ratio:1/1; }.chat-attachment img,.chat-attachment video { width:100%;height:100%;object-fit:cover;display:block; }.chat-attachments.count-1 .chat-attachment { aspect-ratio:auto;max-height:420px; }.chat-attachments.count-1 .chat-attachment img { height:auto;max-height:420px;object-fit:contain;background:#eef1ef; }.chat-attachment.video>span { position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.5rem;text-shadow:0 2px 8px #000; }
.chat-shared-post { margin-top:5px;display:flex;gap:9px;align-items:center;padding:8px;border:1px solid rgba(51,83,65,.13);border-radius:12px;background:rgba(255,255,255,.55);text-decoration:none;color:#1c231f;max-width:360px; }.chat-shared-post:hover { color:#1c231f;background:rgba(255,255,255,.8); }.chat-shared-post>img,.chat-shared-post-media { width:66px;height:66px;border-radius:9px;object-fit:cover;flex:none;background:#dce4df;display:grid;place-items:center; }.chat-shared-post>span { min-width:0;display:flex;flex-direction:column;line-height:1.15; }.chat-shared-post small { color:#178a55;font-size:.63rem;text-transform:uppercase;font-weight:900;letter-spacing:.04em; }.chat-shared-post strong { font-size:.72rem;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.chat-shared-post em { font-style:normal;color:#69726d;font-size:.69rem;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.chat-shared-post.unavailable { color:#747d77;font-size:.73rem; }
.chat-composer { position:sticky;bottom:0;z-index:30;background:rgba(255,255,255,.96);border-top:1px solid #dfe5e1;padding:9px 11px 10px;backdrop-filter:blur(12px); }.chat-compose-row { display:grid;grid-template-columns:38px minmax(0,1fr) 40px;gap:7px;align-items:end; }.chat-attach,.chat-send { width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:0;background:#edf3ef;color:#51605a;cursor:pointer; }.chat-attach input { display:none; }.chat-send { width:40px;height:40px;background:#178a55;color:#fff; }.chat-send:disabled { opacity:.55; }.chat-compose-row textarea { width:100%;resize:none;max-height:140px;border:1px solid #dbe2de;border-radius:20px;background:#f7f9f8;padding:9px 13px;outline:0;line-height:1.35;font-size:.86rem; }.chat-compose-row textarea:focus { border-color:#9bc9af;background:#fff; }
.chat-reply-preview { display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 41px 7px 45px;padding:7px 9px;border-left:3px solid #178a55;background:#f1f7f4;border-radius:7px; }.chat-reply-preview>span { display:flex;flex-direction:column;min-width:0; }.chat-reply-preview strong { color:#16794c;font-size:.7rem; }.chat-reply-preview small { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#66716b;font-size:.68rem;max-width:500px; }.chat-reply-preview button { border:0;background:transparent;color:#66716b; }
.chat-file-preview { display:flex;gap:6px;overflow-x:auto;padding:2px 42px 7px; }.chat-file-chip { flex:0 0 96px;height:54px;border:1px solid #e0e5e2;border-radius:10px;background:#f5f8f6;display:flex;align-items:center;gap:5px;padding:4px;overflow:hidden; }.chat-file-chip img { width:44px;height:44px;border-radius:7px;object-fit:cover; }.chat-file-chip>i { width:44px;text-align:center;color:#178a55; }.chat-file-chip span { font-size:.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.contact-card-menu form { margin:0;display:inline; }.profile-message-form { margin:0; }.profile-message-form .btn { white-space:nowrap; }

/* Отправка публикации в личные сообщения */
.post-share-modal { position:fixed;inset:0;z-index:10850;background:rgba(12,17,14,.55);display:grid;place-items:center;padding:18px;backdrop-filter:blur(4px); }.post-share-modal[hidden] { display:none; }.post-share-card { width:min(520px,100%);max-height:min(680px,88vh);overflow:hidden;background:#fff;border-radius:20px;box-shadow:0 28px 90px rgba(0,0,0,.25);display:flex;flex-direction:column; }.post-share-card header { display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border-bottom:1px solid #e7ebe8; }.post-share-card header strong { font-size:.95rem; }.post-share-card header button { border:0;background:transparent;width:32px;height:32px;border-radius:50%; }.post-share-card header button:hover { background:#f0f3f1; }.post-share-copy { padding:12px 15px;border-bottom:1px solid #edf0ee;display:flex;gap:7px; }.post-share-copy button { flex:1;border:1px solid #dfe5e1;background:#fff;border-radius:11px;padding:8px;font-size:.76rem;font-weight:750; }.post-share-list { overflow:auto;padding:8px; }.post-share-person { width:100%;border:0;background:#fff;border-radius:12px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:9px;align-items:center;padding:8px;text-align:left; }.post-share-person:hover { background:#f2f7f4; }.post-share-person img { width:42px;height:42px;border-radius:50%;object-fit:cover; }.post-share-person>span { display:flex;flex-direction:column;min-width:0; }.post-share-person strong { font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.post-share-person small { color:#79817c;font-size:.68rem; }.post-share-person>i { color:#178a55; }.post-share-empty { padding:30px;text-align:center;color:#727b75;font-size:.8rem; }

@media(max-width:767.98px) {
    .family-live-message { right:12px;top:68px; }
    .messages-shell { padding-bottom:74px; }.messages-hero { align-items:flex-start;flex-direction:column;margin-bottom:20px; }.messages-hero h1 { font-size:2rem; }
    .chat-contact-card { flex-basis:101px; }.chat-contact-card img { width:52px;height:52px; }
    .conversation-row { grid-template-columns:48px minmax(0,1fr) auto;padding:10px 11px; }.conversation-avatar,.conversation-avatar img { width:48px;height:48px; }
    .chat-shell { margin:-12px -12px 0;border:0;border-radius:0;min-height:calc(100dvh - 56px);height:calc(100dvh - 56px);box-shadow:none; }.chat-header { padding:7px 9px; }.chat-message-list { padding:15px 9px 12px;min-height:0; }.chat-message { max-width:86%; }.chat-message-actions { opacity:1; }.chat-message-actions>button,.chat-react-menu>summary { width:27px;height:27px; }.chat-bubble { padding:8px 9px 5px; }.chat-composer { padding-bottom:max(9px,env(safe-area-inset-bottom)); }.chat-reply-preview { margin-left:0;margin-right:0; }.chat-file-preview { padding-left:0;padding-right:0; }
    .chat-attachments { max-width:78vw; }.chat-shared-post { max-width:76vw; }
}