/* Tema global DEKETIN */
html:not(.dark-mode){color-scheme:light;}
html:not(.dark-mode) body{
    --bg:#f6f8fc;
    --background:#f6f8fc;
    --white:#fff;
    --card:#fff;
    --navy:#17213a;
    --text:#202a42;
    --text-soft:#4b586d;
    --text-secondary:#4b586d;
    --text-muted:#5b6678;
    --soft:#4b586d;
    --muted:#5b6678;
    --border:#d9dfeb;
    color:#202a42;
}
html:not(.dark-mode) body .text-muted,
html:not(.dark-mode) body .text-soft,
html:not(.dark-mode) body .text-secondary,
html:not(.dark-mode) body .muted,
html:not(.dark-mode) body .subtitle,
html:not(.dark-mode) body .description,
html:not(.dark-mode) body .helper-text,
html:not(.dark-mode) body .form-hint,
html:not(.dark-mode) body .field-hint,
html:not(.dark-mode) body .hint-text,
html:not(.dark-mode) body .empty,
html:not(.dark-mode) body .empty-state,
html:not(.dark-mode) body .empty-message,
html:not(.dark-mode) body .secondary-text,
html:not(.dark-mode) body .footnote,
html:not(.dark-mode) body .caption{
    color:var(--text-muted);
}
html:not(.dark-mode) body .input-icon,
html:not(.dark-mode) body .password-toggle,
html:not(.dark-mode) body .divider,
html:not(.dark-mode) body .footer-note,
html:not(.dark-mode) body .strength-text,
html:not(.dark-mode) body .brand-text small{
    color:var(--text-muted);
}
html:not(.dark-mode) body .divider::before,
html:not(.dark-mode) body .divider::after{
    background:#d2d9e5;
}
html:not(.dark-mode) body .bottom-nav .bottom-item:not(.active),
html:not(.dark-mode) body .auth-bottom-nav .bottom-item:not(.active){
    color:#667287;
}
html:not(.dark-mode) body input::placeholder,
html:not(.dark-mode) body textarea::placeholder{
    color:#667287;
    opacity:1;
}
html:not(.dark-mode) body :is(input,textarea,select):focus-visible,
html:not(.dark-mode) body button:focus-visible,
html:not(.dark-mode) body a:focus-visible{
    outline:3px solid rgba(83,109,254,.35);
    outline-offset:2px;
}

