* {
    scrollbar-width: none !important; 
    -ms-overflow-style: none !important; 
}

*::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
    display: none !important;
    background: transparent !important;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb {
    background: transparent !important;
    border: none !important;
}

:root {
    --desktop-width: 480px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    --bg-color: #121212;
    --card-bg: #1e1e1e;

    --text-primary: #ffffff;
    --text-secondary: #aaaaaa;

    --accent-color: #DA5D03; 
    --accent-gradient: linear-gradient(135deg, #DA5D03, #B34002);

    --danger-color: #ff453a;
    --success-color: #32d74b;
    --border-color: rgba(255, 255, 255, 0.08);
    --nav-height: 60px;
    --app-zoom: 1;

    --ambient-color: rgba(218, 93, 3, 0.15); 
}

.ui-icon {
    width: 24px;
    height: 24px;
    display: block;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: color 0.2s ease, stroke 0.2s ease, fill 0.2s ease;
}

.nav-icon .ui-icon,
.item-icon .ui-icon {
    width: 26px;
    height: 26px;
    margin: 0 auto;
}

body.theme-guest {

    --accent-color: #8A2BE2 !important; 

    --accent-gradient: linear-gradient(135deg, #8A2BE2, #6A1B9A) !important;
}

body.theme-guest .nav-item.active .nav-icon,
body.theme-guest .nav-item.active .nav-label {
    color: var(--accent-color) !important;
}

body.theme-guest .switch input:checked + .slider {
    background-color: var(--accent-color) !important;
}

* {
    -webkit-tap-highlight-color: transparent; 
    user-select: none; 
    -webkit-user-select: none;
}
html {
    background-color: #121212 !important;
    color-scheme: dark; 

    position: static; 

    width: 100%;
    height: 100vh !important;
    overflow: hidden;
    overscroll-behavior-y: none;
    overscroll-behavior-x: auto;
}

body {
    background-color: #121212 !important;

    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;

    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    overflow: hidden;
    overscroll-behavior-y: none;
    overscroll-behavior-x: auto;
    -webkit-tap-highlight-color: transparent;
    padding-bottom: 0;

    -webkit-text-size-adjust: 100%; 

}

@keyframes breathing-glow {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }
    100% {
        opacity: 1.2; 
        transform: scale(1.05); 
    }
}

body.os-android.keyboard-open .bottom-nav {
    display: none !important;
}

body.os-android.keyboard-open .view:not(#view-chat-conversation) {

    padding-bottom: 0 !important;
}

body.os-android #view-global-map,
body.os-android #view-map-picker {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: var(--app-height, 100vh) !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 6000 !important;
    overflow: hidden !important;
}

body.os-android:not(.map-active) #view-global-map,
body.os-android:not(.map-mode) #view-map-picker {
    display: none !important;
    opacity: 0 !important;
    z-index: -9999 !important;
}

body.os-android.keyboard-open .gh-search-box {
    pointer-events: auto !important;
}

.view > *:not(.glass-sticky-header):not(.nav-overlay-btn):not(.spy-floating-btn):not(.map-choice-sheet) {
    zoom: var(--app-zoom);
}

@supports not (zoom: 1) {
    body {
        transform: scale(var(--app-zoom));
        transform-origin: top center;
        width: 100%;
        height: 100%;
        overflow-y: auto; 
    }
}

@supports not (zoom: 1) {
    body {
        transform: scale(var(--app-zoom));
        transform-origin: top center;

        width: 100%;
        height: 100%;
        overflow-y: auto; 
    }
}

body.os-android {
    overscroll-behavior-y: none;
}

body.os-ios {
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
}

body.os-desktop {
    --safe-top: 0px;
    --safe-bottom: 20px;

    width: 100%;
    max-width: var(--desktop-width);
    height: 100vh; 
    margin: 0 auto;
    position: relative;
    overflow: hidden; 

    border-left: 1px solid #333;
    border-right: 1px solid #333;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

body.os-desktop #view-create-event,       
body.os-desktop #view-object-modal,       
body.os-desktop #view-sync-platforms,     
body.os-desktop #view-sync-setup,         
body.os-desktop #view-obj-desc-modal,     
body.os-desktop #view-obj-instr-modal,    
body.os-desktop #view-contract-full,      
body.os-desktop #view-photo-manager,      
body.os-desktop #view-amenities-modal,    
body.os-desktop #view-currency-modal,     
body.os-desktop #view-scale-modal,        
body.os-desktop #view-language-modal,     
body.os-desktop #view-country-picker,      
body.os-desktop #view-chat-conversation,
body.os-desktop #guest-spotlight-overlay {

    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    width: 100% !important;
    max-width: var(--desktop-width) !important;

    border-left: 1px solid #333;
    border-right: 1px solid #333;

    scrollbar-width: thin;
    box-sizing: border-box;
}

body.os-desktop .view.overlay-modal,
body.os-desktop .spy-floating-btn,
body.os-desktop #view-login-modal,
body.os-desktop #view-chat-conversation,
body.os-desktop #view-photo-viewer,
body.os-desktop #view-qr-fullscreen {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: var(--desktop-width) !important;
}

body.os-desktop .bottom-nav {
    position: absolute !important; 
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    max-width: 100% !important; 

    height: 70px !important; 
    padding-bottom: 0 !important; 

    border-radius: 0 !important; 
    transform: none !important;  
    margin: 0 !important;

    border-top: 1px solid #333 !important;
    background: #111 !important; 
}

body.os-desktop .view {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    height: 100% !important;
    min-height: auto !important;

    overflow-y: auto !important; 
    padding-bottom: 80px !important;

    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}

body.os-desktop .floating-fab {
    left: 50% !important;
    right: auto !important;

    margin-left: 164px !important; 
    transform: none !important;
    position: fixed !important; 
}
body.os-desktop .floating-fab:active {
    transform: scale(0.9) !important;
}

body.os-desktop .spy-floating-btn {
    transform: translateX(-50%) !important;
    margin-left: -170px !important; 
}
body.os-desktop .view.overlay-modal

body.os-desktop::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}
body.os-desktop::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

html:has(body.os-desktop) {
    background-color: #0d0d0d; 
    background-image: radial-gradient(#1a1a1a 1px, transparent 1px);
    background-size: 20px 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start; 
}
html:has(body.map-active),
html:has(body.map-mode) {
    overscroll-behavior-x: none !important;
}

.flex-center { display: flex; align-items: center; justify-content: center; }
.hidden { display: none !important; }
.info-a { font-size: 14px; color: var(--text-secondary); line-height: 1.4; }

#social-info-content div[style*="background: rgba(51, 144, 236, 0.05)"] {
    border-radius: 24px !important;
    padding: 14px 18px !important;
}
.info-hint-box {
    background: rgba(255, 255, 255, 0.03); 
    border: 1px dashed rgba(255, 255, 255, 0.15); 
    padding: 12px 14px;
    margin-top: 10px;
    margin-bottom: 16px;
    font-size: 12px;
    line-height: 1.5;
    color: #aaa; 
    transition: opacity 0.2s;

    border-radius: 24px !important;
}

.info-hint-box b {
    color: #ddd;
    font-weight: 600;
}

.info-q { font-weight: 600; font-size: 16px; }
.info-row { padding: 16px 0; border-bottom: 1px solid rgba(128,128,128,0.2); display: flex; flex-direction: column; gap: 4px; }
.info-row:last-child { border-bottom: none; }
.section-title {
    font-size: 20px; font-weight: 800; margin: 20px 0 10px 4px; letter-spacing: 0.5px;
}
.text-accent { color: var(--accent-color); }
.text-danger { color: var(--danger-color); }

.action-btn-large {
    background: var(--card-bg); 
    color: white;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px; 
    font-size: 16px; 
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s;
}
.action-btn-large:active { transform: scale(0.98); background: #2c2c2e; }

.auth-btn-glow {
    height: 56px;
    border-radius: 16px;
    font-size: 17px;
    position: relative;
    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background-clip: padding-box !important;

    box-shadow: 
        inset 0 0 0 2px #000000, 
        0 4px 20px rgba(255, 107, 0, 0.3) !important;
}

.auth-btn-glow::after {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: rotate(45deg);
    animation: btnShine 3s infinite;
}

.btn-add-note {
    width: 100%; 
    padding: 14px; 
    border: 1px dashed #444;
    color: #888; 
    font-size: 13px; 
    cursor: pointer; 
    margin-bottom: 16px;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 6px;
    background: transparent;

    border-radius: 24px !important; 
}
.btn-add-note:active { background: rgba(255,255,255,0.05); }
.btn-cancel {
    background: rgba(255, 69, 58, 0.1);
    color: #ff453a;
    border: 1px solid rgba(255, 69, 58, 0.3);
}
.btn-cancel:active { background: rgba(255, 69, 58, 0.2); }

.btn-danger-glow {
    background: linear-gradient(135deg, #ff453a, #d63a30);
    box-shadow: 0 4px 15px rgba(255, 69, 58, 0.4);
    color: white;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform 0.1s;
}
.btn-danger-glow:active {
    transform: scale(0.98);
    box-shadow: 0 2px 10px rgba(255, 69, 58, 0.3);
}

.btn-disabled-dim {
    opacity: 0.4 !important;
    pointer-events: none !important;
    filter: grayscale(100%);
    background: #333 !important; 
    box-shadow: none !important;
}

.btn-highlight-share {
    background: rgba(255, 107, 0, 0.15) !important; 
    border: 1px solid var(--accent-color) !important; 
    color: var(--accent-color) !important; 
    font-weight: 700 !important;
    box-shadow: 0 0 15px rgba(255, 107, 0, 0.15); 
    transition: transform 0.1s, box-shadow 0.2s;
}
.btn-highlight-share:active {
    background: rgba(255, 107, 0, 0.25) !important;
    transform: scale(0.98);
    box-shadow: none;
}

.modal-footer-row {
    display: flex;
    align-items: center;
    gap: 10px; 
    width: 100%;
    margin-top: 10px; 
    flex-shrink: 0;   
}

.btn-icon-square {
    width: 54px !important;  
    height: 54px !important; 
    flex-shrink: 0;          

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 24px !important;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;

    background: rgba(255, 69, 58, 0.1);
    border: 1px solid rgba(255, 69, 58, 0.3);
    color: #ff453a;
}

.btn-icon-square:active {
    transform: scale(0.95);
    background: rgba(255, 69, 58, 0.2);
}

.btn-icon-square svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.btn-icon-only {

    width: 44px !important;       
    min-width: 44px !important;   
    height: 36px !important;      

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 22px !important;   
    line-height: 1 !important;

    flex-shrink: 0 !important;
}

.btn-icon-input {

    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0; 

    border-radius: 12px !important; 

    border: none !important;
    cursor: default;

}

#legal-info-content div[style*="background: rgba(50, 215, 75, 0.05)"] {

    border-radius: 24px !important;
    padding: 14px 18px !important;
    border: 1px solid rgba(50, 215, 75, 0.15) !important;
}

#sec-icon-email {
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border-radius: 12px !important; 
}

.btn-icon-input:active {
    background: var(--accent-color);
    color: white;
}
.btn-move {
    background: rgba(255, 255, 255, 0.1); 
    border: none; 
    color: white; 
    font-size: 12px; 
    width: 32px; 
    height: 32px;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer;

    border-radius: 12px !important;
}
.btn-move:active { background: var(--accent-color); }
.btn-save {
    background: rgba(50, 215, 75, 0.1);
    color: #32d74b;
    border: 1px solid rgba(50, 215, 75, 0.3);
}
.btn-save:active { background: rgba(50, 215, 75, 0.2); }

.btn-sort-active {
    background: var(--accent-color) !important; 
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 12px rgba(255, 107, 0, 0.5) !important;
    transition: all 0.2s ease;
}

.btn-unban-small {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
}
.btn-unban-small:active {
    background: rgba(50, 215, 75, 0.2);
    color: #32d74b;
    border-color: #32d74b;
}

.dev-btn {
    padding: 8px 12px; 
    font-size: 11px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: 0.2s;

    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;

    color: #fff !important;
    border-radius: 14px !important;
}
.dev-btn:active { background: rgba(255,255,255,0.1); color: white; border-style: solid;}

.secondary-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px; 
    font-weight: 600;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    color: #fff !important;

    border-radius: 24px !important; 
}
.secondary-button:active {
    background: rgba(255, 255, 255, 0.2) !important;
}

.secondary-button.btn-filled {
    background: rgba(50, 215, 75, 0.05) !important;
    border: 1px solid rgba(50, 215, 75, 0.4) !important;
    color: #fff !important;
}

.secondary-button.btn-filled::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #32d74b;
    border-radius: 50%;
    margin-left: 8px;
    box-shadow: 0 0 5px rgba(50, 215, 75, 0.6);
}

.floating-fab {
    position: fixed; 
    bottom: 90px; 
    right: 20px;
    width: 56px; 
    height: 56px; 
    border-radius: 50%;

    background: var(--accent-gradient); 
    color: white;

    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 28px; 

    cursor: pointer; 
    z-index: 100; 
    transition: transform 0.2s;

    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background-clip: padding-box !important;

    box-shadow: 
        inset 0 0 0 2px #000000, 
        0 4px 20px rgba(255, 107, 0, 0.4) !important;
}

.floating-fab:active { 
    transform: scale(0.90); 
}

.gold-btn {
    background: linear-gradient(135deg, #BF953F 0%, #B38728 100%) !important;
    color: #000 !important; 
    font-weight: 800 !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(179, 135, 40, 0.4) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gold-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 10px rgba(179, 135, 40, 0.3) !important;
}

.link-arrow-btn {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.9;
}
.link-arrow-btn:active { opacity: 0.6; }
.link-arrow-symbol { font-size: 14px; margin-top: -1px; } 

.main-button {
    width: 100%; 
    padding: 16px; 
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px; 

    border-radius: 24px !important; 

    background: var(--accent-gradient); 
    color: white;
    font-size: 17px; 
    font-weight: 700; 

    border: 1px solid rgba(255, 255, 255, 0.15) !important;

    background-clip: padding-box !important;

    cursor: pointer;
    outline: none;
    display: block; 
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 12px;
    margin-bottom: 12px;

    transition: transform 0.1s;

    box-shadow: 
        inset 0 0 0 2px #000000, 
        0 4px 15px rgba(255, 107, 0, 0.3) !important;
}

.main-button:active { 
    transform: scale(0.98); 
}

.nav-overlay-btn {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5); 
    backdrop-filter: blur(10px);    
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    z-index: 50; 
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.15);
    transition: transform 0.1s;
}
.nav-overlay-btn:active {
    transform: scale(0.95);
    background: rgba(0, 0, 0, 0.7);
}

.small-action-btn {
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px !important;

    border-radius: 24px !important;

    cursor: pointer;
    transition: 0.2s;
    text-transform: uppercase;
}

.spy-floating-btn {
    position: fixed;
    bottom: 90px; 
    left: 16px;   

    background: #ff453a;
    color: white;
    padding: 8px 16px;
    border-radius: 30px;

    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;

    box-shadow: 0 4px 15px rgba(255, 69, 58, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.8);

    z-index: 10000;
    cursor: pointer;
    display: none; 

    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.u-go-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3390ec; 
    color: white;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0; 
    box-shadow: 0 4px 10px rgba(51, 144, 236, 0.3);

    padding: 0;
    margin: 0;
    margin-left: 8px;
}
.u-go-btn:active {
    transform: scale(0.95);
    opacity: 0.8;
}

.u-go-btn-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05); 
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
}
.u-go-btn-small:active { background: rgba(255,255,255,0.1); }

.char-counter {
    font-size: 10px;
    color: #666;
    text-align: right;
    margin-top: 4px;
    margin-right: 4px;
    transition: color 0.2s;
}

.char-counter.limit-near {
    color: #ffd700;
}

.char-counter.limit-reached {
    color: #ff453a;
    font-weight: 700;
}

.custom-select-trigger {
    width: 100%;
    height: 54px !important;
    box-sizing: border-box !important;

    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;

    border-radius: 24px !important;

    padding: 0 16px !important;
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}
.custom-select-trigger:active {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-color);
}

.date-input-wrapper { 
    flex: 1; 
    position: relative; 
    height: 54px !important; 

    background: transparent !important; 
    border: none !important;
    box-shadow: none !important;

    border-radius: 24px;
    overflow: hidden;
}

.date-row { 
    display: flex; 
    gap: 12px; 
    width: 100%; 
    position: relative;
}

.dnd-time-input {
    background: #1e1e1e; 
    border: 1px solid #333;
    border-radius: 12px;
    color: white;
    font-size: 22px; 
    font-weight: 700;
    padding: 8px 4px; 
    width: 120px; 
    box-sizing: border-box; 
    text-align: center;
    outline: none;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 1px;

    appearance: none;           
    -webkit-appearance: none;   
    -moz-appearance: none;      

    position: relative; 
}

.dnd-time-input:focus {
    border-color: var(--accent-color);
    background: #252528;
}

.dnd-time-input::-webkit-datetime-edit {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.dnd-time-input::-webkit-datetime-edit-fields-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.dnd-time-input::-webkit-date-and-time-value {
    text-align: center !important; 
    margin: 0 !important;
}

.floating-placeholder {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: #888;
    font-size: 16px;
    pointer-events: none; 
    z-index: 3; 
    transition: right 0.2s ease;
}

.date-input-wrapper:has(input[type="time"]:not([style*="display: none"])) .floating-placeholder {
    right: 134px !important;
}

.form-group { margin-bottom: 16px; }
.form-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; display: block; margin-left: 4px; }

.icon-selector-container {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    background: rgba(0, 0, 0, 0.2) !important; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;

    border-radius: 24px !important; 

    padding: 12px !important;
    margin-top: 8px;
    margin-bottom: 16px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    width: 100%;
}

.icon-selector-container::before,
.icon-selector-container::after {
    display: none !important;
}

.icon-selector-container::-webkit-scrollbar {
    height: 4px; 
    display: block; 
    background: transparent; 
}

.icon-selector-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3); 
    border-radius: 10px;

    transition: background 0.2s;
}

.icon-selector-container::-webkit-scrollbar-thumb:active {
    background: var(--accent-color); 
}

.icon-selector-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05); 
    border-radius: 10px;
    margin: 0 12px; 
}

.input-group-row {
    display: flex;
    gap: 12px;
    align-items: center; 
    width: 100%;
}

.input-group-row input {
    flex: 1; 

}

.radio-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: 0.2s;
}

.radio-card:active {
    background: rgba(255,255,255,0.05);
}

.radio-card.selected {
    background: rgba(255, 107, 0, 0.1); 
    border-color: var(--accent-color);
}

.radio-card.selected .radio-circle {
    border-color: var(--accent-color);
}

.radio-card.selected .radio-circle::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--accent-color);
    border-radius: 50%;
}
.radio-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #3a3a3c; transition: .3s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 2px; bottom: 2px; background-color: white; transition: .3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

.styled-date { 
    width: 100%; 
    height: 100% !important; 
    box-sizing: border-box !important;

    background: rgba(0, 0, 0, 0.25) !important; 
    border: 1px solid rgba(255, 255, 255, 0.05) !important; 

    border-radius: 24px !important; 

    color: white; 
    text-align: center; 
    font-size: 16px;
    padding: 0 !important;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    z-index: 2;
    outline: none;

    display: flex;
    align-items: center !important;
    justify-content: center !important;
}

.styled-date::-webkit-datetime-edit {
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.styled-date::-webkit-datetime-edit-fields-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.styled-date::-webkit-date-and-time-value {
    text-align: center !important;
    margin: 0 !important;
}

input[type="date"].styled-date:focus ~ .floating-placeholder,
input[type="date"].styled-date:valid ~ .floating-placeholder {
    display: none !important;
}

.styled-date:invalid::-webkit-datetime-edit { 
    color: transparent !important; 
}

.styled-date:focus::-webkit-datetime-edit { 
    color: #ffffff !important; 
}

.styled-time-input {
    width: 100% !important;
    height: 48px !important;
    padding: 0 !important; 
    text-align: center !important;

    appearance: none !important;
    -webkit-appearance: none !important;

    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 24px !important;
    color: white !important;
    font-size: 16px !important;
    position: relative; 

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.styled-time-input::-webkit-datetime-edit {
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.styled-time-input::-webkit-datetime-edit-fields-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.styled-time-input::-webkit-date-and-time-value {
    text-align: center !important;
    margin: 0 !important;
}

.styled-textarea:focus {
    border-color: var(--accent-color);
    outline: none;
}

.switch { position: relative; display: inline-block; width: 50px; height: 30px; flex-shrink: 0;}
.switch input { opacity: 0; width: 0; height: 0; }

input:checked + .slider { background-color: var(--success-color); }
input:checked + .slider:before { transform: translateX(20px); }

.switch.small {
    position: relative;
    display: inline-block;
    width: 34px; 
    height: 20px; 
}

.switch.small .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #3a3a3c;
    transition: .3s;
    border-radius: 34px;
}

.switch.small .slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.switch.small input { 
    opacity: 0; 
    width: 0; 
    height: 0; 
}

.switch.small input:checked + .slider {
    background-color: #32d74b;
}

.switch.small input:checked + .slider:before {
    transform: translateX(14px);
}

input, select, .country-trigger, .custom-select-trigger {
    width: 100%;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    height: 54px !important; 
    border-radius: 24px !important; 
    padding: 0 16px !important;
    display: flex;
    align-items: center;
    outline: none;

    font-size: 16px !important;
    font-family: inherit !important;
    font-weight: 500 !important;
}

input::placeholder, textarea::placeholder, .styled-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
    font-weight: 400 !important;
    font-family: inherit !important;
    opacity: 1 !important; 
}

textarea, .styled-textarea {
    width: 100%;
    box-sizing: border-box !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    padding: 16px !important; 
    font-size: 16px;
    font-family: inherit;
    outline: none;
    resize: none;
    border-radius: 20px !important; 
    transition: border-color 0.2s ease, box-shadow 0.2s ease; 
    display: block !important;
    line-height: 1.4 !important;
    min-height: 90px; 
    overflow-y: hidden; 
}

input:focus, select:focus, textarea:focus, .styled-textarea:focus {
    background: rgba(255, 255, 255, 0.08) !important; 
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: none !important; 
    outline: none !important;
}

input, textarea, [contenteditable="true"], .selectable-text {
    user-select: text;
    -webkit-user-select: text;
}

.card {

    background: rgba(30, 30, 30, 0.6) !important;

    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);

    border: 1px solid rgba(255, 255, 255, 0.08) !important; 

    border-radius: 24px !important; 

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 20px;

}    

#view-info .card:first-child {
    border-radius: 24px !important;
    overflow: hidden;

}

.qa-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    padding: 16px;
    margin-bottom: 12px;

    border-radius: 24px !important;
}

#view-qa .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;

}

.card-dimmed, 
.obj-item.disabled-state {
    opacity: 0.5;
    background: #181818 !important; 
    transition: all 0.3s ease;
}

.checklist-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.checklist-item {
    display: flex; align-items: center; gap: 10px; padding: 10px; 
    background: rgba(255,255,255,0.03); border-radius: 8px; margin-bottom: 6px;
}
.cl-add-btn {
    background: var(--accent-color);
    border: none;
    width: 48px !important; 
    height: 48px !important; 
    color: white;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0; 

    border-radius: 24px !important; 

    padding: 0 !important; 
    transition: transform 0.1s;
}

.cl-add-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.cl-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    flex-shrink: 0;
}
.cl-item.done .cl-checkbox {
    background: var(--success-color);
    border-color: var(--success-color);
}

.cl-item.done .cl-checkbox::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: 900;
}

.cl-delete {
    color: #ff453a;
    font-size: 18px;
    padding: 4px;
    cursor: pointer;
    opacity: 0.6;
}
.cl-delete:active { opacity: 1; }
.cl-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px dashed #444 !important;
    padding: 12px 16px !important;
    color: white;
    font-size: 14px;
    outline: none;

    border-radius: 24px !important;

    height: 48px !important;
    box-sizing: border-box !important;
}
.cl-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 16px; 
    border: 1px solid var(--border-color);
    transition: 0.2s;

    border-radius: 24px !important; 
    margin-bottom: 8px !important; 
}

.cl-item:last-child {
    margin-bottom: 0 !important;
}

.cl-item.done {
    opacity: 0.5;
    background: rgba(50, 215, 75, 0.05);
    border-color: rgba(50, 215, 75, 0.2);
}
.cl-item.done .cl-checkbox::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: 900;
}

.cl-item.done .cl-text {
    text-decoration: line-through;
    color: #aaa;
}
.cl-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    cursor: pointer;
}
.cl-text {
    font-size: 14px;
    color: white;
    word-break: break-word;
}

.doc-btn { 
    background: rgba(255,255,255,0.05); 
    color: var(--text-primary); 
    border: 1px solid var(--border-color);
    padding: 12px; 
    font-size: 13px; 
    font-weight: 600; 
    cursor: pointer;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 6px;

    border-radius: 24px !important; 
}
.doc-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }

.group-header {
    font-size: 11px; 
    text-transform: uppercase; 
    color: var(--accent-color); 
    font-weight: 800; 
    margin: 16px 0 8px 4px;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 4px;
}

.history-row {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.h-amount {
    font-size: 16px;
    font-weight: 700;
    color: #ffd700; 
}
.h-date {
    font-size: 11px;
    color: #888;
    font-family: monospace;
}
.h-desc {
    font-size: 14px;
    font-weight: 600;
    color: white;
}
.h-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.icon-option {
    flex-shrink: 0;
    width: 70px; 
    height: 64px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    gap: 2px; 
    background: rgba(255,255,255,0.05);

    border-radius: 16px !important;

    border: 2px solid transparent;
    transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.icon-option:active { transform: scale(0.95); }

.icon-option.selected {
    border-color: var(--accent-color);
    background: rgba(255, 107, 0, 0.15);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.2);
}

.icon-option.selected .icon-option-label {
    color: white;
}

.icon-option-emoji {
    font-size: 24px;
    line-height: 1;
}

.icon-option-label {
    font-size: 10px;
    color: #888;
    font-weight: 500;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
    max-width: 100%;
    padding: 0 4px;
}

.ubs-icon-option {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;          
    min-width: 0;                 
    padding: 8px 4px !important;  
    box-sizing: border-box;
}

.ubs-icon-option .icon-option-label {
    width: 100%;
    text-align: center;
}

.notif-card {
    display: flex;
    gap: 12px;
    padding: 14px;
    margin-bottom: 8px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(5px);
    position: relative;
    overflow: hidden;
    transition: transform 0.1s;
}

.notif-card:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.06);
}

