/* ==========================================================================
   1337 FORUM — macOS HIG DESIGN SYSTEM (Sonoma / Sequoia Vibrancy)
   Supports Dual Mode: macOS Dark & macOS Light with Zero-AI-Slop Precision
   ========================================================================== */

:root {
    --mac-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Plus Jakarta Sans", system-ui, sans-serif;
    --mac-radius: 16px;
    --mac-radius-sm: 10px;
    --mac-radius-pill: 980px;
    --mac-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   DARK MODE (macOS Dark Vibrancy)
   ========================================================================== */
html[data-site-mode="night"],
html.theme-dark {
    --mac-canvas-bg: #070b14;
    --mac-canvas-grid: rgba(56, 189, 248, 0.04);
    --mac-glass-bg: rgba(14, 21, 37, 0.82);
    --mac-glass-hover: rgba(18, 28, 50, 0.9);
    --mac-titlebar-bg: rgba(18, 27, 46, 0.85);
    --mac-border: rgba(255, 255, 255, 0.1);
    --mac-border-subtle: rgba(255, 255, 255, 0.05);
    --mac-border-focus: #38bdf8;
    --mac-text: #f8fafc;
    --mac-text-muted: #94a3b8;
    --mac-text-dim: #64748b;
    --mac-accent: #38bdf8;
    --mac-accent-subtle: rgba(56, 189, 248, 0.12);
    --mac-accent-gradient: linear-gradient(135deg, #0ea5e9 0%, #2563eb 100%);
    --mac-card-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --mac-segmented-bg: rgba(255, 255, 255, 0.06);
    --mac-segmented-thumb: rgba(255, 255, 255, 0.16);
    --mac-input-bg: rgba(10, 16, 30, 0.8);
    --mac-input-border: rgba(255, 255, 255, 0.14);
    --mac-code-bg: rgba(10, 16, 30, 0.9);
    --mac-callout-bg: rgba(56, 189, 248, 0.06);
    --mac-callout-border: rgba(56, 189, 248, 0.22);
}

/* ==========================================================================
   LIGHT MODE (macOS Light Vibrancy)
   ========================================================================== */
html[data-site-mode="day"],
html.theme-light {
    --mac-canvas-bg: #f4f6fa;
    --mac-canvas-grid: rgba(0, 0, 0, 0.035);
    --mac-glass-bg: rgba(255, 255, 255, 0.85);
    --mac-glass-hover: rgba(255, 255, 255, 0.95);
    --mac-titlebar-bg: rgba(246, 248, 252, 0.95);
    --mac-border: rgba(0, 0, 0, 0.09);
    --mac-border-subtle: rgba(0, 0, 0, 0.04);
    --mac-border-focus: #007aff;
    --mac-text: #0f172a;
    --mac-text-muted: #64748b;
    --mac-text-dim: #94a3b8;
    --mac-accent: #007aff;
    --mac-accent-subtle: rgba(0, 122, 255, 0.1);
    --mac-accent-gradient: linear-gradient(135deg, #007aff 0%, #0056b3 100%);
    --mac-card-shadow: 0 16px 40px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    --mac-segmented-bg: rgba(0, 0, 0, 0.05);
    --mac-segmented-thumb: #ffffff;
    --mac-input-bg: #ffffff;
    --mac-input-border: rgba(0, 0, 0, 0.15);
    --mac-code-bg: #f1f4f9;
    --mac-callout-bg: rgba(0, 122, 255, 0.05);
    --mac-callout-border: rgba(0, 122, 255, 0.2);
}

/* ==========================================================================
   macOS WINDOW TITLEBAR & TRAFFIC LIGHTS
   ========================================================================== */
.macos-window-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--mac-border);
    background: var(--mac-titlebar-bg);
    border-radius: var(--mac-radius) var(--mac-radius) 0 0;
    user-select: none;
}

.macos-traffic-lights {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.macos-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

.macos-dot--red {
    background: #ff5f56;
    border: 0.5px solid rgba(180, 40, 35, 0.6);
}

.macos-dot--yellow {
    background: #ffbd2e;
    border: 0.5px solid rgba(180, 125, 20, 0.6);
}

.macos-dot--green {
    background: #27c93f;
    border: 0.5px solid rgba(25, 140, 45, 0.6);
}

.macos-window-title {
    font-family: var(--mac-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--mac-text-muted);
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.macos-window-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ==========================================================================
   macOS THEME SWITCHER COMPONENT (PRECISION HIG SEGMENTED CONTROL)
   ========================================================================== */
.macos-theme-switcher {
    display: inline-grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    position: relative !important;
    padding: 3px !important;
    height: 32px !important;
    width: 154px !important;
    box-sizing: border-box !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    user-select: none !important;
}

html[data-site-mode="day"] .macos-theme-switcher {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

.macos-theme-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 24px !important;
    width: 100% !important;
    padding: 0 4px !important;
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #94a3b8 !important;
    font-family: var(--mac-font) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 2 !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

html[data-site-mode="day"] .macos-theme-btn {
    color: #64748b !important;
}

.macos-theme-btn svg {
    width: 13px !important;
    height: 13px !important;
    stroke-width: 2 !important;
    flex-shrink: 0 !important;
    transition: transform 0.18s ease !important;
}

.macos-theme-btn:hover {
    color: #f8fafc !important;
}

html[data-site-mode="day"] .macos-theme-btn:hover {
    color: #0f172a !important;
}

.macos-theme-btn:hover svg {
    transform: scale(1.08) !important;
}

.macos-theme-btn.active {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -0.5px 0 rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    font-weight: 700 !important;
}

html[data-site-mode="day"] .macos-theme-btn.active {
    color: #0f172a !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0.5px 1px rgba(0, 0, 0, 0.06), inset 0 0.5px 0.5px rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Mobile Navbar Optimization */
@media (max-width: 530px) {
    .header-brand {
        display: inline-flex !important;
        align-items: center !important;
        margin-left: 6px !important;
    }
    .header-brand img {
        height: 26px !important;
        max-height: 26px !important;
        width: auto !important;
    }
    .navbar-fixed-top .container-fluid {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .macos-theme-switcher {
        width: 66px !important;
        min-width: 66px !important;
        max-width: 66px !important;
        height: 28px !important;
        padding: 2px !important;
        gap: 2px !important;
    }
    .macos-theme-btn {
        height: 22px !important;
        padding: 0 !important;
        justify-content: center !important;
    }
    .macos-theme-btn span {
        display: none !important;
    }
    .macos-theme-btn svg {
        width: 13px !important;
        height: 13px !important;
    }
}

/* ==========================================================================
   GLOBAL COOKIE CONSENT BANNER — macOS FLOATING TOAST
   ========================================================================== */
.cc-window {
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 999999 !important;
    max-width: 480px !important;
    width: calc(100% - 32px) !important;
    padding: 18px 22px !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    box-shadow:
        0 0 0 0.5px rgba(0, 0, 0, 0.04),
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.04) !important;
    color: #1e293b !important;
    font-family: var(--mac-font) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    animation: ccSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
@keyframes ccSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(30px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

html[data-site-mode="night"] .cc-window {
    background: rgba(15, 23, 42, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.04),
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.2) !important;
    color: #e2e8f0 !important;
}

/* Cookie emoji prefix */
.cc-window .cc-message::before {
    content: "🍪" !important;
    display: inline-block !important;
    font-size: 22px !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}
.cc-window .cc-message {
    display: flex !important;
    align-items: center !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: inherit !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
html[data-site-mode="night"] .cc-window .cc-message {
    color: #cbd5e1 !important;
}

.cc-window .cc-compliance {
    display: flex !important;
    flex-shrink: 0 !important;
}

.cc-window .cc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 20px !important;
    border-radius: 10px !important;
    background: #007aff !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3) !important;
}
.cc-window .cc-btn:hover {
    background: #0062cc !important;
    transform: scale(1.04) !important;
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.45) !important;
}
.cc-window .cc-btn:active {
    transform: scale(0.97) !important;
}
html[data-site-mode="night"] .cc-window .cc-btn {
    background: #0a84ff !important;
    box-shadow: 0 2px 10px rgba(10, 132, 255, 0.4) !important;
}
html[data-site-mode="night"] .cc-window .cc-btn:hover {
    background: #409cff !important;
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.55) !important;
}

.cc-window .cc-link {
    color: #007aff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.15s ease !important;
}
.cc-window .cc-link:hover {
    color: #0056b3 !important;
    text-decoration: underline !important;
}
html[data-site-mode="night"] .cc-window .cc-link {
    color: #38bdf8 !important;
}
html[data-site-mode="night"] .cc-window .cc-link:hover {
    color: #7dd3fc !important;
}

/* Mobile: stack vertically */
@media (max-width: 480px) {
    .cc-window {
        flex-direction: column !important;
        gap: 12px !important;
        bottom: 16px !important;
        padding: 16px 18px !important;
        border-radius: 16px !important;
        max-width: calc(100vw - 32px) !important;
    }
    .cc-window .cc-compliance {
        width: 100% !important;
    }
    .cc-window .cc-btn {
        width: 100% !important;
    }
}

/* ==========================================================================
   macOS CARD / GLASS CONTAINER
   ========================================================================== */
.macos-card {
    background: var(--mac-glass-bg);
    border: 1px solid var(--mac-border);
    border-radius: var(--mac-radius);
    box-shadow: var(--mac-card-shadow);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    transition: var(--mac-transition);
    overflow: hidden;
}

.macos-card:hover {
    border-color: rgba(56, 189, 248, 0.25);
}

html[data-site-mode="day"] .macos-card:hover {
    border-color: rgba(0, 122, 255, 0.25);
}

/* ==========================================================================
   macOS SEGMENTED CONTROLS (for Login / Register tabs, etc.)
   ========================================================================== */
.macos-segmented {
    display: inline-flex;
    padding: 3px;
    border-radius: 10px;
    background: var(--mac-segmented-bg);
    border: 1px solid var(--mac-border);
    width: 100%;
}

.macos-segmented-item {
    flex: 1;
    text-align: center;
    padding: 7px 14px;
    font-family: var(--mac-font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mac-text-muted);
    border-radius: 8px;
    transition: var(--mac-transition);
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.macos-segmented-item:hover {
    color: var(--mac-text);
}

.macos-segmented-item.active {
    color: var(--mac-text);
    background: var(--mac-segmented-thumb);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   HEADER THEME SWITCHER (macOS HIG Single Global Controller)
   ========================================================================== */
.macos-theme-header-item {
    display: inline-flex !important;
    align-items: center !important;
    height: 45px !important;
    margin-right: 10px !important;
}
.header-fixed1000 .macos-theme-switcher {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px !important;
    border-radius: 980px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    gap: 2px !important;
}
html[data-site-mode="day"] .header-fixed1000 .macos-theme-switcher {
    background: rgba(0, 0, 0, 0.06) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
.header-fixed1000 .macos-theme-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 3px 9px !important;
    border-radius: 980px !important;
    border: none !important;
    background: transparent !important;
    color: #94a3b8 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: var(--mac-transition) !important;
}
.header-fixed1000 .macos-theme-btn svg {
    width: 13px !important;
    height: 13px !important;
}
.header-fixed1000 .macos-theme-btn.active {
    background: #007aff !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.35) !important;
}
html[data-site-mode="night"] .header-fixed1000 .macos-theme-btn.active {
    background: #0ea5e9 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.45) !important;
}

/* ==========================================================================
   DAY MODE & NIGHT MODE SURFACE CONSISTENCY
   ========================================================================== */
html[data-site-mode="day"] body {
    background: #f0f2f5 !important;
    color: #1c1e21 !important;
}
html[data-site-mode="day"] .header-fixed1000,
html[data-site-mode="day"] .navbar-default {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-site-mode="day"] .navbar-default .navbar-nav > li > a,
html[data-site-mode="day"] #wo_home_btns {
    color: #334155 !important;
}
html[data-site-mode="day"] .search-input {
    background: #f1f4f9 !important;
    color: #0f172a !important;
    border: 1px solid rgba(0, 0, 0, 0.09) !important;
}
html[data-site-mode="day"] .panel,
html[data-site-mode="day"] .panel-white,
html[data-site-mode="day"] .left-sidebar,
html[data-site-mode="day"] .sidebar-conatnier,
html[data-site-mode="day"] .chat-container,
html[data-site-mode="day"] .post,
html[data-site-mode="day"] .user-status-home,
html[data-site-mode="day"] .publisher-box,
html[data-site-mode="day"] .wo_user_side_info {
    background: #ffffff !important;
    color: #1c1e21 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
html[data-site-mode="day"] .post-description p,
html[data-site-mode="day"] .post-description span,
html[data-site-mode="day"] .user-name,
html[data-site-mode="day"] .title a,
html[data-site-mode="day"] #user-full-name,
html[data-site-mode="day"] .post p {
    color: #1c1e21 !important;
}
html[data-site-mode="day"] .left-sidebar ul li a {
    color: #334155 !important;
}
html[data-site-mode="day"] .left-sidebar ul li a:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #007aff !important;
}

/* Night Mode Deep Cyber macOS Theme */
html[data-site-mode="night"] body {
    background: #070b14 !important;
    color: #f8fafc !important;
}
html[data-site-mode="night"] .header-fixed1000,
html[data-site-mode="night"] .navbar-default {
    background: #0c121e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-site-mode="night"] .navbar-default .navbar-nav > li > a,
html[data-site-mode="night"] #wo_home_btns {
    color: #cbd5e1 !important;
}
html[data-site-mode="night"] .search-input {
    background: #111a2e !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
html[data-site-mode="night"] .panel,
html[data-site-mode="night"] .panel-white,
html[data-site-mode="night"] .left-sidebar,
html[data-site-mode="night"] .sidebar-conatnier,
html[data-site-mode="night"] .chat-container,
html[data-site-mode="night"] .post,
html[data-site-mode="night"] .user-status-home,
html[data-site-mode="night"] .publisher-box,
html[data-site-mode="night"] .wo_user_side_info {
    background: #0e1626 !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-site-mode="night"] .post-description p,
html[data-site-mode="night"] .post-description span,
html[data-site-mode="night"] .user-name,
html[data-site-mode="night"] .title a,
html[data-site-mode="night"] #user-full-name,
html[data-site-mode="night"] .post p {
    color: #f8fafc !important;
}
html[data-site-mode="night"] .left-sidebar ul li a {
    color: #cbd5e1 !important;
}
html[data-site-mode="night"] .left-sidebar ul li a:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #38bdf8 !important;
}

/* ==========================================================================
   DESKTOP WIDESCREEN & FLUID LAYOUT OPTIMIZATION (macOS Sequoia Ergonomics)
   Solves dead whitespace / giant voids on 1200px, 1440px, 1600px, 1920px+
   ========================================================================== */
@media (min-width: 992px) {
    /* Fluid Container & Responsive Header */
    .container,
    .content-container.container,
    .header-fixed1000,
    .header-fixed1200 {
        width: 96% !important;
        max-width: 1640px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* 3-Column Modern Flexbox Row */
    .page-margin > .row {
        display: flex !important;
        align-items: flex-start !important;
        gap: 24px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .page-margin > .row:before,
    .page-margin > .row:after {
        display: none !important;
    }

    /* Left Sidebar: Spacious, clean navigation (240px) */
    .leftcol {
        width: 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
        padding: 0 !important;
        float: none !important;
    }

    /* Main Feed: Comfortable, expansive reading area */
    .middlecol {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* Right Widgets Sidebar: Generous widget cards (360px) */
    .rightcol {
        width: 360px !important;
        min-width: 360px !important;
        max-width: 360px !important;
        padding: 0 !important;
        float: none !important;
    }

    /* Hardware-Accelerated Native Sticky Positioning (replaces legacy buggy JS offsets) */
    .theiaStickySidebar {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
    }
    .left-sidebar {
        position: sticky !important;
        top: 65px !important;
        width: 100% !important;
    }
    .rightcol > .sidebar {
        position: sticky !important;
        top: 65px !important;
        width: 100% !important;
    }

    /* Post Composer & Action Buttons Row */
    .publisher-box-footer .poster-left-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Story Bar handled globally in STORIES TRAY section */
    
    /* Clean up empty right sidebar widgets */
    .activity-container:has(.empty_state) {
        display: none !important;
    }
    .sidebar-product-slider:empty {
        display: none !important;
    }
}

/* Screen width >= 1600px (Full HD & Ultrawide) */
@media (min-width: 1600px) {
    .container,
    .content-container.container,
    .header-fixed1000,
    .header-fixed1200 {
        max-width: 1680px !important;
    }
    .rightcol {
        width: 370px !important;
        min-width: 370px !important;
        max-width: 370px !important;
    }
}

/* ==========================================================================
   PRIORITAS UTAMA: HEADER / NAVBAR (Crisp Brand, Enlarged Search, Sticky)
   ========================================================================== */
.navbar-default.navbar-fixed-top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 56px !important;
    z-index: 9999 !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid var(--mac-border) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
body {
    padding-top: 76px !important;
}
.header-fixed1000 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 56px !important;
}
.wow_hdr_innr_left {
    display: flex !important;
    align-items: center !important;
    height: 56px !important;
}
.wow_hdr_innr_left > ul.nav.navbar-nav {
    display: none !important; /* Hide old redundant icons that stacked vertically */
}
#head_menu_rght {
    display: flex !important;
    align-items: center !important;
    height: 56px !important;
    margin: 0 !important;
}
#head_menu_rght > li {
    display: flex !important;
    align-items: center !important;
    height: 56px !important;
    float: none !important;
}
#head_menu_rght .macos-theme-header-item {
    display: flex !important;
    align-items: center !important;
    margin-right: 12px !important;
}
#head_menu_rght li .user-menu-combination {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 4px !important;
}
#head_menu_rght li .user-avatar,
#head_menu_rght li .user-avatar img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin: 0 !important;
}
html[data-site-mode="day"] .navbar-default.navbar-fixed-top {
    background: rgba(255, 255, 255, 0.88) !important;
}
html[data-site-mode="night"] .navbar-default.navbar-fixed-top {
    background: rgba(14, 22, 38, 0.88) !important;
}

/* Brand Logo Badge */
.macos-header-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px 8px 0 !important;
    text-decoration: none !important;
}
.macos-header-brand .brand-terminal-badge {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    background: linear-gradient(135deg, #007aff 0%, #0056b3 100%) !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.35) !important;
}
.macos-header-brand .brand-title {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: var(--mac-text) !important;
}
.macos-header-brand .brand-title-accent {
    color: #007aff !important;
    font-weight: 700 !important;
    margin-left: 2px !important;
    font-size: 16px !important;
}

/* Enlarged Search Box */
#wo_home_search {
    margin-left: 12px !important;
}
#wo_home_search .search-container .inner-addon {
    position: relative !important;
}
#wo_home_search .search-container .inner-addon svg {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 17px !important;
    height: 17px !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
}
#wo_home_search .search-container .search-input {
    width: 360px !important;
    height: 38px !important;
    border-radius: 12px !important;
    padding-left: 40px !important;
    padding-right: 14px !important;
    font-size: 13.5px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    border: 1px solid var(--mac-border) !important;
}
html[data-site-mode="day"] #wo_home_search .search-container .search-input {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}
html[data-site-mode="night"] #wo_home_search .search-container .search-input {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #f8fafc !important;
}
#wo_home_search .search-container .search-input:focus {
    width: 420px !important;
    border-color: #007aff !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.22) !important;
    background: var(--mac-card-bg) !important;
}

