/* =========================
   RESET & GENERAL
========================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: #FFF9ED; color: #2E2E2E; line-height: 1.6; }
html, body { max-width: 100%; overflow-x: clip; }
html { scrollbar-gutter: stable; }
img, video { max-width: 100%; height: auto; }
button:disabled, [aria-disabled="true"] { cursor: wait; opacity: .62; }
.offline-page { min-height: 100dvh; display: grid; place-items: center; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: #FFD43B; }
.offline-card { width: min(100%, 430px); margin: 0; padding: 32px 24px; border-radius: 20px; background: #FFF9ED; text-align: center; box-shadow: 0 12px 35px rgba(0,0,0,.14); }
.offline-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%; background: #FFD43B; color: #2E2E2E; font-size: 32px; font-weight: 900; }
.offline-card h1 { margin-bottom: 8px; font-size: clamp(24px, 7vw, 32px); }
.offline-card p { margin-bottom: 22px; color: #666; }
.offline-card button { min-width: 150px; min-height: 48px; background: #FFD43B; font-weight: 700; }

.install-guide-page { max-width: 760px; margin: 35px auto; padding: 0 20px 120px; }
.install-guide-heading { margin-bottom: 24px; text-align: center; }
.install-guide-heading h1 { margin-bottom: 6px; font-size: clamp(26px, 6vw, 36px); }
.install-guide-heading p { color: #6B6B6B; }
.install-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.install-guide-card { padding: 20px 16px; border: 1px solid #F0E5C4; border-radius: 18px; background: white; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.install-guide-card h2 { margin: 8px 0 17px; font-size: 21px; }
.install-platform-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.install-platform-name { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #806400; }
.install-platform-heading small { padding: 4px 8px; border-radius: 999px; background: #FFF2B8; color: #665000; font-weight: 750; }
.install-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: install-step; }
.install-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; align-items: start; font-size: 14px; line-height: 1.45; }
.install-step-copy { min-width: 0; overflow-wrap: break-word; }
.install-steps li::before { counter-increment: install-step; content: counter(install-step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #FFD54F; color: #2E2E2E; font-weight: 800; }
.install-button-name { color: #775D00; font-weight: 750; }
.pwa-install-banner { display: none; }

/* =========================
   LAYOUT CONTAINERS
========================= */
.main { max-width: 700px; margin: 35px auto; padding: 0 20px; }
main { max-width: 700px; margin: 35px auto; padding: 0 20px; }
.profile-page { max-width: 700px; margin: 35px auto; padding: 0 20px; }
.settings-page { max-width: 600px; margin: 35px auto; padding: 0 20px; }
.post-container { max-width: 700px; margin: 35px auto; padding: 20px; }
.friends-page { max-width: 700px; margin: 35px auto; padding: 0 20px; }

/* =========================
   HEADER
========================= */
.site-header { background: #FFD54F; padding: 18px 32px; box-shadow: 0 2px 10px rgba(0,0,0,.08); position: sticky; top: 0; z-index: 100; }
.site-header nav { display: flex; justify-content: space-between; align-items: center; }
.site-header a { text-decoration: none; color: #3B3B3B; font-size: 18px; font-weight: 600; transition: .2s; }
.site-header a:hover { color: #000; }
.nav-left, .nav-right { display: flex; align-items: center; gap: 20px; }

/* =========================
   FOOTER
========================= */
.site-footer { text-align: center; padding: 30px; color: #777; }
.contact-page { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px 14px; background: #FFF9E8; }
.contact-back { position: fixed; top: 20px; left: 20px; color: #66531A; font-weight: 700; text-decoration: none; }
.contact-card { width: min(620px, 100%); padding: 30px; border: 1px solid #E9DDBD; border-radius: 22px; background: white; box-shadow: 0 16px 44px rgba(77,58,0,.1); }
.contact-eyebrow { color: #9A7400; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.contact-card h1 { margin: 5px 0 8px; }
.contact-affiliates { padding-block: 22px; }
.contact-affiliates h1 { font-size: 22px; }
.contact-affiliate-list { margin-top: 14px; padding: 13px; border-radius: 12px; background: #FFF9E8; color: #8A7850; font-weight: 800; text-align: center; }
.contact-scope { padding: 11px 13px; border-radius: 10px; background: #FFF4CC; font-size: 13px; }
.contact-card form { display: grid; gap: 13px; margin-top: 20px; }
.contact-card label { display: grid; gap: 6px; font-weight: 750; }
.contact-card input, .contact-card select, .contact-card textarea { width: 100%; padding: 10px 11px; border: 1px solid #D9D1BF; border-radius: 10px; background: white; color: inherit; font: inherit; }
.contact-card textarea { resize: vertical; }
.contact-honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form-state { margin: 0; padding: 10px 12px; border-radius: 9px; font-weight: 700; }
.contact-form-state.success { background: #E6F6E9; color: #176B2C; }
.contact-form-state.error { background: #FDE8E8; color: #A51D1D; }
.contact-privacy { display: block; margin-top: 16px; color: #777; line-height: 1.45; }
body.dark-mode .contact-page { background: #202020; }
body.dark-mode .contact-card { background: #2b2b2b; border-color: #484848; }
body.dark-mode .contact-affiliate-list { background: #353535; color: #D9CFAF; }
body.dark-mode .contact-card input, body.dark-mode .contact-card select, body.dark-mode .contact-card textarea { background: #353535; border-color: #555; }
.alert-card:has(.alert-avatar) { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 11px; }
.alert-avatar { width: 42px; height: 42px; }
.alert-card-copy { min-width: 0; }
.profile-footer { margin-top: 50px; padding: 25px 0; display: flex; justify-content: center; gap: 25px; border-top: 1px solid #EFE5CC; }
.profile-footer a { text-decoration: none; color: #777; font-size: 14px; transition: .2s; }
.profile-footer a:hover { color: #D38A00; }

/* =========================
   BOTTOM NAV
========================= */
body.has-bottom-nav { padding-bottom: 110px; }
.bottom-nav { position: fixed; bottom: 30px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; padding: 0 20px; background: transparent; border: none; box-shadow: none; z-index: 999; pointer-events: none; }
.bottom-nav-pill { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px; background: #FFD54F; box-shadow: 0 8px 20px rgba(0,0,0,.18); pointer-events: auto; }
.bottom-nav-item { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #FFF4CC; text-decoration: none; color: #000; transition: .2s; flex-shrink: 0; }
.bottom-nav-item svg { width: 24px; height: 24px; }
.bottom-nav-item.active, .bottom-nav-item:hover { background: rgba(255,255,255,.55); }
.global-friends-shortcut { position: fixed; z-index: 990; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #DFC45F; border-radius: 50%; background: #FFF4CC; color: #5F4C08; text-decoration: none; box-shadow: 0 5px 16px rgba(65,48,0,.16); transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.global-friends-shortcut:hover { background: #FFD54F; box-shadow: 0 7px 20px rgba(65,48,0,.21); transform: translateY(-1px); }
.global-friends-shortcut svg { width: 23px; height: 23px; }
.global-settings-shortcut { position: fixed; z-index: 990; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #DFC45F; border-radius: 50%; background: #FFF4CC; color: #5F4C08; text-decoration: none; box-shadow: 0 5px 16px rgba(65,48,0,.16); transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.global-settings-shortcut:hover { background: #FFD54F; box-shadow: 0 7px 20px rgba(65,48,0,.21); transform: translateY(-1px); }
.global-settings-shortcut svg { width: 23px; height: 23px; }
.profile-shortcut-dock { position: fixed; z-index: 990; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); display: flex; width: fit-content; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; padding: 0; }
.profile-shortcut-dock .global-friends-shortcut, .profile-shortcut-dock .global-leaderboard-shortcut, .profile-shortcut-dock .global-notification-shortcut, .profile-shortcut-dock .global-settings-shortcut { position: relative; inset: auto; }
.profile-shortcut-dock .global-leaderboard-shortcut { order: 1; }
.profile-shortcut-dock .global-notification-shortcut { order: 2; }
.profile-shortcut-dock .global-friends-shortcut { order: 3; }
body:has(.pwa-install-banner) .profile-shortcut-dock { top: calc(54px + env(safe-area-inset-top)); }
.global-friends-badge { position: absolute; top: -5px; right: -5px; display: grid; min-width: 19px; height: 19px; place-items: center; padding: 0 5px; border: 2px solid #FFF; border-radius: 999px; background: #E53935; color: #FFF; font-size: 10px; font-weight: 900; line-height: 1; }
.global-friends-badge[hidden] { display: none; }
body.dark-mode .global-friends-badge { border-color: #222; }
.global-notification-shortcut { position: fixed; z-index: 990; top: max(14px, env(safe-area-inset-top)); right: max(68px, calc(54px + env(safe-area-inset-right))); display: grid; width: 46px; height: 46px; place-items: center; padding: 0; border: 1px solid #DFC45F; border-radius: 50%; background: #FFF4CC; color: #5F4C08; box-shadow: 0 5px 16px rgba(65,48,0,.16); cursor: pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.global-notification-shortcut:hover { background: #FFD54F; box-shadow: 0 7px 20px rgba(65,48,0,.21); transform: translateY(-1px); }
.global-notification-shortcut svg { width: 23px; height: 23px; }
.global-leaderboard-shortcut { position: fixed; z-index: 990; top: max(14px, env(safe-area-inset-top)); right: max(122px, calc(108px + env(safe-area-inset-right))); display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #DFC45F; border-radius: 50%; background: #FFF4CC; color: #5F4C08; text-decoration: none; box-shadow: 0 5px 16px rgba(65,48,0,.16); transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.global-leaderboard-shortcut:hover { background: #FFD54F; box-shadow: 0 7px 20px rgba(65,48,0,.21); transform: translateY(-1px); }
.global-leaderboard-shortcut svg { display: block; width: 23px; height: 23px; }
body.dark-mode .global-leaderboard-shortcut, body.dark-mode .global-notification-shortcut, body.dark-mode .global-settings-shortcut { border-color: #746126; background: #3E3825; color: #F2D76B; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
body.dark-mode .global-leaderboard-shortcut:hover { background: #514826; }
body:has(.pwa-install-banner) .global-leaderboard-shortcut, body:has(.pwa-install-banner) .global-notification-shortcut, body:has(.pwa-install-banner) .global-settings-shortcut { top: calc(54px + env(safe-area-inset-top)); }
body.dark-mode .global-friends-shortcut { border-color: #746126; background: #3E3825; color: #F2D76B; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
body.dark-mode .global-friends-shortcut:hover { background: #514826; }
body:has(.pwa-install-banner) .global-friends-shortcut { top: calc(54px + env(safe-area-inset-top)); }
.global-notification-badge { position: absolute; top: -5px; right: -5px; display: grid; min-width: 19px; height: 19px; place-items: center; padding: 0 5px; border: 2px solid #FFF; border-radius: 999px; background: #E53935; color: #FFF; font-size: 10px; font-weight: 900; line-height: 1; }
.global-notification-badge[hidden] { display: none; }
body.dark-mode .global-notification-badge { border-color: #222; }

/* One visual system for the three persistent top shortcuts and Home's Deske shortcut. */
.app-top-action {
    position: relative;
    display: grid;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    box-sizing: border-box;
    place-items: center;
    padding: 0;
    border: 1px solid #DFC45F;
    border-radius: 50%;
    background: #FFF4CC;
    color: #5F4C08;
    box-shadow: 0 5px 16px rgba(65,48,0,.16);
    font: inherit;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.app-top-action:hover { background: #FFD54F; box-shadow: 0 7px 20px rgba(65,48,0,.21); transform: translateY(-1px); }
.app-top-action:active { transform: scale(.96); }
.app-top-action > svg { display: block; width: 22px; height: 22px; }
.app-top-action:focus-visible { outline: 3px solid rgba(255,212,59,.42); outline-offset: 2px; }
body.dark-mode .app-top-action { border-color: #746126; background: #3E3825; color: #F2D76B; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
body.dark-mode .app-top-action:hover { background: #514826; }

body.notification-hub-open { overflow: hidden; }
.notification-hub-shell { position: fixed; z-index: 2600; inset: 0; }
.notification-hub-shell[hidden] { display: none; }
.notification-hub-backdrop { position: absolute; inset: 0; padding: 0; border: 0; background: rgba(18,16,10,.34); opacity: 0; transition: opacity .22s ease; }
.notification-hub-panel { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0,1fr); width: 100%; height: 100dvh; overflow: hidden; background: #F7F3E8; color: #29271F; box-shadow: -14px 0 38px rgba(0,0,0,.22); transform: translateX(100%); transition: transform .24s cubic-bezier(.22,.74,.24,1); }
.notification-hub-shell.open .notification-hub-backdrop { opacity: 1; }
.notification-hub-shell.open .notification-hub-panel { transform: translateX(0); }
.notification-hub-header { display: flex; min-height: 72px; align-items: center; justify-content: space-between; padding: calc(13px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 13px max(18px,env(safe-area-inset-left)); border-bottom: 1px solid #E7DDBF; background: rgba(255,253,245,.96); }
.notification-hub-header > div { display: grid; gap: 1px; }
.notification-hub-header span { color: #9A7200; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.notification-hub-header h2 { margin: 0; font-size: 24px; }
.notification-hub-header-actions { display: flex!important; align-items: center; gap: 8px; }
.notification-hub-header .notification-hub-read-all { width: auto; min-height: 40px; padding: 8px 12px; border-radius: 12px; font-size: 12px; font-weight: 800; }
.notification-hub-header button { display: grid; width: 42px; height: 42px; place-items: center; padding: 0; border: 1px solid #DFC45F; border-radius: 50%; background: #FFF4CC; color: #5F4C08; cursor: pointer; }
.notification-hub-header button svg { width: 21px; height: 21px; }
.notification-hub-list { width: min(100%,760px); margin: 0 auto; box-sizing: border-box; padding: 10px max(12px,env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.notification-hub-day { margin: 18px 8px 8px; color: #777064; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.notification-hub-item { position: relative; display: grid; width: 100%; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 72px; margin-bottom: 6px; padding: 10px 12px; border: 1px solid #ECE3CC; border-radius: 15px; background: #FFF; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }

@media (max-width: 520px) {
    .notification-hub-header { align-items: flex-start; }
    .notification-hub-header .notification-hub-read-all { max-width: 112px; min-height: 42px; line-height: 1.15; }
    .notification-hub-item { grid-template-columns: 42px minmax(0,1fr); }
    .notification-hub-avatar, .notification-hub-system { width: 42px; height: 42px; }
    .notification-hub-state { grid-column: 2; justify-items: start; }
}
.notification-hub-item.unread { border-color: #E8CE67; background: #FFF9DE; }
.notification-hub-avatar, .notification-hub-system { width: 48px; height: 48px; border-radius: 50%; }
.notification-hub-system { display: grid; place-items: center; background: #FFD54F; color: #4F3D00; }
.notification-hub-system svg { width: 22px; height: 22px; }
.notification-hub-copy { display: grid; min-width: 0; gap: 3px; }
.notification-hub-copy strong { overflow: hidden; font-size: 14px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.notification-hub-copy > span { display: -webkit-box; overflow: hidden; color: #625E54; font-size: 13px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.notification-hub-copy time { color: #969087; font-size: 11px; }
.notification-hub-unread { width: 9px; height: 9px; border-radius: 50%; background: #E53935; box-shadow: 0 0 0 3px rgba(229,57,53,.11); }
.notification-hub-state { display: grid; justify-items: end; gap: 6px; }
.notification-hub-state button { width: auto; padding: 4px 7px; border: 0; border-radius: 8px; background: #EEE6CF; color: #5D543D; font-size: 10px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.notification-hub-empty { display: grid; min-height: 50dvh; place-content: center; justify-items: center; gap: 12px; color: #777064; text-align: center; }
.notification-hub-empty > svg { width: 44px; height: 44px; color: #D29B00; }
body.dark-mode .notification-hub-panel { background: #1F1F1F; color: #F5F1E7; }
body.dark-mode .notification-hub-header { border-color: #474238; background: rgba(37,37,37,.97); }
body.dark-mode .notification-hub-header button { border-color: #746126; background: #3E3825; color: #F2D76B; }
body.dark-mode .notification-hub-day { color: #B9B2A5; }
body.dark-mode .notification-hub-item { border-color: #444038; background: #2B2B2B; }
body.dark-mode .notification-hub-item.unread { border-color: #806C29; background: #37311D; }
body.dark-mode .notification-hub-copy > span { color: #D0CAC0; }
body.dark-mode .notification-hub-state button { background:#494234; color:#F2E5BD; }

/* =========================
   POST CARDS
========================= */
.post-card { position: relative; background: white; border-radius: 15px; padding: 14px; margin-bottom: 14px; border: 1px solid #F0E5C4; box-shadow: 0 5px 14px rgba(0,0,0,.045); transition: .2s; }
.post-card:hover { transform: translateY(-2px); }
.post-card.expanded { margin-bottom: 14px; }
.post-header { display: flex; align-items: center; gap: 9px; min-height: 38px; margin-bottom: 10px; }
.post-header .avatar { width: 38px; height: 38px; margin-right: 0; }
.post-meta { display: flex; flex-direction: column; }
.post-secondary-actions[hidden] { display: none !important; }
.image-viewer-save { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(28,28,28,.72); color: white; backdrop-filter: blur(12px); cursor: pointer; }
.profile-link { text-decoration: none; }
.username { font-size: 15px; font-weight: 700; color: #2F2F2F; }
.username:hover { color: #D38A00; }
.timestamp { font-size: 11px; color: #8B8B8B; }
.post-link { text-decoration: none; }
.post-content { color: #3A3A3A; font-size: 15px; line-height: 1.45; margin-bottom: 10px; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; }
.post-title { margin-bottom: 7px; color: #000; font-size: 19px; }
.divider { height: 1px; background: #EFE5CC; margin: 10px 0; }
.post-image { display: block; width: 100%; height: 260px; margin: 9px 0; border-radius: 11px; object-fit: cover; background: #F3EFDF; }
.post-feed-image-wrap { position: relative; display: grid; width: 100%; height: 260px; margin: 9px 0; gap: 3px; overflow: hidden; border-radius: 11px; background: #F3EFDF; }
.post-feed-image-wrap.image-count-2, .post-feed-image-wrap.image-count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-feed-image-wrap.image-count-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.post-feed-image-wrap.image-count-3 .post-image-tile:first-child { grid-row: 1 / 3; }
.post-image-tile { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.post-feed-image-wrap .post-image { width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: 0; }
.post-inline-carousel { display: block; }
.post-inline-carousel-track { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.post-inline-carousel-track::-webkit-scrollbar { display: none; }
.post-inline-carousel-track .post-image-tile { width: 100%; min-width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.post-inline-gallery-count { position: absolute; z-index: 3; right: 10px; bottom: 10px; padding: 4px 8px; border-radius: 999px; background: rgba(25,25,25,.76); color: white; font-size: 12px; font-weight: 800; pointer-events: none; }
.post-image-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20,20,20,.58); color: white; font-size: 25px; font-weight: 850; }
.feed-skeleton { display: grid; gap: 14px; }
.feed-skeleton > div { height: 190px; border-radius: 18px; background: linear-gradient(100deg,#F4EEDC 20%,#FFF9E9 38%,#F4EEDC 56%); background-size: 220% 100%; animation: bucka-skeleton 1.15s ease-in-out infinite; }
@keyframes bucka-skeleton { to { background-position-x: -220%; } }
body.dark-mode .feed-skeleton > div { background-image: linear-gradient(100deg,#303030 20%,#3B3B3B 38%,#303030 56%); }
.reaction-picker-backdrop, .moment-reaction-backdrop { position: fixed; z-index: 2999; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: default; }
.reaction-picker-backdrop[hidden] { display: none; }
.collectible-reaction-picker { z-index: 3000 !important; }
.moment-reaction-backdrop { z-index: 3; }
.moment-viewer .moment-reaction-backdrop { z-index: 5; }

@media (min-width: 769px) {
    .create-post-page.poll-composer-open { height: 100dvh; min-height: 0; overflow: hidden; }
    .create-post-page.poll-composer-open > .profile-page { height: calc(100dvh - var(--mobile-nav-height, 0px)); min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; }
    .create-post-page.poll-composer-open .create-post-card { max-height: none; overflow: visible; padding-bottom: 40px; }
}
.post-image-count, .post-gallery-count { position: absolute; right: 10px; top: 10px; padding: 4px 8px; border-radius: 999px; background: rgba(25,25,25,.76); color: white; font-size: 12px; font-weight: 800; }
.post-gallery { position: relative; display: grid; place-items: center; width: 100%; margin: 10px 0; overflow: hidden; border-radius: 12px; background: #F3EFDF; }
.post-gallery .post-image { display: block; width: 100%; height: auto; max-height: min(72vh, 820px); margin: 0; object-fit: contain; }
.post-gallery-nav { position: absolute; top: 50%; display: grid; place-items: center; width: 40px; height: 48px; transform: translateY(-50%); border: 0; border-radius: 10px; background: rgba(25,25,25,.62); color: white; cursor: pointer; font-size: 30px; }
.post-gallery-nav.previous { left: 9px; }
.post-gallery-nav.next { right: 9px; }
.post-stats { padding: 15px 0; border-top: 1px solid #EFE5CC; border-bottom: 1px solid #EFE5CC; color: #777; font-size: 14px; }
.post-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 15px; border-top: 1px solid #EFE5CC; }
.like-count { font-size: 14px; font-weight: 600; color: #777; }
.like.liked { background: #ff6b6b; color: white; }

/* =========================
   BUTTONS
========================= */
.post-actions { display: flex; align-items: center; gap: 6px; }
.post-actions > .post-more-button { margin-left: auto; flex-shrink: 0; }
.post-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 34px; padding: 6px 9px; }
.post-action-count { font-size: 12px; font-weight: 750; }
.action-btn.reposted { background: #FFF0B1; color: #806100; }
.repost-count { font-size: 12px; font-weight: 750; }
.repost-attribution { display: flex; align-items: center; gap: 5px; margin: -2px 0 8px; color: #777; font-size: 12px; font-weight: 700; }
.repost-attribution svg { width: 15px; height: 15px; }
.repost-attribution a { color: inherit; }
.repost-commentary { display: block; margin: 2px 0 12px; color: inherit; text-decoration: none; }
.repost-commentary h2 { margin: 0 0 5px; font-size: 20px; }
.repost-commentary p { margin: 0; white-space: pre-wrap; }
.repost-original-card { padding: 12px; border: 1px solid #E7D9AE; border-radius: 14px; background: #FFFDF8; }
.composed-repost .repost-original-card .post-title { font-size: 17px; }
.repost-author-header .post-meta { min-width: 0; flex: 1; }
.repost-author-header .profile-link { overflow-wrap: anywhere; }
.repost-kind { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.repost-kind svg { width: 13px; height: 13px; flex-shrink: 0; }
.composed-repost .repost-original-card { margin-inline: 5px; padding: 10px; border-radius: 12px; }
.composed-repost .repost-original-card .post-header { gap: 7px; min-height: 30px; margin-bottom: 7px; }
.composed-repost .repost-original-card .avatar { width: 30px; height: 30px; margin: 0; }
.composed-repost .repost-original-card .username { font-size: 13px; }
.composed-repost .repost-original-card .post-title { font-size: 16px; }
.composed-repost .repost-original-card .post-content { font-size: 14px; line-height: 1.45; }
.composed-repost .repost-original-card .post-image { max-height: 340px; object-fit: contain; border-radius: 9px; }
.repost-sheet-original { display: grid; gap: 7px; padding: 14px; border: 1px solid #E7D9AE; border-radius: 14px; background: #FFFDF8; }
.repost-sheet-original > span { color: #777; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.repost-sheet-original p { margin: 0; white-space: pre-wrap; }
.repost-sheet-original p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.repost-sheet .content-edit-form textarea { min-height: 110px; max-height: 24dvh; }
.repost-destination-picker { position: relative; }
.repost-destination-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: 13px 48px 13px 16px;
    border: 1px solid #D7C488;
    border-radius: 15px;
    background: linear-gradient(180deg, #FFFDF8, #FFF8E2);
    color: #403A2D;
    font: inherit;
    font-weight: 750;
    box-shadow: 0 4px 12px rgba(84, 62, 0, .09);
    cursor: pointer;
}
.repost-destination-trigger > svg { position: absolute; right: 14px; width: 20px; height: 20px; color: #806100; transition: transform .18s ease; }
.repost-destination-trigger[aria-expanded="true"] > svg { transform: rotate(180deg); }
.repost-destination-trigger:hover { border-color: #CBAE58; background-color: #FFF9E8; }
.repost-destination-trigger:focus-visible { outline: 0; border-color: #C69200; box-shadow: 0 0 0 3px rgba(255, 212, 59, .28); }
.repost-destination-menu { position: absolute; z-index: 20; top: calc(100% + 7px); left: 0; right: 0; max-height: min(310px, 42dvh); padding: 7px; overflow-y: auto; border: 1px solid #E1D4B2; border-radius: 14px; background: #FFFDF8; box-shadow: 0 14px 34px rgba(61,45,0,.18); touch-action: pan-y; }
.repost-destination-menu[hidden] { display: none; }
.repost-destination-option { display: grid; grid-template-columns: 46px minmax(0,1fr) 22px; align-items: center; gap: 11px; width: 100%; min-height: 60px; padding: 7px 10px; border: 0; border-radius: 12px; background: transparent; color: #403A2D; text-align: left; cursor: pointer; }
.repost-destination-option:hover, .repost-destination-option.selected { background: #FFF0B1; }
.repost-destination-option > span:nth-child(2) { display: grid; gap: 2px; }
.repost-destination-option small { display: inline-flex; align-items: center; gap: 3px; color: #8A6A00; font-size: 10px; font-weight: 750; }
.repost-destination-option small svg { width: 11px; height: 11px; }
.repost-destination-option > svg { width: 18px; height: 18px; color: #B48700; opacity: 0; }
.repost-destination-option.selected > svg { opacity: 1; }
.repost-destination-icon { display: grid; width: 42px; height: 42px; place-items: center; overflow: hidden; border-radius: 50%; background: #F3E8C2; color: #725C13; }
.repost-destination-icon img { width: 100%; height: 100%; object-fit: cover; }
.repost-destination-icon svg { width: 19px; height: 19px; }
body.dark-mode .repost-destination-trigger { border-color: #5D553E; background-color: #333; color: #FFF; box-shadow: none; }
body.dark-mode .repost-destination-trigger:hover { border-color: #8D7832; background-color: #393629; }
body.dark-mode .repost-destination-trigger:focus-visible { border-color: #FFD43B; box-shadow: 0 0 0 3px rgba(255,212,59,.18); }
body.dark-mode .repost-destination-menu { border-color: #56503B; background: #2B2B2B; box-shadow: 0 14px 34px rgba(0,0,0,.42); }
body.dark-mode .repost-destination-option { color: #FFF; }
body.dark-mode .repost-destination-option:hover, body.dark-mode .repost-destination-option.selected { background: #494127; }
body.dark-mode .repost-destination-icon { background: #403A29; color: #FFD54F; }
.repost-remove { color: #C84444; background: white; border: 1px solid #E8B5B5; }
.repost-owner-controls { display: inline-flex; gap: 4px; margin-left: auto; }
.repost-owner-controls .post-top-icon { width: 30px; height: 30px; }
.repost-detail-avatar { width: 28px; height: 28px; flex: 0 0 28px; }
.btn { min-height: 40px; padding: 8px 14px; border: none; border-radius: 10px; background: #F3EEE2; color: #444; cursor: pointer; text-decoration: none; transition: .2s; font-size: 14px; font-weight: 600; }
.btn:hover { background: #FFD54F; color: black; }
.btn-primary, .btn-secondary, .btn-compact { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; cursor: pointer; text-decoration: none; transition: .2s; font-weight: 700; }
.btn-primary { min-height: 44px; padding: 10px 16px; background: #FFD43B; color: #2E2E2E; font-size: 15px; }
.btn-primary:hover { background: #F5C32C; }
.btn-secondary { min-height: 40px; padding: 8px 14px; background: #F3EEE2; color: #444; font-size: 14px; }
.btn-secondary:hover { background: #E9E1D1; }
.btn-compact { min-height: 32px; padding: 5px 10px; border-radius: 8px; background: #F3EEE2; color: #444; font-size: 12px; }
.btn-compact:hover { background: #FFE894; color: #2E2E2E; }
.action-link { display: inline-block; }
.small-btn { background: none; border: none; color: #C68A00; cursor: pointer; margin-right: 15px; }
.small-btn:hover { text-decoration: underline; }
.icon-btn { background: none; border: none; font-size: 24px; color: #000; cursor: pointer; padding: 4px 10px; border-radius: 8px; transition: .2s; }
.icon-btn:hover { background: #FFF4CC; color: #000; }
.theme-btn { background: none; border: none; font-size: 22px; cursor: pointer; }
.settings-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border: none; border-radius: 10px; background: #F3EEE2; color: #444; cursor: pointer; font-size: 14px; font-weight: 600; transition: .2s; }
.settings-btn:hover { background: #FFD54F; color: black; }
.auth-btn, .danger-button { min-height: 44px; }
.auth-btn { background: #FFD43B; color: #2E2E2E; }
.post-top-controls { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.post-top-icon { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: #F3EEE2; color: #555; cursor: pointer; }
.post-top-icon:hover { background: #E9E1D1; color: #111; }
.post-top-icon.danger { color: #B3261E; }
.post-top-icon.danger:hover { background: #FFE7E5; }
.post-top-icon svg { width: 17px; height: 17px; }
.post-expiry { position: static; padding: 2px 6px; border-radius: 6px; background: #FFF0F0; color: #C62828; font-size: 11px; font-weight: 800; line-height: 1.4; white-space: nowrap; }
.post-expiry:empty { display: none; }
.post-source-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.post-card .post-source-row > .post-group-source { min-width: 0; margin-bottom: 0; overflow-wrap: anywhere; }
#posts-container > .post-card .post-source-row > .post-group-source { margin-bottom: 0; }
.post-source-row > .post-expiry, .post-card > .post-header > .post-expiry { margin-left: auto; flex-shrink: 0; }
.bucka { background: #FFD43B; color: #2E2E2E; }
.bucka.buckaed { background: #F3A6B7; color: #44252C; }
.btn svg, .settings-btn svg, .btn-primary svg, .btn-secondary svg, .btn-compact svg { width: 18px; height: 18px; flex: 0 0 18px; }
.cancel-btn { text-decoration: none; color: inherit; }
.upload-label { display: block; margin-bottom: 7px; font-weight: 600; }
.visually-hidden-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.image-upload-button { display: inline-flex; align-items: center; justify-content: center; margin-right: 9px; font-weight: 650; }
.image-upload-button svg, #comment-image-button svg, #comment-camera-button svg, #comment-send-button svg, #message-send-button svg { width: 20px; height: 20px; }
.selected-file-name { display: inline-block; max-width: 100%; color: #777; font-size: 14px; vertical-align: middle; overflow-wrap: anywhere; }

/* =========================
   COMMENTS
========================= */
.comments-section { background: white; border-radius: 15px; padding: 16px; border: 1px solid #F0E5C4; box-shadow: 0 5px 14px rgba(0,0,0,.045); }
.comments-heading { display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-bottom: 10px; }
.comments-heading h3 { margin: 0; font-size: 18px; }
.comments-heading > span { min-width: 26px; padding: 3px 8px; border-radius: 999px; background: #FFF0B1; color: #735800; font-size: 11px; font-weight: 800; text-align: center; }
.comment-input { display: flex; gap: 7px; margin-bottom: 12px; }
.comment-input input { flex: 1; padding: 12px; border-radius: 10px; border: 1px solid #DDD; outline: none; font-size: 15px; }
.comment-input input:focus { border-color: #FFD54F; }
.comment-input button { padding: 12px 20px; border: none; border-radius: 10px; background: #FFD54F; cursor: pointer; font-weight: 600; }
.comment-input button:hover { background: #F5C32C; }
.comment-composer { margin-bottom: 12px; padding: 9px; border: 1px solid #EEE5D4; border-radius: 13px; background: #FFFDF8; }
.comment-composer .comment-input { margin-bottom: 0; }
.comment-media-button { min-width: 46px; padding: 10px !important; font-size: 18px; }
.comment-media-preview { position: relative; width: fit-content; max-width: 100%; margin-bottom: 10px; padding: 6px; background: #FFFDF5; border: 1px solid #EFE5CC; border-radius: 13px; }
.comment-media-preview[hidden] { display: none; }
.comment-media-preview img { display: block; max-width: min(360px, 100%); max-height: 240px; object-fit: contain; border-radius: 9px; }
.comment-media-preview button { position: absolute; top: 9px; right: 9px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(30,30,30,.78); color: white; cursor: pointer; font-size: 20px; }
.comment-upload-status { min-height: 20px; margin: 4px 0; color: #777; font-size: 13px; }
.comment-upload-status:empty { min-height: 0; }
.comment-composer { margin-bottom: 14px; padding: 0; border: 0; background: transparent; }
.comment-input { align-items: center; }
.comment-text-control { min-width: 0; display: flex; flex: 1; align-items: center; overflow: hidden; border: 1px solid #DDD; border-radius: 12px; background: #FFFDF8; }
.comment-text-control:focus-within { border-color: #D2A900; box-shadow: 0 0 0 2px rgba(255,213,79,.18); }
.comment-text-control input[type="text"] { min-width: 0; flex: 1; padding: 12px 6px 12px 12px; border: 0; border-radius: 0; background: transparent; color: inherit; outline: 0; }
.comment-text-control #comment-image-button, .comment-text-control #comment-camera-button { flex: 0 0 42px; width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0 !important; border: 0; background: transparent; color: #454545; }
.comment-text-control #comment-camera-button { margin-left: -4px; }
#comment-send-button { border-radius: 50%; color: #2E2E2E; }
.content-edit-form { width: min(620px, 100%); margin: 0 auto; }
.content-edit-form textarea { min-height: 210px; resize: vertical; }
body.dark-mode .comment-text-control { border-color: #555; background: #2B2B2B; }
body.dark-mode .comment-text-control #comment-image-button, body.dark-mode .comment-text-control #comment-camera-button { color: #E2E2E2; }
.comment-upload-status button { padding: 3px 7px; border: 0; border-radius: 6px; background: #FFD54F; cursor: pointer; }
.comment-media-frame { position: relative; width: fit-content; max-width: 100%; min-width: 160px; min-height: 80px; margin: 10px 0; overflow: hidden; border-radius: 12px; background: #FFF9E8; border: 1px solid #EFE5CC; }
.comment-media-image { display: block; max-width: min(440px, 100%); max-height: 420px; width: auto; height: auto; object-fit: contain; opacity: 0; transition: opacity .2s; }
.comment-media-frame.loaded .comment-media-image { opacity: 1; }
.comment-media-frame.loaded .comment-media-loading { display: none; }
.comment-media-loading, .comment-media-error { padding: 25px; color: #888; text-align: center; font-size: 13px; }
body.dark-mode .comment-media-preview, body.dark-mode .comment-media-frame { background: #333; border-color: #444; }
@media (max-width: 520px) {
    .comment-input { flex-wrap: wrap; }
    .comment-input input[type="text"] { flex-basis: calc(100% - 56px); }
    .comment-input #comment-send-button { flex: 1; }
}

.comments { margin-top: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.comment-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px 2px; border-bottom: 1px solid #EEE9DF; }
.comment-thread-node { position: relative; width: 100%; }
.comment-thread-node > .comment-card,
.comment-thread-node > .comment-composer { width: 100%; min-width: 280px; box-sizing: border-box; }
.comment-thread-node > .comment-children { width: calc(100% - 22px); margin-left: 22px; }
.comment-thread-node:not(.depth-0)::before { position: absolute; top: 0; bottom: 0; left: -12px; width: 2px; border-radius: 2px; background: #E5D8B6; content: ""; }
.comment-thread-node.thread-deep-hidden { display: none; }
.comment-deep-thread-toggle { display: inline-flex; width: max-content; margin-top: 8px; margin-right: 6px; }
.comment-deep-thread-toggle.hide { color: #777; }
.comment-thread-toggle { margin-top: 6px; padding: 4px 7px; border: 0; border-radius: 7px; background: transparent; color: #7A672E; cursor: pointer; font-size: 11px; font-weight: 800; }
.comment-thread-toggle:hover { background: #F5F0E2; }
.comment-deleted-label { color: #888; font-size: 12px; font-style: italic; font-weight: 700; }
.deleted-comment { min-height: 50px; opacity: .82; }
.comment-highlight { animation: comment-thread-highlight 1.8s ease; }
@keyframes comment-thread-highlight { 25% { background: #FFF0B8; box-shadow: 0 0 0 4px rgba(255,213,79,.28); } }

/* The post-detail view is one continuous surface instead of stacked cards. */
body.comment-detail-page { background: white; }
.comment-detail-page .post-container { padding: 0; overflow: hidden; background: white; }
.comment-detail-back-row { position: fixed; z-index: 991; top: 0; left: 50%; display: flex; width: min(100%, 700px); min-height: 68px; box-sizing: border-box; align-items: center; justify-content: space-between; padding: calc(10px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left)); background: white; transform: translateX(-50%); }
.comment-detail-back-row button, .comment-detail-friends { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; padding: 0; border: 1px solid #DFC45F; border-radius: 50%; background: #FFF4CC; color: #5F4C08; box-shadow: 0 5px 16px rgba(65,48,0,.16); cursor: pointer; text-decoration: none; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.comment-detail-back-row button:hover, .comment-detail-friends:hover { background: #FFD54F; box-shadow: 0 7px 20px rgba(65,48,0,.21); transform: translateY(-1px); }
.comment-detail-back-row button:active, .comment-detail-friends:active { transform: scale(.96); }
.comment-detail-back-row svg { width: 23px; height: 23px; }
.comment-detail-page #post-content-area { padding-top: max(68px, calc(64px + env(safe-area-inset-top))); }
.comment-detail-page #post-content-area > .post-card {
    margin: 0;
    padding: 20px 18px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.comment-detail-page #post-content-area > .post-card:hover { transform: none; }
.comment-detail-page .comments-section {
    margin: 0;
    padding: 18px;
    border: 0;
    border-top: 1px solid #EEE5D4;
    border-radius: 0;
    box-shadow: none;
}
.comment-card:last-child { border-bottom: none; }
.comment-avatar { display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border: 2px solid white; border-radius: 50%; background: #FFD54F; box-shadow: 0 1px 4px rgba(0,0,0,.1); flex-shrink: 0; font-size: 12px; font-weight: 800; }
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: center; gap: 6px; min-height: 28px; margin-bottom: 2px; }
.comment-user { color: #2F2F2F; font-size: 14px; font-weight: 800; text-decoration: none; }
.comment-time { color: #999; font-size: 11px; }
.comment-text { margin: 2px 0 0; color: #444; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-owner-controls { display: inline-flex; gap: 4px; margin-left: auto; }
.comment-engagement { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.comment-bucka { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 8px; background: #F3EEE2; color: #666; cursor: pointer; }
.comment-reply-button { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 8px; background: transparent; color: #756A54; cursor: pointer; font-weight: 700; }
.comment-reply-button:hover { background: #F5F0E5; }
.comment-reply-button svg, .comment-reply-reference svg { width: 15px; height: 15px; }
.comment-reply-reference { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; color: #877343; font-size: 11px; }
.comment-reply-compose { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; padding: 7px 10px; border-left: 3px solid #22A559; border-radius: 7px; background: #FFF8DE; }
.comment-reply-compose[hidden] { display: none; }
.comment-reply-compose > span { min-width: 0; display: grid; flex: 1; }
.comment-reply-compose small { color: #16813A; font-size: 10px; font-weight: 800; }
.comment-reply-compose strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.comment-reply-compose button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #777; cursor: pointer; font-size: 20px; }
.comment-bucka svg { width: 16px; height: 16px; }
.comment-bucka.active { background: #F3A6B7; color: #44252C; }
.comment-secondary-actions { margin-top: 4px; }
.comment-user { font-weight: 600; color: #2F2F2F; }
.comment-time { font-size: 12px; color: #888; }
.comment-text { color: #444; line-height: 1.5; }

/* =========================
   CREATE POST
========================= */
.create-post-card { max-width: 620px; margin: 18px auto; width: calc(100% - 32px); padding: 22px; }
.create-post-page { height: 100dvh; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }
.create-post-page input, .create-post-page textarea, .create-post-page button { font-size: max(16px, 1em); }
.create-post-page > .profile-page { height: calc(100dvh - var(--mobile-nav-height, 0px)); overflow: hidden; box-sizing: border-box; }
.create-post-page .create-post-card { max-height: calc(100dvh - var(--mobile-nav-height, 0px) - 36px); overflow: hidden; box-sizing: border-box; }
.create-post-page.poll-composer-open { height: auto; min-height: 100dvh; overflow-y: auto; overscroll-behavior-y: contain; }
.create-post-page.poll-composer-open > .profile-page { height: auto; min-height: calc(100dvh - var(--mobile-nav-height, 0px)); overflow: visible; }
.create-post-page.poll-composer-open .create-post-card { max-height: none; overflow: visible; }
.create-post-user { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.create-post-user .avatar { width: 44px; height: 44px; margin: 0; }
.create-post-user-info { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 5px; }
.create-post-user-info .username { font-weight: 750; }
.posting-destination-control { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 4px; color: #817965; font-size: 12px; font-weight: 700; }
.create-post-destination-row { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 7px; margin: 0 0 14px; padding: 13px; border: 2px solid #E2BD42; border-radius: 16px; background: #FFF8D7; box-shadow: 0 5px 16px rgba(94,69,0,.10); }
.create-post-destination-row > span { color: #5E4A09; font-size: 14px; font-weight: 900; white-space: normal; }
.create-post-destination-row .post-destination-picker, .create-post-destination-row #post-destination-trigger { width: 100%; max-width: none; }
body.dark-mode .create-post-destination-row { border-color: #504A38; background: #302E27; }
body.dark-mode .create-post-destination-row > span { color: #D8CA91; }
.posting-destination-control select { max-width: 230px; padding: 1px 3px; border: 0; background: transparent; color: #8A6100; font: inherit; font-weight: 750; cursor: pointer; }
.post-title-row { position: relative; margin-bottom: 8px; }
.post-title-row input { width: 100%; padding: 10px 70px 10px 12px; border: 1px solid #E4D9BB; border-radius: 11px; background: #FFFDF8; color: #2E2E2E; font: inherit; }
.post-title-row .compact-char-counter { position: absolute; top: 50%; right: 11px; transform: translateY(-50%); }
.post-body-composer { overflow: hidden; border: 1px solid #DED3B5; border-radius: 14px; background: white; }
.create-post-card .post-body-composer textarea { display: block; width: 100%; min-height: 165px; padding: 13px; border: 0; border-radius: 0; outline: 0; box-sizing: border-box; background: transparent; color: #2E2E2E; resize: vertical; font: inherit; }
.post-composer-footer { display: flex; align-items: center; justify-content: space-between; min-height: 45px; padding: 6px 9px; border-top: 1px solid #EFE5CC; }
.post-composer-tools { display: flex; align-items: center; gap: 5px; }
.composer-tool-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: #6E5A1D; cursor: pointer; }
.composer-tool-button:hover { background: #FFF4CC; color: #2E2E2E; }
.composer-tool-button.active { background: #FFE488; color: #5F4900; }
.composer-tool-button svg { width: 20px; height: 20px; }
.compact-char-counter { color: #999; font-size: 11px; font-weight: 650; }
.post-body-composer .image-preview { margin: 0; padding: 0 12px 10px; }
.post-body-composer .image-preview { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.create-image-preview-item { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #FFFDF8; }
.create-image-preview-item img, #comment-preview-image, #message-image-preview-img, .moment-editor-image, .icon-image-picker-preview img { cursor: zoom-in; }
.post-body-composer .image-preview img { width: 100%; height: 100%; border: 1px solid #EFE5CC; border-radius: 8px; object-fit: cover; background: #FFFDF8; }
.create-image-remove { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: rgba(30,30,30,.78); color: white; font-size: 18px; line-height: 1; cursor: pointer; }
.post-poll { margin: 9px 0; }
.post-poll h3 { margin: 0 0 8px; font-size: 17px; }
.poll-voting-options { display: grid; gap: 6px; }
.poll-vote-option { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 7px 10px; overflow: hidden; border: 1px solid #DED3B5; border-radius: 9px; background: #FFFDF8; color: #333; cursor: pointer; font: inherit; text-align: left; }
.poll-option-fill { position: absolute; inset: 0 auto 0 0; z-index: 0; background: #FFF0A8; transition: width .25s ease; }
.poll-option-label, .poll-option-result { position: relative; z-index: 1; }
.poll-option-label { font-weight: 700; }
.poll-option-result { margin-left: 8px; font-size: 12px; font-weight: 800; }
.poll-vote-option.selected { border-color: #C99B00; }
.post-poll.voted .poll-vote-option { cursor: default; }
.poll-total { display: block; margin-top: 6px; color: #777; }
.poll-composer { display: grid; gap: 10px; margin: 0 10px 10px; padding: 13px 4px 3px; border: 0; border-top: 1px solid #EFE5CC; border-radius: 0; background: transparent; }
.poll-composer[hidden] { display: none; }
.poll-composer-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 800; }
.poll-composer-heading button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid #E8B7B2; border-radius: 8px; background: #FFF0EF; color: #B52E26; cursor: pointer; font-size: 20px; font-weight: 800; }
.poll-composer-heading button:hover { background: #FFDCD8; color: #8F1710; }
body.dark-mode .poll-composer-heading button { border-color: #75423E; background: #492D2B; color: #FFAAA2; }
.poll-composer > input, .poll-option-row input { width: 100%; box-sizing: border-box; padding: 10px 11px; border: 1px solid #DDD0AA; border-radius: 10px; background: white; color: #2E2E2E; font: inherit; }
.poll-option-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 8px; color: #666; font-size: 13px; font-weight: 700; }
.poll-option-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.poll-option-controls button { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 1px solid #D9C98F; border-radius: 50%; background: #FFF7D9; color: #6D5600; cursor: pointer; font: inherit; font-size: 23px; font-weight: 800; line-height: 1; }
.poll-option-controls button:hover { background: #FFE890; }
.poll-option-controls button:disabled { cursor: default; opacity: .35; }
body.dark-mode .poll-option-controls button { border-color: #665A32; background: #403A26; color: #F0D978; }
.create-post-card .profile-actions { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 8px; margin-top: 12px; margin-bottom: 20px; }
.create-post-card .profile-actions .settings-btn { width: 100%; min-width: 0 !important; height: 44px; margin: 0; padding: 0 8px; white-space: nowrap; }
.create-post-card .profile-actions .cancel-btn { display: inline-flex; align-items: center; justify-content: center; }
#create-post-submit { width: 100%; height: 44px; padding: 0; }
#create-post-submit svg { width: 20px; height: 20px; }
.post-drafts-button { position: relative; display: inline-flex; overflow: visible; align-items: center; justify-content: center; gap: 5px; }
.post-drafts-button svg { width: 18px; height: 18px; }
.save-post-draft-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.save-post-draft-button svg { width: 18px; height: 18px; }
.post-draft-count { position: absolute; z-index: 2; top: -7px; right: -6px; display: grid; min-width: 19px; height: 19px; box-sizing: border-box; place-items: center; padding: 0 5px; border: 2px solid #FFFDF8; border-radius: 999px; background: #D99A00; color: #FFF; box-shadow: 0 2px 6px rgba(65,48,0,.2); font-size: 10px; font-weight: 850; line-height: 1; }
.post-draft-count[hidden] { display: none; }
.post-draft-status { position: absolute; top: calc(100% + 4px); right: 0; color: #82765B; font-size: 12px; text-align: right; }
.post-drafts-sheet .creation-sheet-panel { background: #F7F2E6; }
.post-drafts-scroll { width: min(720px, 100%); padding-top: 0; }
.post-drafts-heading { position: sticky; z-index: 4; top: 0; display: flex; align-items: center; justify-content: space-between; margin: 0 -22px 14px; padding: 15px 22px; border-bottom: 1px solid #E3D6B1; background: rgba(255,253,248,.94); backdrop-filter: blur(10px); }
.post-drafts-heading span { color: #8C751E; font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.post-drafts-heading h2 { margin: 2px 0 0; font-size: 22px; }
.post-drafts-heading button { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #E3D6B1; border-radius: 50%; background: #FFF; color: inherit; cursor: pointer; font-size: 25px; }
.post-drafts-list { display: grid; gap: 18px; padding-bottom: 20px; }
.draft-preview-card { margin: 0; cursor: default; }
.draft-preview-author { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.draft-preview-author > span:last-child { display: grid; min-width: 0; }
.draft-preview-author small { color: #817866; line-height: 1.35; }
.draft-preview-card .post-content { white-space: pre-wrap; }
.draft-preview-card .post-feed-image-wrap { margin-top: 10px; }
.draft-preview-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 11px; border-top: 1px solid #EEE3C6; }
.draft-preview-actions .settings-btn { display: inline-flex; width: auto; min-width: 105px; align-items: center; justify-content: center; gap: 7px; margin: 0; }
.draft-preview-actions svg { width: 17px; height: 17px; }
.draft-delete-button { border-color: #E8C2BE; background: #FFF5F4; color: #A82D25; }
.draft-poll-preview { pointer-events: none; }
.draft-poll-preview > div { margin-top: 6px; padding: 9px 11px; border: 1px solid #DED3B5; border-radius: 9px; background: #FFF; }
.post-drafts-empty { padding: 24px 10px; color: #817866; text-align: center; }
body.dark-mode .post-draft-status { color: #BEB6A3; }
body.dark-mode .post-draft-count { border-color: #2B2B2B; }
body.dark-mode .post-drafts-sheet .creation-sheet-panel { background: #202020; }
body.dark-mode .post-drafts-heading { border-color: #504A3B; background: rgba(41,41,41,.94); }
body.dark-mode .post-drafts-heading button, body.dark-mode .draft-poll-preview > div { border-color: #504A3B; background: #333; color: #FFF; }
body.dark-mode .draft-preview-actions { border-color: #4A4539; }
body.dark-mode .draft-delete-button { border-color: #70423E; background: #462D2B; color: #FFB2AA; }
@media (max-width: 600px) { .create-post-card .profile-actions { gap: 5px; } .create-post-card .profile-actions .settings-btn { padding-inline: 3px; font-size: 11px; } .post-drafts-button, .save-post-draft-button { gap: 3px; } .post-drafts-button svg, .save-post-draft-button svg { display: block; width: 15px; height: 15px; flex: 0 0 15px; } .post-drafts-heading { margin-right: -14px; margin-left: -14px; padding-right: 14px; padding-left: 14px; } }
.char-counter { margin-top: 8px; text-align: right; color: #777; font-size: 14px; font-weight: 500; }
.char-counter.warning { color: #E53935; }
.upload-info { display: block; margin-top: 6px; color: #777; }
.image-preview { margin-top: 15px; display: none; }
.image-preview img { width: 100%; max-height: 350px; object-fit: cover; border-radius: 12px; border: 2px solid #EFE5CC; }

/* =========================
   PROFILE PAGE
========================= */
.profile-card { background: white; border-radius: 18px; padding: 26px; margin-bottom: 30px; border: 1px solid #F0E5C4; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.profile-card-top { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.profile-card-top .profile-pic { width: 72px; height: 72px; border-radius: 50%; background: #FFD54F; flex-shrink: 0; }
.profile-card-top .friend-button-container { display: flex; align-items: center; margin-left: auto; }
.profile-card-top .friend-button-container[hidden] { display: none; }
.profile-block-container { display: flex; align-items: center; }
.profile-block-container[hidden], .profile-block-warning[hidden] { display: none; }
.profile-block-action { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid #E3D7B6; border-radius: 50%; background: #FFF9E8; color: #78651D; cursor: pointer; }
.profile-block-action.active { border-color: #BC4D46; background: #FFF0EF; color: #A5221B; }
.profile-block-action:disabled { cursor: default; opacity: .62; }
.profile-block-action svg { width: 20px; height: 20px; }
.profile-block-warning { max-width: 620px; margin: 10px auto 0; padding: 10px 12px; border: 1px solid #E6CAA1; border-radius: 10px; background: #FFF7DF; color: #6D5700; font-size: 13px; text-align: center; }
.profile-card.viewing-other-profile .profile-block-container { margin: 0; }
.profile-friend-action { gap: 7px; min-width: 44px; height: 44px; min-height: 44px; padding: 0 13px; border-radius: 999px; }
.profile-friend-action svg { width: 20px; height: 20px; }
.profile-friend-action.friend-add { border: 1px solid #DFC66C; background: #FFF2B8; color: #604B00; }
.profile-friend-action.friend-accept { border: 1px solid #83C99A; background: #E3F6E9; color: #176B35; }
.profile-friend-action.friend-sent { border: 1px solid #DDD7C8; background: #F3F0E8; color: #777064; opacity: 1; }
body.dark-mode .profile-friend-action.friend-add { border-color: #746126; background: #463E22; color: #F2D776; }
body.dark-mode .profile-friend-action.friend-accept { border-color: #397C50; background: #294A34; color: #A7E6BA; }
body.dark-mode .profile-friend-action.friend-sent { border-color: #4A4A4A; background: #383838; color: #BDB8AC; }
.profile-chat-action { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #FFD43B; color: #2E2E2E; text-decoration: none; box-shadow: 0 3px 9px rgba(0,0,0,.09); }
.profile-chat-action:hover { background: #F5C32C; transform: translateY(-1px); }
.profile-chat-action svg { width: 21px; height: 21px; }
.profile-card.viewing-other-profile .profile-card-top { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.profile-card.viewing-other-profile .profile-identity { align-items: center; text-align: center; }
.profile-card.viewing-other-profile .friend-button-container { margin: 0; }
.profile-identity { display: flex; flex-direction: column; align-items: center; text-align: center; }
.profile-identity h2 { font-size: 22px; font-weight: 700; color: #2E2E2E; }
.profile-handle { font-size: 15px; color: #888; margin-top: 2px; }
.profile-bio { margin: 20px 0; padding: 16px; background: #FFFDF5; border-radius: 12px; border-left: 3px solid #FFD54F; }
.profile-card-top, .profile-identity, .profile-editable-block { position: relative; }
.profile-inline-edit { position: absolute; z-index: 4; top: 8px; right: 8px; display: none; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 8px; background: rgba(255,244,204,.72); color: #77621A; text-decoration: none; opacity: .78; transition: opacity .15s ease, background .15s ease, transform .15s ease; }
.profile-inline-edit[hidden] { display: none; }
.profile-card.viewing-own-profile .profile-inline-edit:not([hidden]) { display: grid; }
.profile-inline-edit:hover, .profile-inline-edit:focus-visible { background: #FFF4CC; opacity: 1; transform: translateY(-1px); }
.profile-inline-edit svg { width: 16px; height: 16px; }
body.dark-mode .profile-inline-edit { background: rgba(68,68,68,.76); color: #F1D66F; }
body.dark-mode .profile-inline-edit:hover, body.dark-mode .profile-inline-edit:focus-visible { background: #444; }
.profile-bio p { font-size: 16px; color: #444; font-style: italic; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.profile-joined { color: #777; font-size: 13px; margin-top: 5px; }
.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 18px 0; padding: 14px 0; border-top: 1px solid #F0E5C4; border-bottom: 1px solid #F0E5C4; text-align: center; }
.profile-stats div, .profile-stats a { display: flex; flex-direction: column; gap: 3px; color: inherit; text-decoration: none; }
.profile-stats strong { color: #2E2E2E; font-size: 18px; }
.profile-stats span { color: #777; font-size: 12px; }
.feed-sort { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 14px 0; }
.feed-sort label { color: #777; font-size: 13px; font-weight: 600; }
.feed-sort select { border: 1px solid #E7D8AF; border-radius: 10px; padding: 9px 12px; background: #FFFDF5; color: #333; font: inherit; }
body.dark-mode .profile-joined, body.dark-mode .profile-stats span, body.dark-mode .feed-sort label { color: #bbb; }
body.dark-mode .profile-stats { border-color: #444; }
body.dark-mode .profile-stats strong { color: white; }
body.dark-mode .feed-sort select { background: #333; color: white; border-color: #555; }
@media (max-width: 560px) { .profile-stats span { font-size: 11px; } .feed-sort { justify-content: space-between; } .feed-sort select { max-width: 65%; } }
.profile-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.profile-personalization-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px; margin-bottom: 22px; }
.profile-personalization-column { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.profile-personalization-column .profile-detail { display: grid; align-content: center; min-height: 82px; }
.profile-featured-friends { min-height: 178px; padding: 16px; border: 1px solid #E8D48D; border-radius: 16px; background: linear-gradient(145deg, #FFFDF5, #FFF8DC); box-shadow: 0 5px 18px rgba(110,82,0,.06); }
.profile-featured-friends-heading { display: flex; align-items: center; justify-content: space-between; color: #2E2E2E; text-decoration: none; }
.profile-featured-friends-heading strong { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; }
.profile-featured-friends-heading strong > svg { width: 19px; height: 19px; color: #B27C00; }
.profile-featured-friends-heading > span { padding: 4px 8px; border-radius: 999px; background: rgba(217,154,0,.11); color: #765800; font-size: 12px; font-weight: 850; }
.profile-friends-open { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid #DFC86F; border-radius: 11px; background: #FFF1B5; color: #624D00; font-size: 12px; font-weight: 850; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.profile-friends-open:hover { background: #FFE681; transform: translateY(-1px); }
.profile-friends-open:active { transform: scale(.97); }
.profile-friends-total { margin: 12px 0 0; color: #777; font-size: 13px; }
.profile-friends-total strong { color: #3A3528; }
.profile-mutual-friends-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; padding-top: 13px; border-top: 1px solid #EADDB7; color: #5E5747; font-size: 13px; }
.profile-mutual-friends-heading > span { display: grid; min-width: 24px; height: 24px; place-items: center; padding: 0 6px; border-radius: 999px; background: #FFE99A; color: #725700; font-size: 11px; font-weight: 900; }
.profile-featured-friends-list { display: grid; gap: 7px; margin-top: 13px; }
.profile-featured-friends-empty { align-self: center; margin: 20px 4px; color: #888; font-size: 13px; line-height: 1.45; }
.profile-featured-friend-row { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 5px 7px; border: 1px solid transparent; border-radius: 11px; color: #333; text-decoration: none; font-weight: 700; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.profile-featured-friend-row:hover { border-color: #EAD58E; background: #FFF4CC; transform: translateX(2px); }
.profile-featured-friend-rank, .featured-friend-editor-rank { display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%; background: #FFE68B; color: #765800; font-size: 11px; font-weight: 900; }
.profile-featured-friend-avatar { display: inline-block; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: #FFD54F center/cover no-repeat; object-fit: cover; }
body.dark-mode .profile-friends-open { border-color: #6F602C; background: #4B4224; color: #FFE27A; }
body.dark-mode .profile-friends-open:hover { background: #5A4E27; }
body.dark-mode .profile-friends-total { color: #BDB7AA; }
body.dark-mode .profile-friends-total strong { color: #FFF; }
body.dark-mode .profile-mutual-friends-heading { border-color: #4C4737; color: #D2CBBB; }
body.dark-mode .profile-mutual-friends-heading > span { background: #51451D; color: #FFE58A; }
.featured-friends-editor { margin: 20px 0; padding: 18px; border: 1px solid #E5D18A; border-radius: 18px; background: linear-gradient(145deg, #FFFDF6, #FFF8DE); box-shadow: 0 7px 22px rgba(91,68,0,.07); }
.featured-friends-editor-heading { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: 11px; margin-bottom: 15px; }
.featured-friends-editor-symbol { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #FFE58A; color: #795D00; font-size: 20px; }
.featured-friends-editor-heading h2 { margin: 0; font-size: 18px; }
.featured-friends-editor-heading p { max-width: 560px; margin: 4px 0 0; color: #756E61; font-size: 13px; line-height: 1.45; }
#featured-friends-count { padding: 5px 9px; border-radius: 999px; background: #FFE9A0; color: #765800; font-size: 12px; font-weight: 900; white-space: nowrap; }
#featured-friends-editor-list { display: grid; gap: 8px; }
.featured-friends-editor-empty { margin: 0; padding: 18px 14px; border: 1px dashed #DCCB91; border-radius: 12px; color: #81796B; text-align: center; font-size: 13px; }
.featured-friend-editor-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 10px; border: 1px solid #ECE1BF; border-radius: 13px; background: rgba(255,255,255,.82); }
.featured-friend-editor-identity { display: flex; align-items: center; gap: 9px; min-width: 0; }
.featured-friend-order-actions { display: flex; gap: 4px; }
.compact-icon-button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid #E4DCCB; border-radius: 9px; background: #F7F3EA; color: #514A3E; cursor: pointer; font-weight: 800; }
.compact-icon-button svg { width: 16px; height: 16px; }
.compact-icon-button:disabled { opacity: .35; cursor: default; }
.compact-icon-button.danger { color: #C62828; }
.featured-friend-add-panel { margin-top: 14px; padding-top: 13px; border-top: 1px solid #E9DDBA; }
.featured-friend-add-label { display: block; margin: 0 0 7px; font-size: 13px; font-weight: 800; }
.featured-friend-add-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
@media (max-width: 480px) {
    .featured-friends-editor { padding: 15px; }
    .featured-friends-editor-heading { grid-template-columns: auto minmax(0,1fr); }
    #featured-friends-count { grid-column: 2; justify-self: start; }
    .featured-friend-editor-row { align-items: flex-start; }
    .featured-friend-order-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 68px; }
    .featured-friend-add-row { grid-template-columns: 1fr; }
}
.profile-detail { background: #FFFDF5; border-radius: 10px; padding: 14px; text-align: center; border: 1px solid #F5EFD6; }
.detail-label { display: block; font-size: 12px; color: #999; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }
.detail-value { display: block; font-size: 15px; font-weight: 600; color: #2E2E2E; }
.edit-profile-btn { display: inline-block; margin-top: 16px; padding: 10px 18px; border-radius: 10px; background: #FFF4CC; color: #444; text-decoration: none; font-weight: 600; transition: .2s; border: none; cursor: pointer; }
.edit-profile-btn:hover { background: #FFD54F; color: black; }
.edit-profile-btn:has(svg) { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; }
.edit-profile-btn svg { width: 18px; height: 18px; }
.edit-profile-input, .edit-profile-textarea { width: 100%; background: transparent; border: 1px solid #ccc; border-radius: 8px; padding: 8px; font-size: 1rem; }
.edit-profile-textarea { resize: vertical; min-height: 80px; }

/* =========================
   ACTIVITY SECTION
========================= */
.activity-section { background: white; border-radius: 18px; padding: 22px; border: 1px solid #F0E5C4; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.activity-title { font-size: 19px; margin-bottom: 16px; color: #2E2E2E; }
.tab-bar { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 2px solid #F0E5C4; }
.tab { padding: 10px 24px; background: none; border: none; font-size: 15px; font-weight: 600; color: #999; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: .2s; }
.tab.active { color: #D38A00; border-bottom-color: #FFD54F; }
.tab:hover:not(.active) { color: #555; }
.tab-content.hidden { display: none; }
.activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 16px 0; border-bottom: 1px solid #F3F3F3; transition: .2s; }
.activity-item:last-child { border-bottom: none; }
.activity-item:hover { background: #FFFDF5; border-radius: 12px; padding-left: 10px; padding-right: 10px; }
.activity-icon { font-size: 20px; flex-shrink: 0; }
.activity-body { flex: 1; }
.activity-meta { font-size: 13px; color: #999; margin-bottom: 4px; }
.activity-text { font-size: 15px; color: #3A3A3A; line-height: 1.5; }
.activity-image { margin-top: 10px; width: 100%; max-height: 250px; object-fit: cover; border-radius: 10px; }
.loading-text { color: #999; text-align: center; padding: 20px; }
.feed-load-sentinel, .feed-error { padding: 20px; color: #888; text-align: center; }
.feed-error .btn { margin-top: 10px; }

/* =========================
   SETTINGS PAGE
========================= */
.settings-title { font-size: 24px; font-weight: 700; color: #2E2E2E; margin-bottom: 24px; }
.settings-list { background: white; border-radius: 18px; overflow: hidden; border: 1px solid #F0E5C4; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.settings-row { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 18px 22px; border: none; border-bottom: 1px solid #F3F3F3; background: white; cursor: pointer; font-size: 16px; color: #2E2E2E; transition: .2s; text-decoration: none; color: inherit; }
.settings-row:last-child { border-bottom: none; }
.settings-row:hover { background: #FFFDF5; }
.settings-row-label { font-weight: 500; }
.settings-row-arrow { font-size: 22px; color: #CCC; }
.settings-row.danger .settings-row-label { color: #E53935; }
.settings-row.danger:hover { background: #FFEBEE; }
.settings-section-title { margin: 24px 5px 8px; color: #8A7850; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.settings-section-title:first-of-type { margin-top: 0; }
.danger-title { color: #C62828; }
.danger-list { border-color: #F2C8C8; }
.settings-form-card { margin-top: 24px; }
.current-setting { display: flex; flex-direction: column; margin-bottom: 22px; padding: 14px; border-radius: 12px; background: #FFF9E8; border: 1px solid #F0E5C4; }
.current-setting span { color: #888; font-size: 12px; }
.settings-form-message { min-height: 22px; margin-top: 12px; color: #C62828; font-size: 14px; }
.settings-form-message.success { color: #388E3C; }
.delete-step { display: none; }
.delete-step.active { display: block; }
.delete-step h1 { margin-bottom: 10px; }
.delete-step > p { margin-bottom: 18px; color: #666; }
.danger-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 50%; background: #FFEBEE; color: #C62828; font-size: 28px; font-weight: 800; }
.deletion-consequences { margin: 20px 0; padding: 16px; border-left: 4px solid #E53935; border-radius: 8px; background: #FFF5F5; color: #5F4242; }
.deletion-consequences p + p { margin-top: 10px; }
.danger-button { background: #E53935; color: white; }
.danger-button:hover { background: #C62828; color: white; }
.danger-button:disabled { background: #D8BABA; cursor: not-allowed; }
.final-delete-actions { display: flex; justify-content: flex-end; gap: 12px; }
body.dark-mode .current-setting { background: #333; border-color: #444; }
body.dark-mode .deletion-consequences { background: #3C2929; color: #F0CCCC; }

/* =========================
   ADMINISTRATION
========================= */
.admin-page { max-width: 1120px; margin: 30px auto; padding: 0 20px 100px; }
.admin-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.admin-heading h1 { margin: 2px 0 0; }
.admin-eyebrow { color: #8a6800; font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.admin-tabs { display: flex; gap: 7px; margin: 20px 0 26px; padding: 7px; overflow-x: auto; border-radius: 14px; background: #FFF4CC; scrollbar-width: thin; }
.admin-tabs button { padding: 9px 16px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-weight: 700; }
.admin-tabs button.active { background: #FFD54F; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 30px; }
.admin-stat-grid > div { display: flex; flex-direction: column; padding: 20px; border: 1px solid #F0E5C4; border-radius: 15px; background: white; box-shadow: 0 5px 15px rgba(0,0,0,.04); }
.admin-stat-grid strong { font-size: 30px; color: #A07100; }
.admin-metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-bottom: 18px; }
.admin-metric-card, .admin-chart-card { padding: 20px; border: 1px solid #F0E5C4; border-radius: 16px; background: white; box-shadow: 0 5px 15px rgba(0,0,0,.04); }
.admin-metric-card h3, .admin-chart-card h3 { margin: 0; }
.admin-metric-card > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.admin-metric-card span { display: flex; min-width: 0; flex-direction: column; gap: 4px; color: #777; font-size: 12px; }
.admin-metric-card strong { color: #2C281F; font-size: 24px; }
.admin-chart-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.admin-chart-heading p { margin: 5px 0 0; color: #777; }
.admin-chart-heading label { display: grid; flex: 0 0 150px; gap: 5px; color: #777; font-size: 12px; font-weight: 700; }
.admin-chart-heading select { min-height: 42px; padding: 8px 34px 8px 11px; border: 1px solid #D9D1BF; border-radius: 10px; background: #FFFDF5; color: #29251B; font: inherit; }
.admin-chart-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 20px 0 4px; color: #625D52; font-size: 13px; font-weight: 700; }
.admin-chart-legend span::before { display: inline-block; width: 11px; height: 11px; margin-right: 6px; border-radius: 50%; background: currentColor; content: ""; }
.admin-chart-legend .accounts { color: #3B82F6; }
.admin-chart-legend .posts { color: #D99A00; }
.admin-chart-legend .comments { color: #22A559; }
.admin-chart-wrap { width: 100%; height: 330px; overflow: hidden; }
#admin-growth-chart { display: block; width: 100%; height: 100%; }
.admin-report-card, .admin-user-card, .admin-content-card, .admin-group-card, .admin-action-row, .alert-card { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 12px; padding: 16px; border: 1px solid #F0E5C4; border-radius: 14px; background: white; }
.admin-card-main { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.admin-card-main p { margin: 3px 0; overflow: hidden; text-overflow: ellipsis; }
.admin-card-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.admin-report-card p, .admin-action-row p { color: #666; }
.admin-badge, .suspended-label { width: fit-content; padding: 3px 7px; border-radius: 999px; background: #FFF0B1; color: #806100; font-size: 11px; font-weight: 800; }
.suspended-label { margin-top: 5px; background: #FFEBEE; color: #C62828; }
.admin-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.admin-section-heading h2, .admin-section-heading p { margin: 0; }
.admin-section-heading p { margin-top: 4px; color: #666; }
.admin-text-button { border: 0; background: transparent; color: #725600; cursor: pointer; font-weight: 800; }
.admin-search, .admin-filter-row { display: flex; gap: 10px; margin-bottom: 18px; }
.admin-search input, .admin-filter-row input { flex: 1; }
.admin-search input, .admin-filter-row input, .admin-filter-row select, .admin-dialog textarea, .admin-dialog select, .admin-dialog input { min-height: 40px; padding: 10px; border: 1px solid #DDD; border-radius: 10px; background: white; color: inherit; font: inherit; }
.admin-dialog textarea, .admin-dialog select, .admin-dialog input { width: 100%; }
.admin-row-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.admin-group-avatar { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; overflow: hidden; border-radius: 50%; background: #FFF4CC; color: #795d00; }
.admin-group-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-action-row { align-items: flex-start; flex-direction: column; }
.admin-decision-field { display: grid !important; gap: 7px; margin-top: 16px !important; padding: 14px; border: 2px solid; border-radius: 14px; }
.admin-decision-field textarea { width: 100%; margin: 0; box-sizing: border-box; }
.admin-decision-field-title { width: max-content; padding: 3px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.admin-decision-field-internal { border-color: #e3a008; background: #fff9db; }
.admin-decision-field-internal .admin-decision-field-title { color: #654700; background: #ffd43b; }
.admin-decision-field-reporter { border-color: #3b82f6; background: #eff6ff; }
.admin-decision-field-reporter .admin-decision-field-title { color: white; background: #2563eb; }
.admin-dialog { width: min(600px, calc(100% - 30px)); padding: 24px; border: 0; border-radius: 18px; box-shadow: 0 15px 45px rgba(0,0,0,.25); }
.admin-dialog::backdrop { background: rgba(0,0,0,.45); }
.dialog-close { float: right; border: 0; background: none; font-size: 25px; cursor: pointer; }
.admin-dialog label { display: block; margin-top: 15px; font-weight: 700; }
.admin-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.admin-dialog-title { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.admin-dialog-title h2 { margin: 5px 0 0; }
.admin-detail-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 16px 0; }
.admin-detail-grid > span { display: flex; flex-direction: column; gap: 3px; padding: 11px; border-radius: 10px; background: #fff8df; color: #666; font-size: 12px; }
.admin-detail-grid strong { color: #222; font-size: 14px; }
.admin-member-list { display: flex; flex-direction: column; gap: 5px; }
.admin-member-list > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #eee4c6; }
.admin-member-list > div > span:first-child { display: flex; flex-direction: column; }
.admin-empty { padding: 34px 18px; border: 1px dashed #dfd1aa; border-radius: 14px; color: #777; text-align: center; }
.danger-outline { border-color: #e2a5a5 !important; background: transparent !important; color: #a62626 !important; }
.reported-context { margin-top: 12px; padding: 14px; border-left: 3px solid #FFD54F; background: #FFF9E8; }
.alert-card { display: block; }
.alert-card.unread { border-left: 5px solid #FFD54F; background: #FFFDF5; }
.alert-card h2 { font-size: 17px; }
.alert-card time { color: #999; font-size: 12px; }
.profile-header-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0 4px; padding: 9px 9px 3px; overflow: visible; }
.profile-header-actions[hidden] { display: none !important; }
.other-profile-controls .friend-button-container, .other-profile-controls .profile-block-container { display: flex; align-items: center; }
.other-profile-controls .profile-block-container[hidden] { display: none; }
.profile-header-action { position: relative; overflow: visible; padding: 7px 10px; border: 1px solid #DFC45F; border-radius: 12px; background: #FFF4CC; color: #5F4C08; text-decoration: none; font-size: 13px; font-weight: 700; box-shadow: 0 5px 16px rgba(65,48,0,.12); transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.profile-header-action:hover { background: #FFD54F; box-shadow: 0 7px 20px rgba(65,48,0,.18); transform: translateY(-1px); }
.profile-header-action:active { transform: scale(.97); }
.profile-header-action.icon-only-action { width: 40px; min-width: 40px; min-height: 40px; padding: 0; display: inline-grid; place-items: center; flex: 0 0 40px; }
.profile-header-actions .profile-header-action.icon-only-action { width: 42px; min-width: 42px; height: 42px; min-height: 42px; margin: 0; padding: 0; box-sizing: border-box; }
.profile-edit-main-action { display: inline-flex; min-width: 132px; min-height: 42px; align-items: center; justify-content: center; gap: 7px; padding-inline: 16px; border: 1px solid #E2C866; }
.profile-edit-main-action svg { width: 18px; height: 18px; }
.profile-header-action.icon-only-action svg { width: 18px; height: 18px; }
.profile-friends-link { position: relative; }
.alerts-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.alert-day { margin: 24px 0 8px; color: #777; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.alert-card { cursor: pointer; }
.legal-page { max-width: 820px; margin: 35px auto; padding: 0 20px; }
.legal-page > a { color: #8A6100; text-decoration: none; }
.legal-card { margin-top: 16px; padding: 30px; border: 1px solid #F0E5C4; border-radius: 18px; background: white; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.legal-card h1 { margin-bottom: 18px; }
.legal-card h2 { margin: 24px 0 8px; font-size: 18px; }
.legal-card p { line-height: 1.65; color: #444; }
.legal-notice { padding: 14px; border-left: 4px solid #D38A00; background: #FFF8E1; }
.legal-links { display: flex; justify-content: center; gap: 8px; margin-top: 16px; font-size: 13px; }
body.dark-mode .profile-header-action { border-color: #746126; background: #3E3825; color: #F2D76B; box-shadow: 0 6px 18px rgba(0,0,0,.24); }
body.dark-mode .profile-header-action:hover { background: #514826; }
.notification-center-intro { margin: 0 0 22px; color: #6f6a61; line-height: 1.55; }
.notification-preference-row { position: relative; cursor: pointer; }
.notification-preference-row > span:first-child { display: grid; gap: 3px; padding-right: 62px; }
.notification-preference-row strong { color: inherit; font-size: 14px; }
.notification-preference-row small { color: #817a6e; font-size: 11px; }
.notification-preference-row input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.notification-switch { position: absolute; right: 17px; width: 44px; height: 25px; border-radius: 999px; background: #c9c5bd; transition: background .18s ease; }
.notification-switch::after { position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%; background: white; box-shadow: 0 1px 4px rgba(0,0,0,.2); content: ""; transition: transform .18s ease; }
.notification-preference-row input:checked + .notification-switch { background: #22A559; }
.notification-preference-row input:checked + .notification-switch::after { transform: translateX(19px); }
.notification-preference-row input:focus-visible + .notification-switch { outline: 3px solid rgba(34,165,89,.28); outline-offset: 2px; }
.push-master-row { position: relative; cursor: pointer; }
.push-master-row > span:first-child { padding-right: 62px; }
.push-master-row .push-master-switch { flex: 0 0 44px; }
.push-master-row.enabled .push-master-switch { background: #22A559; }
.push-master-row.enabled .push-master-switch::after { transform: translateX(19px); }
.push-master-row:focus-visible .push-master-switch { outline: 3px solid rgba(34,165,89,.28); outline-offset: 2px; }
.push-master-row:disabled .push-master-switch { opacity: .55; }
body.dark-mode .notification-center-intro, body.dark-mode .notification-preference-row small { color: #bbb; }
body.dark-mode .notification-switch { background: #666; }
body.dark-mode .legal-card { background: #2b2b2b; border-color: #444; }
body.dark-mode .legal-card p { color: #ddd; }
body.dark-mode .legal-notice { background: #3a3320; }
@media (max-width: 560px) { .profile-header-actions { justify-content: center; } .profile-header-action { text-align: center; padding-inline: 5px; font-size: 12px; } .profile-header-actions .profile-header-action.icon-only-action { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; min-height: 44px; } .alerts-heading { align-items: flex-start; flex-direction: column; } .legal-card { padding: 20px; } }

/* SPOROČILA */
.messages-page { width: min(1180px, calc(100% - 32px)); height: calc(100vh - 145px); min-height: 540px; margin: 24px auto 110px; display: grid; grid-template-columns: 330px minmax(0, 1fr); overflow: hidden; border: 1px solid #E9DDBD; border-radius: 18px; background: white; box-shadow: 0 10px 30px rgba(0,0,0,.07); }
@media (min-width: 601px) {
    body:has(.messages-page) { background: #fff; }
    body.dark-mode:has(.messages-page) { background: #2b2b2b; }
}
.conversation-sidebar { min-width: 0; display: flex; flex-direction: column; border-right: 1px solid #E9DDBD; background: #FFFDF5; }
.conversation-sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px; border-bottom: 1px solid #E9DDBD; }
.conversation-sidebar-header h1 { font-size: 24px; }
.conversation-search { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 8px; margin: 10px 12px; padding: 9px 11px; border: 1px solid #DDD0AA; border-radius: 12px; background: #FFF; color: #7A6A3E; }
.conversation-search svg { width: 19px; height: 19px; }
.conversation-search input { min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; }
.conversation-search-empty { margin: 16px; color: #777; text-align: center; }
.conversation-search-empty[hidden] { display: none; }
body.dark-mode .conversation-search { border-color: #555; background: #333; color: #EEE; }
.new-chat-group { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 12px; border: 0; border-radius: 999px; background: #B77900; color: #fff; font-weight: 800; text-decoration: none; cursor: pointer; }
.new-chat-group:hover { background: #956300; }
.new-chat-group { width: 40px; height: 40px; min-height: 40px; padding: 0; flex: 0 0 40px; }
.new-chat-group svg { width: 21px; height: 21px; }
body.dark-mode .new-chat-group { background: #8A640B; color: #fff; }
body.dark-mode .new-chat-group:hover { background: #A87908; }
.new-chat-menu-wrap { position: relative; flex: none; }
.new-chat-menu { position: absolute; z-index: 20; top: calc(100% + 9px); right: 0; width: 185px; padding: 6px; border: 1px solid #E9DDBD; border-radius: 13px; background: #fff; box-shadow: 0 12px 30px rgba(45,35,10,.18); }
.new-chat-menu[hidden] { display: none; }
.new-chat-menu button, .new-chat-menu a { display: flex; width: 100%; min-height: 42px; align-items: center; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; color: #29251B; font: inherit; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.new-chat-menu button:hover, .new-chat-menu a:hover { background: #FFF2BD; }
body.dark-mode .new-chat-menu { border-color: #4A463B; background: #2B2B2B; }
body.dark-mode .new-chat-menu button, body.dark-mode .new-chat-menu a { color: #fff; }
body.dark-mode .new-chat-menu button:hover, body.dark-mode .new-chat-menu a:hover { background: #4A4122; }
.new-conversation-button { width: 100%; margin-top: 14px; padding: 10px 14px; border: 0; border-radius: 10px; background: #FFD54F; color: #222; font: inherit; font-weight: 700; cursor: pointer; }
.conversation-list { flex: 1; min-height: 0; overflow-y: auto; }
.conversation-row-shell { position: relative; border-bottom: 1px solid #F0E5C4; }
.conversation-row { width: 100%; display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 11px; padding: 14px 16px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
    .conversation-row-shell:hover, .conversation-row-shell.active { background: #FFF4CC; }
.conversation-row-shell:has(.conversation-delete) .conversation-row { padding-right: 48px; }
.conversation-delete { position: absolute; right: 10px; bottom: 9px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #A44747; cursor: pointer; }
.conversation-delete:hover { background: #FFE7E7; color: #8D2525; }
.conversation-delete svg { width: 16px; height: 16px; }
.conversation-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: #FFD54F; color: #222; font-weight: 800; }
.conversation-row-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.conversation-row-copy strong, .conversation-row-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-row-copy span { color: #777; font-size: 13px; }
.conversation-row-meta { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 4px; color: #999; font-size: 11px; }
.conversation-row-meta b, .nav-unread-badge { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: #D93025; color: white; font-size: 10px; line-height: 19px; text-align: center; }
.conversation-list-empty { padding: 35px 20px; color: #777; text-align: center; }
.conversation-list-empty .btn { margin-top: 12px; }
.message-list-skeleton { display: grid; gap: 1px; }
.message-list-skeleton i { display: block; height: 74px; overflow: hidden; border-bottom: 1px solid #F0E5C4; background: linear-gradient(90deg, #F4EFE4 24%, #FFF9EC 38%, #F4EFE4 52%); background-size: 240% 100%; animation: chat-skeleton 1.2s ease-in-out infinite; }
@keyframes chat-skeleton { to { background-position: -240% 0; } }
body.dark-mode .message-list-skeleton i { border-color: #444; background-image: linear-gradient(90deg, #333 24%, #414141 38%, #333 52%); }
.conversation-panel { min-width: 0; min-height: 0; background: white; }
.conversation-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #999; }
.conversation-empty span { font-size: 36px; }
.conversation-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; }
.conversation-empty-icon svg { width: 44px; height: 44px; }
.conversation-view { height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto auto auto auto; }
.conversation-empty[hidden], .conversation-view[hidden], .message-composer[hidden], .message-disabled[hidden], .message-send-state[hidden] { display: none !important; }
.conversation-header { min-height: 72px; display: flex; align-items: center; padding: 12px 20px; border-bottom: 1px solid #E9DDBD; }
.conversation-header a { display: flex; align-items: center; gap: 11px; color: #222; text-decoration: none; }
.conversation-header .conversation-avatar { width: 42px; height: 42px; }
.conversation-header a > span { display: grid; gap: 2px; }
.conversation-header a small { color: #777; font-size: 11px; }
.conversation-back { display: none; margin-right: 8px; border: 0; background: transparent; font-size: 22px; cursor: pointer; }
.message-history { min-height: 0; overflow-y: auto; padding: 22px; }
.new-chat-messages { position: absolute; right: 18px; bottom: 118px; z-index: 4; min-height: 36px; padding: 7px 13px; border: 1px solid #D5B038; border-radius: 999px; background: #FFD54F; color: #29230F; box-shadow: 0 5px 18px rgba(48,36,0,.2); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.new-chat-messages[hidden] { display: none; }
.conversation-panel { position: relative; }
body.dark-mode .new-chat-messages { border-color: #8E741B; background: #5A4919; color: #FFF5CA; }
.chat-active-users { position: relative; min-height: 25px; margin: 0; padding: 5px 18px; border-top: 1px solid #F0E5C4; background: #FFFDF5; color: #16813A; font-size: 11px; font-weight: 700; line-height: 15px; text-align: center; }
.chat-active-users:not(:empty)::before { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #22A559; content: ""; }
.chat-active-users:empty:not(.typing) { display: none; }
.chat-active-users.typing::after { position: absolute; left: 50%; bottom: calc(100% + 5px); z-index: 2; color: #16813A; content: attr(data-typing-label); font-size: 12px; font-style: italic; font-weight: 750; pointer-events: none; transform: translateX(-50%); white-space: nowrap; animation: bucka-typing-fade 1s ease-in-out infinite alternate; }
@keyframes bucka-typing-fade { from { opacity: .55; } to { opacity: 1; } }
.message-bubble-row { --message-swipe-x: 0px; position: relative; display: flex; flex-direction: column; align-items: flex-start; margin: 8px 0; touch-action: pan-y; transform: translateX(var(--message-swipe-x)); }
.message-bubble-row.mine { align-items: flex-end; justify-content: flex-end; }
.message-bubble-row.message-swipe-settling { transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.message-swipe-reply { position: absolute; top: 50%; left: -39px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #22A559; color: white; opacity: 0; pointer-events: none; transform: translateY(-50%) scale(.72); transition: opacity .12s ease, transform .12s ease; }
.message-swipe-reply svg { width: 17px; height: 17px; }
.message-bubble-row.mine .message-swipe-reply { right: -39px; left: auto; transform: translateY(-50%) scaleX(-1) scale(.72); }
.message-bubble-row.message-swiping .message-swipe-reply { opacity: .6; transform: translateY(-50%) scale(1); }
.message-bubble-row.mine.message-swiping .message-swipe-reply { transform: translateY(-50%) scaleX(-1) scale(1); }
.message-bubble-row.message-swipe-ready .message-swipe-reply { opacity: 1; box-shadow: 0 0 0 4px rgba(34,165,89,.18); }
.message-bubble-row.message-pending { opacity: .62; }
.message-bubble-row.theirs:has(.group-message-sender) { width: 100%; flex-direction: column; align-items: flex-start; }
.message-bubble-row.mine:has(.group-message-sender) { width: 100%; flex-direction: column; align-items: flex-end; }
.group-message-sender { display: flex; align-items: center; gap: 6px; margin: 0 0 3px 3px; color: #666; font-size: 11px; text-decoration: none; }
.message-bubble-row.mine .group-message-sender { margin-right: 3px; margin-left: 0; }
.group-message-sender:hover strong { text-decoration: underline; }
.group-message-avatar { width: 20px; height: 20px; }
.message-system { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 12px auto; color: #888; font-size: 12px; text-align: center; }
.message-system time { font-size: 10px; }
.chat-group-dialog { width: min(480px, calc(100% - 28px)); max-height: 82vh; padding: 0; border: 0; border-radius: 18px; background: white; }
.chat-group-dialog::backdrop { background: rgba(0,0,0,.45); }
.chat-group-dialog form { display: grid; gap: 14px; padding: 20px; }
.chat-group-dialog label { display: grid; gap: 6px; font-weight: 700; }
.chat-group-dialog input, .chat-group-dialog select { min-height: 42px; padding: 8px 10px; border: 1px solid #D9D1BF; border-radius: 10px; font: inherit; }
.chat-group-dialog fieldset { min-width: 0; max-height: 260px; overflow: auto; padding: 10px; border: 1px solid #E5DDCB; border-radius: 12px; }
.chat-group-friend-list, .chat-member-list { display: grid; gap: 7px; }
.chat-group-friend { grid-template-columns: auto 1fr auto; align-items: center; font-weight: 600 !important; }
.chat-group-friend .friend-avatar, .chat-member-row .friend-avatar { width: 38px; height: 38px; }
.chat-group-friend input { min-height: 0; }
.chat-group-info-head, .chat-member-row { display: flex; align-items: center; gap: 10px; }
.chat-group-info-head > div, .chat-member-row > span { display: grid; gap: 2px; }
.chat-group-info-head small, .chat-member-row small { color: #777; font-size: 11px; }
.chat-member-actions { display: flex !important; grid-auto-flow: column; gap: 5px; margin-left: auto; }
.chat-member-actions button, .group-leave, [data-rename-group] button { min-height: 34px; border: 0; border-radius: 9px; padding: 0 9px; cursor: pointer; }
.chat-member-actions .danger, .group-leave.danger { background: #FDE8E8; color: #B42318; }
body.dark-mode .chat-group-dialog { background: #2b2b2b; color: white; }
body.dark-mode .group-message-sender { color: #D0D0D0; }
.message-bubble { width: fit-content; min-width: 44px; max-width: min(72%, 560px); padding: 10px 13px 7px; border-radius: 16px 16px 16px 4px; background: #F3EFDf; }
.message-bubble-row.mine .message-bubble { border-radius: 16px 16px 4px 16px; background: #FFD54F; color: #222; }
.message-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; word-break: normal; hyphens: none; }
.message-bubble time { display: block; margin-top: 4px; color: #777; font-size: 10px; text-align: right; }
.message-reactions { display: flex; flex-wrap: wrap; gap: 4px; max-width: min(72%, 560px); margin-top: -3px; padding: 0 5px; }
.message-reaction { display: inline-flex; align-items: center; gap: 3px; min-width: 30px; min-height: 25px; padding: 2px 7px; border: 1px solid #DED7C5; border-radius: 999px; background: #FFF; color: #333; font: inherit; cursor: pointer; }
.message-reaction.mine { border-color: #D99A00; background: #FFF6D4; }
.message-reaction b { font-size: 11px; }
.message-receipt { margin: 3px 5px 0; color: #8A8170; font-size: 10px; font-weight: 700; }
.message-reply-reference { display: grid; width: 100%; margin-bottom: 7px; padding: 6px 8px; border: 0; border-left: 3px solid #22A559; border-radius: 6px; background: rgba(255,255,255,.58); color: inherit; text-align: left; cursor: pointer; }
.message-reply-reference small { color: #16813A; font-weight: 800; }
.message-reply-reference span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; opacity: .78; }
.message-reply-compose { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border-top: 1px solid #E9DDBD; background: #FFF9E8; }
.message-reply-compose[hidden] { display: none; }
.message-reply-compose > span { min-width: 0; display: grid; flex: 1; }
.message-reply-compose small { color: #16813A; font-weight: 800; }
.message-reply-compose strong { overflow: hidden; color: #666; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.message-reply-compose button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: #777; font-size: 22px; cursor: pointer; }
.message-highlight .message-bubble { animation: message-highlight 1.2s ease; }
@keyframes message-highlight { 35% { box-shadow: 0 0 0 4px rgba(34,165,89,.35); } }
.shared-post-message { display: grid; gap: 3px; width: min(290px, 62vw); padding: 10px; border-radius: 11px; background: rgba(255,255,255,.72); color: #222; text-decoration: none; }
.shared-post-message small { color: #777; }
.shared-post-message span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.shared-post-message img { width: 100%; height: 105px; margin-top: 5px; border-radius: 8px; object-fit: cover; }
.chat-deska-invitation { display: grid; justify-items: start; gap: 5px; width: min(290px, 62vw); padding: 12px; border-radius: 12px; background: rgba(255,255,255,.76); color: #292929; }
.chat-deska-invitation-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 2px; border-radius: 50%; background: #FFD54F; }
.chat-deska-invitation-icon svg { width: 17px; height: 17px; }
.chat-deska-invitation small { color: #777; font-weight: 700; }
.chat-deska-invitation > a { color: #292929; font-size: 16px; font-weight: 800; text-decoration: none; }
.chat-deska-invitation-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 7px; margin-top: 7px; }
.chat-deska-invitation-actions button { min-height: 34px; border: 0; border-radius: 8px; cursor: pointer; font-weight: 750; }
.chat-deska-invitation-actions button:first-child { background: #FFD54F; color: #292929; }
.chat-deska-invitation-actions button:last-child { background: #EEE9DE; color: #555; }
.chat-invitation-status { margin-top: 5px; color: #716000; font-size: 12px; }
body.dark-mode .chat-deska-invitation { background: rgba(30,30,30,.78); color: white; }
body.dark-mode .chat-deska-invitation > a { color: white; }
.share-sent-confirmation { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: 32px; color: #218739; text-align: center; }
.share-sent-confirmation svg { width: 78px; height: 78px; stroke-width: 1.8; }
.share-sent-confirmation strong { color: #222; font-size: 27px; }
body.dark-mode .share-sent-confirmation strong { color: #fff; }
body.dark-mode .bucka-share-sheet, body.dark-mode .post-success-dialog { background: #2b2b2b; border-color: #494949; color: white; }
.action-confirmation-dialog { position: fixed; inset: 0; width: min(310px, calc(100% - 40px)); height: fit-content; margin: auto; padding: 0; border: 1px solid #D9E8DC; border-radius: 20px; background: white; }
.action-confirmation-dialog::backdrop { background: rgba(0,0,0,.42); }
.bucka-user-avatar { overflow: hidden; object-fit: cover; border-radius: 50%; flex: 0 0 auto; }
.bucka-user-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--avatar-color); color: #fff; font-weight: 800; line-height: 1; background-image: none !important; }
.bucka-deska-icon { overflow: hidden; flex: 0 0 auto; }
.bucka-deska-icon img { width: 100%; height: 100%; object-fit: cover; }
.bucka-system-dialog { position: fixed; inset: 0; width: min(390px, calc(100% - 32px)); height: fit-content; margin: auto; padding: 0; border: 0; border-radius: 20px; background: transparent; color: inherit; }
.bucka-system-dialog::backdrop { background: rgba(0,0,0,.48); backdrop-filter: blur(2px); }
dialog[data-bucka-no-keyboard="true"]:focus { outline: none; }
.bucka-dialog-panel { padding: 22px; border-radius: inherit; background: #fff; box-shadow: 0 20px 55px rgba(0,0,0,.24); }
.bucka-dialog-panel h2 { margin: 0 0 8px; font-size: 20px; }
.bucka-dialog-panel p { margin: 0 0 20px; color: #626262; line-height: 1.45; }
.bucka-dialog-actions { display: grid; gap: 8px; }
.bucka-dialog-actions button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 0; border-radius: 12px; background: #FFF4CC; color: #2e2e2e; font: inherit; font-weight: 750; cursor: pointer; }
.bucka-dialog-actions button.danger { background: #FDE8E8; color: #C62828; }
.bucka-dialog-actions button.confirm { background: #22A559; color: #fff; }
.bucka-dialog-actions button.confirm:hover { background: #198447; }
.bucka-dialog-actions button.quiet { border: 1px solid #E7E1D4; background: #fff; color: #666; }
.bucka-dialog-actions svg { width: 19px; height: 19px; }
.bucka-system-dialog.action-menu .bucka-dialog-actions button { justify-content: flex-start; }
.bucka-system-dialog.post-icon-menu .bucka-dialog-actions { grid-template-columns: repeat(auto-fit, 44px); gap: 8px; margin-top: 14px; }
.bucka-system-dialog.post-icon-menu .bucka-dialog-actions button { width: 44px; min-height: 44px; padding: 8px; justify-content: center; border-radius: 10px; background: #F3EEE2; color: #444; }
.bucka-system-dialog.post-icon-menu .bucka-dialog-actions button.danger { color: #C62828; }
body.dark-mode .bucka-system-dialog.post-icon-menu .bucka-dialog-actions button { background: #444; color: #eee; }
body.dark-mode .bucka-system-dialog.post-icon-menu .bucka-dialog-actions button.danger { color: #ff9090; }
body.dark-mode .bucka-dialog-panel { background: #2b2b2b; }
body.dark-mode .bucka-dialog-panel p { color: #c9c9c9; }
.action-confirmation-content { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: 32px; color: #218739; text-align: center; }
.action-confirmation-content svg { width: 78px; height: 78px; stroke-width: 1.8; }
.action-confirmation-content strong { color: #222; font-size: 27px; }
.action-confirmation-dialog.bucka-confirmation { border-color: #E7A0B0; }
.action-confirmation-dialog.bucka-confirmation .action-confirmation-content { color: #D66F88; }
body.dark-mode .action-confirmation-dialog { background: #2b2b2b; border-color: #494949; }
body.dark-mode .action-confirmation-content strong { color: #fff; }
.empty-message-history { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999; }
.message-composer { display: grid; grid-template-columns: minmax(0,1fr) 46px; gap: 9px; padding: 14px 18px; border-top: 1px solid #E9DDBD; background: #FFFDF5; }
.message-input-control { position: relative; min-width: 0; }
.message-composer textarea { width: 100%; resize: none; min-height: 44px; max-height: 120px; padding: 11px 48px 11px 13px; border: 1px solid #DDD0AA; border-radius: 13px; font: inherit; }
.message-composer button { border: 0; border-radius: 50%; background: #FFD54F; font-size: 20px; cursor: pointer; }
#message-image-button { position: absolute; right: 5px; top: 50%; display: grid; width: 36px; height: 36px; place-items: center; padding: 0; transform: translateY(-50%); background: transparent; color: #6E6346; }
#message-image-button svg { width: 21px; height: 21px; }
.message-image-preview { position: relative; grid-column: 1 / -1; width: 86px; height: 86px; overflow: visible; }
.message-image-preview img { width: 100%; height: 100%; object-fit: cover; border: 1px solid #D9C992; border-radius: 13px; }
.message-image-preview button { position: absolute; top: -7px; right: -7px; display: grid; width: 25px; height: 25px; place-items: center; padding: 0; background: #333; color: #fff; font-size: 17px; }
.message-image-frame { position: relative; display: grid; min-width: 160px; min-height: 110px; place-items: center; overflow: hidden; border-radius: 12px; background: rgba(0,0,0,.08); color: #777; font-size: 12px; }
.message-image-frame img { display: none; width: min(280px, 62vw); max-height: 340px; object-fit: cover; border-radius: inherit; }
.message-image-frame.loaded > span { display: none; }
.message-image-frame.loaded img { display: block; }
.message-disabled { margin: 0; padding: 14px 20px; border-top: 1px solid #E9DDBD; background: #FFF4CC; color: #6D5700; text-align: center; font-size: 13px; }
.message-send-state { padding: 9px 18px; background: #FFF0F0; color: #A32121; font-size: 13px; }
.message-send-state button { margin-left: 7px; border: 0; background: transparent; color: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.conversation-load-error { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #777; }
.message-composer button:disabled { cursor: wait; opacity: .55; }
.load-older-messages { display: block; margin: 0 auto 14px; padding: 8px 13px; border: 0; border-radius: 999px; background: #FFF4CC; color: #6D5700; cursor: pointer; }
.new-conversation-dialog { width: min(430px, calc(100% - 30px)); max-height: 75vh; padding: 0; border: 1px solid #E9DDBD; border-radius: 16px; background: white; }
.new-conversation-dialog::backdrop { background: rgba(0,0,0,.38); }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; }
.dialog-heading button { border: 0; background: transparent; font-size: 25px; cursor: pointer; }
.new-conversation-dialog > input { width: calc(100% - 40px); margin: 0 20px 12px; padding: 11px; border: 1px solid #DDD0AA; border-radius: 10px; }
#new-conversation-friends { max-height: 48vh; overflow-y: auto; }
.new-conversation-friend { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 20px; border: 0; border-top: 1px solid #F0E5C4; background: transparent; text-align: left; cursor: pointer; }
.new-conversation-friend:hover { background: #FFF4CC; }
.bucka-share-sheet { position: fixed; inset: auto 0 0; width: min(520px, 100%); max-height: 82vh; margin: 0 auto; padding: 0; border: 1px solid #E9DDBD; border-bottom: 0; border-radius: 18px 18px 0 0; background: white; color: #292929; }
.bucka-share-sheet::backdrop { background: rgba(0,0,0,.42); }
.bucka-share-sheet.share-sent, .post-success-dialog { position: fixed; inset: 0; width: min(310px, calc(100% - 40px)); height: fit-content; margin: auto; padding: 0; border: 1px solid #D9E8DC; border-radius: 20px; background: white; }
.post-success-dialog::backdrop { background: rgba(0,0,0,.42); }
.share-sheet-heading { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid #E9DDBD; }
.share-sheet-heading h2 { margin: 0; color: inherit; font-size: 19px; }
.share-sheet-heading button { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font: inherit; font-size: 25px; line-height: 1; cursor: pointer; }
.share-sheet-heading button:hover { background: #FFF4CC; }
.bucka-share-sheet section { padding: 14px 18px; }
.bucka-share-sheet h3 { margin-bottom: 9px; color: #806100; font-size: 11px; letter-spacing: .08em; }
.bucka-share-sheet input { width: 100%; padding: 9px 11px; border: 1px solid #DDD0AA; border-radius: 10px; background: #fff; color: #292929; font: inherit; }
.bucka-share-sheet input::placeholder { color: #817A69; opacity: 1; }
.share-friends { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.share-friend { min-width: 0; padding: 8px 4px; border: 0; border-radius: 10px; background: #FFFDF5; color: #292929; font: inherit; cursor: pointer; }
.share-friend:hover { background: #FFF4CC; }
.share-friend-avatar { display: grid; place-items: center; width: 42px; height: 42px; margin: 0 auto 5px; overflow: hidden; border-radius: 50%; background: #FFD54F; font-weight: 800; }
.share-friend-avatar img { width: 100%; height: 100%; object-fit: cover; }
.share-friend > span:last-child { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.share-elsewhere { border-top: 1px solid #E9DDBD; }
.share-sheet-action { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 4px; border: 0; border-radius: 10px; background: transparent; color: #292929; font: inherit; cursor: pointer; text-align: left; }
.share-sheet-action:hover { background: #FFF4CC; }
.share-sheet-action svg { width: 19px; height: 19px; color: currentColor; stroke: currentColor; }
body.dark-mode .bucka-share-sheet { background: #292929; border-color: #4A463C; color: #F5F1E8; }
body.dark-mode .share-sheet-heading, body.dark-mode .share-elsewhere { border-color: #4A463C; }
body.dark-mode .bucka-share-sheet h3 { color: #E8CF73; }
body.dark-mode .bucka-share-sheet input { border-color: #5B5546; background: #37342D; color: #F5F1E8; color-scheme: dark; }
body.dark-mode .bucka-share-sheet input::placeholder { color: #AAA392; }
body.dark-mode .share-friend { background: #34312B; color: #F5F1E8; }
body.dark-mode .share-friend:hover, body.dark-mode .share-sheet-action:hover, body.dark-mode .share-sheet-heading button:hover { background: #51492E; }
body.dark-mode .share-sheet-action { color: #F5F1E8; }
body.dark-mode .share-friends > p { color: #BBB4A3; }
.nav-unread-badge { position: absolute; top: -5px; right: -5px; border: 2px solid #FFD54F; line-height: 15px; }
.bottom-nav-item { position: relative; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
body.dark-mode .messages-page, body.dark-mode .conversation-panel, body.dark-mode .new-conversation-dialog { background: #2b2b2b; border-color: #444; color: white; }
body.dark-mode .conversation-sidebar, body.dark-mode .message-composer { background: #333; border-color: #444; }
body.dark-mode .conversation-sidebar, body.dark-mode .conversation-row-shell, body.dark-mode .conversation-header, body.dark-mode .message-composer, body.dark-mode .new-conversation-friend { border-color: #444; }
body.dark-mode .conversation-row-shell:hover, body.dark-mode .conversation-row-shell.active, body.dark-mode .new-conversation-friend:hover { background: #51492e; }
body.dark-mode .conversation-header a { color: white; }
body.dark-mode .message-bubble { background: #444; }
body.dark-mode .message-bubble-row.mine .message-bubble { background: #FFD54F; color: #222; }
body.dark-mode .profile-block-action { border-color: #5B5546; background: #37342D; color: #E8CF73; }
body.dark-mode .profile-block-action.active { border-color: #8E4944; background: #462E2C; color: #FFAAA4; }
body.dark-mode .profile-block-warning { border-color: #66552C; background: #3B3524; color: #E8CF73; }

.repost-original-card.original-missing { display: grid; min-height: 112px; place-items: center; border-style: dashed; background: #F7F4EC; }
.repost-original-card.original-missing > * { display: none !important; }
.repost-original-card.original-missing::before { padding: 20px; color: #817967; content: "Originalna objava je že izginila."; font-size: 14px; font-weight: 700; text-align: center; }
.repost-expiry { margin-left: 6px; color: #A66D00; font-size: 11px; font-weight: 800; white-space: nowrap; }
body.dark-mode .repost-original-card.original-missing { background: #302F2B; }
body.dark-mode .repost-original-card.original-missing::before { color: #BDB7AA; }
body.dark-mode .repost-expiry { color: #E6C35E; }
body.dark-mode .message-reaction { border-color: #666; background: #363636; color: #FFF; }
body.dark-mode .message-reaction.mine { border-color: #E8BD45; background: #4A422B; }
body.dark-mode .message-receipt { color: #BDB7AA; }
body.dark-mode .message-composer textarea, body.dark-mode .new-conversation-dialog > input { background: #222; color: white; border-color: #555; }
body.dark-mode .chat-active-users { border-color: #444; background: #333; color: #72D890; }
body.dark-mode .chat-active-users.typing::after { color: #72D890; }
body.dark-mode .message-reply-compose { border-color: #444; background: #333; }
body.dark-mode .message-reply-reference { background: rgba(0,0,0,.2); }

.pull-refresh-indicator { position: fixed; top: calc(env(safe-area-inset-top) + 6px); left: 50%; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #FFF4CC; color: #6D5700; box-shadow: 0 4px 14px rgba(0,0,0,.2); opacity: clamp(0, calc(var(--pull-distance, 0px) / 45px), 1); pointer-events: none; transform: translate(-50%, calc(-52px + var(--pull-distance, 0px))); transition: transform .18s ease, opacity .18s ease, background .18s ease; z-index: 2200; }
.pull-refresh-indicator svg { width: 21px; height: 21px; transform: rotate(var(--pull-rotation, 0deg)); }
.pull-refresh-indicator.ready { background: #FFD54F; }
.pull-refresh-indicator.refreshing svg { animation: pull-refresh-spin .7s linear infinite; }
@keyframes pull-refresh-spin { to { transform: rotate(360deg); } }
.mobile-page-swipe-preview { position: fixed; inset: 0; overflow: hidden; background: #fff; box-shadow: 0 0 28px rgba(0,0,0,.25); pointer-events: none; transition: none; z-index: 2100; }
.mobile-page-swipe-preview[data-direction="1"] { transform: translateX(100%); }
.mobile-page-swipe-preview[data-direction="-1"] { transform: translateX(-100%); }
.mobile-page-swipe-preview iframe { width: 100%; height: 100%; border: 0; background: #fff; pointer-events: none; }
.mobile-page-swipe-preview.returning, .mobile-page-swipe-preview.committing { transition: transform .17s ease-out; }
.mobile-page-swipe-preview.returning[data-direction="1"] { transform: translateX(100%) !important; }
.mobile-page-swipe-preview.returning[data-direction="-1"] { transform: translateX(-100%) !important; }
body.dark-mode .pull-refresh-indicator { background: #4A4122; color: #FFD54F; }
body.dark-mode .mobile-page-swipe-preview, body.dark-mode .mobile-page-swipe-preview iframe { background: #2b2b2b; }

@media (max-width: 720px) {
    html, body { overscroll-behavior-x: none; }
    .conversation-row { -webkit-tap-highlight-color: transparent; }
    .conversation-row-shell:hover, .conversation-row-shell.active { background: transparent !important; }
    body.dark-mode .conversation-row-shell:hover, body.dark-mode .conversation-row-shell.active { background: transparent !important; }
}
@media (max-width: 720px) {
    .messages-page { width: 100%; height: calc(100dvh - 95px); min-height: 0; margin: 0 0 95px; grid-template-columns: 1fr; border: 0; border-radius: 0; }
    .conversation-sidebar { border-right: 0; }
    .conversation-panel { display: none; }
    .messages-page.chat-open .conversation-sidebar { display: none; }
    .messages-page.chat-open .conversation-panel { display: block; height: 100%; }
    .conversation-back { display: inline-block; }
    .message-bubble { max-width: 82%; }
}

/* =========================================================
   MOBILE-FIRST APPLICATION SHELL
   ========================================================= */
@media (max-width: 1024px) {
    .groups-sidebar, .groups-sidebar.collapsed { width: 0; z-index: 2600; }
    .groups-panel, .groups-sidebar.collapsed .groups-panel { position: fixed; inset: 0 auto 0 0; width: min(88vw, 400px); height: 100dvh; padding: calc(20px + env(safe-area-inset-top)) 28px calc(100px + env(safe-area-inset-bottom)) 14px; border: 0; border-right: 1px solid #F0E5C4; opacity: 1; overflow-y: auto; pointer-events: auto; transform: translateX(0); transition: transform .25s ease; z-index: 2; }
    .groups-sidebar.collapsed .groups-panel { width: min(88vw, 400px); padding-left: 14px; padding-right: 14px; border-right-width: 1px; transform: translateX(-105%); }
    .groups-toggle, .groups-sidebar.collapsed .groups-toggle { position: fixed; top: calc(88px + env(safe-area-inset-top)); left: 0; width: 44px; height: 48px; min-height: 48px; margin: 0; border: 1px solid #E0C45D; border-left: 0; border-radius: 0 14px 14px 0; background: #FFF4CC; color: #6E5700; box-shadow: 4px 2px 10px rgba(0,0,0,.14); z-index: 4; transition: left .25s ease, transform .25s ease, background-color .15s ease; }
    body.groups-drawer-open { overflow: hidden; touch-action: none; }
    body.groups-drawer-open .global-friends-shortcut, body.groups-drawer-open .global-leaderboard-shortcut, body.groups-drawer-open .global-notification-shortcut, body.groups-drawer-open .global-settings-shortcut { display: none !important; }
    .groups-drawer-backdrop { display: block; position: fixed; inset: 0; width: 100vw; height: 100dvh; border: 0; background: rgba(20,20,20,.48); opacity: 1; z-index: 1; }
    .groups-sidebar.collapsed .groups-drawer-backdrop { opacity: 0; pointer-events: none; }
    .groups-drawer-close { position: fixed; top: 25dvh; left: min(calc(88vw - 22px), 378px); z-index: 5; display: grid; width: 22px; height: 50dvh; min-height: 180px; padding: 0; place-items: center; border: 1px solid #D9BF5C; border-right: 0; border-radius: 15px 0 0 15px; background: #FFE782; color: #544300; box-shadow: -4px 0 12px rgba(0,0,0,.12); cursor: grab; touch-action: none; }
    .groups-drawer-close:active { cursor: grabbing; }
    .groups-drawer-close svg { width: 18px; height: 42px; }
    .groups-panel.dragging { transition: none; }
    .groups-panel.dragging + .groups-toggle { transition: none; }
    body.dark-mode .groups-drawer-close { border-color: #756329; background: #4B4225; color: #F5D96C; }
    .groups-heading { align-items: center; }
    body:not(.groups-rail-collapsed) .home-feed, body:not(.groups-rail-collapsed) main.main { transform: none; }
}

@media (max-width: 600px) {
    :root { --mobile-nav-height: 66px; }
    body { font-size: 16px; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    body.has-bottom-nav { padding-bottom: calc(var(--mobile-nav-height) + 18px); }
    .pwa-install-banner { position: fixed; top: 0; left: env(safe-area-inset-left); right: env(safe-area-inset-right); z-index: 1400; display: flex; align-items: center; justify-content: center; min-height: calc(42px + env(safe-area-inset-top)); padding: calc(9px + env(safe-area-inset-top)) 44px 9px 12px; border-bottom: 1px solid #DDB936; background: rgba(255,213,79,.97); box-shadow: 0 3px 12px rgba(0,0,0,.12); color: #2E2E2E; font-size: 13px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; }
    .pwa-install-banner > a { color: inherit; text-decoration: none; }
    .pwa-install-banner > button { position: absolute; right: 8px; bottom: 7px; display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.56); color: #3C3214; cursor: pointer; }
    .pwa-install-banner > button svg { width: 17px; height: 17px; }
    .pwa-install-banner > button:active { background: rgba(255,255,255,.85); transform: scale(.96); }
    .install-guide-page { width: 100%; max-width: none; margin: 0; padding: calc(24px + env(safe-area-inset-top)) 10px calc(var(--mobile-nav-height) + 18px); }
    .install-guide-heading { margin-bottom: 18px; }
    .install-guide-heading p { font-size: 14px; }
    .install-guide-grid { grid-template-columns: 1fr; gap: 12px; }
    .install-guide-card { min-width: 0; padding: 18px 16px; border-radius: 14px; }
    .install-guide-card h2 { font-size: 18px; }
    .install-steps { gap: 14px; }
    .install-steps li { font-size: 14px; }
    .install-steps li::before { width: 26px; height: 26px; }
    main, .main, .home-feed, .profile-page, .settings-page, .post-container, .board-page, .admin-page { width: 100%; max-width: none; margin: 0 auto; padding: 18px 10px calc(var(--mobile-nav-height) + 18px); }
    .main:has(.search-title), .home-feed, .board-page { padding-top: calc(72px + env(safe-area-inset-top)); }
    .site-header { padding: calc(12px + env(safe-area-inset-top)) 14px 12px; }
    .site-header a { font-size: 16px; }

    .bottom-nav { bottom: 0; left: 0; right: 0; height: var(--mobile-nav-height); padding: 7px 8px 1px; background: rgba(255,213,79,.97); border-top: 1px solid #E1C45E; box-shadow: 0 -5px 20px rgba(0,0,0,.12); pointer-events: auto; }
    .bottom-nav-pill { width: min(100%, 500px); height: 58px; justify-content: space-around; gap: 2px; padding: 5px; border-radius: 0; background: transparent; box-shadow: none; }
    .bottom-nav-item { width: 48px; height: 48px; background: transparent; }
    .bottom-nav-item:nth-child(3) { width: 52px; height: 52px; margin-top: -14px; background: #2E2E2E; color: #FFD54F; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
    .bottom-nav-item.active { background: rgba(255,255,255,.58); }
    .bottom-nav-item:nth-child(3).active { background: #111; color: #FFD54F; }

    .post-card, .profile-card, .activity-section, .comments-section, .settings-list { border-radius: 13px; box-shadow: none; }
    .post-card { margin-bottom: 10px; padding: 12px 11px; }
    .home-friend-recommendations { margin-bottom: 12px; padding: 14px 12px; border-radius: 13px; box-shadow: none; }
    .home-recommendation-grid { grid-template-columns: 1fr; gap: 7px; }
    .home-recommendation-row { padding: 9px 10px; }
    .home-recommendation-person strong { font-size: 14px; }
    .home-recommendation-add { min-height: 36px; padding: 7px 10px; font-size: 11px; }
    .search-discovery-section, .search-discovery-section.home-friend-recommendations { margin-bottom: 12px; padding: 14px 12px; border-radius: 13px; box-shadow: none; }
    .search-reconnect-row { gap: 8px; padding: 9px; }
    .search-reconnect-person small { font-size: 11px; }
    .search-message-button { min-height: 40px; display: inline-flex; align-items: center; }
    .post-card:hover, .activity-item:hover { transform: none; }
    .post-header { margin-bottom: 8px; }
    .post-header .avatar { width: 36px; height: 36px; margin-right: 8px; }
    .username { font-size: 15px; overflow-wrap: anywhere; }
    .post-title { font-size: 18px; line-height: 1.25; }
    .post-content { margin-bottom: 8px; overflow-wrap: anywhere; }
    .post-feed-image-wrap { width: calc(100% + 22px); height: 230px; margin-left: -11px; border-radius: 0; }
    .divider { margin: 8px 0; }
    .post-actions { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
    .post-actions .btn, .post-actions .action-link { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; font-size: 13px; }
    .report-button { margin-left: auto; }

    .feed-search { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
    .feed-search input, input, select, textarea { font-size: 16px; }
    .feed-search .btn { min-width: 52px; padding-inline: 10px; }
    .search-title { font-size: 25px; }
    .board-search-card { align-items: flex-start; padding: 12px; }
    .board-search-policy { white-space: normal; text-align: right; }

    .feed-sort { margin: 10px 2px 14px; }
    .feed-sort label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
    .feed-sort select { width: auto; max-width: 100%; min-height: 44px; padding: 8px 35px 8px 12px; }
    .destination-heading { align-items: flex-start; padding-inline: 4px; }

    .board-header { min-height: 0; padding: 18px 14px; border-radius: 13px 13px 0 0; }
    .board-hero-icon { width: 54px; height: 54px; font-size: 23px; }
    .board-hero-copy { min-width: 0; flex: 1; }
    .board-hero-copy h1 { overflow-wrap: anywhere; font-size: 23px; }
    .board-header-actions { width: 100%; display: flex; flex-wrap: wrap; justify-content: stretch; }
    .board-header-actions > * { flex: 1 1 auto; }
    .board-membership, .board-header-actions .btn { min-height: 44px; }
    .board-tabs { overflow-x: auto; scrollbar-width: none; }
    .board-tab { min-width: 92px; min-height: 46px; padding: 10px; }
    .board-info-card { border-radius: 0 0 13px 13px; }

    .comments-section { padding: 12px 10px; }
    .comment-detail-page .post-container { width: 100%; max-width: none; margin: 0; padding: 0 0 calc(var(--mobile-nav-height) + 18px); }
    .comment-detail-page #post-content-area > .post-card { margin: 0; padding: 14px 12px; border-radius: 0; }
    .comment-detail-page .comments-section { padding: 14px 12px; border-radius: 0; }
    .comment-card { gap: 9px; }
    .comment-body { min-width: 0; }
    .comment-text { overflow-wrap: anywhere; }
    .comment-composer { position: static; margin: 0 0 14px; padding: 0; background: transparent; border: 0; }
    .comment-input { flex-wrap: nowrap; gap: 6px; }
    .comment-input input[type="text"] { min-width: 0; flex: 1 1 auto; padding: 10px; font-size: 16px; }
    .comment-text-control input[type="text"] { flex-basis: auto; padding-right: 5px; }
    .comment-media-button, .comment-input button { min-width: 44px; min-height: 44px; padding: 7px !important; font-size: 0; }
    .comment-media-button { font-size: 18px; }
    #comment-send-button::after { content: none; }

    .create-post-card { width: 100%; min-height: calc(100dvh - var(--mobile-nav-height)); margin: 0; padding: 14px 12px; border: 0; border-radius: 0; }
    .create-post-page .create-post-card { height: calc(100dvh - var(--mobile-nav-height)); max-height: calc(100dvh - var(--mobile-nav-height)); }
    .create-post-page.poll-composer-open .create-post-card { height: auto; min-height: calc(100dvh - var(--mobile-nav-height)); max-height: none; padding-bottom: calc(var(--mobile-nav-height) + 16px); }
    .create-post-user { margin-bottom: 11px; }
    .create-post-destination-row { grid-template-columns: 1fr; gap: 6px; padding: 9px 10px; }
    .create-post-card .post-body-composer textarea { min-height: 29dvh; padding: 12px; border: 0; }
    .posting-destination-control select { max-width: 180px; font-size: 13px; }
    .poll-option-row { grid-template-columns: 74px minmax(0, 1fr); }
    .profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .profile-actions > * { width: 100%; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
    .profile-actions > .edit-profile-btn { width: 40px; }
    .profile-actions > .btn-primary { min-height: 44px; }

    .profile-card { padding: 17px 13px; margin-bottom: 12px; }
    .profile-card-top { align-items: flex-start; flex-wrap: wrap; justify-content: center; text-align: center; }
    .profile-card-top .profile-pic { width: 88px; height: 88px; order: 2; }
    .profile-identity { flex-basis: 100%; order: 3; align-items: center; }
    .profile-card.viewing-other-profile .profile-card-top { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .profile-card.viewing-other-profile .profile-card-top .profile-pic { order: initial; }
    .profile-card.viewing-other-profile .friend-button-container { margin: 0; align-self: auto; }
    .profile-card.viewing-other-profile .profile-identity { align-items: center; text-align: center; }
    .profile-card.viewing-other-profile .profile-friend-action { min-height: 44px; }
    .profile-header-actions { order: 1; width: 100%; justify-content: center; overflow: visible; }
    .profile-header-action { min-width: 88px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .profile-bio { padding: 13px; }
    .profile-details-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
    .profile-personalization-layout { grid-template-columns: 1fr; gap: 8px; }
    .profile-personalization-column { gap: 8px; }
    .profile-featured-friends { min-height: 0; }
.profile-detail { min-width: 0; padding: 11px 7px; }
    .detail-value { overflow-wrap: anywhere; }
    .profile-stats { gap: 3px; }
    .profile-stats strong { font-size: 17px; }
    .profile-stats span { line-height: 1.25; overflow-wrap: anywhere; }
    .activity-section { padding: 15px 12px; }
    .tab-bar { overflow-x: auto; }
    .tab { flex: 1; min-width: 100px; min-height: 44px; padding: 8px; }

    .settings-page { padding-inline: 12px; }
    .settings-list { border-radius: 13px; }
    .settings-row { min-height: 54px; padding: 14px 16px; }
    .settings-form-card { width: 100%; margin-top: 10px; }
    .final-delete-actions { flex-direction: column-reverse; }
    .final-delete-actions > * { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; }

    .admin-page { padding-inline: 10px; }
    .admin-stat-grid { grid-template-columns: 1fr; }
    .admin-report-card, .admin-user-card, .admin-content-card, .admin-group-card { align-items: stretch; flex-direction: column; }
    .admin-report-card .btn, .admin-user-card .btn, .admin-content-card .btn, .admin-group-card .btn { min-height: 40px; }
    .admin-search, .admin-filter-row { flex-direction: column; }
    .admin-section-heading { align-items: start; }
    .admin-detail-grid { grid-template-columns: 1fr 1fr; }
    .admin-member-list > div { align-items: stretch; flex-direction: column; }
    .admin-dialog { max-height: calc(100dvh - 20px); overflow-y: auto; padding: 18px; }

    .alert-card { padding: 14px; overflow-wrap: anywhere; }
    .legal-page { margin: 0 auto; padding: 18px 10px calc(var(--mobile-nav-height) + 18px); }
    .legal-card { padding: 18px 14px; border-radius: 13px; }
}

@media (max-width: 350px) {
    .bottom-nav-item { width: 44px; height: 44px; }
    .post-actions .btn, .post-actions .action-link { padding-inline: 7px; font-size: 12px; }
    .profile-header-action { min-width: 82px; font-size: 11px; }
    .profile-stats span { font-size: 10px; }
    .board-search-card { display: grid; grid-template-columns: auto minmax(0,1fr); }
    .board-search-policy, .board-search-action { grid-column: 2; text-align: left; }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .main, main, .home-feed, .profile-page, .settings-page, .post-container, .board-page { width: min(100%, 760px); padding-left: 22px; padding-right: 22px; }
    .bottom-nav { bottom: 18px; }
}
.suspension-banner { position: sticky; z-index: 1100; top: 0; display: flex; justify-content: center; gap: 12px; padding: 9px 15px; background: #C62828; color: white; font-size: 13px; }
body.dark-mode .admin-stat-grid > div, body.dark-mode .admin-report-card, body.dark-mode .admin-user-card, body.dark-mode .admin-content-card, body.dark-mode .admin-group-card, body.dark-mode .admin-action-row, body.dark-mode .alert-card, body.dark-mode .admin-dialog { background: #2b2b2b; border-color: #444; color: white; }
body.dark-mode .admin-decision-field-internal { border-color: #ffd43b; background: #3b3218; }
body.dark-mode .admin-decision-field-reporter { border-color: #60a5fa; background: #172554; }
body.dark-mode .admin-metric-card, body.dark-mode .admin-chart-card { border-color: #444; background: #2B2B2B; color: white; }
body.dark-mode .admin-metric-card strong { color: white; }
body.dark-mode .admin-chart-heading p, body.dark-mode .admin-chart-heading label, body.dark-mode .admin-metric-card span { color: #B8B8B8; }
body.dark-mode .admin-chart-heading select { border-color: #555; background: #353535; color: white; }
body.dark-mode .admin-search input, body.dark-mode .admin-filter-row input, body.dark-mode .admin-filter-row select, body.dark-mode .admin-dialog textarea, body.dark-mode .admin-dialog select, body.dark-mode .admin-dialog input { border-color: #555; background: #222; }
body.dark-mode .admin-detail-grid > span { background: #222; color: #aaa; }
.admin-group-settings { display: grid; gap: 11px; margin: 18px 0; padding: 14px; border: 1px solid #E5D7AD; border-radius: 13px; background: #FFF9E8; }
.admin-group-settings > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.admin-group-settings label { display: grid; gap: 5px; font-weight: 750; }
.admin-group-settings select { min-height: 42px; padding: 8px 34px 8px 10px; border: 1px solid #D9CDAE; border-radius: 10px; background: #FFF; color: inherit; font: inherit; }
.admin-group-settings > button { justify-self: end; }
.admin-group-icon-editor { display: grid; grid-template-columns: 104px minmax(0,1fr); align-items: center; gap: 16px; margin: 18px 0; padding: 14px; border: 1px solid #E5D7AD; border-radius: 13px; background: #FFF9E8; }
.admin-group-icon-editor .icon-image-picker { margin: 0 auto; }
.admin-group-icon-editor > div { display: grid; min-width: 0; gap: 7px; }
.admin-group-icon-editor h3, .admin-group-icon-editor p { margin: 0; }
.admin-group-icon-editor p { color: #766D58; font-size: 12px; }
.admin-group-icon-editor label:not(.icon-image-picker) { display: grid; gap: 5px; font-weight: 750; }
.admin-group-icon-editor input { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #D9CDAE; border-radius: 10px; background: #FFF; color: inherit; font: inherit; }
.admin-group-icon-editor .btn { justify-self: start; }
body.dark-mode .admin-group-settings { border-color: #514A36; background: #302D24; }
body.dark-mode .admin-group-settings select { border-color: #555; background: #353535; color: #FFF; }
body.dark-mode .admin-group-icon-editor { border-color: #514A36; background: #302D24; }
body.dark-mode .admin-group-icon-editor p { color: #C9C1AF; }
body.dark-mode .admin-group-icon-editor input { border-color: #555; background: #353535; color: #FFF; }
@media (max-width: 560px) { .admin-group-settings > div { grid-template-columns: 1fr; } .admin-group-settings > button { width: 100%; } .admin-group-icon-editor { grid-template-columns: 1fr; } .admin-group-icon-editor .btn { width: 100%; } }
body.dark-mode .admin-detail-grid strong { color: white; }
body.dark-mode .reported-context { background: #333; }
@media (max-width: 650px) { .admin-stat-grid { grid-template-columns: 1fr; } .suspension-banner { flex-direction: column; } }
@media (max-width: 760px) { .admin-metric-grid { grid-template-columns: 1fr; } .admin-chart-heading { align-items: stretch; flex-direction: column; } .admin-chart-heading label { flex-basis: auto; } .admin-chart-wrap { height: 290px; } }

/* =========================
   AUTH FORMS
========================= */
.auth-card { max-width: 420px; margin: 40px auto; width: calc(100% - 32px); }
.auth-subtitle { text-align: center; margin: -8px 0 24px; color: #777; }
.auth-btn { width: 100%; margin-top: 16px; }
.auth-footer { margin-top: 24px; text-align: center; }
.auth-footer a { font-weight: 600; text-decoration: none; }
.auth-footer a:hover { text-decoration: underline; }
.forgot-password-link { display: block; width: max-content; margin: 13px auto 0; color: #8A6500; font-size: 13px; font-weight: 750; text-decoration: none; }
.forgot-password-link:hover { text-decoration: underline; }
.password-reset-card { overflow: hidden; }
.password-reset-heading { display: grid; justify-items: center; margin-bottom: 22px; text-align: center; }
.password-reset-heading > span { margin-bottom: 9px; color: #D99A00; font-size: 20px; font-weight: 950; letter-spacing: .18em; }
.password-reset-heading h1 { margin: 0 0 7px; }
.password-reset-heading p, .password-reset-help { margin: 0; color: #777064; line-height: 1.45; }
.password-reset-step .auth-btn, .password-reset-success .auth-btn { display: flex; width: 100%; box-sizing: border-box; }
.password-reset-code { font-size: 25px !important; font-weight: 900; letter-spacing: .3em; text-align: center; }
.password-reset-resend { display: block; margin: 14px auto 0; padding: 6px; border: 0; background: transparent; color: #806000; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.password-reset-resend:disabled { color: #99938A; cursor: default; }
.password-reset-message { min-height: 20px; margin: 14px 0 0; color: #287743; font-size: 13px; line-height: 1.4; text-align: center; }
.password-reset-message.error { color: #B3261E; }
.password-reset-success { display: grid; justify-items: stretch; gap: 10px; text-align: center; }
.password-reset-step[hidden], .password-reset-success[hidden] { display: none !important; }
.password-reset-success strong { font-size: 21px; }
.password-reset-success p { margin: 0 0 6px; color: #777064; }
body.dark-mode .forgot-password-link, body.dark-mode .password-reset-resend { color: #F2D76B; }
body.dark-mode .password-reset-heading p, body.dark-mode .password-reset-help, body.dark-mode .password-reset-success p { color: #BBB4A8; }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; }
.form-group input { width: 100%; box-sizing: border-box; border-radius: 12px; padding: 12px 14px; font-size: 1rem; }

/* =========================
   FRIENDS SYSTEM
========================= */
.friends-title { font-size: 28px; font-weight: 700; margin-bottom: 25px; }
.friends-section { background: white; border-radius: 18px; padding: 22px; margin-bottom: 25px; border: 1px solid #F0E5C4; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.friends-section h2 { font-size: 20px; margin-bottom: 18px; }
.friend-card, .friend-request-card, .friend-request { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 11px 13px; border: 1px solid #E8DFC8; border-radius: 15px; margin-bottom: 10px; background: #FFFDF8; box-shadow: 0 3px 11px rgba(71,52,0,.055); transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.friend-card:last-child, .friend-request-card:last-child { border-bottom: none; }
.friend-card:hover, .friend-request-card:hover { background: #FFFDF5; border-radius: 12px; }
.friend-user { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.friend-card a { display: flex; align-items: center; gap: 12px; }
.friend-avatar { width: 48px; height: 48px; border-radius: 50%; background: #FFD54F; object-fit: cover; flex-shrink: 0; }
.friend-name { font-weight: 700; font-size: 16px; font-size: 17px; color: #2E2E2E; }
.friend-actions, .friend-request-actions { display: flex; gap: 10px; align-items: center; }
.friend-user { min-width: 0; flex: 1; }
.friend-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-actions { flex: 0 0 auto; }
.friend-btn, .friend-request-btn, .accept-friend-btn, .reject-friend-btn, .remove-friend-btn, .cancel-friend-btn, .board-invite-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 13px; border: 1px solid #E3D39F; border-radius: 11px; background: #FFF4CC; color: #5F4B0B; cursor: pointer; font: inherit; font-size: 13px; font-weight: 750; transition: background .15s ease, border-color .15s ease, transform .1s ease; }
.friend-btn svg, .friend-request-btn svg, .accept-friend-btn svg, .board-invite-action svg { width: 16px; height: 16px; }
.accept-friend-btn { border-color: #8FD3A5; background: #E5F7EB; color: #176B35; }
.friend-action-pending, .friend-btn:disabled, .board-invite-action.sent { border-color: #DDD7C8; background: #F3F0E8; color: #777064; opacity: 1; }
.friend-btn:active:not(:disabled), .accept-friend-btn:active:not(:disabled), .board-invite-action:active:not(:disabled) { transform: scale(.97); }
.friend-btn span, .accept-friend-btn span, .board-invite-action span { white-space: nowrap; }
.friend-btn:hover, .friend-request-btn:hover, .accept-friend-btn:hover, .reject-friend-btn:hover, .remove-friend-btn:hover, .cancel-friend-btn:hover { background: #FFD54F; color: black; transform: translateY(-1px); }
.accept-friend-btn { background: #FFF4CC; }
.reject-friend-btn, .cancel-friend-btn { background: #FFF4CC; }
.remove-friend-btn, .friend-btn.remove { background: #FFF4CC; }
.remove-friend-btn:hover, .friend-btn.remove:hover { background: #FFD54F; color: black; }
.friend-btn.remove { background: #ffdddd; color: #c62828; }
.friend-btn.remove:hover { background: #ff6b6b; color: white; }
.friends-empty { text-align: center; padding: 20px; color: #999; }
.friends-only-message { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px 18px; background: #FFFDF5; border: 1px solid #F0E5C4; border-radius: 12px; }
.friends-only-icon { font-size: 24px; flex-shrink: 0; }
.friends-only-message strong { display: block; font-size: 16px; color: #2E2E2E; }
.friends-only-message p { margin: 2px 0 0; font-size: 14px; color: #888; }

/* =========================
   DELETE BUTTONS
========================= */
.delete-comment { margin-top: 10px; padding: 6px 14px; border: none; border-radius: 8px; background: #ff4d4d; color: white; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s ease; }
.delete-comment:hover { background: #d93636; transform: translateY(-1px); }
.delete-comment:active { transform: scale(0.97); }
.delete-post { margin-top: 10px; padding: 6px 14px; border: none; border-radius: 8px; background: #ff4d4d; color: white; font-size: 14px; font-weight: 600; cursor: pointer; transition: 0.2s ease; }
.delete-post:hover { background: #d93636; transform: translateY(-1px); }
.delete-post:active { transform: scale(0.97); }

/* =========================
   FEED SEARCH
========================= */
.feed-search { display: flex; gap: 10px; margin-bottom: 25px; }
.feed-search input { flex: 1; padding: 12px 15px; border: 1px solid #E5D9B8; border-radius: 12px; background: white; color: #2E2E2E; font-size: 15px; outline: none; }
.feed-search input:focus { border-color: #FFD54F; box-shadow: 0 0 0 3px rgba(255, 213, 79, 0.18); }
.feed-search button { white-space: nowrap; }
#search-results-container { margin-bottom: 25px; }
.home-search { position: relative; z-index: 5; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; margin-bottom: 18px; padding: 7px 7px 7px 14px; border: 1px solid #E8D9AC; border-radius: 17px; background: rgba(255,255,255,.96); box-shadow: 0 7px 22px rgba(76,57,8,.10); }
.home-search:focus-within { border-color: #D5A900; box-shadow: 0 0 0 3px rgba(255,213,79,.2), 0 8px 24px rgba(76,57,8,.12); }
.home-search-icon { display: grid; width: 23px; height: 23px; place-items: center; color: #806A25; }
.home-search-icon svg { width: 20px; height: 20px; }
.home-search input { width: 100%; min-width: 0; height: 42px; padding: 0; border: 0; outline: 0; background: transparent; color: #29251B; font: inherit; font-size: 16px; }
.home-search input::placeholder { color: #918977; }
.home-search button { display: grid; width: 42px; height: 42px; min-height: 42px; padding: 0; place-items: center; border: 0; border-radius: 50%; background: #FFD54F; color: #332900; cursor: pointer; box-shadow: 0 3px 9px rgba(116,85,0,.16); transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
.home-search button:hover { background: #FFCC24; box-shadow: 0 5px 12px rgba(116,85,0,.22); }
.home-search button svg { width: 20px; height: 20px; }
.home-search button:active { transform: scale(.97); }
#search-post-results { display: grid; }
body.dark-mode .home-search { border-color: #514A36; background: rgba(43,43,43,.97); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
body.dark-mode .home-search:focus-within { border-color: #B89525; box-shadow: 0 0 0 3px rgba(255,213,79,.13), 0 8px 24px rgba(0,0,0,.3); }
body.dark-mode .home-search-icon { color: #E5CC73; }
body.dark-mode .home-search input { color: #FFF; }
body.dark-mode .home-search input::placeholder { color: #AAA397; }
@media (max-width: 600px) {
    .home-search { position: sticky; top: calc(env(safe-area-inset-top) + 6px); margin: 0 2px 15px; padding: 5px 5px 5px 11px; border-radius: 15px; }
    .home-search button { width: 44px; height: 44px; min-height: 44px; }
}
.home-friend-row { display: flex; gap: 12px; margin: 0 0 18px; padding: 3px 3px 9px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.home-friend-row[hidden] { display: none; }
.home-friend-row::-webkit-scrollbar { display: none; }
.home-friend-profile { display: grid; width: 66px; flex: 0 0 66px; justify-items: center; gap: 5px; color: #554F42; scroll-snap-align: start; text-decoration: none; }
.home-friend-avatar-ring { display: grid; width: 58px; height: 58px; place-items: center; padding: 3px; border: 2px solid #DDD4C1; border-radius: 50%; background: #FFF; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.home-friend-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.home-friend-profile strong { width: 100%; overflow: hidden; font-size: 11px; font-weight: 750; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.home-friend-profile.has-new-post .home-friend-avatar-ring { padding: 2px; border: 3px solid #D99A00; box-shadow: 0 0 0 3px rgba(217,154,0,.16); }
.home-friend-profile.has-new-post strong { color: #9A6D00; font-weight: 850; }
.home-friend-profile:active .home-friend-avatar-ring { transform: scale(.94); }
body.dark-mode .home-friend-profile { color: #D5D0C5; }
body.dark-mode .home-friend-avatar-ring { border-color: #5B574D; background: #292929; }
body.dark-mode .home-friend-profile.has-new-post .home-friend-avatar-ring { border-color: #FFD54F; box-shadow: 0 0 0 3px rgba(255,213,79,.16); }
body.dark-mode .home-friend-profile.has-new-post strong { color: #FFD970; }

/* Zvitki use one full viewport per post and an overlaid action rail. */
.scrolls-body { overflow: hidden; padding: 0 !important; background: #F2EEDF; }
.scrolls-page { display: block; width: 100%; max-width: none; height: 100dvh; margin: 0; padding: 0; }
.scrolls-feed { width: 100%; height: 100%; min-height: 0; padding: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scroll-behavior: smooth; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scrolls-feed::-webkit-scrollbar { display: none; }
.scrolls-feed > .post-card { position: relative; display: flex; width: 100%; height: 100%; min-height: 100%; flex-direction: column; justify-content: flex-start; margin: 0; padding: 16px 72px 16px 18px; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; scroll-snap-align: start; scroll-snap-stop: always; }
.scrolls-feed > .post-card:hover { transform: none; }
.scrolls-feed > .post-card > .post-link { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; touch-action: manipulation; }
.scrolls-feed > .post-card .post-content { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.scrolls-feed > .post-card > .post-link > .post-feed-image-wrap { width: calc(100% + 54px); height: auto; min-height: min(54dvh, 620px); max-height: none; flex: 1 1 auto; margin: 10px -54px 10px 0; border-radius: 14px; }
.scrolls-feed > .scrolls-has-images > .post-link > .post-content,
.scrolls-feed > .scrolls-has-images > .post-read-more { display: none !important; }
.scrolls-feed > .scrolls-text-only > .post-link { justify-content: center; text-align: center; }
.scrolls-feed > .scrolls-text-only > .post-link .post-title { font-size: clamp(26px, 6vw, 46px); }
.scrolls-feed > .scrolls-text-only > .post-link .post-content { margin-inline: auto; font-size: clamp(17px, 3vw, 23px); line-height: 1.55; }
.scrolls-image-frame { position: relative; display: block !important; }
.scrolls-image-carousel { display: flex; width: 100%; height: 100%; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }
.scrolls-image-carousel::-webkit-scrollbar { display: none; }
.scrolls-image-carousel > .post-image-tile { width: 100%; min-width: 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.scrolls-image-carousel > .post-image-tile .post-image { width: 100%; height: 100%; object-fit: contain; background: #171717; }
.scrolls-gallery-counter { position: absolute; z-index: 3; right: 12px; bottom: 12px; padding: 5px 9px; border-radius: 999px; background: rgba(24,24,24,.76); color: #FFF; font-size: 12px; font-weight: 800; pointer-events: none; }
.scrolls-feed > .post-card .divider { display: none; }
.scrolls-feed > .post-card > .post-actions { position: absolute; z-index: 4; top: 50%; right: 12px; bottom: auto; display: flex; width: 48px; flex-direction: column; align-items: stretch; gap: 10px; transform: translateY(-50%); }
.scrolls-feed > .post-card > .post-actions .btn,
.scrolls-feed > .post-card > .post-actions .action-link { display: inline-flex; width: 48px; min-width: 48px; height: 48px; min-height: 48px; justify-content: center; margin: 0; padding: 0; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; background: rgba(31,31,31,.76); box-shadow: 0 4px 14px rgba(0,0,0,.22); color: #FFF; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.scrolls-feed > .post-card > .post-actions .btn:hover,
.scrolls-feed > .post-card > .post-actions .action-link:hover { background: rgba(31,31,31,.9); }
.scrolls-feed > .post-card > .post-actions .buckaed,
.scrolls-feed > .post-card > .post-actions .reposted { border-color: #FFD54F; background: #FFD54F; color: #3B300B; }
.scrolls-feed > .post-card > .post-actions svg { width: 21px; height: 21px; }
.scrolls-feed > .post-card > .post-actions .post-more-button { margin-left: 0; }
.scrolls-double-bucka-mark { position: absolute; z-index: 6; top: 50%; left: 50%; display: grid; width: 76px; height: 76px; place-items: center; border-radius: 50%; background: #FFD54F; color: #3B300B; box-shadow: 0 8px 28px rgba(0,0,0,.28); pointer-events: none; transform: translate(-50%,-50%); animation: scrolls-bucka-pop .48s ease both; }
.scrolls-double-bucka-mark svg { width: 38px; height: 38px; stroke-width: 2.3; }
@keyframes scrolls-bucka-pop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.5); } 35% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.2); } }
.scrolls-loading, .scrolls-empty { display: grid; min-height: 55vh; place-content: center; justify-items: center; gap: 10px; padding: 30px; color: #746D5E; text-align: center; }
.scrolls-empty strong { color: #302C23; font-size: 19px; }
.scrolls-empty span { max-width: 330px; }
.scrolls-empty a, .scrolls-empty button { min-height: 42px; padding: 9px 14px; border: 0; border-radius: 11px; background: #FFD54F; color: #332900; cursor: pointer; font: inherit; font-weight: 800; text-decoration: none; }
body.dark-mode.scrolls-body { background: #1F1F1F; }
body.dark-mode .scrolls-loading, body.dark-mode .scrolls-empty { color: #BDB6A7; }
body.dark-mode .scrolls-empty strong { color: #FFF; }
@media (max-width: 600px) {
    .scrolls-page { height: calc(100dvh - var(--mobile-nav-height, 66px)); padding: 0; }
    .scrolls-feed > .post-card { height: 100%; min-height: 100%; padding: calc(12px + env(safe-area-inset-top)) 62px 12px 10px; border-radius: 0; }
    .scrolls-feed > .post-card > .post-link > .post-feed-image-wrap { width: calc(100% + 52px); min-height: 48dvh; margin-right: -52px; margin-left: 0; border-radius: 12px; }
    .scrolls-feed > .post-card > .post-actions { top: 50%; right: 7px; bottom: auto; width: 46px; gap: 8px; }
    .scrolls-feed > .post-card > .post-actions .btn,
    .scrolls-feed > .post-card > .post-actions .action-link { width: 46px; min-width: 46px; height: 46px; min-height: 46px; padding: 0; }
}

.home-friend-recommendations { margin-bottom: 25px; padding: 18px; border: 1px solid #F0E5C4; border-radius: 18px; background: white; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.home-friend-recommendations h2 { margin-bottom: 14px; font-size: 19px; }
.home-recommendation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.home-recommendation-row { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 9px; border: 1px solid #F0E5C4; border-radius: 12px; background: #FFFDF5; }
.home-recommendation-person { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.home-recommendation-person strong { min-width: 0; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.home-recommendation-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: #FFD54F; object-fit: cover; }
.home-recommendation-add { flex: 0 0 auto; padding: 6px 8px; border: 0; border-radius: 8px; background: #FFF4CC; color: #444; cursor: pointer; font-size: 11px; font-weight: 700; }
.home-recommendation-add, .accept-friend-btn, #friend-request-btn, .friend-btn { display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.home-recommendation-add svg, .accept-friend-btn svg, #friend-request-btn svg, .friend-btn svg { width: 16px; height: 16px; }
.home-recommendation-add:hover { background: #FFD54F; color: #000; }
.home-recommendation-add:disabled { cursor: default; opacity: .7; }
.relationship-partner-link { color: #B27500; font-weight: 700; text-decoration: none; }
.relationship-partner-link:hover { text-decoration: underline; }
.search-discovery-section { margin-bottom: 25px; padding: 18px; border: 1px solid #F0E5C4; border-radius: 18px; background: white; box-shadow: 0 8px 20px rgba(0,0,0,.05); }
.search-discovery-section.home-friend-recommendations { padding: 18px; }
.search-discovery-section h2 { margin-bottom: 14px; font-size: 19px; }
.search-reconnect-list, .search-activity-list { display: grid; gap: 9px; }
.search-reconnect-row { display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid #F0E5C4; border-radius: 12px; background: #FFFDF5; }
.search-reconnect-person { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.search-reconnect-person > span:last-child { display: grid; min-width: 0; }
.search-reconnect-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-reconnect-person small { color: #777; }
.search-message-button { flex: 0 0 auto; padding: 7px 11px; font-size: 13px; text-decoration: none; }
.search-activity-row { padding: 11px 12px; border-bottom: 1px solid #EFE5CC; }
.search-activity-row:last-child { border-bottom: 0; }
.search-activity-row p { margin: 0; }
.search-activity-row a { color: #9A6800; font-weight: 700; text-decoration: none; }
.search-activity-row a:hover { text-decoration: underline; }
.search-activity-row time { display: block; margin-top: 2px; color: #888; font-size: 13px; }

/* =========================
   DARK MODE
========================= */
body.dark-mode { background: #1f1f1f; color: white; }
body.dark-mode .post-card, body.dark-mode .comments-section, body.dark-mode .profile-card, body.dark-mode .activity-section, body.dark-mode .settings-list { background: #2b2b2b; border-color: #9A7A32; }
body.dark-mode .repost-original-card, body.dark-mode .repost-sheet-original { background: #242424; border-color: #665A34; }
body.dark-mode .comment-card { border-color: #444; }
body.dark-mode .comment-thread-node:not(.depth-0)::before { background: #5D543C; }
body.dark-mode .comment-thread-toggle { color: #D8C47E; }
body.dark-mode .comment-thread-toggle:hover { background: #39362C; }
body.dark-mode.comment-detail-page,
body.dark-mode.comment-detail-page .post-container { background: #2B2B2B; }
body.dark-mode .comment-detail-back-row { background: #2B2B2B; }
body.dark-mode .comment-detail-back-row button, body.dark-mode .comment-detail-friends { border-color: #746126; background: #3E3825; color: #F2D76B; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
body.dark-mode .comment-detail-back-row button:hover, body.dark-mode .comment-detail-friends:hover { background: #514826; }
body.dark-mode.comment-detail-page .comments-section { border-top-color: #444; }
body.dark-mode .comment-deleted-label { color: #aaa; }
body.dark-mode .comment-reply-button { color: #D6CBAE; }
body.dark-mode .comment-reply-button:hover { background: #3A382F; }
body.dark-mode .comment-reply-reference { color: #D2BD7A; }
body.dark-mode .comment-reply-compose { background: #343127; border-left-color: #22A559; }
body.dark-mode .username, body.dark-mode .comment-user, body.dark-mode .profile-identity h2, body.dark-mode .detail-value, body.dark-mode .settings-title { color: white; }
body.dark-mode .post-content, body.dark-mode .comment-text, body.dark-mode .profile-bio p, body.dark-mode .activity-text { color: #ddd; }
body.dark-mode input, body.dark-mode textarea { background: #333; color: white; border: 1px solid #555; }
body.dark-mode input:focus { border-color: #FFD54F; }
body.dark-mode .btn, body.dark-mode .settings-btn, body.dark-mode .edit-profile-btn { background: #444; color: white; }
body.dark-mode .btn:hover, body.dark-mode .settings-btn:hover, body.dark-mode .edit-profile-btn:hover { background: #FFD54F; color: black; }
body.dark-mode .btn-primary, body.dark-mode .auth-btn, body.dark-mode .bucka { background: #FFD43B; color: #222; }
body.dark-mode .bucka.buckaed { background: #F3A6B7; color: #44252C; }
body.dark-mode .btn-secondary, body.dark-mode .btn-compact { background: #444; color: white; }
body.dark-mode .post-top-icon { background: #444; color: #EEE; }
body.dark-mode .post-top-icon:hover { background: #555; color: white; }
body.dark-mode .post-top-icon.danger { color: #FFAAA5; }
body.dark-mode .post-expiry { background: #4A2525; color: #FFB4AE; }
body.dark-mode .icon-btn { color: #FFD54F; }
body.dark-mode .icon-btn:hover { background: #444; color: white; }
body.dark-mode .profile-bio { background: #333; border-left-color: #FFD54F; }
body.dark-mode .profile-featured-friends, body.dark-mode .featured-friends-editor { background: linear-gradient(145deg, #333, #37331F); border-color: #665D3D; }
body.dark-mode .profile-featured-friends-heading, body.dark-mode .profile-featured-friend-row { color: white; }
body.dark-mode .profile-featured-friends-heading > span, body.dark-mode #featured-friends-count { background: #51451D; color: #FFE58A; }
body.dark-mode .profile-featured-friend-rank, body.dark-mode .featured-friend-editor-rank, body.dark-mode .featured-friends-editor-symbol { background: #51451D; color: #FFE58A; }
body.dark-mode .featured-friend-editor-row { border-color: #515151; background: rgba(43,43,43,.86); }
body.dark-mode .featured-friends-editor-empty { border-color: #5E563C; color: #BDB6A8; }
body.dark-mode .featured-friend-add-panel { border-top-color: #57513B; }
body.dark-mode .compact-icon-button { border-color: #555; background: #3B3B3B; color: #EEE; }
body.dark-mode .profile-detail { background: #333; border-color: #444; }
body.dark-mode .tab-bar { border-bottom-color: #444; }
body.dark-mode .tab { color: #777; }
body.dark-mode .tab.active { color: #FFD54F; }
body.dark-mode .tab:hover:not(.active) { color: white; }
body.dark-mode .activity-meta { color: #888; }
body.dark-mode .activity-title { color: white; }
body.dark-mode .activity-item { border-bottom-color: #444; }
body.dark-mode .activity-item:hover { background: #333; }
body.dark-mode .activity-section { background: #2b2b2b; border-color: #444; }
body.dark-mode .loading-text { color: #777; }
body.dark-mode .bottom-nav-item { background: #FFF4CC; color: #000; }
body.dark-mode .bottom-nav-item.active, body.dark-mode .bottom-nav-item:hover { background: rgba(255,255,255,.55); color: #000; }
body.dark-mode .install-guide-card { background: #2B2B2B; border-color: #444; color: white; }
body.dark-mode .install-guide-heading p { color: #C7C7C7; }
body.dark-mode .install-platform-name, body.dark-mode .install-button-name { color: #F0D56F; }
body.dark-mode .install-platform-heading small { background: #49401E; color: #F0D56F; }
body.dark-mode .settings-row { background: #2b2b2b; color: white; border-bottom-color: #444; }
body.dark-mode .settings-row:hover { background: #333; }
body.dark-mode .settings-row-arrow { color: #666; }
body.dark-mode .auth-card { background: #1f1f1f; color: white; }
body.dark-mode .auth-subtitle { color: #b0b0b0; }
body.dark-mode .form-group label { color: white; }
body.dark-mode .form-group input { background: #2b2b2b; color: white; border: 1px solid #444; }
body.dark-mode .form-group input::placeholder { color: #999; }
body.dark-mode .auth-footer { color: white; }
body.dark-mode .auth-footer a { color: #66b3ff; }
body.dark-mode .auth-footer a:hover { color: #8ac8ff; }
body.dark-mode .upload-info { color: #b0b0b0; }
body.dark-mode .like.liked { background: #ff6b6b; color: white; }
body.dark-mode .like.liked:hover { background: #ff5252; color: white; }
body.dark-mode .create-post-card textarea { background: #2b2b2b; color: white; border-color: #444; }
body.dark-mode .post-title-row input, body.dark-mode .post-body-composer, body.dark-mode .poll-composer, body.dark-mode .poll-composer > input, body.dark-mode .poll-option-row input { background: #2b2b2b; color: white; border-color: #555; }
body.dark-mode .post-body-composer .poll-composer { background: transparent; border-top-color: #4A4A4A; }
body.dark-mode .post-composer-footer { border-color: #444; }
body.dark-mode .posting-destination-control select { color: #FFD54F; }
body.dark-mode .post-title { color: #fff; }
body.dark-mode .edit-profile-input, body.dark-mode .edit-profile-textarea { background: #333; color: white; border: 1px solid #555; }
body.dark-mode .friends-section { background: #2b2b2b; border-color: #444; }
body.dark-mode .friend-card, body.dark-mode .friend-request-card, body.dark-mode .friend-request { background: #2B2B2B; border-color: #444; color: #F2F2F2; box-shadow: 0 5px 15px rgba(0,0,0,.22); }
body.dark-mode .friend-card:hover, body.dark-mode .friend-request-card:hover, body.dark-mode .friend-request:hover { background: #333; border-color: #5B533C; }
body.dark-mode .friend-name { color: white; }
body.dark-mode .friend-btn, body.dark-mode .friend-request-btn, body.dark-mode .accept-friend-btn, body.dark-mode .reject-friend-btn, body.dark-mode .remove-friend-btn, body.dark-mode .cancel-friend-btn { background: #444; color: white; }
body.dark-mode .accept-friend-btn { border-color: #397C50; background: #294A34; color: #A7E6BA; }
body.dark-mode .friend-action-pending, body.dark-mode .friend-btn:disabled { border-color: #4A4A4A; background: #383838; color: #BDB8AC; opacity: 1; }
body.dark-mode .friend-btn:hover, body.dark-mode .friend-request-btn:hover, body.dark-mode .accept-friend-btn:hover, body.dark-mode .reject-friend-btn:hover, body.dark-mode .remove-friend-btn:hover, body.dark-mode .cancel-friend-btn:hover { background: #FFD54F; color: black; }
body.dark-mode .friend-btn.remove { background: #5b2222; color: #ffaaaa; }
body.dark-mode .friend-btn.remove:hover { background: #ff6b6b; color: white; }
body.dark-mode .friends-only-message { background: #333; border-color: #444; }
body.dark-mode .friends-only-message strong { color: white; }
body.dark-mode .friends-only-message p { color: #aaa; }
body.dark-mode .friends-page [data-friend-panel] > div > p { color: #B8B8B8; }
body.dark-mode .friend-list-tabs .tab { background: transparent; }
body.dark-mode .friend-list-tabs .tab.active { color: #FFD54F; border-bottom-color: #FFD54F; }
body.dark-mode .friends-page .friend-user { color: #F2F2F2; }

/* Safer, activity-first friends directory. */
.friends-page { width: min(760px, calc(100% - 28px)); max-width: 760px; margin: 28px auto 110px; padding: 0; }
.friends-page-title { margin: 0 0 13px; font-size: 30px; }
.friends-hero { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 16px 18px; border: 1px solid #E6D6A8; border-radius: 18px; background: linear-gradient(135deg,#FFF9E5,#FFFDF8); box-shadow: 0 8px 25px rgba(77,57,4,.08); }
.friends-total { display: flex; align-items: baseline; gap: 7px; }
.friends-total strong { color: #8A6900; font-size: 30px; line-height: 1; }
.friends-total span { color: #645E50; font-size: 14px; font-weight: 750; }
.friends-find-button { flex: 0 0 auto; padding: 10px 13px; border-radius: 11px; background: #FFD54F; color: #3C310A; font-weight: 800; text-decoration: none; }
.friends-tools { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 9px; margin-bottom: 16px; }
.friends-search { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid #DDD1AE; border-radius: 13px; background: #FFF; }
.friends-search:focus-within { border-color: #C99C00; box-shadow: 0 0 0 3px rgba(255,213,79,.2); }
.friends-search svg { width: 19px; height: 19px; flex: 0 0 19px; color: #806D2A; }
.friends-search input { width: 100%; min-width: 0; height: 46px; padding: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; }
.friend-sort-switch { display: flex; gap: 3px; padding: 3px; border: 1px solid #DDD1AE; border-radius: 13px; background: #FFF; }
.friend-sort-switch button { min-height: 38px; padding: 6px 10px; border: 0; border-radius: 9px; background: transparent; color: #766D58; cursor: pointer; font: inherit; font-size: 12px; font-weight: 750; }
.friend-sort-switch button.active { background: #FFD54F; color: #3B300A; box-shadow: 0 2px 7px rgba(90,65,0,.14); }
.friends-recommendations { scroll-margin-top: 70px; margin: 0 0 17px; padding: 17px; border: 1px solid #E4D6AE; border-radius: 18px; background: #FFFDF8; box-shadow: 0 7px 20px rgba(65,48,0,.07); }
.friends-recommendations[hidden] { display: none; }
.friends-recommendations .friends-section-heading { align-items: flex-start; }
.friends-recommendations .friends-section-heading h2 { margin-bottom: 3px; }
.friends-recommendations .friends-section-heading p { margin: 0; color: #817968; font-size: 12px; }
.friends-find-button { border: 0; cursor: pointer; font: inherit; }
.friends-find-button.active { background: #FFF0B0; }
.home-recommendation-person > span { display: grid; min-width: 0; gap: 2px; }
.home-recommendation-person small { overflow: hidden; color: #807866; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.friend-list-tabs { position: sticky; z-index: 10; top: 0; margin-bottom: 13px; padding-top: 5px; background: #F2EEDF; }
.friend-list-tabs .tab { position: relative; }
.friend-list-tabs .tab span { display: inline-grid; min-width: 19px; height: 19px; margin-left: 4px; place-items: center; padding: 0 4px; border-radius: 999px; background: #D94242; color: #FFF; font-size: 10px; }
.online-friends-section { margin: 0 0 18px; padding: 14px; border: 1px solid #E6DDBF; border-radius: 17px; background: #FFFDF8; }
.friends-section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.friends-section-heading h2 { margin: 0; font-size: 16px; }
.friends-section-heading span { color: #777; font-size: 12px; }
.online-friends-row { display: flex; gap: 13px; overflow-x: auto; scrollbar-width: none; }
.online-friends-row::-webkit-scrollbar { display: none; }
.online-friend { display: grid; width: 62px; flex: 0 0 62px; justify-items: center; gap: 5px; color: inherit; text-decoration: none; }
.online-friend > span { position: relative; }
.online-friend-avatar { width: 48px; height: 48px; border-radius: 50%; }
.online-friend i, .friend-online-label i { display: inline-block; width: 9px; height: 9px; border: 2px solid #FFF; border-radius: 50%; background: #22A559; }
.online-friend > span > i { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; }
.online-friend strong { width: 100%; overflow: hidden; font-size: 11px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.modern-friend-card, .friend-request-row, .sent-request-row { margin-bottom: 8px; border-radius: 16px; background: #FFF; box-shadow: none; }
.modern-friend-card:hover { border-color: #D6BE68; background: #FFF9E5; transform: translateY(-1px); }
.friend-name-copy { display: grid; min-width: 0; gap: 3px; }
.friend-name-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-name-copy small { color: #847D6E; font-size: 11px; }
.friend-online-label { color: #168249 !important; font-weight: 750; }
.friend-online-label i { width: 7px; height: 7px; border: 0; }
.friend-safe-actions { display: flex; gap: 7px; }
.friend-message-button, .friend-more-button { position: relative; display: block; width: 40px; height: 40px; flex: 0 0 40px; padding: 0; border: 1px solid #E4D7B3; border-radius: 50%; background: #FFF8DD; color: #6C5712; cursor: pointer; text-decoration: none; }
.friend-message-button svg, .friend-more-button svg { position: absolute; top: 50%; left: 50%; display: block; width: 19px; height: 19px; margin: 0; transform: translate(-50%, -50%); }
.friend-message-button:hover, .friend-more-button:hover { background: #FFD54F; }
.friends-empty-state { display: grid; min-height: 170px; place-content: center; justify-items: center; gap: 9px; color: #827B6B; text-align: center; }
.friends-empty-state > svg { width: 36px; height: 36px; color: #AE8B17; }
.friends-empty-state a { padding: 8px 11px; border-radius: 10px; background: #FFD54F; color: #3A300D; font-weight: 800; text-decoration: none; }
.friend-list-skeleton { display: grid; gap: 8px; }
.friend-list-skeleton i { display: block; height: 72px; border-radius: 16px; background: linear-gradient(90deg,#EEE9DC 25%,#FAF7EF 50%,#EEE9DC 75%); background-size: 200% 100%; animation: friend-skeleton 1.1s linear infinite; }
@keyframes friend-skeleton { to { background-position: -200% 0; } }
body.dark-mode .friends-hero { border-color: #4C4636; background: linear-gradient(135deg,#393321,#292929); }
body.dark-mode .friends-total span, body.dark-mode .friend-name-copy small { color: #BDB6A7; }
body.dark-mode .friends-total strong { color: #F1D467; }
body.dark-mode .friends-search, body.dark-mode .friend-sort-switch, body.dark-mode .friends-recommendations, body.dark-mode .online-friends-section, body.dark-mode .modern-friend-card, body.dark-mode .friend-request-row, body.dark-mode .sent-request-row { border-color: #4B493F; background: #2B2B2B; }
body.dark-mode .friend-sort-switch button { color: #C5BEAF; }
body.dark-mode .friend-sort-switch button.active { background: #66551D; color: #FFE78B; }
body.dark-mode .friends-recommendations .friends-section-heading p, body.dark-mode .home-recommendation-person small { color: #BDB6A8; }
body.dark-mode .friend-list-tabs { background: #1F1F1F; }
body.dark-mode .friend-message-button, body.dark-mode .friend-more-button { border-color: #5A533D; background: #3B3729; color: #F1D66F; }
body.dark-mode .online-friend i, body.dark-mode .friend-online-label i { border-color: #2B2B2B; }
body.dark-mode .friend-list-skeleton i { background: linear-gradient(90deg,#303030 25%,#3B3B3B 50%,#303030 75%); background-size: 200% 100%; }
.leaderboard-notice { display: flex; align-items: center; gap: 9px; margin: 0 0 15px; padding: 12px 14px; border: 1px solid #E4D6AE; border-radius: 13px; background: #FFF9E5; color: #70664E; font-size: 13px; }
.leaderboard-notice svg { width: 18px; height: 18px; flex: 0 0 18px; color: #9A790D; }
.leaderboard-switch { width: 100%; margin-bottom: 14px; }
.leaderboard-switch button { flex: 1; }
.leaderboard-period-switch { width: min(100%, 320px); margin: 0 auto 12px; }
.leaderboard-period-switch button { flex: 1; }
.leaderboard-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 9px; }
.leaderboard-rank { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: #F1EEE5; color: #756E60; font-size: 13px; font-weight: 900; }
.leaderboard-rank.top-ten { background: #FFE5E5; color: #C92E2E; }
.leaderboard-row-actions { display: flex; align-items: center; gap: 9px; }
.leaderboard-friend-action { display: inline-flex; min-height: 36px; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; border: 0; border-radius: 10px; background: #FFD54F; color: #453708; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.leaderboard-friend-action svg { width: 16px; height: 16px; }
.leaderboard-friend-action.sent { background: #DDF5E5; color: #176B36; }
.leaderboard-trophy { display: grid; width: 34px; height: 34px; place-items: center; }
.leaderboard-trophy svg { width: 24px; height: 24px; }
.leaderboard-trophy.place-1 { color: #D99A00; }
.leaderboard-trophy.place-2 { color: #9299A3; }
.leaderboard-trophy.place-3 { color: #A96732; }
.leaderboard-post-row { color: inherit; text-decoration: none; }
.leaderboard-post-row > .leaderboard-row-actions > svg { width: 18px; height: 18px; color: #8C8064; }
.leaderboard-post-row .friend-name-copy strong { white-space: normal; }
.leaderboard-own-label { margin: 19px 4px 8px; color: #8A6900; font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
body.dark-mode .leaderboard-own-label { color: #F1D467; }
body.dark-mode .leaderboard-notice { border-color: #4B493F; background: #332F22; color: #CEC6B5; }
body.dark-mode .leaderboard-rank { background: #3C3A35; color: #C7C0B2; }
body.dark-mode .leaderboard-rank.top-ten { background: #512C2C; color: #FF9696; }
body.dark-mode .leaderboard-friend-action.sent { background: #244F34; color: #AEE8C0; }
@media (max-width:600px) {
    .friends-page { width: 100%; margin: 0; padding: 12px 10px calc(var(--mobile-nav-height,66px) + 18px); }
    .friends-hero { align-items: flex-start; padding: 16px; }
    .friends-page-title { font-size: 25px; }
    .friends-find-button { padding: 9px 10px; font-size: 12px; }
    .friends-tools { grid-template-columns: 1fr; }
    .friend-sort-switch { width: 100%; }
    .friend-sort-switch button { flex: 1; }
    .friend-request-row { align-items: flex-start; }
    .friend-request-actions { flex-direction: column; gap: 5px; }
    .friend-request-actions button { width: 92px; min-height: 34px; padding: 6px 8px; }
    .leaderboard-row { grid-template-columns: 30px minmax(0,1fr) auto; padding: 10px; }
    .leaderboard-friend-action span { display: none; }
    .leaderboard-friend-action { width: 36px; padding: 0; }
    .leaderboard-trophy { width: 27px; }
}
body.dark-mode .feed-search input { background: #2b2b2b; color: white; border-color: #555; }
body.dark-mode .feed-search input::placeholder { color: #999; }
body.dark-mode .feed-search input:focus { border-color: #FFD54F; }
body.dark-mode .selected-file-name { color: #B0B0B0; }
body.dark-mode .home-friend-recommendations, body.dark-mode .home-recommendation-row { background: #2B2B2B; border-color: #444; }
body.dark-mode .home-recommendation-row { background: #333; }
body.dark-mode .home-recommendation-add { background: #444; color: white; }
body.dark-mode .home-recommendation-add:hover { background: #FFD54F; color: black; }
body.dark-mode .relationship-partner-link, body.dark-mode .search-activity-row a { color: #FFD54F; }
body.dark-mode .search-discovery-section, body.dark-mode .search-reconnect-row { background: #2B2B2B; border-color: #444; }
body.dark-mode .search-reconnect-row { background: #333; }
body.dark-mode .search-reconnect-person small { color: #BBB; }
body.dark-mode .search-activity-row { border-color: #444; }

/* =========================
   SEARCH USER RESULTS
========================= */

#search-results-container .friend-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 72px;
    padding: 11px 13px;
    margin-bottom: 10px;
    background: #FFFDF8;
    border: 1px solid #E8DFC8;
    border-radius: 15px;
    box-shadow: 0 3px 11px rgba(71,52,0,.055);
}

#search-results-container .friend-user {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    flex: 1;
}

#search-results-container .friend-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFD54F;
    object-fit: cover;
    flex-shrink: 0;
}

#search-results-container .friend-name {
    font-weight: 700;
    font-size: 17px;
    color: #2E2E2E;
}

#search-results-container .friend-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}


/* =========================
   DARK MODE SEARCH RESULTS
========================= */

body.dark-mode #search-results-container .friend-card {
    background: #2b2b2b;
    border-color: #444;
    color: white;
}

body.dark-mode #search-results-container .friend-name {
    color: white;
}

body.dark-mode #search-results-container .friend-card:hover {
    background: #333;
}

body.dark-mode #search-results-container .friend-btn {
    background: #444;
    color: white;
}

body.dark-mode #search-results-container .friend-btn:hover {
    background: #FFD54F;
    color: black;
}

.profile-avatar-upload {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    flex-shrink: 0;
    overflow: hidden;
}

.profile-avatar-upload .profile-pic {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #FFD54F;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.avatar-upload-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s;
}

.profile-avatar-upload:hover .avatar-upload-overlay {
    opacity: 1;
}

/* =========================
   EDIT PROFILE AVATAR
========================= */

.avatar-edit-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.avatar-edit-wrapper .profile-pic {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #FFD54F;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.avatar-change-btn {
    display: inline-block;
    padding: 7px 12px;
    border-radius: 8px;
    background: #FFF4CC;
    color: #444;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s;
}

.avatar-change-btn:hover {
    background: #FFD54F;
    color: black;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFD54F;
    margin-right: 14px;
    object-fit: cover;
    flex-shrink: 0;
}

.profile-friends-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: .2s;
}

.profile-friends-link:hover {
    background: #FFF4CC;
    border-color: #FFD54F;
    transform: translateY(-2px);
}

.profile-friends-link:hover .detail-value {
    color: #D38A00;
}

body.dark-mode .profile-friends-link {
    color: white;
}

body.dark-mode .profile-friends-link:hover {
    background: #444;
    border-color: #FFD54F;
}

body.dark-mode .profile-friends-link:hover .detail-value {
    color: #FFD54F;
}

/* =========================
   FIXED GROUPS RAIL
========================= */
.home-layout { width: 100%; }
.home-feed { max-width: 700px; margin: 35px auto; padding: 0 20px; }
.groups-sidebar { position: fixed; z-index: 800; top: 0; bottom: 0; left: 0; display: flex; align-items: flex-start; width: 340px; transition: width .25s ease; }
.groups-panel { width: 300px; height: 100vh; overflow-y: auto; padding: 24px 14px 130px; background: #fff; border: 1px solid #F0E5C4; border-left: 0; box-shadow: 7px 0 22px rgba(0,0,0,.07); scrollbar-width: thin; scrollbar-color: #E1C45E transparent; transition: opacity .18s ease, width .25s ease, padding .25s ease; }
.groups-toggle { width: 44px; height: 48px; min-height: 48px; margin-top: 24px; padding: 0; border: 1px solid #E0C45D; border-left: 0; border-radius: 0 14px 14px 0; background: #FFF4CC; color: #6E5700; cursor: pointer; display: flex; justify-content: center; align-items: center; font-weight: 700; box-shadow: 4px 2px 10px rgba(0,0,0,.08); transition: left .25s ease, transform .25s ease, background-color .15s ease; }
.groups-toggle-icon, .groups-toggle-icon svg { display: block; width: 22px; height: 22px; }
.groups-toggle:hover { background: #F5C32C; }
.groups-toggle-label { display: block; }
.deske-vertical-label { writing-mode: vertical-rl; text-orientation: upright; color: inherit; font-size: 9px; font-weight: 950; letter-spacing: .08em; line-height: 1; }
.groups-sidebar.collapsed { width: 44px; }
.groups-sidebar.collapsed .groups-panel { width: 0; padding-left: 0; padding-right: 0; border-width: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.groups-sidebar.collapsed .groups-toggle { border-left: 0; border-radius: 0 12px 12px 0; }
.groups-drawer-close, .groups-drawer-backdrop { display: none; }
.groups-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 0 4px; }
.groups-heading h2 { font-size: 21px; line-height: 1.2; }
.groups-eyebrow { color: #A07100; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.groups-intro { margin: 0 4px 16px; color: #777; font-size: 12px; line-height: 1.4; }
.group-add-btn { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #FFD54F; font-size: 25px; line-height: 1; cursor: pointer; }
.group-add-btn:hover { background: #F5C32C; }
.group-form { margin-bottom: 16px; padding: 14px; border-radius: 13px; background: #FFF9E8; border: 1px solid #F0E5C4; }
.group-form[hidden] { display: none; }
.group-form label:not(.group-privacy-option) { display: block; margin: 8px 0 4px; font-size: 13px; font-weight: 700; }
.group-form input:not([type="checkbox"]), .group-form textarea { width: 100%; padding: 9px 10px; border: 1px solid #DED3B5; border-radius: 8px; font: inherit; resize: vertical; }
.group-privacy-option { display: flex; align-items: flex-start; gap: 9px; margin: 12px 0; cursor: pointer; }
.group-privacy-option input { margin-top: 4px; }
.group-privacy-option span { display: flex; flex-direction: column; font-size: 13px; }
.group-privacy-option small { color: #777; }
.group-form-actions { display: flex; justify-content: flex-end; gap: 7px; }
.group-form-actions .btn { padding: 7px 11px; }
.group-create-btn { background: #FFD54F; }
.group-error { color: #C62828; font-size: 13px; margin-top: 8px; }
.groups-list { display: flex; flex-direction: column; gap: 4px; }
.group-card { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px; border: 0; border-radius: 10px; background: transparent; transition: background .18s ease; }
.group-card:hover { background: #FFF7D8; }
.group-card.active { background: rgba(255,212,59,.34); }
.group-row-link { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.group-row-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 700; }
.group-row-lock { flex: 0 0 auto; font-size: 11px; opacity: .7; }
.group-row-lock svg, .inline-private-lock svg { width: 14px; height: 14px; }
.inline-private-lock { display: inline-grid; place-items: center; margin-left: 4px; vertical-align: -2px; }
.group-pin-button { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #999; cursor: pointer; }
.group-pin-button:hover, .group-pin-button.active { background: #FFF0B1; color: #806100; }
.group-pin-button svg { width: 15px; height: 15px; }
.group-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; background: #FFD54F; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12); font-weight: 800; }
.group-avatar svg { width: 18px; height: 18px; }
.group-avatar img, .board-hero-icon img, .post-group-icon img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.board-hero-icon svg { width: 38px; height: 38px; }
.post-group-icon svg { width: 14px; height: 14px; }
.group-privacy { display: flex; align-items: center; gap: 4px; }
.group-privacy svg { width: 12px; height: 12px; }
.group-card-title { min-width: 0; }
.group-card-title h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.group-privacy { display: block; color: #777; font-size: 11px; }
.group-description { margin-top: 9px; color: #666; font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.group-card-footer { min-height: 25px; margin-top: 10px; display: flex; justify-content: space-between; align-items: center; color: #888; font-size: 12px; }
.group-action { min-height: 32px; padding: 5px 9px; border: 0; border-radius: 8px; background: #F3EEE2; cursor: pointer; font-size: 11px; font-weight: 700; }
.group-action.leave { background: #F4EFDf; color: #777; }
.group-owner-label { color: #A07100; font-weight: 700; }
.groups-empty, .groups-loading { padding: 28px 8px; color: #888; text-align: center; font-size: 14px; }
.groups-empty span { display: block; color: #D4A928; font-size: 34px; }

body.dark-mode .groups-panel { background: #2b2b2b; border-color: #444; }

.admin-review-page { width: min(980px, calc(100% - 28px)); margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 0 70px; }
.admin-review-header { position: sticky; top: 0; z-index: 20; display: flex; gap: 14px; align-items: center; padding: 12px 0; background: color-mix(in srgb, #FFF 94%, transparent); backdrop-filter: blur(12px); }
.admin-review-header h1 { margin: 2px 0 0; font-size: clamp(22px, 4vw, 34px); }
.admin-review-content { display: grid; gap: 18px; }
.admin-review-report, .admin-review-original, .admin-review-actions { padding: clamp(16px, 3vw, 28px); border: 1px solid #E8D9AC; border-radius: 20px; background: #FFF; box-shadow: 0 9px 28px rgba(68,51,9,.08); }
.admin-review-report { border-left: 5px solid #E14A4A; }
.admin-review-report h2, .admin-review-actions h2 { margin: 12px 0 6px; }
.admin-review-meta { color: #756F62; }
.admin-review-body { white-space: pre-wrap; }
.admin-review-image { display: block; width: min(100%, 760px); max-height: 70dvh; margin: 14px auto; border-radius: 16px; object-fit: contain; background: #EEE9DC; }
.admin-review-members { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-review-members span { padding: 7px 10px; border-radius: 999px; background: #FFF4CC; }
.admin-chat-message.reported-message { outline: 3px solid #E14A4A; outline-offset: 2px; }
body.dark-mode .admin-review-header { background: color-mix(in srgb, #202020 94%, transparent); }
body.dark-mode .admin-review-report, body.dark-mode .admin-review-original, body.dark-mode .admin-review-actions { border-color: #4A463B; background: #292929; box-shadow: 0 9px 28px rgba(0,0,0,.28); }
body.dark-mode .admin-review-meta { color: #BBB4A5; }
body.dark-mode .admin-review-members span { background: #433B24; }
body.dark-mode .group-form { background: #333; border-color: #494949; }
body.dark-mode .group-card { background: transparent; }
body.dark-mode .group-card:hover { background: #39372F; }
body.dark-mode .group-card.active { background: rgba(255,212,59,.2); }
body.dark-mode .group-card-title h3 { color: #fff; }
body.dark-mode .group-description, body.dark-mode .group-privacy, body.dark-mode .group-card-footer { color: #aaa; }
body.dark-mode .group-action { background: #444; color: #ddd; }
body.dark-mode .group-action.leave { background: #444; color: #ddd; }

.board-search-card { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; padding: 15px; border: 1px solid #EFE5CC; border-radius: 16px; background: white; box-shadow: 0 5px 15px rgba(0,0,0,.05); }
.board-search-card.public { background: #FFF4CC; border-color: #F0D77E; }
.board-search-card.private { background: #FFFDF8; }
.board-search-copy { flex: 1; min-width: 0; }
.board-search-copy h3 { font-size: 17px; }
.board-search-copy p { margin-top: 4px; color: #666; font-size: 13px; line-height: 1.45; }
.board-search-policy { padding: 5px 9px; border-radius: 8px; background: #F3EEE0; color: #777; font-size: 12px; font-weight: 700; white-space: nowrap; }
.board-search-policy.joined { background: #FFE794; color: #735500; }
body.dark-mode .board-search-card { background: #303030; border-color: #444; }
body.dark-mode .board-search-card.public { background: #463E22; border-color: #746126; }
body.dark-mode .board-search-copy h3 { color: #fff; }
body.dark-mode .board-search-copy p { color: #bbb; }
body.dark-mode .board-search-policy { background: #444; color: #ddd; }

/* =========================
   OGLASNE DESKE CORE PAGES
========================= */
.group-card-title a { color: inherit; text-decoration: none; }
.group-card-title a:hover { color: #A07100; }
.group-avatar { color: #2E2E2E; text-decoration: none; }
.groups-main-link { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 16px; padding: 4px 6px; border-radius: 10px; color: inherit; text-decoration: none; background: transparent; }
.groups-main-link:hover { background: #FFF7D8; }
.groups-main-link.active { background: rgba(255,212,59,.34); }
.groups-section-label { margin: 16px 6px 8px; padding-top: 16px; border-top: 1px solid #EFE5CC; color: #777; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.groups-subsection-label { margin: 12px 6px 5px; color: #A07100; font-size: 12px; font-weight: 750; }
#pinned-groups, #owned-groups, #member-groups, #recent-groups, #suggested-groups { display: flex; flex-direction: column; gap: 4px; }
.groups-empty-inline { margin: 4px 7px 8px; color: #999; font-size: 12px; }
.groups-create-link { width: 100%; margin-top: 14px; justify-content: flex-start; background: transparent; color: #775B00; }
.groups-create-link:hover { background: #FFF7D8; }
.board-page { max-width: 780px; margin: 35px auto; padding: 0 20px; }
.board-header { position: relative; display: block; min-height: 0; padding: 21px 22px 19px; background: #FFFDF8; border: 1px solid #E9E1D2; border-radius: 18px 18px 0 0; }
.board-title-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.board-title-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
.board-title-identity h1 { min-width: 0; overflow-wrap: anywhere; font-size: 27px; line-height: 1.2; }
.board-hero-icon { display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; background: white; border: 2px solid #EFE7D7; box-shadow: 0 3px 9px rgba(0,0,0,.07); font-size: 25px; font-weight: 800; }
.board-hero-copy { flex: 1; min-width: 0; }
.board-header .board-hero-copy { margin-top: 13px; padding-left: 69px; }
.board-hero-copy > p:not(.groups-eyebrow) { color: #716D65; line-height: 1.45; }
.board-member-count { display: inline-block; margin-top: 7px; color: #847B69; font-size: 13px; font-weight: 700; }
.board-invite-only { padding: 8px 11px; border-radius: 9px; background: rgba(255,255,255,.65); color: #665614; font-size: 12px; font-weight: 700; }
.board-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.board-invite-friend { gap: 7px; }
.board-invite-friend svg { width: 18px; height: 18px; }
.board-invite-dialog { width: min(460px, calc(100% - 24px)); max-height: 78dvh; padding: 0 0 12px; border: 1px solid #E9DDBD; border-radius: 18px; background: white; }
.board-invite-dialog::backdrop { background: rgba(0,0,0,.42); }
.board-invite-dialog > input { width: calc(100% - 32px); margin: 0 16px 12px; padding: 10px 12px; border: 1px solid #DDD0AA; border-radius: 10px; font: inherit; }
.board-invite-list { max-height: 52dvh; overflow-y: auto; padding: 0 10px; }
.board-invite-row { display: flex; align-items: center; gap: 10px; min-height: 66px; margin-bottom: 7px; padding: 9px 10px; border: 1px solid #EEE2C3; border-radius: 13px; background: #FFFDF8; }
.board-invite-row a { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.board-invite-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-invite-row .share-friend-avatar { width: 38px; height: 38px; margin: 0; flex: 0 0 38px; }
.board-invite-action { flex: 0 0 auto; }
.deska-invitation-actions { display: flex; gap: 8px; margin-top: 12px; }
.deska-invitation-actions button { min-height: 38px; padding: 7px 12px; }
body.dark-mode .board-invite-dialog { background: #2b2b2b; border-color: #444; color: white; }
body.dark-mode .board-invite-dialog > input { background: #222; border-color: #555; color: white; }
body.dark-mode .board-invite-row { border-color: #444; }
body.dark-mode .board-invite-row { background: #333; }
body.dark-mode .board-invite-action { border-color: #675A2F; background: #4A4124; color: #F2D776; }
body.dark-mode .board-invite-action.sent { border-color: #4A4A4A; background: #3B3B3B; color: #BDB8AC; }
.board-tabs { display: flex; gap: 4px; margin-bottom: 20px; padding: 7px 10px; background: #FFFDF8; border: 1px solid #E9E1D2; border-top: 0; border-radius: 0 0 18px 18px; }
.board-tab { padding: 9px 16px; border: 0; border-radius: 9px; background: transparent; color: #777; cursor: pointer; font-weight: 700; }
.board-tab:hover { background: #F4F0E8; color: #444; }
.board-tab.active { background: #FFF1B8; color: #6E5700; }
.board-info-card, .restricted-board { padding: 22px; background: #FFFDFB; border: 1px solid #E9E4DA; border-radius: 15px; box-shadow: 0 4px 12px rgba(0,0,0,.025); }
.board-info-card h2, .restricted-board h2 { margin-bottom: 12px; }
.board-info-card dl { display: grid; grid-template-columns: 100px 1fr; margin-top: 20px; gap: 8px; }
.board-info-card dt { color: #888; font-weight: 700; }
.restricted-board { text-align: center; color: #777; }
.restricted-board > span { font-size: 34px; }
.board-member-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F3F3F3; color: inherit; text-decoration: none; }
.post-group-source { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 13px; color: #8A6900; text-decoration: none; font-size: 13px; font-weight: 800; }
.post-group-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #FFD54F; color: #333; font-size: 11px; }
.user-admin-badge { display: inline-flex; align-items: center; min-height: 19px; margin-left: 4px; padding: 2px 7px; border: 1px solid #82C999; border-radius: 999px; background: #E4F7EA; color: #176B35; font-size: 10px; font-weight: 850; line-height: 1; vertical-align: 1px; white-space: nowrap; }
body.dark-mode .user-admin-badge { border-color: #397C50; background: #294A34; color: #A7E6BA; }
.post-destination { width: 100%; padding: 12px 14px; border: 1px solid #DDD; border-radius: 12px; background: white; color: #2E2E2E; font: inherit; }
.destination-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; padding: 18px; border-radius: 18px; background: #FFF4CC; border: 1px solid #F0D77E; }
.board-search-card { color: inherit; text-decoration: none; }
.board-search-action { color: #A07100; font-size: 13px; font-weight: 800; white-space: nowrap; }
body.dark-mode .groups-main-link { background: transparent; }
body.dark-mode .groups-main-link:hover, body.dark-mode .groups-main-link.active { background: #464027; }
body.dark-mode .groups-create-link { color: #FFD54F; }
body.dark-mode .groups-section-label { border-top-color: #494949; }
body.dark-mode .board-tabs, body.dark-mode .board-info-card, body.dark-mode .restricted-board { background: #2b2b2b; border-color: #444; }
body.dark-mode .board-header { background: #30302E; border-color: #444; }
body.dark-mode .board-hero-copy > p:not(.groups-eyebrow), body.dark-mode .board-member-count { color: #DDD09B; }
body.dark-mode .post-destination { background: #333; color: white; border-color: #555; }
body.dark-mode .destination-heading { background: #463E22; border-color: #746126; }

.board-header-actions { position: static; display: flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 7px; }
.board-header-icon { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid #E3DAC8; border-radius: 50%; background: white; color: #514D45; cursor: pointer; box-shadow: 0 2px 7px rgba(0,0,0,.05); }
.board-header-icon:hover { background: #FFF4CC; border-color: #E0C45D; color: #604B00; }
.board-header-icon.leave { color: #A44747; }
.board-header-icon.leave:hover { background: #FFF0F0; border-color: #E6B8B8; color: #9F2727; }
.board-header-icon svg { width: 19px; height: 19px; }
.board-leave-dialog { width: min(390px, calc(100% - 28px)); padding: 0; border: 1px solid #E7D9D4; border-radius: 19px; background: white; }
.board-leave-dialog::backdrop { background: rgba(0,0,0,.44); }
.board-confirm-content { display: flex; flex-direction: column; align-items: center; padding: 28px 24px 23px; text-align: center; }
.board-confirm-content > svg { width: 42px; height: 42px; margin-bottom: 13px; color: #B44A4A; }
.board-confirm-content h2 { font-size: 21px; }
.board-confirm-content p { margin: 8px 0 22px; color: #777; line-height: 1.45; }
.board-confirm-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.board-confirm-actions button { min-height: 42px; border-radius: 10px; }
.board-confirm-actions .danger-button { background: #C94E4E; color: white; }
.board-members-card { overflow: hidden; }
.board-member-list { display: grid; gap: 9px; }
.board-member-entry { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid #E9E1D1; border-radius: 13px; background: #FFF; }
.board-member-entry:hover { border-color: #DDCB98; background: #FFFCF3; }
.board-member-identity { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.board-member-identity > strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deska-role-badge { display: inline-flex; align-items: center; min-height: 21px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 850; line-height: 1; }
.deska-role-badge.president { background: #FFF0B3; color: #725900; border: 1px solid #E1BE39; }
.deska-role-badge.councillor { background: #DDF4E8; color: #17663D; border: 1px solid #8BCBAA; }
.board-member-actions { display: grid; grid-template-columns: repeat(2, max-content); justify-content: end; gap: 6px; }
.board-member-action { min-height: 35px; padding: 7px 10px; border: 1px solid #D9D0BE; border-radius: 9px; background: #FFFDF8; color: #514A3E; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.board-member-action:hover { border-color: #D2B645; background: #FFF2BC; color: #5D4900; }
.board-member-action.appoint-role { border-color: #98CEAD; background: #ECF8F1; color: #17663D; }
.board-member-action.remove-role { color: #8B4141; }
.board-member-action.presidency-transfer { grid-column: 1 / -1; border-color: #D8BD56; color: #725900; }
.board-member-action.member-plebiscite-button, .board-member-action.title-variant { grid-column: 1 / -1; }
.board-member-action.member-plebiscite-button { color: #8B4141; }
.board-member-action.ban-member { border-color: #E3B2B2; background: #FFF4F4; color: #9F3030; }
.board-member-action.title-variant { border-style: dashed; color: #6F6759; }
body.dark-mode .deska-role-badge.president { background: #51441C; color: #FFE58A; border-color: #8C7425; }
body.dark-mode .deska-role-badge.councillor { background: #183F2D; color: #9AE1BD; border-color: #357B59; }
body.dark-mode .board-member-entry { border-color: #454545; background: #313131; }
body.dark-mode .board-member-entry:hover { border-color: #6D6040; background: #37352D; }
body.dark-mode .board-member-action { border-color: #555; background: #3A3A3A; color: #EEE; }
body.dark-mode .board-member-action:hover { border-color: #8C7425; background: #4A4122; color: #FFE58A; }
body.dark-mode .board-member-action.appoint-role { border-color: #357B59; background: #183F2D; color: #9AE1BD; }
body.dark-mode .board-member-action.remove-role, body.dark-mode .board-member-action.member-plebiscite-button { color: #FFB0B0; }
body.dark-mode .board-member-action.ban-member { border-color: #754848; background: #482B2B; color: #FFB0B0; }
body.dark-mode .board-member-action.presidency-transfer { border-color: #8C7425; color: #FFE58A; }
.board-ban-list { display: grid; gap: 9px; margin-top: 20px; padding-top: 17px; border-top: 1px solid #E7DDCA; }
.board-ban-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.board-ban-heading h3 { margin: 0; font-size: 17px; }
.board-ban-heading span { display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 7px; border-radius: 999px; background: #F1E7D3; color: #695D48; font-size: 12px; font-weight: 850; }
.board-ban-entry { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 11px; border: 1px solid #E7CACA; border-radius: 12px; background: #FFF8F8; }
.board-ban-entry > a { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.board-ban-entry > a > span { display: grid; gap: 2px; min-width: 0; }
.board-ban-entry strong, .board-ban-entry small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-ban-entry small { color: #766B60; font-size: 11px; }
.board-member-action.unban-member { border-color: #A9CFB6; background: #F0F9F3; color: #216A3E; }
.admin-ban-label { padding: 6px 9px; border-radius: 999px; background: #E6F4EA; color: #287244; font-size: 11px; font-weight: 850; white-space: nowrap; }
.board-ban-empty { margin: 0; color: #81796B; font-size: 13px; }
.deska-ban-dialog select { width: 100%; min-height: 44px; padding: 9px 36px 9px 11px; border: 1px solid #DDD0AA; border-radius: 10px; background: #FFFDF8; color: #302A1A; font: inherit; }
.deska-ban-dialog .danger-button { min-height: 40px; padding: 8px 14px; border: 0; border-radius: 10px; background: #C94E4E; color: white; font: inherit; font-weight: 800; cursor: pointer; }
body.dark-mode .board-ban-list { border-top-color: #484848; }
body.dark-mode .board-ban-heading span { background: #444; color: #EEE; }
body.dark-mode .board-ban-entry { border-color: #684444; background: #3A2D2D; }
body.dark-mode .board-ban-entry small { color: #C9BDB5; }
body.dark-mode .board-member-action.unban-member { border-color: #3E7655; background: #203E2C; color: #A8E3BE; }
body.dark-mode .admin-ban-label { background: #20402D; color: #A8E3BE; }
body.dark-mode .deska-ban-dialog select { border-color: #555; background: #353535; color: white; color-scheme: dark; }
.bucka-reason-dialog .bucka-dialog-panel label { display: grid; gap: 7px; color: inherit; font-weight: 800; text-align: left; }
.bucka-reason-dialog textarea { width: 100%; min-height: 112px; resize: vertical; padding: 11px; border: 1px solid #D8CFBC; border-radius: 12px; background: #FFFDF8; color: #302A1A; font: inherit; }
body.dark-mode .bucka-reason-dialog textarea { border-color: #555; background: #242424; color: #FFF; }
.bucka-report-dialog .bucka-dialog-panel label { display: grid; gap: 7px; color: inherit; font-weight: 800; text-align: left; }
.bucka-report-dialog textarea { width: 100%; min-height: 120px; resize: vertical; padding: 11px; border: 1px solid #D8CFBC; border-radius: 12px; background: #FFFDF8; color: #302A1A; font: inherit; }
body.dark-mode .bucka-report-dialog textarea { border-color: #555; background: #242424; color: #FFF; }
@media (max-width: 640px) {
    .board-members-card { padding: 14px; }
    .board-member-entry { grid-template-columns: minmax(0,1fr); gap: 8px; padding: 10px; }
    .board-member-row { padding: 0; }
    .board-member-actions { grid-template-columns: repeat(2, minmax(0,1fr)); justify-content: stretch; padding-left: 56px; }
    .board-member-action { width: 100%; min-height: 38px; white-space: normal; }
    .board-ban-entry { grid-template-columns: minmax(0,1fr); }
    .board-ban-entry .unban-member { width: 100%; }
}
.board-member-entry .board-member-row { flex: 1; min-width: 0; border-bottom: 0; }
.board-member-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.board-member-toolbar > div { margin-right: auto; }
.board-member-toolbar h2 { margin: 0; }
.board-member-toolbar p { margin: 2px 0 0; color: #81796B; font-size: 12px; font-weight: 700; }
.board-member-toolbar label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.board-member-toolbar select { max-width: 100%; min-height: 40px; padding: 7px 34px 7px 11px; border: 1px solid #DCCFAE; border-radius: 10px; background: #FFFDF8; color: #403A2D; font: inherit; font-weight: 700; cursor: pointer; }
body.dark-mode .board-member-toolbar select { border-color: #555; background: #333; color: #FFF; color-scheme: dark; }
body.dark-mode .board-member-toolbar p { color: #BEB7A8; }
.board-plebiscites { display: grid; gap: 12px; margin-top: 16px; }
.board-activity { margin: 4px 0 12px; padding: 9px 14px; border: 1px solid #E7DCC4; border-radius: 12px; background: #FFFDF8; }
.board-activity p { margin: 5px 0; font-size: 13px; }
.board-activity small { color: #888; white-space: nowrap; }
.board-plebiscites > h2 { font-size: 19px; }
.plebiscite-card { padding: 16px; border: 1px solid #E7DCC4; border-radius: 14px; background: white; }
.plebiscite-label { color: #8A6B00; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.plebiscite-card h3 { margin: 5px 0 10px; }
.plebiscite-card p { margin: 7px 0; }
.plebiscite-counts { display: flex; gap: 22px; margin: 12px 0 6px; }
.plebiscite-card small { display: block; margin-top: 10px; color: #777; }
.plebiscite-decision { padding: 9px 11px; border-radius: 9px; background: #FFF4CC; }
.plebiscite-vote-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.plebiscite-vote-actions button { min-height: 40px; border: 0; border-radius: 10px; font-weight: 750; cursor: pointer; }
.plebiscite-vote-actions button:first-child { background: #FFD43B; color: #292929; }
.plebiscite-vote-actions button:last-child { background: #EEE9DE; color: #555; }
.plebiscite-my-vote { color: #6F5A00; font-weight: 700; }
.plebiscite-actions .buckaed { background: #F3A6B7; color: #44252C; }
.plebiscite-comments-dialog { width: min(520px,calc(100% - 24px)); max-height: 78vh; padding: 0; border: 1px solid #E9DDBD; border-radius: 18px; background: white; }
.plebiscite-comments-dialog::backdrop { background: rgba(0,0,0,.42); }
.plebiscite-comment-list { max-height: 52vh; overflow-y: auto; padding: 8px 18px; }
.plebiscite-comment-list p { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid #EEE5D4; }
.plebiscite-comments-dialog form { display: grid; grid-template-columns: 1fr 42px; gap: 8px; padding: 12px 18px; border-top: 1px solid #E9DDBD; }
.plebiscite-comments-dialog input { min-width: 0; padding: 10px; border: 1px solid #DDD0AA; border-radius: 10px; }
.plebiscite-comments-dialog form button { border: 0; border-radius: 50%; background: #FFD43B; }
.plebiscite-feed-card { cursor: pointer; }
.plebiscite-detail-page .plebiscite-feed-card { cursor: default; }
.plebiscite-detail-main { width: min(760px,calc(100% - 28px)); margin: 24px auto 120px; }
.plebiscite-detail-back { display: inline-flex; margin-bottom: 12px; color: #755B00; font-weight: 750; text-decoration: none; }
.plebiscite-detail-main .plebiscite-feed-card { padding: 20px; }
.plebiscite-detail-comments { margin-top: 16px; padding: 18px; border: 1px solid #E9DDBD; border-radius: 15px; background: white; }
.plebiscite-detail-comments h2 { margin-bottom: 10px; font-size: 19px; }
.plebiscite-detail-comment { padding: 12px 0; border-bottom: 1px solid #EEE5D4; }
.plebiscite-detail-comment-author { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.plebiscite-detail-comment-author .comment-avatar { display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: #FFD43B; }
.plebiscite-detail-comment-author img { width: 100%; height: 100%; object-fit: cover; }
.plebiscite-detail-comment p { margin: 8px 0 4px 40px; white-space: pre-wrap; }
.plebiscite-detail-comment small { margin-left: 40px; color: #888; }
#plebiscite-detail-comment-form { margin-bottom: 12px; }
#plebiscite-detail-comment-form .comment-input { margin: 0; }
#plebiscite-detail-comment-form button { display: grid; place-items: center; width: 44px; min-width: 44px; padding: 0; }
#plebiscite-detail-comment-form button svg { width: 19px; height: 19px; }
body.dark-mode .plebiscite-detail-comments { background: #2b2b2b; border-color: #484848; }
body.dark-mode .comment-composer { background: transparent; border-color: transparent; }
body.dark-mode .comment-user, body.dark-mode .comment-text { color: #F3F3F3; }
@media (max-width:600px) { .plebiscite-detail-main { width:100%; margin:0 0 calc(var(--mobile-nav-height) + 12px); padding:12px; } .plebiscite-detail-comments { padding:14px; } }
.plebiscite-feed-card { overflow: hidden; border-color: #E9DDBD; }
.plebiscite-feed-card:hover { transform: none; }
.plebiscite-feed-header { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 14px; }
.plebiscite-feed-header .post-group-source { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plebiscite-feed-header .plebiscite-feed-icon { width: 30px; height: 30px; flex: 0 0 30px; }
.plebiscite-feed-header .plebiscite-feed-icon svg { width: 16px; height: 16px; }
.plebiscite-countdown { margin-left: auto; color: #B43A3A; font-size: 11px; font-weight: 850; white-space: nowrap; }
.plebiscite-feed-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #FFD43B; color: #3A3217; }
.plebiscite-feed-icon svg { width: 20px; height: 20px; }
.plebiscite-status { padding: 5px 8px; border-radius: 999px; background: #EEE9DE; color: #777; font-size: 11px; font-weight: 800; }
.plebiscite-status.active { background: #FFF0B1; color: #765A00; }
.plebiscite-target { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; padding: 9px 10px; border-radius: 11px; background: #FFF9E8; color: inherit; text-decoration: none; }
.plebiscite-target:hover { background: #FFF4CC; }
.plebiscite-target .group-avatar { width: 34px; height: 34px; flex-basis: 34px; }
.plebiscite-target-copy { display: flex; min-width: 0; align-items: baseline; gap: 5px; }
.plebiscite-target-copy small { margin: 0; color: #777; font-size: 11px; font-weight: 700; }
.plebiscite-target-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
@media (max-width: 420px) {
    .plebiscite-target-copy { flex-wrap: wrap; row-gap: 1px; }
}
.plebiscite-reason { display: grid; gap: 4px; padding: 11px 12px; border-radius: 10px; background: #F8F5EC; }
.plebiscite-reason strong { color: #777; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.plebiscite-progress { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 12px 0 4px; }
.plebiscite-progress.no-threshold { grid-template-columns: repeat(2,1fr); }
.plebiscite-progress > div { display: grid; gap: 2px; padding: 9px; border: 1px solid #EEE5D4; border-radius: 9px; text-align: center; }
.plebiscite-progress span { color: #777; font-size: 10px; font-weight: 750; text-transform: uppercase; }
.plebiscite-progress strong { font-size: 18px; }
.plebiscite-change-preview { display: grid; gap: 7px; margin: 10px 0; padding: 12px; border-radius: 11px; background: #F8F5EC; }
.plebiscite-change-preview > strong { color: #777; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.plebiscite-change-preview p { margin: 0; line-height: 1.45; }
.plebiscite-change-preview img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid white; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.board-change-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #EEE5D4; }
.plebiscite-dialog input[type="file"] { width: 100%; padding: 10px; border: 1px solid #DDD0AA; border-radius: 10px; }
.plebiscite-dialog { width: min(470px, calc(100% - 28px)); padding: 0; border: 1px solid #E7DCC4; border-radius: 18px; background: white; }
.plebiscite-dialog::backdrop { background: rgba(0,0,0,.44); }
.plebiscite-dialog form { display: grid; gap: 11px; padding: 22px; }
.plebiscite-dialog textarea { min-height: 110px; resize: vertical; padding: 11px; border: 1px solid #DDD0AA; border-radius: 10px; font: inherit; }
.plebiscite-dialog-actions { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 5px; }
.plebiscite-dialog-actions button { min-height: 40px; }
body.dark-mode .plebiscite-card, body.dark-mode .plebiscite-dialog, body.dark-mode .board-activity { background: #2b2b2b; border-color: #484848; }
body.dark-mode .plebiscite-reason, body.dark-mode .plebiscite-progress > div { background: #34332F; border-color: #484848; }
body.dark-mode .plebiscite-change-preview { background: #34332F; }
body.dark-mode .plebiscite-target { background: #373526; }
body.dark-mode .plebiscite-target:hover { background: #444027; }
body.dark-mode .plebiscite-dialog textarea { background: #353535; color: white; border-color: #555; }
body.dark-mode .board-member-entry { border-color: #444; }
.board-page .feed-sort { margin: 8px 0 15px; padding: 0 2px; }
.board-page .feed-sort label { color: #8A8274; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.board-page .feed-sort select { min-height: 38px; padding: 7px 34px 7px 13px; border: 1px solid #DDD5C7; border-radius: 999px; background-color: #FFFDF8; color: #514D45; font-size: 13px; font-weight: 700; box-shadow: 0 2px 7px rgba(0,0,0,.035); cursor: pointer; }
body.dark-mode .board-header-icon, body.dark-mode .board-leave-dialog { background: #353535; border-color: #4A4A4A; color: white; }
body.dark-mode .board-confirm-content p { color: #bbb; }

@media (max-width: 620px) {
    .board-page { padding: 0 12px; }
    .board-header { padding: 15px 13px 16px; }
    .board-title-bar { align-items: flex-start; gap: 8px; }
    .board-title-identity { gap: 9px; }
    .board-title-identity h1 { font-size: 21px; }
    .board-header .board-hero-copy { margin-top: 10px; padding-left: 0; }
    .board-header-actions { width: auto; }
    .board-header-actions > * { flex: 0 0 42px; }
    .board-hero-icon { width: 44px; height: 44px; flex-basis: 44px; font-size: 20px; }
    .board-tabs { overflow-x: auto; }
}

@media (min-width: 1380px) {
    body:not(.groups-rail-collapsed) .home-feed,
    body:not(.groups-rail-collapsed) main.main { transform: translateX(90px); }
    .home-feed, main.main { transition: transform .25s ease; }
}

@media (max-width: 1024px) {
    .groups-sidebar, .groups-sidebar.collapsed { width: 0; }
    .groups-panel, .groups-sidebar.collapsed .groups-panel { width: min(88vw, 400px, calc(100vw - 42px)); }
    .groups-sidebar.collapsed .groups-toggle { left: 0; border-left: 0; border-radius: 0 11px 11px 0; }
    body.groups-drawer-open .groups-toggle { left: min(88vw, 400px, calc(100vw - 42px)); border-left: 0; border-radius: 0 11px 11px 0; background: #fff; box-shadow: 5px 2px 10px rgba(0,0,0,.08); }
    body.dark-mode.groups-drawer-open .groups-toggle { background: #2b2b2b; border-color: #444; color: #FFD54F; }
}

@media (max-width: 520px) {
    .home-feed { margin-top: 0; padding: calc(6px + env(safe-area-inset-top)) 10px calc(var(--mobile-nav-height) + 18px); }
    body:has(.home-search) .global-friends-shortcut { top: calc(69px + env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
    body:has(.home-search) .global-notification-shortcut { top: calc(69px + env(safe-area-inset-top)); right: max(66px, calc(54px + env(safe-area-inset-right))); }
    body:has(.home-search) .global-leaderboard-shortcut { top: calc(69px + env(safe-area-inset-top)); right: max(120px, calc(108px + env(safe-area-inset-right))); }
    body:has(.pwa-install-banner):has(.home-search) .global-friends-shortcut { top: calc(123px + env(safe-area-inset-top)); }
    body:has(.pwa-install-banner):has(.home-search) .global-leaderboard-shortcut, body:has(.pwa-install-banner):has(.home-search) .global-notification-shortcut { top: calc(123px + env(safe-area-inset-top)); }
    .groups-sidebar { width: calc(100vw - 18px); }
    .groups-panel { width: calc(100vw - 58px); }
    .groups-sidebar.collapsed { width: 44px; }
}

/* Final cascade guards for the mobile drawer and safe-area shell. */
@media (max-width: 1024px) {
    .groups-sidebar, .groups-sidebar.collapsed { width: 0; }
    .groups-panel, .groups-sidebar.collapsed .groups-panel { width: min(88vw, 400px, calc(100vw - 42px)); }
}
@media (max-width: 600px) {
    .home-feed { margin-top: 0; padding: calc(72px + env(safe-area-inset-top)) 10px calc(var(--mobile-nav-height) + 18px); }
    .board-page { padding: calc(72px + env(safe-area-inset-top)) 10px calc(var(--mobile-nav-height) + 18px); }
    .board-hero-icon { width: 54px; height: 54px; flex-basis: 54px; font-size: 23px; }
    body.dark-mode .comment-composer { background: transparent; border-color: transparent; }
}

/* Chat fills the viewport while its content stops exactly above navigation. */
html.messages-document {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

body.messages-body,
body:has(.messages-page) {
    position: fixed;
    top: var(--chat-viewport-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: var(--chat-viewport-height, 100dvh);
    overflow: hidden;
    overscroll-behavior: none;
}

body.has-bottom-nav:has(.messages-page) {
    padding-bottom: 0;
}

.messages-page {
    width: 100%;
    max-width: none;
    height: var(--chat-viewport-height, 100dvh);
    min-height: 0;
    margin: 0;
    padding: 0 0 104px;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.messages-page .conversation-sidebar,
.messages-page .conversation-panel {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

.messages-page .conversation-list {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.messages-page .conversation-view {
    overflow: hidden;
    overscroll-behavior: none;
}

.messages-page .conversation-header,
.messages-page .message-reply-compose,
.messages-page .message-composer,
.messages-page .message-disabled,
.messages-page .message-send-state {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

.messages-page .chat-active-users {
    overflow: visible;
    overscroll-behavior: none;
    touch-action: none;
}

.messages-page .message-history {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overflow-anchor: none;
}

.messages-page .message-composer textarea,
.messages-page .message-composer button,
.messages-page .conversation-header button,
.messages-page .conversation-header a {
    touch-action: manipulation;
}

.messages-page .message-composer textarea {
    overflow-y: hidden;
}

@media (min-width: 601px) and (max-width: 1024px) {
    .messages-page {
        padding-bottom: 90px;
    }
}

@media (max-width: 600px) {
    .messages-page {
        height: var(--chat-viewport-height, 100dvh);
        margin: 0;
        padding-bottom: var(--mobile-nav-height);
    }

    .message-composer {
        padding: 10px 12px;
    }

    html.chat-keyboard-open .bottom-nav,
    html.chat-keyboard-open .global-friends-shortcut,
    html.chat-keyboard-open .global-leaderboard-shortcut,
    html.chat-keyboard-open .global-notification-shortcut,
    body:has(.messages-page #message-input:focus) .bottom-nav {
        display: none !important;
    }

    body:has(.messages-page #message-input:focus) .global-friends-shortcut,
    body:has(.messages-page #message-input:focus) .global-leaderboard-shortcut,
    body:has(.messages-page #message-input:focus) .global-notification-shortcut { display: none !important; }

    html.chat-keyboard-open .messages-page,
    body:has(.messages-page #message-input:focus) .messages-page {
        padding-bottom: 0;
    }
}

@media (max-width: 720px) {
    body:has(.global-leaderboard-shortcut) .conversation-sidebar-header,
    body:has(.global-leaderboard-shortcut) .conversation-header { padding-right: 180px; }
}
body.auth-resolving .auth-card {
    visibility: hidden;
}

[data-auth-startup] {
    min-height: 100vh;
    display: grid;
    place-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
}

[data-auth-startup] p {
    margin: 0;
}

[data-auth-startup] button {
    min-height: 44px;
    margin-top: 8px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    background: #FFD43B;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 600px) {
    .bucka-system-dialog.action-menu { inset: auto 0 0; width: 100%; max-width: 520px; margin: 0 auto; border-radius: 20px 20px 0 0; }
}

@media (max-width: 600px) and (display-mode: standalone) {
    :root { --mobile-nav-height: calc(66px + env(safe-area-inset-bottom)); }
    .bottom-nav { padding-right: max(8px, env(safe-area-inset-right)); padding-bottom: env(safe-area-inset-bottom); padding-left: max(8px, env(safe-area-inset-left)); }
}

@media (max-width: 600px) {
    html.pwa-standalone { --mobile-nav-height: calc(66px + env(safe-area-inset-bottom)); }
    html.pwa-standalone .bottom-nav { padding-right: max(8px, env(safe-area-inset-right)); padding-bottom: env(safe-area-inset-bottom); padding-left: max(8px, env(safe-area-inset-left)); }
}
.settings-row-with-detail > span:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.settings-row-with-detail small { color: var(--muted-text, #687076); font-size: .78rem; font-weight: 500; }

/* Keep every shared identity image square and centered, including replaced
   <img> elements whose intrinsic mobile dimensions would otherwise leak in. */
.bucka-user-avatar,
.bucka-deska-icon,
.profile-pic,
.avatar,
.friend-avatar,
.comment-avatar,
.conversation-avatar,
.group-message-avatar,
.group-avatar,
.share-friend-avatar,
.home-recommendation-avatar,
.profile-featured-friend-avatar,
.admin-group-avatar {
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid #D8CBA8;
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
    background-color: #F3EFDF;
}

body.dark-mode .bucka-user-avatar,
body.dark-mode .bucka-deska-icon,
body.dark-mode .profile-pic,
body.dark-mode .avatar,
body.dark-mode .friend-avatar,
body.dark-mode .comment-avatar,
body.dark-mode .conversation-avatar,
body.dark-mode .group-message-avatar,
body.dark-mode .group-avatar,
body.dark-mode .share-friend-avatar,
body.dark-mode .home-recommendation-avatar,
body.dark-mode .profile-featured-friend-avatar,
body.dark-mode .admin-group-avatar {
    border-color: #655F4E;
}

img.bucka-user-avatar {
    display: block;
}

.bucka-deska-icon img,
.group-avatar img,
.admin-group-avatar img,
.share-friend-avatar img,
.comment-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background-color: #F3EFDF;
}

.bucka-deska-icon { display: grid; place-items: center; }
.bucka-user-avatar-fallback { text-align: center; }
.profile-pic { display: grid; place-items: center; }
/* User-selected identity images should remain fully visible inside their
   fixed square/circular frames instead of being zoomed and cropped. */
img.bucka-user-avatar,
.bucka-deska-icon img,
.group-avatar img,
.board-hero-icon img,
.post-group-icon img,
.admin-group-avatar img,
.conversation-avatar,
.profile-pic img,
.icon-image-picker-preview img {
    object-fit: contain !important;
    object-position: center;
    background-color: #F3EFDF;
}
body.dark-mode img.bucka-user-avatar,
body.dark-mode .bucka-deska-icon img,
body.dark-mode .group-avatar img,
body.dark-mode .board-hero-icon img,
body.dark-mode .post-group-icon img,
body.dark-mode .admin-group-avatar img,
body.dark-mode .conversation-avatar,
body.dark-mode .profile-pic img,
body.dark-mode .icon-image-picker-preview img { background-color: #353535; }
body:has(.fullscreen-image-viewer[open]) { overflow: hidden; }
.fullscreen-image-viewer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: #050505; color: #FFF; }
.fullscreen-image-viewer::backdrop { background: #050505; }
.image-viewer-stage { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-x; }
.image-viewer-stage.zoomed { overflow: hidden; scroll-snap-type: none; touch-action: none; cursor: grab; }
.image-viewer-stage.zoomed:active { cursor: grabbing; }
.image-viewer-stage::-webkit-scrollbar { display: none; }
.image-viewer-slide { display: grid; min-width: 100%; height: 100%; flex: 0 0 100%; place-items: center; scroll-snap-align: center; scroll-snap-stop: always; }
.image-viewer-stage img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center; user-select: none; -webkit-user-drag: none; transform-origin: center; will-change: transform; }
.image-viewer-stage img.enter-right { animation: viewer-enter-right .18s ease-out; }
.image-viewer-stage img.enter-left { animation: viewer-enter-left .18s ease-out; }
@keyframes viewer-enter-right { from { opacity: .45; transform: translateX(30px); } }
@keyframes viewer-enter-left { from { opacity: .45; transform: translateX(-30px); } }
.image-viewer-toolbar { position: fixed; z-index: 4; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 12px; padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left)); background: linear-gradient(180deg, rgba(0,0,0,.58), transparent); pointer-events: none; }
.image-viewer-close, .image-viewer-nav { z-index: 2; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(28,28,28,.72); color: #FFF; backdrop-filter: blur(12px); cursor: pointer; }
.image-viewer-toolbar button { pointer-events: auto; }
.image-viewer-close svg, .image-viewer-save svg { width: 22px; height: 22px; }
.image-viewer-nav { position: fixed; top: 50%; width: 46px; height: 46px; transform: translateY(-50%); }
.image-viewer-nav.previous { left: max(12px, env(safe-area-inset-left)); }
.image-viewer-nav.next { right: max(12px, env(safe-area-inset-right)); }
.image-viewer-nav svg { width: 28px; height: 28px; }
.image-viewer-nav[hidden] { display: none; }
.image-viewer-counter { justify-self: center; min-width: 48px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(28,28,28,.62); font-size: 13px; font-weight: 800; text-align: center; backdrop-filter: blur(12px); }
@media (max-width: 600px) { .image-viewer-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .image-viewer-stage img { animation: none !important; } }

/* Icon-only controls use their full button box as the alignment reference. */
#message-send-button,
#comment-send-button,
#comment-image-button,
#comment-camera-button,
#create-post-submit,
.post-top-icon,
.conversation-delete,
.conversation-back,
.bottom-nav-item,
.profile-chat-action,
.icon-only-action,
.compact-icon-button {
    display: inline-grid;
    place-items: center;
    padding: 0;
    line-height: 1;
}


button > svg,
.bottom-nav-item > svg,
.profile-chat-action > svg,
.icon-only-action > svg {
    display: block;
    margin: 0;
}

/* The paper-plane drawing is optically heavier on its right side. */
button > .lucide-send { transform: translateX(-1px); }

#message-send-button {
    width: 46px;
    height: 46px;
    align-self: center;
}

#comment-send-button,
#comment-image-button,
#comment-camera-button {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-self: center;
}
.comment-input #comment-send-button { width: 46px; height: 46px; flex: 0 0 46px; }

body:has(.content-edit-sheet[open]) { overflow: hidden; }
.content-edit-sheet .creation-sheet-panel { overscroll-behavior: none; will-change: transform; }
.content-edit-sheet .creation-sheet-scroll { overflow: hidden; overscroll-behavior: none; }
.content-edit-sheet .creation-sheet-panel, .content-edit-sheet .creation-sheet-scroll, .content-edit-sheet textarea { touch-action: none; }
.content-edit-sheet::backdrop { opacity: var(--sheet-backdrop-opacity, 1); transition: opacity .12s linear; }
.content-edit-sheet .content-edit-form { max-height: calc(100dvh - 70px - env(safe-area-inset-top)); overflow: hidden; }
.content-edit-sheet .content-edit-form textarea { max-height: min(38dvh, 320px); overflow: hidden; }
.post-content-edit-sheet .creation-sheet-panel,
.post-content-edit-sheet .creation-sheet-scroll { overflow: hidden; touch-action: none; }
.post-content-edit-sheet .content-edit-form { overflow: hidden; }
.post-content-edit-sheet .content-edit-form textarea { max-height: min(55dvh, 520px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }

@media (max-width: 600px) {
    .conversation-header {
        background: #fff;
        border-bottom-color: #E9E9E9;
    }

    body.dark-mode .conversation-header {
        background: #2B2B2B;
        border-bottom-color: #444;
    }
}

/* Standalone mode gets one-third more navigation space while its controls
   retain the same touch-target size. */
@media (max-width: 600px) and (display-mode: standalone) {
    :root { --mobile-nav-height: calc(100px + env(safe-area-inset-bottom)); }
    .bottom-nav-pill { transform: translateY(-18px); }
}

@media (max-width: 600px) {
    html.pwa-standalone { --mobile-nav-height: calc(100px + env(safe-area-inset-bottom)); }
    html.pwa-standalone .bottom-nav-pill { transform: translateY(-18px); }
}

/* Dedicated creation pages */
.creation-page { width: min(720px, calc(100% - 32px)); margin: 28px auto 120px; }
.creation-card { padding: 26px; border: 1px solid #F0E5C4; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.creation-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 24px; }
.creation-heading .group-avatar { width: 46px; height: 46px; flex-basis: 46px; font-size: 24px; }
.creation-heading h1 { font-size: 25px; line-height: 1.2; }
.creation-heading p { margin-top: 3px; color: #777; font-size: 14px; }
.creation-form { display: grid; min-width: 0; gap: 9px; }
.creation-form > label:not(.group-privacy-option) { margin-top: 7px; font-weight: 750; }
.creation-form > label small { color: #777; font-weight: 500; }
.creation-form > input:not([type="checkbox"]), .creation-form > textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 46px; box-sizing: border-box; padding: 11px 12px; overflow-x: hidden; border: 1px solid #DCCFAE; border-radius: 11px; outline: 0; background: #FFFDF8; background-clip: padding-box; color: inherit; caret-color: #9A7200; font: inherit; -webkit-appearance: none; appearance: none; }
.creation-form > textarea { min-height: 130px; resize: none; overflow-wrap: anywhere; }
.creation-form > input:not([type="checkbox"]):focus, .creation-form > textarea:focus { border-color: #C69200; box-shadow: inset 0 0 0 1px #C69200; }
.creation-form fieldset { min-width: 0; max-height: 44vh; margin-top: 8px; padding: 12px; overflow-y: auto; border: 1px solid #E5D9BB; border-radius: 13px; }
.creation-form legend { padding: 0 5px; font-weight: 750; }
.creation-friend-list { display: grid; gap: 5px; }
.creation-friend-row { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 11px; min-height: 58px; padding: 5px 7px; border-radius: 10px; cursor: pointer; }
.creation-friend-row:hover { background: #FFF4CC; }
.creation-friend-row input { width: 21px; height: 21px; accent-color: #B77900; }
.creation-error { margin: 7px 0 0; padding: 10px 12px; border-radius: 10px; background: #FDE8E8; color: #A32121; font-weight: 650; }
.creation-error[hidden], .group-privacy-option[hidden] { display: none; }
.creation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.creation-actions.single { grid-template-columns: 1fr; }
.icon-image-picker { position: relative; display: block; width: 88px; height: 88px; margin: 8px auto 15px; cursor: pointer; }
.icon-image-picker.compact { width: 72px; height: 72px; margin-block: 4px 14px; }
.icon-image-picker-preview { display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; border: 2px solid #E4D8B8; border-radius: 50%; background: #FFF4CC; color: #5E5129; }
.icon-image-picker-preview > *, .icon-image-picker-preview img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.icon-image-picker-preview svg { width: 42%; height: 42%; }
.icon-image-picker-plus { position: absolute; right: -2px; bottom: 2px; display: grid; width: 30px; height: 30px; place-items: center; border: 3px solid #FFFDF8; border-radius: 50%; background: #B77900; color: #fff; font-size: 22px; font-weight: 800; line-height: 1; box-shadow: 0 2px 7px rgba(0,0,0,.16); }
body.dark-mode .icon-image-picker-preview { border-color: #555; background: #3A3526; color: #E8DDAF; }
body.dark-mode .icon-image-picker-plus { border-color: #242424; background: #22A559; }
.creation-actions > * { min-height: 46px; }
body.dark-mode .creation-card { background: #2b2b2b; border-color: #484848; }
body.dark-mode .creation-heading p, body.dark-mode .creation-form > label small { color: #bbb; }
body.dark-mode .creation-form > input:not([type="checkbox"]), body.dark-mode .creation-form > textarea { background: #333; border-color: #555; color: #fff; }
body.dark-mode .creation-form fieldset { border-color: #555; }
body.dark-mode .creation-friend-row:hover { background: #3b3525; }

@media (max-width: 600px) {
    .creation-page { width: 100%; margin: 0; padding: 14px 10px calc(var(--mobile-nav-height) + 18px); }
    .creation-card { min-height: calc(100dvh - var(--mobile-nav-height) - 28px); padding: 18px 14px; border: 0; border-radius: 0; box-shadow: none; }
    .creation-form fieldset { max-height: none; }
}

/* Full-page creation sheets. Drag the handle down to dismiss. */
.creation-sheet { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: inherit; }
.creation-sheet::backdrop { background: rgba(30,25,12,.34); backdrop-filter: blur(2px); }
.creation-sheet-panel { width: 100%; height: 100%; overflow: hidden; contain: paint; isolation: isolate; background: #FFFDF8; transition: transform .22s ease; }
.creation-sheet[open] .creation-sheet-panel { animation: creation-sheet-rise .25s ease-out; }
@keyframes creation-sheet-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .creation-sheet[open] .creation-sheet-panel { animation: none; } }
.creation-sheet-grabber { display: grid; place-items: center; height: calc(34px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background: #FFF0B3; cursor: grab; touch-action: none; user-select: none; }
.creation-sheet-grabber:active { cursor: grabbing; }
.creation-sheet-grabber span { width: 48px; height: 5px; border-radius: 999px; background: #9A8336; }
.creation-sheet-scroll { position: relative; width: min(720px, 100%); height: calc(100% - 34px - env(safe-area-inset-top)); box-sizing: border-box; margin: 0 auto; padding: 18px 22px calc(var(--mobile-nav-height, 66px) + 22px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
body.dark-mode .creation-sheet-panel { background: #242424; }
body.dark-mode .creation-sheet-grabber { background: #4A4122; }
body.dark-mode .creation-sheet-grabber span { background: #B9A45A; }
@media (max-width: 600px) { .creation-sheet-scroll { padding: 16px 14px calc(var(--mobile-nav-height) + 18px); } }

.bucka-onboarding { width: min(760px, calc(100% - 28px)); max-width: none; height: min(850px, calc(100dvh - 28px)); max-height: none; padding: 0; overflow: hidden; border: 0; border-radius: 24px; background: transparent; color: inherit; }
.bucka-onboarding::backdrop { background: rgba(28,24,14,.58); backdrop-filter: blur(4px); }
.bucka-onboarding-panel { display: grid; grid-template-rows: minmax(0, 1fr) 64px; width: 100%; height: 100%; overflow: hidden; border: 1px solid #E8DDBF; border-radius: 24px; background: #FFFDF8; box-shadow: 0 24px 70px rgba(35,27,5,.28); }
.bucka-onboarding-content { display: grid; min-height: 0; align-content: start; padding: clamp(25px, 5vh, 48px) clamp(18px, 5vw, 52px) 20px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.bucka-onboarding-content > header { width: min(540px, 100%); margin: 0 auto 21px; text-align: center; }
.bucka-onboarding-content header h2 { margin: 4px 0 7px; font-size: clamp(25px, 4vw, 34px); line-height: 1.15; }
.bucka-onboarding-content header p { margin: 0; color: #716B5C; font-size: 15px; line-height: 1.5; }
.bucka-onboarding-kicker { color: #9A7200; font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.bucka-onboarding-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 9px clamp(14px, 4vw, 30px) calc(9px + env(safe-area-inset-bottom)); border-top: 1px solid #E9DEC2; background: #FFF9E8; }
.bucka-onboarding-left, .bucka-onboarding-right { display: flex; align-items: center; gap: 8px; }
.bucka-onboarding-right { justify-content: flex-end; }
.bucka-onboarding-counter { min-width: 42px; color: #7A692E; text-align: center; font-size: 14px; }
.onboarding-primary, .onboarding-skip, .onboarding-back { min-height: 42px; padding: 9px 14px; border: 0; border-radius: 11px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 800; }
.onboarding-primary { background: #FFD43B; color: #332B0A; box-shadow: 0 3px 9px rgba(154,114,0,.14); }
.onboarding-primary:disabled { background: #B8B8B8; color: #666; opacity: 1; cursor: default; box-shadow: none; }
.onboarding-skip { background: transparent; color: #766A49; }
.onboarding-back { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #DED2AE; background: #FFFDF8; color: #665B3D; }
.onboarding-back:hover { border-color: #CEB85E; background: #FFF1B7; }
.onboarding-back:active { transform: scale(.97); }
.onboarding-back svg { width: 17px; height: 17px; }
.onboarding-welcome-identity { display: flex; width: min(430px, 100%); align-items: center; gap: 11px; margin: -5px auto 18px; padding: 11px 13px; border: 1px solid #E8DAB2; border-radius: 15px; background: #FFF9E8; }
.onboarding-welcome-avatar { width: 46px; height: 46px; flex: 0 0 46px; }
.onboarding-welcome-identity > span { display: grid; min-width: 0; gap: 2px; text-align: left; }
.onboarding-welcome-identity small { color: #817865; font-size: 11px; font-weight: 700; }
.onboarding-welcome-identity strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-friends-title { width: min(540px, 100%); margin: 0 auto 8px; font-size: 15px; }
.first-post-hint { position: absolute; left: 50%; bottom: calc(100% + 16px); z-index: 3; display: flex; width: min(245px, calc(100vw - 28px)); align-items: center; gap: 8px; padding: 11px 10px 11px 13px; border: 1px solid #DDBF50; border-radius: 14px; background: #FFF8D9; color: #473A09; box-shadow: 0 9px 25px rgba(46,34,0,.24); font-size: 13px; font-weight: 750; line-height: 1.35; text-align: left; transform: translateX(-50%); cursor: default; }
.first-post-hint::after { position: absolute; top: 100%; left: 50%; width: 12px; height: 12px; border-right: 1px solid #DDBF50; border-bottom: 1px solid #DDBF50; background: #FFF8D9; content: ""; transform: translate(-50%, -6px) rotate(45deg); }
.first-post-hint > span { min-width: 0; flex: 1; }
.first-post-hint button { position: relative; z-index: 1; display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #F2E4AD; color: #5A4908; cursor: pointer; }
.first-post-hint button svg { width: 16px; height: 16px; }
.first-friend-search { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 12px; padding: 0 12px; border: 1px solid #DFD2AC; border-radius: 13px; background: white; color: #75662D; }
.first-friend-search:focus-within { border-color: #C69200; box-shadow: inset 0 0 0 1px #C69200; }
.first-friend-search svg { width: 19px; height: 19px; flex: 0 0 19px; }
.first-friend-search input { min-width: 0; width: 100%; height: 46px; padding: 0; border: 0; outline: 0; background: transparent; color: inherit; caret-color: #9A7200; font: inherit; }
.first-friend-results { display: grid; min-height: 92px; max-height: min(48dvh, 430px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #EFE5CB; border-radius: 14px; background: white; }
.first-friend-row { display: flex; min-width: 0; align-items: center; gap: 9px; padding: 9px 10px; border-bottom: 1px solid #F1E9D5; }
.first-friend-row:last-child { border-bottom: 0; }
.first-friend-person { display: flex; min-width: 0; flex: 1; align-items: center; gap: 10px; color: inherit; }
.first-friend-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.first-friend-avatar { width: 42px; height: 42px; flex: 0 0 42px; }
.first-friend-row > button { display: inline-flex; min-height: 38px; padding: 7px 10px; align-items: center; gap: 5px; border: 0; border-radius: 10px; background: #FFD43B; color: #3D340E; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.first-friend-row > button svg { width: 17px; height: 17px; }
.first-friend-row > button.sent { background: #DDF5E5; color: #176B36; }
.first-friend-empty { margin: auto; padding: 25px 15px; color: #777; text-align: center; }
.onboarding-deska-list { display: grid; width: min(590px, 100%); max-height: min(55dvh, 500px); margin: 0 auto; gap: 9px; overflow-y: auto; overscroll-behavior: contain; }
.onboarding-deska-row { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; min-width: 0; align-items: center; gap: 11px; padding: 11px 13px; border: 1px solid #E5D8B5; border-radius: 15px; background: white; color: inherit; text-align: left; }
.onboarding-deska-row > span { display: grid; min-width: 0; gap: 2px; }
.onboarding-deska-row strong, .onboarding-deska-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onboarding-deska-row small { color: #7B7567; }
.onboarding-deska-row.selected { border-color: #D0A800; background: #FFF7D7; box-shadow: inset 0 0 0 1px #D0A800; }
.onboarding-deska-action { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 5px; padding: 8px 12px; border: 1px solid #D2A900; border-radius: 11px; background: #FFD43B; color: #292000; cursor: pointer; font: inherit; font-size: 13px; font-weight: 850; white-space: nowrap; }
.onboarding-deska-action svg { width: 16px; height: 16px; }
.onboarding-deska-row.selected .onboarding-deska-action { border-color: #188245; background: #22A559; color: #FFF; }
.onboarding-deska-icon { width: 50px; height: 50px; }
.onboarding-feature-step { display: grid; width: min(530px, 100%); margin: auto; place-items: center; text-align: center; }
.onboarding-feature-step header { margin-top: 20px; }
.onboarding-feature-icon { display: grid; width: 94px; height: 94px; place-items: center; border-radius: 28px; background: #FFF0B3; color: #806200; box-shadow: 0 10px 30px rgba(128,98,0,.12); }
.onboarding-feature-icon svg { width: 45px; height: 45px; }
.onboarding-step-error { min-height: 20px; margin: 15px 0 0; color: #B42318; font-size: 13px; }
body.dark-mode .bucka-onboarding-panel, body.dark-mode .first-friend-results { border-color: #4F4A3E; background: #292929; }
body.dark-mode .bucka-onboarding-footer { border-color: #494333; background: #25231D; }
body.dark-mode .bucka-onboarding-content header p, body.dark-mode .first-friend-empty { color: #BBB; }
body.dark-mode .bucka-onboarding-kicker, body.dark-mode .bucka-onboarding-counter { color: #E0C45D; }
body.dark-mode .first-friend-search { border-color: #555; background: #333; color: #E8D479; }
body.dark-mode .first-friend-row { border-color: #444; }
body.dark-mode .first-friend-row > button.sent { background: #244F34; color: #AEE8C0; }
body.dark-mode .onboarding-deska-row { border-color: #505050; background: #333; }
body.dark-mode .onboarding-deska-row small { color: #BBB; }
body.dark-mode .onboarding-deska-row.selected { border-color: #D4B235; background: #443B1C; }
body.dark-mode .onboarding-deska-action { border-color: #D4B235; background: #EFCB3E; color: #201B08; }
body.dark-mode .onboarding-deska-row.selected .onboarding-deska-action { border-color: #258D4D; background: #22A559; color: #FFF; }
body.dark-mode .onboarding-feature-icon { background: #4A4122; color: #FFE27A; }
body.dark-mode .onboarding-skip { color: #C9C2AF; }
body.dark-mode .onboarding-back { border-color: #57503D; background: #333028; color: #F1D978; }
body.dark-mode .onboarding-back:hover { background: #464027; }
body.dark-mode .onboarding-welcome-identity { border-color: #504A39; background: #333028; }
body.dark-mode .onboarding-welcome-identity small { color: #BEB7A5; }
body.dark-mode .first-post-hint { border-color: #776728; background: #423B22; color: #FFF0B0; box-shadow: 0 9px 26px rgba(0,0,0,.45); }
body.dark-mode .first-post-hint::after { border-color: #776728; background: #423B22; }
body.dark-mode .first-post-hint button { background: #5A4F28; color: #FFE27A; }

@media (max-width: 600px) {
    .bucka-onboarding { width: calc(100% - 12px); height: calc(100dvh - 12px); border-radius: 20px; }
    .bucka-onboarding-panel { grid-template-rows: minmax(0, 1fr) calc(62px + env(safe-area-inset-bottom)); border-radius: 20px; }
    .bucka-onboarding-content { padding: 25px 12px 14px; }
    .bucka-onboarding-content > header { margin-bottom: 16px; }
    .bucka-onboarding-footer { padding-inline: 9px; }
    .onboarding-primary, .onboarding-skip, .onboarding-back { padding-inline: 10px; font-size: 13px; }
    .first-friend-results { max-height: calc(100dvh - 285px - env(safe-area-inset-bottom)); }
    .onboarding-deska-list { max-height: calc(100dvh - 245px - env(safe-area-inset-bottom)); }
}

/* Full-page group settings sheet. */
#chat-group-info-content { display: grid; align-content: start; gap: 14px; width: min(620px, 100%); padding: 24px 22px calc(var(--mobile-nav-height, 66px) + 22px); }
#chat-group-info-content .icon-image-picker { margin-bottom: 4px; }
#chat-group-info-content [data-rename-group] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding: 14px; border: 1px solid #E8DEC5; border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(55,42,8,.05); }
#chat-group-info-content [data-rename-group] input, #chat-group-info-content select { width: 100%; min-width: 0; min-height: 44px; padding: 9px 11px; border: 1px solid #D9D1BF; border-radius: 10px; background: #FFFDF8; color: inherit; font: inherit; }
#chat-group-info-content [data-rename-group] button { min-height: 44px; padding-inline: 14px; background: #FFD54F; color: #302A1A; font-weight: 800; }
.chat-member-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 0 4px; }
.chat-member-heading strong { font-size: 18px; }
.chat-member-heading small { display: grid; min-width: 27px; height: 27px; place-items: center; border-radius: 999px; background: #FFF0B3; color: #6A5718; font-weight: 800; }
#chat-group-info-content .chat-member-list { gap: 0; overflow: hidden; border: 1px solid #E8DEC5; border-radius: 14px; background: #fff; }
#chat-group-info-content .chat-member-row { min-width: 0; padding: 11px 12px; border-bottom: 1px solid #F0E8D4; }
#chat-group-info-content .chat-member-row:last-child { border-bottom: 0; }
#chat-group-info-content .chat-member-row > span:not(.chat-member-actions) { min-width: 0; }
#chat-group-info-content .chat-member-actions { flex-wrap: wrap; justify-content: flex-end; }
#chat-group-info-content .chat-add-member { display: grid; gap: 6px; font-weight: 750; }
#chat-group-info-content .group-leave { width: 100%; min-height: 46px; margin-top: 6px; font-weight: 800; }
.group-report-action { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 9px 13px; border: 1px solid #E4BDBD; border-radius: 12px; background: #FFF7F7; color: #9A3737; font: inherit; font-weight: 800; cursor: pointer; }
.group-report-action svg { width: 18px; height: 18px; }
body.dark-mode #chat-group-info-content [data-rename-group], body.dark-mode #chat-group-info-content .chat-member-list { border-color: #494949; background: #2F2F2F; }
body.dark-mode .group-report-action { border-color: #704747; background: #402C2C; color: #FFB0B0; }
body.dark-mode #chat-group-info-content [data-rename-group] input, body.dark-mode #chat-group-info-content select { border-color: #555; background: #242424; color: #fff; }
body.dark-mode .chat-member-heading small { background: #4A4122; color: #F0D978; }
@media (max-width: 520px) {
    #chat-group-info-content { gap: 12px; padding: 16px 14px calc(var(--mobile-nav-height) + 18px); }
    #chat-group-info-content [data-rename-group] { grid-template-columns: 1fr; }
    #chat-group-info-content .chat-member-row { align-items: flex-start; }
    #chat-group-info-content .chat-member-actions { max-width: 105px; }
}

/* Feed cards sit clearly above the warm page background, while keeping the
   vertical rhythm calm enough for long scrolling sessions. */
#posts-container > .post-card {
    margin-bottom: 18px;
    border: 1px solid #E3D3AA;
    border-radius: 17px;
    background: #FFF;
    box-shadow: 0 7px 22px rgba(78, 59, 13, .10), 0 1px 3px rgba(78, 59, 13, .08);
    content-visibility: auto;
    contain-intrinsic-size: auto 430px;
}
#posts-container > .post-card:hover {
    border-color: #D6BD76;
    box-shadow: 0 10px 26px rgba(78, 59, 13, .13), 0 2px 5px rgba(78, 59, 13, .08);
}
body.dark-mode #posts-container > .post-card {
    border-color: #5B5135;
    background: #2B2B2B;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .30), 0 1px 3px rgba(0, 0, 0, .28);
}
body.dark-mode #posts-container > .post-card:hover {
    border-color: #82703E;
    box-shadow: 0 11px 28px rgba(0, 0, 0, .38);
}

/* Feed browsing: stronger hierarchy, media-led cards and compact discovery. */
#posts-container > .post-card[data-card-href] { cursor: pointer; transform-origin: center; transition: transform .14s ease, background-color .14s ease, border-color .18s ease, box-shadow .18s ease; }
#posts-container > .post-card[data-card-href]:active { transform: scale(.992); background: #FFFCF3; }
#posts-container > .post-card .post-group-source { display: inline-flex; width: fit-content; align-items: center; gap: 6px; margin-bottom: 7px; padding: 4px 8px 4px 5px; border-radius: 999px; background: #FFF6D4; color: #765C08; font-size: 12px; font-weight: 800; text-decoration: none; }
#posts-container > .post-card .post-group-icon { width: 25px; height: 25px; flex: 0 0 25px; }
#posts-container > .post-card .post-header { margin-bottom: 7px; }
#posts-container > .post-card .username { font-size: 15px; font-weight: 820; }
#posts-container > .post-card .timestamp { color: #999; }
#posts-container > .post-card .post-link { display: block; color: inherit; }
#posts-container > .post-card .post-title { margin: 4px 0 6px; color: #211E17; font-size: clamp(20px, 2.4vw, 23px); font-weight: 850; line-height: 1.18; letter-spacing: -.015em; }
#posts-container > .post-card .post-content { margin: 0; color: #6C675C; font-size: 14px; line-height: 1.5; }
#posts-container > .post-card .feed-post-preview { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
#posts-container > .post-card .feed-post-preview.expanded { display: block; overflow: visible; }
.post-read-more { margin: 4px 0 0; padding: 2px 0; border: 0; background: transparent; color: #956B00; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; }
.post-read-more[hidden] { display: none; }
#posts-container > .post-card .post-feed-image-wrap { aspect-ratio: 16 / 10; height: auto; margin: 11px 0 9px; border-radius: 15px; }
#posts-container > .post-card .divider { margin: 9px 0 7px; }
#posts-container > .post-card .post-actions { opacity: .82; }
#posts-container > .post-card .post-actions:focus-within, #posts-container > .post-card:hover .post-actions { opacity: 1; }

.feed-discovery-strip { margin: 2px 0 18px; padding: 13px; border: 1px solid #E7D8AE; border-radius: 16px; background: #FFF9E8; box-shadow: 0 5px 16px rgba(78,59,13,.07); }
.feed-discovery-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; color: #5D4A0B; }
.feed-discovery-heading strong { font-size: 15px; }
.feed-discovery-heading span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: #FFD54F; color: #332B14; }
.feed-discovery-heading svg { width: 16px; height: 16px; }
.feed-discovery-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.feed-discovery-item { display: grid; min-width: 0; gap: 3px; padding: 10px; border: 1px solid #E9DDBD; border-radius: 11px; background: #FFF; color: inherit; text-decoration: none; transition: transform .14s ease, background .14s ease; }
.feed-discovery-item:active { transform: scale(.98); }
.feed-discovery-item small { overflow: hidden; color: #967000; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.feed-discovery-item strong { overflow: hidden; font-size: 13px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.feed-discovery-item span { color: #8A867D; font-size: 10px; }

.feed-skeleton { gap: 18px; }
.feed-skeleton-card { padding: 14px; border: 1px solid #E7DDBF; border-radius: 17px; background: #FFF; }
.feed-skeleton-head { display: flex; align-items: center; gap: 9px; }
.feed-skeleton-head > span { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; }
.feed-skeleton-head > div { display: grid; width: min(180px, 48%); gap: 6px; }
.feed-skeleton-head i:first-child { height: 11px; }
.feed-skeleton-head i:last-child { width: 55%; height: 8px; }
.feed-skeleton-card > b { display: block; width: 68%; height: 20px; margin: 13px 0 9px; }
.feed-skeleton-card > em { display: block; aspect-ratio: 16 / 8; width: 100%; border-radius: 14px; }
.feed-skeleton-actions { display: flex; gap: 8px; margin-top: 11px; }
.feed-skeleton-actions i { width: 54px; height: 30px; border-radius: 9px; }
.feed-skeleton-card span, .feed-skeleton-card i, .feed-skeleton-card b, .feed-skeleton-card em { background: linear-gradient(100deg,#F4EEDC 20%,#FFF9E9 38%,#F4EEDC 56%); background-size: 220% 100%; animation: bucka-skeleton 1.15s ease-in-out infinite; }
body.dark-mode #posts-container > .post-card[data-card-href]:active { background: #302E28; }
body.dark-mode #posts-container > .post-card .post-group-source { background: #403A27; color: #F0D978; }
body.dark-mode #posts-container > .post-card .post-title { color: #FFF; }
body.dark-mode #posts-container > .post-card .post-content { color: #C9C7C1; }

.friend-view-statistics-dialog { inset: auto 0 0; width: 100%; height: 50dvh; color: #29261F; }
.friend-view-statistics-dialog::backdrop { background: rgba(20,18,12,.52); opacity: var(--sheet-backdrop-opacity, 1); transition: opacity .12s linear; backdrop-filter: blur(2px); }
.friend-view-statistics-dialog .creation-sheet-panel { height: 100%; border: 1px solid #E7D8AE; border-bottom: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -16px 48px rgba(0,0,0,.2); }
.friend-view-statistics-dialog .creation-sheet-grabber { height: 34px; padding-top: 0; }
.friend-view-statistics-sheet { display: block; width: min(720px, 100%); height: calc(100% - 34px); padding: 0 0 max(12px, env(safe-area-inset-bottom)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; }
.friend-view-statistics-sheet header { position: sticky; top: 0; z-index: 2; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid #EFE6CF; background: #FFFDF8; }
.friend-view-statistics-sheet header button { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #FFF6D4; color: #4D421F; }
.friend-view-statistics-sheet h2 { margin: 0; font-size: 20px; }
.friend-view-statistics-sheet p { margin: 3px 0 0; color: #817967; font-size: 13px; }
.friend-view-statistics-list { min-height: 120px; padding: 8px 12px 18px; }
.friend-view-statistics-row { display: flex; gap: 11px; align-items: center; padding: 10px 6px; border-bottom: 1px solid #F1EBDD; color: inherit; text-decoration: none; }
.friend-view-statistics-row > span { display: grid; gap: 3px; min-width: 0; }
.friend-view-statistics-row small { overflow: hidden; color: #817967; text-overflow: ellipsis; white-space: nowrap; }
.friend-view-statistics-empty { padding: 30px 12px; text-align: center; }
body.dark-mode .friend-view-statistics-dialog { color: #FFF; }
body.dark-mode .friend-view-statistics-dialog .creation-sheet-panel { border-color: #66562E; background: #292929; }
body.dark-mode .friend-view-statistics-sheet header { background: #292929; }
body.dark-mode .friend-view-statistics-sheet header, body.dark-mode .friend-view-statistics-row { border-color: #454138; }
body.dark-mode .friend-view-statistics-sheet header button { background: #403A27; color: #F4D96A; }
body.dark-mode .friend-view-statistics-sheet p, body.dark-mode .friend-view-statistics-row small { color: #BDB7AA; }
body.dark-mode .post-read-more { color: #F0D978; }
body.dark-mode .feed-discovery-strip { border-color: #554B31; background: #302D24; }
body.dark-mode .feed-discovery-heading { color: #F0D978; }
body.dark-mode .feed-discovery-item { border-color: #4B4638; background: #292929; }
body.dark-mode .feed-discovery-item small { color: #F0D978; }
body.dark-mode .feed-skeleton-card { border-color: #4B4638; background: #2B2B2B; }
body.dark-mode .feed-skeleton-card span, body.dark-mode .feed-skeleton-card i, body.dark-mode .feed-skeleton-card b, body.dark-mode .feed-skeleton-card em { background-image: linear-gradient(100deg,#303030 20%,#3B3B3B 38%,#303030 56%); }
@media (max-width: 600px) {
    #posts-container > .post-card {
        margin-bottom: 14px;
        padding: 13px 12px;
        border-radius: 15px;
        box-shadow: 0 5px 16px rgba(78, 59, 13, .10), 0 1px 3px rgba(78, 59, 13, .07);
    }
    body.dark-mode #posts-container > .post-card { box-shadow: 0 6px 18px rgba(0, 0, 0, .30); }
    #posts-container > .post-card .post-feed-image-wrap { width: calc(100% + 16px); aspect-ratio: 4 / 3; margin-right: -8px; margin-left: -8px; border-radius: 13px; }
    #posts-container > .post-card .post-title { font-size: 20px; }
    .feed-discovery-strip { margin-bottom: 14px; padding: 12px; }
    .feed-discovery-items { display: flex; overflow-x: auto; padding-bottom: 2px; scroll-snap-type: x proximity; scrollbar-width: none; }
    .feed-discovery-items::-webkit-scrollbar { display: none; }
    .feed-discovery-item { min-width: min(72vw, 230px); scroll-snap-align: start; }
    .feed-skeleton-card { padding: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
    .feed-skeleton > div { animation: none; }
}

/* Rich text is intentionally enabled for post tags/mentions and chat links. */
.bucka-text-tag, .bucka-text-link { position: relative; z-index: 1; color: #9A6800; font-weight: 750; text-decoration: none; }
.bucka-text-tag:hover, .bucka-text-link:hover { text-decoration: underline; }
.message-bubble .bucka-text-tag, .message-bubble .bucka-text-link { color: #126B8A; }
body.dark-mode .bucka-text-tag, body.dark-mode .bucka-text-link { color: #F0D978; }
body.dark-mode .message-bubble .bucka-text-tag, body.dark-mode .message-bubble .bucka-text-link { color: #8ED7F0; }

/* Custom create-post destination picker; avoids the platform-native select. */
.posting-destination-control { overflow: visible; }
.post-destination-picker { position: relative; min-width: 0; }
#post-destination-trigger { display: flex; width: 100%; min-height: 62px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid #D3B44D; border-radius: 13px; background: #FFFDF8; color: #4F420F; box-shadow: 0 3px 10px rgba(84,62,0,.09); cursor: pointer; font: inherit; text-align: left; }
#post-destination-trigger > .post-destination-copy { flex: 1; }
#post-destination-trigger .post-destination-copy { display: grid; min-width: 0; gap: 3px; }
#post-destination-trigger strong { overflow: hidden; font-size: 16px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
#post-destination-trigger small { color: #746A51; font-size: 11px; font-weight: 700; }
#post-destination-trigger.private-destination { border-color: #5EAB78; background: #EFFBF2; }
#post-destination-trigger > svg { width: 18px; height: 18px; flex: 0 0 18px; transition: transform .18s ease; }
#post-destination-trigger[aria-expanded="true"] > svg { transform: rotate(180deg); }
.post-destination-menu { position: absolute; z-index: 3101; top: calc(100% + 7px); right: 0; left: 0; width: 100%; max-height: min(45dvh, 320px); padding: 7px; overflow-x: hidden; overflow-y: auto; box-sizing: border-box; border: 1px solid #E4D5A9; border-radius: 14px; background: #FFF; box-shadow: 0 14px 35px rgba(51,40,10,.24); overscroll-behavior: contain; }
.post-destination-menu[hidden] { display: none; }
.post-destination-menu button { display: grid; width: 100%; grid-template-columns: 40px minmax(0,1fr) 18px; align-items: center; gap: 10px; min-height: 58px; padding: 9px 11px; border: 0; border-radius: 11px; background: transparent; color: #29251B; cursor: pointer; font: inherit; text-align: left; }
.post-destination-menu button:hover, .post-destination-menu button.selected { background: #FFF4CC; }
.post-destination-option-copy { display: grid; min-width: 0; gap: 2px; }
.post-destination-menu button strong { display: block; max-width: 100%; overflow-wrap: anywhere; font-size: 15px; line-height: 1.3; white-space: normal; }
.post-destination-menu button small { color: #8A8068; font-size: 10px; }
.post-destination-menu button > svg { visibility: hidden; width: 17px; height: 17px; color: #806100; }
.post-destination-menu button.selected > svg { visibility: visible; }
.post-destination-option-icon, .post-destination-icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; overflow: hidden; border: 1px solid #E6D59D; border-radius: 50%; background: #FFF4CC; color: #725C13; }
.post-destination-option-icon > img { width: 100%; height: 100%; object-fit: cover; }
.post-destination-option-icon > svg { width: 18px; height: 18px; }
body.dark-mode #post-destination-trigger { border-color: #5A5137; background: #373329; color: #F0D978; }
body.dark-mode #post-destination-trigger small { color: #C9C1AF; }
body.dark-mode #post-destination-trigger.private-destination { border-color: #4E8D62; background: #26372B; }
body.dark-mode .post-destination-menu { border-color: #4D4737; background: #292929; }
body.dark-mode .post-destination-menu button { color: #FFF; }
body.dark-mode .post-destination-menu button:hover, body.dark-mode .post-destination-menu button.selected { background: #464027; }
body.dark-mode .post-destination-option-icon { border-color: #605633; background: #403A29; color: #FFD54F; }
.create-post-page.post-destination-open > .profile-page,
.create-post-page.post-destination-open .create-post-card { overflow: visible; }
@media (max-width: 600px) {
    .post-destination-menu { position: fixed; z-index: 5000; top: var(--destination-menu-top, 150px); right: auto; left: var(--destination-menu-left, 10px); width: var(--destination-menu-width, calc(100vw - 20px)); max-height: var(--destination-menu-height, min(45dvh, 320px)); -webkit-overflow-scrolling: touch; touch-action: pan-y; pointer-events: auto; }
    .post-destination-menu button { min-height: 62px; touch-action: manipulation; }
}


.home-deska-recommendations { display: grid; gap: 10px; margin: 18px 0 22px; padding: 14px 0; border-block: 1px solid #E8D8A4; }
.home-deska-recommendations > header { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 0 3px; }
.home-deska-recommendations > header div { display: grid; gap: 2px; }
.home-deska-recommendations > header span { color: #9A7200; font-size: 10px; font-weight: 950; letter-spacing: .08em; }
.home-deska-recommendations > header h2 { margin: 0; color: #342C17; font-size: 17px; }
.home-deska-recommendations > header a { color: #806100; font-size: 11px; font-weight: 850; text-decoration: none; }
.home-deska-recommendation-row { display: flex; gap: 10px; padding: 2px 3px 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }
.home-deska-recommendation-card { display: grid; width: 150px; min-width: 150px; min-height: 180px; align-content: space-between; gap: 10px; padding: 12px; border: 1px solid #E4D5A7; border-radius: 16px; background: #FFFDF7; box-shadow: 0 5px 14px rgba(65,48,0,.08); scroll-snap-align: start; }
.home-deska-recommendation-card > a { display: grid; justify-items: center; gap: 7px; color: #322C1C; text-align: center; text-decoration: none; }
.home-deska-recommendation-icon { width: 62px; height: 62px; border: 2px solid #E0BD45; border-radius: 50%; object-fit: cover; }
.home-deska-recommendation-card strong { width: 100%; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.home-deska-recommendation-card small { min-height: 28px; color: #777064; font-size: 10px; line-height: 1.35; }
.home-deska-recommendation-card button { min-height: 34px; border: 0; border-radius: 10px; background: #FFD54F; color: #443707; cursor: pointer; font: inherit; font-size: 11px; font-weight: 900; }
.home-deska-recommendation-card button:disabled { opacity: .55; }
body.dark-mode .home-deska-recommendations { border-color: #4C4635; }
body.dark-mode .home-deska-recommendations > header h2, body.dark-mode .home-deska-recommendation-card > a { color: #F5EFDC; }
body.dark-mode .home-deska-recommendations > header span, body.dark-mode .home-deska-recommendations > header a { color: #F0D978; }
body.dark-mode .home-deska-recommendation-card { border-color: #504A38; background: #302F2B; box-shadow: 0 5px 14px rgba(0,0,0,.22); }
body.dark-mode .home-deska-recommendation-card small { color: #C6BFAE; }

/* Keep every profile information block centered consistently. */
.profile-card .profile-bio, .profile-card .profile-bio p,
.profile-card .profile-detail, .profile-card .profile-featured-friends-empty { text-align: center; }
.profile-card .profile-detail { justify-items: center; }
.profile-card .profile-featured-friends-heading { text-align: left; }

/* Forwarded messages retain their original content but are clearly labelled. */
.message-bubble { position: relative; }
.message-bubble.forwarded { padding-top: 25px; }
.message-forwarded-icon { position: absolute; top: 7px; right: 9px; display: grid; width: 18px; height: 18px; place-items: center; color: #746B57; opacity: .78; }
.message-forwarded-icon svg { width: 15px; height: 15px; }
body.dark-mode .message-forwarded-icon { color: #D4CDBE; }

/* On profile and chat pages, local actions sit beside the global friends shortcut. */
.profile-card.viewing-other-profile .profile-chat-action { position: fixed; z-index: 990; top: max(14px, env(safe-area-inset-top)); right: calc(max(14px, env(safe-area-inset-right)) + 58px); width: 46px; height: 46px; border: 1px solid #DFC45F; background: #FFF4CC; color: #5F4C08; box-shadow: 0 5px 16px rgba(65,48,0,.16); }
.profile-card.viewing-other-profile .profile-chat-action:hover { background: #FFD54F; }
body.dark-mode .profile-card.viewing-other-profile .profile-chat-action { border-color: #746126; background: #3E3825; color: #F2D76B; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
body:has(.messages-page) .new-chat-menu-wrap { margin-right: 56px; }
body:has(.messages-page) .new-chat-group { width: 46px; height: 46px; min-height: 46px; border: 1px solid #DFC45F; background: #FFF4CC; color: #5F4C08; box-shadow: 0 5px 16px rgba(65,48,0,.16); }
body:has(.messages-page) .new-chat-group:hover { background: #FFD54F; }
body.dark-mode:has(.messages-page) .new-chat-group { border-color: #746126; background: #3E3825; color: #F2D76B; }

/* Shared circular crop tool for profile, deska and chat-group identity images. */
.bucka-image-cropper { width: min(430px, calc(100% - 24px)); max-width: none; padding: 0; overflow: visible; border: 0; border-radius: 20px; background: transparent; }
.bucka-image-cropper::backdrop { background: rgba(10,10,10,.66); backdrop-filter: blur(2px); }
.bucka-image-cropper-panel { padding: 18px; border: 1px solid #E4D6AF; border-radius: 20px; background: #FFF; color: #29251B; box-shadow: 0 20px 55px rgba(0,0,0,.28); text-align: center; }
.bucka-image-cropper-panel h2 { margin: 0 0 5px; font-size: 21px; }
.bucka-image-cropper-panel > p { margin: 0 0 14px; color: #777; font-size: 13px; }
.bucka-image-cropper-stage { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 15px; background: #171717; cursor: move; touch-action: none; user-select: none; }
.bucka-image-cropper-stage canvas { display: block; width: 100%; height: 100%; }
.bucka-image-crop-selection { position: absolute; border: 3px solid #FFF; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.58), 0 0 0 1px rgba(0,0,0,.3) inset; pointer-events: none; }
.bucka-image-cropper-zoom { display: grid; grid-template-columns: 24px minmax(0,1fr) 24px; align-items: center; gap: 8px; margin-top: 12px; color: #77662C; font-size: 20px; font-weight: 850; }
.bucka-image-cropper-zoom input { width: 100%; accent-color: #D5A900; cursor: pointer; touch-action: pan-x; }
.bucka-image-cropper-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.bucka-image-cropper-actions button { min-height: 44px; border: 1px solid #E5DDC8; border-radius: 11px; background: #FFF; color: #666; cursor: pointer; font: inherit; font-weight: 750; }
.bucka-image-cropper-actions button.confirm { border-color: #1D934A; background: #22A559; color: #FFF; }
body.dark-mode .bucka-image-cropper-panel { border-color: #4B473B; background: #292929; color: #FFF; }
body.dark-mode .bucka-image-cropper-panel > p { color: #BBB; }
body.dark-mode .bucka-image-cropper-zoom { color: #F2D76B; }
body.dark-mode .bucka-image-cropper-actions button { border-color: #555; background: #383838; color: #DDD; }
body.dark-mode .bucka-image-cropper-actions button.confirm { border-color: #238F4A; background: #22A559; color: #FFF; }
@media (max-width: 600px) {
    .bucka-image-cropper { width: min(410px, calc(100% - 18px)); }
    .bucka-image-cropper-panel { padding: 14px; border-radius: 17px; }
}

/* Friend mention suggestions shared by post and message composers. */
.bucka-mention-suggestions { position: fixed; z-index: 4100; max-height: min(300px, 42dvh); padding: 6px; overflow-y: auto; border: 1px solid #E3D5AA; border-radius: 13px; background: #FFF; box-shadow: 0 14px 36px rgba(45,35,10,.22); }
.bucka-mention-suggestions button { display: flex; width: 100%; align-items: center; gap: 9px; min-height: 48px; padding: 7px 9px; border: 0; border-radius: 9px; background: transparent; color: #29251B; cursor: pointer; text-align: left; }
.bucka-mention-suggestions button:hover, .bucka-mention-suggestions button[aria-selected="true"] { background: #FFF4CC; }
.bucka-mention-avatar { width: 34px; height: 34px; flex: 0 0 34px; }
.bucka-mention-suggestions button > span { display: grid; min-width: 0; }
.bucka-mention-suggestions strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bucka-mention-suggestions small { color: #888; font-size: 10px; }
body.dark-mode .bucka-mention-suggestions { border-color: #514A36; background: #292929; }
body.dark-mode .bucka-mention-suggestions button { color: #FFF; }
body.dark-mode .bucka-mention-suggestions button:hover, body.dark-mode .bucka-mention-suggestions button[aria-selected="true"] { background: #464027; }

/* Final profile alignment guard for both profile displays and editing. */
.profile-card .profile-card-top { width: 100%; align-items: center !important; justify-content: center; text-align: center; }
.profile-card .profile-card-top .profile-pic, .profile-card .avatar-edit-wrapper { margin-right: auto; margin-left: auto; }
.profile-card .profile-identity { width: 100%; align-items: center; text-align: center; }
body:has(#edit-username) .profile-card-top { flex-direction: column; }
body:has(#edit-username) .profile-identity { max-width: 430px; }
body:has(#edit-username) #edit-username { text-align: center; }

/* Header shortcuts occupy one row immediately beside the global friends action. */
.profile-card.viewing-other-profile .profile-chat-action { right: max(122px, calc(108px + env(safe-area-inset-right))); }
body:has(.messages-page) .new-chat-menu-wrap { position: fixed; z-index: 990; top: max(14px, env(safe-area-inset-top)); right: max(122px, calc(108px + env(safe-area-inset-right))); margin: 0; }
body:has(.messages-page) .new-chat-menu { top: calc(100% + 8px); }

/* Group information opens directly from the group name or icon. */
.chat-group-info-identity { display: grid; justify-items: center; gap: 10px; text-align: center; }
.chat-group-info-identity [data-rename-group] { width: 100%; }
.chat-group-info-identity.readonly { grid-template-columns: auto minmax(0,1fr); justify-items: start; align-items: center; padding: 14px; border: 1px solid #E8DEC5; border-radius: 14px; background: #FFF; text-align: left; }
.chat-group-info-identity.readonly h2 { margin: 0; font-size: 20px; }
.chat-group-info-identity.readonly span { color: #777; font-size: 12px; }
.chat-group-info-icon { width: 72px; height: 72px; flex: 0 0 72px; }
#chat-group-info-content { overflow-y: auto !important; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
#chat-group-info-content .chat-member-list { max-height: min(52dvh, 520px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
body.dark-mode .chat-group-info-identity.readonly { border-color: #494949; background: #2F2F2F; }
body.dark-mode .chat-group-info-identity.readonly span { color: #BBB; }

/* Success feedback never blocks the next action or opens a full backdrop. */
.action-confirmation-dialog {
    inset: auto 16px calc(var(--mobile-nav-height, 66px) + 16px) 16px;
    width: min(390px, calc(100% - 32px));
    margin: 0 auto;
    border-radius: 14px;
    pointer-events: none;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .22);
    animation: bucka-toast-in .16s ease-out;
    z-index: 2300;
}
.action-confirmation-content {
    min-height: 0;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 14px;
}
.action-confirmation-content svg { width: 25px; height: 25px; flex: 0 0 25px; }
.action-confirmation-content strong { font-size: 15px; line-height: 1.35; text-align: left; }
@keyframes bucka-toast-in { from { opacity: 0; transform: translateY(12px); } }

/* Keep friend recommendations stable on narrow Android and iOS screens. */
@media (max-width: 600px) {
    .home-friend-recommendations,
    .search-discovery-section.home-friend-recommendations { width: 100%; min-width: 0; padding: 14px 12px; }
    .home-friend-recommendations h2 { margin: 0 0 12px; font-size: 18px; line-height: 1.25; }
    .home-recommendation-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; width: 100%; min-width: 0; }
    .home-recommendation-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 9px 10px; }
    .home-recommendation-person { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; overflow: hidden; }
    .home-recommendation-avatar { width: 38px; height: 38px; min-width: 38px; }
    .home-recommendation-person strong { display: block; min-width: 0; overflow: hidden; font-size: 14px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
    .home-recommendation-add { display: inline-flex; width: auto; min-width: 78px; min-height: 38px; padding: 7px 10px; flex-shrink: 0; gap: 5px; white-space: nowrap; }
    .home-recommendation-add span { display: inline; }
}

.conversation-report { width: 40px; height: 40px; margin-left: auto; flex: 0 0 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #8A6B00; cursor: pointer; }
.conversation-report svg { width: 20px; height: 20px; }
.conversation-report:hover { background: #FFF4CC; color: #A5221B; }
body.dark-mode .conversation-report { color: #E8CA65; }
body.dark-mode .conversation-report:hover { background: #45402F; color: #FF8A82; }
.admin-chat-review { display: grid; gap: 8px; max-height: min(52dvh, 620px); margin: 14px 0; padding: 10px; overflow-y: auto; border: 1px solid #E4D9BC; border-radius: 12px; background: #FAF8F1; }
.admin-chat-message { padding: 9px 10px; border-radius: 10px; background: #FFF; }
.admin-chat-message > div { display: flex; justify-content: space-between; gap: 10px; }
.admin-chat-message time { color: #777; font-size: 11px; }
.admin-chat-message p { margin: 5px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-chat-message.system { color: #777; background: transparent; text-align: center; }
body.dark-mode .admin-chat-review { border-color: #494949; background: #252525; }
body.dark-mode .admin-chat-message { background: #333; }

/* Final application-shell guards. Keep navigation attached to the viewport
   even when a page introduces its own scrolling or transformed containers. */
@media (max-width: 600px) {
    html { min-height: 100%; }
    body.has-bottom-nav { min-height: 100dvh; }
    body.has-bottom-nav > .bottom-nav {
        position: fixed !important;
        inset: auto 0 0 0 !important;
        width: 100%;
        max-width: none;
        margin: 0;
        transform: none !important;
        isolation: isolate;
    }
}

/* Page rules may rearrange the shortcuts on phones, but desktop always keeps
   the shared three-button group visible in the upper-right corner. */
@media (min-width: 1025px) {
    body > .global-leaderboard-shortcut,
    body > .global-notification-shortcut,
    body > .global-friends-shortcut,
    .profile-shortcut-dock {
        visibility: visible !important;
        opacity: 1 !important;
    }
    body > .global-leaderboard-shortcut,
    body > .global-notification-shortcut,
    body > .global-friends-shortcut { display: grid !important; }
    .profile-shortcut-dock { display: flex !important; }
}

/* The mobile home header owns its space so shortcuts never cover friend profiles. */
.home-header-actions { display: none; }
@media (max-width: 1024px) {
    .home-discovery-header { position: sticky; z-index: 980; top: 0; margin: 0 -2px 8px; padding: calc(6px + env(safe-area-inset-top)) 2px 8px; background: linear-gradient(#F2EEDF 82%, rgba(242,238,223,0)); }
    .home-discovery-header .home-search { position: static; top: auto; margin: 0 0 8px; }
    .home-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-height: 48px; padding: 0 4px; }
    .home-header-action { box-shadow: 0 4px 13px rgba(65,48,0,.14); }
    .home-deske-action { width: 32px; min-width: 32px; height: 76px; min-height: 76px; border-radius: 14px; }
    .home-header-action svg { width: 22px; height: 22px; }
    .home-header-action:active, .home-header-action.active { background: #FFD54F; transform: scale(.97); }
    body:has(.home-discovery-header) > .global-friends-shortcut,
    body:has(.home-discovery-header) > .global-leaderboard-shortcut,
    body:has(.home-discovery-header) > .global-notification-shortcut,
    body.groups-drawer-open .home-discovery-header,
    body.groups-drawer-open .home-search,
    body.groups-drawer-open .home-header-actions,
    body.groups-drawer-open > .global-friends-shortcut, body.groups-drawer-open > .global-leaderboard-shortcut, body.groups-drawer-open > .global-notification-shortcut, body.groups-drawer-open > .global-settings-shortcut { display: none !important; }
    body.dark-mode .home-discovery-header { background: linear-gradient(#1F1F1F 82%, rgba(31,31,31,0)); }
    body.dark-mode .home-header-action { border-color: #746126; background: #3E3825; color: #F2D76B; box-shadow: 0 5px 15px rgba(0,0,0,.28); }
    body.dark-mode .home-header-action.active { background: #514826; }
}
@media (max-width: 600px) {
    .home-feed:has(.home-discovery-header) { margin-top: 0; padding-top: 0; }
    .home-friend-row { position: relative; z-index: 1; margin-top: 0; }
}
/* =========================
   TRENUTKI
========================= */
.moments-section { min-width: 0; margin: 14px 0 22px; }
.moments-section[hidden] { display: none; }
.moments-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 3px 9px; }
.moments-heading h2, .moments-heading h3 { margin: 0; color: #322B17; font-size: 17px; }
.moments-heading span { color: #817A68; font-size: 12px; font-weight: 700; }
.moments-row { display: flex; gap: 11px; width: 100%; padding: 2px 3px 10px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #D7C375 transparent; }
.moment-card, .moment-add-card { width: 190px; min-width: 190px; scroll-snap-align: start; border: 1px solid #E5D69D; border-radius: 16px; background: #FFFCF3; box-shadow: 0 5px 14px rgba(56,45,9,.08); color: #302A19; overflow: hidden; }
.moment-card { position: relative; }
.moment-picture { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #EEE8D9; }
.moment-picture::after { position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); content: ""; pointer-events: none; }
.moment-image { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; opacity: 0; transition: opacity .2s ease; }
.moment-card.image-ready .moment-image { opacity: 1; }
.moment-image-loader { position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px; border: 3px solid rgba(111,91,25,.18); border-top-color: #D99A00; border-radius: 50%; animation: moment-loading .75s linear infinite; }
.moment-card.image-ready .moment-image-loader, .moment-card.image-failed .moment-image-loader { display: none; }
@keyframes moment-loading { to { transform: rotate(360deg); } }
.bucka-publishing-overlay { position: fixed; z-index: 5000; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; background: rgba(22,20,14,.48); color: #FFF; backdrop-filter: blur(3px); }
.bucka-publishing-overlay strong { padding: 9px 14px; border-radius: 999px; background: rgba(22,20,14,.72); font-size: 14px; }
.bucka-publishing-spinner { display: block; width: 72px; height: 72px; border: 7px solid rgba(255,255,255,.32); border-top-color: #FFD54F; border-radius: 50%; box-shadow: 0 8px 30px rgba(0,0,0,.25); animation: bucka-publishing-spin .75s linear infinite; }
@keyframes bucka-publishing-spin { to { transform: rotate(360deg); } }
.moment-picture > button { position: absolute; z-index: 2; top: 8px; display: grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; background: rgba(25,23,17,.58); color: white; backdrop-filter: blur(5px); }
.moment-picture > [data-moment-favorite] { top: 50px; right: 8px; }
.moment-picture > [data-moment-favorite].active { background: #FFD54F; color: #493B08; }
.moment-picture > [data-moment-favorite].active svg { fill: currentColor; }
.moment-picture > [data-moment-statistics] { top: 91px; right: 8px; }
.moment-picture > [data-moment-more] { right: 8px; }
.moment-picture > button svg { width: 18px; height: 18px; }
.moment-card > header { display: flex; align-items: center; gap: 7px; padding: 9px 10px 4px; }
.moment-avatar { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; overflow: hidden; border: 1px solid #D8C36F; border-radius: 50%; color: white; font-weight: 800; }
.moment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.moment-card > header span { display: grid; min-width: 0; }
.moment-card > header strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.moment-card > header small { color: #837A64; font-size: 10px; }
.moment-card > p { display: -webkit-box; margin: 3px 10px 7px; overflow: hidden; color: #514B3C; font-size: 12px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.moment-reaction-summary { display: flex; min-height: 19px; gap: 3px; padding: 0 10px 4px; }
.moment-reaction-summary span { display: inline-flex; align-items: center; gap: 1px; font-size: 11px; }
.moment-reaction-summary small { color: #756F60; font-size: 9px; }
.moment-card > footer { display: flex; align-items: center; justify-content: space-around; min-height: 39px; border-top: 1px solid #EEE5C9; }
.moment-card > footer button { display: inline-flex; min-width: 42px; min-height: 34px; align-items: center; justify-content: center; gap: 3px; padding: 4px 8px; border: 0; border-radius: 9px; background: transparent; color: #554E3C; }
.moment-card > footer button:hover, .moment-card > footer button.active { background: #FFF1B5; color: #6A5100; }
.moment-card > footer svg { width: 18px; height: 18px; }
.moment-reaction-picker { position: absolute; z-index: 4; right: 7px; bottom: 38px; left: 7px; display: flex; align-items: center; justify-content: space-around; padding: 5px; border: 1px solid #E0D098; border-radius: 999px; background: rgba(255,252,243,.96); box-shadow: 0 5px 18px rgba(42,34,8,.2); backdrop-filter: blur(7px); }
.moment-reaction-picker[hidden] { display: none; }
.moment-reaction-picker button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 18px; transition: transform .12s ease, background .12s ease; }
.moment-reaction-picker button:hover { background: #FFF1B5; transform: scale(1.16); }
.moment-add-card { display: grid; min-height: 300px; place-content: center; justify-items: center; gap: 6px; padding: 15px; border-style: dashed; cursor: pointer; }
.moment-add-card > span { display: grid; width: 50px; height: 50px; place-items: center; border-radius: 50%; background: #FFD54F; color: #493B08; }
.moment-add-card svg { width: 24px; height: 24px; }
.moment-add-card strong { font-size: 13px; }
.moment-add-card small, .moment-empty { color: #817A68; font-size: 11px; }
.profile-card .moments-section { margin-top: 18px; text-align: left; }
body:has(.moment-composer[open]) { overflow: hidden; }
.moment-composer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: 0; background: #090909; color: white; }
.moment-composer::backdrop { background: #090909; }
.moment-composer form, .moment-editor-stage { width: 100%; height: 100%; }
.moment-editor-stage { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at center, #292929, #090909 72%); touch-action: none; }
.moment-editor-image { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.moment-editor-empty { display: grid; width: min(420px, calc(100% - 48px)); justify-items: center; gap: 12px; text-align: center; }
.moment-editor-empty > span { display: grid; width: 76px; height: 76px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(255,255,255,.1); }
.moment-editor-empty > span svg { width: 34px; height: 34px; }
.moment-editor-empty > strong { font-size: 21px; }
.moment-editor-empty > div { display: flex; gap: 12px; margin-top: 5px; }
.moment-editor-empty label, .moment-editor-publish { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 10px 15px; border: 1px solid rgba(255,255,255,.34); border-radius: 14px; background: rgba(32,32,32,.8); color: white; font: inherit; font-weight: 800; backdrop-filter: blur(10px); cursor: pointer; }
.moment-editor-empty label:hover { background: rgba(255,255,255,.17); }
.moment-editor-empty label svg { width: 21px; height: 21px; }
.moment-editor-control { position: absolute; z-index: 5; display: grid; min-width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.42); border-radius: 50%; background: rgba(23,23,23,.68); color: white; box-shadow: 0 3px 14px rgba(0,0,0,.25); backdrop-filter: blur(10px); cursor: pointer; }
.moment-editor-control svg { width: 21px; height: 21px; }
.moment-editor-close { top: max(20px, calc(env(safe-area-inset-top) + 6px)); left: max(20px, calc(env(safe-area-inset-left) + 6px)); }
.moment-editor-change { top: max(20px, calc(env(safe-area-inset-top) + 6px)); right: max(20px, calc(env(safe-area-inset-right) + 6px)); }
.moment-editor-bottom { position: absolute; z-index: 5; right: max(20px, calc(env(safe-area-inset-right) + 6px)); bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px)); left: max(20px, calc(env(safe-area-inset-left) + 6px)); display: flex; align-items: flex-end; justify-content: space-between; pointer-events: none; }
.moment-editor-bottom > * { pointer-events: auto; }
.moment-editor-add-caption { position: relative; display: inline-flex; width: auto; padding: 0 13px; gap: 7px; border-radius: 14px; }
.moment-editor-add-caption span { font-size: 12px; font-weight: 800; }
.moment-editor-publish { min-width: 104px; border-color: #E1BE38; background: #FFD54F; color: #342B08; }
.moment-editor-publish svg { width: 18px; height: 18px; }
.moment-editor-publish:disabled { opacity: .55; cursor: wait; }
.moment-editor-caption { position: absolute; z-index: 4; left: 50%; top: 72%; max-width: min(84%, 620px); padding: 7px 11px; outline: 0; border-radius: 9px; background: rgba(0,0,0,.28); color: white; font-size: clamp(18px, 4vw, 30px); font-weight: 800; line-height: 1.22; text-align: center; text-shadow: 0 2px 6px rgba(0,0,0,.9); overflow-wrap: anywhere; transform: translate(-50%, -50%); cursor: grab; touch-action: none; }
.moment-editor-caption:focus { background: rgba(0,0,0,.5); cursor: text; }
.moment-editor-caption:empty::before { color: rgba(255,255,255,.72); content: attr(data-placeholder); }
.moment-editor-error { position: absolute; z-index: 6; right: 16px; bottom: max(78px, calc(env(safe-area-inset-bottom) + 70px)); left: 16px; margin: auto; width: fit-content; max-width: calc(100% - 32px); padding: 8px 12px; border-radius: 10px; background: rgba(128,18,18,.88); color: white; text-align: center; }
.moment-editor-image[hidden], .moment-editor-empty[hidden], .moment-editor-caption[hidden], .moment-editor-change[hidden], .moment-editor-bottom[hidden], .moment-editor-error[hidden] { display: none !important; }
body.dark-mode .moments-heading h2, body.dark-mode .moments-heading h3 { color: #F4ECD5; }
body.dark-mode .moment-card, body.dark-mode .moment-add-card { border-color: #62582F; background: #302E28; color: #F6F0DE; box-shadow: 0 5px 15px rgba(0,0,0,.25); }
body.dark-mode .moment-picture { background: #222; }
body.dark-mode .moment-card > p, body.dark-mode .moment-card > footer button { color: #D8D1BE; }
body.dark-mode .moment-card > header small, body.dark-mode .moment-reaction-summary small, body.dark-mode .moment-add-card small { color: #AAA28E; }
body.dark-mode .moment-card > footer { border-top-color: #4A4639; }
body.dark-mode .moment-card > footer button:hover, body.dark-mode .moment-card > footer button.active { background: #4A4223; color: #F2D76B; }
body.dark-mode .moment-reaction-picker { border-color: #62582F; background: rgba(48,46,40,.97); }
body.dark-mode .moment-composer { background: #090909; color: white; }
body:has(.moment-viewer[open]) { overflow: hidden; }
.moment-viewer { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: #17150F; color: white; }
.moment-viewer::backdrop { background: #17150F; }
.moment-viewer-stage { position: relative; width: min(100%, 760px); height: 100%; margin: auto; overflow: hidden; background: #0B0B0B; }
.moment-viewer-stage > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.moment-viewer-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.48), transparent 24%, transparent 55%, rgba(0,0,0,.68)); pointer-events: none; }
.moment-viewer-control, .moment-viewer-actions button { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid rgba(255,232,151,.58); border-radius: 50%; background: rgba(46,40,20,.72); color: white; box-shadow: 0 4px 15px rgba(0,0,0,.28); backdrop-filter: blur(10px); cursor: pointer; }
.moment-viewer-control svg, .moment-viewer-actions svg { width: 21px; height: 21px; }
.moment-viewer-close { position: absolute; z-index: 5; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); }
.moment-viewer-more { position: absolute; z-index: 5; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right)); }
.moment-viewer-author { position: absolute; z-index: 4; top: max(16px, env(safe-area-inset-top)); left: max(70px, calc(env(safe-area-inset-left) + 68px)); display: flex; max-width: calc(100% - 140px); align-items: center; gap: 8px; color: white; text-decoration: none; text-shadow: 0 1px 5px rgba(0,0,0,.85); }
.moment-viewer-author > span { display: grid; min-width: 0; gap: 2px; }
.moment-viewer-author strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moment-viewer-author time { color: rgba(255,255,255,.82); font-size: 11px; }
.moment-viewer-avatar { width: 38px; height: 38px; flex: 0 0 38px; border: 2px solid #F1D66A; border-radius: 50%; }
.moment-viewer-caption { position: absolute; z-index: 3; left: 50%; top: 72%; width: max-content; max-width: 84%; margin: 0; padding: 7px 11px; border-radius: 9px; background: rgba(0,0,0,.25); color: white; font-size: clamp(18px,4vw,30px); font-weight: 800; line-height: 1.22; text-align: center; text-shadow: 0 2px 6px rgba(0,0,0,.9); overflow-wrap: anywhere; transform: translate(-50%,-50%); }
.moment-viewer-actions { position: absolute; z-index: 5; bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px)); left: max(14px, env(safe-area-inset-left)); display: flex; gap: 8px; }
.moment-viewer-actions button { display: inline-flex; width: auto; min-width: 44px; padding: 0 11px; gap: 4px; }
.moment-viewer-actions button.active { border-color: #FFD54F; background: #FFD54F; color: #3F3307; }
.moment-viewer-actions .moment-bucka-control { border-color: #FFD54F; background: #FFD54F; color: #3F3307; }
.moment-viewer-actions .moment-bucka-control.active { border-color: #F3A6B7; background: #F3A6B7; color: #44252C; }
.moment-viewer-actions button > span { font-size: 12px; font-weight: 850; }
.moment-viewer-reactions { position: absolute; z-index: 5; bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px)); left: max(14px, env(safe-area-inset-left)); display: flex; gap: 4px; padding: 6px 9px; border: 1px solid rgba(255,232,151,.44); border-radius: 999px; background: rgba(46,40,20,.68); backdrop-filter: blur(10px); }
.moment-viewer-reactions[hidden] { display: none; }
.moment-viewer-reactions span { display: inline-flex; align-items: center; gap: 2px; }
.moment-viewer-reactions small { color: white; font-size: 10px; font-weight: 800; }
.moment-viewer-reaction-picker { position: absolute; z-index: 6; bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px)); left: max(14px, env(safe-area-inset-left)); display: flex; gap: 4px; padding: 6px; border: 1px solid #DCC35F; border-radius: 999px; background: #FFF8D8; box-shadow: 0 8px 25px rgba(0,0,0,.32); }
.moment-viewer-reaction-picker[hidden] { display: none; }
.moment-viewer-reaction-picker button { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 20px; cursor: pointer; }
.moment-viewer-reaction-picker button:hover { background: #FFE889; transform: scale(1.1); }
.admin-reported-moment { display: block; width: min(100%, 360px); max-height: 50vh; margin: 12px auto; border-radius: 14px; object-fit: contain; background: #222; }
@media (max-width: 720px) {
    .home-moments-section { margin-right: -10px; margin-left: -10px; }
    .home-moments-section .moments-heading { padding: 0 13px; }
    .moments-row { padding-right: 12px; padding-left: 12px; }
    .moment-card, .moment-add-card { width: 164px; min-width: 164px; }
    .moment-add-card { min-height: 270px; }
}

/* Trenutki are image-first cards: every control floats over the photograph. */
.moment-card { aspect-ratio: 2 / 3; background: #24221c; }
.moment-card .moment-picture { width: 100%; height: 100%; aspect-ratio: auto; }
.moment-card .moment-picture::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, transparent 28%, transparent 53%, rgba(0,0,0,.66) 100%); content: ""; pointer-events: none; }
.moment-overlay-control { position: absolute; z-index: 3; display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; gap: 2px; box-sizing: border-box; padding: 0; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; background: rgba(25,23,17,.58); box-shadow: 0 2px 9px rgba(0,0,0,.22); color: #fff; text-decoration: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.moment-overlay-control:hover, .moment-overlay-control.active { background: rgba(255,213,79,.94); color: #493b08; }
.moment-overlay-control svg { width: 18px; height: 18px; }
.moment-author { top: 9px; left: 9px; overflow: hidden; }
.moment-author-copy { position: absolute; z-index: 3; top: 9px; left: 53px; display: grid; max-width: calc(100% - 108px); color: #fff; line-height: 1.15; text-decoration: none; text-shadow: 0 1px 5px rgba(0,0,0,.9); }
.moment-author-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.moment-author-copy time { margin-top: 3px; color: rgba(255,255,255,.86); font-size: 10px; }
.moment-author:hover { background: rgba(25,23,17,.72); }
.moment-author .moment-avatar { width: 100%; height: 100%; flex-basis: 100%; border: 0; }
.moment-author .moment-avatar.bucka-user-avatar-fallback { border: 2px solid rgba(255,255,255,.82); }
.moment-author img.moment-avatar { object-fit: cover; }
.moment-picture > .moment-more { top: 9px; right: 9px; }
.moment-caption { position: absolute; z-index: 2; left: var(--caption-x, 50%); top: var(--caption-y, 72%); display: -webkit-box; width: max-content; max-width: calc(100% - 20px); margin: 0; padding: 3px 6px; overflow: hidden; border-radius: 5px; background: rgba(0,0,0,.18); color: #fff; font-size: 12px; font-weight: 750; line-height: 1.35; text-align: center; text-shadow: 0 1px 4px rgba(0,0,0,.8); transform: translate(-50%, -50%); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.moment-actions { position: absolute; z-index: 3; bottom: 9px; left: 9px; display: flex; gap: 7px; }
.moment-actions .moment-overlay-control { position: relative; inset: auto; }
.moment-actions .moment-overlay-control span { font-size: 11px; font-weight: 800; }
.moment-actions .moment-bucka-control { border-color: #FFD54F; background: #FFD54F; color: #3F3307; }
.moment-actions .moment-bucka-control.active { border-color: #F3A6B7; background: #F3A6B7; color: #44252C; }
.moment-reaction-summary { position: absolute; z-index: 2; right: 9px; bottom: 17px; padding: 3px 6px; border-radius: 999px; background: rgba(25,23,17,.48); color: #fff; backdrop-filter: blur(5px); }
.moment-reaction-summary:empty { display: none; }
.moment-reaction-summary small { color: #fff; }
.moment-card .moment-reaction-picker { z-index: 5; bottom: 53px; }
body.dark-mode .moment-overlay-control { border-color: rgba(255,255,255,.55); background: rgba(12,12,12,.62); color: #fff; }
body.dark-mode .moment-overlay-control:hover, body.dark-mode .moment-overlay-control.active { background: #ffd54f; color: #493b08; }
body.dark-mode .moment-actions .moment-bucka-control,
body.dark-mode .moment-viewer-actions .moment-bucka-control { border-color: #FFD54F; background: #FFD54F; color: #3F3307; }
body.dark-mode .moment-actions .moment-bucka-control.active,
body.dark-mode .moment-viewer-actions .moment-bucka-control.active { border-color: #F3A6B7; background: #F3A6B7; color: #44252C; }

/* Daily Grmada shares the first Trenutki slot with the composer. */
.moment-starter-stack { display:grid; width:190px; min-width:190px; aspect-ratio:2/3; grid-template-rows:1fr 1fr; gap:8px; scroll-snap-align:start; }
.moment-starter-stack .moment-add-card.compact, .grmada-card { width:100%; min-width:0; min-height:0; border-radius:14px; }
.moment-starter-stack .moment-add-card.compact { gap:3px; padding:8px; }
.moment-starter-stack .moment-add-card.compact > span { width:38px; height:38px; }
.moment-starter-stack .moment-add-card.compact svg { width:19px; height:19px; }
.moment-starter-stack .moment-add-card.compact small { display:none; }
.grmada-card { position:relative; display:grid; overflow:hidden; place-items:center; padding:0; border:1px solid #d7bd55; background:linear-gradient(145deg,#4b3c0b,#d99a00); color:white; box-shadow:0 5px 14px rgba(56,45,9,.14); cursor:pointer; }
.grmada-card:disabled { cursor:default; opacity:.72; }
.grmada-card > img, .grmada-card-shade { position:absolute; inset:0; width:100%; height:100%; }
.grmada-card > img { object-fit:cover; }
.grmada-card-shade { background:linear-gradient(135deg,rgba(31,24,5,.25),rgba(31,24,5,.72)); }
.grmada-card-copy { position:relative; z-index:1; display:grid; justify-items:center; gap:2px; padding:7px; text-shadow:0 1px 5px rgba(0,0,0,.75); }
.grmada-card-copy svg { width:22px; height:22px; }
.grmada-card-copy strong { font-size:14px; }
.grmada-card-copy small { color:rgba(255,255,255,.88); font-size:9px; }
body.dark-mode .grmada-card { border-color:#8c7621; }
body:has(.grmada-viewer[open]) { overflow:hidden; }
.grmada-viewer { position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; overflow:hidden; border:0; background:#100f0b; color:white; }
.grmada-viewer::backdrop { background:#100f0b; }
.grmada-stage { position:relative; width:min(100%,760px); height:100%; margin:auto; overflow:hidden; background:#080808; cursor:pointer; user-select:none; }
.grmada-main-image { display:block; width:100%; height:100%; object-fit:contain; }
.grmada-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 28%,transparent 62%,rgba(0,0,0,.72)); pointer-events:none; }
.grmada-image-arrow { display:grid; width:44px; height:44px; place-items:center; padding:0; border:1px solid rgba(255,232,151,.58); border-radius:50%; background:rgba(35,31,18,.7); color:white; box-shadow:0 4px 15px rgba(0,0,0,.28); backdrop-filter:blur(10px); cursor:pointer; }
.grmada-image-arrow svg { width:21px; height:21px; }
.grmada-author { position:absolute; z-index:5; top:max(15px,env(safe-area-inset-top)); left:max(16px,env(safe-area-inset-left)); display:flex; max-width:calc(100% - 32px); align-items:center; gap:8px; color:white; text-decoration:none; text-shadow:0 1px 5px #000; }
.grmada-author > span { display:grid; gap:2px; }
.grmada-author time { color:rgba(255,255,255,.82); font-size:11px; }
.grmada-avatar { display:grid; width:38px; height:38px; flex:0 0 38px; place-items:center; overflow:hidden; border:2px solid #ffd54f; border-radius:50%; color:white; font-weight:800; object-fit:cover; }
.grmada-image-arrow { position:absolute; z-index:5; top:50%; transform:translateY(-50%); }
.grmada-image-arrow.previous { left:max(12px,env(safe-area-inset-left)); }
.grmada-image-arrow.next { right:max(12px,env(safe-area-inset-right)); }
.grmada-image-arrow[hidden], .grmada-image-counter[hidden] { display:none; }
.grmada-copy { position:absolute; z-index:4; right:18px; bottom:max(108px,calc(env(safe-area-inset-bottom) + 100px)); left:18px; display:grid; gap:4px; pointer-events:none; text-shadow:0 1px 6px #000; }
.grmada-copy strong { font-size:clamp(18px,4vw,27px); }
.grmada-copy span { color:rgba(255,255,255,.86); font-size:12px; font-weight:750; }
.grmada-image-counter { position:absolute; z-index:5; right:17px; bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px)); min-width:38px; text-align:right; font-size:11px; font-weight:850; }
.grmada-progress { position:absolute; z-index:5; right:max(68px,calc(env(safe-area-inset-right) + 60px)); bottom:max(25px,calc(env(safe-area-inset-bottom) + 17px)); left:max(80px,calc(env(safe-area-inset-left) + 72px)); display:flex; gap:4px; }
.grmada-progress i { height:3px; flex:1; border-radius:99px; background:rgba(255,255,255,.34); }
.grmada-progress i.viewed, .grmada-progress i.active { background:#ffd54f; }
.grmada-countdown { position:absolute; z-index:6; bottom:max(16px,calc(env(safe-area-inset-bottom) + 8px)); left:max(17px,env(safe-area-inset-left)); display:grid; width:46px; height:54px; place-items:center; border-radius:70% 30% 62% 38% / 72% 42% 58% 28%; background:linear-gradient(135deg,#fff08a 3%,#ffd54f 30%,#ff8a1f 67%,#ed4518); color:#3a2203; filter:drop-shadow(0 0 11px rgba(255,105,20,.76)); transform:rotate(45deg); animation:grmada-countdown-flame 1.15s ease-in-out infinite alternate; pointer-events:none; }
.grmada-countdown::before { position:absolute; inset:9px; border-radius:inherit; background:rgba(255,246,169,.58); content:""; }
.grmada-countdown strong { position:relative; z-index:1; font-size:18px; font-variant-numeric:tabular-nums; font-weight:950; transform:rotate(-45deg); }
@keyframes grmada-countdown-flame { from{border-radius:72% 28% 65% 35% / 76% 39% 61% 24%;transform:rotate(42deg) scale(.94)} to{border-radius:61% 39% 55% 45% / 66% 48% 52% 34%;transform:rotate(48deg) scale(1.06) translate(-2px,-3px)} }
@media (max-width:720px) { .moment-starter-stack { width:164px; min-width:164px; } }

/* Transparent, full-screen Grmada arrival reveal. */
body:has(.grmada-arrival[open]) { overflow:hidden; }
.grmada-arrival { position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; overflow:hidden; border:0; background:transparent; color:#fff; }
.grmada-arrival::backdrop { background:rgba(24,18,2,.28); backdrop-filter:blur(3px) saturate(1.08); -webkit-backdrop-filter:blur(3px) saturate(1.08); }
.grmada-arrival-stage { position:relative; display:grid; width:100%; height:100%; place-items:center; overflow:hidden; padding:max(72px,env(safe-area-inset-top)) 18px max(40px,env(safe-area-inset-bottom)); }
.grmada-arrival-stage::before { position:absolute; inset:0; background:radial-gradient(circle at 50% 44%,rgba(255,213,79,.27),transparent 34%),linear-gradient(180deg,rgba(43,31,0,.08),rgba(43,31,0,.3)); content:""; pointer-events:none; }
.grmada-arrival-stage::after { position:absolute; z-index:1; bottom:-150px; left:50%; width:min(620px,95vw); height:520px; background:radial-gradient(circle at 50% 70%,#fff7ad 0 8%,#ffd54f 20%,#ff8a1f 42%,rgba(239,68,20,.58) 60%,transparent 72%); filter:blur(7px) drop-shadow(0 -20px 45px rgba(255,122,20,.65)); clip-path:polygon(50% 0,63% 23%,70% 10%,78% 41%,94% 58%,82% 100%,18% 100%,6% 58%,25% 36%,30% 14%,41% 31%); content:""; pointer-events:none; transform:translateX(-50%); animation:grmada-screen-flame 2.4s ease-in-out infinite; }
.grmada-arrival-close { position:absolute; z-index:5; top:max(16px,env(safe-area-inset-top)); left:max(16px,env(safe-area-inset-left)); display:grid; width:44px; height:44px; place-items:center; padding:0; border:1px solid rgba(255,235,164,.72); border-radius:50%; background:rgba(55,43,7,.52); color:#fff; box-shadow:0 4px 18px rgba(0,0,0,.24); backdrop-filter:blur(10px); cursor:pointer; }
.grmada-arrival-close svg { width:21px; height:21px; }
.grmada-arrival-card { position:relative; z-index:3; display:grid; width:min(440px,calc(100vw - 36px)); min-height:430px; align-content:center; justify-items:center; gap:13px; padding:38px 28px; overflow:hidden; border:1px solid rgba(255,225,113,.7); border-radius:32px; background:linear-gradient(145deg,rgba(57,44,5,.72),rgba(20,17,8,.62)); box-shadow:0 22px 70px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.22); text-align:center; backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25); animation:grmada-card-arrive .55s cubic-bezier(.2,.8,.2,1) both; transition:opacity .18s ease,transform .18s ease; cursor:pointer; }
.grmada-arrival-card::before { position:absolute; width:260px; height:260px; border:1px solid rgba(255,213,79,.35); border-radius:50%; background:rgba(255,213,79,.08); content:""; animation:grmada-halo 2.8s ease-in-out infinite; pointer-events:none; }
.grmada-arrival-card > * { position:relative; z-index:1; }
.grmada-arrival-card.is-changing { opacity:0; transform:translateY(18px) scale(.97); }
.grmada-arrival-kicker { color:#ffe58c; font-size:11px; font-weight:900; letter-spacing:.15em; text-transform:uppercase; }
.grmada-flame-mark { display:grid; width:42px; height:52px; place-items:end center; filter:drop-shadow(0 0 13px rgba(255,126,25,.88)); }
.grmada-flame-mark::before, .grmada-flame-mark i { display:block; border-radius:68% 32% 62% 38% / 72% 42% 58% 28%; content:""; transform:rotate(45deg); }
.grmada-flame-mark::before { width:35px; height:35px; background:linear-gradient(135deg,#ff5a1f,#ffb11f 58%,#ffe76f); animation:grmada-flame-dance 1.2s ease-in-out infinite alternate; }
.grmada-flame-mark i { position:absolute; bottom:4px; width:17px; height:17px; background:#fff5a8; animation:grmada-flame-dance .85s ease-in-out -.3s infinite alternate-reverse; }
.grmada-arrival-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; width:100%; }
.grmada-arrival-score { position:relative; display:grid; aspect-ratio:1; min-width:0; place-content:center; padding:15%; border:2px solid rgba(255,230,132,.92); border-radius:50%; background:radial-gradient(circle at 48% 42%,#fff3a1 0 9%,#ffd54f 42%,#ffad26 69%,rgba(226,78,13,.82) 100%); color:#342004; box-shadow:0 0 0 5px rgba(255,126,20,.11),0 0 27px rgba(255,102,20,.48); animation:grmada-score-pulse 2s ease-in-out infinite; }
.grmada-arrival-score::before { position:absolute; z-index:-1; inset:-9px; border-radius:48% 52% 46% 54%; background:conic-gradient(from 12deg,transparent 0 8%,#ff6a1f 9% 14%,transparent 15% 27%,#ffc42e 28% 35%,transparent 36% 51%,#ff7a1f 52% 60%,transparent 61% 75%,#ffd84f 76% 83%,transparent 84%); filter:blur(2px) drop-shadow(0 0 8px rgba(255,96,20,.75)); content:""; animation:grmada-stat-flame 2.1s ease-in-out infinite; }
.grmada-arrival-score:nth-child(2) { animation-delay:-.35s; }
.grmada-arrival-score:nth-child(3) { animation-delay:-.7s; }
.grmada-arrival-score:nth-child(4) { animation-delay:-1.05s; }
.grmada-arrival-score.featured { border-color:#fff0a9; box-shadow:0 0 0 6px rgba(255,213,79,.1),0 0 34px rgba(255,213,79,.42); }
.grmada-arrival-score strong { display:block; max-width:100%; font-size:clamp(17px,calc(38px - (var(--stat-digits,1) * 2.6px)),31px); font-variant-numeric:tabular-nums; line-height:.9; white-space:nowrap; }
.grmada-arrival-score span { margin-top:6px; font-size:9px; font-weight:900; text-transform:uppercase; }
.grmada-arrival-icon { display:grid; width:116px; height:116px; place-items:center; border:2px solid rgba(255,226,118,.8); border-radius:28px; background:linear-gradient(145deg,#ffd54f,#d99a00); color:#392d08; box-shadow:0 0 45px rgba(255,213,79,.38); transform:rotate(-4deg); animation:grmada-icon-float 2.5s ease-in-out infinite; }
.grmada-arrival-icon svg { width:48px; height:48px; }
.grmada-arrival-card h2 { margin:2px 0 0; color:#fff8dd; font-size:clamp(25px,7vw,34px); line-height:1.05; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.grmada-arrival-card p { max-width:330px; margin:0; color:rgba(255,249,224,.86); font-size:14px; font-weight:650; line-height:1.5; }
.grmada-arrival-actions { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:8px; }
.grmada-arrival-primary, .grmada-arrival-secondary { display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:8px; padding:10px 17px; border-radius:15px; font:inherit; font-weight:900; cursor:pointer; }
.grmada-arrival-primary { border:1px solid #ffe58a; background:#ffd54f; color:#392d08; box-shadow:0 8px 24px rgba(217,154,0,.32); }
.grmada-arrival-secondary { border:1px solid rgba(255,239,180,.45); background:rgba(39,32,13,.48); color:#fff8df; backdrop-filter:blur(8px); }
.grmada-arrival-primary svg, .grmada-arrival-secondary svg { width:19px; height:19px; }
.grmada-arrival-tap { color:rgba(255,245,207,.68); font-size:11px; font-weight:800; letter-spacing:.04em; }
.grmada-particles { position:absolute; z-index:2; inset:0; overflow:hidden; pointer-events:none; }
.grmada-particles i { position:absolute; bottom:-30px; left:var(--particle-x); width:var(--particle-size); height:calc(var(--particle-size) * 1.35); border-radius:70% 30% 62% 38% / 72% 42% 58% 28%; background:linear-gradient(135deg,#fff08a,#ffb21f 48%,#f4511e); box-shadow:0 0 16px rgba(255,111,20,.9); opacity:0; animation:grmada-particle-rise var(--particle-duration) linear var(--particle-delay) infinite; transform:rotate(45deg); }
.grmada-particles i:nth-child(3n) { background:linear-gradient(135deg,#ffd54f,#ff6b1a 70%); }
@keyframes grmada-particle-rise { 0%{opacity:0;transform:translate3d(0,0,0) scale(.45)} 12%{opacity:.85} 80%{opacity:.55} 100%{opacity:0;transform:translate3d(var(--particle-drift),-110vh,0) scale(1.15)} }
@keyframes grmada-card-arrive { from{opacity:0;transform:translateY(28px) scale(.92)} to{opacity:1;transform:none} }
@keyframes grmada-halo { 0%,100%{transform:scale(.8);opacity:.45} 50%{transform:scale(1.18);opacity:.12} }
@keyframes grmada-score-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.045)} }
@keyframes grmada-stat-flame { 0%,100%{opacity:.72;transform:rotate(-4deg) scale(.96)} 50%{opacity:1;transform:rotate(5deg) scale(1.07)} }
@keyframes grmada-flame-dance { from{transform:rotate(41deg) skew(-4deg) scale(.94)} to{transform:rotate(49deg) skew(5deg) scale(1.08)} }
@keyframes grmada-screen-flame { 0%,100%{opacity:.62;transform:translateX(-50%) scaleX(.94) translateY(8px)} 50%{opacity:.9;transform:translateX(-50%) scaleX(1.06) translateY(-9px)} }
@keyframes grmada-icon-float { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-9px) rotate(3deg)} }
@media (max-width:480px) { .grmada-arrival-card{min-height:min(470px,72dvh);padding:28px 20px;border-radius:26px}.grmada-arrival-stats{grid-template-columns:repeat(2,minmax(0,102px));justify-content:center;gap:9px}.grmada-arrival-actions{width:100%}.grmada-arrival-actions button{flex:1} }
@media (prefers-reduced-motion:reduce) { .grmada-countdown,.grmada-particles i,.grmada-arrival-stage::after,.grmada-arrival-card,.grmada-arrival-card::before,.grmada-arrival-score,.grmada-arrival-score::before,.grmada-flame-mark::before,.grmada-flame-mark i,.grmada-arrival-icon{animation:none!important} }

.moment-visibility-toggle { position:absolute; z-index:6; top:max(15px,env(safe-area-inset-top)); left:50%; display:inline-flex; min-height:42px; align-items:center; justify-content:center; gap:7px; padding:8px 13px; border:1px solid rgba(255,255,255,.48); border-radius:999px; background:rgba(20,20,20,.68); color:#fff; box-shadow:0 4px 16px rgba(0,0,0,.25); font:inherit; font-size:12px; font-weight:850; backdrop-filter:blur(10px); transform:translateX(-50%); cursor:pointer; }
.moment-visibility-toggle.is-public { border-color:rgba(255,222,99,.85); background:rgba(93,69,0,.72); color:#ffe890; }
.moment-visibility-toggle svg { width:17px; height:17px; }
.public-moments-feed-section { margin:22px 0 26px; padding:15px 0 5px; border-block:1px solid rgba(210,181,71,.42); background:linear-gradient(90deg,transparent,rgba(255,224,112,.1),transparent); }
.public-moments-feed-section .moments-heading { padding:0 4px; }
.public-moments-feed-section .moments-heading h2 { display:flex; align-items:center; gap:7px; }
.public-moments-feed-section .moments-heading h2::before { width:8px; height:8px; border-radius:50%; background:#d99a00; box-shadow:0 0 0 5px rgba(217,154,0,.13); content:""; }
body.dark-mode .public-moments-feed-section { border-color:rgba(209,177,59,.3); background:linear-gradient(90deg,transparent,rgba(130,101,10,.13),transparent); }
@media (max-width:720px) { .public-moments-feed-section{margin-right:-10px;margin-left:-10px}.public-moments-feed-section .moments-heading{padding-right:13px;padding-left:13px} }

.grmada-stage.is-finished > :not(.grmada-finish) { opacity:0; pointer-events:none; }
.grmada-finish { position:absolute; z-index:6; inset:0; display:grid; align-content:center; justify-items:center; gap:14px; padding:28px; background:radial-gradient(circle at center,rgba(255,213,79,.2),transparent 38%),rgba(12,10,5,.82); text-align:center; backdrop-filter:blur(18px); }
.grmada-finish[hidden] { display:none; }
.grmada-finish > span { display:grid; width:112px; height:112px; place-items:center; border:2px solid #ffe584; border-radius:28px; background:linear-gradient(145deg,#ffd54f,#d99a00); color:#3c3008; box-shadow:0 0 45px rgba(255,213,79,.35); }
.grmada-finish > span svg { width:48px; height:48px; }
.grmada-finish h2 { margin:5px 0 0; color:#fff5cf; font-size:clamp(27px,7vw,39px); }
.grmada-finish p { margin:0; color:rgba(255,255,255,.8); }
.grmada-finish > div { display:flex; gap:10px; margin-top:10px; }
.grmada-finish button { display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:7px; padding:10px 17px; border:1px solid rgba(255,234,157,.55); border-radius:15px; background:rgba(45,38,17,.72); color:#fff; font:inherit; font-weight:850; cursor:pointer; }
.grmada-finish button.primary { border-color:#ffe382; background:#ffd54f; color:#3b2f07; }
.grmada-finish button svg { width:19px; height:19px; }
.admin-language-toggle { display:inline-grid; min-width:48px; min-height:42px; place-items:center; padding:8px 13px; border:1px solid #D3B64E; border-radius:12px; background:#FFF4CC; color:#624B00; font:inherit; font-weight:900; cursor:pointer; }
.admin-language-toggle:hover { background:#FFE88C; }
.admin-image-hero { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:15px; padding:22px; border:1px solid #E8D58E; border-radius:20px; background:linear-gradient(135deg,#FFF9E4,#FFF0B6); }
.admin-image-hero h2,.admin-image-hero p { margin:0; }
.admin-image-hero p { margin-top:5px; color:#665E4C; }
.admin-image-summary { display:flex; gap:9px; }
.admin-image-summary span { display:flex; min-width:105px; flex-direction:column; padding:12px; border:1px solid rgba(139,105,0,.18); border-radius:14px; background:rgba(255,255,255,.72); color:#655B43; font-size:12px; }
.admin-image-summary strong { color:#8A6500; font-size:25px; }
.admin-image-toolbar { display:flex; align-items:end; justify-content:space-between; gap:12px; margin:0 0 16px; padding:12px 15px; border:1px solid #E9E0C6; border-radius:14px; background:#FFFCF2; }
.admin-image-toolbar label { display:grid; gap:4px; color:#6E6654; font-size:12px; font-weight:800; }
.admin-image-toolbar select { min-height:40px; padding:8px 36px 8px 11px; border:1px solid #D8CDAF; border-radius:10px; background:#fff; color:#29251B; font:inherit; font-weight:700; }
.admin-image-toolbar small { color:#847B67; }
.admin-image-review-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:18px; }
.admin-image-review-card { overflow:hidden; border:1px solid var(--border-color,#ddd2b9); border-radius:20px; background:var(--card-bg,#fff); box-shadow:0 7px 22px rgba(67,52,11,.07); }
.admin-image-preview-wrap { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:#151515; }
.admin-image-preview-wrap>img,.admin-image-no-preview { display:block; width:100%; height:100%; object-fit:contain; }
.admin-image-no-preview { display:grid; place-items:center; color:#aaa; }
.admin-image-status { position:absolute; top:10px; right:10px; padding:5px 9px; border:1px solid rgba(255,255,255,.35); border-radius:999px; background:rgba(20,20,20,.76); color:#fff; font-size:11px; font-weight:850; backdrop-filter:blur(8px); }
.admin-image-status.status-approved,.admin-image-status.status-allowed { background:rgba(17,111,57,.88); }
.admin-image-status.status-rejected { background:rgba(176,31,31,.9); }
.admin-image-status.status-pending { background:rgba(153,105,0,.9); }
.admin-image-review-card .admin-card-main { padding:17px; gap:9px; }
.admin-moderation-scores { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.admin-moderation-scores span { display:flex; min-width:0; flex-direction:column; gap:2px; padding:9px; border-radius:11px; background:#FFF8DF; }
.admin-moderation-scores small { overflow:hidden; color:#746B58; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.admin-moderation-scores strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; }
.admin-review-history { padding:11px; border-left:3px solid #D5A900; border-radius:0 10px 10px 0; background:#FFF9E9; }
.admin-review-history>* { display:block; margin:0; }
.admin-review-history span,.admin-review-history p { margin-top:4px; color:#716957; font-size:12px; }
.admin-image-actions { margin-top:2px; }
.admin-image-actions .btn { flex:1; }
.admin-decision-warning { padding:11px; border-radius:10px; background:#FFF0C6; color:#66500A; font-size:13px; }
.dark-mode .admin-language-toggle { border-color:#6D5A23; background:#3B3219; color:#FFE387; }
.dark-mode .admin-image-hero { border-color:#544820; background:linear-gradient(135deg,#302B1E,#3D3214); }
.dark-mode .admin-image-hero p,.dark-mode .admin-image-toolbar label,.dark-mode .admin-image-toolbar small { color:#C7BEA8; }
.dark-mode .admin-image-summary span,.dark-mode .admin-image-toolbar { border-color:#4B4537; background:#292722; color:#C7BEA8; }
.dark-mode .admin-image-toolbar select { border-color:#555044; background:#24231F; color:#F3EEE2; }
.dark-mode .admin-image-review-card { border-color:#444; background:#252525; box-shadow:none; }
.dark-mode .admin-moderation-scores span,.dark-mode .admin-review-history { background:#343127; }
.dark-mode .admin-moderation-scores small,.dark-mode .admin-review-history span,.dark-mode .admin-review-history p { color:#C9C1AE; }
.dark-mode .admin-decision-warning { background:#463A19; color:#F2D976; }
@media (max-width:650px) { .admin-heading{align-items:center}.admin-heading h1{font-size:24px}.admin-image-hero{align-items:stretch;flex-direction:column;padding:17px}.admin-image-summary span{flex:1;min-width:0}.admin-image-review-grid{grid-template-columns:1fr}.admin-image-toolbar{align-items:stretch;flex-direction:column}.admin-image-toolbar select{width:100%} }

/* Public landing stays deliberately simple and fits in one viewport. */
.public-landing { display:grid; width:100%; height:100dvh; grid-template-rows:minmax(0,1fr) auto; margin:0; overflow:hidden; background:#fffdf5; color:#27230f; }
.public-landing-header,.public-landing-main,.public-landing-footer { width:min(760px,calc(100% - 36px)); margin-inline:auto; }
.public-landing-header { display:none; }
.public-landing-brand { display:flex; align-items:center; gap:9px; color:inherit; font-size:21px; text-decoration:none; }
.public-landing-brand img { width:40px; height:40px; border:1px solid rgba(93,70,0,.18); border-radius:12px; object-fit:cover; }
.public-landing-main { display:grid; min-height:0; align-items:center; justify-items:center; padding-block:clamp(18px,4vh,42px); }
.public-landing-hero { display:grid; width:100%; min-height:0; place-items:center; }
.public-landing-copy { display:grid; width:100%; justify-items:center; gap:clamp(14px,2.4vh,24px); text-align:center; }
.public-landing-kicker { color:#836c20; font-size:clamp(12px,1.8vw,15px); font-weight:900; letter-spacing:.09em; text-align:center; text-transform:uppercase; }
.public-landing-icon { width:clamp(150px,29vh,270px); height:clamp(150px,29vh,270px); border:1px solid rgba(93,70,0,.18); border-radius:clamp(32px,6vh,58px); box-shadow:0 15px 36px rgba(119,91,0,.18); object-fit:cover; }
.public-landing-copy h1 { max-width:700px; margin:0; font-size:clamp(34px,6vw,60px); line-height:1; letter-spacing:-.045em; text-align:center; }
.public-landing-copy > p { max-width:620px; margin:0; color:#655e45; font-size:clamp(15px,2vw,19px); line-height:1.4; }
.public-landing-features { display:grid; width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:clamp(4px,1vh,10px) 0; }
.public-landing-features article { padding-left:12px; border-left:3px solid #ffd43b; }
.public-landing-features h2 { margin:0 0 3px; font-size:16px; }
.public-landing-features p { margin:0; color:#716a56; font-size:13px; line-height:1.35; }
.public-landing-actions { display:grid; width:min(100%,520px); grid-template-columns:1fr 1fr; gap:10px; margin-inline:auto; }
.public-landing-actions .btn {
    display:flex;
    min-height:52px;
    align-items:center;
    justify-content:center;
    padding:12px 20px;
    box-sizing:border-box;
    border:1px solid #e4b900;
    background:#FFD43B;
    box-shadow:0 7px 18px rgba(220,169,0,.28);
    color:#211b00;
    font-weight:850;
    text-align:center;
    text-decoration:none;
}
.public-landing-actions .btn:hover {
    background:#FFE15F;
    box-shadow:0 9px 22px rgba(220,169,0,.38);
    color:#171300;
    transform:translateY(-1px);
}
.public-landing-actions .btn:active {
    background:#F6C928;
    box-shadow:0 3px 9px rgba(220,169,0,.25);
    transform:translateY(1px);
}
.public-landing-login { min-width:0; }
.public-landing-footer { display:flex; min-height:54px; align-items:center; justify-content:center; gap:18px; border-top:1px solid #e8dfc2; color:#766f5b; font-size:12px; text-align:center; }
.public-landing-footer nav { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.public-landing-footer a { color:inherit; }
@media (max-width:700px) {
    .public-landing-main { align-items:center; padding-block:clamp(12px,2.5vh,24px); }
    .public-landing-copy { width:100%; }
    .public-landing-copy h1 { font-size:clamp(31px,9vw,44px); }
    .public-landing-icon { width:clamp(142px,25vh,210px); height:clamp(142px,25vh,210px); }
    .public-landing-actions { width:100%; grid-template-columns:1fr; gap:8px; }
    .public-landing-actions .btn { width:100%; min-height:52px; font-size:16px; }
    .public-landing-footer { min-height:46px; }
    .public-landing-footer > span { display:none; }
}
.public-landing-guest {
    grid-column:1 / -1;
    justify-self:center;
    min-height:34px;
    padding:4px 10px;
    border:0;
    background:transparent;
    color:#8a867b;
    cursor: pointer;
    font: inherit;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}
.public-landing-guest:hover { color:#4f4b40; text-decoration:underline; }

.public-account-back {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    margin-bottom: 14px;
    color: inherit;
    font-weight: 800;
    text-decoration: none;
}

.account-required-landing .public-landing-header,
.account-required-landing .public-landing-mark,
.account-required-landing .public-landing-features,
.account-required-landing .public-landing-footer {
    display: none;
}

.account-required-landing .public-landing-main,
.account-required-landing .public-landing-hero {
    min-height: 100dvh;
}

.account-required-landing .public-landing-hero {
    display: flex;
    align-items: center;
    justify-content: center;
}

.guest-mode .home-friend-row,
.guest-mode .comment-composer,
.guest-mode [data-create-moment],
.guest-mode .moment-add-card {
    display: none !important;
}
html.bucka-native body {
    padding-top: max(env(safe-area-inset-top), 0px);
}

.bucka-native-offline {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 50%;
    z-index: 100000;
    transform: translateX(-50%);
    padding: 7px 14px;
    border-radius: 0 0 12px 12px;
    color: #fff;
    background: #b42318;
    font-size: .82rem;
    font-weight: 800;
}

.bucka-native-offline[hidden] { display: none; }
/* Experimental reaction slot */
.slot-event-body{min-height:100dvh;overflow:hidden;background:radial-gradient(circle at 50% 20%,#fff4a8,#ffd23f 55%,#ef9f20);color:#17130b}.slot-event-page{height:calc(100dvh - var(--bottom-nav-height,72px));max-width:760px;margin:auto;padding:max(14px,env(safe-area-inset-top)) 18px 18px;display:flex;flex-direction:column}.slot-event-header{display:flex;align-items:center;justify-content:space-between;min-height:52px;position:relative;z-index:4}.slot-experimental{font-weight:950;letter-spacing:.16em;font-size:.75rem;background:#17130b;color:#ffd33d;padding:7px 12px;border-radius:999px}.slot-album-button{border:2px solid #17130b;border-radius:14px;background:#fff7ca;color:#17130b;font:900 .92rem/1 inherit;padding:11px 14px;box-shadow:3px 3px 0 #17130b}.slot-album-button span{display:inline-block;margin-left:5px;color:#806000}.slot-machine{position:relative;isolation:isolate;flex:1;width:min(94%,560px);max-height:720px;min-height:470px;margin:10px auto 5px;border:6px solid #1d1609;border-radius:50px 50px 34px 34px;background:linear-gradient(135deg,#ffef66,#ffbd25 55%,#e77b18);box-shadow:0 20px 0 #9f4710,0 28px 40px #6f3a164f,inset 0 0 0 7px #fff2a0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.slot-machine:focus-visible{outline:5px solid #fff;outline-offset:4px}.slot-machine-lights{position:absolute;inset:12px;border:4px dotted #fff6bd;border-radius:36px;pointer-events:none;filter:drop-shadow(0 0 5px #fff)}.slot-machine-title{text-align:center;transform:rotate(-2deg);z-index:1}.slot-machine-title small{display:block;font-weight:1000;letter-spacing:.42em;font-size:.75rem}.slot-machine-title strong{display:block;font-size:clamp(2.4rem,10vw,5rem);line-height:.88;font-weight:1000;letter-spacing:-.07em;text-shadow:3px 3px 0 #fff4a0}.slot-reels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:78%;padding:13px;border:6px solid #1d1609;border-radius:24px;background:#5f250c;box-shadow:inset 0 7px 13px #0008}.slot-reel{aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border:4px solid #d58a14;border-radius:15px;background:linear-gradient(#fff,#fff7cc);font-size:clamp(3.1rem,14vw,6.2rem);box-shadow:inset 0 0 16px #d1882c55}.slot-machine.spinning .slot-reel{filter:blur(2px);animation:slot-shake .11s linear infinite}.slot-reel.landed{filter:none!important;animation:slot-pop .32s ease!important}.slot-machine-mouth{min-height:45px;width:76%;display:grid;place-items:center;padding:8px 16px;border:4px solid #201609;border-radius:16px;background:#1f170c;color:#ffe66a;text-align:center;font-weight:850}.slot-pulls{display:flex;align-items:baseline;gap:8px}.slot-pulls strong{font-size:2.8rem;line-height:1}.slot-pulls span{font-weight:800}.slot-lever{position:absolute;right:-45px;top:43%;width:48px;height:140px}.slot-lever i{position:absolute;left:16px;bottom:0;width:15px;height:100px;border:4px solid #1b1409;border-radius:10px;background:#d6751b;transform-origin:bottom}.slot-lever b{position:absolute;top:0;left:3px;width:42px;height:42px;border:5px solid #1b1409;border-radius:50%;background:#ff533d;box-shadow:inset 7px 5px #ff998c}.slot-machine.spinning .slot-lever i{transform:rotate(34deg)}.slot-machine.empty{filter:saturate(.7)}
.slot-album-dialog{width:min(92vw,680px);max-height:88dvh;margin:auto;padding:0;border:4px solid #231907;border-radius:24px;background:#f5dda0;color:#261b0c;box-shadow:0 24px 70px #0008}.slot-album-dialog::backdrop{background:#171007b8;backdrop-filter:blur(6px)}.slot-album-dialog>header{padding:24px 58px 20px 24px;background:repeating-linear-gradient(0deg,#f1cb72 0 28px,#e9bd5c 29px 30px);border-bottom:4px solid #251a0b}.slot-album-dialog>header>span{font-size:.72rem;font-weight:950;letter-spacing:.15em}.slot-album-dialog h1{margin:3px 0;font-size:2.1rem}.slot-album-dialog p{margin:0;font-weight:800}.slot-album-close{position:absolute;top:14px;right:14px;width:42px;height:42px;border:3px solid #24190b;border-radius:50%;background:#fff0b7;color:#24190b;font:900 1.8rem/1 inherit}.slot-album-pages{padding:18px}.slot-album-rarity{padding:16px;margin-bottom:16px;border:3px solid #4c3415;border-radius:15px;background:#fff7d7;box-shadow:5px 6px 0 #8d5c20;transform:rotate(-.35deg)}.slot-album-rarity:nth-child(even){transform:rotate(.35deg)}.slot-album-rarity h2{margin:0 0 11px;font-size:1rem;text-transform:uppercase;letter-spacing:.12em}.slot-album-rarity>div{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.slot-sticker{position:relative;min-height:120px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:9px;border:2px dashed #a47728;border-radius:14px;text-align:center}.slot-sticker span{font-size:3rem;filter:drop-shadow(1px 3px 0 #d4ae64)}.slot-sticker strong{font-size:.74rem;margin-top:5px}.slot-sticker small{position:absolute;right:6px;top:6px;font-weight:900}.slot-sticker.locked{background:#d5c69b;color:#776c50}.slot-sticker.locked span{filter:none;color:#9d916e}.rarity-rare{--rarity:#2c8fc4}.rarity-epic{--rarity:#9b54d8}.rarity-legendary{--rarity:#ff9c21}.slot-album-rarity:not(.rarity-common){border-color:var(--rarity)}.slot-sticker.unlocked{background:linear-gradient(145deg,#fff,#fff3b1);box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--rarity,#e2b238) 35%,transparent)}
.slot-reward{position:fixed;z-index:100000;inset:0;display:grid;place-items:center;overflow:hidden;background:#1c1206b5;backdrop-filter:blur(4px)}.slot-reward[hidden]{display:none}.slot-reward section{position:relative;z-index:3;text-align:center;color:#fff;animation:reward-pop .55s cubic-bezier(.2,1.6,.4,1)}.slot-reward section>span{display:block;font-size:clamp(8rem,38vw,15rem);filter:drop-shadow(0 0 18px #fff) drop-shadow(0 0 42px #ffd329)}.slot-reward section small{display:inline-block;padding:7px 14px;border-radius:99px;background:#17130c;color:#ffd83d;font-weight:950;letter-spacing:.15em;text-transform:uppercase}.slot-reward h2{margin:0;font-size:2rem}.slot-reward p{font-weight:800}.slot-reward-rays{position:absolute;width:150vmax;aspect-ratio:1;background:repeating-conic-gradient(#ffd52d 0 8deg,transparent 8deg 18deg);animation:reward-rays 9s linear infinite;opacity:.58}.slot-reward-particles{position:absolute;inset:0}.slot-reward-particles i{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#ffe65d;box-shadow:0 0 12px #fff;animation:reward-particle 1.5s ease-out infinite}.slot-reward-particles i:nth-child(3n){animation-delay:-.5s}.slot-reward-particles i:nth-child(4n){animation-delay:-1s}.slot-reward.leaving{opacity:0;transition:.3s}.slot-reward.rarity-legendary section>span{filter:drop-shadow(0 0 25px #fff) drop-shadow(0 0 70px #ff9d00)}
@keyframes slot-shake{50%{transform:translateY(5px)}}@keyframes slot-pop{50%{transform:scale(1.22)}}@keyframes reward-pop{from{transform:scale(.15) rotate(-12deg);opacity:0}}@keyframes reward-rays{to{transform:rotate(360deg)}}@keyframes reward-particle{to{transform:rotate(var(--r,220deg)) translateX(48vw) scale(0);opacity:0}}@media(max-width:560px){.slot-event-page{padding-inline:12px}.slot-machine{width:calc(100% - 34px);min-height:440px;border-radius:38px 38px 28px 28px;gap:20px}.slot-lever{right:-36px;transform:scale(.82)}.slot-reels{width:84%}.slot-album-rarity>div{grid-template-columns:repeat(2,1fr)}}
.rarity-super_legendary{--rarity:#ff2a68;background:linear-gradient(145deg,#21102d,#5d174d)!important;color:#fff;border-color:var(--rarity)!important;border-style:solid}.slot-reward.rarity-super_legendary{background:radial-gradient(circle,#7d134fdd,#100516f2)}.slot-reward.rarity-super_legendary section>span{filter:drop-shadow(0 0 28px #fff) drop-shadow(0 0 85px #ff176d)}
.collectible-reaction-button,.comment-reaction-button{position:relative}.collectible-reaction-button.active,.comment-reaction-button.active{background:#ffd33d52}.collectible-reaction-button>span,.comment-reaction-button>span{font-size:1.25rem}.collectible-reaction-button>small,.comment-reaction-button>small{font-size:.72rem;font-weight:900}.collectible-reaction-picker{position:absolute;z-index:500;left:8px;bottom:calc(100% + 8px);width:min(330px,calc(100vw - 32px));display:flex;flex-wrap:wrap;gap:7px;padding:10px;border:1px solid var(--border-color,#ddd);border-radius:16px;background:var(--card-bg,#fff);color:var(--text-color,#171717);box-shadow:0 12px 35px #0003}.collectible-reaction-picker button{width:50px;min-height:56px;padding:4px;border:0;border-radius:12px;background:var(--soft-bg,#f2f2f2);color:inherit}.collectible-reaction-picker button.active{outline:3px solid #ffd231}.collectible-reaction-picker button span{display:block;font-size:1.55rem}.collectible-reaction-picker button small{display:block;overflow:hidden;text-overflow:ellipsis;font-size:.55rem;white-space:nowrap}.collectible-reaction-picker p{margin:4px;font-size:.82rem}.collectible-reaction-picker>a,.empty-reaction-album{display:block;padding:8px 10px;border-radius:10px;background:#ffd33d;color:#17130b!important;font-weight:850;text-decoration:none}.collectible-reaction-summary{width:100%;display:flex;gap:6px;padding-top:5px;border-top:1px solid var(--border-color,#ddd)}.collectible-reaction-summary span{font-size:1rem}.collectible-reaction-summary small{margin-left:2px;font-weight:850}.comment-engagement{position:relative}.bucka-connection-status{position:fixed;z-index:3000;top:max(10px,env(safe-area-inset-top));left:50%;max-width:min(520px,calc(100vw - 28px));box-sizing:border-box;padding:10px 15px;border:1px solid #7b281f;border-radius:999px;background:#8f3026;color:#fff;font-size:.82rem;font-weight:800;text-align:center;box-shadow:0 8px 24px #0003;transform:translateX(-50%)}.bucka-connection-status.online{border-color:#24643a;background:#2d7847}.bucka-connection-status[hidden]{display:none!important}

/* Stable mobile navigation follows the visible viewport instead of the page. */
.bottom-nav{position:fixed!important;inset:auto 0 0 0!important;margin:0!important;transform:translate3d(0,0,0)!important;backface-visibility:hidden}
@media(max-width:600px){.bottom-nav-pill{transform:none!important;will-change:auto!important}}

/* The poll adds fields below the normal post composer. Desktop gets its own
   scrolling surface; the established mobile layout remains unchanged. */
@media (min-width:769px){
    .create-post-page.poll-composer-open{height:100dvh!important;min-height:0!important;overflow:hidden!important}
    .create-post-page.poll-composer-open>.profile-page{height:100dvh!important;min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:contain;padding-bottom:40px}
    .create-post-page.poll-composer-open .create-post-card{height:auto!important;max-height:none!important;overflow:visible!important}
}

/* Consistent icon action for collectible reactions. */
.collectible-reaction-button{display:grid;width:34px;height:34px;min-width:34px;place-items:center;padding:0;border:1px solid color-mix(in srgb,currentColor 14%,transparent);border-radius:50%;background:color-mix(in srgb,var(--card-bg,#fff) 88%,#eee);color:inherit;box-shadow:none}
.collectible-reaction-button:hover{border-color:#caa515;background:#fff2b2}
.collectible-reaction-button>svg,[data-moment-react]>svg,[data-viewer-react]>svg{width:18px;height:18px;stroke-width:2.2}

/* Explicit close controls keep reaction pickers dismissible even when a
   browser/WebView handles the transparent outside layer inconsistently. */
.collectible-reaction-picker,.moment-reaction-picker,.moment-viewer-reaction-picker{padding-right:44px!important}
.collectible-reaction-picker[hidden],.moment-reaction-picker[hidden],.moment-viewer-reaction-picker[hidden],.reaction-picker-backdrop[hidden],.moment-reaction-backdrop[hidden]{display:none!important}
.reaction-picker-close,.moment-reaction-close{position:absolute!important;top:6px!important;right:6px!important;z-index:3!important;display:grid!important;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;place-items:center!important;padding:0!important;border:1px solid color-mix(in srgb,currentColor 20%,transparent)!important;border-radius:50%!important;background:color-mix(in srgb,var(--card-bg,#fff) 92%,#ddd)!important;color:inherit!important;box-shadow:0 2px 8px #0002!important;cursor:pointer!important}
.reaction-picker-close svg,.moment-reaction-close svg{width:17px!important;height:17px!important;pointer-events:none}
.reaction-picker-close:hover,.moment-reaction-close:hover{background:#ffe78b!important}
.leaderboard-event-tag{display:inline-flex;align-items:center;margin-left:4px;padding:2px 5px;border-radius:999px;background:#2c271d;color:#ffd33d;font-size:.52rem;font-weight:950;letter-spacing:.08em;vertical-align:middle}