.notif-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #888; 
}
.notif-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.notif-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.notif-icon-box {
    font-size: 20px;
    min-width: 24px;
    padding-top: 2px;
}
.notif-msg {
    font-size: 13px;
    color: #ccc;
    line-height: 1.4;
}
.notif-time {
    font-size: 10px;
    color: #666;
    white-space: nowrap;
    margin-left: 8px;
}
.notif-title {
    font-size: 14px;
    font-weight: 700;
    color: white;
}

.notif-type-error::before { background: #ff453a; box-shadow: 2px 0 10px rgba(255, 69, 58, 0.3); }
.notif-type-money::before { background: #007aff; box-shadow: 2px 0 10px rgba(0, 122, 255, 0.3); }
.notif-type-success::before { background: #32d74b; box-shadow: 2px 0 10px rgba(50, 215, 75, 0.3); }
.notif-type-warning::before { background: #ffd700; box-shadow: 2px 0 10px rgba(255, 215, 0, 0.3); }

.notif-unread {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.15);
}

.obj-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 10px;
    margin-bottom: 20px;
}

.obj-actions-grid button {
    width: 100%; 
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px; 
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    transition: background 0.2s;
}

.obj-actions-grid button:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.98);
}

.obj-actions-grid .btn-highlight-share {
    background: rgba(255, 107, 0, 0.15) !important;
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}
.obj-address { font-size: 12px; color: var(--text-secondary); }

.obj-client-name {
    font-size: 12px; color: #888; margin-top: 2px;
    display: block; 
}
.obj-icon-box { 
    width: 50px; 
    height: 50px; 
    background: rgba(255, 107, 0, 0.1); 

    border-radius: 16px !important; 

    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 24px; 
    color: var(--accent-color); 
    flex-shrink: 0;
}

.obj-info {

    flex: 1;
    min-width: 0; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden; 
}

.obj-item {
    display: flex; 
    align-items: center; 
    gap: 12px;
    padding: 12px; 
    margin-bottom: 10px;
    position: relative; 
    overflow: hidden;

    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(5px);

    border-radius: 24px !important; 

    transition: background 0.2s, transform 0.1s;
}

.obj-item:active {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: scale(0.98);
}
.obj-item.disabled-state {
    opacity: 0.5;
    background: #181818 !important; 
    transition: all 0.3s ease;
}

.obj-select-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background 0.2s;
    background: transparent; 
}

.os-left-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    overflow: hidden; 
}
.obj-select-item:active {
    background: rgba(255, 255, 255, 0.05);
}
.obj-select-item:last-child {
    border-bottom: none;
}

.obj-select-item.selected {
    background: transparent; 
}

.obj-select-item.selected .os-check {
    opacity: 1;
}

.obj-status { 
    font-size: 10px; padding: 4px 8px; border-radius: 100px; font-weight: 700; text-transform: uppercase;
}

.obj-switch-wrapper {
    display: flex;
    align-items: center;
    margin-right: 8px; 
    z-index: 50;

    flex-shrink: 0;
}
.obj-tab { 
    flex: 1; text-align: center; padding: 14px 0; 
    font-size: 13px; font-weight: 700; color: #666; text-transform: uppercase; cursor: pointer;
    border-bottom: 2px solid transparent; transition: 0.3s;
}
.obj-tab.active { color: white; border-bottom-color: var(--accent-color); }
.obj-tabs { display: flex; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 16px; }

.obj-title { 
    font-weight: 700; 
    font-size: 16px; 
    margin-bottom: 4px; 

    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

.os-detail {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.os-check {
    color: var(--accent-color);
    font-size: 18px;
    font-weight: 700;
    opacity: 0; 
    transition: opacity 0.2s;
    margin-left: 10px;
}

.os-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.os-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    overflow: hidden;
}

.os-name {
    font-size: 15px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rating-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.rating-row:last-child { border-bottom: none; }

.reorder-controls {
    display: flex; flex-direction: column; gap: 4px; margin-right: 10px;
}

.reorder-hint {
    background: rgba(255, 107, 0, 0.1); 
    border: 1px solid rgba(255, 107, 0, 0.3);
    color: var(--accent-color);
    padding: 12px 16px;

    border-radius: 24px !important;

    font-size: 12px;
    text-align: center;
    margin-bottom: 12px;
    display: none; 
    animation: fadeIn 0.3s ease-in-out;
    line-height: 1.4;
}
.rr-bar-bg { width: 100%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; }
.rr-bar-fill { height: 100%; background: var(--accent-color); border-radius: 4px; }
.rr-icon { 
    width: 32px; height: 32px; background: rgba(255,255,255,0.05); 
    border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 10px;
}
.rr-info { flex: 1; }
.rr-money { font-size: 13px; font-weight: 700; color: white; }
.rr-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.rr-perc { font-size: 10px; color: #888; }
.rr-val { text-align: right; }

.skeleton {
    background: #252525;
    background-image: linear-gradient(
        90deg, 
        #252525 25%, 
        #333333 50%, 
        #252525 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 12px;
}

.chat-skeleton-bubble {
    background: #252525 !important; 
    box-shadow: none !important;    
    border: none !important;        
    border-radius: 16px !important;
    position: relative;
    overflow: hidden;

    background-image: linear-gradient(
        90deg, 
        #252525 25%, 
        #333333 50%, 
        #252525 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s infinite linear !important;
}

.chat-skeleton-bubble::before,
.chat-skeleton-bubble::after {
    display: none !important;
}

.sk-stat-val {
    width: 80px;
    height: 28px;
    border-radius: 8px;
    margin-top: 4px;
}

.sk-shortcut {
    min-width: 110px;
    height: 110px;
    border-radius: 24px !important; 
    flex-shrink: 0;
}

.sk-card {
    background: #1e1e1e;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.05);
}
.sk-card-content { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sk-card-img { width: 100%; height: 180px; }
.sk-icon { width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0; }
.sk-line-long { height: 14px; width: 70%; }
.sk-line-short { height: 10px; width: 40%; }
.sk-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }

.sk-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 24px; 
}
.sk-right { width: 40px; height: 20px; margin-left: auto; }

.sk-chip {
    width: 90px;
    height: 34px;
    border-radius: 24px !important;
    flex-shrink: 0;
}

.sk-kpi-card {
    height: 95px;
    width: 100%;
    border-radius: 24px !important;
}

.sk-finance-main {
    height: 140px;
    width: 100%;
    border-radius: 24px !important;
}

.sk-event-row {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 10px;

    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
}

.sk-event-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px; 
    margin-right: 12px;
    flex-shrink: 0;
}

.sk-event-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

.sk-event-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin-left: 12px;
    width: 70px; 
}

.sk-object-row {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 10px;

    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
}

.sk-object-icon {
    width: 50px;
    height: 50px;
    border-radius: 16px; 
    margin-right: 12px;
    flex-shrink: 0;
}

.sk-object-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}

.sk-object-switch {
    width: 50px;
    height: 30px;
    border-radius: 15px; 
    margin-left: 12px;
    flex-shrink: 0;
}

.status-badge { 
    display: inline-block; 
    padding: 4px 12px; 
    border-radius: 24px !important; 
    font-size: 10px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    margin-top: 4px;
}
.st-green { background: rgba(50, 215, 75, 0.15); color: #32d74b; }
.st-red { background: rgba(255, 69, 58, 0.15); color: #ff453a; }
.st-yellow { background: rgba(255, 215, 0, 0.15); color: #ffd700; }
.st-gray { background: rgba(255, 255, 255, 0.08); color: #889cb5; border: 1px solid rgba(255, 255, 255, 0.1); }

.switch-click-area {
    padding: 8px;
    margin: -8px; 
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;

    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    pointer-events: auto;

    background: rgba(28, 28, 30, 0.98) !important; 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;

    border-radius: 20px !important;
}

.toast.error { border-left: 4px solid #ff453a; }
.toast.info { border-left: 4px solid #0a84ff; }
.toast.success { border-left: 4px solid #32d74b; }
.toast.visible {
    opacity: 1;
    transform: translateY(0);
}

.toast-container {
    position: fixed;

    top: calc(75px + env(safe-area-inset-top, 0px)); 

    left: 50%;
    transform: translateX(-50%);

    z-index: 22000 !important; 
    width: 90%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    pointer-events: none; 
}
.toast-icon { font-size: 18px; }
.toast-msg { flex: 1; line-height: 1.4; }
.user-avatar { width: 40px; height: 40px; border-radius: 50%; background: #333; display:flex; align-items:center; justify-content:center; font-size: 20px;}
.warning-banner {
    background: rgba(255, 69, 58, 0.15); 
    border: 1px solid rgba(255, 69, 58, 0.3);
    padding: 12px; 
    margin-bottom: 16px; 
    color: #ff453a; 
    font-size: 13px; 
    line-height: 1.4; 
    display: none;

    border-radius: 24px !important;
}

.bottom-nav {
    position: fixed;

    bottom: 10px !important;
    left: 50%;
    transform: translateX(-50%);

    width: 90%;
    max-width: 400px;
    height: 70px !important;

    border-radius: 35px !important;
    background: rgba(30, 30, 30, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);

    display: flex;
    justify-content: space-evenly;
    align-items: center;
    z-index: 1000;
    padding-bottom: 0;
    will-change: transform;

    transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) !important;
}

body.os-ios .bottom-nav {

    bottom: max(20px, calc(env(safe-area-inset-bottom) - 10px)) !important;
}

.nav-fab {

    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    border-radius: 50% !important;

    transform: none;

    background: var(--accent-gradient) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    background-clip: padding-box !important;

    box-shadow: inset 0 0 0 2px #000000, 0 4px 15px rgba(218, 93, 3, 0.4) !important;

    z-index: 5 !important;
    opacity: 1 !important;
    color: white !important;
    text-shadow: none !important;

    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s !important;

    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-fab .nav-icon {
    margin: 0 !important;
    color: white !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-fab .nav-icon svg {
    width: 30px !important;
    height: 30px !important;
}

.nav-fab:active {
    transform: scale(0.92) !important; 
    box-shadow: inset 0 0 0 2px #000000, 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

body.theme-guest .nav-fab {
    box-shadow: inset 0 0 0 2px #000000, 0 4px 15px rgba(138, 43, 226, 0.4) !important;
}

.nav-fab.hover-state {
    transform: scale(1.05) !important;
    filter: none !important;
}

.bottom-nav.is-interacting .nav-fab {
    transform: scale(0.95) !important;
    opacity: 0.8 !important;
    transition: all 0.2s ease-out;
}

.nav-glass-pill {
    position: absolute;
    top: 50%;
    left: 0;

    height: calc(100% - 10px); 
    width: 60px;

    transform: translateY(-50%);

    background: radial-gradient(
        circle at center, 
        rgba(255, 255, 255, 0.08) 0%,   
        rgba(255, 255, 255, 0.01) 60%,  
        rgba(0, 0, 0, 0.05) 100%        
    ) !important;

    backdrop-filter: blur(20px) saturate(180%) contrast(1.1) brightness(1.2); 
    -webkit-backdrop-filter: blur(20px) saturate(180%) contrast(1.1) brightness(1.2);

    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4), 
        inset 0 0 20px rgba(255, 255, 255, 0.05),
        inset 0 -2px 5px rgba(0, 0, 0, 0.1),      
        0 8px 20px rgba(0, 0, 0, 0.3);          

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;

    z-index: 0; 
    pointer-events: none; 

    transition: width 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2), 
                transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2),
                opacity 0.2s,
                box-shadow 0.2s;

    will-change: transform, width;
    transform-origin: center center; 
}

.nav-glass-pill.dragging {
    transition: none !important; 

    background: radial-gradient(
        circle at center, 
        rgba(255, 255, 255, 0.12) 0%, 
        rgba(0, 0, 0, 0.1) 100%
    ) !important;

    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 0 10px rgba(255, 255, 255, 0.1),
        0 5px 15px rgba(0, 0, 0, 0.4);
}

.bottom-nav.is-sliding {
    cursor: grabbing;
}

.nav-item.hover-state {
    transform: scale(1.15) translateY(-5px) !important; 
    opacity: 1 !important;
    z-index: 10;
}

.nav-item.hover-state .nav-icon,
.nav-item.hover-state .nav-label {
    color: var(--accent-color) !important;

    text-shadow: 0 0 15px var(--accent-color);
    filter: drop-shadow(0 0 5px var(--accent-color));

    transition: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.bottom-nav.is-interacting .nav-item:not(.hover-state) {
    transform: scale(0.9) !important; 
    opacity: 0.5 !important;          
    transition: all 0.2s ease-out;
}

.bottom-nav.is-interacting .nav-item:not(.hover-state) .nav-icon,
.bottom-nav.is-interacting .nav-item:not(.hover-state) .nav-label {
    color: #ffffff !important; 
    text-shadow: none !important;
    filter: none !important;
}

.nav-item.sibling-state {
    transform: scale(0.9);
    opacity: 0.7;
}

.glass-safe-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    height: 100px !important; 

    z-index: 999; 
    pointer-events: none;

    background: transparent !important;

    pointer-events: auto !important; 
    touch-action: none !important; 
}

.glass-safe-area::before {
    content: '';
    position: absolute;

    top: 2px; 
    left: 0; right: 0; bottom: 0;

    background: rgba(18, 18, 18, 0.70) !important; 
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%) !important;
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%) !important;

}

.glass-sticky-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    display: grid !important;

    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 12px 16px !important;
    box-sizing: border-box !important;
    background: transparent !important;
    pointer-events: none;
}

.glass-sticky-header.with-back {

    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    gap: 12px !important; 

    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;

    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 12px 16px !important; 
    box-sizing: border-box !important;
}

#header-obj-name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-wrap: break-word;
    width: 100%;
}

#header-obj-addr {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    display: block;
}

.glass-sticky-header .header-back-arrow {
    grid-column: 1 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(30, 30, 30, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    display: none; 
    align-items: center;
    justify-content: center;
    pointer-events: auto !important;
    z-index: 10;
}

.glass-sticky-header .header-back-arrow::before {
    content: '' !important; 
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 auto !important; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4M4 12L10 18M4 12L10 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    transform: none !important; 
    -webkit-text-stroke: 0 !important;
}

.glass-sticky-header .glass-title-capsule {
    grid-column: 2 !important;
    justify-self: center !important; 
    width: fit-content !important;
    height: 44px !important;

    padding: 0 20px !important; 
    background: rgba(30, 30, 30, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    pointer-events: auto !important;
    margin: 0 !important; 
}

.glass-sticky-header.with-back .glass-title-capsule {

    grid-column: 2 !important;
    justify-self: start !important;

    width: auto !important; 
    max-width: 100% !important;

    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    min-width: 0 !important; 
}

.glass-sticky-header.with-back .glass-title-capsule > * {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

.glass-sticky-header .header-right-group {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    gap: 8px !important;
    pointer-events: auto !important;
}

.glass-sticky-header .header-icon-btn,
.glass-sticky-header .secondary-button,
.glass-sticky-header .secondary-button-glass {
    position: relative !important; 
    height: 36px !important;     
    min-width: 36px !important;   
    padding: 0 5px !important;    
    font-size: 20px !important;   

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(30, 30, 30, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 18px !important;
    color: white !important;
    pointer-events: auto !important;
}

#view-guest-showcase .glass-sticky-header,
#view-login-modal .glass-sticky-header,
#view-map-picker .glass-sticky-header,
#view-object-details .glass-sticky-header {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
}

#view-guest-showcase .glass-sticky-header {
    position: absolute !important; 
    background: transparent !important; 
    border-bottom: none !important;
    box-shadow: none !important;
}

#view-guest-showcase .glass-sticky-header::before {
    display: none !important;
}

#view-login-modal .glass-sticky-header::before {
    display: none !important;
}

#view-guest-showcase .header-back-arrow {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.header-badge-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 8px;
    height: 8px;
    background: #ff453a;
    border-radius: 10px;
    box-shadow: 0 0 0 2px rgba(30, 30, 30, 1);
    z-index: 10;
    color: white;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: content-box;
    transition: all 0.2s ease;
}

.header-badge-dot:not(:empty) {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    top: -2px;
    right: -4px;
}

.header-hidden .glass-sticky-header {
    opacity: 0 !important;
    pointer-events: none !important;
}

.header-welcome { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }

.logo-main-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--card-bg) !important;
    border: 1px solid var(--border-color) !important;
    padding: 0 16px !important;
    cursor: pointer !important;
    transition: 0.2s !important;

    border-radius: 24px !important; 
}
.logo-main-btn:active { background: rgba(255,255,255,0.05) !important; }

.logo-upload-wrapper {
    display: flex !important;
    align-items: stretch !important; 
    justify-content: space-between !important;
    flex-wrap: nowrap !important;    
    gap: 10px !important;
    width: 100% !important;
    margin-bottom: 20px !important;

    height: 72px !important; 
}

.logo-upload-wrapper .menu-list-btn {
    flex: 1 !important;
    min-width: 0 !important; 
    height: 100% !important; 
    margin: 0 !important;
    padding: 0 16px !important; 

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.logo-upload-wrapper .menu-list-btn > div {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    overflow: hidden !important; 
}

.logo-upload-wrapper span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.menu-arrow {
    margin: 0 !important;
    font-size: 18px !important;
    color: #666 !important; 
    opacity: 0.7 !important;
}

.menu-icon { font-size: 18px; margin-right: 12px; display: inline-block; width: 24px; text-align: center; }
.menu-list-btn {

    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;

    padding: 16px !important;
    margin-bottom: 8px !important;

    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;

    cursor: pointer !important;
    transition: transform 0.1s, background 0.2s !important;
    color: var(--text-primary) !important;
}

.menu-list-btn:active {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: scale(0.98) !important;
}

.menu-list-btn > div:first-child {
    display: flex;
    align-items: center;
    gap: 0; 
}

.nav-icon {
    font-size: 24px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e0e0e0; 
}

.nav-item.active .nav-icon {
    color: var(--accent-color) !important;
}

.nav-item.hover-state .nav-icon {
    color: var(--accent-color) !important;
    filter: drop-shadow(0 0 5px var(--accent-color));
}

.nav-badge {
    position: absolute;
    top: 4px;
    right: 12px; 
    background: #ff453a;
    color: white;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 10;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
}

.nav-item {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    width: 60px;
    height: 60px; 

    position: relative;
    z-index: 2; 

    border-radius: 20px;
    opacity: 0.6; 
    cursor: pointer;

    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nav-item:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.1);
}

.nav-item.active {
    opacity: 1;
    color: #ffffff; 
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3); 
}

.nav-item.active .nav-label {
    color: var(--accent-color); 
    font-weight: 700;
}

.nav-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.nav-particle {
    position: fixed; 
    top: 0; 
    left: 0;

    width: 6px; 
    height: 6px;
    background: var(--accent-color); 
    border-radius: 50%;

    pointer-events: none;
    z-index: 9999; 

    transform: translate(-50%, -50%) scale(0);
    opacity: 0;

    will-change: transform, opacity;
}

@media (max-width: 400px) {

    #scale-opt-xlarge {
        display: none !important;
    }

    .overlay-card {
        max-height: 85vh !important; 
        padding: 16px !important;
    }

    .overlay-title {
        font-size: 18px !important;
    }

    #amenities-grid {
        flex: 1 !important;
        overflow-y: auto !important;
        display: block !important;
        margin-bottom: 10px !important; 
        padding-right: 4px !important;
    }
}

.chart-container { position: relative; height: 220px; width: 100%; margin-bottom: 20px; }

.dash-forecast-icon {
    font-size: 12px !important; 
    margin-top: 1px;
}

.dash-forecast-label {
    color: #888 !important; 
    font-weight: 500 !important;
}

.dash-forecast-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 24px !important; 

    padding: 4px 12px; 
    margin-top: 8px;

    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    letter-spacing: normal !important;
}

.dash-forecast-val {
    color: #ffd700 !important; 
    font-weight: 700 !important;
    margin-left: 2px;
}
.filter-chip {
    background: rgba(255,255,255,0.05); 
    border: 1px solid var(--border-color);
    color: #888; 
    padding: 8px 16px; 

    border-radius: 24px !important; 

    font-size: 13px; 
    font-weight: 600;
    white-space: nowrap; 
    cursor: pointer; 
    transition: 0.2s; 
    flex-shrink: 0;
}

.filter-chip.active {
    background: var(--accent-color) !important; 
    color: white !important; 

    border: 1px solid rgba(255, 255, 255, 0.15) !important;

    background-clip: padding-box !important;

    box-shadow: 

        inset 0 0 0 2px #000000, 

        0 2px 8px rgba(255, 107, 0, 0.25) !important;
}

.filter-scroll {
    display: flex; 
    gap: 8px; 
    overflow-x: auto; 
    padding-bottom: 12px; 
    margin-bottom: 16px;

    -ms-overflow-style: auto; 
    scrollbar-width: thin;
}

.filter-scroll::-webkit-scrollbar {
    height: 4px;
    display: block;
}
.filter-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    margin: 0 4px;
}
.filter-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}
.filter-scroll::-webkit-scrollbar-thumb:active {
    background: var(--accent-color);
}

.ic-icon-box {
    width: 40px; height: 40px;
    background: rgba(80, 167, 234, 0.2);
    color: #50a7ea;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.ic-text { font-size: 12px; color: #aaa; line-height: 1.4; }
.ic-title { font-size: 14px; font-weight: 700; color: #50a7ea; margin-bottom: 4px; }
.ic-value { font-size: 13px; font-weight: 600; color: white; margin-bottom: 4px; }

.insight-card {
    background: rgba(80, 167, 234, 0.1); 
    border: 1px solid rgba(80, 167, 234, 0.3);
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;

    border-radius: 24px !important; 
}

.month-row {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 12px; 
    border: 1px solid transparent; 
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: 0.2s;
    cursor: pointer; 

    border-radius: 24px !important; 
}
.month-row:active { transform: scale(0.98); background: rgba(255,255,255,0.02); }
.month-row:last-child { border-bottom: none; }

.month-row:not(.current-month):last-child {
    border-bottom: none;
}

.month-row.current-month {
    background: rgba(255, 107, 0, 0.1); 
    border: 1px solid rgba(255, 107, 0, 0.3);
    border-radius: 12px;
    padding: 12px; 
    margin-bottom: 8px; 
    margin-top: 4px;

    border-bottom: 1px solid rgba(255, 107, 0, 0.3); 
}

.month-row.is-current-calendar {
    background: rgba(255, 107, 0, 0.1); 
    border-color: rgba(255, 107, 0, 0.3);
}

.month-row.selected-stat-month {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid white !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.mr-date { font-size: 14px; font-weight: 600; }
.mr-stats { text-align: right; }
.mr-money { font-size: 14px; font-weight: 700; color: var(--success-color); }
.mr-days { font-size: 11px; color: #666; }

.scm-label { font-size: 11px; color: #888; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; }
.scm-value { font-size: 18px; font-weight: 700; color: white; }
.scm-sub { font-size: 10px; color: #666; margin-top: 4px; }

.scrolling-wrapper {
    display: flex;
    gap: 12px;
    overflow-x: auto;

    padding: 4px 0 12px 0; 
    margin-bottom: 16px;

    -ms-overflow-style: auto;  
    scrollbar-width: thin;  
    scroll-behavior: smooth;
}

.scrolling-wrapper::-webkit-scrollbar {
    height: 4px; 
    display: block; 
}
.scrolling-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05); 
    border-radius: 4px;
    margin: 0 10px; 
}
.scrolling-wrapper::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3); 
    border-radius: 4px;
}
.scrolling-wrapper::-webkit-scrollbar-thumb:active {
    background: var(--accent-color); 
}

.sh-dot {
    position: absolute; top: 10px; right: 10px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--success-color);
    box-shadow: 0 0 5px rgba(50, 215, 75, 0.5);
}
.sh-dot.busy { background: var(--danger-color); box-shadow: 0 0 5px rgba(255, 69, 58, 0.5); }
.sh-icon { font-size: 24px; margin-bottom: 8px; }
.sh-status { font-size: 10px; color: var(--success-color); }
.sh-status.busy { color: var(--danger-color); }

.sh-title { 
    font-size: 12px; 
    font-weight: 600; 
    line-height: 1.3; 
    margin-bottom: 4px; 
    width: 100%; 

    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    line-clamp: 2;         
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    text-overflow: ellipsis;
    word-break: break-word; 
}

.shortcut-card {
    flex-shrink: 0;
    min-width: 110px;
    max-width: 150px; 
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    position: relative;

    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(5px);
    border-radius: 24px !important;

    transition: background 0.2s, transform 0.1s;
}

.shortcut-card:active {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: scale(0.98);
}

.shortcut-highlight {
    border: 2px solid var(--accent-color) !important;
    box-shadow: 0 0 15px rgba(255, 107, 0, 0.4) !important;
    animation: pulseBorder 2s infinite;
    background: rgba(255, 107, 0, 0.05) !important; 
}
.shortcut-highlight .sh-icon, 
.shortcut-highlight .sh-title {
    color: white !important; 
}

#dashboard-shortcuts {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#dashboard-shortcuts::before,
#dashboard-shortcuts::after {
    content: '';
    display: block;
    width: 6px; 
    min-width: 6px;
    flex-shrink: 0;
    pointer-events: none;
}

#custom-popup-msg {
    font-size: 15px;
    color: #e0e0e0;
    line-height: 1.5;
    margin-bottom: 24px;
    text-align: center;
}

.stat-arrow { 
    font-size: 18px; 
    color: var(--accent-color); 
    position: absolute; 
    top: 12px; 
    right: 12px; 
    opacity: 0.8;
}

.stat-box { 
    background: rgba(255, 255, 255, 0.03) !important; 
    padding: 16px; 
    border-radius: 24px !important; 
    text-align: left; 
    border: 1px solid var(--border-color) !important; 
    backdrop-filter: blur(10px);
    position: relative; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 85px;
}
.stat-box {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px);
}
.stat-box.clickable { cursor: pointer; transition: 0.2s; }
.stat-box.clickable:active { transform: scale(0.98); background: rgba(255,255,255,0.05); }

.stat-box-dark {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 14px;
    text-align: center;
}

.stat-info-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    font-weight: 700;
    font-family: serif; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: 0.2s;
}

.stat-info-btn:active {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    transform: scale(0.9);
}

.stat-card-modern {
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;
    padding: 14px; 
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px);

    border-radius: 24px !important; 
}