/* Navbar Right Icons (Messages, Notifications, Profile) */
#head_menu_rght > li > a {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 4px 3px !important;
    padding: 0 !important;
    color: var(--mac-text) !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
}
#head_menu_rght > li > a:hover {
    background: rgba(0, 122, 255, 0.1) !important;
    color: #007aff !important;
    transform: translateY(-1px) !important;
}
#head_menu_rght > li > a svg {
    width: 20px !important;
    height: 20px !important;
}
#head_menu_rght .new-update-alert {
    border-radius: 980px !important;
    padding: 2px 6px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4) !important;
}

/* ==========================================================================
   PRIORITAS UTAMA: SIDEBAR KIRI (User Profile, Clean Groups, Consistent Icons)
   ========================================================================== */
.macos-left-sidebar {
    background: var(--mac-card-bg) !important;
    border: 1px solid var(--mac-border) !important;
    border-radius: 16px !important;
    padding: 12px 10px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

/* User Profile Snippet in Left Sidebar */
.macos-sidebar-profile {
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--mac-border) !important;
}
.sidebar-user-pill {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
}
.sidebar-user-pill:hover {
    background: rgba(0, 122, 255, 0.08) !important;
}
.sidebar-avatar-wrap {
    position: relative !important;
    width: 38px !important;
    height: 38px !important;
    flex-shrink: 0 !important;
}
.sidebar-avatar-img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #007aff !important;
}
.sidebar-online-status {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 10px !important;
    height: 10px !important;
    background: #22c55e !important;
    border-radius: 50% !important;
    border: 2px solid var(--mac-card-bg) !important;
}
.sidebar-user-meta {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}
.sidebar-user-fullname {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--mac-text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.sidebar-user-handle {
    font-size: 11.5px !important;
    color: var(--mac-text-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Category Headers */
.sidebar-group-header {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
    padding: 10px 10px 4px 10px !important;
    margin: 4px 0 2px 0 !important;
    list-style: none !important;
}

/* Menu Items & Modern Squircle Icons */
.macos-nav-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.macos-nav-list li {
    margin: 2px 0 !important;
}
.macos-nav-list li a {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 7px 10px !important;
    border-radius: 9px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--mac-text) !important;
    text-decoration: none !important;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.macos-nav-list li a:hover {
    background: rgba(0, 122, 255, 0.08) !important;
    color: #007aff !important;
    transform: translateX(2px) !important;
}
.macos-nav-list li a .mac-nav-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
}
html[data-site-mode="day"] .macos-nav-list li a .mac-nav-icon {
    background: rgba(0, 122, 255, 0.08) !important;
    color: #007aff !important;
}
html[data-site-mode="night"] .macos-nav-list li a .mac-nav-icon {
    background: rgba(56, 189, 248, 0.12) !important;
    color: #38bdf8 !important;
}

/* Active Highlight */
.macos-nav-list li.active > a,
.macos-nav-list li.wow_side_post_fltr.active > a {
    background: #007aff !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.35) !important;
}
.macos-nav-list li.active > a .mac-nav-icon,
.macos-nav-list li.wow_side_post_fltr.active > a .mac-nav-icon {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

/* Active item hover — keep blue, slightly brighter */
.macos-nav-list li.active > a:hover,
.macos-nav-list li.wow_side_post_fltr.active > a:hover,
.left-sidebar > ul > li.active > a:hover,
.left-sidebar > ul > li.wow_side_post_fltr.active > a:hover {
    background: #0a84ff !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: 0 3px 12px rgba(0, 122, 255, 0.45) !important;
}
.macos-nav-list li.active > a:hover .mac-nav-icon {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
}

/* Override base left-sidebar hover for all macos-nav items */
.left-sidebar > ul > li > a:hover,
.left-sidebar > ul.macos-nav-list > li > a:hover {
    background: rgba(0, 122, 255, 0.08) !important;
    color: #007aff !important;
}
html[data-site-mode="night"] .left-sidebar > ul > li > a:hover,
html[data-site-mode="night"] .left-sidebar > ul.macos-nav-list > li > a:hover {
    background: rgba(56, 189, 248, 0.08) !important;
    color: #38bdf8 !important;
}
html[data-site-mode="night"] .left-sidebar > ul > li.active > a:hover,
html[data-site-mode="night"] .macos-nav-list li.active > a:hover {
    background: #0a84ff !important;
    color: #ffffff !important;
}

/* ==========================================================================
   LEFT SIDEBAR FEED FILTER DROPDOWN (.order_by, .post_order_feed)
   ========================================================================== */
.wow_side_post_fltr {
    position: relative !important;
}
.wow_side_post_fltr .order_by {
    position: static !important;
}
.wow_side_post_fltr .order_by .dropdown-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    cursor: pointer !important;
    color: #64748b !important;
    transition: all 0.2s ease !important;
    margin-left: 2px !important;
}
html[data-site-mode="night"] .wow_side_post_fltr .order_by .dropdown-toggle {
    color: #94a3b8 !important;
}
.wow_side_post_fltr .order_by .dropdown-toggle:hover {
    color: #007aff !important;
    transform: scale(1.15) !important;
}
html[data-site-mode="night"] .wow_side_post_fltr .order_by .dropdown-toggle:hover {
    color: #38bdf8 !important;
}
.wow_side_post_fltr .order_by.open .dropdown-toggle {
    transform: rotate(180deg) !important;
    color: #007aff !important;
}
html[data-site-mode="night"] .wow_side_post_fltr .order_by.open .dropdown-toggle {
    color: #38bdf8 !important;
}
.wow_side_post_fltr .order_by .dropdown-menu.post_order_feed {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 6px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 1050 !important;
}
html[data-site-mode="night"] .wow_side_post_fltr .order_by .dropdown-menu.post_order_feed {
    background: rgba(18, 24, 38, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
.post_order_feed > li {
    list-style: none !important;
    margin: 3px 0 !important;
}
.post_order_feed > li > a {
    display: flex !important;
    align-items: flex-start !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    gap: 10px !important;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
    background: transparent !important;
    white-space: normal !important;
}
.post_order_feed > li > a svg {
    flex: 0 0 20px !important;
    width: 20px !important;
    height: 20px !important;
    margin-top: 2px !important;
    fill: currentColor !important;
    transition: all 0.15s ease !important;
}
.post_order_feed > li > a > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
}
.post_order_feed > li > a b {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    display: block !important;
    margin: 0 0 2px 0 !important;
    transition: color 0.15s ease !important;
}
.post_order_feed > li > a p {
    font-size: 11px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    transition: color 0.15s ease !important;
}
/* Inactive item - Day */
html[data-site-mode="day"] .post_order_feed > li:not(.active) > a {
    color: #1e293b !important;
}
html[data-site-mode="day"] .post_order_feed > li:not(.active) > a svg {
    color: #007aff !important;
    fill: #007aff !important;
}
html[data-site-mode="day"] .post_order_feed > li:not(.active) > a b {
    color: #0f172a !important;
}
html[data-site-mode="day"] .post_order_feed > li:not(.active) > a p {
    color: #64748b !important;
}
html[data-site-mode="day"] .post_order_feed > li:not(.active) > a:hover {
    background: rgba(0, 122, 255, 0.08) !important;
}
html[data-site-mode="day"] .post_order_feed > li:not(.active) > a:hover b {
    color: #007aff !important;
}
/* Inactive item - Night */
html[data-site-mode="night"] .post_order_feed > li:not(.active) > a {
    color: #f1f5f9 !important;
}
html[data-site-mode="night"] .post_order_feed > li:not(.active) > a svg {
    color: #38bdf8 !important;
    fill: #38bdf8 !important;
}
html[data-site-mode="night"] .post_order_feed > li:not(.active) > a b {
    color: #f8fafc !important;
}
html[data-site-mode="night"] .post_order_feed > li:not(.active) > a p {
    color: #94a3b8 !important;
}
html[data-site-mode="night"] .post_order_feed > li:not(.active) > a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
html[data-site-mode="night"] .post_order_feed > li:not(.active) > a:hover b {
    color: #38bdf8 !important;
}
/* Active item */
.post_order_feed > li.active > a {
    background: linear-gradient(135deg, #007aff 0%, #0062cc 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.35) !important;
}
.post_order_feed > li.active > a svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}
.post_order_feed > li.active > a b {
    color: #ffffff !important;
    font-weight: 700 !important;
}
.post_order_feed > li.active > a p {
    color: rgba(255, 255, 255, 0.9) !important;
}
html[data-site-mode="night"] .post_order_feed > li.active > a {
    background: linear-gradient(135deg, #0a84ff 0%, #0066d6 100%) !important;
    box-shadow: 0 4px 14px rgba(10, 132, 255, 0.45) !important;
}

/* ==========================================================================
   STORIES TRAY (+ Cerita Anda & Stories Pengguna Lain - Unified Mobile & Desktop)
   ========================================================================== */
.user-status-home.wow_home_stories {
    width: 100% !important;
    background: var(--mac-card-bg) !important;
    border: 1px solid var(--mac-border) !important;
    border-radius: 16px !important;
    padding: 12px 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 16px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.user-status-home.wow_home_stories ul.status-list,
.wow_home_stories ul.status-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 2px 2px 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.wow_home_stories ul.status-list::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
}
.user-status-home.wow_home_stories ul.status-list li,
.wow_home_stories ul.status-list li {
    flex: 0 0 108px !important;
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    height: 148px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    background: #1e293b !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
}
.wow_home_stories ul.status-list li:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
}
.user-status-home.wow_home_stories ul.status-list li a,
.wow_home_stories ul.status-list li a {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    background: #1e293b !important;
    box-shadow: none !important;
    border-radius: 14px !important;
}
.user-status-home.wow_home_stories ul.status-list li a:after,
.wow_home_stories ul.status-list li a:after {
    display: none !important;
    content: none !important;
}
.story-card-inner {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    background: #1e293b !important;
    border-radius: 14px !important;
}
.story-card-inner:after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.85) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}
.story-card-inner .story-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    border-radius: 14px !important;
    z-index: 0 !important;
    transform: none !important;
    transition: transform 0.25s ease !important;
}
.story-card-inner:hover .story-thumb {
    transform: scale(1.05) !important;
}
.story-add-badge {
    position: absolute !important;
    top: 48% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 36px !important;
    height: 36px !important;
    background: linear-gradient(135deg, #0a84ff, #0056b3) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 4px 14px rgba(10, 132, 255, 0.45) !important;
    z-index: 2 !important;
    transition: transform 0.2s ease !important;
}
.story-card-inner:hover .story-add-badge {
    transform: translate(-50%, -50%) scale(1.1) !important;
}
.story-avatar-badge {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    padding: 2px !important;
    background: linear-gradient(135deg, #007aff, #a855f7) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    z-index: 2 !important;
}
.story-avatar-badge img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}
.story-username {
    position: absolute !important;
    bottom: 8px !important;
    left: 6px !important;
    right: 6px !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
    text-align: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 2 !important;
}

/* Friend stories (see_all_stories) */
.wow_home_stories ul.status-list li a.see_all_stories,
.wow_home_stories ul.status-list li:not(.create_new) a {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background: #1e293b !important;
    border-radius: 14px !important;
}
.wow_home_stories ul.status-list li:not(.create_new) a:before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.85) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    border-radius: 14px !important;
}
.wow_home_stories ul.status-list li:not(.create_new) a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    border-radius: 14px !important;
    z-index: 0 !important;
    transition: transform 0.25s ease !important;
}
.wow_home_stories ul.status-list li:not(.create_new) a:hover img {
    transform: scale(1.05) !important;
}
.wow_home_stories ul.status-list li:not(.create_new) a p {
    position: absolute !important;
    bottom: 8px !important;
    left: 6px !important;
    right: 6px !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
    text-align: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    z-index: 2 !important;
}