html.dark-mode{color-scheme:dark;}
html.dark-mode body{
    --bg:#101522;
    --background:#101522;
    --white:#182238;
    --card:#182238;
    --navy:#f3f6fc;
    --text:#e9edf7;
    --text-soft:#aeb8cb;
    --text-secondary:#aeb8cb;
    --text-muted:#8290aa;
    --soft:#aeb8cb;
    --muted:#8290aa;
    --border:#2b354b;
    background:#0b101b!important;
    color:#e9edf7!important;
}
html.dark-mode body > *{color:inherit;}
html.dark-mode header,
html.dark-mode nav,
html.dark-mode main,
html.dark-mode section,
html.dark-mode aside,
html.dark-mode article,
html.dark-mode form,
html.dark-mode .app,
html.dark-mode .page,
html.dark-mode .container,
html.dark-mode .content,
html.dark-mode .panel,
html.dark-mode .card,
html.dark-mode .modal-content,
html.dark-mode .sheet,
html.dark-mode .bottom-nav{
    border-color:#2b354b!important;
}
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select{
    color:#e9edf7!important;
    background:#182238!important;
    border-color:#2b354b!important;
}
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder{color:#8290aa!important;}

/* Login page: the page-specific styles use hard-coded light surfaces. */
html.dark-mode .login-card{
    background:#182238!important;
    border-color:#2b354b!important;
    box-shadow:0 18px 45px rgba(0,0,0,.28)!important;
}
html.dark-mode .login-card .input-wrap input{
    background:#202c43!important;
    color:#f3f6fc!important;
    border-color:#46536c!important;
}
html.dark-mode .login-card .input-wrap input:focus{
    background:#202c43!important;
    border-color:#7182ff!important;
    box-shadow:0 0 0 3px rgba(113,130,255,.18)!important;
}
html.dark-mode .login-card .google-button,
html.dark-mode .login-card .register-button{
    background:#202c43!important;
    color:#f3f6fc!important;
    border-color:#46536c!important;
}
html.dark-mode .login-card .google-button:hover,
html.dark-mode .login-card .register-button:hover{
    background:#293653!important;
    border-color:#6075ff!important;
}
html.dark-mode .login-card .password-toggle,
html.dark-mode .login-card .input-icon{color:#aeb8cb!important;}
html.dark-mode .status-box.error{
    color:#ff9aaa!important;
    background:#3a2330!important;
    border-color:#6a3445!important;
}
html.dark-mode .status-box.success{
    color:#7ce4bb!important;
    background:#173b34!important;
    border-color:#286653!important;
}
html.dark-mode .success-modal{
    background:#182238!important;
    color:#e9edf7!important;
}
html.dark-mode .success-modal-icon{background:#173b34!important;}
html.dark-mode .success-modal-progress{background:#2b354b!important;}

/* Auth pages use the same mobile bottom navigation as the landing page. */
.auth-bottom-nav{
    display:none;
}
@media (max-width:768px){
    .login-wrapper,
    .register-wrapper{
        padding-bottom:calc(117px + env(safe-area-inset-bottom))!important;
    }
    .auth-bottom-nav{
        position:fixed;
        z-index:1500;
        left:50%;
        bottom:0;
        width:100%;
        max-width:430px;
        height:calc(72px + env(safe-area-inset-bottom));
        padding:6px 5px env(safe-area-inset-bottom);
        transform:translateX(-50%);
        display:grid;
        grid-template-columns:repeat(5,1fr);
        align-items:center;
        background:rgba(255,255,255,.98);
        border-top:1px solid #e7ebf1;
        box-shadow:0 -6px 22px rgba(18,29,60,.08);
        backdrop-filter:blur(20px);
    }
    .auth-bottom-nav .bottom-item{
        position:relative;
        height:59px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        background:transparent;
        color:#99a2b3;
        font-size:10px;
        font-weight:600;
        text-decoration:none;
    }
    .auth-bottom-nav .bottom-icon{
        position:relative;
        width:32px;
        height:28px;
        display:grid;
        place-items:center;
        font-size:20px;
    }
    .auth-bottom-nav .bottom-item.active{color:var(--primary);}
    .auth-bottom-nav .bottom-item.active::before{
        content:"";
        position:absolute;
        top:-5px;
        width:22px;
        height:3px;
        border-radius:0 0 5px 5px;
        background:var(--primary);
    }
    .auth-bottom-nav .center-button{
        width:50px;
        height:50px;
        margin-top:-27px;
        margin-bottom:1px;
        display:grid;
        place-items:center;
        border:4px solid white;
        border-radius:16px;
        background:linear-gradient(135deg,var(--primary),var(--purple));
        color:white;
        font-size:18px;
    }
}
@media (min-width:769px){
    .auth-bottom-nav{display:none!important;}
}
html.dark-mode .auth-bottom-nav{
    background:rgba(18,26,42,.98)!important;
    border-top-color:#2b354b!important;
}
html.dark-mode .auth-bottom-nav .center-button{border-color:#182238!important;}
html.dark-mode .back-button{
    background:#202c43!important;
    color:#e9edf7!important;
    border:1px solid #2b354b!important;
}
html.dark-mode .sheet-overlay{background:rgba(0,0,0,.72)!important;}
html.dark-mode .moment-sheet{
    background:#182238!important;
    color:#e9edf7!important;
    border:1px solid #2b354b!important;
}
html.dark-mode .moment-sheet .handle{background:#53627d!important;}
html.dark-mode .moment-sheet .moment-sheet-icon{
    background:linear-gradient(135deg,#29365c,#352c58)!important;
    color:#b9c3ff!important;
}
html.dark-mode .moment-sheet .moment-sheet-eyebrow{color:#b9c3ff!important;}
html.dark-mode .moment-sheet .sheet-head h3,
html.dark-mode .moment-sheet .moment-compose-label,
html.dark-mode .moment-sheet .moment-privacy-copy strong{color:#f3f6fc!important;}
html.dark-mode .moment-sheet .sheet-head button{
    background:#202c43!important;
    color:#e9edf7!important;
}
html.dark-mode .moment-sheet .sheet-head button:hover{background:#29365c!important;}
html.dark-mode .moment-sheet textarea{
    background:#202c43!important;
    color:#f3f6fc!important;
    border-color:#46536c!important;
}
html.dark-mode .moment-sheet textarea::placeholder{color:#8290aa!important;}
html.dark-mode .moment-sheet textarea:focus{background:#202c43!important;}
html.dark-mode .moment-sheet .moment-compose-meta,
html.dark-mode .moment-sheet .moment-privacy-copy small,
html.dark-mode .moment-sheet .sheet-photo-copy small{color:#aeb8cb!important;}
html.dark-mode .moment-sheet .sheet-photo{
    border-color:#46536c!important;
    background:#202c43!important;
    color:#f3f6fc!important;
}
html.dark-mode .moment-sheet .sheet-photo:hover{border-color:#8798ff!important;background:#222f4a!important;}
html.dark-mode .moment-sheet .sheet-photo-icon{
    background:#29365c!important;
    color:#b9c3ff!important;
}
html.dark-mode .moment-sheet .sheet-photo-action{color:#b9c3ff!important;}
html.dark-mode .moment-sheet .moment-privacy-row{
    background:#202c43!important;
    border-color:#46536c!important;
}
html.dark-mode .moment-sheet .moment-privacy-icon{background:#29365c!important;color:#b9c3ff!important;}
html.dark-mode .moment-sheet .moment-privacy-row select{
    border-color:#46536c!important;
    background:#182238!important;
    color:#b9c3ff!important;
}
html.dark-mode .moment-sheet .moment-photo-preview-wrap{border-color:#46536c!important;background:#202c43!important;}
html.dark-mode .moment-sheet .moment-photo-preview-meta{background:#202c43!important;}
html.dark-mode .moment-sheet .moment-photo-preview-meta span{color:#73d4ae!important;}
html.dark-mode .moment-sheet .moment-photo-preview-meta button{background:#472b3d!important;color:#ff9daa!important;}
html.dark-mode .moment-sheet .publish:disabled{opacity:.55!important;}
html.dark-mode .delete-moment-overlay{
    background:rgba(0,0,0,.72)!important;
}
html.dark-mode .delete-moment-modal{
    background:#182238!important;
    border-color:#34415a!important;
    box-shadow:0 30px 80px rgba(0,0,0,.55),0 8px 20px rgba(0,0,0,.32)!important;
}
html.dark-mode .delete-moment-close{
    background:#202c43!important;
    color:#aeb8cb!important;
}
html.dark-mode .delete-moment-close:hover{
    background:#2b3852!important;
    color:#f3f6fc!important;
}
html.dark-mode .delete-moment-icon{
    background:#3a2638!important;
    color:#ff8093!important;
    box-shadow:inset 0 0 0 1px rgba(255,128,147,.18)!important;
}
html.dark-mode .delete-moment-badge{
    background:#3a2638!important;
    color:#ff9daa!important;
}
html.dark-mode .delete-moment-modal h3{
    color:#f3f6fc!important;
}
html.dark-mode .delete-moment-modal p{
    color:#aeb8cb!important;
}
html.dark-mode .delete-moment-warning{
    background:#302638!important;
    border-color:#563343!important;
}
html.dark-mode .delete-moment-warning-icon{
    background:#472b3d!important;
    color:#ff9daa!important;
    box-shadow:inset 0 0 0 1px rgba(255,128,147,.18)!important;
}
html.dark-mode .delete-moment-warning strong{
    color:#ffe3e8!important;
}
html.dark-mode .delete-moment-warning span{
    color:#c2adba!important;
}
html.dark-mode .delete-moment-cancel{
    background:#202c43!important;
    border-color:#3b4860!important;
    color:#e9edf7!important;
}
html.dark-mode .delete-moment-cancel:hover{
    background:#293750!important;
}
html.dark-mode .delete-moment-confirm{
    background:linear-gradient(135deg,#ff6680,#ed3f60)!important;
    color:#fff!important;
}
html.dark-mode .delete-moment-confirm:disabled{
    opacity:.55!important;
}
html.dark-mode .comments-overlay{
    background:rgba(0,0,0,.72)!important;
}
html.dark-mode .comments-sheet{
    background:#182238!important;
    color:#e9edf7!important;
    border:1px solid #2b354b!important;
    box-shadow:0 -20px 50px rgba(0,0,0,.42)!important;
}
html.dark-mode .comments-handle{background:#53627d!important;}
html.dark-mode .comments-head{border-bottom-color:#2b354b!important;}
html.dark-mode .comments-head strong{color:#f3f6fc!important;}
html.dark-mode .comments-head span{color:#aeb8cb!important;}
html.dark-mode .comments-head button{
    background:#202c43!important;
    color:#e9edf7!important;
}
html.dark-mode .comments-head button:hover{background:#293750!important;}
html.dark-mode .comments-empty{color:#aeb8cb!important;}
html.dark-mode .comment-avatar{
    background:linear-gradient(135deg,#536dfe,#835cff)!important;
    color:#fff!important;
}
html.dark-mode .comment-body{
    background:#202c43!important;
    border:1px solid #34415a!important;
}
html.dark-mode .comment-body strong{color:#f3f6fc!important;}
html.dark-mode .comment-body p{color:#d1d8e6!important;}
html.dark-mode .comment-body time{color:#aeb8cb!important;}
html.dark-mode .comment-delete{
    background:#472b3d!important;
    color:#ff9daa!important;
}
html.dark-mode .comment-delete:hover{background:#593448!important;}
html.dark-mode .comment-composer{border-top-color:#2b354b!important;}
html.dark-mode .comment-composer input{
    background:#202c43!important;
    color:#f3f6fc!important;
    border-color:#46536c!important;
}
html.dark-mode .comment-composer input::placeholder{color:#aeb8cb!important;}
html.dark-mode .comment-composer input:focus{
    border-color:#8798ff!important;
    box-shadow:0 0 0 3px rgba(113,130,255,.16)!important;
}
html.dark-mode .comment-composer button{
    background:linear-gradient(135deg,#536dfe,#835cff)!important;
    color:#fff!important;
}
html:not(.dark-mode) .delete-moment-modal{
    background:#fff!important;
    border-color:#e6eaf2!important;
}
html:not(.dark-mode) .delete-moment-close{
    background:#f1f4f9!important;
    color:#59657a!important;
}
html:not(.dark-mode) .delete-moment-icon{
    background:#fff0f3!important;
    color:#e8415d!important;
}
html:not(.dark-mode) .delete-moment-badge{
    background:#fff0f2!important;
    color:#cf2947!important;
    font-size:8px!important;
}
html:not(.dark-mode) .delete-moment-modal h3{
    color:#17213a!important;
}
html:not(.dark-mode) .delete-moment-modal p{
    color:#596579!important;
    font-size:10px!important;
}
html:not(.dark-mode) .delete-moment-warning{
    background:#fff5f6!important;
    border-color:#ffd5dc!important;
}
html:not(.dark-mode) .delete-moment-warning-icon{
    background:#fff!important;
    color:#dc3552!important;
}
html:not(.dark-mode) .delete-moment-warning strong{
    color:#28334b!important;
    font-size:10px!important;
}
html:not(.dark-mode) .delete-moment-warning span{
    color:#596579!important;
    font-size:9px!important;
}
html:not(.dark-mode) .delete-moment-cancel{
    background:#f3f5f9!important;
    border-color:#dbe1eb!important;
    color:#27344e!important;
}
html:not(.dark-mode) .delete-moment-cancel:hover{
    background:#e9edf4!important;
}
html:not(.dark-mode) .delete-moment-confirm{
    background:linear-gradient(135deg,#ff5f7b,#f13f5e)!important;
    color:#fff!important;
}
html:not(.dark-mode) .delete-moment-close:focus-visible,
html:not(.dark-mode) .delete-moment-actions button:focus-visible{
    outline:3px solid rgba(83,109,254,.35)!important;
    outline-offset:2px!important;
}
@media (max-width:768px){
    body .app{
        width:100%!important;
        max-width:430px!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }
    .auth-topbar .topbar-inner{
        justify-content:flex-start!important;
        gap:10px;
    }
    .auth-topbar .header-spacer{display:none;}
}

/* Keep every mobile page header visible while scrolling. Chat has its own
   fixed-height scroll layout and intentionally keeps the header in its flex flow. */
@media (max-width:768px){
    body:has(.topbar):not(:has(.chat-page)) .topbar{
        position:fixed!important;
        z-index:1500!important;
        top:0!important;
        left:50%!important;
        width:100%!important;
        max-width:430px!important;
        transform:translateX(-50%)!important;
    }
    body:has(.topbar):not(:has(.chat-page)) .app{
        padding-top:72px!important;
    }

    body:has(.chat-page) .app{
        padding-bottom:72px!important;
    }
    body:has(.chat-page) .bottom-nav{
        position:fixed!important;
        z-index:1500!important;
        left:50%!important;
        bottom:0!important;
        width:100%!important;
        max-width:430px!important;
        height:calc(72px + env(safe-area-inset-bottom))!important;
        padding:6px 5px env(safe-area-inset-bottom)!important;
        transform:translateX(-50%)!important;
    }
    body:has(.chat-page) .bottom-item{
        height:59px!important;
        gap:4px!important;
        font-size:10px!important;
    }
    body:has(.chat-page) .bottom-item i{font-size:20px!important;}
    body:has(.chat-page) .center-button{
        width:42px!important;
        height:42px!important;
        margin:0!important;
        border-radius:16px!important;
        font-size:18px!important;
    }

    /* Shared navbar sizing for every HTML page. */
    .bottom-nav,
    .auth-bottom-nav{
        height:calc(72px + env(safe-area-inset-bottom))!important;
        padding:6px 5px env(safe-area-inset-bottom)!important;
    }
    .bottom-nav .bottom-item,
    .auth-bottom-nav .bottom-item{
        height:59px!important;
        gap:4px!important;
        font-size:10px!important;
    }
    .bottom-nav .bottom-icon,
    .auth-bottom-nav .bottom-icon{
        width:32px!important;
        height:28px!important;
        font-size:20px!important;
    }
    .bottom-nav .bottom-item > i{font-size:20px!important;}
    .bottom-nav .center-button,
    .auth-bottom-nav .center-button{
        width:42px!important;
        height:42px!important;
        margin:0!important;
        border-radius:16px!important;
        font-size:18px!important;
    }
}
html.dark-mode .card,
html.dark-mode .panel,
html.dark-mode .modal-content,
html.dark-mode .sheet,
html.dark-mode .user-search-sheet,
html.dark-mode .notification-card,
html.dark-mode .community-card,
html.dark-mode .friend-card,
html.dark-mode .profile-card,
html.dark-mode .premium-card{
    background:#182238!important;
    color:#e9edf7!important;
}
html.dark-mode h1,html.dark-mode h2,html.dark-mode h3,
html.dark-mode h4,html.dark-mode strong,html.dark-mode label{
    color:#f3f6fc!important;
}
html.dark-mode p,html.dark-mode small,html.dark-mode .muted,
html.dark-mode .subtitle,html.dark-mode .description{color:#aeb8cb!important;}
html.dark-mode .bottom-nav,
html.dark-mode .site-header,
html.dark-mode .mobile-header{
    background:#121a2a!important;
}
html.dark-mode .overlay{background:rgba(0,0,0,.7)!important;}
.theme-toggle-button{
    width:100%;
    min-height:42px;
    margin-top:10px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 12px;
    border:1px solid #e6eaf1;
    border-radius:11px;
    background:#f7f8fc;
    color:#202a42;
    font:inherit;
    font-size:9px;
    font-weight:700;
    text-align:left;
}
.theme-toggle-button i{width:18px;text-align:center;color:#536dfe;}
html.dark-mode .theme-toggle-button{background:#202c43!important;color:#e9edf7!important;border-color:#2b354b!important;}
html.dark-mode .theme-toggle-button i{color:#ffd166!important;}
html.dark-mode .mobile-menu{
    background:#121a2a!important;
    color:#e9edf7!important;
    box-shadow:-12px 0 35px rgba(0,0,0,.28);
}
html.dark-mode .menu-top{border-color:#2b354b!important;}
html.dark-mode .menu-close{background:#202c43!important;color:#e9edf7!important;}
html.dark-mode .menu-links a{color:#d7dfef!important;}
html.dark-mode .menu-links a:hover{background:#202c43!important;color:#aebaff!important;}
html.dark-mode .brand-text strong,
html.dark-mode .brand strong,
html.dark-mode .account-menu-profile strong{color:#f3f6fc!important;}
html.dark-mode .brand-text small,
html.dark-mode .account-menu-profile span{color:#9eabc1!important;}
html.dark-mode .account-menu-box{border-color:#2b354b!important;}
html.dark-mode .logout-button{background:#3a2330!important;color:#ff9aaa!important;}
html.dark-mode .desktop-hero,
html.dark-mode .mobile-home,
html.dark-mode .section,
html.dark-mode .safety,
html.dark-mode .cta{background:#101522!important;}
html.dark-mode .app,
html.dark-mode .chat-page,
html.dark-mode .chat-list-page,
html.dark-mode .messages{background:#101522!important;}
html.dark-mode .topbar,
html.dark-mode .composer{background:#121a2a!important;}
html.dark-mode #voiceNoteButton,
body.dark-mode #voiceNoteButton{
    background:#293653!important;
    color:#f3f6fc!important;
    border:1px solid #46536c!important;
    box-shadow:none!important;
}
html.dark-mode #voiceNoteButton.recording,
body.dark-mode #voiceNoteButton.recording{
    background:#3a2330!important;
    color:#ff9aaa!important;
    border-color:#6a3445!important;
}
html.dark-mode .attach-action-sheet{
    background:#182238!important;
    color:#e9edf7!important;
    border-color:#2b354b!important;
}
html.dark-mode .attach-action-sheet .attach-action-handle{background:#53627d!important;}
html.dark-mode .attach-action-sheet .message-action-preview{
    background:#202c43!important;
    color:#e9edf7!important;
}
html.dark-mode .attach-action-sheet .message-action-preview strong{color:#f3f6fc!important;}
html.dark-mode .attach-action-sheet .message-action-preview span{color:#aeb8cb!important;}
html.dark-mode .attach-action-sheet .attach-action-button{
    background:#202c43!important;
    color:#e9edf7!important;
}
html.dark-mode .attach-action-sheet .attach-action-button i{color:#9baaff!important;}
html.dark-mode .attach-action-sheet .attach-action-button.cancel{
    background:#29344a!important;
    color:#c1cadb!important;
}
html.dark-mode .message-audio{
    color-scheme:dark;
}
html.dark-mode .message-row.me .message-audio{
    filter:invert(1) hue-rotate(180deg)!important;
}
html.dark-mode .header,
html.dark-mode .site-header,
html.dark-mode body.direct-chat-mode .topbar,
html.dark-mode .topbar-inner{background:#121a2a!important;color:#e9edf7!important;}
html.dark-mode .header{border-bottom-color:#2b354b!important;}
html.dark-mode .header-icon,
html.dark-mode .icon-btn,
html.dark-mode .desktop-user-action,
html.dark-mode .site-header-icon,
html.dark-mode body.direct-chat-mode .icon-btn{background:#202c43!important;color:#e9edf7!important;border-color:#2b354b!important;}
html.dark-mode .desktop-nav a{color:#c4cde0!important;}
html.dark-mode .desktop-user-action{color:#e9edf7!important;}
.site-header-icon{position:relative;}
.site-notification-badge{
    position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;
    display:grid;place-items:center;border:2px solid var(--bg,#f5f7fb);border-radius:99px;
    background:#ff5368;color:#fff;font-size:8px;font-weight:800;line-height:1;
}
html.dark-mode .chat-search,
html.dark-mode .chat-tabs,
html.dark-mode .chat-list-item,
html.dark-mode .message-input-wrap{background:#182238!important;color:#e9edf7!important;border-color:#2b354b!important;}
html.dark-mode .chat-list-item strong,
html.dark-mode .chat-list-item .list-top,
html.dark-mode .chat-list-item .list-bottom{color:#e9edf7!important;}
html.dark-mode .chat-list-item .list-bottom span{color:#aeb8cb!important;}
html.dark-mode .chat-tab.active{background:#29365c!important;color:#b9c3ff!important;}
html.dark-mode .chat-tab{color:#aeb8cb!important;}
html.dark-mode .mobile-search,
html.dark-mode .quick-item,
html.dark-mode .moment-card,
html.dark-mode .nearby-card,
html.dark-mode .community-card{background:#182238!important;color:#e9edf7!important;border-color:#2b354b!important;}
html.dark-mode .quick-menu{gap:6px!important;}
html.dark-mode .quick-item{min-height:82px;padding:7px 2px 6px;border-radius:12px;justify-content:flex-start;}
html.dark-mode .quick-item .quick-icon{width:46px!important;height:46px!important;border-radius:14px;}
html.dark-mode .quick-item{font-size:10px!important;font-weight:700;}
html.dark-mode .person-card{
    background:#182238!important;
    border-color:#2b354b!important;
}
html.dark-mode .person-info{background:#182238!important;}
html.dark-mode .person-info strong{color:#f3f6fc!important;}
html.dark-mode .person-info span{color:#aeb8cb!important;}
html.dark-mode .person-info small{color:#8290aa!important;}
html.dark-mode .firebase-greet,
html.dark-mode .greet{background:#29365c!important;color:#b9c3ff!important;}
html.dark-mode .profile-card,
html.dark-mode .section-card,
html.dark-mode .skeleton-card{background:#182238!important;border-color:#2b354b!important;}
html.dark-mode .profile-main{background:#182238!important;}
html.dark-mode .profile-name,
html.dark-mode .section-title h2,
html.dark-mode .detail-copy strong{color:#f3f6fc!important;}
html.dark-mode .profile-username{color:#aebaff!important;}
html.dark-mode .profile-meta .meta-chip{background:#202c43!important;color:#c4cde0!important;}
html.dark-mode .bio{color:#aeb8cb!important;}
html.dark-mode .bio.empty{color:#8290aa!important;}
html.dark-mode .owner-friends-button,
html.dark-mode .secondary-action{background:#29365c!important;color:#b9c3ff!important;}
html.dark-mode .detail-row{background:#202c43!important;border-color:#2b354b!important;}
html.dark-mode .detail-copy small{color:#8290aa!important;}
html.dark-mode .privacy-note{background:#1b294a!important;border-color:#334478!important;}
html.dark-mode .privacy-note strong{color:#e9edf7!important;}
html.dark-mode .privacy-note p{color:#aeb8cb!important;}
html.dark-mode .privacy-setting-row{background:#202c43!important;border-color:#2b354b!important;}
html.dark-mode .privacy-setting-copy strong{color:#f3f6fc!important;}
html.dark-mode .privacy-setting-copy span{color:#aeb8cb!important;}
html.dark-mode .privacy-switch span{background:#46536c!important;}
html.dark-mode .privacy-switch input:checked + span{background:#6075ff!important;}
html.dark-mode .logout-account-button{background:#3a2330!important;border-color:#6a3445!important;color:#ff9aaa!important;}
html.dark-mode .edit-sheet,
html.dark-mode .logout-modal{background:#182238!important;color:#e9edf7!important;}
html.dark-mode .sheet-close{background:#202c43!important;color:#f3f6fc!important;}
html.dark-mode .edit-photo{background:#202c43!important;color:#e9edf7!important;}
html.dark-mode .edit-photo-copy strong{color:#f3f6fc!important;}
html.dark-mode .edit-photo-copy span,
html.dark-mode .readonly-note{color:#aeb8cb!important;}
html.dark-mode .input-wrap input,
html.dark-mode .input-wrap select,
html.dark-mode .field textarea{background:#182238!important;color:#f3f6fc!important;border-color:#33405a!important;}

/* Kunci seluruh navbar bawah agar tetap menempel di viewport saat discroll. */
@media (max-width:768px){
  body .bottom-nav,
  body .auth-bottom-nav{
    position:fixed!important;
    z-index:1500!important;
    left:50%!important;
    right:auto!important;
    bottom:0!important;
    width:100%!important;
    max-width:430px!important;
    transform:translateX(-50%)!important;
    transition:none!important;
    animation:none!important;
    will-change:auto!important;
  }

  body .bottom-nav *,
  body .auth-bottom-nav *{
    transition:none!important;
    animation:none!important;
  }

  /* Label memakai metrik font yang sama di semua halaman agar tidak layout-shift. */
  body .bottom-nav .bottom-item,
  body .auth-bottom-nav .bottom-item{
    position:relative!important;
    display:block!important;
    padding:0!important;
    overflow:visible!important;
    font-family:Arial,sans-serif!important;
    font-size:10px!important;
    line-height:12px!important;
    text-align:center!important;
    white-space:nowrap!important;
  }

  body .bottom-nav .bottom-label,
  body .auth-bottom-nav .bottom-label{
    position:absolute!important;
    left:50%!important;
    bottom:3px!important;
    transform:translateX(-50%)!important;
    display:block!important;
    width:max-content!important;
    pointer-events:none!important;
  }

  body .bottom-nav .bottom-item > i,
  body .bottom-nav .bottom-item > .bottom-icon,
  body .bottom-nav .bottom-item > .nav-chat-icon,
  body .auth-bottom-nav .bottom-item > i,
  body .auth-bottom-nav .bottom-item > .bottom-icon{
    position:absolute!important;
    top:4px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    margin:0!important;
    flex:0 0 28px!important;
    width:32px!important;
    height:28px!important;
    display:grid!important;
    place-items:center!important;
  }

  body .bottom-nav .center-button,
  body .auth-bottom-nav .center-button{
    position:absolute!important;
    top:0!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    margin:0!important;
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
  }
}

/* Jaga lebar layout tetap sama walau halaman memiliki scrollbar atau tidak. */
html{
    scroll-behavior:auto!important;
    scrollbar-gutter:stable!important;
    overflow-y:scroll!important;
}