.stat-card-modern {
    min-width: 0; 
    overflow: hidden;
    position: relative; 
}

.stat-info-icon {
    width: 16px;
    height: 16px;
    min-width: 16px; 
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.5);
    font-size: 10px;
    font-weight: 700;
    font-family: serif;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-left: 4px; 
    transition: 0.2s;
}

.stat-info-icon:active {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-color: white;
}

.scm-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; 
    margin-bottom: 6px;
    min-height: 18px; 
}

.stat-card-modern .scm-label {
    margin-bottom: 0; 
    line-height: 1.2;
    word-break: break-word; 
}

.section-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #888;
    font-size: 10px;
    font-weight: 700;
    font-family: serif;
    cursor: pointer;
    margin-left: 6px;
    transition: 0.2s;
}

.section-info-btn:active {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    transform: scale(1.1);
}
.stat-section-label {
    display: flex;
    align-items: center;

}

.stat-grid-modern {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px;
}
.stat-lbl { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; }

.stat-lbl-main {
    font-size: 13px;
    color: #ccc;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.3;
    max-width: 85%; 
}

.stat-lbl-tiny {
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    font-weight: 700;
}
.stat-progress-bg { background: rgba(255,255,255,0.1); height: 6px; border-radius: 10px; overflow: hidden; margin-top: 8px; }
.stat-progress-fill { height: 100%; background: var(--accent-gradient); border-radius: 10px; }

.stat-val { 
    font-size: 22px; 
    font-weight: 800; 
    color: var(--accent-color); 
    margin: 0;
    letter-spacing: -0.5px;
}
.stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }

.c-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
}
.c-dot.green { background: #32d74b; }
.c-dot.orange { background: var(--accent-color); }
.c-dot.end { background: #5ac8fa; } 
.c-dot.yellow { background: #ffd700; } 
.c-dot.plus { 
    background: transparent; 
    color: white; 
    font-size: 11px; 
    font-weight: 800; 
    width: auto; 
    height: 4px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    line-height: 1; 
    margin-left: 1px;
}

.cal-day {
    aspect-ratio: 1 / 1; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05); 

    border-radius: 16px !important; 

    font-size: 15px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    position: relative;
    border: 2px solid transparent; 
    transition: all 0.2s ease;

    min-height: 0;
    min-width: 0;
    overflow: hidden;
}

.cal-day:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.95);
}

.cal-day.active-circle {
    background: var(--accent-color) !important;
    color: white !important;
    border-radius: 50%; 
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.4); 
    border-color: transparent; 
    z-index: 2;
}

.cal-day.active-circle.is-today {
    background: var(--accent-color) !important;
    color: white !important;
    border: 2px solid #fff; 
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
}
.cal-day.active-circle .c-dot.orange { background: white; }

.cal-day.monthly-ongoing {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px dashed rgba(255, 255, 255, 0.1) !important;
    color: #aaa;
}

.cal-day.is-today {
    border: 2px solid var(--accent-color); 
    color: var(--accent-color);
    font-weight: 800;
}

.cal-day-name {
    text-align: center;
    font-size: 13px;
    color: #888; 
    font-weight: 500;
    padding-bottom: 8px;
}

.cal-dots-row {
    position: absolute;
    bottom: 4px;
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
}

.cal-grid {
    display: grid;

    grid-template-columns: repeat(7, 1fr); 

    gap: 6px; 
    width: 100%;
    margin-bottom: 16px;
    box-sizing: border-box;

    align-items: start; 
}
.cal-header {
    display: flex !important;
    justify-content: space-between !important; 
    align-items: center !important;

    width: 100%;
    padding: 4px 4px 16px 4px; 
    box-sizing: border-box;
}
.cal-month-title {
    font-size: 17px;
    font-weight: 700;
    color: white;
    text-transform: capitalize; 
    text-align: center;
}

.cal-nav-btn {
    width: 44px !important;
    height: 44px !important;

    border-radius: 24px !important;

    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
}

.cal-nav-btn:active {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(0.95);
}

.showcase-floating-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

    background: linear-gradient(
        to top, 
        rgba(18, 18, 18, 0.9) 0%,    
        rgba(18, 18, 18, 0.85) 50%,  
        rgba(18, 18, 18, 0.0) 100%   
    ) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: none !important;
    box-shadow: none !important;

    padding: 16px 20px max(12px, env(safe-area-inset-bottom, 0px)) !important;

    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 1000;
    box-sizing: border-box;
    transform: translateZ(0);
    pointer-events: none;
}

body.os-desktop .showcase-floating-footer {
    left: 50% !important;
    transform: translateX(-50%) translateZ(0) !important;
    max-width: var(--desktop-width) !important;
}

.showcase-floating-footer > * {
    pointer-events: auto; 
}

.sff-price-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin-bottom: 2px; 
}

.sff-price {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: white !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
}

.sff-suffix {
    font-size: 13px !important;
    color: #aaa !important;
    margin-top: 4px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

.sff-btn {
    margin: 0 !important;
    width: auto !important;
    padding: 14px 32px !important;
    border-radius: 100px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    border: none !important;
    background: var(--accent-gradient) !important;
    box-shadow: 
        inset 0 2px 0 rgba(255, 255, 255, 0.25), 
        0 8px 24px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.15s, filter 0.2s !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.sff-btn:active {
    transform: scale(0.94) translateY(2px) !important;
    box-shadow: 
        inset 0 2px 0 rgba(255, 255, 255, 0.1), 
        0 4px 12px rgba(0, 0, 0, 0.3) !important;
    filter: brightness(0.9);
}

#view-client-select-modal .overlay-card {
    height: auto !important;        
    max-height: 80vh !important;    
    overflow: hidden !important;    
}

#client-select-list {
    flex: 1 1 auto;                 
    overflow-y: auto;               
    min-height: 100px;              
    padding-right: 2px;             

    scrollbar-width: none;
    -ms-overflow-style: none;
}

#csm-counter {
    color: rgba(255, 255, 255, 0.5) !important; 
    font-weight: 500 !important;
    margin-left: 2px !important;
}
#client-select-list::-webkit-scrollbar {
    display: none;
}

#client-select-list .contact-row {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;

    padding: 12px 16px !important;
    margin-bottom: 10px !important;
}

#client-select-list .contact-row::after {
    display: none !important;
}

#client-select-list .contact-row:active {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: scale(0.98);
}

#view-chats .segmented-control {
    margin-bottom: 16px !important; 
}

.contact-type-grid {
    display: flex !important;
    justify-content: space-between;
    gap: 8px;

    margin-top: -10px !important; 
    margin-bottom: 6px !important;

    padding: 6px 0px !important; 
    width: 100%;
    box-sizing: border-box;
    overflow: visible !important; 
}

.contact-type-grid .filter-chip {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
    padding: 6px 2px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px !important;
    font-weight: 700;
}

#tab-content-contacts .form-group {
    margin-top: 0px !important;
}

.contact-type-grid .filter-chip span:first-child {
    font-size: 13px !important;
}

body.chat-mode .glass-safe-area,
body.map-mode .glass-safe-area

 {
    display: none !important;
}

body.chat-mode #view-chat-conversation {
    padding-bottom: 0 !important;
}

.chat-input-bar > * {
    pointer-events: auto;
}

.chat-attach-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 50% !important;

    background: rgba(30, 30, 30, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);

    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    margin-bottom: 0px !important;
    position: relative; 
}

.chat-attach-btn::after {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
    background: transparent;
    z-index: 10;
    border-radius: 50%;
    cursor: pointer;
}

.chat-input-wrapper {
    flex: 1;

    min-height: 44px !important; 
    height: auto !important; 

    background: rgba(30, 30, 30, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);

    border-radius: 22px; 

    display: flex;
    align-items: center; 
    position: relative;
    overflow: hidden;
    padding: 0 !important;
}

#chat-input-field.chat-input-field {
    width: 100%;
    height: 44px !important; 
    min-height: 44px !important;
    max-height: 240px !important;    

    box-sizing: border-box !important;
    line-height: 20px !important; 
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 16px !important;
    padding-right: 48px !important; 

    background: transparent !important; 
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;

    color: white !important;
    font-size: 16px;

    resize: none;
    overflow-y: auto !important; 
    display: block !important;
    transition: none !important;

    overscroll-behavior-y: contain;

    touch-action: pan-y; 
}

#chat-input-field.chat-input-field::placeholder {
    color: #888;
    line-height: 20px;
}

.chat-send-btn {
    position: absolute;
    right: 4px;
    bottom: 4px; 

    width: 36px;
    height: 36px;
    border-radius: 50%;

    background: var(--accent-color);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: scale(0);
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
}

.chat-send-btn.visible {
    transform: scale(1);
    opacity: 1;
}

#view-chat-conversation {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    background: var(--bg-color);
    z-index: 5000 !important;
    display: none; 
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: translateZ(0);
}

#view-chat-conversation.active {
    display: block !important; 
}

#view-chat-conversation .glass-sticky-header {
    position: absolute !important; 
    top: 0 !important;

    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;

    z-index: 10 !important;

    transition: none !important;
}

#view-chat-conversation .glass-title-capsule {

    max-width: 70%; 
    justify-content: flex-start !important; 
    padding-left: 6px !important; 
}

#view-chat-conversation .glass-title-capsule:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.1) !important;
    transition: 0.1s;
}

body.os-desktop #view-chat-conversation .glass-title-capsule {
    cursor: pointer;
}

#chat-header-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    margin-right: 8px !important;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; 
}

#chat-header-avatar svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.chat-input-bar {
    position: absolute !important;
    bottom: 0;
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    min-height: 60px;
    z-index: 10 !important;

    display: flex;
    align-items: flex-end; 
    gap: 8px;
    padding: 10px 16px;
    box-sizing: border-box !important;

    background: linear-gradient(
        to top, 
        rgba(18, 18, 18, 1.0) 0%, 
        rgba(18, 18, 18, 0.9) 45%, 
        rgba(18, 18, 18, 0.0) 100%
    ) !important;

    pointer-events: none;

    transition: none !important;
}

.chat-closed-banner {
    position: absolute;
    bottom: 0; 
    left: 0; 
    right: 0;
    min-height: 60px;
    background: rgba(18, 18, 18, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 10;
    text-align: center;
}

.chat-closed-text {
    font-size: 13px;
    color: #888;
    font-weight: 600;
}

.chat-closed-banner .chat-closed-text {
    margin-bottom: 8px; 
}

.chat-closed-btn {
    background: rgba(255, 107, 0, 0.15);
    color: var(--accent-color);
    border: 1px solid rgba(255, 107, 0, 0.3);
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

.chat-closed-btn:active {
    background: rgba(255, 107, 0, 0.25);
    transform: scale(0.96);
}

.chat-input-bar.keyboard-active {

    transition: none !important; 
}

body.os-android .chat-input-bar.keyboard-active {
    padding-bottom: 10px !important;
}

#chat-history-container {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    padding-top: calc(50px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: 10px;
    padding-right: 10px;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100%;
    box-sizing: border-box;

    -webkit-overflow-scrolling: touch; 
    overscroll-behavior-y: contain; 
    overscroll-behavior-x: auto;

    z-index: 1;
    transition: none !important;
}

#chat-history-container::after {
    content: '';
    display: block;
    height: 1px;
    min-height: 1px;
    width: 100%;
    visibility: hidden;
    pointer-events: none;
}

#chat-history-container::-webkit-scrollbar {
    display: none;
}

.chat-content-wrapper {

    min-height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 

    margin: 0 !important;
}

.chat-date-label {
    align-self: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    margin: 16px 0;
    z-index: 2;
}

.chat-floating-date {
    position: absolute;
    top: calc(65px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.chat-floating-date.visible {
    opacity: 1;
}

.msg-row {
    display: flex;
    width: 100%;
    margin-bottom: 6px; 
    position: relative; 
}

.msg-row.left {
    justify-content: flex-start;
}

.msg-row.right {
    justify-content: flex-end;
}

.msg-bubble {
    max-width: 75%; 
    padding: 8px 12px;
    position: relative;
    z-index: 1; 
    font-size: 15px;
    line-height: 1.4;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: filter 0.2s ease, box-shadow 0.2s ease;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    display: flow-root; 
    overflow: hidden !important; 
}

.chat-no-anim .msg-row {
    animation: none !important;
    transition: none !important;
}

body.os-desktop .msg-bubble,
body.os-desktop .msg-bubble * {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    cursor: text;
}

body.os-desktop .msg-quote,
body.os-desktop .msg-quote * {
    cursor: pointer !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

body.os-desktop .msg-bottom-group,
body.os-desktop .msg-bottom-group * {
    cursor: default !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.msg-bubble.in {
    background: #252525;
    color: white;
    border-radius: 16px 16px 16px 4px; 
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.msg-bubble.out {
    background: var(--accent-gradient) !important;
    color: white;
    border-radius: 16px 16px 4px 16px; 
}

.msg-translation-divider {
    height: 1px;
    background-color: currentColor;
    opacity: 0.15;
    margin: 6px 0;
    width: 100%;
}

.msg-translated {
    font-size: 14px;
    color: currentColor;
    opacity: 0.9;
    line-height: 1.4;
    word-wrap: break-word;
}

.msg-translated-label {
    display: block;
    font-size: 10px;
    opacity: 0.6;
    margin-bottom: 2px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.msg-time {
    float: right;
    font-size: 10px;
    margin-top: 6px;
    margin-left: 8px;
    margin-right: -4px;
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 2px;

    position: relative;
    top: 4px;
}

.msg-time {
    display: flex !important;
    align-items: center;
    gap: 4px; 
    line-height: 1;
}

.msg-status-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.msg-status-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.msg-bubble.out .msg-status-icon {
    color: rgba(255, 255, 255, 0.8); 
}
.msg-bubble.out .msg-status-icon.read {
    color: #ffffff; 
}

.msg-bubble.in .msg-status-icon {
    color: var(--accent-color);
}

@keyframes msgPop {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.msg-row {
    animation: msgPop 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.scroll-down-btn {
    position: absolute;
    right: 16px !important; 
    bottom: calc(55px + max(15px, env(safe-area-inset-bottom, 0px)));
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(30, 30, 30, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px) scale(0.9);
    pointer-events: none;

    transition: bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                opacity 0.2s ease, 
                transform 0.2s ease,
                margin-bottom 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.keyboard-open .view:not(#view-chat-conversation) {
    height: var(--initial-app-height, 100vh) !important;
    bottom: auto !important;
}

body.keyboard-open #view-chat-conversation {

    bottom: 0 !important;
}

body.keyboard-open,
body.keyboard-open .view {

    touch-action: pan-y !important;
    overscroll-behavior-x: auto;
}

#ios-keyboard-edge-shield {
    position: fixed;
    top: 100px; 
    left: 0;
    bottom: 0;
    width: 35px; 
    z-index: 99999;
    touch-action: none !important; 
    display: none;
}

body.keyboard-open #ios-keyboard-edge-shield {
    display: block;
}

.scroll-down-btn.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.scroll-down-btn:active {
    transform: scale(0.9);
    background: rgba(255, 255, 255, 0.1);
}

.scroll-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;

    font-size: 0; 
    line-height: 0;
}

.scroll-icon svg {
    width: 20px;  
    height: 20px;
    display: block;

}

.scroll-badge {
    position: absolute;
    top: -5px;
    left: -5px; 

    background: var(--accent-color); 
    color: white;
    font-size: 11px;
    font-weight: 700;

    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    padding: 0 4px;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);

    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.chat-row {
    display: flex; 
    align-items: flex-start; 
    justify-content: space-between; 
    position: relative; 

    padding: 12px 0px !important; 

    background: transparent !important; 
    border: none !important; 
    border-radius: 0 !important; 
    margin-bottom: 0 !important; 
    box-shadow: none !important;

    transition: background 0.2s;
}

.chat-row::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0; 
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1); 

    left: 56px; 
}

.chat-row:last-child::after { 
    display: none !important; 
}

.chat-row:active {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;

    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: -10px !important;
    margin-right: -10px !important;

}

.chat-row:active::after {
    left: 66px; 
    right: 10px; 
}

.c-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; 
    margin-top: 3px;
    min-height: 20px; 
    width: 100%;
}

.msg-badge {
    background: #3390ec; 
    color: white;
    font-size: 12px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    box-sizing: border-box;
    flex-shrink: 0;
    margin-left: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.msg-context {
    font-size: 10px;
    color: var(--accent-color);
    margin-bottom: 2px;
    font-weight: 600;
}

.chat-action-menu-container {
    background: #1e1e1e; 
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px; 
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    width: 220px; 
    padding: 4px 0; 
}

.cam-btn {
    display: flex;
    align-items: center;
    gap: 12px; 
    padding: 10px 16px; 
    color: white;
    font-size: 15px; 
    font-weight: 500; 
    cursor: pointer;
    background: transparent;
    transition: background 0.15s;
}

.cam-btn:active { 
    background: rgba(255, 255, 255, 0.05); 
}

.cam-divider {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.08);
    margin: 4px 16px 4px 56px; 
}

.cam-btn.danger { color: #ff453a; }
.cam-btn.danger:active { background: rgba(255, 69, 58, 0.15); }
.cam-btn.disabled { opacity: 0.4; pointer-events: none; }

.cam-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}
.cam-icon.reply { background: rgba(10, 132, 255, 0.15); color: #0a84ff; }
.cam-icon.select { background: rgba(191, 90, 242, 0.15); color: #bf5af2; }
.cam-icon.edit { background: rgba(255, 149, 0, 0.15); color: #ff9f0a; }
.cam-icon.delete { background: rgba(255, 69, 58, 0.15); color: #ff453a; }
.cam-icon.support { background: rgba(255, 255, 255, 0.05); color: #888; }

.reaction-bar-container {
    background: #1e1e1e; 
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column; 
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    width: 270px; 
    box-sizing: border-box;
    margin-bottom: 8px;
}

.reaction-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
}

@keyframes emojiPopIn {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.reaction-emoji {
    font-size: 26px; 
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s;
    border-radius: 50%;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

    opacity: 0;
    animation: emojiPopIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@media (hover: hover) {
    .reaction-emoji:hover {
        transform: scale(1.3) translateY(-2px) !important;
        background: rgba(255, 255, 255, 0.1);
        z-index: 10;
    }
}

.reaction-emoji:active { 
    transform: scale(1.1) !important; 
    background: rgba(255, 255, 255, 0.2) !important; 
}

.reaction-expand-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.2s;

    opacity: 0;
    animation: emojiPopIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.reaction-expand-btn:active {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    transform: scale(0.9) !important;
}

.msg-reactions-badge {

    padding: 2px 6px 2px 2px;
    border-radius: 12px;
    font-size: 13px;

    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: transform 0.1s, background 0.2s, border-color 0.2s;
    animation: popIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.msg-bubble.in .msg-reactions-badge {
    background: rgba(255, 107, 0, 0.15); 
    border: 1px solid rgba(255, 107, 0, 0.4);
    color: white;
}
body.theme-guest .msg-bubble.in .msg-reactions-badge {
    background: rgba(138, 43, 226, 0.15); 
    border: 1px solid rgba(138, 43, 226, 0.4);
}

.msg-bubble.in .msg-reactions-badge.has-my-reaction {
    background: rgba(255, 107, 0, 0.3);
}
body.theme-guest .msg-bubble.in .msg-reactions-badge.has-my-reaction {
    background: rgba(138, 43, 226, 0.3);
}

.msg-bubble.out .msg-reactions-badge {
    background: #252525 !important; 
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.msg-bubble.out .msg-reactions-badge.has-my-reaction {
    background: #383838 !important;
    border-color: rgba(255, 255, 255, 0.2);
}

.msg-reactions-badge:active { transform: scale(0.9); }

.msg-quote {
    background: rgba(0, 0, 0, 0.15);
    border-left: 3px solid var(--accent-color);
    padding: 6px 10px;
    border-radius: 4px 8px 8px 4px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.msg-quote:active { background: rgba(0, 0, 0, 0.25); }
.msg-bubble.out .msg-quote {
    border-left-color: white;
    background: rgba(255, 255, 255, 0.15);
}
.msg-quote-author { font-size: 11px; font-weight: 700; color: var(--accent-color); margin-bottom: 2px; }
.msg-bubble.out .msg-quote-author { color: white; }
.msg-quote-text { font-size: 13px; color: rgba(255, 255, 255, 0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.msg-edited-label { font-size: 9px; opacity: 0.6; margin-right: 4px; font-style: italic; }

#chat-history-container.select-mode .msg-row,
#chat-history-container:not(.select-mode) .msg-row { 
    transform: none !important; 
    width: 100% !important;
}

#chat-history-container.select-mode .msg-bubble {
    pointer-events: none !important;
}

.msg-checkbox {
    position: absolute; left: -34px; bottom: 0px; width: 22px; height: 22px;
    border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); background: rgba(0, 0, 0, 0.2);
    display: flex; align-items: center; justify-content: center; transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 0; pointer-events: none;
}

#chat-history-container.select-mode .msg-checkbox { 
    left: 0px; 
    opacity: 1; 
    pointer-events: auto; 
}

#chat-history-container.user-select-mode .msg-row.left .msg-checkbox {
    display: none !important;
}

.msg-row.selected .msg-checkbox { background: var(--accent-color); border-color: var(--accent-color); }
.msg-row.selected .msg-checkbox::after {
    content: ''; width: 10px; height: 5px; border-left: 2px solid white; border-bottom: 2px solid white;
    transform: rotate(-45deg) translateY(-1px);
}

.msg-row.selected .msg-bubble,
.msg-row.action-menu-highlight .msg-bubble {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 0 12px var(--accent-color) !important;
    filter: brightness(1.15);
}

#view-chat-conversation.chat-select-mode-active .glass-title-capsule {
    background: transparent !important;
    border-color: transparent !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

#view-chat-conversation.chat-select-mode-active #chat-header-avatar,
#view-chat-conversation.chat-select-mode-active #chat-header-status {
    display: none !important;
}

#view-chat-conversation.chat-select-mode-active #chat-header-name {
    font-size: 17px !important;
    color: var(--accent-color) !important;
}

#view-chat-conversation.chat-select-mode-active .header-back-arrow::before {
    display: none !important; 
}

.msg-swipe-wrap { 
    display: flex; 
    width: 100%; 
    align-items: flex-end; 
    position: relative; 
    will-change: transform; 
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.msg-row.right .msg-swipe-wrap { justify-content: flex-end; }
.msg-row.left .msg-swipe-wrap { justify-content: flex-start; }

#chat-history-container.select-mode .msg-row.left .msg-swipe-wrap {
    transform: translateX(34px);
}

#chat-history-container.user-select-mode .msg-row.left .msg-swipe-wrap {
    transform: translateX(0) !important;
}

#chat-history-container.select-mode .msg-row.right .msg-swipe-wrap {
    transform: translateX(0);
}

.swipe-reply-icon {
    position: absolute; right: 16px; top: 50%; margin-top: -16px; width: 32px; height: 32px;
    border-radius: 50%; background: rgba(255, 255, 255, 0.1); 
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 16px; opacity: 0; transform: scale(0.5);
    transition: opacity 0.2s, transform 0.2s, background 0.2s;
    z-index: 0; 
}
.swipe-reply-icon.active { opacity: 1; background: var(--accent-color); }

.msg-row.deleting {
    transform: scale(0.8) !important; opacity: 0 !important; height: 0 !important;
    margin-bottom: 0 !important; padding: 0 !important; overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.typing-indicator {
    display: inline-flex;
    align-items: baseline;
}
.typing-dots {
    display: inline-flex;
    margin-left: 2px;
}
.typing-dots span {
    animation: typingBlink 1.4s infinite both;
    margin: 0 1px;
    font-size: 14px;
    line-height: 1;
}
.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBlink {
    0%, 100% { opacity: 0.2; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-2px); }
}

#map-container, #guest-map-container, #global-map-canvas {
    flex: 1;
    width: 100%;
    height: 100%;

    background-color: transparent !important; 
    z-index: 1;
    position: relative;
}

.maplibregl-canvas {
    background-color: transparent !important;
}

.maplibregl-ctrl-attrib, .maplibregl-ctrl-logo {
    display: none !important;
}

.maplibregl-marker {
    cursor: pointer;
}

.maplibregl-popup-content {
    padding: 0 !important;
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4) !important;
    background: #1e1e1e !important; 
    overflow: hidden;
    cursor: pointer;
    min-width: 240px;

    z-index: 20001 !important; 
}

.maplibregl-popup {
    z-index: 20000 !important; 
}

.maplibregl-popup-close-button {
    font-size: 0 !important;
    color: transparent !important;
    width: 32px !important;
    height: 32px !important;
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    z-index: 20 !important; 

    background-color: rgba(30, 30, 30, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px !important;

    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    transition: transform 0.1s, background-color 0.2s;
}

.maplibregl-popup-close-button:active {
    transform: scale(0.9);
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.maplibregl-canvas-container {
    z-index: 0 !important;
}

.maplibregl-marker {
    z-index: 2000 !important; 
    position: absolute;
}

.mp-card-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.mp-card-img-box {
    width: 100%;
    height: 140px;
    min-height: 140px;
    flex-shrink: 0;
    position: relative;
    background: #252525;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

.mp-card-img-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mp-img-wrapper {
    width: 100% !important;
    height: 160px !important;
    min-height: 160px !important;
    position: relative !important;
    background: #252525 !important;
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.mp-img-elem {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 16px 16px 0 0 !important;
}

.mp-card-info {
    padding: 12px;
}

.mp-price {
    font-size: 18px;
    font-weight: 800;
    color: white;
    margin-bottom: 4px;
}

.mp-desc {
    font-size: 12px;
    color: #ccc;
    font-weight: 500;
    margin-bottom: 2px;
}

.mp-addr {
    font-size: 10px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.maplibregl-popup-tip {
    border-top-color: #1e1e1e !important;
}

#map-picker-search-box {
    flex: 1;
    height: 40px !important;
    border-radius: 20px !important;
    background: rgba(30, 30, 30, 0.6) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    display: flex;
    align-items: center;
    padding: 0 4px 0 12px !important;
    transition: 0.2s;
}

#map-picker-search-box #map-search-input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    height: 100% !important;
    padding: 0 8px !important;
    font-size: 15px !important;
    border-radius: 0 !important;
    font-weight: 500;
}

#map-picker-search-box #map-search-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

#map-picker-search-box .gh-search-icon {
    padding-left: 4px !important;
    opacity: 1 !important;
}

#guest-search-clear-btn.gh-filter-icon,
#global-map-clear-btn.gh-filter-icon,
#map-search-clear-btn.gh-filter-icon {
    height: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;        
    padding: 0 8px !important;      
    cursor: pointer !important;
    pointer-events: auto !important;
}

#view-map-picker #map-picker-results.gm-search-results {

    position: relative !important;
    top: 10px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    max-height: 50vh !important;

    background: rgba(30, 30, 30, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);

    z-index: 2000;
}

#map-selected-address {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

#view-map-picker button {
    background: var(--accent-gradient) !important;
    color: #ffffff !important;
    font-weight: 700 !important;

    border-radius: 24px !important;
    height: 54px !important;

    border: 1px solid rgba(255, 255, 255, 0.15) !important;

    background-clip: padding-box !important;

    box-shadow: 

        inset 0 0 0 2px #000000, 

        0 2px 8px rgba(255, 107, 0, 0.25) !important;
}