/* ==========================================================================
   CREATE POST / COMPOSER (Modern Facebook/Threads Layout & Action Strip)
   ========================================================================== */
.sun_pub_box {
    background: var(--mac-card-bg) !important;
    border: 1px solid var(--mac-border) !important;
    border-radius: 16px !important;
    padding: 16px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 20px !important;
}
.wo_pub_txtara_combo {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    position: relative !important;
}
.wo_pub_txtara_combo .pub-avatar-container {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
}
.wo_pub_txtara_combo .pub-avatar-container img.post-avatar,
.wo_pub_txtara_combo img.post-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid var(--mac-border) !important;
    position: static !important;
    margin: 0 !important;
}
.wo_pub_txtara_combo .sun_pub_name {
    display: none !important;
}
.wo_pub_txtara_combo .postText {
    flex: 1 1 auto !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    font-size: 14.5px !important;
    line-height: 1.5 !important;
    resize: none !important;
    border: 1px solid var(--mac-border) !important;
    transition: all 0.2s ease !important;
    min-height: 56px !important;
    margin: 0 !important;
}
html[data-site-mode="day"] .wo_pub_txtara_combo .postText {
    background: rgba(0, 0, 0, 0.03) !important;
    color: #0f172a !important;
}
html[data-site-mode="night"] .wo_pub_txtara_combo .postText {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #f8fafc !important;
}
.wo_pub_txtara_combo .postText:focus {
    border-color: #007aff !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2) !important;
}

/* Clean Stories Scrollbar */
.wow_home_stories ul.status-list {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.wow_home_stories ul.status-list::-webkit-scrollbar {
    display: none !important;
}

/* Hide legacy cluttered buttons and vertical more items */
.poster-left-buttons,
.charsLeft-post,
.publisher-box-footer .poster-left-buttons,
.publisher-box-footer .sun_pub_more,
.sun_pub_more,
.sun_pub_more_items {
    display: none !important;
}

/* Force Composer Footer and Quick Actions Always Visible */
.publisher-box-footer {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    padding-top: 4px !important;
}
.macos-composer-quick-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 12px 0 10px 0 !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--mac-border) !important;
    flex-wrap: wrap !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.pub-footer-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 8px !important;
    width: 100% !important;
}
#publisher-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    background: linear-gradient(180deg, #3898ff 0%, #007aff 100%) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 0 18px !important;
    height: 34px !important;
    line-height: 34px !important;
    min-width: 80px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3) !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    letter-spacing: 0.2px !important;
}
#publisher-button span {
    color: #ffffff !important;
}
#publisher-button:hover {
    background: linear-gradient(180deg, #4da3ff 0%, #0a84ff 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4) !important;
}
.composer-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 14px !important;
    border-radius: 980px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: 1px solid var(--mac-border) !important;
    background: rgba(0, 0, 0, 0.02) !important;
    color: var(--mac-text) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}
html[data-site-mode="night"] .composer-action-btn {
    background: rgba(255, 255, 255, 0.04) !important;
}
.composer-action-btn:hover {
    background: rgba(0, 122, 255, 0.1) !important;
    color: #007aff !important;
    border-color: rgba(0, 122, 255, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Submit Post Button - hover handled above */

/* Hide redundant greeting banners and post filter icons */
.greetalert,
#filterby-post,
.filterby {
    display: none !important;
}

/* ==========================================================================
   POST CARD, HEADER & REACTION SYSTEM (Hover Reaction Popover Facebook Style)
   ========================================================================== */
.post .panel.panel-white,
.post > .panel-white,
.post-container .panel-white,
.panel-white.panel.post,
.panel-white.post,
.panel.panel-white.panel-shadow {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.07) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;
    margin-bottom: 20px !important;
    overflow: visible !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

html[data-site-mode="night"] .post .panel.panel-white,
html[data-site-mode="night"] .post > .panel-white,
html[data-site-mode="night"] .post-container .panel-white,
html[data-site-mode="night"] .panel.panel-white.panel-shadow,
body.active-night-mode .post .panel.panel-white,
body.active-night-mode .post > .panel-white,
body.active-night-mode .post-container .panel-white,
body.active-night-mode .panel.panel-white.panel-shadow {
    background: #141c2c !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

/* Feed Comments Bubble Polish — Clean Facebook-Style Flex Layout */
/* Override base style.css rules that break flex layout */
.post .post-footer .comments-list .comment .comment-body,
.post .post-footer .comments-list .comment>.comments-list {
    margin-left: 0 !important;
}
.post .post-footer .comments-list .comment {
    margin: 12px 0 !important;
}
.post .post-footer .comments-list .comment .comment-heading {
    max-width: 100% !important;
    min-width: unset !important;
}
.post .post-footer .comments-list .comment .avatar {
    width: 36px !important;
    height: 36px !important;
}
.comment-text, .reply-text {
    width: 100% !important;
    overflow: visible !important;
}
.post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 12px 0 !important;
}
.post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .avatar {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 2px !important;
}
.post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body {
    flex: 1 1 auto !important;
    display: block !important;
    max-width: calc(100% - 46px) !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* The actual grey rounded bubble is ONLY the heading container */
.post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-heading {
    display: inline-block !important;
    width: fit-content !important;
    max-width: 100% !important;
    padding: 8px 13px !important;
    border-radius: 18px !important;
    background: #f0f2f5 !important;
    border: none !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin: 0 !important;
    vertical-align: top !important;
    box-shadow: none !important;
}
.post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-heading .user {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
}
.post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-heading .time {
    display: inline-block !important;
    font-size: 10px !important;
    color: #64748b !important;
    margin-left: 4px !important;
    font-weight: 500 !important;
    vertical-align: middle !important;
}
.post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-text {
    display: block !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    margin-top: 2px !important;
    line-height: 1.45 !important;
    width: 100% !important;
    overflow: visible !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}
.post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-options {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 3px !important;
    margin-left: 12px !important;
    padding: 0 !important;
}
.post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-options a,
.post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-options span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    cursor: pointer !important;
    text-decoration: none !important;
    line-height: 1 !important;
}
.post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-options a:hover {
    color: #0f172a !important;
    text-decoration: underline !important;
}
.post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-options svg {
    width: 13px !important;
    height: 13px !important;
    stroke-width: 2 !important;
    margin: 0 !important;
}

/* Dark Mode Overrides */
html[data-site-mode="night"] .post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-heading,
body.active-night-mode .post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-heading {
    background: #1e293b !important;
}
html[data-site-mode="night"] .post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-heading .user,
body.active-night-mode .post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-heading .user {
    color: #f8fafc !important;
}
html[data-site-mode="night"] .post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-text,
body.active-night-mode .post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-text {
    color: #cbd5e1 !important;
}
html[data-site-mode="night"] .post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-options a,
html[data-site-mode="night"] .post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-options span,
body.active-night-mode .post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-options a,
body.active-night-mode .post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-options span {
    color: #94a3b8 !important;
}
html[data-site-mode="night"] .post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-options a:hover,
body.active-night-mode .post:not(.wo_imagecombo_lbox) .comments-list:not(.comments-list-lightbox) .comment .comment-body .comment-options a:hover {
    color: #f8fafc !important;
}
.post-heading .post-more-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--mac-text-muted) !important;
    transition: all 0.15s ease !important;
}
.post-heading .post-more-btn:hover {
    background: rgba(0, 0, 0, 0.06) !important;
    color: var(--mac-text) !important;
}
html[data-site-mode="night"] .post-heading .post-more-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
.post-heading h4.user {
    font-weight: 700 !important;
    font-size: 15px !important;
}
.postText, .post-description p {
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: var(--mac-text) !important;
}
.postText a, .post-description a {
    color: #007aff !important;
    font-weight: 600 !important;
}

/* Facebook-Style Hover Reactions Popover */
.wo-reaction,
.wo-reaction-post,
.wo-reaction-comment,
.wo-reaction-replay,
.wo-reaction-lightbox,
.like-btn,
.like-btn-post,
.like-btn-comment,
.like-btn-replay {
    position: relative !important;
}

/* Invisible bridge on trigger extending upwards so moving cursor never leaves hover zone */
.wo-reaction::before,
.wo-reaction-post::before,
.wo-reaction-comment::before,
.wo-reaction-replay::before,
.wo-reaction-lightbox::before {
    content: "";
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 24px;
    background: transparent;
    pointer-events: auto !important;
    z-index: 50;
}

/* =======================================================
   MODERN REACTION PICKER POPUP (Pure Frosted Glass Capsule)
   ======================================================= */
.reactions-box {
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: absolute !important;
    bottom: calc(100% + 8px) !important;
    left: 0 !important;
    margin-bottom: 0 !important;
    backdrop-filter: blur(28px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
    border-radius: 9999px !important;
    padding: 6px 12px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 18px 36px -6px rgba(15, 23, 42, 0.12), 
                0 6px 16px -2px rgba(15, 23, 42, 0.05), 
                inset 0 1px 1px 0 rgba(255, 255, 255, 1) !important;
    transform: translateY(8px) scale(0.92) !important;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), 
                visibility 0.22s !important;
    transition-delay: 0.25s !important;
    z-index: 99999 !important;
    gap: 8px !important;
    list-style: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    align-items: center !important;
}

/* Invisible hover bridge extending down to trigger button */
.reactions-box::after {
    content: "";
    position: absolute;
    left: -20px;
    right: -20px;
    bottom: -28px;
    height: 38px;
    background: transparent;
    pointer-events: auto !important;
    z-index: -1;
}

/* Open / Active State */
.wo-reaction:hover .reactions-box:not(.popover-hidden),
.wo-reaction-post:hover .reactions-box:not(.popover-hidden),
.wo-reaction-comment:hover .reactions-box:not(.popover-hidden),
.wo-reaction-replay:hover .reactions-box:not(.popover-hidden),
.wo-reaction-lightbox:hover .reactions-box:not(.popover-hidden),
.reactions-box:not(.popover-hidden):hover,
.reactions-box.active-popover:not(.popover-hidden) {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(-4px) scale(1) !important;
    transition-delay: 0s !important;
}

/* Explicitly closed state */
.reactions-box.popover-hidden,
.wo-reaction .reactions-box.popover-hidden,
.wo-reaction-post .reactions-box.popover-hidden,
.wo-reaction-comment .reactions-box.popover-hidden,
.wo-reaction-replay .reactions-box.popover-hidden,
.wo-reaction-lightbox .reactions-box.popover-hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) scale(0.92) !important;
    transition-delay: 0s !important;
}

html[data-site-mode="day"] .reactions-box {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 18px 36px -6px rgba(15, 23, 42, 0.12), 
                0 6px 16px -2px rgba(15, 23, 42, 0.05), 
                inset 0 1px 1px 0 rgba(255, 255, 255, 1) !important;
}

html[data-site-mode="night"] .reactions-box,
body.active-night-mode .reactions-box,
[data-site-mode="night"] .reactions-box {
    background: rgba(20, 28, 44, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 24px 44px -6px rgba(0, 0, 0, 0.6), 
                0 10px 20px -2px rgba(0, 0, 0, 0.4), 
                inset 0 1px 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Individual Reaction Items */
.reactions-box li.reaction {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.2s ease !important;
    position: relative !important;
    z-index: 1 !important;
}

.reactions-box li.reaction:hover {
    transform: scale(1.42) translateY(-10px) !important;
    z-index: 10 !important;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2)) !important;
}

.reactions-box li.reaction img,
.reactions-box li.reaction svg {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
    pointer-events: none !important;
    transition: transform 0.2s ease !important;
}

/* Single clean floating tooltip badge using WoWonder native ::before */
.reactions-box li.reaction::before {
    display: inline-block !important;
    color: #ffffff !important;
    text-align: center !important;
    line-height: 1 !important;
    font-size: 11px !important;
    left: 50% !important;
    padding: 4px 10px !important;
    background: rgba(15, 23, 42, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: 9999px !important;
    position: absolute !important;
    top: -26px !important;
    opacity: 0 !important;
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
    transform: translateX(-50%) translateY(4px) scale(0.88) !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    pointer-events: none !important;
    z-index: 30 !important;
}

.reactions-box li.reaction:hover::before {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) scale(1) !important;
}

.reactions-box li.reaction::after {
    display: none !important;
}

/* ==========================================================================
   MODERN ACTION BAR: Suka, Komentar, Bagikan
   ========================================================================== */
/* ==========================================================================
   POST STATS COUNTERS (Reactions on left, Comments on right, single clean row)
   ========================================================================== */
.post .stats.post-actions,
.stats.post-actions {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 6px 0 2px 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.post .stats.post-actions.pull-left {
    float: left !important;
}
.post .stats.post-actions.pull-right {
    float: right !important;
}
.post .stats.post-actions .stat-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 2px 4px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    cursor: pointer !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
}
.post .stats.post-actions .stat-item svg {
    width: 15px !important;
    height: 15px !important;
    opacity: 0.8 !important;
}
html[data-site-mode="night"] .post .stats.post-actions .stat-item,
body.night-mode .post .stats.post-actions .stat-item {
    color: #94a3b8 !important;
    background: transparent !important;
}
.post hr {
    margin: 6px 0 2px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    clear: both !important;
    display: block !important;
    height: 0 !important;
    width: 100% !important;
}
html[data-site-mode="night"] .post hr,
body.night-mode .post hr {
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* ==========================================================================
   MODERN ACTION BAR: Suka, Komentar, Bagikan
   ========================================================================== */
#wo_post_stat_button {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    border: none !important;
    padding: 2px 0 !important;
    margin: 2px 0 0 0 !important;
    gap: 4px !important;
    background: transparent !important;
    clear: both !important;
    float: none !important;
}
#wo_post_stat_button > span,
#wo_post_stat_button > div,
#wo_post_stat_button .stat-item {
    flex: 1 1 33.33% !important;
    width: 33.33% !important;
    max-width: 33.33% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    float: none !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: #475569 !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease !important;
}
html[data-site-mode="night"] #wo_post_stat_button > span,
html[data-site-mode="night"] #wo_post_stat_button > div,
html[data-site-mode="night"] #wo_post_stat_button .stat-item,
body.night-mode #wo_post_stat_button > span,
body.night-mode #wo_post_stat_button > div,
body.night-mode #wo_post_stat_button .stat-item {
    color: #94a3b8 !important;
    background: transparent !important;
}
#wo_post_stat_button .stat-item:hover,
#wo_post_stat_button > span:hover,
#wo_post_stat_button > div:hover {
    background: rgba(0, 122, 255, 0.06) !important;
    color: #007aff !important;
}
#wo_post_stat_button .stat-item:active,
#wo_post_stat_button > span:active,
#wo_post_stat_button > div:active {
    transform: scale(0.97) !important;
}
html[data-site-mode="night"] #wo_post_stat_button .stat-item:hover,
html[data-site-mode="night"] #wo_post_stat_button > span:hover,
html[data-site-mode="night"] #wo_post_stat_button > div:hover,
body.night-mode #wo_post_stat_button .stat-item:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #38bdf8 !important;
}
#wo_post_stat_button svg {
    width: 17px !important;
    height: 17px !important;
    fill: currentColor !important;
}

/* ==========================================================================
   FULLSIZE POST IMAGES (Desktop Uncropped & Edge-to-Edge Fluid Aspect)
   ========================================================================== */
#fullsizeimg,
.post-file,
.post .post-file,
.wo_shared_doc_file {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    width: calc(100% + 30px) !important;
    text-align: center !important;
    display: block !important;
    background: #000000;
}
#fullsizeimg img,
.post-file img,
.post .post-file img,
.post-file .image-file,
#fullsizeimg .image-file {
    max-height: 75vh !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: 0 !important;
}

/* ==========================================================================
   POST COMMENTS AREA & COMPOSER (Dark Mode & Day Mode Polish)
   ========================================================================== */
.post-footer.post-comments {
    display: block !important;
    border-top: none !important;
    padding: 10px 14px 12px !important;
    background: transparent !important;
}
.post-commet-textarea {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#wo_comment_combo,
#wo_comment_combo.comment-toggle,
[id^="wo_comment_combo"] {
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 4px 0 0 0 !important;
    width: 100% !important;
}
#wo_comment_combo > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}
#wo_comment_combo .avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    flex: 0 0 36px !important;
    margin: 0 !important;
    object-fit: cover !important;
}
#wo_comment_combo .comment-textarea,
#wo_comment_combo .textarea,
.post-commet-textarea .comment-textarea {
    flex: 1 1 auto !important;
    width: 100% !important;
    border-radius: 22px !important;
    padding: 9px 18px !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    min-height: 40px !important;
    height: 40px !important;
    outline: none !important;
    resize: none !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #f1f5f9 !important;
    box-shadow: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
html[data-site-mode="day"] #wo_comment_combo .comment-textarea,
html[data-site-mode="day"] #wo_comment_combo .textarea,
html[data-site-mode="day"] .post-commet-textarea .comment-textarea {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03) !important;
}
#wo_comment_combo .comment-textarea:focus,
#wo_comment_combo .textarea:focus,
.post-commet-textarea .comment-textarea:focus {
    border-color: #38bdf8 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18) !important;
}
html[data-site-mode="day"] #wo_comment_combo .comment-textarea:focus,
html[data-site-mode="day"] #wo_comment_combo .textarea:focus,
html[data-site-mode="day"] .post-commet-textarea .comment-textarea:focus {
    background: #ffffff !important;
    border-color: #007aff !important;
    box-shadow: 0 0 0 3.5px rgba(0, 122, 255, 0.12) !important;
}
#wo_comment_combo .comment-textarea::placeholder,
#wo_comment_combo .textarea::placeholder,
.post-commet-textarea .comment-textarea::placeholder {
    color: #64748b !important;
}
#wo_comment_combo .comment_combo_footer,
#wo_comment_combo.comment-toggle .comment_combo_footer,
html[data-site-mode="night"] #wo_comment_combo .comment_combo_footer,
html[data-site-mode="night"] #wo_comment_combo.comment-toggle .comment_combo_footer,
body.night-mode #wo_comment_combo .comment_combo_footer,
body.night-mode #wo_comment_combo.comment-toggle .comment_combo_footer {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 0 0 46px !important;
    margin: 0 !important;
}
.wo_feed_post_comments {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.wo_feed_post_comments > div {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
#wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn:not(.sendbtn) {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    color: #94a3b8 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 1px !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease !important;
}
#wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn:not(.sendbtn):hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #38bdf8 !important;
}
html[data-site-mode="day"] #wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn:not(.sendbtn) {
    color: #64748b !important;
}
html[data-site-mode="day"] #wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn:not(.sendbtn):hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #007aff !important;
}
#wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn:not(.sendbtn) svg {
    width: 18px !important;
    height: 18px !important;
    opacity: 0.9 !important;
    fill: currentColor !important;
}
#wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn.sendbtn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    background: #007aff !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0 !important;
    margin-left: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.35) !important;
    cursor: pointer !important;
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease !important;
}
#wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn.sendbtn:hover {
    background: #0062cc !important;
    transform: scale(1.06) !important;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.45) !important;
}
#wo_comment_combo .comment_combo_footer .wo_feed_post_comments .btn.sendbtn svg {
    width: 15px !important;
    height: 15px !important;
    fill: #ffffff !important;
    opacity: 1 !important;
    margin: 0 0 0 -1px !important;
}
.gif_post_comment,
[id^="gif-form-"],
.sticker_post_comment,
[id^="sticker-form-"] {
    box-sizing: border-box !important;
    background: rgba(15, 23, 42, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    padding: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(12px) !important;
}
.gif_post_comment[style*="display: none"],
[id^="gif-form-"][style*="display: none"],
.sticker_post_comment[style*="display: none"],
[id^="sticker-form-"][style*="display: none"],
.gif_post_comment.hidden,
[id^="gif-form-"].hidden,
.sticker_post_comment.hidden,
[id^="sticker-form-"].hidden {
    display: none !important;
}
#wo_comment_combo .gif_post_comment,
#wo_comment_combo [id^="gif-form-"],
#wo_comment_combo .sticker_post_comment,
#wo_comment_combo [id^="sticker-form-"],
[id^="wo_comment_combo"] .gif_post_comment,
[id^="wo_comment_combo"] [id^="gif-form-"],
[id^="wo_comment_combo"] .sticker_post_comment,
[id^="wo_comment_combo"] [id^="sticker-form-"] {
    margin: 10px 0 0 46px !important;
    width: calc(100% - 46px) !important;
    max-width: calc(100% - 46px) !important;
}
.comment-reply .gif_post_comment,
.comment-reply [id^="gif-form-"],
.comment-reply .sticker_post_comment,
.comment-reply [id^="sticker-form-"] {
    margin: 10px 0 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
html[data-site-mode="day"] .gif_post_comment,
html[data-site-mode="day"] [id^="gif-form-"],
html[data-site-mode="day"] .sticker_post_comment,
html[data-site-mode="day"] [id^="sticker-form-"] {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}
.gif_post_comment_innr,
.sticker_post_comment_innr,
.gif_post_reply_innr,
.sticker_post_reply_innr {
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
}
.gif_post_comment input.form-control,
[id^="gif-form-"] input.form-control,
.gif_post_comment_innr input.form-control,
.gif_post_reply_innr input.form-control,
.sticker_post_comment input.form-control,
[id^="sticker-form-"] input.form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 18px !important;
    color: #f1f5f9 !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    height: 36px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
    display: block !important;
    transition: all 0.2s ease !important;
}
html[data-site-mode="day"] .gif_post_comment input.form-control,
html[data-site-mode="day"] [id^="gif-form-"] input.form-control,
html[data-site-mode="day"] .gif_post_comment_innr input.form-control,
html[data-site-mode="day"] .gif_post_reply_innr input.form-control,
html[data-site-mode="day"] .sticker_post_comment input.form-control,
html[data-site-mode="day"] [id^="sticker-form-"] input.form-control {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}
.gif_post_comment input.form-control:focus,
[id^="gif-form-"] input.form-control:focus,
.gif_post_comment_innr input.form-control:focus,
.gif_post_reply_innr input.form-control:focus {
    border-color: #007aff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.25) !important;
}
html[data-site-mode="day"] .gif_post_comment input.form-control:focus,
html[data-site-mode="day"] [id^="gif-form-"] input.form-control:focus,
html[data-site-mode="day"] .gif_post_comment_innr input.form-control:focus,
html[data-site-mode="day"] .gif_post_reply_innr input.form-control:focus {
    background: #ffffff !important;
}
@media (max-width: 600px) {
    #wo_comment_combo .gif_post_comment,
    #wo_comment_combo [id^="gif-form-"],
    #wo_comment_combo .sticker_post_comment,
    #wo_comment_combo [id^="sticker-form-"],
    [id^="wo_comment_combo"] .gif_post_comment,
    [id^="wo_comment_combo"] [id^="gif-form-"],
    [id^="wo_comment_combo"] .sticker_post_comment,
    [id^="wo_comment_combo"] [id^="sticker-form-"] {
        margin: 10px 0 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}
.gif_post_comment_gif {
    margin-top: 10px !important;
    max-height: 220px !important;
    overflow-y: auto !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 8px !important;
    padding: 4px !important;
    scrollbar-width: thin !important;
}
.gif_post_comment_gif img {
    width: 100% !important;
    height: 85px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: transform 0.15s ease, opacity 0.15s ease !important;
}
.gif_post_comment_gif img:hover {
    transform: scale(1.04) !important;
    opacity: 0.9 !important;
}

/* ==========================================================================
   SIDEBAR KANAN (Profile Card, Kontak Online, Trending)
   ========================================================================== */
.rightcol .sidebar {
    background: transparent !important;
}
.rightcol .list-group,
.rightcol .featured-users,
.sidebar-online-contacts-card {
    background: var(--mac-card-bg) !important;
    border: 1px solid var(--mac-border) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 18px !important;
}
.sidebar-title-back {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: var(--mac-text) !important;
    border: none !important;
    padding: 0 0 10px 0 !important;
    background: transparent !important;
}

/* Profile Card Bio & Actions */
.macos-profile-card-bio p {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    color: var(--mac-text-muted) !important;
    margin: 4px 0 10px 0 !important;
}
.macos-profile-card-actions {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}
.btn-macos-primary {
    flex: 1 !important;
    background: #007aff !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    text-align: center !important;
    border: none !important;
    text-decoration: none !important;
}
.btn-macos-primary:hover {
    background: #0062cc !important;
    color: #ffffff !important;
}
.btn-macos-secondary {
    flex: 1 !important;
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--mac-text) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    text-align: center !important;
    border: 1px solid var(--mac-border) !important;
    text-decoration: none !important;
}
html[data-site-mode="night"] .btn-macos-secondary {
    background: rgba(255, 255, 255, 0.07) !important;
}

/* 3-Col Stats Grid */
.macos-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}
.macos-stats-grid li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 8px 4px !important;
    border-radius: 10px !important;
    background: rgba(0, 0, 0, 0.02) !important;
    border: 1px solid var(--mac-border) !important;
    text-decoration: none !important;
}
html[data-site-mode="night"] .macos-stats-grid li a {
    background: rgba(255, 255, 255, 0.04) !important;
}
.macos-stats-grid li a span b {
    font-size: 11px !important;
    color: var(--mac-text-muted) !important;
    font-weight: 600 !important;
}
.macos-stats-grid li a span[id="user_post_count"],
.macos-stats-grid li a span:last-child {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--mac-text) !important;
    margin-top: 2px !important;
}

/* Kontak Online List */
.sidebar-header-line {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
}
.sidebar-header-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: var(--mac-text) !important;
}
.online-pulse-badge {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25) !important;
}
.online-contacts-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.online-contact-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
}
.online-contact-item:hover {
    background: rgba(0, 122, 255, 0.08) !important;
}
.contact-avatar-wrap {
    position: relative !important;
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
}
.contact-avatar-wrap img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}
.contact-status-dot {
    position: absolute !important;
    bottom: -1px !important;
    right: -1px !important;
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    border: 2px solid var(--mac-card-bg) !important;
}
.contact-meta {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
.contact-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--mac-text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.contact-sub {
    font-size: 11px !important;
    color: #22c55e !important;
}
.btn-chat-trigger {
    width: 28px !important;
    height: 28px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 122, 255, 0.1) !important;
    color: #007aff !important;
    border: none !important;
    transition: all 0.15s ease !important;
}
.btn-chat-trigger:hover {
    background: #007aff !important;
    color: #ffffff !important;
}