#view-map-picker button.btn-disabled {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.3) !important;
    border: none !important;
    box-shadow: none !important;
}

#map-picker-bottom-sheet {

    background: linear-gradient(180deg, rgba(30, 30, 30, 0.85) 0%, rgba(18, 18, 18, 0.95) 100%) !important;

    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5) !important;

    border-radius: 24px 24px 0 0 !important;

    padding-bottom: max(15px, var(--safe-bottom)) !important;
    z-index: 1001 !important;
}

#view-map-picker div[onclick="goBack()"] {
    background: rgba(30, 30, 30, 0.6) !important;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
#view-map-picker div[onclick="goBack()"]:active {
    transform: scale(0.95);
    background: #f2f2f2 !important;
}

#view-map-picker div[onclick="locateUser()"] {
    background: rgba(30, 30, 30, 0.6) !important;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
#view-map-picker div[onclick="locateUser()"]:active {
    transform: scale(0.95);
}

.cluster-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5000;

    pointer-events: auto !important;

    height: 90vh; 
    width: 100%;

    background: var(--bg-color) !important; 

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.3) !important;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px 24px 0 0;

    display: flex;
    flex-direction: column;

    transform: translateY(100%);

    will-change: transform;
    touch-action: none; 
}

.cluster-sheet.animating {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cs-drag-zone {
    width: 100%;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: grab;
}

.cs-drag-handle {
    width: 40px;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.cs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 10px 20px;
    flex-shrink: 0;
    cursor: grab;
}

.cs-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 40px 16px;
    scrollbar-width: none;
}
.cs-list::-webkit-scrollbar { display: none; }

.cs-list.locked-scroll {
    overflow-y: hidden !important;
    touch-action: none !important; 
}

#map-cluster-sheet {
    touch-action: none; 
}

.sheet-dragging .cs-list,
.sheet-dragging .cs-card {
    pointer-events: none;
}

#map-cluster-sheet.sheet-dragging .cs-list,
#map-cluster-sheet.sheet-dragging .cs-card {
    pointer-events: none !important;
}

.cs-card {
    cursor: pointer;
    touch-action: auto; 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
}

.cs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 10px 20px;
    flex-shrink: 0;
    cursor: grab;

    touch-action: none; 
}

.cs-drag-zone {
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    cursor: grab;
    touch-action: none; 
}

.cs-title {
    font-size: 18px;
    font-weight: 800;
    color: white;
}

.cs-close {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    cursor: pointer;
}
.cs-close:active { background: rgba(255,255,255,0.2); color: white; }

.cs-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;
    scrollbar-width: none;
    flex: 1; 

}
.cs-list::-webkit-scrollbar { display: none; }

.cs-card {
    display: flex;
    align-items: center; 
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 10px;
    margin-bottom: 10px;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s;

    min-height: 80px; 
    box-sizing: border-box;
}

.cs-card:active {
    background: rgba(255, 255, 255, 0.08);
}

.cs-img-box {
    width: 70px !important;
    height: 70px !important;
    min-width: 70px !important; 

    border-radius: 12px;
    background: #2c2c2e; 

    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0); 
    will-change: transform, opacity;
}

.cs-img, 
.cs-img-box .placeholder-grad {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0); 

    display: flex; 
    align-items: center; 
    justify-content: center;
    font-size: 28px;
    line-height: 1;
}

.cs-info {
    flex: 1;
    min-width: 0; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.cs-name {
    font-size: 15px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.cs-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--accent-color);
}

.cs-meta {
    font-size: 11px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cs-arrow {
    color: #666;
    font-size: 20px;
    margin-left: 4px;
}

.map-center-pin {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -100%);

    pointer-events: none;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    width: 46px;
    height: 46px;

}

.map-center-pin .pin-graphic {
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
    transform-origin: bottom center;

    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    position: relative;
    z-index: 2;
}

.map-center-pin .pin-shadow {
    width: 6px;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;

    position: absolute;

    bottom: -1px; 
    left: 50%;

    transform: translateX(-50%) scale(1);

    opacity: 1;
    filter: blur(1px);

    transition: 
        transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
        opacity 0.2s ease-in, 
        filter 0.3s ease;

    z-index: 1;
}

.map-center-pin.moving .pin-graphic {

    transform: translateY(-15px) scale(1.1);
}

.map-center-pin.moving .pin-shadow {

    transform: translateX(-50%) scale(1.4);

    opacity: 0.5; 

    filter: blur(1.5px); 
}

.leaflet-container { cursor: grab; }

.leaflet-container img.leaflet-tile {
    max-width: none !important;
    max-height: none !important;
    width: 256px !important;
    height: 256px !important;
    visibility: visible !important;

    filter: none !important;
}
.leaflet-container:active { cursor: grabbing; }

.leaflet-control-attribution {
    display: none !important;
}

#btn-delete-logo {
    width: 72px !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 69, 58, 0.1) !important;
    border: 1px solid rgba(255, 69, 58, 0.3) !important;
    cursor: pointer !important;

    border-radius: 24px !important; 
}
#btn-delete-logo:active { background: rgba(255, 69, 58, 0.2) !important; }
#btn-delete-logo span {
    font-size: 24px !important; 
    color: #ff453a !important;
}
.admin-card {
    background: var(--card-bg); padding: 16px; border-radius: 16px;
    display: flex; flex-direction: column; justify-content: space-between;
    border: 1px solid var(--border-color);
    min-height: 80px; position: relative; cursor: pointer;
    transition: transform 0.1s, background 0.2s;
}
.admin-card:active { transform: scale(0.98); background: rgba(255,255,255,0.03); }
.admin-card.full { grid-column: span 2; flex-direction: row; align-items: center; justify-content: space-between; padding: 20px; }
.admin-card-arrow { position: absolute; top: 12px; right: 12px; font-size: 14px; color: #666; }
.admin-card-val { font-size: 24px; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; }
.admin-card-label { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; font-weight: 600; line-height: 1.3; }

.admin-evt-row {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.admin-hero {
    background: linear-gradient(135deg, #1e1e1e, #252525);
    padding: 24px; border-radius: 20px; margin-bottom: 24px; text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.admin-hint-badge {
    font-size: 11px;
    color: #889cb5; 
    background: rgba(136, 156, 181, 0.1); 
    border: 1px solid rgba(136, 156, 181, 0.2); 
    padding: 8px 12px;
    border-radius: 10px;
    margin-bottom: 16px;
    text-align: center;
    line-height: 1.4;
    font-weight: 500;
}
.admin-id-highlight { color: var(--accent-color); }
.admin-id-text { 
    font-size: 22px; font-weight: 800; color: var(--text-primary);
}

.admin-info-grid {
    text-align: left;
    background: rgba(0,0,0,0.2);
    padding: 12px;
    border-radius: 12px;
    font-size: 13px;
    color: #ccc;
    margin-bottom: 10px;
}

.admin-obj-row {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.admin-title { 
    font-size: 11px; text-transform: uppercase; color: var(--text-secondary); 
    letter-spacing: 1.5px; margin-bottom: 10px; font-weight: 700;
}
.admin-group-title {
    font-size: 12px;
    font-weight: 700;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.ae-icon {
    font-size: 20px;
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ae-info {
    display: flex; 
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}
.ae-left {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}
.ae-meta {
    font-size: 11px;
    color: #888;
}
.ae-price {
    font-size: 14px;
    font-weight: 700;
    color: white;
}
.ae-right {
    text-align: right;
    flex-shrink: 0;
    margin-left: 8px;
}
.ae-status {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 2px;
}
.ae-title {
    font-size: 14px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aig-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin-bottom: 6px;
    color: #ccc;
}
.aig-row:last-child { margin-bottom: 0; }
.aig-row span:first-child {
    color: #888;
}
.aig-row span:last-child {
    font-weight: 500;
    color: #fff;
    text-align: right;
}
.ao-addr {
    font-size: 11px;
    color: #888;
}
.ao-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.ao-info {
    flex: 1;
    overflow: hidden;
}
.ao-name {
    font-size: 15px;
    font-weight: 600;
    color: white;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ao-status {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.ao-status.active { color: #32d74b; background: rgba(50, 215, 75, 0.1); }
.ao-status.deleted { color: #ff453a; background: rgba(255, 69, 58, 0.1); }
.ao-status.paused { color: #ffd700; background: rgba(255, 215, 0, 0.1); }

.banned-user-card {
    background: rgba(255, 69, 58, 0.05); 
    border: 1px solid rgba(255, 69, 58, 0.2);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s, transform 0.1s; 
}

.banned-user-card.clickable {
    cursor: pointer;
}

.banned-user-card.clickable:active {
    background: rgba(255, 69, 58, 0.1);
    transform: scale(0.98);
}
.buc-date {
    font-size: 10px;
    color: #666;
}
.buc-id {
    font-size: 16px;
    font-weight: 700;
    color: white;
    font-family: monospace;
}
.buc-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.buc-reason {
    font-size: 12px;
    color: #ff453a;
    opacity: 0.9;
}
.pc-code {
    font-size: 16px;
    font-weight: 700;
    color: #50a7ea; 
    font-family: monospace;
    letter-spacing: 0.5px;
}
.pc-delete-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 69, 58, 0.1);
    color: #ff453a;
    border: 1px solid rgba(255, 69, 58, 0.2);
    cursor: pointer;
    font-size: 16px;
    transition: 0.2s;
}

.pc-delete-btn:active {
    background: rgba(255, 69, 58, 0.3);
    transform: scale(0.95);
}
.pc-desc {
    font-size: 12px;
    color: #888;
}
.pc-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.promo-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.server-time-box {
    background: #252528;
    padding: 12px 16px;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 8px;

    border-radius: 24px !important;
}
.st-fail { color: #ff453a; }
.st-active { color: #ffd700; }
.st-label { font-size: 14px; color: #888; }
.st-success { color: #32d74b; }
.st-value { font-size: 16px; font-weight: 700; color: white; font-variant-numeric: tabular-nums; }
.ta-id-badge {
    background: rgba(255,255,255,0.05);
    padding: 1px 4px;
    border-radius: 4px;
    font-family: monospace;
    color: #666;
}

.ta-info {
    flex: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    gap: 2px;
}
.ta-lbl {
    font-size: 8px;
    text-transform: uppercase;
    color: #555;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.ta-meta {
    font-size: 11px;
    color: #889cb5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ta-name {
    font-size: 15px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.ta-rank {
    font-size: 14px;
    font-weight: 700;
    color: #666;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.ta-stat-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 40px; 
}

.ta-stats-container {
    display: flex;
    gap: 16px; 
    text-align: right;
    align-items: center;
}
.ta-val {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 2px;
}

.top-active-row {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 10px 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 50px; 
}

.u-copy-badge {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    color: #ccc;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.2s;
    flex-shrink: 0;
}
.u-copy-badge:active {
    background: var(--accent-color);
    color: white;
}
.u-date {
    font-size: 11px;
    color: #555;
    margin-top: 4px;
    font-family: monospace;
}
.u-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1; 
    min-width: 0; 
}
.u-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #889cb5;
}
.u-name {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-row {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 10px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

#btn-status-success, #btn-status-failed {
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1) !important; 
    background: rgba(255, 255, 255, 0.03) !important;
    color: #888 !important;
    opacity: 0.5;
    border-radius: 16px !important; 
}

#btn-status-failed.active {
    background: rgba(255, 69, 58, 0.2) !important;
    color: #ff453a !important;
    border-color: #ff453a !important;
    box-shadow: 0 4px 15px rgba(255, 69, 58, 0.2), inset 0 0 0 1px #ff453a !important;
    opacity: 1;
}

#btn-status-success.active {
    background: rgba(50, 215, 75, 0.2) !important;
    color: #32d74b !important;
    border-color: #32d74b !important;
    box-shadow: 0 4px 15px rgba(50, 215, 75, 0.2), inset 0 0 0 1px #32d74b !important;
    opacity: 1;
}

#legal-passport-date {
    -webkit-appearance: none !important;
    appearance: none !important;

    width: 100% !important;
    height: 54px !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 24px !important;
    color: white !important;
    font-size: 16px !important;
    box-sizing: border-box !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    position: relative;
}

#legal-passport-date::before {
    display: none !important;
}

#legal-passport-date:required:valid {
    color: white !important;
}

#legal-passport-date::-webkit-datetime-edit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; 
    height: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#legal-passport-date::-webkit-datetime-edit-fields-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

#obj-input-addr {
    padding-left: 40px !important; 
}
#profile-country-dropdown {
    z-index: 10000 !important; 
    max-height: 250px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: #252528;
}
#profile-edit-card {
    overflow: hidden !important; 
    z-index: 200 !important; 
    position: relative;
}

.accordion-header {
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}
.accordion-header:active {
    background: rgba(255, 255, 255, 0.05);
}
.auth-card-glass {
    width: 100%;
    max-width: 360px;
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

    overflow: hidden; 
    position: relative;
}

.auth-center-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
    padding-bottom: 100px;
    box-sizing: border-box;
}

.auth-guest-glass {
    display: inline-flex; 
    align-items: center;
    gap: 8px;

    margin-top: 30px;
    padding: 10px 20px;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px; 

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
}

.auth-guest-glass:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.15);
}
.auth-guest-text {
    font-size: 13px;
    font-weight: 600;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.auth-icon-hero { font-size: 56px; margin-bottom: 20px; }
.auth-input-large {
    height: 56px !important;
    font-size: 20px !important;
    text-align: center;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    margin-bottom: 24px;
}
.auth-link-back {
    margin-top: 16px; font-size: 13px; color: #666; cursor: pointer; transition: 0.2s;
}
.auth-link-back:active { color: white; }

.auth-slide {
    width: 33.333%;
    padding: 32px 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    opacity: 1; 
    transition: opacity 0.4s ease;

    flex-shrink: 0; 
}
.auth-slide.active-slide {
    opacity: 1;
}
.auth-slider-track {
    display: flex;
    width: 300%; 
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); 
}
.auth-subtitle { font-size: 14px; color: #889cb5; line-height: 1.5; margin-bottom: 24px; }
.auth-title { font-size: 22px; font-weight: 800; color: white; margin-bottom: 8px; letter-spacing: -0.5px; }

.badge-avito { background: #9F55FF; }
.badge-sutochno { background: #FF453A; }
.badge-cian { background: #007aff; }
.badge-airbnb { background: #FF385C; }
.badge-ostrovok { background: #666; }
.bc-content {
    margin-top: 20px;
    z-index: 2;
}
.bc-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; 
    margin-top: auto;      
    padding-top: 16px;
    z-index: 2;
    min-height: 24px;      
}
.bc-id {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    font-family: monospace;
    letter-spacing: 0.5px;
}
.bc-level {
    font-size: 10px;
    font-weight: 800;
    background: linear-gradient(90deg, #BF953F, #FCF6BA, #B38728); 
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: none; 
}
.bc-logo {

    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;

    border-radius: 50%;

    box-sizing: border-box !important;

    flex-shrink: 0;

    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;
    font-size: 18px; 
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1;

    padding: 0 !important; 
}
.bc-name {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bc-phone {
    font-size: 14px;
    color: #888; 
    font-family: monospace; 
    letter-spacing: 0.5px;
}
.bc-shine {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,215,0,0.15) 0%, transparent 60%);
    z-index: 1;
    pointer-events: none;
    transform: rotate(45deg);
}

.bc-status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    color: #666;
    background: rgba(255,255,255,0.05);
    padding: 4px 8px;
    border-radius: 6px;
    letter-spacing: 1px;
    transition: 0.3s;
}

.bc-status.verified {
    color: #0a84ff; 
    background: rgba(10, 132, 255, 0.15);
    border: 1px solid rgba(10, 132, 255, 0.3);
}
.bc-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 2;
}
.blacklist-badge { 
    background: #ff453a; 
    color: white; 
    padding: 2px 10px; 
    font-size: 10px; 
    font-weight: 800; 
    margin-left: 8px; 
    display: inline-block;
    vertical-align: middle;

    border-radius: 24px !important;
}

.business-card-preview {

    background: linear-gradient(145deg, #1c1c1e, #000000);
    border-radius: 20px;
    padding: 24px;
    position: relative;
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.1s;
}

.business-card-preview:active {
    transform: scale(0.98); 
}
.c-avatar { 
    width: 44px; 
    height: 44px; 

    border-radius: 24px !important; 

    background: #444; 
    color: white; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 700; 
    margin-right: 12px;
    flex-shrink: 0;
    margin-top: 2px;
}
.c-info {
    flex: 1; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;

    min-width: 0;     
    overflow: hidden; 
}
.c-name { font-weight: 600; }
.c-phone { 
    font-size: 13px; 
    color: var(--text-secondary);
    line-height: 1.35; 

    height: 2.7em;     

    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;

    word-break: break-word;
    overflow-wrap: break-word;

    max-width: 100%;
    margin-right: 8px;
}

.c-profile-header {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    padding: 24px; 
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(10px);

    border-radius: 24px !important; 

    margin-bottom: 16px; 
    position: relative;
}

#view-contact-details div[style*="background: rgba(255,255,255,0.05)"] {

    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.c-profile-avatar {
    width: 80px; height: 80px; border-radius: 50%; 
    background: linear-gradient(135deg, #007aff, #0056b3);
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 700; color: white; margin-bottom: 12px;
    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.3);
}
.c-profile-name { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.c-profile-phone { font-size: 14px; color: var(--text-secondary); }
.contact-row {
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 12px 16px !important; 
    cursor: pointer;

    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 24px !important; 

    margin-bottom: 10px !important; 
    transition: background 0.2s, transform 0.1s;
}

.contact-row:active {
    background: rgba(255, 255, 255, 0.08) !important;
    transform: scale(0.98);
}

#contacts-list .contact-row {
    position: relative;
    background: transparent !important;
    border: none !important; 
    box-shadow: none !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;

    padding: 12px 0px !important;
}

#contacts-list .contact-row::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);

    left: 56px; 
}

#contacts-list .contact-row:last-child::after {
    display: none !important;
}

#contacts-list .contact-row:active {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
}

#contacts-list .contact-row:active::after {
    left: 66px;
    right: 10px;
}

.contact-app-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
    animation: fadeIn 0.3s ease-out;
}

.contact-app-buttons .secondary-button {
    background: rgba(51, 144, 236, 0.15) !important; 
    border: 1px solid rgba(51, 144, 236, 0.3) !important;
    color: #3390ec !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.country-code { font-size: 14px; font-weight: 600; color: white; }

.country-dropdown {
    position: absolute;
    top: 110%; 
    left: 0;
    width: 260px; 
    background: #252528;
    border: 1px solid #444;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 3000;
    max-height: 250px;
    overflow-y: auto;
    display: none; 
}

.country-dropdown.active {
    display: block;
    animation: fadeIn 0.15s ease-out;
}
.country-flag { font-size: 20px; }
.country-option {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
}

.country-option:active {
    background: rgba(255,255,255,0.1);
}
.country-trigger {
    width: auto !important;
    min-width: 85px;
    padding: 0 12px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    justify-content: center;
    background: #2c2c2e !important;
    flex-shrink: 0;
}

.btn-icon-input, #sec-icon-email {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    border: none !important;
    background: transparent; 
}

#btn-pick-contact {

    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 24px !important; 

    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;

    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.1s;
}

#btn-pick-contact:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.05) !important;
}

.country-trigger:active {
    background: rgba(255,255,255,0.1);
}

#rigid-contract-area {
    display: none; 
    flex: 1; 
    width: 100%; 
    box-sizing: border-box; 
    padding: 16px; 
    border: 1px solid var(--border-color); 
    background: rgba(255,255,255,0.03); 
    overflow-y: auto;

    border-radius: 24px !important;
}

.full-width-save-btn {
    border-radius: 24px !important;
    height: 54px !important;
    width: 100%;
}

.g-card {
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: transform 0.1s;
}
.g-card:active { transform: scale(0.98); }

.g-card-addr {
    font-size: 12px; color: #888; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-card-content { padding: 12px; }
.g-card-img {
    width: 100%;
    height: 180px;
    background: #333;
    position: relative;
}
.g-card-img img {
    width: 100%; height: 100%; object-fit: cover;
}
.g-card-period { font-size: 10px; color: #888; font-weight: 400; }
.g-card-price {
    font-size: 16px; font-weight: 800; color: white;
}
.g-card-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 4px;
}
.g-card-title {
    font-size: 16px; font-weight: 700; color: white;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 70%;
}

.g-rating-badge {
    position: absolute;
    top: 10px; right: 10px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    color: white;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; gap: 4px;
}

.guest-sticky-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(18, 18, 18, 0.85); 
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    padding-top: calc(6px + env(safe-area-inset-top)); 
    padding-bottom: 6px;

    display: flex;
    flex-direction: column;

    gap: 8px; 

    transition: background 0.3s;
}

.gh-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
}

.gh-user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.gh-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
}
.gh-avatar img { width: 100%; height: 100%; object-fit: cover; }

.gh-text-col {
    display: flex;
    flex-direction: column;
}
.gh-greeting { font-size: 11px; color: #888; }
.gh-username { font-size: 15px; font-weight: 700; color: white; }

.gh-map-btn {

    height: 40px;
    width: auto;          
    padding: 0 14px;      
    border-radius: 20px;  
    gap: 8px;             

    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color); 
    border: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    transition: transform 0.1s;
}

.gh-map-btn:active { 
    transform: scale(0.95); 
    background: rgba(255,255,255,0.15); 
}

.gh-map-label {
    font-size: 14px;
    font-weight: 600;
    color: white; 
}

.gh-search-container {
    padding: 0 16px;
}

.gh-search-box {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px; 
    height: 40px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
    padding-right: 4px;
}

.gh-search-box:focus-within {
    background: rgba(0, 0, 0, 0.5);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.15);
}

.guest-sticky-header .segmented-control {

    max-height: 60px; 
    opacity: 1;
    transform: translateY(0);

    margin-top: 0 !important;
    margin-bottom: 2px !important;

    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);

    overflow: hidden; 
    will-change: max-height, opacity, margin;
}

.guest-sticky-header.is-scrolled .segmented-control {
    max-height: 0;       
    opacity: 0;          

    margin-bottom: 0 !important; 
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    transform: translateY(-10px); 
    pointer-events: none; 
}

.guest-sticky-header.is-scrolled {

    background: rgba(18, 18, 18, 0.95);

}

.gh-search-icon {
    padding-left: 16px;
    padding-right: 4px;
    display: flex;
    align-items: center;
    opacity: 0.7;
}

#guest-search-back-btn.active-back {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}

#guest-search-back-btn.active-back:active {
    opacity: 0.6;
    transform: scale(0.9);
}

#map-pulse-clear-btn:active {
    transform: scale(0.9);
    background: rgba(255, 69, 58, 0.2) !important;
    color: #ff453a !important;
    border-color: rgba(255, 69, 58, 0.4) !important;
}

#guest-search-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: 100% !important;
    padding: 0 12px !important;
    font-size: 16px !important;
    color: white !important;
}
#guest-search-input::placeholder { color: #666; font-weight: 400; transition: opacity 0.2s; }

.gh-filter-icon {
    padding: 0 12px;
    color: #888;
    cursor: pointer;
    border-left: 1px solid rgba(255,255,255,0.15);
    height: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.filter-active-badge {
    position: absolute;
    top: -4px;
    right: 2px;
    background: var(--accent-color);
    color: white;
    font-size: 9px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    pointer-events: none;
    z-index: 2;
}

.gh-section-title {
    font-size: 18px;
    font-weight: 800;
    color: white;
    margin: 24px 16px 12px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gh-hero-carousel {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 0 16px;
    padding-bottom: 10px; 
    scroll-snap-type: x mandatory; 
}

.gh-hero-card {
    flex-shrink: 0;
    width: 230px;  
    height: 300px; 
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    scroll-snap-align: center;
    background: #222;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.2s;
}

.gh-hero-card:active {
    transform: scale(0.96);
}

.gh-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gh-hero-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
}

.gh-hero-price {
    font-size: 18px; 
    font-weight: 800;
    color: var(--accent-color);
    margin-bottom: 4px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.gh-hero-title {
    font-size: 14px; 
    font-weight: 700;
    color: white;
    line-height: 1.3;
    margin-bottom: 4px;

    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden;
}

.gh-hero-loc {
    font-size: 12px;
    color: #ccc;
    display: flex;
    align-items: center;
    gap: 4px;
}

.gh-hero-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 4px;
}

.gh-rec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 12px;
    padding: 0 16px 20px 16px;
}

.gh-rec-card {
    background: rgba(30, 30, 30, 0.6);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    transition: transform 0.1s;
}
.gh-rec-card:active { transform: scale(0.96); }

.gh-rec-img-box {
    width: 100%;
    aspect-ratio: 1; 
    position: relative;
}
.gh-rec-img {
    width: 100%; height: 100%; object-fit: cover;
}
.gh-rec-info {
    padding: 10px;
}
.gh-rec-price {
    font-size: 14px; font-weight: 700; color: white;
}
.gh-rec-title {
    font-size: 11px; color: #888;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px;
}

.gh-rec-rating {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 2px;
}

.discovery-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 16px 12px 16px;
}
.ds-title {
    font-size: 20px;
    font-weight: 800;
    color: white;
    letter-spacing: 0.5px;
}
.ds-more {
    font-size: 13px;
    color: var(--accent-color);
    font-weight: 600;
    cursor: pointer;
}

.stories-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;

    padding: 0 0 20px 0 !important; 

    width: 100%;
    box-sizing: border-box;

    scroll-snap-type: x mandatory;

    scroll-padding-left: 16px;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.stories-rail::-webkit-scrollbar {
    display: none;
}