/* Trending Hashtag Pills */
.trending .wow_htag {
    border: none !important;
    padding: 3px 0 !important;
    background: transparent !important;
    width: 100% !important;
}
.trending .wow_htag a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
    width: 100% !important;
    max-width: 100% !important;
}
.trending .wow_htag a:hover {
    background: rgba(0, 122, 255, 0.08) !important;
}
.trending .htag_top {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #007aff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}
.trending .htag_top svg {
    width: 15px !important;
    height: 15px !important;
}
.trending .htag_bottom {
    font-size: 11px !important;
    color: var(--mac-text-muted) !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    padding-left: 8px !important;
}

/* ==========================================================================
   RESPONSIVE (Desktop 3-col, Tablet 2-col, Mobile 1-col)
   ========================================================================== */
@media (max-width: 991px) and (min-width: 768px) {
    .page-margin > .row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }
    .leftcol {
        display: none !important;
    }
    .middlecol {
        flex: 1 1 60% !important;
    }
    .rightcol {
        flex: 1 1 35% !important;
    }
}
@media (max-width: 767px) {
    .leftcol, .rightcol {
        display: none !important;
    }
    .middlecol {
        width: 100% !important;
    }
    #wo_home_search .search-container .search-input {
        width: 100% !important;
    }
}



/* Composer / Publisher Box Action Buttons Wrap (No Cut-off or Internal Scroll) */
.publisher-box {
    overflow: visible !important;
    max-height: none !important;
}
.publisher-box-footer {
    overflow: visible !important;
    height: auto !important;
}
.publisher-box-footer .poster-left-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    overflow: visible !important;
}
.publisher-box-footer .poster-left-buttons .btn {
    white-space: nowrap !important;
}


/* === 1337 LAYOUT POLISH v61 === */
/* 1) Chat sidebar: start BELOW the 56px fixed navbar so "Mengobrol" is not cut off */
@media (min-width: 1271px) {
    .chat-container {
        top: 56px !important;
        padding-top: 0 !important;
        height: calc(100vh - 56px) !important;
        min-height: 0 !important;
        border-left: 1px solid var(--mac-border) !important;
        box-shadow: none !important;
    }
    .chat-container .online-toggle { padding: 14px 12px 8px !important; }
    .chat-opacity { top: 56px !important; }
}

/* 2) Laptop widths (992-1439px): give the feed room to breathe */
@media (min-width: 992px) and (max-width: 1439px) {
    .page-margin > .row { gap: 16px !important; }
    .leftcol  { width: 220px !important; min-width: 220px !important; max-width: 220px !important; }
    .rightcol { width: 300px !important; min-width: 300px !important; max-width: 300px !important; }
    .container, .content-container.container, .header-fixed1000, .header-fixed1200 { width: 97% !important; }
}

/* 3) Comment row: input fills the row, no inner scrollbar, placeholder on one line */
.post-commet-textarea > #wo_comment_combo,
.post-commet-textarea > [id^="wo_comment_combo"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}
.post-commet-textarea > #wo_comment_combo > div:first-child,
.post-commet-textarea > [id^="wo_comment_combo"] > div:first-child {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}
.post-commet-textarea .comment-textarea {
    min-width: 0 !important;
    width: 100% !important;
    height: 38px;
    overflow: hidden !important;
    scrollbar-width: none !important;
}
.post-commet-textarea .comment-textarea::-webkit-scrollbar { display: none !important; }
.post-commet-textarea .comment-textarea::placeholder {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.post-commet-textarea .avatar { flex: 0 0 36px !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; }

/* 4) Suggested-people cards: equal height, names never overflow */
.rightcol .featured-users .user-name,
.rightcol [class*=suggest] .user-name,
.rightcol [class*=suggest] h4 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

/* === 1337 COMPOSER POLISH v62 === */
/* Card */
.publisher-box .sun_pub_box {
    padding: 16px 16px 12px !important;
    border-radius: 18px !important;
}
/* Avatar + textarea row */
.publisher-box .wo_pub_txtara_combo {
    align-items: flex-start !important;
    gap: 12px !important;
}
.publisher-box .pub-avatar-container,
.publisher-box .post-avatar {
    width: 42px !important; height: 42px !important;
    min-width: 42px !important; flex: 0 0 42px !important;
    margin: 0 !important; border-radius: 50% !important;
}
.publisher-box .postText {
    min-height: 76px !important;
    height: 76px;
    padding: 12px 48px 12px 16px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    resize: none !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.publisher-box .postText:focus {
    border-color: #007aff !important;
    box-shadow: 0 0 0 3px rgba(0,122,255,.15) !important;
}
.publisher-box .add-emoticons { top: 8px !important; right: 8px !important; }

/* Kill the stacked dividers: the empty mid-foot line and the two extra borders */
.publisher-box .sun_pub_mid_foot {
    border-top: 0 !important;
    padding: 0 3px !important;
    min-height: 0 !important;
}
.publisher-box .macos-composer-quick-actions,
.publisher-box .pub-footer-bottom {
    border-top: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* One tidy action bar: [Foto][Perasaan][Lokasi] ...... [Privasi][Posting] */
.publisher-box .publisher-box-footer {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 12px !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid var(--mac-border) !important;
}
.publisher-box .publisher-box-footer > *:not(.macos-composer-quick-actions):not(.pub-footer-bottom) {
    flex: 1 1 100% !important;
}
.publisher-box .macos-composer-quick-actions {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
}
.publisher-box .composer-action-btn {
    height: 36px !important;
    padding: 0 14px !important;
    gap: 8px !important;
    border-radius: 980px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    align-items: center !important;
    transition: background-color .15s, transform .1s !important;
}
.publisher-box .composer-action-btn:hover { transform: translateY(-1px) !important; }
.publisher-box .composer-action-btn svg { width: 18px !important; height: 18px !important; }

.publisher-box .pub-footer-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-left: auto !important;
}
.publisher-box .pub-footer-bottom > .pull-left,
.publisher-box .pub-footer-bottom > .pull-right { float: none !important; margin: 0 !important; }
.publisher-box .pub-footer-bottom > .pull-left  { order: 1 !important; }
.publisher-box .pub-footer-bottom > .pull-right { order: 2 !important; }
.publisher-box .sun_pub_privacy { margin: 0 !important; }

.publisher-box #publisher-button {
    height: 38px !important;
    min-width: 96px !important;
    padding: 0 22px !important;
    border-radius: 980px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0,122,255,.28) !important;
}
.publisher-box #publisher-button span { line-height: 1 !important; }

/* Phones: buttons show icon-first, bar wraps cleanly */
@media (max-width: 575px) {
    .publisher-box .pub-footer-bottom { flex: 1 1 100% !important; }
    .publisher-box .composer-action-btn { padding: 0 12px !important; }
}

/* === 1337 COMPOSER TEXTAREA v63 === */
/* compact while empty & unfocused; autosize still grows it when typing */
.publisher-box .postText:not(:focus):placeholder-shown {
    height: 72px !important;
    min-height: 72px !important;
}
.publisher-box .postText:focus { min-height: 96px !important; }