.stories-rail::before {
    content: '';
    display: block;
    min-width: 16px; 
    height: 100%;
    flex-shrink: 0;
}

.stories-rail::after {
    content: '';
    display: block;

    min-width: 4px; 
    height: 100%;
    flex-shrink: 0;
}

.story-card {
    flex-shrink: 0;
    width: 140px;  
    height: 220px; 
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    scroll-snap-align: start;
    cursor: pointer;
    background: #252525; 

    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);

    transition: transform 0.15s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.story-card:active {
    transform: scale(0.95);
}

.story-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
}

.story-price {
    font-size: 15px;
    font-weight: 800;
    color: white;
    margin-bottom: 2px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.story-title {
    font-size: 11px;
    color: #ddd;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.story-badge {
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(255, 69, 58, 0.9); 
    color: white;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

.map-teaser-banner {
    margin: 0 16px 20px 16px;
    height: 70px;
    border-radius: 20px;
    background: linear-gradient(135deg, #2c3e50, #000000); 
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
}

.map-teaser-banner::before {
    content: '';
    position: absolute; top:0; left:0; width:100%; height:100%;
    background-image: url('/static/splash/dashed_line.webp'); 
    opacity: 0.1;
    z-index: 0;
}
.mt-text { position: relative; z-index: 1; }
.mt-title { font-size: 16px; font-weight: 700; color: white; margin-bottom: 2px; }
.mt-sub { font-size: 11px; color: #aaa; }
.mt-icon { 
    font-size: 28px; 
    position: relative; z-index: 1; 
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.3));
}

.masonry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 16px;
}

.masonry-card {
    position: relative;
    background: #1e1e1e;

    aspect-ratio: 1 / 1; 

    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: transform 0.1s;
}
.masonry-card:active { transform: scale(0.97); }

.masonry-img-box {
    width: 100%;
    aspect-ratio: 1 / 0.9; 
    background: #333;
    position: relative;
}

.masonry-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
}
.masonry-info { padding: 10px; }

.masonry-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;

    height: 60%; 
    background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent 100%);

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px 12px; 
    pointer-events: none;
}

.masonry-price { 
    font-size: 15px; 
    font-weight: 800; 
    color: white; 
    margin-bottom: 2px;

    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.masonry-title { 
    font-size: 11px; 
    color: rgba(255,255,255,0.9); 
    font-weight: 500;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

.masonry-rating {
    position: absolute; 
    top: 8px; 
    right: 8px;

    background: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(4px);

    color: white; 
    padding: 3px 8px; 
    border-radius: 8px;

    font-size: 10px; 
    font-weight: 700;
    z-index: 2;
    display: flex;
    align-items: center;
}

.placeholder-grad {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
}

.grad-1 { background: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%); }
.grad-2 { background: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); }
.grad-3 { background: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%); }
.grad-4 { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
.grad-5 { background: linear-gradient(19deg, #FAACA8 0%, #DDD6F3 100%); }
.grad-6 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }

.sk-story-card {
    flex-shrink: 0;
    width: 140px; height: 220px;
    border-radius: 20px;
    background: #252525;
    position: relative; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
}

.sk-masonry-card {
    width: 100%; height: 200px; 
    border-radius: 16px;
    background: #252525;
    position: relative; overflow: hidden;
    border: 1px solid rgba(255,255,255,0.05);
}

.sk-story-card::after, .sk-masonry-card::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    animation: shimmer 1.5s infinite;
}

#guest-search-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gh-search-card {
    background: #1e1e1e;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
}

.gh-search-card:active {
    transform: scale(0.98);
}

.gh-card-image-box {
    width: 100%;
    height: 220px; 
    position: relative;
    background: #333;
}

.gh-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gh-card-like {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 1px solid rgba(255,255,255,0.1);
    color: white;
    transition: 0.2s;
}
.gh-card-like.liked { 
    color: #ffffff !important; 
    background: rgba(255, 69, 58, 0.15); 
    border-color: #ff453a; 
}

.gh-card-like svg {
    transition: fill 0.2s, stroke 0.2s, color 0.2s;
}
.gh-card-like.liked svg {
    fill: #ff453a !important;
    stroke: #ffffff !important;
    color: #ffffff !important;
}

.gh-card-info {
    padding: 16px;
    background: linear-gradient(180deg, #222 0%, #1a1a1a 100%);
}

.gh-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.gh-card-title {
    font-size: 18px;
    font-weight: 700;
    color: white;
    line-height: 1.3;
    max-width: 75%;
}

.gh-card-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: white;
    background: rgba(255,255,255,0.1);
    padding: 4px 8px;
    border-radius: 8px;
}

.gh-card-meta {
    font-size: 13px;
    color: #888;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gh-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 12px;
}

.gh-card-price-box {
    display: flex;
    flex-direction: column;
}

.gh-card-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--accent-color);
}

.gh-card-period {
    font-size: 11px;
    color: #666;
    font-weight: 500;
}

.gh-card-btn {
    background: white;
    color: black;
    padding: 10px 20px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 700;
    border: none;
}

.gh-hero-widget {
    background: linear-gradient(135deg, #FF6B00 0%, #ff453a 100%);
    border-radius: 20px;
    height: 120px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(255, 107, 0, 0.25);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gh-hw-content {
    position: relative;
    z-index: 2;
}

.gh-hw-badge {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(5px);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 8px;
    color: white;
}

.gh-hw-title {
    font-size: 20px;
    font-weight: 800;
    color: white;
    line-height: 1.1;
    margin-bottom: 4px;
}

.gh-hw-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    font-weight: 500;
}

.gh-hw-decor {
    font-size: 60px;
    opacity: 0.8;
    transform: rotate(15deg);
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
}

.gh-bento-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 10px;
}

.gh-bento-card {
    background: #1e1e1e;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 16px;
    height: 80px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s;
}

.gh-bento-card:active {
    transform: scale(0.97);
    background: rgba(255,255,255,0.1);
}

.gh-bento-icon {
    font-size: 24px;
}

.gh-bento-label {
    font-size: 13px;
    font-weight: 600;
    color: #e0e0e0;
}

.gh-bento-card.map-style {
    background: #252528;
    border-color: #3390ec;
}

.gh-bento-card.map-style::before {
    content: '';
    position: absolute;
    top:0; left:0; right:0; bottom:0;
    background-image: radial-gradient(#3390ec 1px, transparent 1px);
    background-size: 10px 10px;
    opacity: 0.15;
}
.gh-bento-card.map-style .gh-bento-label {
    color: #3390ec;
}

.gh-compact-list {
    display: flex;
    flex-direction: column;
    gap: 12px; 
}

.gh-smart-card {
    display: flex;
    background: #1e1e1e;
    border-radius: 20px; 
    overflow: hidden;
    height: 110px; 
    border: 1px solid rgba(255,255,255,0.08);
    position: relative;
    cursor: pointer;
    transition: transform 0.1s;
}

.gh-smart-card:active {
    transform: scale(0.98);
    background: rgba(255,255,255,0.05);
}

.gh-sm-img-box {
    width: 110px; 
    height: 100%;
    flex-shrink: 0;
    position: relative;
    background: #252525;
}

.gh-sm-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gh-sm-content {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; 
}

.gh-sm-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.gh-sm-title {
    font-size: 15px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
    line-height: 1.3;
}

.gh-sm-price {
    font-size: 17px;
    font-weight: 800;
    color: var(--accent-color);
    margin-bottom: 6px;
}

.gh-sm-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #888;
}

.gh-sm-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(255,255,255,0.1);
    padding: 2px 6px;
    border-radius: 6px;
    color: white;
    font-weight: 700;
    font-size: 10px;
}

.gh-sm-img.placeholder-grad {
    font-size: 32px; 
}

.gh-moods-rail {
    display: flex;
    gap: 10px;
    overflow-x: auto;

    margin-left: -16px;
    width: calc(100% + 32px); 

    padding-left: 16px;

    padding-right: 16px;

    padding-top: 4px;
    padding-bottom: 16px;

    box-sizing: border-box;

    scrollbar-width: none; 
    -ms-overflow-style: none;
}

.gh-moods-rail::-webkit-scrollbar { display: none; }

.gh-mood-card {
    flex-shrink: 0;
    width: 140px;
    height: 180px;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.15s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.2s;
    background: #252525;
}

.gh-mood-card:active {
    transform: scale(0.95);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.gh-mood-bg {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    z-index: 1;
}

.gh-mood-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gh-mood-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
}

.gh-mood-icon {
    font-size: 20px;
    margin-bottom: 4px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.gh-mood-title {
    font-size: 14px;
    font-weight: 800;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    line-height: 1.2;
}

.gh-bento-card.map-widget-card {
    position: relative;

    background-color: #252525;

    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);

    background-size: 32px 32px; 
    background-position: center;

    border: 1px solid rgba(255,255,255,0.15);
    padding: 0; 
}

.gh-bc-map-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;
    filter: grayscale(100%) invert(100%); 
    opacity: 1;
}

.gh-bc-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
    pointer-events: none; 
}

.gh-bc-content {
    position: relative;
    z-index: 2;
    padding: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}

.gh-bc-icon-pulse {
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    animation: bouncePin 2s infinite;
}

@keyframes bouncePin {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.gh-bento-card.fav-widget-card {
    position: relative;

    background: #252525; 

    border: 1px solid rgba(255,255,255,0.15); 

    padding: 0; 
}

.gh-bc-fav-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0;

    background-image: radial-gradient(#ff453a 1.5px, transparent 1.5px);
    background-size: 16px 16px;

    opacity: 0.15; 
}

.gh-bc-icon-heart {
    font-size: 20px; 
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));

    display: inline-block;
    width: 20px;                 
    height: 20px;                

    text-align: center;          
    line-height: 20px;           

    transform-origin: center center;   

    animation: gentleHeartScale 2s infinite ease-in-out;
}

@keyframes gentleHeartScale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.gh-chips-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;

    scrollbar-width: none;
    -ms-overflow-style: none;

    margin-bottom: 16px;

    padding: 2px 2px 6px 2px; 
}

.gh-chips-scroll::-webkit-scrollbar { display: none; }

.gh-history-chip {
    display: flex;
    align-items: center;
    gap: 6px;

    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px; 

    padding: 6px 12px;
    font-size: 12px;
    color: #ccc;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.2s;
    flex-shrink: 0;
}

.gh-history-chip:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.95);
}

.gh-history-icon {
    font-size: 14px;
    opacity: 0.7;
}

.gh-history-del {
    margin-left: 8px;
    color: #888;
    font-weight: bold;
    font-size: 14px;
    padding: 2px 6px;
    border-radius: 50%;
    transition: 0.2s;
}

.gh-history-del:active {
    background: rgba(255, 69, 58, 0.2);
    color: #ff453a;
}

.gh-vertical-card {
    flex-shrink: 0;
    width: 140px;  
    height: 140px; 
    aspect-ratio: 1 / 1;
    background: #252525;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.1s;
}

.gh-vertical-card:active {
    transform: scale(0.96);
}

.gh-vc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gh-vc-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 10%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px; 
}

.gh-vc-title {
    font-size: 13px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gh-vc-city {
    font-size: 11px;
    color: #aaa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.filter-section-title {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 12px;
    margin-top: 24px;
    letter-spacing: 0.5px;
}

.filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-tag {
    padding: 10px 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 24px;
    color: #ccc;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.filter-tag.active {
    background: var(--accent-gradient);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.styled-input {
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: white;
    padding: 12px !important;
    font-size: 16px;
    width: 100%;
    outline: none;
}
.styled-input:focus {
    border-color: var(--accent-color) !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield; 
    appearance: textfield;      
}

.gallery-counter, .gallery-counter-pill {
    position: absolute;
    bottom: 28px !important; 
    right: 16px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    z-index: 5; 

    transform-origin: bottom right;
    transform: translate(
        calc((16px - var(--stretch-w, 50vw)) * (var(--stretch, 1) - 1) / var(--stretch, 1)),
        calc(28px * (var(--stretch, 1) - 1) / var(--stretch, 1))
    ) scale(calc(1 / var(--stretch, 1)));
    will-change: transform;
}

.gallery-slide {
    flex: 0 0 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    scroll-snap-align: start; 

    scroll-snap-stop: always; 
    overflow: hidden;

    transform: translateZ(0); 
    -webkit-transform: translateZ(0);
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; 
}

.fixed-gallery-counter {
    position: absolute;
    right: 16px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    z-index: 15;
    pointer-events: none;
    transition: opacity 0.2s;
}

.gallery-slide-bg {
    position: absolute;
    top: -10%; 
    left: -10%; 
    width: 120%; 
    height: 120%;
    background-size: cover;
    background-position: center;
    filter: blur(15px) brightness(0.4);
    z-index: 0;
    pointer-events: none;
}

.gallery-slide-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain !important; 
    max-height: 100%;
    background: transparent;
}

.gallery-slider {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    background: #000;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scroll-behavior: smooth; 
}

.immersive-gallery-wrapper {
    width: 100%;
    height: 300px;
    background: #000;
    overflow: hidden;
    position: relative;
    z-index: 1;

    margin-top: -64px; 
    border-radius: 0 !important; 
}

#view-object-details #obj-gallery-wrapper {
    height: 300px !important;
    border-radius: 0 !important; 
    margin-top: 0 !important;
}

.details-content-overlay {
    background: var(--bg-color);
    border-radius: 24px 24px 0 0;

    margin-top: -16px; 
    padding: 24px 16px 120px 16px;
    position: relative;
    z-index: 20;

    box-shadow: none; 
}

.stats-mini-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.stat-mini-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 16px;
    text-align: center;
}

.smc-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px;
}

.smc-value {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
}

.secondary-button-action {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px !important; 
    padding: 12px 8px;
    font-size: 13px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.secondary-button-action:active {
    background: rgba(255, 255, 255, 0.1);
}

.go-card {
    background: rgba(30, 30, 30, 0.6);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden; 
    cursor: pointer;
    transition: transform 0.1s;

    border-radius: 24px !important; 

    display: flex;
    flex-direction: column;
    min-height: max-content; 
}
.go-card:active { transform: scale(0.98); }
.go-content { padding: 10px; }

.go-img {
    width: 100%;
    aspect-ratio: 1; 
    background: #222;
    position: relative;

    border-radius: 24px 24px 0 0; 
    overflow: hidden;
}
.go-img img { width: 100%; height: 100%; object-fit: cover; }
.go-title { font-size: 13px; font-weight: 700; color: white; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.go-price { font-size: 13px; color: var(--accent-color); font-weight: 800; }

.gold-status-card {

    background: radial-gradient(circle at top right, rgba(255, 215, 0, 0.1), transparent 40%),
                linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%) !important;

    border: 1px solid rgba(255, 215, 0, 0.3) !important;

    box-shadow: 0 10px 30px -5px rgba(255, 215, 0, 0.15),
                inset 0 0 20px rgba(255, 215, 0, 0.05) !important;

    position: relative;
    overflow: hidden;
}

.gold-status-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 45%,
        rgba(255, 215, 0, 0.1) 50%,
        transparent 55%
    );
    animation: goldShimmer 6s infinite linear;
    pointer-events: none;
}
.gold-text {
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.gold-text-gradient {
    background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;
    font-weight: 800 !important;

    letter-spacing: normal !important;
}

.gp-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #333;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    font-weight: 700;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.1);
}
.gp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gp-info { flex: 1; }

.gp-left {
    display: flex;
    align-items: center;
    gap: 16px;
}
.gp-level {
    font-size: 10px;
    font-weight: 800;
    background: linear-gradient(90deg, #BF953F, #FCF6BA, #B38728); 
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}
.gp-name {
    font-size: 20px;
    font-weight: 800;
    color: white;
    line-height: 1.2;
    margin-bottom: 4px;
}
.gp-social-btn {
    flex: 1;
    min-width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.1s;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.1);
}
.gp-social-btn:active { transform: scale(0.95); }

.gp-socials-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.gold-status-card .gp-avatar,
.gold-status-card .bc-logo,
.profile-card.gold-status-card #menu-profile-avatar,
.gold-status-card #guest-host-photo,
#sidebar-profile-avatar.gold-status-avatar,
#guest-header-avatar.gold-status-avatar,
.c-avatar.gold-status-avatar,
.gh-review-avatar.gold-status-avatar,
#full-rev-avatar.gold-status-avatar,
#review-target-icon.gold-status-avatar,
.gift-avatar.gold-status-avatar,
#gi-sender-avatar.gold-status-avatar { 
    border: 1px solid rgba(255, 215, 0, 0.5) !important;
    background: #1a1a1a !important; 
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.15) !important;
}

.gp-verified {
    font-size: 11px;
    font-weight: 700;
    color: #32d74b;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    display: none; 

    align-items: center; 
    gap: 4px;
}

.guest-objects-grid,
#all-profile-objects-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    grid-auto-rows: max-content; 
    align-content: start;        
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.guest-profile-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;

    border-radius: 24px !important; 
}

#gp-hidden-contacts-msg {
    text-align: center; 
    padding: 24px !important; 
    background: rgba(255,255,255,0.03); 
    border: 1px dashed rgba(255,255,255,0.15); 
    margin-bottom: 20px;

    border-radius: 24px !important; 
}

#gp-phone-container a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    background: rgba(255,255,255,0.05);
    padding: 14px 18px !important;
    border: 1px solid rgba(255,255,255,0.1);

    border-radius: 24px !important; 
}

.guest-profile-hero.gold-status-card,
#guest-host-card.gold-status-card {
    background: radial-gradient(circle at top right, rgba(255, 215, 0, 0.05), transparent 40%),
                linear-gradient(135deg, #1f1f1f 0%, var(--bg-color) 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.1) !important;
}
.is-blacklisted .blacklist-badge { display: inline-block; }
.lang-check {
    color: var(--accent-color);
    font-size: 18px;
    font-weight: 700;
    opacity: 0; 
    transition: opacity 0.2s;
}
.lang-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
    text-transform: uppercase;
}
.lang-circle.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
}

.lang-circle.wide {
    width: auto;
    padding: 0 20px;
    border-radius: 30px;
}
.lang-flag-name {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
}

.lang-grid-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lang-list {
    display: flex;
    flex-direction: column;
}
.lang-option {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 16px; 
    border-bottom: 1px solid var(--border-color); 
    cursor: pointer;
    transition: background 0.2s;
}
.lang-option:last-child { border-bottom: none; }
.lang-option:active { background: rgba(255,255,255,0.05); }

.lang-option.selected .lang-check {
    opacity: 1;
}
.lang-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.lang-tag {
    background: rgba(255,255,255,0.05); border: 1px solid var(--border-color);
    padding: 8px 14px; border-radius: 100px; font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 6px; color: var(--text-primary);
}
.lh-icon { font-size: 20px; }
.lh-text { font-size: 13px; color: white; line-height: 1.4; }

.lifehack-block {
    background: #151e2b; 
    border: 1px solid #1f2b3b;
    padding: 14px; 
    margin-top: 20px;
    display: flex; 
    gap: 12px; 
    align-items: flex-start;

    border-radius: 24px !important;
}

.list-rating { font-size: 12px; color: #ffd700; margin-left: auto; letter-spacing: 1px; }

.loader-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 107, 0, 0.2); 
    border-top-color: var(--accent-color);    
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

.loader-spinner.small {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.loader-spinner.large {
    width: 36px;
    height: 36px;
    border-width: 3px;
}

.loader-spinner.white {
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: #ffffff;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.note-actions { 
    position: absolute; top: 10px; right: 10px; display: flex; gap: 12px;
}

.note-card {

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-left: 4px solid var(--accent-color) !important;

    border-radius: 24px !important;
    padding: 16px;
    margin-bottom: 12px;

    transition: background 0.2s;
}

.note-card:active {
    background: rgba(255, 255, 255, 0.08) !important;
}

.note-content-wrapper {
    flex: 1;
    min-width: 0; 
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.note-date {
    font-size: 10px;
    color: #666;
    font-weight: 600;
}
.note-icon { font-size: 14px; color: #666; cursor: pointer; }
.note-icon:hover { color: white; }
.note-text {
    font-size: 14px;
    color: white;
    line-height: 1.4;
    white-space: pre-wrap; 
    word-break: break-word;
}

.note-actions-row {
    display: flex;
    align-items: center;
    gap: 8px; 
    flex-shrink: 0; 
    height: 100%;
    padding-left: 8px;
    border-left: 1px solid rgba(255,255,255,0.05);
}
.onboarding-arrow {
    font-size: 18px;
    animation: bounceArrow 1s infinite alternate;
}

.note-action-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    cursor: pointer;
    font-size: 18px;
    transition: background 0.2s;
    border: none;
}

.note-action-btn:active {
    background: rgba(255,255,255,0.15);
    transform: scale(0.95);
}

.note-action-btn.delete {
    color: #ff453a;
    background: rgba(255, 69, 58, 0.1);
}

.note-action-btn.delete:active {
    background: rgba(255, 69, 58, 0.2);
}

.onboarding-hint {
    background: linear-gradient(135deg, rgba(50, 215, 75, 0.15), rgba(50, 215, 75, 0.05));
    border: 1px solid rgba(50, 215, 75, 0.3);
    color: #32d74b;
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: pulseHint 2s infinite;
}

.pay-breadcrumbs { color: #889cb5; font-size: 13px; font-weight: 600; margin-bottom: 16px; text-align: center; }

.pay-btn-blue {
    background: #4696d8; 
    color: white; 
    width: 100%; 
    padding: 16px !important; 
    font-size: 16px; 
    font-weight: 700; 
    border: none; 
    cursor: pointer;
    margin-top: 12px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 8px;
    box-shadow: 0 4px 15px rgba(70, 150, 216, 0.2);

    border-radius: 24px !important;
}

.pay-faq-box { 
    background: #1c2636; 
    padding: 16px; 
    margin-top: 8px; 

    border-radius: 24px !important;
}
.pay-label { color: #5d6d80; font-size: 12px; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; margin-left: 4px; }
.pc-arrow {
    color: #666;
    font-size: 20px;
}
.pc-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    overflow: hidden;
}
.pc-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pc-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.1);
    color: #aaa;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pc-badge.pro {
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.pc-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.pc-name {
    font-size: 17px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.3px;
    line-height: 1.2;
}

.pc-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pf-text { font-size: 13px; color: #7f91a4; line-height: 1.4; }
.pf-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; color: white; margin-top: 16px;}
.pf-title:first-child { margin-top: 0; }

.phone-widget {
    display: flex;
    position: relative;
    width: 100%;
    gap: 10px; 
    align-items: center;
}

.phone-widget.large {
    height: 56px;
    margin-bottom: 24px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.phone-widget.large input {
    font-size: 20px;
    font-weight: 700;
    padding: 0;
    height: 100%;
}
.phone-widget.large .country-trigger {
    background: transparent;
    border: none;
    padding-left: 16px;
}
.photo-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(255, 69, 58, 0.9);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    z-index: 5;
}

.photo-move-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.photo-move-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding-bottom: 20px;
}

.photo-grid-item {
    aspect-ratio: 1;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #333;
}

.photo-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-add-btn-card {
    aspect-ratio: 1;
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    box-sizing: border-box;
}

.photo-add-btn-card:active {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(0.96);
}

.photo-add-btn-card.loading {
    pointer-events: none;
    opacity: 0.5;
}

.plat-action {
    font-size: 18px;
    color: #666;
}
.plat-icon {
    width: 44px;
    height: 44px;

    border-radius: 12px !important;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}
.plat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.plat-left {
    display: flex;
    align-items: center;
    gap: 14px;
}
.plat-name {
    font-size: 16px;
    font-weight: 600;
    color: white;
}
.plat-status {
    font-size: 11px;
    color: #666;
    transition: 0.2s;
}

.platform-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: 0.2s;
    position: relative;
    overflow: hidden;

    border-radius: 24px !important;
}

.platform-card:active {
    transform: scale(0.98);
}

.platform-card.is-linked {
    background: rgba(50, 215, 75, 0.05); 
    border: 1px solid rgba(50, 215, 75, 0.3); 
}
.platform-card.is-linked .plat-action {
    color: #32d74b;
    font-weight: 700;
    font-size: 20px;
}
.platform-card.is-linked .plat-status {
    color: #32d74b; 
    font-weight: 500;
}
.platform-card.is-linked::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #32d74b;
}

.popup-btn {
    margin: 0 !important;
    height: 50px !important;
    border-radius: 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.2s;
    width: 100%;
}

.popup-btn:active {
    transform: scale(0.96);
}

.popup-btn-danger {
    background: rgba(255, 69, 58, 0.15) !important;
    color: #ff453a !important;
    border: 1px solid rgba(255, 69, 58, 0.3) !important;
}

.popup-btn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
}

.popup-btn-primary {
    background: var(--accent-gradient) !important;
    color: white !important;
}

.popup-btn-secondary {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

.price-hint {
    font-size: 11px;
    color: var(--accent-color);
    margin-top: 6px;
    margin-left: 4px;
    font-weight: 500;
    display: none; 
    animation: fadeIn 0.3s;
}

.profile-card {
    background: linear-gradient(135deg, #2c2c2e, #1c1c1e);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.1s;

    border-radius: 24px !important; 
}

.profile-card:active {
    transform: scale(0.98);
    background: linear-gradient(135deg, #3a3a3c, #2c2c2e);
}

.rating-stars { display: flex; gap: 8px; margin-top: 12px; }

.segmented-control {
    display: flex;
    background-color: rgba(255, 255, 255, 0.03) !important; 
    border: 1px solid rgba(255, 255, 255, 0.08) !important; 
    border-radius: 20px; 
    padding: 2px;
    margin-bottom: 16px;
    position: relative;
    box-sizing: border-box;
    overflow-x: auto;
    scrollbar-width: none;
}

.segmented-control::-webkit-scrollbar { display: none; }

.segment-item {
    flex: 1;
    min-width: fit-content;
    white-space: nowrap;
    text-align: center;
    padding: 6px 12px; 
    font-size: 13px;
    font-weight: 700;
    border-radius: 18px !important; 
    cursor: pointer;
    transition: 0.2s;
    color: #8e8e93; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
}

.segment-item.active {
    background-color: var(--accent-color) !important; 
    color: #ffffff !important;

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 4px rgba(0,0,0,0.2) !important;
}

.segmented-control.compact {
    margin-bottom: 12px;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px; 
}

.segmented-control.compact .segment-item {
    padding: 4px 8px; 
    font-size: 11px !important; 
    font-weight: 700;
    min-width: 60px; 
    border-radius: 10px !important;
    gap: 0; 
}

.segmented-control.compact .segment-item.active {
    background-color: var(--accent-color) !important;
    box-shadow: none !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#create-evt-source {
    appearance: none; 
    -webkit-appearance: none;

    background-color: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 24px !important;
    height: 54px !important;
    padding: 0 16px !important;
    padding-right: 40px !important; 

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 16px;

    color: white !important;
    cursor: pointer;
}

#create-evt-source:focus {
    border-color: var(--accent-color) !important;
}

.segment-item:active:not(.active) {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

.src-app {
    background: rgba(10, 132, 255, 0.1);
    color: #0a84ff;
    border-color: rgba(10, 132, 255, 0.2);
}
.src-badge {
    font-size: 9px;
    padding: 2px 5px;
    border-radius: 4px;
    font-weight: 700;
    text-transform: uppercase;
    margin-right: 4px;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid transparent;
}
.src-ical {
    background: rgba(255, 149, 0, 0.1);
    color: #ff9f0a;
    border-color: rgba(255, 149, 0, 0.2);
}
.src-manual {
    background: rgba(255, 255, 255, 0.05);
    color: #888;
    border-color: rgba(255, 255, 255, 0.1);
}
.star { font-size: 24px; color: #3a3a3c; cursor: pointer; transition: 0.2s; }
.star.filled { color: #ffd700; transform: scale(1.1); }
.sync-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    color: white;
    text-transform: uppercase;
}

.sync-badges-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.sync-empty-text {
    font-size: 13px;
    color: #889cb5;
    line-height: 1.3;
}
.sync-status-card {
    background: rgba(51, 144, 236, 0.05); 
    border: 1px dashed rgba(51, 144, 236, 0.3);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.system-off-dim { opacity: 0.5; transition: 0.3s; }
.system-off-dim .switch { opacity: 1; }
.system-text-dimmed { opacity: 0.3; transition: 0.3s; }
.t-desc { font-size: 13px; color: #7f91a4; }
.t-green { color: #32d74b; }
.t-price { font-size: 18px; font-weight: 800; color: #ffd700; display: flex; align-items: center; gap: 4px; }
.t-title { font-size: 17px; font-weight: 700; color: white; margin-bottom: 4px; }

.tariff-card {
    background-color: #1c2636; 
    border: 1px solid #283446;
    padding: 16px; 
    margin-bottom: 10px;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    cursor: pointer; 
    position: relative; 
    overflow: hidden;

    border-radius: 24px !important;
}
.tariff-card.selected { border-color: #50a7ea; background-color: rgba(80, 167, 234, 0.1); }

#view-create-event {

    padding-bottom: calc(120px + var(--safe-bottom)) !important;
    box-sizing: border-box;
}

#view-events .glass-title-capsule {
    flex-shrink: 1 !important;      
    min-width: 0 !important;        
    padding: 0 12px !important;     
}
#view-expense-modal {

    padding-bottom: calc(120px + var(--safe-bottom)) !important;
    box-sizing: border-box;
}

#view-expense-modal.overlay-modal {
    padding-top: var(--safe-top) !important;
    justify-content: center !important; 
    padding-bottom: var(--safe-bottom) !important;
}

.select-arrow {
    color: #666;

    font-size: 16px; 

    pointer-events: none;
    user-select: none;
    display: flex;
    align-items: center;

    line-height: 1;
}

#view-guest-showcase {
    overflow-x: hidden !important; 
    overscroll-behavior-x: auto;
}

#view-guest-showcase .section-title {
    font-size: 16px !important; 
    font-weight: 800;
    margin: 0 0 10px 4px;
} 

#view-guest-showcase #guest-gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guest-sticky-layout {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 0 !important; 
    z-index: 1000 !important;
    overflow: visible !important; 
    pointer-events: none; 

    background: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.guest-sticky-layout .gm-back-btn {
    position: absolute !important;
    pointer-events: auto !important; 

    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    left: 16px !important;

}

#guest-host-socials {
    margin-top: 10px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap; 
    justify-content: flex-start;
}

#view-guest-showcase #guest-gallery {
    margin-top: 0 !important;
    padding-top: 0 !important;

    height: 300px !important; 
}

#view-guest-showcase .header-back-arrow {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#view-guest-showcase .guest-section-title {
    font-size: 16px !important; 
    font-weight: 800;
    margin: 0 0 10px 4px;
    letter-spacing: 0.3px;
    color: white;
}

#view-guest-showcase .card div {
    font-size: 14px; 
}

#view-guest-showcase .cal-day {
    font-size: 13px !important;
}

#view-guest-showcase .cal-day-name {
    font-size: 12px !important;
}

#guest-obj-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 6px;
    word-break: break-word;
    overflow-wrap: break-word;
    color: white;
}

#guest-host-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #444;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

#view-guest-showcase .content-overlay,
#view-guest-showcase > div[style*="border-radius: 24px"] {
    background: var(--bg-color) !important;
    border-radius: 24px 24px 0 0 !important;
    margin-top: -16px !important;
    padding: 24px 16px 40px 16px !important; 
    position: relative !important;
    z-index: 10 !important;
    box-shadow: none !important;
}
#view-recovery-modal {
    z-index: 21000 !important; 
    background: rgba(0, 0, 0, 0.9) !important; 

    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;

    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;

    opacity: 0;
    transition: opacity 0.2s ease;
}

#view-recovery-modal.visible {
    opacity: 1 !important;
}

#view-login-modal {
    padding: 0 !important;
    overflow-x: hidden;
    height: 100dvh; 
    display: flex;
    flex-direction: column;
    z-index: 20000 !important; 

    background-color: #121212 !important; 

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
#view-login-modal.active {
    display: flex !important;
}

#view-login-modal:not(.header-hidden) .header-back-arrow {
    display: flex !important;
}

#view-login-modal .glass-title-capsule {

    position: static !important; 
    margin: 0 !important;
    left: auto !important;
    transform: none !important;
    opacity: 1;
    transition: opacity 0.3s;

    margin-left: 8px !important; 
}

#view-login-modal .header-back-arrow {

    position: static !important; 
    margin: 0 !important;
    z-index: 101;
    left: auto !important;
}

#view-settings .card div[style*="width: 40px; height: 40px; border-radius: 12px;"] {

    border-radius: 16px !important;
}

.card.host-only div[style*="width: 40px; height: 40px; border-radius: 12px;"] {
    border-radius: 16px !important;
}

#map-options-list {
    padding: 0 !important; 
    margin: 0 !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.map-choice-btn {
    width: 100%;
    height: 56px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    gap: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    box-sizing: border-box !important;
    transition: all 0.2s ease;
}

.map-choice-btn:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.98);
}

.map-choice-btn img {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    object-fit: contain;
}

.map-choice-btn span {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.map-app-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 8px rgba(0,0,0,0.3);
}

.map-app-icon-box svg {
    width: 20px;
    height: 20px;
    display: block;
}

#btn-map-3d, #btn-global-3d {
    background: rgba(30, 30, 30, 0.6) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;

    width: 40px;
    height: 40px;

    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px; 
    font-weight: 800;
    pointer-events: auto !important; 
    cursor: pointer;
    transition: all 0.2s ease;
}

#btn-map-3d:active, #btn-global-3d:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.1) !important;
}

.map-location-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;

    background: white;
    color: black;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.map-location-btn:active {
    transform: scale(0.95);
}

.map-location-btn svg {

    transform: translate(-1.5px, 1px);
    display: block; 
}

#btn-zoom-out-globe {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;

    background: rgba(30, 30, 30, 0.6) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    pointer-events: auto;
    margin-top: 4px; 
}

#btn-zoom-out-globe:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.1) !important;
}

#btn-zoom-out-globe svg {
    opacity: 0.9;
}

#btn-global-north, #btn-map-north {
    background: rgba(30, 30, 30, 0.6) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;

    width: 40px;
    height: 40px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: auto !important; 
    cursor: pointer;
    transition: all 0.3s ease;
}

#btn-global-north:active, #btn-map-north:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.1) !important;
}

#btn-global-north.is-north svg, #btn-map-north.is-north svg {
    transform: rotate(0deg) !important;
    transition: transform 0.5s ease;
}

#btn-global-north.disabled, 
#btn-map-north.disabled,
#btn-global-3d.disabled,
#btn-zoom-out-globe.disabled,
.gm-controls .map-location-btn.disabled,
#btn-map-style.disabled,
.gm-zoom-btn.disabled {
    opacity: 0.5 !important;          
    cursor: default !important;       
    background: rgba(30, 30, 30, 0.4) !important; 
    border-color: rgba(255, 255, 255, 0.05) !important;
    transform: none !important;      
    transition: none !important; 

}

.gm-zoom-controls {
    display: flex;
    flex-direction: column;
    gap: 12px; 
    z-index: 10;
    pointer-events: auto; 
}

.gm-zoom-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;

    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s;
    pointer-events: auto;
}

.gm-zoom-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.1);
}

.glass-title-capsule > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-width: 100%;
}

#view-sync-setup {

    padding-bottom: calc(120px + var(--safe-bottom)) !important;
    box-sizing: border-box;
}

button[onclick="copyIcalExportLink()"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px dashed rgba(255, 255, 255, 0.3) !important;
    border-radius: 24px !important;
    padding: 12px !important;
    height: auto !important;
}

#view-sync-setup div[style*="background: rgba(51, 144, 236, 0.1)"] {
    border-radius: 24px !important;
    padding: 16px 18px !important;
    border: 1px solid rgba(51, 144, 236, 0.3) !important;
}

#sync-status-indicator {
    border-radius: 24px !important;
    padding: 12px !important;
    margin-bottom: 16px;
}

body.modal-open {
    overflow: hidden;
}

.overlay-card {
    background: rgba(30, 30, 30, 0.6) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 24px !important;

    width: calc(100% - 40px) !important;
    max-width: 350px !important;

    max-height: 80vh !important; 
    display: flex !important;
    flex-direction: column !important;

    margin: auto !important; 
    box-sizing: border-box !important;
    padding: 20px !important;
    overflow: hidden !important; 
}

.card.overlay-card {

    width: 100% !important; 
    max-width: 380px !important; 
    max-height: 85vh !important; 

    margin: auto !important; 
    display: flex !important;
    flex-direction: column !important;

    background: rgba(30, 30, 30, 0.85) !important;
    backdrop-filter: blur(25px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;

    padding: 20px !important;
    box-sizing: border-box !important;
    overflow: hidden !important; 

    opacity: 0;
    transform: scale(0.9); 
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.view.overlay-modal.visible .card.overlay-card {
    opacity: 1;
    transform: scale(1);
}

.overlay-card .lang-list,
.overlay-card #amenities-grid,
.overlay-card #photo-manager-grid,
.overlay-card #country-picker-list,
.overlay-card #source-select-list-container {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    flex: 1; 
    min-height: 0;

    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}

#amenities-grid {
    display: block !important; 
    width: 100% !important; 
    margin-bottom: 20px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
}

#amenities-grid::-webkit-scrollbar {
    display: none !important;
}

#amenities-grid .filter-section-title {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 12px;
    margin-top: 24px;
    letter-spacing: 0.5px;
}

#amenities-grid .filter-section-title:first-child {
    margin-top: 0 !important;
}

#amenities-grid .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

#amenities-grid div[onclick*="toggleAmenity"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    transition: 0.2s;

    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

#amenities-grid div[onclick*="toggleAmenity"] div:first-child {
    font-size: 24px !important;
    margin-bottom: 4px !important;
    line-height: 1 !important;
}

#amenities-grid div[onclick*="toggleAmenity"] div:last-child {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-align: center !important;
    line-height: 1.2 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important; 
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

#amenities-grid div[onclick*="toggleAmenity"].selected {
    box-shadow: inset 0 0 0 1.5px #32d74b !important;
    background: rgba(50, 215, 75, 0.1) !important;
}

#amenities-grid {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-right: 4px !important;
    margin-bottom: 16px !important;
}

#amenities-grid{
    scrollbar-width: none !important; 
    -ms-overflow-style: none !important;  
}

#amenities-grid::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
}

#amenities-grid::-webkit-scrollbar-track,
#amenities-grid::-webkit-scrollbar-thumb {
    background: transparent !important;
    border: none !important;
}

@media (max-width: 360px) {
    #amenities-grid div[onclick*="toggleAmenity"] {
        padding: 8px 4px !important; 
    }
    #amenities-grid div[onclick*="toggleAmenity"] div:first-child {
        font-size: 20px !important; 
    }
    #amenities-grid div[onclick*="toggleAmenity"] div:last-child {
        font-size: 10px !important; 
    }
}

#qr-white-wrapper {
    background: white !important;
    padding: 20px !important; 

    border-radius: 24px !important; 

    width: 100% !important;
    aspect-ratio: 1 / 1 !important; 

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important; 

    margin: 0 auto 24px auto !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

#share-qr-container {
    background: white !important;
    padding: 20px !important;
    border-radius: 24px !important; 

    width: 100% !important;
    aspect-ratio: 1 / 1 !important; 

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

#share-qr-container canvas, 
#share-qr-container img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

#share-link-text {
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 14px 16px !important;

    border-radius: 24px !important;

    margin-bottom: 16px;
    word-break: break-all;
    font-family: monospace;
    font-size: 11px;
    color: #aaa;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-align: center;
    width: 100% !important;
    box-sizing: border-box !important;
}

.overlay-close {

    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;

    background: rgba(128, 128, 128, 0.25) !important; 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    display: grid !important;
    place-items: center !important;

    color: #ffffff !important;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;

    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0;
}

.overlay-close svg {
    width: 20px !important; 
    height: 20px !important;
    display: block !important;
    stroke-width: 2.5 !important; 

    transform: translateZ(0); 
}

.overlay-close:active {
    transform: scale(0.9);
    background: rgba(128, 128, 128, 0.5) !important;
}
.overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.overlay-modal {
    z-index: 3000;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: none; 
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.overlay-title {
    font-weight: 800;
    font-size: 18px;
}

.view {
    display: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;

    background: var(--bg-color) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important; 
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: auto;

    padding: 0 16px; 
    box-sizing: border-box;
    z-index: 1;

    padding-bottom: max(100px, calc(80px + env(safe-area-inset-bottom))) !important;
}

body.no-nav .glass-safe-area {
    display: none !important;
}

.view:not(#view-dashboard):not(#view-guest-search):not(#view-ai):not(#view-guest-trips):not(#view-chats):not(#view-settings):not(#view-photo-viewer):not(#view-qr-fullscreen):not(#view-crop-modal) {
    padding-bottom: max(20px, calc(20px + env(safe-area-inset-bottom))) !important;
}

.view.active {
    display: block;

}

.view::after {
    content: '';
    display: block;

    min-height: calc(100% + 1px);
    width: 1px;

    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; 

    visibility: hidden;
    pointer-events: none;
}

.view.overlay-modal {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 3000; 
    padding-bottom: 0 !important; 

    background: rgba(0, 0, 0, 0.85) !important; 

    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important;

    display: none; 
    align-items: center !important;     
    justify-content: center !important; 

    padding: 20px !important; 
    overflow-y: hidden !important; 

    opacity: 0;
    transition: opacity 0.2s ease;
}

.view.overlay-modal.visible {
    display: flex !important; 
    opacity: 1;
}

.view.active.overlay-modal {
    display: flex !important;

}

.view.overlay-modal .main-button, 
.view.overlay-modal .secondary-button {

    height: 50px !important; 
    min-height: 50px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 16px !important; 

    margin: 0 !important;
    box-sizing: border-box !important;

    border-radius: 24px !important;
    font-size: 15px !important;
}

.modal-btn-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 20px !important;
}

.modal-btn-grid .main-button, 
.modal-btn-grid .secondary-button {
    height: 54px !important; 
    padding: 0 !important;   
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 24px !important;
    font-size: 15px !important;
}

.pulsate { animation: pulse 2s infinite; }   

@keyframes bounceArrow {
    from { transform: translateY(0); }
    to { transform: translateY(3px); }
}

@keyframes breathe {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes btnShine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}
@keyframes fadeIn { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}
@keyframes goldShimmer {
    0% { transform: translate(-30%, -30%) rotate(0deg); }
    100% { transform: translate(0%, 0%) rotate(0deg); }
}
@keyframes popIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(0,136,204,0.5)); }
    100% { transform: scale(1); }
}
@keyframes pulseBorder {
    0% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(255, 107, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0); }
}
@keyframes pulseHint {
    0% { box-shadow: 0 0 0 0 rgba(50, 215, 75, 0.2); }
    70% { box-shadow: 0 0 0 6px rgba(50, 215, 75, 0); }
    100% { box-shadow: 0 0 0 0 rgba(50, 215, 75, 0); }
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes particle-explode {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;

        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0);
    }
}

#app-splash-screen {
    display: flex;
}

.splash-container {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; 
    height: 100dvh;
    margin: 0; padding: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(circle farthest-corner at center, #1a002b 0%, #000000 100%);
    pointer-events: none;
}

.splash-grid {
    position: absolute;

    top: -90px; left: 0; right: 0; bottom: -90px;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 90px 90px; 
    background-position: center 0;
    opacity: 0.8;
    z-index: 1;
    animation: gridMove 3s linear infinite;
    will-change: transform; 
}

.splash-content {
    position: relative;
    width: 350px; 
    height: 150px;
    z-index: 10;
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

@media (max-width: 400px) {
    .splash-content {
        transform: scale(0.85); 
    }
}

.pin-wrapper {
    position: absolute;
    top: 4px; 
    left: 0;
    width: 77px;
    height: 112px;
    z-index: 20;
    animation: pinDrop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.pin-house {
    opacity: 0;

    animation: houseFlicker 0.4s steps(5, end) 0.6s forwards;
    will-change: opacity;
}

.floor-glow {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 250px;
    height: 40px;
    background: radial-gradient(ellipse at center, rgba(138, 43, 226, 0.6) 0%, transparent 70%);
    filter: blur(15px);
    mix-blend-mode: screen;
    z-index: 5;
    animation: floorFlash 0.5s ease-out 0.3s forwards;
}

.mesh-wrapper {
    position: absolute;
    left: 80px;
    top: 30px;
    display: flex;
    align-items: flex-end; 
    height: 86px;
    z-index: 20;
}

.mesh-backdrop {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 120%; height: 150%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.9) 0%, transparent 80%);
    z-index: -1;
    filter: blur(10px);
    animation: fadeIn 0.5s ease 0.5s forwards;
}

.mesh-letters {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    position: relative;
    z-index: 20;
    font-family: 'Outfit', -apple-system, sans-serif;
    font-weight: 800;
    font-size: 86px; 
    letter-spacing: 2px;
    color: #ffffff;
}

.letter {
    opacity: 0;
    transform: translateY(40px);

    will-change: transform, opacity;
}

.l-m { width: 76px; text-align: center; animation: letterPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s forwards; }
.l-e { width: 52px; text-align: center; animation: letterPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s forwards; }
.l-s { width: 56px; text-align: center; animation: letterPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1.0s forwards; }
.l-h { width: 66px; text-align: center; animation: letterPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards; }

.dash-line-mask {
    position: absolute;
    top: 3px; 
    left: 73px; 
    width: 256px; 
    height: 40px; 
    overflow: hidden;
    z-index: 15; 
    clip-path: inset(0 100% 0 0); 
    animation: drawLine 1.0s ease-in-out 1.5s forwards;
    will-change: clip-path, opacity;
}

.dash-line-svg {
    display: block;

    animation: dashFlow 0.6s linear infinite;
}

@keyframes pinDrop {
    0% { transform: translateY(-400px) scaleY(1.3); opacity: 0; }
    60% { transform: translateY(0px) scaleY(0.9); opacity: 1; }
    80% { transform: translateY(-10px) scaleY(1.05); } 
    100% { transform: translateY(0) scaleY(1); opacity: 1; }
}

@keyframes floorFlash {
    0% { transform: translateX(-50%) scale(0); opacity: 0; }
    10% { transform: translateX(-50%) scale(1.5); opacity: 1; } 
    100% { transform: translateX(-50%) scale(1.2); opacity: 0.6; }
}

@keyframes houseFlicker {
    0% { opacity: 0; }
    10% { opacity: 0.6; }
    30% { opacity: 0.1; }
    50% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes letterPop {
    0% { 
        transform: translateY(40px) scale(0.8); 
        opacity: 0; 
    }
    60% { 
        transform: translateY(-5px) scale(1.05); 
        opacity: 1; 
    }
    100% { 
        transform: translateY(0) scale(1); 
        opacity: 1; 
    }
}

@keyframes drawLine {
    from { clip-path: inset(0 100% 0 0); opacity: 0; }
    to { clip-path: inset(0 0 0 0); opacity: 1; } 
}

@keyframes fadeIn { to { opacity: 1; } }

@keyframes fadeOutGlobal {
    to { opacity: 0; visibility: hidden; }
}

@keyframes gridMove {
    0% { transform: translateY(0); }
    100% { transform: translateY(90px); }
}

@keyframes dashFlow {
    to { stroke-dashoffset: -14; }
}

#orientation-lock-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #000000;
    z-index: 999999; 
    display: none; 
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

@media screen and (orientation: landscape) and (max-height: 600px) {

    body:not(.os-desktop):not(.keyboard-open) #orientation-lock-screen {
        display: flex !important;
    }

    body:not(.os-desktop):not(.keyboard-open) {
        overflow: hidden !important;
    }
}

.card, 
.obj-item, 
.stat-box, 
.shortcut-card, 
.note-card, 
.g-card,
.info-hint-box {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    background: rgba(35, 35, 35, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

}

.view.overlay-modal .overlay-card {
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    background: rgba(30, 30, 30, 0.6) !important;
}

.card, 

.view.overlay-modal .overlay-card,
.toast,
.floating-fab {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.main-button,
.auth-btn-glow {
    box-shadow: inset 0 0 0 2px #000000, 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.nav-item.active .nav-icon,
.nav-item.active .nav-label,
.gold-text,
.gold-text-gradient,
input:focus, select:focus, textarea:focus,
.pulsate, .shortcut-highlight {
    text-shadow: none !important;
    filter: none !important;
    animation: none !important;
}

.gold-status-card, 
.guest-profile-hero, 
.business-card-preview {
    background: #1a1a1a !important;
    box-shadow: none !important;
}
.gold-status-card::before,
.bc-shine,
.auth-btn-glow::after {
    display: none !important;
}

.glass-safe-area::before, 
.glass-sticky-header::before {
    display: none !important;
}
.chat-glass-sticky-header::before {
    display: none !important;
}

#dash-add-card-empty,    
.shortcut-highlight {
    box-shadow: none !important;       
    animation: none !important;        

    background: rgba(255, 255, 255, 0.05) !important; 
}

.glass-sticky-header {

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: none !important;

    background: linear-gradient(
        to bottom, 
        rgba(18, 18, 18, 0.9) 0%, 
        rgba(18, 18, 18, 0.85) 60%, 
        rgba(18, 18, 18, 0.0) 100%
    ) !important;

}

.glass-safe-area {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    border-top: none !important; 

    background: linear-gradient(
        to top, 
        rgba(18, 18, 18, 0.9) 0%,    
        rgba(18, 18, 18, 0.85) 50%,  
        rgba(18, 18, 18, 0.0) 100%   
    ) !important;

    height: 120px !important; 
}

body.os-ios:not(.env-standalone) .glass-safe-area {

    background: linear-gradient(
        to top,
        rgba(18, 18, 18, 1) 0%,
        rgba(18, 18, 18, 0.9) 30%,
        rgba(18, 18, 18, 0.85) 60%,
        rgba(18, 18, 18, 0.0) 100%
    ) !important;
}

.segmented-control {

    background-color: rgba(255, 255, 255, 0.05) !important; 

    border: 1px solid rgba(255, 255, 255, 0.08) !important; 

    backdrop-filter: none !important;     
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;          

}

.segment-item.active {
    box-shadow: none !important;          
    filter: none !important;              
    text-shadow: none !important;         
}

.filter-chip {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;          
    border: 1px solid rgba(255, 255, 255, 0.08) !important; 

}

.filter-chip.active {

    box-shadow: inset 0 0 0 2px #1c1c1e !important;

    text-shadow: none !important;
    filter: none !important;

    border: 1px solid rgba(255, 255, 255, 0.08) !important; 
}

.c-profile-avatar {
    box-shadow: none !important; 
    filter: none !important;     
    border: none !important;     
}

.c-profile-header {
    backdrop-filter: none !important;       
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;            

    background: #111111 !important;         
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#view-contact-details button,
#view-contact-details .action-btn-large,
#btn-blacklist-action,
#view-contact-details .secondary-button {
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    transform: none !important; 
}

.tab-btn.active {
    text-shadow: none !important;
    box-shadow: none !important;
}

#btn-action-receipt {
    margin-top: 16px !important;    
    margin-bottom: 12px !important; 
    position: relative !important;  
}

#btn-action-resume {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    box-shadow: none !important;
    text-shadow: none !important;
    margin-top: 16px !important;
}

.btn-highlight-share {
    box-shadow: none !important;       
    backdrop-filter: none !important;  
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 107, 0, 0.15) !important; 
    border: 1px solid var(--accent-color) !important;
}

.obj-actions-grid button,
.doc-btn-row button,
.doc-btn-row .doc-btn,
.modal-btn-grid button {
    margin-bottom: 0 !important; 
    margin-top: 0 !important;
}

.obj-actions-grid, 
.doc-btn-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important; 
    margin-bottom: 12px !important; 
}

.view .modal-btn-grid {
    margin-bottom: 10px !important; 
}

#view-object-details {

    padding-bottom: 90px !important; 
}

.glass-sticky-header .header-back-arrow,
.glass-sticky-header .glass-title-capsule,
.glass-sticky-header .header-icon-btn,
.glass-sticky-header .secondary-button,
.glass-sticky-header .secondary-button-glass {

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    background: rgba(27, 27, 27, 0.93) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.bottom-nav {

    background: rgba(27, 27, 27, 0.93) !important;

    border: 1px solid rgba(255, 255, 255, 0.1) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;

}

.space-background {

    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;

    background: radial-gradient(circle at center, #1b2735 0%, #090a0f 60%, #000000 100%);
    z-index: 0;
    pointer-events: none;
    overflow: hidden;

    transition: opacity 0.1s linear; 
    will-change: opacity;
}

.nebula-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(76, 29, 149, 0.15), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(0, 100, 255, 0.1), transparent 40%);
    filter: blur(30px);
    z-index: 0;
    opacity: 0.8;
    will-change: transform;
}