/* === 1337 SIDEBAR CARD POLISH v64 === */
/* --- Profile card: stats as one clean segmented bar --- */
.wow_side_loggd_usr { border-radius: 18px !important; overflow: hidden !important; }
.wow_side_loggd_usr .macos-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    margin: 4px 0 0 !important;
    padding: 4px 0 !important;
    list-style: none !important;
    background: var(--mac-hover, rgba(0,0,0,.035)) !important;
    border: 1px solid var(--mac-border, rgba(0,0,0,.08)) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
}
.wow_side_loggd_usr .macos-stats-grid > li {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important; padding: 0 !important;
    border: 0 !important; background: none !important; box-shadow: none !important;
    float: none !important; position: relative !important;
    justify-self: stretch !important;
}
.wow_side_loggd_usr .macos-stats-grid > li::before,
.wow_side_loggd_usr .macos-stats-grid > li::after { display: none !important; }
/* thin centred separators between the three cells */
.wow_side_loggd_usr .macos-stats-grid > li + li {
    box-shadow: inset 1px 0 0 var(--mac-border, rgba(0,0,0,.08)) !important;
}
.wow_side_loggd_usr .macos-stats-grid > li > a.menu_list {
    display: flex !important;
    flex-direction: column-reverse !important;   /* number on top, label below */
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    width: 100% !important;
    min-height: 58px !important;
    padding: 8px 4px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: background-color .15s !important;
}
.wow_side_loggd_usr .macos-stats-grid > li > a.menu_list:hover {
    background: var(--mac-border, rgba(0,0,0,.06)) !important;
}
.wow_side_loggd_usr .macos-stats-grid > li > a.menu_list > span:not(.split-link) {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    color: var(--mac-text, #1c1e21) !important;
    font-variant-numeric: tabular-nums !important;
}
.wow_side_loggd_usr .macos-stats-grid .split-link,
.wow_side_loggd_usr .macos-stats-grid .split-link b {
    margin: 0 !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    letter-spacing: .01em !important;
    color: var(--mac-text-secondary, #65676b) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}
.wow_side_loggd_usr .macos-profile-card-actions { gap: 8px !important; }
.wow_side_loggd_usr .macos-profile-card-actions .btn {
    border-radius: 10px !important; font-weight: 600 !important; height: 34px !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
}

/* --- Right column: no white slab behind the widgets/footer --- */

/* --- Hide the "Produk Terbaru" card when it has no products --- */
#sidebar-latest-products:not(:has(.sidebar-product-slider > *)) { display: none !important; }

/* --- Sidebar footer: tidy wrapping link row --- */
.footer-wrapper-sidebar { padding: 4px 6px 16px !important; font-size: 12.5px !important; }
.footer-wrapper-sidebar .footer-powered { align-items: center !important; }
.footer-wrapper-sidebar .footer-powered p { margin: 0 !important; }
.footer-wrapper-sidebar hr { margin: 10px 0 !important; border-color: var(--mac-border, rgba(0,0,0,.08)) !important; }
.footer-wrapper-sidebar ul.list-inline {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.footer-wrapper-sidebar ul.list-inline > li { padding: 0 !important; margin: 0 !important; line-height: 1.4 !important; }
.footer-wrapper-sidebar ul.list-inline a { color: var(--mac-text-secondary, #65676b) !important; }
.footer-wrapper-sidebar ul.list-inline a:hover { color: var(--mac-accent, #007aff) !important; text-decoration: none !important; }

/* === 1337 SIDEBAR CARD POLISH v65 (beats html[data-site-mode] theme rules) === */
/* .sidebar-conatnier WRAPS the right column; only unpaint that wrapper */
html[data-site-mode] div.sidebar-conatnier:has(> .rightcol),
html div.sidebar-conatnier:has(> .rightcol) { background: transparent !important; box-shadow: none !important; border: 0 !important; }
html[data-site-mode="day"] .wow_side_loggd_usr ul.macos-stats-grid {
    background: #f4f6fa !important; border-color: rgba(0,0,0,.07) !important;
}
html[data-site-mode="night"] .wow_side_loggd_usr ul.macos-stats-grid {
    background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important;
}
html[data-site-mode="day"] .wow_side_loggd_usr .macos-stats-grid > li + li { box-shadow: inset 1px 0 0 rgba(0,0,0,.07) !important; }
html[data-site-mode="night"] .wow_side_loggd_usr .macos-stats-grid > li + li { box-shadow: inset 1px 0 0 rgba(255,255,255,.08) !important; }
html[data-site-mode="day"] .wow_side_loggd_usr .macos-stats-grid > li > a.menu_list:hover { background: rgba(0,122,255,.07) !important; }
html[data-site-mode="night"] .wow_side_loggd_usr .macos-stats-grid > li > a.menu_list:hover { background: rgba(255,255,255,.06) !important; }
html[data-site-mode="day"] .wow_side_loggd_usr .macos-stats-grid > li > a.menu_list > span:not(.split-link) { color: #0f172a !important; }
html[data-site-mode="night"] .wow_side_loggd_usr .macos-stats-grid > li > a.menu_list > span:not(.split-link) { color: #f8fafc !important; }
html[data-site-mode="day"] .wow_side_loggd_usr .macos-stats-grid .split-link,
html[data-site-mode="day"] .wow_side_loggd_usr .macos-stats-grid .split-link b { color: #64748b !important; }
html[data-site-mode="night"] .wow_side_loggd_usr .macos-stats-grid .split-link,
html[data-site-mode="night"] .wow_side_loggd_usr .macos-stats-grid .split-link b { color: #94a3b8 !important; }
html[data-site-mode="night"] .footer-wrapper-sidebar ul.list-inline a,
html[data-site-mode="night"] .footer-wrapper-sidebar .footer-powered { color: #94a3b8 !important; }
html[data-site-mode="night"] .footer-wrapper-sidebar hr { border-color: rgba(255,255,255,.08) !important; }

/* === 1337 MOBILE POLISH v67 === */
/* Trending empty state */
.trending-empty .trending-empty-note {
    border: 0 !important; background: none !important; padding: 4px 2px 2px !important;
    font-size: 13px !important; line-height: 1.5 !important; color: var(--mac-text-secondary, #64748b) !important;
}
html[data-site-mode="night"] .trending-empty .trending-empty-note { color: #94a3b8 !important; }

@media (max-width: 767px) {
  /* never scroll sideways */
  html, body { overflow-x: hidden !important; max-width: 100% !important; }
  img, video, iframe, embed, object { max-width: 100% !important; }
  .post-description, .post-description p, .comment-text, .comment-text p, .message-text, .wow_content p {
      overflow-wrap: anywhere !important; word-break: break-word !important;
  }
  .post-description pre, .post pre, .wow_content pre { max-width: 100% !important; overflow-x: auto !important; white-space: pre !important; }
  .post table, .wow_content table { display: block !important; max-width: 100% !important; overflow-x: auto !important; }

  /* ---- Header: fit logo + icons inside the screen ---- */
  .navbar .container-fluid, header .container-fluid {
      width: 100% !important; max-width: 100vw !important; min-width: 0 !important;
      padding: 0 6px !important; box-sizing: border-box !important;
      justify-content: space-between !important; gap: 4px !important;
  }
  .navbar .wow_hdr_innr_left { min-width: 0 !important; flex: 0 1 auto !important; overflow: hidden !important; }
  .navbar .macos-header-brand { padding: 8px 4px 8px 0 !important; margin-left: 2px !important; min-width: 0 !important; }
  #head_menu_rght {
      margin-left: auto !important; flex: 0 1 auto !important; min-width: 0 !important;
      justify-content: flex-end !important; gap: 0 !important;
  }
  #head_menu_rght > li { flex: 0 0 auto !important; }
  #head_menu_rght > li > a.sixteen-font-size,
  #head_menu_rght > li > a.user-menu-combination {
      width: 36px !important; height: 36px !important; margin: 0 1px !important;
  }
  #head_menu_rght > li.notification-container { margin-right: 0 !important; }
  #head_menu_rght .macos-theme-header-item { margin-right: 2px !important; }
  #head_menu_rght .macos-theme-switcher { min-width: 0 !important; padding: 2px !important; }
  #head_menu_rght .macos-theme-switcher .macos-theme-btn { padding: 3px 6px !important; min-width: 0 !important; }
  #head_menu_rght .macos-theme-switcher .macos-theme-btn span { display: none !important; }

  /* header dropdowns: full-width sheet under the navbar instead of opening off-screen */
  #head_menu_rght > li > .dropdown-menu,
  #head_menu_rght .dropdown-switch-account > .dropdown-menu {
      position: fixed !important;
      top: 58px !important; left: 8px !important; right: 8px !important;
      width: auto !important; min-width: 0 !important; max-width: none !important;
      max-height: calc(100vh - 74px) !important; overflow-y: auto !important;
      margin: 0 !important; transform: none !important;
      border-radius: 14px !important;
  }

  /* decorative header art on "popular posts" */
  .popular_posts_hdr { overflow: hidden !important; }
  .popular_posts_hdr svg { max-width: 100% !important; height: auto !important; }

  /* cards/sections breathe but stay inside the screen */
  .content-container.container { padding-left: 8px !important; padding-right: 8px !important; }
  .wow_content, .list-group, .post { max-width: 100% !important; }
}
@media (max-width: 400px) {
  /* smallest phones: badge-only logo so every header icon fits */
  .navbar .macos-header-brand .brand-title { display: none !important; }
}
/* v68 groups row: Bootstrap .row negative margins stuck out 6px on phones */
@media (max-width: 767px) {
  .content-container .row:not(.wow_content .row) { margin-left: 0 !important; margin-right: 0 !important; }
  .MS-File { overflow: hidden !important; }
}

/* === 1337 PROFILE HERO v69 === name was dark (global link colour won) */
html .wo_user_profile .card.hovercard { border-radius: 18px !important; overflow: hidden; box-shadow: 0 12px 34px -14px rgba(15, 23, 42, .35) !important; }
html .wo_user_profile .card.hovercard #cover-image { object-fit: cover; }
html .wo_user_profile .pic-info-cont .info .title a { font-weight: 800 !important; letter-spacing: -.025em !important; text-decoration: none !important; }
html .wo_user_profile .pic-info-cont .profile-handle { margin: 2px 0 12px; font-size: 13.5px; font-weight: 600; letter-spacing: .01em; }
html .wo_user_profile .pic-info-cont .user-avatar img:not(.see_all_stories) { border: 4px solid #fff !important; box-shadow: 0 10px 28px -6px rgba(0, 0, 0, .45) !important; }
html .wo_user_profile .options-buttons { display: flex !important; flex-wrap: wrap; gap: 8px; align-items: center; }
html .wo_user_profile .options-buttons > span, html .wo_user_profile .options-buttons > .dropdown { margin: 0 !important; }
html .wo_user_profile .options-buttons .btn-glossy > .btn, html .wo_user_profile .options-buttons .user-follow-button .btn, html .wo_user_profile .options-buttons .btn-glossy .btn:not(.menu-item) {
  height: 38px !important; padding: 0 16px !important; border-radius: 999px !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 7px;
  font-size: 13.5px !important; font-weight: 600 !important; line-height: 1 !important;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html .wo_user_profile .options-buttons .btn svg { width: 16px !important; height: 16px !important; margin: 0 !important; }
html .wo_user_profile .options-buttons .wo_user_folw_empty_btns { width: 38px !important; padding: 0 !important; }
html .wo_user_profile .options-buttons .btn:hover { transform: translateY(-1px); }
html .wo_user_profile .options-buttons .wo_follow_btn { background: linear-gradient(135deg, #0a84ff, #0060df) !important; border: 1px solid transparent !important; color: #fff !important; box-shadow: 0 8px 20px -8px rgba(10, 132, 255, .8) !important; }

/* Desktop / tablet: text sits on the cover */
@media (min-width: 768px) {
  html .wo_user_profile .problackback { top: auto !important; bottom: 0 !important; height: 62% !important; border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0) 0%, rgba(2, 6, 23, .45) 45%, rgba(2, 6, 23, .82) 100%) !important; }
  html .wo_user_profile .pic-info-cont .info .title, html .wo_user_profile .pic-info-cont .info .title a { color: #fff !important; }
  html .wo_user_profile .pic-info-cont .info .title a { font-size: 30px !important; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
  html .wo_user_profile .pic-info-cont .profile-handle { color: rgba(226, 232, 240, .9); text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
  html .wo_user_profile .options-buttons .btn:not(.wo_follow_btn):not(.menu-item) {
    background: rgba(255, 255, 255, .14) !important; border: 1px solid rgba(255, 255, 255, .3) !important; color: #fff !important;
    backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5) !important;
  }
  html .wo_user_profile .options-buttons .btn:not(.wo_follow_btn):not(.menu-item):hover { background: rgba(255, 255, 255, .24) !important; border-color: rgba(255, 255, 255, .45) !important; }
}

/* Tab bar under the cover */
html .wo_user_profile .user-bottom-nav { border-radius: 14px !important; border: 1px solid rgba(15, 23, 42, .06) !important; box-shadow: 0 10px 28px -12px rgba(15, 23, 42, .25) !important; overflow: hidden; }
html .wo_user_profile .user-bottom-nav ul li a { position: relative; transition: color .16s ease, background .16s ease; }
html .wo_user_profile .user-bottom-nav ul li a:hover { background: rgba(10, 132, 255, .05); }
html .wo_user_profile .user-bottom-nav ul li a.menuactive { color: #0a84ff !important; font-weight: 700; }
html .wo_user_profile .user-bottom-nav ul li a.menuactive::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: #0a84ff; }

/* Phone: info block is below the cover on a light card */
@media (max-width: 767px) {
  html .wo_user_profile .pic-info-cont { background: #fff !important; padding-bottom: 16px !important; }
  html .wo_user_profile .pic-info-cont .info .title, html .wo_user_profile .pic-info-cont .info .title a { color: #0f172a !important; }
  html .wo_user_profile .pic-info-cont .info .title a { font-size: 23px !important; }
  html .wo_user_profile .pic-info-cont .profile-handle { color: #64748b; text-align: center; margin-bottom: 12px; }
  html .wo_user_profile .options-buttons { justify-content: center; }
  html .wo_user_profile .options-buttons .btn:not(.wo_follow_btn):not(.menu-item) { background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; color: #0f172a !important; box-shadow: none !important; }
}

/* Night */
html[data-site-mode="night"] .wo_user_profile .pic-info-cont .user-avatar img:not(.see_all_stories) { border-color: #0f172a !important; }
html[data-site-mode="night"] .wo_user_profile .user-bottom-nav { background: #111827 !important; border-color: rgba(148, 163, 184, .1) !important; box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .6) !important; }
html[data-site-mode="night"] .wo_user_profile .user-bottom-nav ul li a { color: #94a3b8 !important; }
html[data-site-mode="night"] .wo_user_profile .user-bottom-nav ul li a:hover { background: rgba(56, 189, 248, .06); color: #e2e8f0 !important; }
html[data-site-mode="night"] .wo_user_profile .user-bottom-nav ul li a.menuactive { color: #38bdf8 !important; }
html[data-site-mode="night"] .wo_user_profile .user-bottom-nav ul li a.menuactive::after { background: #38bdf8; }
@media (max-width: 767px) {
  html[data-site-mode="night"] .wo_user_profile .pic-info-cont { background: #111827 !important; }
  html[data-site-mode="night"] .wo_user_profile .pic-info-cont .info .title, html[data-site-mode="night"] .wo_user_profile .pic-info-cont .info .title a { color: #f8fafc !important; }
  html[data-site-mode="night"] .wo_user_profile .pic-info-cont .profile-handle { color: #94a3b8; }
  html[data-site-mode="night"] .wo_user_profile .options-buttons .btn:not(.wo_follow_btn):not(.menu-item) { background: rgba(255, 255, 255, .06) !important; border-color: rgba(148, 163, 184, .18) !important; color: #e2e8f0 !important; }
}
/* v69b empty option spans (own profile has no follow/message button) took a flex gap */
html .wo_user_profile .options-buttons > span:not(:has(.btn)) { display: none !important; }

/* === 1337 HEADER v71 === polished top bar, account menu, logout */
/* breathing room between search and the right cluster */
html #head_menu_rght { align-items: center; }
@media (min-width: 992px) { html #head_menu_rght { gap: 4px; } }
@media (min-width: 992px) { html #head_menu_rght > li.macos-theme-header-item { margin: 0 6px 0 12px !important; } }
/* icon buttons */
html #head_menu_rght > li > a.h1337-logout-btn, html #head_menu_rght > li > a.sixteen-font-size {
  width: var(--h1337-ib, 36px) !important; height: var(--h1337-ib, 36px) !important; border-radius: 12px !important; padding: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
html #head_menu_rght > li > a.sixteen-font-size svg, html #head_menu_rght > li > a.h1337-logout-btn svg { width: 21px !important; height: 21px !important; }
html[data-site-mode="day"] #head_menu_rght > li > a.sixteen-font-size { color: #334155 !important; }
html[data-site-mode="day"] #head_menu_rght > li > a.sixteen-font-size:hover, html[data-site-mode="day"] #head_menu_rght > li.open > a.sixteen-font-size { background: rgba(15, 23, 42, .06) !important; color: #0a84ff !important; }
html[data-site-mode="night"] #head_menu_rght > li > a.sixteen-font-size { color: #cbd5e1 !important; }
html[data-site-mode="night"] #head_menu_rght > li > a.sixteen-font-size:hover, html[data-site-mode="night"] #head_menu_rght > li.open > a.sixteen-font-size { background: rgba(255, 255, 255, .08) !important; color: #38bdf8 !important; }
html #head_menu_rght > li > a.sixteen-font-size:active { transform: scale(.94); }
/* unread badges */
html #head_menu_rght .new-update-alert:not(.hidden) {
  min-width: 18px; height: 18px; padding: 0 5px !important; border-radius: 999px !important; top: 4px !important; right: 2px !important;
  font-size: 10.5px !important; font-weight: 700 !important; line-height: 18px !important; text-align: center;
  background: #ff3b30 !important; color: #fff !important; box-shadow: 0 0 0 2px var(--h1337-bar, #fff); z-index: 2;
}
html[data-site-mode="night"] #head_menu_rght .new-update-alert:not(.hidden) { --h1337-bar: #0c121e; }
/* avatar with ring + divider before it */
@media (min-width: 992px) { html #head_menu_rght { --h1337-ib: 40px; --h1337-av: 42px; } html #head_menu_rght > li.h1337-acc { margin-left: 6px !important; padding-left: 10px !important; position: relative; } }
@media (min-width: 992px) { html #head_menu_rght > li.h1337-acc::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 24px; transform: translateY(-50%); background: rgba(15, 23, 42, .1); } }
html[data-site-mode="night"] #head_menu_rght > li.h1337-acc::before { background: rgba(255, 255, 255, .12); }
html #head_menu_rght > li.h1337-acc > a.user-menu-combination { width: var(--h1337-av, 38px) !important; height: var(--h1337-av, 38px) !important; padding: 0 !important; border-radius: 50% !important; background: transparent !important; display: inline-flex !important; align-items: center; justify-content: center; }
html #head_menu_rght > li.h1337-acc > a.user-menu-combination img {
  width: calc(var(--h1337-av, 38px) - 6px) !important; height: calc(var(--h1337-av, 38px) - 6px) !important; border-radius: 50% !important; object-fit: cover;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(10, 132, 255, .45) !important; transition: box-shadow .18s ease, transform .18s ease;
}
html #head_menu_rght > li.h1337-acc > a.user-menu-combination:hover img, html #head_menu_rght > li.h1337-acc.open > a.user-menu-combination img { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0a84ff !important; transform: scale(1.04); }
html[data-site-mode="night"] #head_menu_rght > li.h1337-acc > a.user-menu-combination img { box-shadow: 0 0 0 2px #0c121e, 0 0 0 4px rgba(56, 189, 248, .5) !important; }
html[data-site-mode="night"] #head_menu_rght > li.h1337-acc > a.user-menu-combination:hover img, html[data-site-mode="night"] #head_menu_rght > li.h1337-acc.open > a.user-menu-combination img { box-shadow: 0 0 0 2px #0c121e, 0 0 0 4px #38bdf8 !important; }
/* visible logout button */
html #head_menu_rght > li.h1337-logout-btn-item { margin-left: 2px; }
html[data-site-mode="day"] #head_menu_rght > li > a.h1337-logout-btn { color: #64748b !important; }
html[data-site-mode="night"] #head_menu_rght > li > a.h1337-logout-btn { color: #94a3b8 !important; }
html #head_menu_rght > li > a.h1337-logout-btn:hover { background: rgba(255, 59, 48, .1) !important; color: #ff3b30 !important; }
@media (max-width: 991px) { html #head_menu_rght > li.h1337-logout-btn-item { display: none !important; } }

/* ---------- account dropdown ---------- */
html #head_menu_rght .ani-acc-menu {
  width: 300px !important; padding: 8px !important; border-radius: 16px !important; margin-top: 8px !important;
  border: 1px solid rgba(15, 23, 42, .08) !important; box-shadow: 0 24px 60px -18px rgba(15, 23, 42, .35), 0 6px 18px -8px rgba(15, 23, 42, .18) !important;
  max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain;
}
html[data-site-mode="day"] #head_menu_rght .ani-acc-menu { background: rgba(255, 255, 255, .97) !important; }
html[data-site-mode="night"] #head_menu_rght .ani-acc-menu { background: rgba(15, 23, 42, .97) !important; border-color: rgba(148, 163, 184, .14) !important; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .75) !important; }
html #head_menu_rght .ani-acc-menu > li > a:not(.wow_hdr_menu_usr_lnk) {
  display: flex !important; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px !important; border-radius: 10px !important;
  font-size: 14px !important; font-weight: 500 !important; transition: background .14s ease, color .14s ease;
}
html #head_menu_rght .ani-acc-menu > li > a svg { width: 19px !important; height: 19px !important; flex: 0 0 19px; margin: 0 !important; opacity: .8; }
html #head_menu_rght .ani-acc-menu > li > a#switch_account, html #head_menu_rght .ani-acc-menu > li > a#keyboard_shortcut { justify-content: space-between; }
html[data-site-mode="day"] #head_menu_rght .ani-acc-menu > li > a { color: #1e293b !important; }
html[data-site-mode="day"] #head_menu_rght .ani-acc-menu > li > a:hover { background: rgba(15, 23, 42, .05) !important; }
html[data-site-mode="night"] #head_menu_rght .ani-acc-menu > li > a { color: #e2e8f0 !important; }
html[data-site-mode="night"] #head_menu_rght .ani-acc-menu > li > a:hover { background: rgba(255, 255, 255, .06) !important; }
html #head_menu_rght .ani-acc-menu > li > hr { margin: 6px 4px !important; border: 0 !important; border-top: 1px solid rgba(15, 23, 42, .08) !important; }
html[data-site-mode="night"] #head_menu_rght .ani-acc-menu > li > hr { border-top-color: rgba(148, 163, 184, .14) !important; }
/* old name row: keep wallet/points, hide duplicated name link */
html #head_menu_rght .ani-acc-menu > li.wo_user_name { padding: 0 !important; background: transparent !important; border: 0 !important; }
html #head_menu_rght .ani-acc-menu > li.wo_user_name > a.wow_hdr_menu_usr_lnk { display: none !important; }
html #head_menu_rght .ani-acc-menu > li.wo_user_name > a { display: flex !important; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px !important; border-radius: 10px !important; font-size: 14px !important; }
/* account card */
html #head_menu_rght .ani-acc-menu > li.h1337-acc-card { margin-bottom: 6px; }
html #head_menu_rght .ani-acc-menu > li.h1337-acc-card > a {
  display: grid !important; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 10px;
  padding: 12px !important; border-radius: 12px !important; align-items: center;
  background: linear-gradient(135deg, rgba(10, 132, 255, .09), rgba(94, 92, 230, .07)) !important; border: 1px solid rgba(10, 132, 255, .14);
}
html #head_menu_rght .ani-acc-menu > li.h1337-acc-card img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 4px 12px -4px rgba(0, 0, 0, .3); }
html #head_menu_rght .h1337-acc-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
html #head_menu_rght .h1337-acc-meta b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html #head_menu_rght .h1337-acc-meta small { font-size: 12.5px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html #head_menu_rght .h1337-acc-view {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 9px;
  font-size: 13px; font-weight: 600; background: #fff; color: #0a84ff; border: 1px solid rgba(10, 132, 255, .2); transition: background .15s ease;
}
html #head_menu_rght .h1337-acc-card > a:hover .h1337-acc-view { background: #0a84ff; color: #fff; }
html[data-site-mode="night"] #head_menu_rght .ani-acc-menu > li.h1337-acc-card > a { background: linear-gradient(135deg, rgba(56, 189, 248, .1), rgba(129, 140, 248, .08)) !important; border-color: rgba(56, 189, 248, .18); }
html[data-site-mode="night"] #head_menu_rght .ani-acc-menu > li.h1337-acc-card img { box-shadow: 0 0 0 2px #0f172a, 0 4px 12px -4px rgba(0, 0, 0, .6); }
html[data-site-mode="night"] #head_menu_rght .h1337-acc-view { background: rgba(2, 6, 23, .5); color: #38bdf8; border-color: rgba(56, 189, 248, .25); }
html[data-site-mode="night"] #head_menu_rght .h1337-acc-card > a:hover .h1337-acc-view { background: #0ea5e9; color: #fff; }
/* logout row */
html #head_menu_rght .ani-acc-menu > li.h1337-logout-item { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(15, 23, 42, .08); }
html[data-site-mode="night"] #head_menu_rght .ani-acc-menu > li.h1337-logout-item { border-top-color: rgba(148, 163, 184, .14); }
html #head_menu_rght .ani-acc-menu > li.h1337-logout-item > a { color: #ff3b30 !important; font-weight: 600 !important; }
html #head_menu_rght .ani-acc-menu > li.h1337-logout-item > a svg { opacity: 1; }
html #head_menu_rght .ani-acc-menu > li.h1337-logout-item > a:hover { background: rgba(255, 59, 48, .09) !important; }
html[data-site-mode="night"] #head_menu_rght .ani-acc-menu > li.h1337-logout-item > a { color: #ff6961 !important; }
html #head_menu_rght .ani-acc-menu > li.h1337-old-logout, html #head_menu_rght .ani-acc-menu > li.h1337-old-logout + li:has(> hr) { display: none !important; }
/* Voice Rooms link in user dropdown menu */
html #head_menu_rght .ani-acc-menu > li.h1337-menu-voice > a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 42px !important;
  padding: 9px 12px !important;
  border-radius: 11px !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.08), rgba(6, 182, 212, 0.08)) !important;
  border: 1px solid rgba(0, 122, 255, 0.18) !important;
  color: #007aff !important;
  margin: 3px 0 !important;
  transition: all .16s ease !important;
}
html[data-site-mode="night"] #head_menu_rght .ani-acc-menu > li.h1337-menu-voice > a {
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.15), rgba(6, 182, 212, 0.12)) !important;
  border-color: rgba(56, 189, 248, 0.28) !important;
  color: #38bdf8 !important;
}
html #head_menu_rght .ani-acc-menu > li.h1337-menu-voice > a:hover {
  background: linear-gradient(135deg, rgba(0, 122, 255, 0.16), rgba(6, 182, 212, 0.16)) !important;
  transform: translateY(-1px);
}
html #head_menu_rght .ani-acc-menu > li.h1337-menu-voice .h1337-voice-live-badge {
  margin-left: auto !important;
  background: linear-gradient(135deg, #0a84ff, #06b6d4) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 6px rgba(10, 132, 255, 0.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.3 !important;
}

/* ---------- logout confirm dialog ---------- */
.h1337-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(2, 6, 23, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); transition: background .18s ease, backdrop-filter .18s ease; }
.h1337-modal[hidden] { display: none; }
.h1337-modal.is-open { background: rgba(2, 6, 23, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.h1337-modal-card { width: min(360px, 100%); padding: 26px 24px 20px; border-radius: 20px; text-align: center; background: #fff; color: #0f172a;
  box-shadow: 0 30px 80px -20px rgba(2, 6, 23, .55); transform: translateY(10px) scale(.96); opacity: 0; transition: transform .2s cubic-bezier(.2, .9, .3, 1.2), opacity .18s ease;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Plus Jakarta Sans", sans-serif; }
.h1337-modal.is-open .h1337-modal-card { transform: none; opacity: 1; }
.h1337-modal-icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 59, 48, .1); color: #ff3b30; }
.h1337-modal-icon svg { width: 24px; height: 24px; }
.h1337-modal-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: inherit; }
.h1337-modal-card p { margin: 0 0 20px; font-size: 13.5px; line-height: 1.5; color: #64748b; }
.h1337-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.h1337-modal-actions > * { height: 42px; border-radius: 11px; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none !important; transition: filter .15s ease, background .15s ease; }
.h1337-btn-ghost { border: 1px solid rgba(15, 23, 42, .12); background: #f1f5f9; color: #0f172a; }
.h1337-btn-ghost:hover { background: #e2e8f0; }
.h1337-btn-danger { border: 0; background: #ff3b30; color: #fff !important; box-shadow: 0 8px 20px -8px rgba(255, 59, 48, .7); }
.h1337-btn-danger:hover { filter: brightness(1.07); }
html[data-site-mode="night"] .h1337-modal-card { background: #0f172a; color: #f8fafc; border: 1px solid rgba(148, 163, 184, .14); }
html[data-site-mode="night"] .h1337-modal-card p { color: #94a3b8; }
html[data-site-mode="night"] .h1337-btn-ghost { background: rgba(255, 255, 255, .06); border-color: rgba(148, 163, 184, .18); color: #e2e8f0; }
html[data-site-mode="night"] .h1337-btn-ghost:hover { background: rgba(255, 255, 255, .1); }
/* v71b mobile logout: menu is ~35 items on phones, so put Keluar right under the account card */
@media (max-width: 991px) {
  html #head_menu_rght .ani-acc-menu.dropdown-menu { display: none; }
  html #head_menu_rght li.open > .ani-acc-menu.dropdown-menu { display: flex !important; flex-direction: column; }
  html #head_menu_rght .ani-acc-menu > li { flex: 0 0 auto; }
  html #head_menu_rght .ani-acc-menu > li.h1337-acc-card { order: -3; }
  html #head_menu_rght .ani-acc-menu > li.h1337-logout-item { order: -2; margin: 0 0 6px !important; padding: 0 0 6px !important; border-top: 0 !important; border-bottom: 1px solid rgba(15, 23, 42, .08); }
  html[data-site-mode="night"] #head_menu_rght .ani-acc-menu > li.h1337-logout-item { border-bottom-color: rgba(148, 163, 184, .14); }
}
/* cookie notice must not cover an open header menu */
body:has(#head_menu_rght > li.open) .cc-window { visibility: hidden !important; }
/* v73 header fit: container-fluid could not shrink, so the right icons overflowed on 768-1100px screens */
@media (min-width: 768px) {
  html .header-fixed1000 > .container-fluid { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
  html .header-fixed1000 .wow_hdr_innr_left { flex: 0 0 auto !important; }
  html .header-fixed1000 #wo_home_search { flex: 1 1 auto !important; min-width: 0 !important; float: none !important; margin: 0 10px 0 12px !important; }
  html .header-fixed1000 #wo_home_search > li.search-container { width: 100% !important; max-width: 420px; float: none !important; }
  html .header-fixed1000 #wo_home_search > li.search-container form,
  html .header-fixed1000 #wo_home_search > li.search-container .search-input { width: 100% !important; max-width: 100% !important; }
  html .header-fixed1000 #head_menu_rght { flex: 0 0 auto !important; margin-left: auto !important; float: none !important; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  html #head_menu_rght .macos-theme-btn span { display: none !important; }
  html #head_menu_rght .macos-theme-btn { padding: 0 9px !important; }
  html #head_menu_rght > li.macos-theme-header-item { margin: 0 4px 0 6px !important; }
}
/* v74 header search: icon sat ~5px low, input only filled 2/3 of its slot, box was off-centre vertically */
@media (min-width: 768px) {
  html #wo_home_search { height: 56px; display: flex !important; align-items: center; }
  html #wo_home_search > li.search-container { height: 56px; display: flex !important; align-items: center; }
  html #wo_home_search #navbar-searchbox { margin: 0 !important; padding: 0 !important; width: 100% !important; border: 0 !important; box-shadow: none !important; }
  html #wo_home_search #navbar-searchbox > .form-group { display: block !important; width: 100% !important; margin: 0 !important; position: relative; }
  html #wo_home_search #navbar-searchbox svg.feather-search {
    position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important;
    width: 17px !important; height: 17px !important; margin: 0 !important; padding: 0 !important; pointer-events: none; z-index: 2;
    color: #94a3b8 !important; stroke: currentColor; transition: color .16s ease;
  }
  html #wo_home_search #navbar-searchbox input.search-input {
    display: block !important; width: 100% !important; height: 40px !important; margin: 0 !important;
    padding: 0 16px 0 42px !important; border-radius: 12px !important; font-size: 14px !important; line-height: 40px !important;
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
  }
  html[data-site-mode="day"] #wo_home_search #navbar-searchbox input.search-input { background: #f1f5f9 !important; border: 1px solid transparent !important; color: #0f172a !important; }
  html[data-site-mode="day"] #wo_home_search #navbar-searchbox input.search-input:hover { background: #eaeff5 !important; border-color: rgba(15, 23, 42, .08) !important; }
  html[data-site-mode="day"] #wo_home_search #navbar-searchbox input.search-input:focus { background: #fff !important; border-color: #0a84ff !important; box-shadow: 0 0 0 4px rgba(10, 132, 255, .14) !important; }
  html[data-site-mode="day"] #wo_home_search #navbar-searchbox input.search-input::placeholder { color: #94a3b8 !important; }
  html[data-site-mode="night"] #wo_home_search #navbar-searchbox input.search-input { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .06) !important; color: #f1f5f9 !important; }
  html[data-site-mode="night"] #wo_home_search #navbar-searchbox input.search-input:hover { background: rgba(255, 255, 255, .09) !important; }
  html[data-site-mode="night"] #wo_home_search #navbar-searchbox input.search-input:focus { background: rgba(2, 6, 23, .6) !important; border-color: #38bdf8 !important; box-shadow: 0 0 0 4px rgba(56, 189, 248, .14) !important; }
  html[data-site-mode="night"] #wo_home_search #navbar-searchbox input.search-input::placeholder { color: #64748b !important; }
  html #wo_home_search #navbar-searchbox .form-group:focus-within svg.feather-search { color: #0a84ff !important; }
  html[data-site-mode="night"] #wo_home_search #navbar-searchbox .form-group:focus-within svg.feather-search { color: #38bdf8 !important; }
  /* results dropdown: same width as the box, right under it */
  html #wo_home_search .search-dropdown-container { top: 50px !important; left: 0 !important; right: 0 !important; width: 100% !important; min-width: 300px; margin: 0 !important; transform-origin: top center;
    border-radius: 14px !important; border: 1px solid rgba(15, 23, 42, .08) !important; padding: 6px !important; box-shadow: 0 20px 50px -16px rgba(15, 23, 42, .3) !important; }
  html[data-site-mode="night"] #wo_home_search .search-dropdown-container { background: #0f172a !important; border-color: rgba(148, 163, 184, .14) !important; box-shadow: 0 20px 50px -16px rgba(0, 0, 0, .7) !important; }
  html #wo_home_search .search-dropdown-container .search-advanced-link { display: flex !important; align-items: center; gap: 10px; width: 100%; margin: 0 !important; padding: 8px 10px !important; border-radius: 10px; }
  html #wo_home_search .search-dropdown-container .search-advanced-link:hover { background: rgba(10, 132, 255, .07) !important; }
  html #wo_home_search .search-dropdown-container .search-advanced-link .feather-svg-parent { display: flex !important; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0 !important; margin: 0 !important; border-radius: 10px !important; background: rgba(10, 132, 255, .1) !important; color: #0a84ff !important; }
  html #wo_home_search .search-dropdown-container .search-advanced-link .feather-svg-parent svg { width: 17px; height: 17px; }
  html #wo_home_search .search-dropdown-container .search-advanced-link > span { display: block !important; padding: 0 !important; font-size: 14px; font-weight: 500; }
}

/* ==========================================================================
   1337 FORUM :: Comment Bubble & Attached Image Overhaul
   Eliminates giant empty background behind attached photos. Tight Facebook-style hug.
   ========================================================================== */
.post .post-footer .comments-list .comment .comment-heading,
.post .post-footer .comments-list .reply .comment-heading,
.comment-heading {
  display: inline-block !important;
  width: fit-content !important;
  max-width: calc(100% - 48px) !important;
  min-width: unset !important;
  padding: 8px 14px 10px !important;
  border-radius: 18px !important;
  background: #f0f2f5 !important;
  box-sizing: border-box !important;
  word-break: break-word !important;
}

html[data-site-mode="night"] .post .post-footer .comments-list .comment .comment-heading,
html[data-site-mode="night"] .post .post-footer .comments-list .reply .comment-heading,
body.dark-mode .post .post-footer .comments-list .comment .comment-heading,
body.dark .post .post-footer .comments-list .comment .comment-heading,
.dark .comment-heading {
  background: #242526 !important;
}

/* Attached Image inside Comments — clean, proportional, rounded */
.post .post-footer .comments-list .comment .comment-image,
.post .post-footer .comments-list .reply .comment-image,
.comment-image {
  width: auto !important;
  max-width: min(380px, 100%) !important;
  margin-top: 6px !important;
  margin-bottom: 2px !important;
}

.post .post-footer .comments-list .comment .comment-image img,
.post .post-footer .comments-list .reply .comment-image img,
.comment-image img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: 280px !important;
  border-radius: 12px !important;
  object-fit: contain !important;
  margin: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  cursor: pointer;
  transition: transform .18s ease, opacity .18s ease;
}

.comment-image img:hover {
  opacity: 0.95;
  transform: scale(1.01);
}

.comment-text:empty {
  display: none !important;
}


/* ============================================================
   AUTH PAGES — macOS Frosted Glass Redesign (v85)
   Covers: forgot-password, reset-password, confirm-sms,
           confirm-sms-password, unusual-login, invalid-markup
   ============================================================ */

/* --- Page Wrapper & Background --- */
.wrapper {
  min-height: 100vh !important;
  margin: 0 !important;
}

.login {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f0 50%, #dce3ed 100%) !important;
  min-height: 100vh !important;
}

/* --- Left Panel (Gradient/Branding) --- */
.login_left_combo_parent {
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.login_left_combo_parent > svg {
  opacity: 0.35 !important;
  mix-blend-mode: screen !important;
}

.login_left_combo {
  padding: 0 40px !important;
}

.login_left_combo .logo {
  margin-top: 60px !important;
}

.login_left_combo .logo img {
  max-width: 180px !important;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.login_left_combo h1 {
  font-family: var(--mac-font, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif) !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  margin-top: 60px !important;
  letter-spacing: -0.5px !important;
}

.login_left_combo p {
  font-family: var(--mac-font, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif) !important;
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  line-height: 1.6 !important;
  margin: 16px 0 40px !important;
  max-width: 380px !important;
}

.login_left_combo > .img {
  border: 12px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 24px 24px 0 0 !important;
  border-bottom: 0 !important;
  backdrop-filter: blur(8px);
  margin-top: auto !important;
}

.login_left_combo > .img img {
  border-radius: 14px 14px 0 0 !important;
  opacity: 0.9;
}

/* --- Right Panel (Form Area) --- */
.login .col-md-6 {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 40px !important;
}

.login_innre {
  max-width: 480px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* --- Form Card Styling --- */
.login form,
.login .x_chooser,
.forgot_pass form,
.forgot_pass .x_chooser {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(30px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(200%) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.04),
    0 12px 48px rgba(0, 0, 0, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.05) !important;
  padding: 40px 36px !important;
  max-width: 440px !important;
  margin: 0 auto 20px !important;
  width: 100% !important;
  min-width: unset !important;
  animation: macAuthFadeIn 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes macAuthFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* --- Title --- */
.login p.title,
.login p.title.main {
  font-family: var(--mac-font, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.3px !important;
  line-height: 1.25 !important;
}

/* --- Description --- */
.login .desc {
  font-family: var(--mac-font, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif) !important;
  font-size: 15px !important;
  color: #6e6e73 !important;
  opacity: 1 !important;
  margin-bottom: 24px !important;
}

/* --- Form Fields --- */
.login .wow_form_fields {
  margin: 16px 0 !important;
}

.login .wow_form_fields > label,
.forgot_pass .wow_form_fields > label,
.login_innre .wow_form_fields > label {
  font-family: var(--mac-font, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #3c3c43 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 8px !important;
  display: block !important;
}

.login .wow_form_fields input,
.login .wow_form_fields textarea,
.login .wow_form_fields select,
.forgot_pass .wow_form_fields input,
.forgot_pass .wow_form_fields textarea,
.forgot_pass .wow_form_fields select,
.login_innre .wow_form_fields input,
.login_innre .wow_form_fields textarea {
  font-family: var(--mac-font, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif) !important;
  height: 48px !important;
  border-radius: 12px !important;
  background: #f5f5f7 !important;
  border: 2px solid transparent !important;
  box-shadow: none !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  color: #1d1d1f !important;
  transition: all 0.25s ease !important;
  width: 100% !important;
  outline: none !important;
  line-height: 48px !important;
}

.login .wow_form_fields input:focus,
.login .wow_form_fields textarea:focus,
.login .wow_form_fields select:focus,
.forgot_pass .wow_form_fields input:focus,
.forgot_pass .wow_form_fields textarea:focus,
.login_innre .wow_form_fields input:focus {
  border-color: #007aff !important;
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15) !important;
  background: #ffffff !important;
}

.login .wow_form_fields input::placeholder {
  color: #aeaeb2 !important;
}

/* --- Buttons --- */
.login .login_signup_combo {
  margin: 24px 0 8px !important;
}

.login .login_signup_combo .login__ .btn,
.login .wow_forgot_choice .login__ .btn,
.login .login__ button.btn-main {
  font-family: var(--mac-font, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif) !important;
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border: none !important;
  background: linear-gradient(180deg, #3898ff 0%, #007aff 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 16px rgba(0, 122, 255, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.08) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.login .login_signup_combo .login__ .btn:hover,
.login .wow_forgot_choice .login__ .btn:hover,
.login .login__ button.btn-main:hover {
  background: linear-gradient(180deg, #4da3ff 0%, #0a84ff 100%) !important;
  box-shadow:
    0 6px 24px rgba(0, 122, 255, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-1px) !important;
}

.login .login_signup_combo .login__ .btn:active,
.login .wow_forgot_choice .login__ .btn:active,
.login .login__ button.btn-main:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow:
    0 2px 8px rgba(0, 122, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

/* Loading state */
.login .btn-loading::after {
  border-radius: 12px !important;
}

/* --- "Already have account? Login" link --- */
.login .login_signup_combo .signup__ {
  text-align: center !important;
  margin: 16px 0 0 !important;
}

.login .login_signup_combo .signup__ p {
  font-family: var(--mac-font, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif) !important;
  font-size: 14px !important;
  color: #6e6e73 !important;
  margin: 0 !important;
}

.login .login_signup_combo .signup__ a,
.login .login_signup_combo .signup__ a.dec {
  color: #007aff !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.login .login_signup_combo .signup__ a:hover {
  color: #0a84ff !important;
  text-decoration: underline !important;
}

/* --- Error / Success Alerts --- */
.login .errors,
.login .alert-danger,
.login .alert-success,
.login .success {
  font-family: var(--mac-font, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif) !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
  border: none !important;
  line-height: 1.5 !important;
}

.login .errors:empty,
.login .alert-danger:empty,
.login .alert-success:empty {
  padding: 0 !important;
  margin: 0 !important;
  display: none !important;
}

.login .alert-danger,
.login .errors {
  background: rgba(255, 59, 48, 0.1) !important;
  color: #ff3b30 !important;
}

.login .alert-success,
.login .success {
  background: rgba(52, 199, 89, 0.1) !important;
  color: #34c759 !important;
}

/* --- reCAPTCHA --- */
.login .g-recaptcha {
  margin: 12px 0 !important;
  transform: scale(0.92) !important;
  transform-origin: 0 0 !important;
}

/* --- Password helper text --- */
.login .helper-text {
  margin-top: 8px !important;
  padding-left: 4px !important;
}

.login .helper-text li {
  font-family: var(--mac-font, -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif) !important;
  font-size: 12px !important;
  color: #8e8e93 !important;
  line-height: 1.8 !important;
}

.login .helper-text li.valid {
  color: #34c759 !important;
}

/* --- Footer --- */
.login .footer {
  padding: 20px 0 !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
  margin-top: auto !important;
}

.login .footer .footer-wrapper,
.login .footer .footer-wrapper-sidebar {
  font-size: 12px !important;
  color: #8e8e93 !important;
}

.login .footer a {
  color: #6e6e73 !important;
  transition: color 0.15s ease !important;
}

.login .footer a:hover {
  color: #007aff !important;
}

/* --- Forgot Password Chooser (Email vs SMS) --- */
.login .wow_forgot_choice {
  margin: 20px 0 !important;
}

.login .wow_forgot_choice .login__ {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.login .wow_forgot_choice .login__ button {
  flex: 1 !important;
  min-width: 160px !important;
}


/* =============================================================
   RESPONSIVE — Auth Pages
   ============================================================= */

@media (max-width: 1250px) {
  .login_left_combo_parent {
    width: 38% !important;
    padding: 0 30px !important;
  }
  .login .col-md-6 {
    width: 62% !important;
  }
}

@media (max-width: 930px) {
  .login {
    flex-direction: column !important;
  }
  .login_left_combo_parent {
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    padding: 30px 24px !important;
  }
  .login_left_combo {
    max-width: 100% !important;
    min-width: 100% !important;
    padding: 0 !important;
  }
  .login_left_combo > .img {
    display: none !important;
  }
  .login_left_combo h1 {
    font-size: 28px !important;
    margin-top: 20px !important;
  }
  .login_left_combo p {
    margin: 10px 0 20px !important;
  }
  .login_left_combo .logo {
    margin-top: 20px !important;
  }
  .login .col-md-6 {
    width: 100% !important;
    padding: 24px !important;
  }
}

@media (max-width: 640px) {
  .login .col-md-6 {
    padding: 16px !important;
  }
  .login form,
  .login .x_chooser {
    padding: 24px 20px !important;
    border-radius: 16px !important;
  }
  .login p.title,
  .login p.title.main {
    font-size: 24px !important;
  }
  .login_left_combo_parent {
    padding: 20px 16px !important;
    min-height: 160px !important;
  }
  .login_left_combo h1 {
    font-size: 24px !important;
    margin-top: 10px !important;
  }
  .login_left_combo p {
    font-size: 14px !important;
    margin: 8px 0 16px !important;
  }
  .login_left_combo .logo {
    margin-top: 16px !important;
  }
  .login_left_combo .logo img {
    max-width: 140px !important;
  }
}


/* =============================================================
   NIGHT MODE — Auth Pages
   ============================================================= */

html[data-site-mode="night"] .login {
  background: linear-gradient(135deg, #0c0c1d 0%, #111827 50%, #0f172a 100%) !important;
}

/* Left panel night */
html[data-site-mode="night"] .login_left_combo_parent {
  background: linear-gradient(160deg, #0a0a1a 0%, #0e1525 40%, #0b1a35 100%) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4) !important;
  border-right-color: rgba(255, 255, 255, 0.04) !important;
}

html[data-site-mode="night"] .login_left_combo h1 {
  color: #f5f5f7 !important;
}

html[data-site-mode="night"] .login_left_combo p {
  color: rgba(255, 255, 255, 0.5) !important;
}

html[data-site-mode="night"] .login_left_combo > .img {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Form card night */
html[data-site-mode="night"] .login form,
html[data-site-mode="night"] .login .x_chooser {
  background: rgba(30, 30, 46, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.06),
    0 8px 40px rgba(0, 0, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* Title night */
html[data-site-mode="night"] .login p.title,
html[data-site-mode="night"] .login p.title.main {
  color: #f5f5f7 !important;
}

/* Description night */
html[data-site-mode="night"] .login .desc {
  color: #8e8e93 !important;
}

/* Label night */
html[data-site-mode="night"] .login .wow_form_fields > label {
  color: #a1a1aa !important;
}

/* Input night */
html[data-site-mode="night"] .login .wow_form_fields input,
html[data-site-mode="night"] .login .wow_form_fields textarea,
html[data-site-mode="night"] .login .wow_form_fields select {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #f5f5f7 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

html[data-site-mode="night"] .login .wow_form_fields input:focus,
html[data-site-mode="night"] .login .wow_form_fields textarea:focus,
html[data-site-mode="night"] .login .wow_form_fields select:focus {
  border-color: #0a84ff !important;
  box-shadow:
    0 0 0 3px rgba(10, 132, 255, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.15) !important;
  background: rgba(255, 255, 255, 0.09) !important;
}

html[data-site-mode="night"] .login .wow_form_fields input::placeholder {
  color: #636366 !important;
}

/* Button night */
html[data-site-mode="night"] .login .login_signup_combo .login__ .btn,
html[data-site-mode="night"] .login .wow_forgot_choice .login__ .btn,
html[data-site-mode="night"] .login .login__ button.btn-main {
  background: linear-gradient(180deg, #2997ff 0%, #0a84ff 100%) !important;
  box-shadow:
    0 4px 16px rgba(10, 132, 255, 0.3),
    0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

html[data-site-mode="night"] .login .login_signup_combo .login__ .btn:hover,
html[data-site-mode="night"] .login .wow_forgot_choice .login__ .btn:hover,
html[data-site-mode="night"] .login .login__ button.btn-main:hover {
  background: linear-gradient(180deg, #40a9ff 0%, #1a8cff 100%) !important;
  box-shadow:
    0 6px 24px rgba(10, 132, 255, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Signup link night */
html[data-site-mode="night"] .login .login_signup_combo .signup__ p {
  color: #8e8e93 !important;
}

html[data-site-mode="night"] .login .login_signup_combo .signup__ a,
html[data-site-mode="night"] .login .login_signup_combo .signup__ a.dec {
  color: #0a84ff !important;
}

html[data-site-mode="night"] .login .login_signup_combo .signup__ a:hover {
  color: #40a9ff !important;
}

/* Alerts night */
html[data-site-mode="night"] .login .alert-danger,
html[data-site-mode="night"] .login .errors {
  background: rgba(255, 69, 58, 0.12) !important;
  color: #ff453a !important;
}

html[data-site-mode="night"] .login .alert-success,
html[data-site-mode="night"] .login .success {
  background: rgba(48, 209, 88, 0.12) !important;
  color: #30d158 !important;
}

/* Helper text night */
html[data-site-mode="night"] .login .helper-text li {
  color: #636366 !important;
}

html[data-site-mode="night"] .login .helper-text li.valid {
  color: #30d158 !important;
}

/* Footer night */
html[data-site-mode="night"] .login .footer {
  border-top-color: rgba(255, 255, 255, 0.05) !important;
}

html[data-site-mode="night"] .login .footer,
html[data-site-mode="night"] .login .footer a,
html[data-site-mode="night"] .login .footer .footer-wrapper,
html[data-site-mode="night"] .login .footer .footer-wrapper-sidebar {
  color: #636366 !important;
}

html[data-site-mode="night"] .login .footer a:hover {
  color: #0a84ff !important;
}