.stars-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;

    background: transparent;
    z-index: 1;
    will-change: transform; 
    overflow: visible; 
}

.stars-l1 {
    opacity: 0.5;

}

.stars-l2 {
    opacity: 0.8;
}

.stars-l3 {
    opacity: 1;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); box-shadow: 0 0 4px white; }
}

.star-twinkle {
    position: absolute;
    width: 2px; height: 2px;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s infinite ease-in-out;
    pointer-events: none; 
}

.shooting-star {
    position: absolute;

    width: 120px; 
    height: 1px;

    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);

    filter: drop-shadow(0 0 2px rgba(255,255,255,0.8));

    opacity: 0;
    z-index: 0; 
    pointer-events: none;

    transform: rotate(-45deg);
    transform-origin: left;
}

@keyframes shootMeteor {
    0% {
        transform: translate(0, 0) rotate(-45deg) scaleX(0.5);
        opacity: 0;
    }
    10% {
        opacity: 1; 
    }
    100% {

        transform: translate(-400px, 400px) rotate(-45deg) scaleX(1);
        opacity: 0;
    }
}

#globe-atmosphere {
    position: absolute;
    top: 0;
    left: 0;
    width: 1000px;
    height: 1000px;

    background: transparent;
    border-radius: 50%;
    pointer-events: none; 
    z-index: 5; 

    box-shadow: 

        inset 0 0 50px 10px rgba(255, 255, 255, 0.5),

        inset 0 0 100px 20px rgba(135, 206, 250, 0.2),

        0 0 8px 6px rgba(255, 255, 255, 0.9),

        0 0 40px 15px rgba(100, 180, 255, 0.7),

        0 0 100px 30px rgba(51, 144, 236, 0.3),

        0 0 200px 60px rgba(51, 144, 236, 0.1);

    transform-origin: center center;

    transition: opacity 0.2s ease-out;
}

#view-global-map,
#view-map-picker {

    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    right: 0 !important; 
    bottom: 0 !important;

    width: 100vw !important;
    height: 100dvh !important;

    overflow: hidden !important; 

    overscroll-behavior: none !important;
    touch-action: none !important; 
    -webkit-user-select: none;
    user-select: none;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;
    z-index: 6000 !important;
}

body.global-map-active {
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

.global-map-ui {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
    pointer-events: none; 
    padding: calc(10px + env(safe-area-inset-top)) 16px 20px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.global-map-ui .gh-search-box {
    flex: 1;
    height: 40px !important;
    border-radius: 20px !important; 
    background: rgba(30, 30, 30, 0.6) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    display: flex;
    align-items: center;
    padding: 0 4px 0 12px !important; 
    transition: 0.2s;
}

.global-map-ui #global-map-search {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important; 
    height: 100% !important;
    padding: 0 8px !important;
    font-size: 15px !important;
    border-radius: 0 !important;
    font-weight: 500;
}

.global-map-ui #global-map-search::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.global-map-ui .gh-search-icon svg,
.global-map-ui .gh-filter-icon svg {
    stroke: #ffffff !important; 
    opacity: 1 !important;
}

.global-map-ui .gh-search-icon {
    padding-left: 4px !important;
    opacity: 1 !important;
}
.global-map-ui .gh-filter-icon {

    color: #ffffff !important;

}

.gm-header {
    display: flex;
    align-items: center;
    gap: 12px;

    pointer-events: none !important; 
    width: 100%;
}

.gm-top-actions {
    display: flex; 
    justify-content: flex-end; 
    margin-top: 10px; 
    padding-right: 0;

    pointer-events: none !important;
}

.gm-back-btn, 
.gm-search-box, 
.global-map-ui .gh-search-box,
.gm-style-toggle,
#gm-search-results-list {
    pointer-events: auto !important;
}
.gm-back-btn {

    width: 40px !important; 
    height: 40px !important;
    border-radius: 50%;

    background: rgba(30, 30, 30, 0.6) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;

    color: #ffffff !important;
    display: flex;
    align-items: center; 
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.1s;
}

.gm-back-btn::before {
    content: '' !important;
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12H4M4 12L10 18M4 12L10 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.gm-style-toggle {

    width: 40px !important; 
    height: 40px !important;
    border-radius: 50%;

    background: rgba(30, 30, 30, 0.6) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;

    color: #ffffff !important;
    display: flex;
    align-items: center; 
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.1s, background 0.2s;

    pointer-events: auto;
}

.gm-style-toggle:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.1) !important;
}

.gm-style-toggle svg {
    width: 20px;
    height: 20px;
}

.gm-search-box {
    flex: 1;
    height: 44px;
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 22px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    transition: 0.2s;
}

.gm-search-box:focus-within {
    border-color: var(--accent-color);
    background: rgba(30, 30, 30, 0.8);
}

.gm-search-icon { margin-right: 8px; font-size: 14px; opacity: 0.7; }

#global-map-search {
    background: transparent !important;
    border: none !important;
    color: white !important;
    height: 100% !important;
    padding: 0 !important;
    font-size: 16px !important;
    border-radius: 0 !important;
}

.gm-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-end; 
    pointer-events: none !important; 
}

.map-floating-controls {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    gap: 20px;
    pointer-events: none;
    z-index: 1005;

    transition: right 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.gm-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
}

.gm-btn:active { transform: scale(0.95); background: rgba(50,50,50,0.8); }

.gm-controls .map-location-btn {

    background: rgba(30, 30, 30, 0.6) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;

    color: white !important;

    pointer-events: auto !important; 
    cursor: pointer;
}

.gm-controls .map-location-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.1) !important;
}

.user-location-puck {
    position: relative;
    cursor: pointer;
    z-index: 1000 !important; 
    pointer-events: none !important; 
    backface-visibility: hidden;
    transform: translateZ(0);
}

.user-location-puck::after {
    content: '';
    position: absolute;

    top: 50%; 
    left: 50%;

    width: 100%; 
    height: 100%;
    border-radius: 50%;
    background: rgba(51, 144, 236, 0.6);
    z-index: -1;

    transform: translate(-50%, -50%) scale(1);
    animation: radarPulse 2s infinite ease-out;

    will-change: transform, opacity;
}

@keyframes radarPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(3.5); 
        opacity: 0;
    }
}

#gm-search-results-list.gm-search-results {

    position: absolute !important;

    top: 51px !important; 

    left: 0 !important; 
    right: 0 !important;

    margin-top: 0 !important;

    width: 100% !important;
    background: rgba(30, 30, 30, 0.95) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);

    max-height: 50vh;
    overflow-y: auto;
    padding: 0;

    z-index: 2500 !important;
}

#gm-search-results-list::-webkit-scrollbar { 
    display: none; 
}

.gm-result-item {
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.gm-result-item:last-child {
    border-bottom: none;
}

.gm-result-item:active {
    background: rgba(255, 255, 255, 0.1);
}

.gm-res-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
    opacity: 0.8;
}

.gm-res-text {
    flex: 1;
    font-size: 15px;
    color: white;
    line-height: 1.3;
    overflow: hidden;
}

.gm-res-sub {
    display: block; 
    font-size: 11px;
    color: #888;
    margin-top: 2px;

    display: -webkit-box;
    -webkit-line-clamp: 3;        
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

    white-space: normal;          
    line-height: 1.35;
}

.gm-scale-container {
    position: absolute;

    left: 8px !important; 

    top: 50%;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    gap: 6px; 

    pointer-events: none;
    z-index: 10;
}

.scale-bracket {
    width: 4px; 

    background: rgba(255, 255, 255, 0.5); 

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    border-radius: 10px;

    box-sizing: border-box;
    transition: height 0.2s ease-out;
}

.scale-text {
    color: rgba(255, 255, 255, 0.9); 
    font-size: 13px;
    font-weight: 700;
    font-family: 'SF Pro Text', -apple-system, sans-serif;

    text-shadow: 0 1px 4px rgba(0,0,0,0.8);

    min-width: 50px;
}

.global-map-ui #global-map-search:focus {

    border: none !important;
    border-color: transparent !important;

    box-shadow: none !important;

    outline: none !important;

    background: transparent !important;

    -webkit-tap-highlight-color: transparent !important;
}

.map-pin-bubble {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1e1e1e; 

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px; 
    cursor: pointer;
    position: relative;
    transform-origin: center center;
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s ease;

    border: 2px solid #ffffff; 
    box-shadow: none !important; 
    z-index: 100;
    color: #ffffff; 
}

.map-pin-bubble:hover,
.map-pin-bubble:active {
    transform: scale(1.15);
    z-index: 1000 !important;
}

.map-pin-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #ff453a;
    color: white;
    font-size: 8px;
    font-weight: 800;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    box-sizing: border-box;
    border: 2px solid var(--bg-color, #121212);
    box-shadow: none; 
    z-index: 10;
}

.map-cluster-bubble {
    width: 22px;
    height: 22px;
    font-size: 11px;

    border-radius: 50%;
    background: #DA5D03; 

    border: 2px solid #ffffff; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: white;
    cursor: pointer;

    box-shadow: none !important; 
    transition: transform 0.1s, width 0.2s, height 0.2s, background-color 0.3s, opacity 0.3s ease;
    z-index: 50;
}

.map-cluster-bubble:active {
    transform: scale(0.95);
}

#global-map-canvas.globe-spinning-idle .map-pin-bubble,
#global-map-canvas.globe-spinning-idle .map-cluster-bubble {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 1.5s ease-in-out !important;
}

.cluster-sm { width: 22px; height: 22px; font-size: 11px; }
.cluster-md { width: 26px; height: 26px; font-size: 12px; }
.cluster-lg { width: 32px; height: 32px; font-size: 13px; }

.cluster-digits-3 { font-size: 10px !important; }
.cluster-digits-4 { font-size: 9px !important; letter-spacing: -0.5px; }
.cluster-digits-5 { font-size: 8px !important; letter-spacing: -0.5px; }
.cluster-digits-6 { font-size: 7px !important; letter-spacing: -0.5px; }

@keyframes clusterPulse {
    0% { box-shadow: 0 0 0 0 var(--pulse-color, rgba(218, 93, 3, 0.6)); }
    70% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.cluster-pulsing {
    animation: clusterPulse 2s infinite;
}

.map-hub-bubble {
    width: 28px; 
    height: 28px; 
    font-size: 14px; 
    border-radius: 50%;
    background: #8A2BE2; 

    border: 2px solid #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;

    transition: transform 0.1s, background-color 0.3s, opacity 0.3s ease;
    z-index: 60; 
}

.map-hub-bubble:active {
    transform: scale(0.95);
}

.map-hub-badge {
    position: absolute;
    top: -3px; 
    right: -3px;
    background-color: #ff453a;
    color: white;
    font-size: 9px; 
    font-weight: 800;
    min-width: 15px; 
    height: 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-sizing: border-box;
    border: 2px solid var(--bg-color, #121212);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 10;
}

@keyframes hubPulse {
    0% { box-shadow: 0 0 0 0 rgba(138, 43, 226, 0.6); }
    70% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.hub-pulsing {
    animation: hubPulse 2s infinite;
}

.gm-back-btn,                   
.gm-style-toggle,               
.global-map-ui .gh-search-box,  
#btn-global-north,              
#btn-global-3d,                 
.gm-controls .map-location-btn, 
#btn-zoom-out-globe,            
.gm-zoom-btn,                   
#gm-search-results-list.gm-search-results, 
.maplibregl-popup-content,      
.maplibregl-popup-close-button, 
.showcase-action-btn            
{

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;

}

#gm-search-results-list.gm-search-results {
    background: rgba(27, 27, 27, 0.98) !important;
}

.nebula-layer {

    filter: none !important; 

    opacity: 0.4 !important; 
}

.stars-layer {

    filter: none !important;

    will-change: transform;
}

.guest-sticky-header {

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.gh-search-box,                     
.gh-map-btn:not(.map-pulse-ready)   
{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    background: rgba(0, 0, 0, 0.4) !important; 
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: none !important; 
}

#view-guest-filters .overlay-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    background: #1e1e1e !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4) !important;
}

.gh-search-card,      
.gh-smart-card,       
.gh-bento-card,       
.gh-vertical-card,    
.gh-hero-widget       
{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

.gh-card-like,
.gh-card-rating,
.gh-vc-badge,
.gh-hero-badge {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    background: rgba(40, 40, 40, 0.95) !important; 
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

#mini-map-canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; 
    left: 0;
    z-index: 0;
    border-radius: 16px; 

    background: transparent; 

    filter: none !important; 
    pointer-events: none; 
}

.gh-bento-card .gh-bc-overlay {

    background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%) !important;

    opacity: 0.8;
}

.mini-map-user-dot {
    width: 12px;
    height: 12px;
    background-color: #3390ec;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(51, 144, 236, 0.8);
    position: relative;
}

.mini-map-user-dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    border-radius: 50%;
    background: rgba(51, 144, 236, 0.5);
    animation: miniPulse 2s infinite;
}

@keyframes miniPulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

.mini-map-obj-dot {
    width: 8px;
    height: 8px;
    background-color: var(--accent-color); 
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.8); 
}

.debug-id-toast {
    position: fixed;
    bottom: 100px; 
    left: 16px;
    z-index: 10000;

    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 3px solid var(--accent-color); 
    border-radius: 8px;

    padding: 8px 12px;
    color: white;
    font-family: 'Courier New', monospace; 
    font-size: 12px;
    font-weight: 700;

    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none; 
}

.debug-id-toast.visible {
    opacity: 1;
    transform: translateX(0);
}

.fps-monitor {
    position: fixed;

    top: calc(70px + env(safe-area-inset-top)); 
    left: 16px;
    z-index: 2000;

    background: rgba(0, 0, 0, 0.75); 

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px; 

    padding: 8px 10px;
    color: #32d74b; 

    font-family: 'Courier New', monospace; 
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    white-space: pre; 

    pointer-events: none; 

    display: none; 
}

.fps-monitor.low { color: #ffd700; } 
.fps-monitor.critical { color: #ff453a; } 

.switch-row-item {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    margin-bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.sri-label {
    font-size: 14px;
    font-weight: 600;
    color: #eee;
}

#gs-effects-container.disabled {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(100%);
    transition: all 0.3s ease;
}

.sri-perf {
    font-size: 10px;
    font-weight: 600;
    margin-top: 3px;
    letter-spacing: 0.3px;
    opacity: 0.9;
}

.perf-low {
    color: #32d74b; 
}

.perf-mid {
    color: #ffd700; 
}

.perf-high {
    color: #ff453a; 
}

.switch-row-item > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.msg-system-row {
    display: flex;
    justify-content: center;
    margin: 16px 0;
    width: 100%;
    pointer-events: none;
}

.msg-system-bubble {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: #889cb5;
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 12px;
    text-align: center;
    font-weight: 600;
    max-width: 80%;
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.main-button.timer-locked {
    background: #2c2c2e !important;   
    color: #666 !important;           
    border: 1px solid #444 !important;
    box-shadow: none !important;
    cursor: default !important;
    pointer-events: none !important;
    opacity: 1 !important;            
}

.gh-review-card {
    flex: 0 0 auto;
    width: 260px; 
    height: auto;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 12px; 
    display: flex;
    flex-direction: column;
    scroll-snap-align: center;
    box-sizing: border-box;
}

.gh-review-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    margin-bottom: 10px;
}

.gh-review-user { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 14px; 
    font-weight: 700; 
    color: white; 
}

.gh-review-avatar { 
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 12px; 
    color: white; 
    font-weight: 800;
    flex-shrink: 0;
}

.gh-review-rating { 
    color: #ffd700; 
    font-size: 12px; 
    font-weight: 800;
}

.gh-review-text { 
    font-size: 13px; 
    color: #ccc; 
    line-height: 1.4; 
    display: -webkit-box; 
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; 
    line-clamp: 3;
    overflow: hidden; 
    text-overflow: ellipsis; 
    font-style: italic;

    flex: 1; 
}

.gh-review-obj { 

    margin-top: auto; 
    padding-top: 14px; 

    display: flex; 
    align-items: center; 
    gap: 12px; 
    cursor: pointer;
}

.gh-review-obj-img {
    width: 60px; 
    height: 60px;
    border-radius: 14px;
    background: #252525;
    flex-shrink: 0;
    overflow: hidden;
}

.gh-review-obj-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gh-review-obj-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.gh-review-obj-title {
    font-size: 13px; 
    font-weight: 700; 
    color: white; 
    line-height: 1.2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
}

.gh-review-obj-loc {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
}

.review-star {
    font-size: 40px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: color 0.2s, transform 0.1s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.review-star.active {
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.review-star:active {
    transform: scale(0.85);
}

.review-criterion-row {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.review-criterion-label {
    font-size: 13px;
    font-weight: 600;
    color: #ccc;
    margin-bottom: 8px;
    text-align: center;
}

.review-stars-group {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.review-star-small {
    font-size: 32px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: color 0.2s, transform 0.1s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.review-star-small.active {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.review-star-small:active {
    transform: scale(0.85);
}

.showcase-action-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;

    background: rgba(30, 30, 30, 0.6) !important; 

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    border: 1px solid rgba(255, 255, 255, 0.15) !important;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;

    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.1s, background 0.2s;
}

.showcase-action-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.1) !important;
}

.showcase-action-btn.fav-active svg {
    fill: #ff453a !important;
    stroke: #ffffff !important; 
    transition: fill 0.2s, stroke 0.2s;
}

.showcase-actions-group {
    position: absolute !important;
    pointer-events: auto !important;
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    right: 16px !important;
    display: flex;
    gap: 12px;
}

#view-photo-viewer {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100dvh !important;
    background-color: #000000 !important; 
    padding: 0 !important;
    padding-bottom: 0 !important; 
    margin: 0 !important;
    z-index: 21000 !important; 
    overflow: hidden !important;
    overscroll-behavior: none !important;
}

#photo-viewer-slider {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    flex: 1 !important;
}

body:has(#view-photo-viewer.active) .bottom-nav,
body:has(#view-photo-viewer.active) .glass-safe-area,
body:has(#view-qr-fullscreen.active) .bottom-nav,
body:has(#view-qr-fullscreen.active) .glass-safe-area {
    display: none !important;
}

#photo-viewer-slider::-webkit-scrollbar {
    display: none;
}

#view-photo-viewer .gallery-slide {
    flex: 0 0 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
    position: relative;
}

#view-photo-viewer .gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    background: transparent;
}

#guest-gallery, 
#obj-gallery-wrapper {
    will-change: transform;
    transform-origin: top center;
}

.range-display-container {
    display: flex;
    gap: 12px;
    align-items: center;
}

.range-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 10px 14px;
    transition: all 0.2s ease;
    cursor: pointer;
    min-width: 0;
    overflow: hidden;
}

.range-box.active {
    background: rgba(138, 43, 226, 0.1); 
    border-color: var(--accent-color);
    box-shadow: inset 0 0 0 1px var(--accent-color); 
}

.range-label {
    width: 100%;
    display: block;
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.range-box.active .range-label {
    color: var(--accent-color);
}

.range-val {
    width: 100%;
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.cal-week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
    font-size: 11px;
    color: #666;
    font-weight: 700;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

#tpl-guest-book-modal {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#custom-range-calendar,
#hourly-time-container {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 20px;
}
#custom-range-calendar::-webkit-scrollbar,
#hourly-time-container::-webkit-scrollbar {
    display: none;
}

.rc-month {
    margin-top: 16px;
    margin-bottom: 24px;
}

.rc-month-title {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
    text-transform: capitalize;
}

.rc-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 6px;
    column-gap: 0; 
}

.rc-day-wrapper {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.rc-day-wrapper.in-range::before,
.rc-day-wrapper.range-start::before,
.rc-day-wrapper.range-end::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 34px; 
    background: rgba(138, 43, 226, 0.15); 
    z-index: 0;
}

.rc-day-wrapper.in-range::before {
    left: 0; 
    right: 0;
}

.rc-day-wrapper.range-start::before {
    left: 50%; 
    right: 0;
}

.rc-day-wrapper.range-end::before {
    left: 0; 
    right: 50%;
}

.rc-day {
    width: 100%;
    height: 100%;
    max-width: 40px;
    max-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: white;
    border-radius: 50%;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: background 0.1s, transform 0.1s;
}

.rc-day:active:not(.disabled) {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.95);
}

.rc-day.selected {
    background: var(--accent-gradient) !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(138, 43, 226, 0.3);
}

.rc-day.disabled {
    color: #444 !important;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.15);
    background: transparent !important;
}

.rc-day.disabled:active {
    transform: none;
    background: transparent !important;
}

.rc-day.grayed-out {
    color: #888 !important;
    cursor: not-allowed;
    text-decoration: none; 
    background: transparent !important;
}

.rc-day.grayed-out:active {
    transform: none;
    background: transparent !important;
}

.rc-day.disabled:not(.selected) {
    color: #444 !important;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.15);
    background: transparent !important;
}

.rc-day.disabled:not(.selected):active {
    transform: none;
    background: transparent !important;
}

.rc-day.grayed-out:not(.selected) {
    color: #888 !important;
    cursor: not-allowed;
    text-decoration: none; 
    background: transparent !important;
}

.rc-day.grayed-out:not(.selected):active {
    transform: none;
    background: transparent !important;
}

.instr-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: background 0.2s;
}

.instr-card:focus-within {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.instr-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.instr-icon-input {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    text-align: center;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    font-size: 20px !important;
    padding: 0 !important;
    flex-shrink: 0;
    color: white !important;
}

.instr-title-input {
    flex: 1;
    height: 40px !important;
    min-height: 40px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2) !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: white !important;
    padding: 0 4px !important;
}

.instr-title-input:focus {
    border-bottom-color: var(--accent-color) !important;
    box-shadow: none !important;
}

.instr-delete-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 69, 58, 0.1);
    color: #ff453a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    transition: transform 0.1s, background 0.2s;
    flex-shrink: 0;
}

.instr-delete-btn:active {
    transform: scale(0.9);
    background: rgba(255, 69, 58, 0.2);
}

.instr-text-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: #ddd !important;
    line-height: 1.5 !important;
    resize: none !important; 
    overflow: hidden !important; 
    min-height: 80px !important;
}

.instr-text-input:focus {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.g-instr-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color); 
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.g-instr-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.g-instr-icon {
    width: 36px;
    height: 36px;
    background: rgba(255,255,255,0.05); 
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.g-instr-title {
    font-size: 15px;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

.g-instr-text {
    font-size: 14px;
    color: #ccc;
    line-height: 1.5;
    white-space: pre-wrap; 
    word-break: break-word;
    padding-left: 48px; 
}

.gift-catalog-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
    position: relative;
    overflow: hidden;
    text-align: center;
    aspect-ratio: 1 / 1.1; 
}

.gift-catalog-card:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.06);
}

.gift-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    filter: blur(25px);
    opacity: 0.2;
    z-index: 0;
    pointer-events: none;
}

.gift-emoji-container {
    position: relative;
    z-index: 1;
    font-size: 48px;
    margin-bottom: 8px;
    margin-top: auto;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
}

.gift-title {
    position: relative;
    z-index: 1;
    font-size: 13px;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
    line-height: 1.2;
}

.gift-price {
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-weight: 800;
    color: #ffd700; 
    margin-bottom: auto;
    background: rgba(255, 215, 0, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.gift-preview-emoji {
    font-size: 80px;
    margin-bottom: 16px;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.6));
}

.gift-preview-title {
    font-size: 18px;
    font-weight: 800;
    color: white;
    margin-bottom: 6px;
}

.gift-preview-price {
    font-size: 16px;
    font-weight: 700;
    color: #ffd700;
}

.gift-info-table {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
}

.gift-info-row {
    display: flex;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    align-items: center;
}

.gift-info-label {
    width: 100px;
    color: #888;
    font-size: 14px;
    font-weight: 500;
}

.gift-info-value {
    flex: 1;
    color: white;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end; 
    text-align: right;
}

.gi-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #444;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
    flex-shrink: 0;
}

.gi-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gift-price-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #ffd700;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 24px;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.1);
}

#view-gift-info-modal .overlay-card {
    padding: 0 !important; 
}

.gift-showcase-price {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: #ffd700;
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 800;
    margin-top: 6px;
}

.overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#view-gift-info-modal .overlay-card {
    padding: 20px !important;
}

.time-slots-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 12px;
    padding-bottom: 20px;
}

.time-slot {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 0;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.time-slot:active:not(.disabled) {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.1);
}

.time-slot.disabled {
    background: rgba(255, 255, 255, 0.02);
    color: #666;
    border-color: transparent;
    pointer-events: none;
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.2);
}

.time-slot.selected {
    background: var(--accent-gradient);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 10px rgba(218, 93, 3, 0.3);
}

.time-slot.in-range {
    background: rgba(218, 93, 3, 0.15);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.tz-hint {
    font-size: 11px;
    color: #888;
    text-align: center;
    margin-top: -12px;
    margin-bottom: 12px;
    padding: 0 20px;
}

.stat-period-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.stat-period-btn.active {
    background: rgba(255, 107, 0, 0.15); 
    border-color: rgba(255, 107, 0, 0.4);
    color: var(--accent-color);
}

.stat-period-btn:active {
    transform: scale(0.96);
    background: rgba(255, 255, 255, 0.1);
}

.stat-period-btn.active:active {
    background: rgba(255, 107, 0, 0.25);
}

.stat-period-btn.with-icon svg {
    opacity: 0.7;
    transition: transform 0.2s;
}

.stat-period-btn.with-icon.dropdown-open svg {
    transform: rotate(180deg);
}

#universal-bottom-sheet {
    width: 100%;
    max-width: var(--desktop-width, 480px);
    margin: 0 auto;
}

.cluster-sheet, 
.cs-list, 
#map-cluster-sheet, 
#universal-bottom-sheet {
    overscroll-behavior: none !important;
    touch-action: auto !important; 
}

.cs-header, 
.cs-drag-zone {
    touch-action: none !important; 
}

.cs-back-btn {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    cursor: pointer;
    margin-right: 12px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.cs-back-btn:active { 
    background: rgba(255,255,255,0.15); 
    color: white; 
}

.desktop-only {
    display: none !important;
}

@media (min-width: 1024px) {
    .desktop-only {
        display: flex !important;
    }

    body {
        background-color: #0d0d0d !important;
        overflow: hidden;
    }

    body.os-desktop {
        max-width: 100%;
        border: none;
        box-shadow: none;
    }

    .bottom-nav, 
    .glass-safe-area {
        display: none !important;
    }

    #view-global-map,
    #view-map-picker {
        padding: 0 !important;
        left: 260px !important; 
        width: calc(100% - 260px) !important; 
        border-radius: 24px 0 0 24px !important; 
        transform: none !important;
    }

    #view-global-map:not(.active),
    #view-map-picker:not(.active) {
        display: none !important;
    }

    body.map-active #desktop-right-sidebar,
    body.map-mode #desktop-right-sidebar {
        display: none !important;
    }

    #desktop-right-sidebar {
        position: fixed; 
        top: 0; 

        left: calc(50% + 240px); 
        width: 260px; 
        height: 100vh;
        background: transparent; 
        box-sizing: border-box; 
        z-index: 10000;
    }

    .view {
        left: calc(50% - 240px) !important;
        width: 480px !important; 
        transform: none !important; 
        border-radius: 24px !important; 
        background: #111111 !important;
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    }

    .view:not(.active):not(.overlay-modal) {
        display: none !important;
    }

    .view.overlay-modal {
        left: calc(50% - 240px) !important;
        width: 480px !important;
        transform: none !important;
    }

    #view-dashboard > .glass-sticky-header .header-back-arrow,
    #view-guest-search > .glass-sticky-header .header-back-arrow {
        display: none !important;
    }

    #desktop-sidebar {
        position: fixed; 
        top: 0; 
        left: calc(50% - 500px); 
        width: 260px; 
        height: 100vh;
        background: transparent; 
        flex-direction: column; 
        padding: 24px 16px;
        box-sizing: border-box; 
        z-index: 10000;
        transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
    }

    body.map-active #desktop-sidebar,
    body.map-mode #desktop-sidebar {
        left: 0 !important;
    }
    .sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; padding: 0 8px; }
    .sidebar-logo { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: white; letter-spacing: 0.5px; }
    .sidebar-version { font-size: 10px; color: #666; background: rgba(255, 255, 255, 0.05); padding: 2px 6px; border-radius: 6px; }
    .sidebar-mode-toggle {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
        border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 12px 16px;
        display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin-bottom: 30px; transition: background 0.2s, transform 0.1s;
    }
    .sidebar-mode-toggle:hover { background: rgba(255, 255, 255, 0.08); }
    .sidebar-mode-toggle:active { transform: scale(0.98); }
    .mode-info { display: flex; align-items: center; gap: 10px; }
    .mode-icon { font-size: 20px; }
    .mode-text { font-size: 14px; font-weight: 700; color: white; }
    .mode-arrow { color: var(--accent-color); font-size: 16px; }

    .sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding-right: 4px; }
    .sidebar-nav::-webkit-scrollbar { width: 4px; }
    .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
    .sidebar-nav-title { font-size: 10px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 1px; margin: 10px 0 6px 12px; }
    .sidebar-item { 
        display: flex; 
        align-items: center; 
        padding: 12px; 
        border-radius: 12px; 
        color: #aaa; 
        font-size: 14px; 
        font-weight: 600; 
        cursor: pointer; 
        transition: background 0.2s, color 0.2s, box-shadow 0.2s; 
        position: relative; 
    }
    .sidebar-item .item-icon { font-size: 18px; width: 28px; text-align: center; margin-right: 8px; opacity: 0.7; transition: opacity 0.2s; }
    .sidebar-item:hover { background: rgba(255, 255, 255, 0.05); color: white; }
    .sidebar-item:hover .item-icon { opacity: 1; }
    .sidebar-item.active {
        background: rgba(218, 93, 3, 0.12) !important; 
        color: var(--accent-color) !important; 
        box-shadow: inset 0 0 0 1px rgba(218, 93, 3, 0.15); 

    }
    .sidebar-item.active .item-icon {
        opacity: 1;
        filter: drop-shadow(0 0 5px rgba(218, 93, 3, 0.4)); 
    }

    .sidebar-item:not(.active):hover {
        background: rgba(255, 255, 255, 0.03);
        color: #eee;
    }

    .sidebar-badge { position: absolute; right: 12px; background: #ff453a; color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; box-shadow: 0 2px 5px rgba(255, 69, 58, 0.4); }

    .sidebar-footer { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
    .sidebar-profile { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 8px; border-radius: 16px; transition: background 0.2s; }
    .sidebar-profile:hover { background: rgba(255, 255, 255, 0.05); }
    .sp-avatar { width: 40px; height: 40px; border-radius: 50%; background: #333; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; flex-shrink: 0; overflow: hidden; }
    .sp-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .sp-info { flex: 1; overflow: hidden; }
    .sp-name { font-size: 14px; font-weight: 700; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sp-status { font-size: 11px; color: #888; margin-top: 2px; }
    .sp-settings-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: #aaa; transition: 0.2s; }
    .sp-settings-icon:hover { background: rgba(255, 255, 255, 0.1); color: white; }

    .view::-webkit-scrollbar { width: 6px; }
    .view::-webkit-scrollbar-track { background: transparent; }
    .view::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
    .view::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }

    body.map-active .fps-monitor,
    body.map-mode .fps-monitor {
        left: 276px !important; 
    }

    .global-map-ui {
        transition: padding-right 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }

    .global-map-ui:has(#map-cluster-sheet.desktop-active) .map-floating-controls {
        right: 396px !important;
    }

    .global-map-ui:has(#map-cluster-sheet.desktop-active.desktop-collapsed) .map-floating-controls {
        right: 84px !important;
    }

    #map-cluster-sheet {
        left: auto !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 380px !important;
        height: 100vh !important;
        border-radius: 24px 0 0 24px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: none !important;
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5) !important;

        transform: translateX(100%) !important;
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    }

    #map-cluster-sheet.desktop-active {
        transform: translateX(0) !important;
    }

    #map-cluster-sheet .cs-drag-zone {
        display: none !important; 
    }

    #map-cluster-sheet .cs-header {
        padding-top: 24px !important;
        padding-bottom: 20px !important;
        background: transparent !important;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        margin-bottom: 10px;
        cursor: default !important;
    }

    #ubs-overlay {
        justify-content: center !important;
        align-items: center !important;
        background: rgba(0, 0, 0, 0.8) !important;
        padding: 20px !important;
    }

    #universal-bottom-sheet {
        position: relative !important;
        height: auto !important;
        max-height: 85vh !important;
        border-radius: 24px !important;
        width: 100% !important;
        max-width: 480px !important;
        bottom: auto !important;

        transition: opacity 0.2s ease, transform 0.2s ease !important;
        transform: scale(0.95) !important;
        opacity: 0 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
    }

    #universal-bottom-sheet[style*="translateY(0px)"] {
        transform: scale(1) !important;
        opacity: 1 !important;
    }

    #universal-bottom-sheet .cs-drag-zone {
        display: none !important;
    }

    #universal-bottom-sheet .cs-header {
        padding-top: 20px !important;
        pointer-events: none !important; 
    }

    #universal-bottom-sheet .cs-back-btn,
    #universal-bottom-sheet .cs-title {
        pointer-events: auto !important;
    }

    #cs-desktop-toggle {
        display: flex !important;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 8px;
        background: rgba(255,255,255,0.05);
        color: #888;
        transition: transform 0.3s ease, background 0.2s, color 0.2s;
        flex-shrink: 0;
    }
    #cs-desktop-toggle:hover {
        background: rgba(255,255,255,0.15);
        color: #fff;
    }
    #cs-desktop-toggle svg {
        transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    #map-cluster-sheet.desktop-active.desktop-collapsed {

        transform: translateX(calc(100% - 68px)) !important;
    }

    #map-cluster-sheet.desktop-active.desktop-collapsed #cs-desktop-toggle svg {
        transform: rotate(180deg);
    }

    .mouse-dragging {
        cursor: grabbing !important;
        scroll-behavior: auto !important; 
        scroll-snap-type: none !important; 
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    .mouse-dragging * {
        cursor: grabbing !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    body.hide-sidebar-desktop #desktop-sidebar,
    body.hide-sidebar-desktop #desktop-right-sidebar {
        display: none !important;
    }

    body.os-desktop .toast-container {
        top: 24px !important;
        left: auto !important;
        right: 24px !important;
        transform: none !important;
        width: 340px !important;
        align-items: flex-end; 
    }

    body.os-desktop .toast {

        transform: translateX(40px) scale(0.95);
        transform-origin: right center;
    }

    body.os-desktop .toast.visible {
        transform: translateX(0) scale(1);
    }
}

.ps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.ps-card {
    background: rgba(30, 30, 30, 0.6);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    min-height: 110px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.ps-card.wide {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    min-height: auto;
}

.ps-card-bg-glow {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(218, 93, 3, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.ps-icon {
    font-size: 24px;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.ps-val {
    font-size: 26px;
    font-weight: 800;
    color: white;
    line-height: 1.1;
    margin-bottom: 4px;
}

.ps-label {
    font-size: 11px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.3;
}

.ps-sub {
    font-size: 11px;
    color: var(--success-color);
    margin-top: 4px;
    font-weight: 600;
}

.achieve-card {
    flex-shrink: 0;
    width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
}

.achieve-icon-box {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(218, 93, 3, 0.15));
    border: 1px solid rgba(255, 215, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.1);
    position: relative;
    transition: transform 0.2s;
}

.achieve-card:active .achieve-icon-box {
    transform: scale(0.95);
}

.achieve-title {
    font-size: 11px;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

.achieve-desc {
    font-size: 9px;
    color: #888;
    line-height: 1.2;
}

.achieve-card.locked {
    opacity: 0.5;
    filter: grayscale(100%);
}

.achieve-card.locked .achieve-icon-box {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.achieve-card.locked .achieve-title {
    color: #888;
}

.wallet-card {
    background: linear-gradient(135deg, #1c2636, #0d121a);
    border: 1px solid rgba(51, 144, 236, 0.3);
    border-radius: 24px !important;
    padding: 24px;
    margin-top: 10px;
    box-shadow: 0 10px 30px rgba(51, 144, 236, 0.15);
    position: relative;
    overflow: hidden;
}

.wallet-card::before {
    content: '';
    position: absolute;
    top: -50%; right: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(51, 144, 236, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

.pkg-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px !important;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.2s;
}

.pkg-card:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.05);
}

.pkg-mesh {
    font-size: 20px;
    font-weight: 800;
    color: white;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pkg-price-btn {
    background: rgba(51, 144, 236, 0.15);
    color: #3390ec;
    border: 1px solid rgba(51, 144, 236, 0.3);
    padding: 8px 16px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 14px;
    pointer-events: none;
}

@keyframes pulseMic {
    0% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.4); background: rgba(255, 69, 58, 0.2); }
    70% { box-shadow: 0 0 0 10px rgba(255, 69, 58, 0); background: rgba(255, 69, 58, 0.4); }
    100% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0); background: rgba(255, 69, 58, 0.2); }
}

.mic-listening {
    animation: pulseMic 1.5s infinite !important;
    border-radius: 50% !important;
    color: #ff453a !important;
}
.mic-listening svg {
    stroke: #ff453a !important;
}

.ai-skeleton-loader {
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 60px 20px; 
    color: #a855f7;
    text-align: center;
}

.ai-skeleton-icon { 
    font-size: 48px; 
    animation: breathe 2s infinite; 
    margin-bottom: 16px; 
    filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.6)); 
}

@keyframes mapPulseReady {
    0% { box-shadow: 0 0 0 0 rgba(138, 43, 226, 0.6); }
    70% { box-shadow: 0 0 0 12px rgba(138, 43, 226, 0); }
    100% { box-shadow: 0 0 0 0 rgba(138, 43, 226, 0); }
}

.map-pulse-ready {
    animation: mapPulseReady 2s infinite ease-out !important;
    background: rgba(138, 43, 226, 0.15) !important;
    border-color: rgba(138, 43, 226, 0.6) !important;
    color: #e0b0ff !important;
}

.map-pulse-ready svg {
    stroke: #e0b0ff !important;
}

.voice-listening-overlay {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px) scale(0.8);
    z-index: 8500;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
}

.voice-listening-overlay.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto; 
    cursor: pointer;      
}

.voice-listening-overlay.visible:active .voice-mic-icon {
    transform: scale(0.9);
    background: rgba(218, 93, 3, 0.8);
}
body.theme-guest .voice-listening-overlay.visible:active .voice-mic-icon {
    background: rgba(138, 43, 226, 0.8);
}

body.keyboard-open .voice-listening-overlay {
    bottom: calc(var(--app-height, 100vh) / 2);
}

.voice-mic-icon {
    position: relative;
    z-index: 2;
    width: 60px;
    height: 60px;
    background: var(--accent-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.voice-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(218, 93, 3, 0.6);
    border-radius: 50%;
    animation: ripplePulse 2s infinite ease-out;
    z-index: 1;
}

body.theme-guest .voice-ripple {
    background: rgba(138, 43, 226, 0.6);
}

.voice-ripple.delay-1 { animation-delay: 0.6s; }
.voice-ripple.delay-2 { animation-delay: 1.2s; }

@keyframes ripplePulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

.ai-siri-overlay {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(20px) scale(0.8);
    z-index: 8500;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ai-siri-overlay.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

body.keyboard-open .ai-siri-overlay {
    bottom: calc(var(--app-height, 100vh) / 2);
}

.ai-siri-orb {
    position: relative;
    width: 80px;
    height: 80px;
    filter: blur(12px) contrast(1.2);
    animation: siriFloat 4s ease-in-out infinite;
}

.siri-blob {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 50%;
    mix-blend-mode: screen;
    will-change: transform;
}

.siri-color-1 {
    background: radial-gradient(circle at 30% 30%, #ff0055, transparent 60%);
    animation: siriSpin 3s linear infinite;
}

.siri-color-2 {
    background: radial-gradient(circle at 70% 60%, #00d2ff, transparent 60%);
    animation: siriSpin 4s linear infinite reverse;
}

.siri-color-3 {
    background: radial-gradient(circle at 40% 70%, #8a2be2, transparent 60%);
    animation: siriSpin 5s linear infinite;
}

.siri-center {
    background: radial-gradient(circle at 50% 50%, #ffffff 10%, transparent 50%);
    opacity: 0.8;
    animation: siriPulse 2s ease-in-out infinite alternate;
}

@keyframes siriSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes siriPulse {
    0% { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1.2); opacity: 1; }
}

@keyframes siriFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

:root {
    --portal-bg: #090a0f; 
}

.map-portal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--portal-bg);
    z-index: 5; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: auto; 
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
}

.map-portal.portal-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.portal-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0;

    will-change: transform, opacity; 
    animation: ambientWarp 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.ring-1 {
    width: 40vw; height: 40vw;
    box-shadow: inset 0 0 50px rgba(218, 93, 3, 0.8), 0 0 50px rgba(218, 93, 3, 0.4);
    border: 2px solid rgba(218, 93, 3, 0.2);
    animation-delay: 0s;
}

.ring-2 {
    width: 60vw; height: 60vw;
    box-shadow: inset 0 0 60px rgba(138, 43, 226, 0.8), 0 0 60px rgba(138, 43, 226, 0.4);
    border: 2px solid rgba(138, 43, 226, 0.2);
    animation-delay: 1s;
}

.ring-3 {
    width: 50vw; height: 50vw;
    box-shadow: inset 0 0 40px rgba(218, 93, 3, 0.6), 0 0 40px rgba(218, 93, 3, 0.3);
    border: 2px solid rgba(218, 93, 3, 0.1);
    animation-delay: 2s;
}

.ring-4 {
    width: 70vw; height: 70vw;
    box-shadow: inset 0 0 80px rgba(138, 43, 226, 0.6), 0 0 80px rgba(138, 43, 226, 0.3);
    border: 2px solid rgba(138, 43, 226, 0.1);
    animation-delay: 3s;
}

@keyframes ambientWarp {
    0% {
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0;
    }
    40% {
        opacity: 1; 
    }
    100% {
        transform: translate(-50%, -50%) scale(4); 
        opacity: 0;
    }
}

#guest-spotlight-overlay {
    position: fixed;
    top: calc(98px + env(safe-area-inset-top, 0px)); 
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(18, 18, 18, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 1500;

    overflow-y: auto;
    overflow-x: hidden !important; 
    box-sizing: border-box !important; 

    -webkit-overflow-scrolling: touch; 
    overscroll-behavior-y: none; 
    overscroll-behavior-x: auto;
    transform: translateZ(0);          

    padding: 16px;
    padding-bottom: max(100px, env(safe-area-inset-bottom, 0px));
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

#guest-spotlight-overlay.visible {
    opacity: 1;
}

.spotlight-section {
    margin-bottom: 24px;
}

.spotlight-section-title {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.spotlight-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.2s;
}

.spotlight-item:last-child {
    border-bottom: none;
}

.spotlight-item:active {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 8px;
    margin: 0 -8px;
}

.spotlight-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.spotlight-text {
    font-size: 15px;
    color: #eee;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spotlight-highlight {
    color: white;
    font-weight: 800;
}

.spotlight-obj-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: transform 0.1s;
}

.spotlight-obj-card:active {
    background: rgba(255, 255, 255, 0.08);
    transform: scale(0.98);
}

.spotlight-obj-img {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    background: #333;
    flex-shrink: 0;
}

.spotlight-obj-info {
    flex: 1;
    overflow: hidden;
}

.spotlight-obj-name {
    font-size: 14px;
    font-weight: 700;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.spotlight-obj-price {
    font-size: 13px;
    color: var(--accent-color);
    font-weight: 800;
}

.color-picker-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: transform 0.2s, outline-offset 0.2s;
}

.color-picker-dot.active {
    transform: scale(1.1);
    outline: 2px solid white;
    outline-offset: 3px;
}

.color-picker-dot.bw-dot {
    background: linear-gradient(135deg, #ffffff 49.5%, #111111 50.5%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    border: none;
}

.ios-list-group {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    overflow: hidden;
}

.ios-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
}

.ios-list-item:last-child {
    border-bottom: none;
}

.ios-list-item.clickable {
    cursor: pointer;
}

.ios-list-item.clickable:active {
    background: rgba(255, 255, 255, 0.08);
}

.ios-list-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.ios-list-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.ios-list-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ios-list-title {
    font-size: 15px;
    font-weight: 600;
    color: white;
    margin-bottom: 2px;
}

.ios-list-sub {
    font-size: 11px;
    color: #888;
}

.ios-list-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #aaa;
}

.ios-chevron {
    font-size: 18px;
    color: #666;
    margin-top: -2px;
}

.floating-action-footer {
    position: relative !important;
    flex-shrink: 0 !important;
    padding: 16px !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
    background: var(--bg-color) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    z-index: 10 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin-top: auto !important;
    pointer-events: auto !important;
}

.floating-action-footer > * {
    pointer-events: auto; 
}

body.os-desktop .floating-action-footer {
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

#obj-input-name {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 0 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    padding: 0 0 8px 0 !important;
    height: auto !important;
    color: white !important;
    box-shadow: none !important;
    width: 100%;
    transition: border-color 0.2s;
}
#obj-input-name:focus {
    background: transparent !important;
    border-bottom-color: var(--accent-color) !important;
}

#obj-input-def-price {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 24px !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    height: 56px !important;
    color: var(--accent-color) !important;
    padding-left: 16px !important;
    padding-right: 60px !important;
    transition: background 0.2s, border-color 0.2s;
}
#obj-input-def-price:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

#obj-input-deposit {
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 24px !important;
    height: 44px !important;
    font-size: 16px !important;
    color: white !important;
    padding-left: 12px !important;
    transition: background 0.2s, border-color 0.2s;
}
#obj-input-deposit:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

#obj-min-hours,
#obj-min-days {
    height: 44px !important;
    border-radius: 24px !important;
    background: rgba(0,0,0,0.2) !important;
    color: white !important;
    font-size: 16px !important;
    padding: 0 16px !important;
    width: 100%;
    border: 1px solid rgba(255,255,255,0.05) !important;
    box-sizing: border-box;
    transition: background 0.2s, border-color 0.2s;
}
#obj-min-hours:focus,
#obj-min-days:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.ios-settings-group {
    background: rgba(35, 35, 35, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px; 
    margin-bottom: 24px;
    overflow: hidden;

}

.ios-settings-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    min-height: 44px;
    cursor: pointer;
    position: relative;
    background-color: transparent;
    transition: background-color 0.2s;
}

.ios-settings-item:active {
    background-color: rgba(255, 255, 255, 0.03);
}

.ios-settings-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 70px; 
    right: 16px;
    height: 1px;
    background-color: var(--border-color);
}

.ios-settings-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    flex-shrink: 0;
    font-size: 20px;
}

.ios-settings-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.ios-settings-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 2px;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ios-settings-sub {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ios-settings-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

html body *, 
html body [id], 
html body[class], 
html body [class] [class] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

}

*:not(#fake1):not(#fake2):not(#fake3),
*:not(#fake1):not(#fake2):not(#fake3)::before,
*:not(#fake1):not(#fake2):not(#fake3)::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.contract-document-preview {
    background: #fff !important;
    color: #000 !important;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14pt;
    line-height: 1.5;
    border-radius: 16px !important;
}

.contract-document-preview h3 {
    text-align: center;
    font-size: 16pt;
    margin-bottom: 20px;
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
    margin-top: 0;
}

.contract-document-preview h4 {
    font-size: 14pt;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #000;
}

.contract-document-preview p {
    margin-top: 0;
    margin-bottom: 10px;
    text-align: justify;
    color: #000;
}

.contract-document-preview .header-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    font-size: 12pt;
    color: #000;
}

.contract-document-preview .signatures {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
    font-size: 12pt;
    color: #000;
}

.contract-document-preview .sign-block {
    width: 45%;
    color: #000;
}

.contract-document-preview .line {
    border-bottom: 1px solid #000;
    width: 100%;
    display: inline-block;
    margin-top: 5px;
    height: 20px;
}

.contract-document-preview .subtext {
    font-size: 10pt;
    text-align: center;
    display: block;
    margin-top: 2px;
    color: #555;
}

.contract-document-preview table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    color: #000;
}

.contract-document-preview th,
.contract-document-preview td {
    border: 1px solid #000;
    padding: 8px;
    text-align: left;
    font-size: 12pt;
    color: #000;
}

.contract-document-preview .fill-field {
    border-bottom: 1px solid #000;
    display: inline-block;
    min-width: 150px;
    text-align: center;
    font-style: italic;
    min-height: 1.2em;
    color: #000;
}

.contract-document-preview span.contract-field {
    font-style: italic;
    color: #000 !important;
}

.empty-state-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; 
    padding-top: 12vh;           
    text-align: center;
    color: #888;
    box-sizing: border-box;
    width: 100%;
    height: 100%;                
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 24px;
    flex-shrink: 0;

    line-height: 1;
    padding-bottom: 4px;
    box-sizing: border-box;
}

.empty-state-icon.accent {
    background: rgba(218, 93, 3, 0.1);
    border: 1px solid rgba(218, 93, 3, 0.2);
    box-shadow: 0 0 40px rgba(218, 93, 3, 0.2);
    color: var(--accent-color);
}
.empty-state-icon.blue {
    background: rgba(51, 144, 236, 0.1);
    border: 1px solid rgba(51, 144, 236, 0.2);
    box-shadow: 0 0 40px rgba(51, 144, 236, 0.2);
}
.empty-state-icon.green {
    background: rgba(50, 215, 75, 0.1);
    border: 1px solid rgba(50, 215, 75, 0.2);
    box-shadow: 0 0 40px rgba(50, 215, 75, 0.2);
}
.empty-state-icon.purple {
    background: rgba(138, 43, 226, 0.1);
    border: 1px solid rgba(138, 43, 226, 0.2);
    box-shadow: 0 0 40px rgba(138, 43, 226, 0.2);
}
.empty-state-icon.red {
    background: rgba(255, 69, 58, 0.1);
    border: 1px solid rgba(255, 69, 58, 0.2);
    box-shadow: 0 0 40px rgba(255, 69, 58, 0.2);
}
.empty-state-icon.yellow {
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.2);
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.2);
}

input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field {
    display: inline-block !important; 
    padding: 2px 2px !important;
    border-radius: 6px !important;
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.2s !important;
}

input[type="date"]:valid::-webkit-datetime-edit-month-field:hover,
input[type="date"]:focus::-webkit-datetime-edit-month-field:hover,
input[type="date"]:valid::-webkit-datetime-edit-day-field:hover,
input[type="date"]:focus::-webkit-datetime-edit-day-field:hover,
input[type="date"]:valid::-webkit-datetime-edit-year-field:hover,
input[type="date"]:focus::-webkit-datetime-edit-year-field:hover,
input[type="time"]:valid::-webkit-datetime-edit-hour-field:hover,
input[type="time"]:focus::-webkit-datetime-edit-hour-field:hover,
input[type="time"]:valid::-webkit-datetime-edit-minute-field:hover,
input[type="time"]:focus::-webkit-datetime-edit-minute-field:hover {
    color: var(--accent-color) !important;
    transform: scale(1.15) !important;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
.styled-date::-webkit-calendar-picker-indicator,
.styled-time-input::-webkit-calendar-picker-indicator,
#legal-passport-date::-webkit-calendar-picker-indicator,
.dnd-time-input::-webkit-calendar-picker-indicator {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    background-color: transparent !important;
    filter: invert(1) opacity(0.6) !important;
    transition: filter 0.2s !important;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
.styled-date::-webkit-calendar-picker-indicator:hover,
.styled-time-input::-webkit-calendar-picker-indicator:hover,
#legal-passport-date::-webkit-calendar-picker-indicator:hover,
.dnd-time-input::-webkit-calendar-picker-indicator:hover {
    filter: invert(1) opacity(1) !important;
}

@keyframes svg-spin { 100% { transform: rotate(360deg); } }
        .svg-spin-anim { animation: svg-spin 1s linear infinite; transform-origin: center; }

.glass-title-capsule.gold-status-card {
    background: rgba(30, 30, 30, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

#chat-header-avatar.gold-status-avatar {
    background: #1a1a1a !important;
    color: #E2C062 !important; 
    border: 1px solid rgba(255, 215, 0, 0.4) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

#view-crop-modal {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #000;
    z-index: 25000 !important;
    display: none;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.2s ease;
}
#crop-workspace {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: #000;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
#crop-image {
    position: absolute;
    top: 0; left: 0;
    transform-origin: top left;
    pointer-events: none;
    will-change: transform;
}
#crop-box-border {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;

    box-shadow: 0 0 0 4000px rgba(0,0,0,0.85);
}