/* ==========================================================================
   0. EXTERNAL DEPENDENCIES (Font Imports)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================================================
   1. DESIGN TOKENS & SYSTEM VARIABLES (Unified Light Mode Only)
   ========================================================================== */
:root {
    --bg-body: #f8fafc;        
    --bg-card: #ffffff;        
    --text-main: #1e293b;      
    --text-muted: #64748b;     
    --border: #e2e8f0;         
     --primary: #075e54;          
    --primary-gradient: linear-gradient(135deg, #075e54, #10685c);
    --input-bg: rgba(15, 23, 42, 0.04); 
    --danger: #ef4444;
--pay-primary: var(--primary);       
--bg-slate: #f1f5f9;          
--border-dashed: #cbd5e1;     /* Color for the dashed simulation box */
--success: var(--primary);           /* Was an independent bright green (#22c55e) — now just the one brand green */
--success-hover: #054941;     /* Darker shade of --primary, used for hover states */
--danger-hover: #dc2626;      /* Red button hover (you already have --danger) */
--cancel: #64748b;            /* Grey fallback button */
--cancel-hover: #475569;      
--success-bg: color-mix(in srgb, var(--primary) 10%, white);
--benefit-icon-color: var(--primary);
--bg-action: var(--success-bg);
}

/* ==========================================================================
   1b. DARK THEME OVERRIDES
   Applied via body.dark-mode. Excluded from the Welcome screen by router.js,
   which strips this class whenever the user is on '/' or '/welcome'.
   --primary intentionally stays the brand green in both themes — only
   surface, text, and border tokens shift.
   ========================================================================== */
body.dark-mode {
    --bg-body: #0f172a;
    --bg-card: #1e293b;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #334155;
    --input-bg: rgba(255, 255, 255, 0.06);
    --bg-slate: #1e293b;
    --border-dashed: #475569;
    --success-bg: rgba(255, 255, 255, 0.12);
    --success-hover: #e2e8f0;
    --bg-action: rgba(255, 255, 255, 0.06);
    /* In dark mode, the brand green becomes white — so anything that was
       green on a light background becomes white on the dark background,
       matching the visual contrast convention used for dark text in light mode */
    --primary: #ffffff;
    --primary-gradient: linear-gradient(135deg, #ffffff, #e2e8f0);
}

/* Buttons that were green background + white text in light mode should
   flip to white background + dark text in dark mode */
body.dark-mode .btn-start:not(.btn-secondary),
body.dark-mode .guest-wall-btn,
body.dark-mode .fav-signin-btn,
body.dark-mode .fsheet-apply-btn,
body.dark-mode .hbar-filter-btn-active,
body.dark-mode .fsheet-type-chip-active,
body.dark-mode .btn-chat-in-app,
body.dark-mode .btn-submit-post,
body.dark-mode .btn-save,
body.dark-mode .chat-page-wrapper .icon-btn:not(.send-voice-btn),
body.dark-mode input:checked + .toggle-slider {
    background: #ffffff;
    color: #0f172a;
    border-color: #ffffff;
}

body.dark-mode .btn-start:not(.btn-secondary) i,
body.dark-mode .guest-wall-btn i,
body.dark-mode .fav-signin-btn i,
body.dark-mode .btn-chat-in-app i,
body.dark-mode .btn-submit-post i,
body.dark-mode .chat-page-wrapper .icon-btn:not(.send-voice-btn) i {
    color: #0f172a;
}

/* WhatsApp call-icon glyph inside the header dropdown's active button —
   the circle already flips to white via var(--primary), so the glyph
   needs to flip to a dark color too or it disappears into it */
body.dark-mode .chat-page-wrapper .wa-icon-btn.active svg path {
    fill: #0f172a;
}

/* Primary-gradient buttons (Pay button, plan CTA etc.) */
body.dark-mode .payment-btn,
body.dark-mode .btn-primary {
    background: #ffffff;
    color: #0f172a;
}

/* Campus selector pill */
body.dark-mode .campus-select {
    background-color: #ffffff;
    color: #0f172a;
}

/* Avatar camera badge */
body.dark-mode .avatar-camera-badge {
    background: #ffffff;
    color: #0f172a;
}

/* Letter avatars (profile picture initials): background is var(--primary),
   which flips to white in dark mode, but the initial's text color was
   hardcoded to white for the light-mode green background — flip it to a
   dark color here so it stays readable against the now-white circle. */
body.dark-mode .letter-avatar {
    color: #0f172a;
}

/* Chat header — needs to stay a dark surface (not flip to white like other
   primary-colored elements) since its text/icons are hardcoded white. Uses
   a dark shade of the brand green instead of the old navy blue. */
body.dark-mode .chat-page-wrapper .chat-header {
    background: #0b3d37;
}

/* Secondary button in dark mode */
body.dark-mode .btn-start.btn-secondary {
    background: var(--bg-card);
    color: var(--text-main);
    border-color: var(--border);
}

/* ==========================================================================
   2. GLOBAL BODY & RESPONSIVE BASE
   ========================================================================== */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Inter', sans-serif; 
}

body { 
    background-color: var(--bg-body); 
    color: var(--text-main);
    display: flex; 
    justify-content: center; 
    align-items: center;
    min-height: 100vh; 
    min-height: 100dvh; /* Dynamically scales to exact mobile screen height */
    height: 100vh;
    height: 100dvh;     /* Ensures layout fits perfectly within visible mobile viewport */
    width: 100vw;
    width: 100dvw;
    overflow: hidden; 
    position: fixed;    /* Prevents the mobile browser from dragging/bouncing the page */
    top: 0;
    left: 0;
}

/* ==========================================================================
   3. SPA APPLICATION FRAME & CONTAINER STRUCTURE
   ========================================================================== */
.mobile-container, .app-shell { 
    width: 100%; 
    max-width: 26.25rem;       
    height: 100vh; 
    background-color: var(--bg-card); 
    display: flex; 
    flex-direction: column; 
    position: relative; 
    overflow: hidden; 
    box-shadow: 0 0.625rem 1.5625rem -0.3125rem rgba(0, 0, 0, 0.05), 
                0 0.5rem 0.625rem -0.375rem rgba(0, 0, 0, 0.05);
}

.content-area, .view-frame { 
    flex: 1; 
    padding: 4.4375rem 1.25rem 6rem 1.25rem; 
    overflow-y: auto; 
    background-color: var(--bg-body); 
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
    
}

.content-area.full-bleed {
    padding: 0 1.5rem;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-card);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Non-blocking "you're offline, showing saved content" strip — used by
   Home's feed and Inbox's conversation list, both of which have an actual
   offline story (unlike most of the app, which still gets boot.js's
   full-screen gate). */
.offline-feed-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--input-bg);
    color: var(--text-muted);
    border: 0.0625rem solid var(--border);
    border-radius: 0.65rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.78rem;
    margin-bottom: 0.75rem;
    flex-shrink: 0;
}

.offline-feed-banner i {
    color: var(--primary);
    font-size: 0.85rem;
}

/* Inside #messages-area the flex container's own `gap` already spaces this
   from the first bubble — the banner's own margin-bottom would just stack
   on top of that and push things too far down. */
.chat-page-wrapper #messages-area .offline-feed-banner-chat {
    margin-bottom: 0;
}

/* Vertically centers a content-area's children within the available space
   (below the header, above the bottom nav) without touching its padding
   or background — used by Home's choose-university prompt so the card
   sits in the middle of the screen instead of stacking at the top. */
.content-area-centered {
    justify-content: center;
}

#signUpScreen.content-area.full-bleed {
    justify-content: flex-start;
    padding: 2rem 1.5rem;
}

/* ==========================================================================
   4. SHARED APP LAYOUTS (Persistent Core Components)
   ========================================================================== */
.header { 
    background: var(--bg-card); 
    padding: 1rem; 
    border-bottom: 0.0625rem solid var(--border); 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100; 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-hidden {
    transform: translateY(-100%);
}

/* Plain-text headers (Account, Inbox, Personal Profile, Favourites, etc.)
   use this so their total rendered height matches the home page header,
   whose height is driven by its 2.375rem-tall icon-row content. */
.header-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.375rem;
    width: 100%;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
}

.bottom-nav { 
    border-top: 0.0625rem solid var(--border); 
    background: var(--bg-card); 
    padding: 0.6rem 0.5rem; 
    display: flex; 
    justify-content: space-around; 
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-hidden {
    transform: translateY(100%);
}

.nav-item { 
    text-decoration: none; 
    color: var(--text-muted); 
    text-align: center; 
    font-size: 0.65rem; 
    font-weight: 600;
    padding: 0.35rem 0.5rem;
    border-radius: 0.5rem;
    transition: color 0.2s; 
}

.nav-item svg, .nav-item i { 
    width: 1.1rem; 
    height: 1.1rem; 
    font-size: 1.1rem;
    vertical-align: middle;
    margin-bottom: 0.1875rem;
}

.nav-item.active { 
    color: var(--primary); 
}

/* ==========================================================================
   5. UI COMPONENTS: GLOBAL CARDS & ACTION ELEMENTS
   ========================================================================== */
.welcome-card { 
    background: var(--bg-card); 
    border: 0.0625rem solid var(--border); 
    border-radius: 1.5rem; 
    padding: 2rem 1.5rem; 
    width: 100%;
    box-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.02);
}

.brand-icon-box { 
    width: 4.5rem; 
    height: 4.5rem; 
    background: var(--primary-gradient); 
    border-radius: 1.25rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white;
    font-size: 2rem; 
    margin: 0 auto 1.5rem; 
}

.welcome-title { 
    font-size: 1.45rem; 
    font-weight: 700; 
    color: var(--text-main);
    margin-bottom: 0.5rem; 
    text-align: center;
}

.welcome-subtitle { 
    color: var(--text-muted); 
    font-size: 0.9rem; 
    margin-bottom: 2rem; 
    text-align: center;
}

.welcome-subtitle-placeholder {
    color: var(--text-muted); 
    font-size: 0.9rem; 
    margin-bottom: 1rem; 
    text-align: center;
}

/* Form Controls & Layout Grouping */
.form-group { 
    margin-bottom: 1.25rem; 
}

.button-stack .btn-start:not(:last-child) {
    margin-bottom: 0.75rem;
}

.welcome-skip-btn {
    display: block;
    width: 100%;
    margin-top: 0.9rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    padding: 0.5rem;
}

.welcome-skip-btn:hover {
    color: var(--text-main);
    text-decoration: underline;
}

.form-label { 
    display: block; 
    color: var(--text-main); 
    font-size: 0.75rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem; 
}

.form-select, .form-input { 
    width: 100%; 
    background: var(--input-bg); 
    border: 0.0625rem solid var(--border); 
    padding: 0.875rem; 
    border-radius: 0.75rem; 
    color: var(--text-main); 
    font-size: 0.95rem; 
    outline: none; 
    transition: border-color 0.2s, background-color 0.2s;
}

.form-input::placeholder { 
    color: var(--text-muted); 
    opacity: 0.7;
}

.form-input:focus, .form-select:focus { 
    border-color: var(--primary); 
    background-color: var(--bg-card);
}

/* Global Navigation Actions & Buttons */
.btn-start { 
    width: 100%; 
    background: var(--primary-gradient); 
    border: none; 
    padding: 0.9375rem; 
    border-radius: 0.75rem; 
    color: white; 
    font-weight: 600; 
    font-size: 0.95rem;
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 0.625rem; 
    transition: opacity 0.2s; 
}

.btn-start i {
    font-size: 0.95rem;
}

.btn-start:hover { 
    opacity: 0.95; 
}

/* Secondary White Button Target Overrides */
.btn-start.btn-secondary {
    background: #ffffff;
    color: #000000;
    border: 0.0625rem solid var(--border);
}






.search-row{display:flex;width:100%;gap:0.5rem;align-items:center}
.search-container{flex:1;position:relative;display:flex;align-items:center}
.search-container svg{position:absolute;left:0.75rem;color:var(--text-muted);width:0.9rem;height:0.9rem}
.search-input{width:100%;padding:0.6875rem 0.75rem 0.6875rem 2.25rem;border-radius:0.75rem;border:0.0625rem solid var(--border);background:var(--bg-body);color:var(--text-main);font-size:0.85rem}
.select-group{display:flex;gap:0.375rem;flex-shrink:0}
.campus-select-wrapper{position:relative}
.campus-select{appearance:none;background-color:var(--primary);color:white;padding:0.625rem 1.5rem 0.625rem 0.75rem;border-radius:0.625rem;border:none;font-size:0.75rem;font-weight:600;cursor:pointer}
.campus-select option{background-color:var(--bg-card);color:var(--text-main)}
.post-feed-container,.fav-feed-container{display:flex;flex-direction:column;gap:0;padding:0.5rem 0 5rem}
.post-feed-container{margin:0 -1.25rem;width:calc(100% + 2.5rem);padding-top:0}
.post-feed-card{background:var(--bg-card);border-bottom:0.125rem solid var(--border);padding:0.85rem 1.25rem 0.6rem;transition:background 0.15s;cursor:default}
.post-feed-card:active{background:var(--bg-body)}
.shared-post-highlight{animation:sharedPostPulse 2.2s ease}
@keyframes sharedPostPulse{
    0%{box-shadow:inset 0 0 0 2px var(--primary);background:var(--bg-card)}
    15%{box-shadow:inset 0 0 0 2px var(--primary);background:color-mix(in srgb, var(--primary) 8%, var(--bg-card))}
    100%{box-shadow:inset 0 0 0 0 transparent;background:var(--bg-card)}
}
.post-header{display:flex;align-items:flex-start;justify-content:space-between;gap:0.5rem;margin-bottom:0.55rem}
.post-author-info{display:flex;align-items:center;gap:0.6rem;cursor:pointer;flex:1;min-width:0}
.post-avatar-frame{width:2.1rem;height:2.1rem;min-width:2.1rem;border-radius:50%;background:var(--input-bg);border:0.0625rem solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:0.85rem;color:var(--text-muted)}
.post-avatar-frame .letter-avatar{font-size:0.95rem}
.post-avatar-frame img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.post-meta{display:flex;flex-direction:column;gap:0.1rem;min-width:0}
.post-author{font-size:0.82rem;font-weight:700;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.verified-badge-icon{color:var(--primary);font-size:0.78rem;margin-left:0.15rem;vertical-align:middle}
.admin-delete-post-btn{color:var(--danger)}
.admin-delete-post-btn:hover{color:var(--danger-hover);transform:scale(1.15)}
.post-subtext{font-size:0.7rem;color:var(--text-muted);display:flex;align-items:center;gap:0.2rem;flex-wrap:wrap;line-height:1.3}
.post-view-count{gap:0.3rem}
.post-view-count i{font-size:0.68rem}
/* ==========================================================================
   BUSINESS CARD -- the home feed's representation of a whole business for
   any category other than Accommodation (utils/businessCard.js). Reuses
   .post-feed-card/.post-avatar-frame/.post-actions/.action-btn/.post-img-grid
   wholesale for the shared shell, avatar, action row, and photo grid -- only
   the header/description layout below is genuinely new.
   ========================================================================== */
.business-card{cursor:pointer}
.business-card-header{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.55rem}
.business-card-avatar{width:2.6rem;height:2.6rem;min-width:2.6rem;border-radius:50%;background:var(--input-bg);border:0.0625rem solid var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:1rem;color:var(--text-muted)}
.business-card-avatar .letter-avatar{font-size:1.1rem}
.business-card-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.business-card-header-info{min-width:0;flex:1}
.business-card-name{font-size:0.92rem;font-weight:700;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.business-card-verified{color:var(--primary);font-size:0.8rem;margin-left:0.2rem;vertical-align:middle}
.business-card-photos{margin-bottom:0.6rem}
.business-card-description{font-size:0.85rem;color:var(--text-main);line-height:1.5;margin-bottom:0.5rem}
.business-card-see-more-btn{display:block;background:none;border:none;padding:0;margin-top:0.25rem;font-size:0.78rem;font-weight:700;color:var(--primary);cursor:pointer}

.post-timestamp{cursor:pointer;color:var(--primary);text-decoration:none}
.post-timestamp:hover{text-decoration:underline}
.fav-btn{background:none;border:none;cursor:pointer;padding:0.25rem 0.3rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:1rem;transition:color 0.2s,transform 0.15s;flex-shrink:0;line-height:1}
.fav-btn:hover{color:var(--primary);transform:scale(1.15)}
.fav-btn.faved{color:var(--primary)}
.fav-btn.faved i{animation:fav-pop 0.25s ease}
@keyframes fav-pop{0%{transform:scale(1)}50%{transform:scale(1.4)}100%{transform:scale(1)}}
.post-content-body{font-size:0.82rem;line-height:1.55;color:var(--text-main);margin-bottom:0.55rem;word-break:break-word;white-space:pre-wrap}
.see-more-btn{color:var(--primary);cursor:pointer;font-size:0.78rem;font-weight:600;margin-left:0.1rem;white-space:nowrap}
.see-more-btn:hover{text-decoration:underline}

/* Auto-detected URLs inside post write-ups and agent "About" bios — see
   js/utils/linkify.js. Blue + underline-on-hover matches the universal
   "this is a link" convention, distinct from this app's own primary
   brand color so it doesn't get confused with buttons/actions. */
.auto-link {
    color: #2563eb;
    text-decoration: none;
    word-break: break-all;
}
.auto-link:hover,
.auto-link:focus {
    text-decoration: underline;
}
body.dark-mode .auto-link {
    color: #60a5fa;
}

/* ==========================================================================
   LONG-PRESS ACTION MENU — used for deleting a message you sent, and for
   pinning/deleting an inbox thread. See js/utils/longPressMenu.js.
   ========================================================================== */
.lp-action-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 4999;
    background: transparent;
}
.lp-action-menu {
    position: fixed;
    min-width: 11rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem -0.25rem rgba(0, 0, 0, 0.25);
    z-index: 5000;
    overflow: hidden;
}
.lp-action-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    font-family: 'Inter', sans-serif;
}
.lp-action-menu-item:hover { background: var(--bg-body); }
.lp-action-menu-item + .lp-action-menu-item { border-top: 1px solid var(--border); }
.lp-action-menu-item.danger { color: #e11d48; }
.text-ellipsis{color:var(--text-muted)}
.post-img-grid{width:100%;overflow:hidden;border-radius:0.75rem;margin-bottom:0.55rem;cursor:pointer}

/* Video preview embed on a post card, shown when the agent added an
   optional video link (YouTube, Google Drive, Cloudinary/direct file). */
.post-video-embed{width:100%;aspect-ratio:16/9;border-radius:0.75rem;overflow:hidden;margin-bottom:0.55rem;background:#000}
.post-video-embed iframe,.post-video-embed video{width:100%;height:100%;border:none;display:block;object-fit:contain}
.post-video-fallback-link{display:inline-flex;align-items:center;gap:0.4rem;color:var(--primary);font-size:0.82rem;font-weight:700;margin-bottom:0.55rem;text-decoration:none}
.post-video-fallback-link:hover{text-decoration:underline}
.post-img-grid.grid-1 .post-img-cell{width:100%;height:14rem}
.post-img-grid.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0.15rem}
.post-img-grid.grid-2 .post-img-cell{height:9rem}
.post-img-grid.grid-3{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:0.15rem;height:11rem}
.post-img-grid.grid-3 .grid-3-main{grid-row:1/3}
.post-img-grid.grid-4{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0.15rem;height:12rem}
.post-img-cell{position:relative;overflow:hidden;background:var(--input-bg)}
.post-img-cell img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity 0.3s}
.img-count-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.52);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;font-weight:700;letter-spacing:0.02em}
img.lazy-img{opacity:0;transition:opacity 0.35s ease;background:var(--input-bg)}
img.lazy-img.lazy-loaded,img.lazy-img[src]:not([src=""]){opacity:1}
.post-img-cell.img-pending,.post-avatar-frame.img-pending{background:linear-gradient(100deg,var(--input-bg) 30%,var(--bg-card) 50%,var(--input-bg) 70%);background-size:200% 100%;animation:imgShimmer 1.4s ease-in-out infinite}
@keyframes imgShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.post-actions{display:flex;gap:0.5rem;padding-top:0.4rem;border-top:0.0625rem solid var(--border);margin-top:0.2rem}
.action-btn{flex:1;background:none;border:none;cursor:pointer;font-size:0.76rem;font-weight:600;color:var(--text-muted);padding:0.35rem 0;border-radius:0.4rem;display:flex;align-items:center;justify-content:center;gap:0.35rem;transition:background 0.15s,color 0.15s}
.action-btn:hover{background:var(--bg-body);color:var(--primary)}
.action-btn i{font-size:0.82rem}
.action-btn-active{color:var(--primary);background:var(--bg-body)}
.theater-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.93);z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center}
.theater-img-wrap{max-width:95vw;max-height:78vh;display:flex;align-items:center;justify-content:center}
.theater-img{max-width:95vw;max-height:78vh;object-fit:contain;border-radius:0.5rem}
.theater-close{position:absolute;top:1rem;right:1.2rem;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;line-height:1;opacity:0.8;transition:opacity 0.15s}
.theater-close:hover{opacity:1}
.theater-nav{display:flex;align-items:center;gap:1.5rem;margin-top:1rem}
.theater-prev,.theater-next{background:rgba(255,255,255,0.15);border:none;color:#fff;font-size:2rem;width:2.6rem;height:2.6rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s;line-height:1}
.theater-prev:hover,.theater-next:hover{background:rgba(255,255,255,0.3)}
.theater-prev:disabled,.theater-next:disabled{opacity:0.3;cursor:not-allowed}
.theater-counter{color:rgba(255,255,255,0.75);font-size:0.85rem;min-width:3rem;text-align:center}
.guest-wall-card{margin:0.5rem 1rem 1.5rem;background:var(--bg-card);border:0.0625rem solid var(--border);border-radius:1.25rem;padding:2rem 1.5rem;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,0.08)}
.guest-wall-icon{font-size:2.2rem;color:var(--primary);margin-bottom:0.75rem}
.guest-wall-title{font-size:1rem;font-weight:700;color:var(--text-main);margin-bottom:0.4rem}
.guest-wall-sub{font-size:0.8rem;color:var(--text-muted);margin-bottom:1.2rem;line-height:1.5}
.guest-wall-btn{background:var(--primary);color:#fff;border:none;border-radius:999px;padding:0.6rem 1.6rem;font-size:0.85rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:0.5rem;transition:opacity 0.2s}
.guest-wall-btn:hover{opacity:0.88}
/* Two-choice wall (free Accommodation vs paid Business Page) shown to an
   account with nothing set up yet — see create-post.js. Stacks the two
   buttons instead of letting them sit side by side / wrap awkwardly. */
.guest-wall-choices{display:flex;flex-direction:column;gap:0.6rem;align-items:stretch}
.guest-wall-choices .guest-wall-btn{width:100%;justify-content:center}
.guest-wall-btn-secondary{background:transparent;color:var(--primary);border:0.0938rem solid var(--primary)}
.guest-wall-btn-secondary:hover{opacity:1;background:color-mix(in srgb, var(--primary) 8%, transparent)}
.no-results{text-align:center;color:var(--text-muted);padding:3rem 1.5rem;font-size:0.88rem;line-height:1.6}
.no-results-icon{display:block;font-size:2rem;margin-bottom:0.75rem;opacity:0.4}
.loading-state{text-align:center;color:var(--text-muted);padding:3rem 1rem;font-size:0.88rem}
.loading-icon{margin-right:0.4rem}

/* ── Skeleton loading cards — shown on Home while the initial feed fetch
   is still in flight, before any real post cards can be rendered ── */
.skeleton-shimmer{background:linear-gradient(100deg,var(--input-bg) 30%,var(--bg-card) 50%,var(--input-bg) 70%);background-size:200% 100%;animation:imgShimmer 1.4s ease-in-out infinite}
.skeleton-card{background:var(--bg-card);border-bottom:0.125rem solid var(--border);padding:0.85rem 1.25rem 1rem}
.skeleton-header{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.7rem}
.skeleton-avatar{width:2.1rem;height:2.1rem;min-width:2.1rem;border-radius:50%}
.skeleton-meta{flex:1;display:flex;flex-direction:column;gap:0.45rem}
.skeleton-line{height:0.55rem;border-radius:0.25rem}
.skeleton-text{display:flex;flex-direction:column;gap:0.45rem;margin-bottom:0.65rem}
.skeleton-image{width:100%;height:14rem;border-radius:0.75rem;margin-bottom:0.6rem}
.skeleton-actions{display:flex;gap:0.6rem}
.skeleton-btn{height:2rem;border-radius:0.5rem;flex:1}

/* Invisible trigger element for batched/lazy card rendering (see home.js) */
.card-load-sentinel{width:100%;height:1px}

/* ── Offline overlay — shown at app boot when there's no real internet
   access, and again any time the device drops connection mid-session.
   Appended to <body> (outside #app) by router.js so it can cover the
   whole screen without disturbing whatever route is underneath. ── */
.offline-overlay{position:fixed;inset:0;z-index:9999;background:var(--bg-body);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1.75rem;animation:fadeIn 0.2s ease-out}
.offline-icon-badge{width:6.5rem;height:6.5rem;border-radius:1.5rem;background:#ffffff;border:0.0625rem solid var(--border);box-shadow:0 0.5rem 1.5rem rgba(0,0,0,0.08);display:flex;align-items:center;justify-content:center;margin-bottom:1.75rem;color:var(--text-main)}
.offline-icon-badge svg{width:2.4rem;height:2.4rem}
.offline-title{font-size:1.25rem;font-weight:700;color:var(--text-main);margin:0 0 0.6rem}
.offline-subtitle{font-size:0.9rem;color:var(--text-muted);line-height:1.6;max-width:22rem;margin:0 0 1.75rem}
.offline-retry-btn{background:var(--primary-gradient);color:#fff;border:none;border-radius:999px;padding:0.8rem 2.5rem;font-size:0.92rem;font-weight:700;cursor:pointer;transition:opacity 0.2s;display:inline-flex;align-items:center;gap:0.5rem}
.offline-retry-btn:hover{opacity:0.92}
.offline-retry-btn:disabled{opacity:0.65;cursor:not-allowed}
body.dark-mode .offline-icon-badge{background:#ffffff;color:#0f172a}

.fav-header-row{display:flex;align-items:center;gap:0.6rem;min-height:2.375rem}
.fav-header-title{font-size:1.05rem;font-weight:700;color:var(--text-main);display:flex;align-items:center;gap:0.45rem}
.fav-header-title i{color:var(--primary)}
/* Generic "back button + title" fixed header row — same shape as
   .fav-header-row/.fav-header-title (Saved) above, reused by any other
   sub-page (e.g. Accommodations) that needs a real fixed .header instead
   of an in-flow, scroll-away title bar. */
.subpage-header-row{display:flex;align-items:center;gap:0.6rem;min-height:2.375rem}
.subpage-header-title{font-size:1.05rem;font-weight:700;color:var(--text-main);display:flex;align-items:center;gap:0.45rem}
.subpage-header-title i{color:var(--primary)}
.fav-empty-state{text-align:center;padding:4rem 1.5rem 2rem;color:var(--text-muted)}
.fav-empty-icon{font-size:2.8rem;color:var(--primary);opacity:0.35;margin-bottom:1rem}
.fav-empty-title{font-size:1rem;font-weight:700;color:var(--text-main);margin-bottom:0.4rem}
.fav-empty-sub{font-size:0.8rem;line-height:1.55;margin-bottom:1.4rem}
.fav-signin-btn{background:var(--primary);color:#fff;border:none;border-radius:999px;padding:0.6rem 1.6rem;font-size:0.85rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:0.5rem;transition:opacity 0.2s}
.fav-signin-btn:hover{opacity:0.88}
.fav-card-removing{opacity:0;transform:translateX(2rem);transition:opacity 0.28s ease,transform 0.28s ease}
.img-count-badge{position:absolute;top:8px;right:8px;background:rgba(0,0,0,0.55);color:#fff;font-size:12px;font-weight:600;padding:3px 8px;border-radius:20px;display:flex;align-items:center;gap:4px;pointer-events:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
/* Overlay shown on the 4th tile of an image grid when there are more than
   4 images — see buildImageGridHtml in utils/postCard.js. */
.grid-more-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;pointer-events:none}

/* ========== LISTING TAGS ========== */
.feed-listing-tags{display:flex;flex-wrap:wrap;gap:0.35rem;margin-bottom:0.5rem}
.feed-tag{display:inline-flex;align-items:center;gap:0.28rem;font-size:0.72rem;font-weight:600;padding:0.25rem 0.6rem;border-radius:2rem;line-height:1}
.feed-tag-type{background:var(--input-bg);color:var(--text-muted);border:0.0625rem solid var(--border)}
.feed-tag-price{background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);border:0.0625rem solid color-mix(in srgb,var(--primary) 25%,transparent)}

/* ========== COMPACT HEADER BAR ========== */
.hbar{display:flex;align-items:center;gap:0.5rem;width:100%}
.hbar-icon-btn{width:2.375rem;height:2.375rem;flex-shrink:0;border-radius:0.625rem;border:0.0625rem solid var(--border);background:var(--input-bg);color:var(--text-muted);font-size:0.875rem;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:border-color 0.2s,color 0.2s}
.hbar-icon-btn:hover{border-color:var(--primary);color:var(--primary)}
.hbar-filter-btn-active{background:var(--primary);border-color:var(--primary);color:#ffffff}
.hbar-filter-btn-active:hover{color:#ffffff}
.filter-dot{position:absolute;top:0.3rem;right:0.3rem;width:0.45rem;height:0.45rem;border-radius:50%;background:var(--danger);border:0.1rem solid var(--bg-card)}
.hbar-campus{flex:1;display:flex;justify-content:center}

/* ========== SEARCH BAR ========== */
.hsearch-input-wrap{flex:1;position:relative;display:flex;align-items:center}
.hsearch-icon{position:absolute;left:0.7rem;color:var(--text-muted);font-size:0.8rem;pointer-events:none}
.hsearch-input{width:100%;height:2.375rem;background:var(--input-bg);border:0.0625rem solid var(--border);border-radius:0.625rem;padding:0 0.75rem 0 2.1rem;color:var(--text-main);font-size:0.875rem;font-family:'Inter',sans-serif;outline:none;transition:border-color 0.2s}
.hsearch-input:focus{border-color:var(--primary)}
.hsearch-input::placeholder{color:var(--text-muted);opacity:0.7}
.hsearch-cancel{background:none;border:none;color:var(--primary);font-size:0.85rem;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;padding:0.25rem 0;white-space:nowrap;flex-shrink:0}

/* ========== FILTER SHEET ========== */
.fsheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:200}
.fsheet{position:fixed;left:50%;transform:translateX(-50%) translateY(100%);bottom:0;width:100%;max-width:26.25rem;background:var(--bg-card);border-radius:1.25rem 1.25rem 0 0;border-top:0.0625rem solid var(--border);padding:0 1.25rem 2rem;z-index:201;transition:transform 0.28s cubic-bezier(0.32,0.72,0,1)}
.fsheet-open{transform:translateX(-50%) translateY(0)}
.fsheet-handle{width:2.5rem;height:0.25rem;background:var(--border);border-radius:2rem;margin:0.75rem auto 1.1rem}
.fsheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.fsheet-title{font-size:1rem;font-weight:700;color:var(--text-main)}
.fsheet-clear-btn{background:none;border:none;color:var(--primary);font-size:0.8rem;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;padding:0}
.fsheet-clear-btn:hover{text-decoration:underline}
.fsheet-close-btn{position:absolute;top:0.75rem;right:0.75rem;width:2rem;height:2rem;border-radius:50%;border:none;background:var(--input-bg);color:var(--text-muted);font-size:0.85rem;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:background 0.15s,color 0.15s}
.fsheet-close-btn:hover{background:var(--border);color:var(--text-main)}
.fsheet-section{margin-bottom:1.25rem}
.fsheet-section-label{font-size:0.72rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);margin-bottom:0.625rem}
.fsheet-section-sub{font-weight:500;text-transform:none;letter-spacing:0;font-size:0.68rem}
.fsheet-chips{display:flex;flex-wrap:wrap;gap:0.45rem}
.fsheet-type-chip{padding:0.4rem 0.875rem;border-radius:2rem;border:0.0625rem solid var(--border);background:var(--input-bg);color:var(--text-muted);font-size:0.8rem;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;transition:background 0.15s,color 0.15s,border-color 0.15s}
.fsheet-type-chip:hover{border-color:var(--primary);color:var(--primary)}
.fsheet-type-chip-active{background:var(--primary);color:#ffffff;border-color:var(--primary)}
.fsheet-budget-row{display:flex;align-items:flex-end;gap:0.5rem}
.fsheet-budget-group{display:flex;flex-direction:column;gap:0.25rem;flex:1}
.fsheet-budget-label{font-size:0.68rem;font-weight:600;color:var(--text-muted)}
.fsheet-budget-input{width:100%;height:2.375rem;background:var(--input-bg);border:0.0625rem solid var(--border);border-radius:0.625rem;padding:0 0.75rem;color:var(--text-main);font-size:0.875rem;font-family:'Inter',sans-serif;outline:none;transition:border-color 0.2s;-moz-appearance:textfield}
.fsheet-budget-input::-webkit-outer-spin-button,.fsheet-budget-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fsheet-budget-input:focus{border-color:var(--primary)}
.fsheet-budget-input::placeholder{color:var(--text-muted);opacity:0.65}
.fsheet-budget-sep{font-size:0.9rem;color:var(--text-muted);padding-bottom:0.5rem;flex-shrink:0}
.fsheet-apply-btn{width:100%;background:var(--primary);color:#ffffff;border:none;border-radius:0.75rem;padding:0.8rem;font-size:0.9rem;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;margin-top:1.5rem;transition:opacity 0.2s}
.fsheet-apply-btn:hover{opacity:0.88}

/* ── Business choice sheet (Student Accommodations vs Business Page) — see
   account-settings.js's renderBusinessChoiceSheetHtml. Sits inside the
   same .fsheet chrome as the filter sheet above, just with its own
   option-row content instead of filter controls. ── */
.bsheet-options{display:flex;flex-direction:column;gap:0.6rem}
.bsheet-option-btn{display:flex;align-items:center;gap:0.85rem;width:100%;background:var(--bg-body);border:0.0625rem solid var(--border);border-radius:0.9rem;padding:0.85rem 1rem;cursor:pointer;text-align:left;transition:border-color 0.15s,background 0.15s}
.bsheet-option-btn:hover{border-color:var(--primary)}
.bsheet-option-icon{flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:50%;background:var(--bg-card);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:1.05rem}
.bsheet-option-text{flex:1;min-width:0}
.bsheet-option-title{font-size:0.9rem;font-weight:700;color:var(--text-main)}
.bsheet-option-sub{font-size:0.75rem;color:var(--text-muted);margin-top:0.15rem;line-height:1.4}
.bsheet-option-btn > i.fa-chevron-right{color:var(--text-muted);font-size:0.8rem;flex-shrink:0}

/* ==========================================================================
   ACCOUNT VIEW ARCHITECTURE (Refactored to variables & Minimized)
   ========================================================================== */

/* User Info */
.user-info { color: var(--text-main); margin-bottom: 1.25rem; margin-top: 1.25rem; }
.user-name { font-size: 1.2rem; font-weight: 600; margin-top: 0.3125rem; }

/* Guest Welcome Card */
.guest-welcome-card { background: var(--bg-card); border: 0.0625rem solid var(--border); border-radius: 1rem; padding: 1.25rem; margin-bottom: 1rem; margin-top: 1.25rem; text-align: center; }
.guest-welcome-card .guest-avatar { width: 3.75rem; height: 3.75rem; border-radius: 50%; background: var(--input-bg); display: flex; align-items: center; justify-content: center; margin: 0 auto 0.75rem; font-size: 1.6rem; color: var(--primary); }
.guest-welcome-card .guest-title { font-size: 1.1rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.25rem; }
.guest-welcome-card .guest-subtitle { font-size: 0.82rem; color: var(--text-muted); }

/* Dynamic Verification Alert Banners */
.verification-alert { padding: 0.875rem; border-radius: 0.75rem; font-size: 0.85rem; font-weight: 500; line-height: 1.4; margin-bottom: 0.75rem; display: flex; gap: 0.625rem; align-items: flex-start; cursor: pointer; transition: transform 0.2s; }
.verification-alert:hover { transform: scale(0.99); }
.verification-alert i { font-size: 1.1rem; margin-top: 0.125rem; flex-shrink: 0; }
.verification-alert.warning { background: var(--bg-body); border: 0.0625rem solid var(--primary); color: var(--primary); }
.verification-alert.reject { background: var(--bg-body); border: 0.0625rem solid var(--danger); color: var(--danger); }

/* Grouped Settings Menu */
.menu-group { border-radius: 1rem; border: 0.0625rem solid var(--border); background: var(--bg-card); overflow: hidden; margin-bottom: 0.75rem; }
.menu-group.danger-group { border-color: var(--danger); }
.menu-btn + .menu-btn { border-top: 0.0625rem solid var(--border); }
.menu-btn { width: 100%; padding: 0.9375rem; border: none; background: var(--bg-card); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 0.9375rem; font-weight: 500; font-size: 1rem; text-align: left; transition: background-color 0.2s ease; color: var(--text-main); }
.menu-btn:hover { background-color: var(--bg-body); }
.menu-btn i { width: 1.25rem; text-align: center; }
.menu-btn .fa-chevron-right { color: var(--text-muted); font-size: 0.85rem; opacity: 0.6; }
.menu-left { display: flex; align-items: center; gap: 0.9375rem; }
/* Go Premium's two-line variant (title + countdown) — see
   account-settings.js. Sits beside .menu-left's single icon, sharing its
   normal icon-to-text gap, so both lines line up under that gap exactly
   like every single-line tab's text does. */
.menu-left-text-stack { display: flex; flex-direction: column; gap: 0.2rem; }

/* Interactive Utilities & Overrides */
.signup-agent-btn, .verification-tick { color: var(--primary); }
.verification-tick { font-size: 1.1rem; margin-left: auto; }
.danger, .signout-btn { color: var(--danger); }
.signup-agent-btn:hover, .danger:hover, .signout-btn:hover { background-color: var(--bg-body); }
.agent-badge { font-size: 0.7rem; font-weight: 600; background: var(--input-bg); color: var(--primary); border-radius: 1.25rem; padding: 0.125rem 0.5rem; margin-left: 0.375rem; white-space: nowrap; }

/* Form Layout Custom Toggle Controls */
.toggle-switch { position: relative; display: inline-block; width: 3.125rem; height: 1.5rem; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; inset: 0; background-color: var(--border); transition: 0.3s; border-radius: 1.5rem; }
.toggle-slider:before { position: absolute; content: ""; height: 1.125rem; width: 1.125rem; left: 0.1875rem; bottom: 0.1875rem; background-color: var(--bg-card); transition: 0.3s; border-radius: 50%; }
input:checked + .toggle-slider { background-color: var(--primary); }
input:checked + .toggle-slider:before { transform: translateX(1.625rem); }

/* Modal Interactive Overlays */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 2000; justify-content: center; align-items: center; padding: 1rem; }
.modal-content { background: var(--bg-card); border-radius: 1.25rem; width: 100%; max-width: 23.75rem; max-height: 80vh; overflow-y: auto; padding: 1.25rem; position: relative; box-shadow: 0 1.25rem 1.5625rem -0.3125rem rgba(0, 0, 0, 0.1); animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; padding-bottom: 0.625rem; border-bottom: 0.0625rem solid var(--border); }
.modal-header h3 { color: var(--text-main); font-size: 1.2rem; }
.modal-close { cursor: pointer; font-size: 1.5rem; color: var(--text-muted); transition: color 0.2s; }
.modal-close:hover { color: var(--text-main); }
.modal-body { color: var(--text-main); font-size: 0.85rem; line-height: 1.6; }
.modal-body h4 { margin-top: 0.9375rem; margin-bottom: 0.3125rem; color: var(--primary); }
.modal-body p { margin-bottom: 0.625rem; color: var(--text-muted); }

/* Transitions & Animations */
.animate-fade { animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.hidden { display: none !important; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(0.375rem); } to { opacity: 1; transform: translateY(0); } }














/* ==========================================================================
   ACCOUNT SCREEN — TIER BADGE, LOCK TAGS, PREMIUM COUNTDOWN
   ========================================================================== */

/* Tier badge shown under username */
.user-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    margin-top: 0.45rem;
    width: fit-content;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* Lock tag shown inside menu items for premium-only features */
.lock-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: #fff;
    background: #e2a000;
    border-radius: 999px;
    padding: 0.15rem 0.5rem;
    margin-left: 0.4rem;
    white-space: nowrap;
}
/* Same shape as .lock-tag, but green — used for the free Accommodations
   menu item so it visually reads as the opposite of a premium lock. */
.lock-tag-free {
    background: var(--primary);
}

/* Visually dim locked menu items */
.menu-btn-locked {
    opacity: 0.65;
}
.menu-left-locked {
    color: var(--text-muted) !important;
}

/* 30-day renewal countdown shown inside Go Premium tab */
.premium-renewal-countdown {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--primary);
    opacity: 0.85;
    margin-top: 1px;
}

/* ==========================================================================
   11. AUTHENTICATION MODULE COMPONENT OVERLAYS
   ========================================================================== */
.auth-card {
    padding: 2.25rem 1.5rem 1.75rem 1.5rem;
}

.auth-submit-btn {
    margin-top: 0.5rem;
    box-shadow: 0 0.25rem 0.75rem rgba(7, 94, 84, 0.15);
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.25rem 0 1rem;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 0.0625rem solid var(--border);
}
.auth-divider span {
    padding: 0 0.75rem;
}

.google-signin-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 0.0625rem solid var(--border);
    background: var(--bg-card);
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.google-signin-btn:hover {
    background: var(--bg-body);
    border-color: var(--primary);
}
.google-signin-btn svg {
    flex-shrink: 0;
}

.form-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.form-label-row .form-label {
    margin-bottom: 0;
}

.auth-alt-routing {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.auth-link {
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.auth-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.auth-link.secondary-link {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
}

#forgotBackToSignIn i {
    font-size: 0.75rem;
    margin-right: 0.25rem;
}

/* ==========================================================================
   SUBSCRIPTION & PREMIUM TIER (Refactored & Minified)
   ========================================================================== */

/* Layout Wrapper - Fixed Top Spacing */
.subscription-wrapper { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; margin-top: -4.125rem; /* Counteracts global content-area padding */ }

/* Header & Badge */
.badge-section { text-align: center; padding: 0.5rem 0; margin-bottom: 0; }
.badge-icon { font-size: 2.25rem; margin-bottom: 0.5rem; display: inline-flex; align-items: center; justify-content: center; animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.badge-section h1 { font-size: 1.45rem; font-weight: 800; color: var(--text-main); letter-spacing: -0.02em; margin-bottom: 0.375rem; line-height: 1.2; }
.subscription-subhead { font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; max-width: 100%; margin: 0 auto; }

/* Premium Benefits & Action Cards */
.benefits-card, .action-card { background: var(--bg-card); border: 0.0625rem solid var(--border); border-radius: 1rem; padding: 1.25rem; }
.action-card { display: flex; flex-direction: column; }
.benefits-title { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem; border-bottom: 0.0625rem solid var(--border); padding-bottom: 0.5rem; }
.benefits-list { display: flex; flex-direction: column; gap: 1rem; }
.benefit-item { display: flex; align-items: flex-start; gap: 0.875rem; }
.benefit-icon { width: 2rem; height: 2rem; background: var(--input-bg); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.benefit-icon svg { width: 1.1rem; height: 1.1rem; fill: var(--primary); }
.benefit-content { flex: 1; min-width: 0; }
.benefit-content h3 { font-size: 0.875rem; font-weight: 600; color: var(--text-main); margin-bottom: 0.125rem; line-height: 1.3; }
.benefit-content p { font-size: 0.775rem; color: var(--text-muted); line-height: 1.4; }

/* Pricing Matrix */
.price-section { text-align: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 0.0625rem solid var(--border); }
.price-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.375rem; }
.price-badge { display: inline-block; background-color: var(--input-bg); color: var(--danger); font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.625rem; border-radius: 1rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.02em; }
.price-container { display: flex; align-items: center; justify-content: center; gap: 0.375rem; line-height: 1; }
.price-old { font-size: 1.1rem; color: var(--text-muted); text-decoration: line-through; font-weight: 500; }
.price-amount { font-size: 2.25rem; font-weight: 800; color: var(--text-main); letter-spacing: -0.03em; }
.price-currency { font-size: 1.35rem; font-weight: 700; vertical-align: super; }
.price-note { font-size: 0.725rem; color: var(--text-muted); margin-top: 0.5rem; line-height: 1.3; }

/* ── Go Premium page (see plans.js) — the benefits copy and the price/CTA
   are two separate boxes, stacked, rather than crammed into one card. ── */
.premium-benefits-box { background: var(--bg-body); border: 0.0625rem solid var(--border); border-radius: 1rem; padding: 1.1rem 1.25rem; margin-bottom: 1rem; }
.premium-benefits-box h4 { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.premium-benefits-list { display: flex; flex-direction: column; gap: 0.65rem; list-style: none; padding: 0; margin: 0; }
.premium-benefits-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; color: var(--text-main); line-height: 1.4; }
.premium-benefits-list li i { color: var(--primary); margin-top: 0.2rem; flex-shrink: 0; font-size: 0.8rem; }

.premium-price-box { display: flex; align-items: center; justify-content: space-between; background: var(--primary-gradient); border-radius: 1rem; padding: 1.15rem 1.35rem; margin-bottom: 1rem; cursor: pointer; transition: opacity 0.2s, transform 0.15s; }
.premium-price-box:hover { opacity: 0.94; }
.premium-price-box:active { transform: scale(0.99); }
.premium-price-box-amount { font-size: 1.6rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.premium-price-box-amount .premium-plan-period { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.85); margin-left: 0.2rem; }
.premium-price-box-cta { font-size: 0.85rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 0.45rem; background: rgba(255,255,255,0.18); padding: 0.55rem 0.9rem; border-radius: 0.6rem; }

/* Action CTA Button */
.payment-btn { width: 100%; background: var(--primary-gradient); color: var(--bg-card); border: none; padding: 1rem 1.25rem; border-radius: 0.75rem; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; display: flex; flex-direction: row-reverse; align-items: center; justify-content: center; gap: 0.5rem; transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s, opacity 0.2s; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); -webkit-tap-highlight-color: transparent; }
.payment-btn:hover { opacity: 0.95; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); }
.payment-btn:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); }
.payment-btn i { font-size: 0.85rem; transition: transform 0.2s ease; }
.payment-btn:hover i { transform: translateX(2px); }

/* Security & Trust Footers */
.security-box { background: var(--bg-body); border-radius: 0.75rem; padding: 0.875rem; border: 0.0625rem solid var(--border); font-size: 0.75rem; margin: 1rem 0; }
.security-box-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; }
.security-box-header i { color: var(--primary); font-size: 0.8rem; }
.security-box-header h4 { font-size: 0.75rem; font-weight: 700; color: var(--text-main); }
.security-box p { color: var(--text-muted); line-height: 1.4; }
.trust-badge { display: flex; justify-content: space-between; align-items: center; padding-top: 0.875rem; border-top: 0.0625rem solid var(--border); }
.trust-item { display: flex; align-items: center; gap: 0.25rem; font-size: 0.6875rem; color: var(--text-muted); font-weight: 500; }
.trust-item i { color: var(--primary); font-size: 0.7rem; }

/* Dark mode: force these two cards to a dark surface with pure white content.
   Price figures are excluded from the white flip and use a lighter green tint
   instead, so they still stand out against the card. */
body.dark-mode .benefits-card,
body.dark-mode .action-card {
    background: #1e293b;
}

body.dark-mode .benefits-title,
body.dark-mode .benefit-content h3,
body.dark-mode .benefit-content p,
body.dark-mode .price-label,
body.dark-mode .price-note,
body.dark-mode .security-box-header h4,
body.dark-mode .security-box p,
body.dark-mode .trust-item {
    color: #ffffff;
}

body.dark-mode .price-amount,
body.dark-mode .price-currency {
    color: #14b8a6;
}

/* ==========================================================================
   SUBSCRIPTION — TIER SELECTOR
   (extracted from SubscriptionView.js's embedded <style> block so it lives
   here instead; --card-bg/--border-color never existed as real tokens, so
   they always fell back to hardcoded white regardless of theme — replaced
   with the real --bg-card/--border variables, which already flip dark mode)
   ========================================================================== */
.tier-selector { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; margin-bottom: 1.5625rem; }
.tier-card {
    border: 0.125rem solid var(--border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-card);
}
.tier-card:hover {
    border-color: var(--success);
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}
.tier-card.tier-card-disabled:hover {
    border-color: var(--border);
    transform: none;
    box-shadow: none;
}
.tier-info h4 { margin: 0 0 0.375rem 0; font-size: 1.2rem; color: var(--text-main); }
.tier-info p { margin: 0; font-size: 0.95rem; color: var(--text-muted); }
.tier-price-wrapper { display: flex; align-items: center; gap: 0.75rem; }
.tier-price { font-weight: 700; font-size: 1.3rem; color: var(--success); }
.premium-plan-period { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); margin-left: 0.15rem; }
.tier-arrow { color: var(--text-muted); font-size: 1.1rem; transition: transform 0.2s; }
.tier-card:hover .tier-arrow { transform: translateX(0.25rem); color: var(--success); }

/* Tier price stays a readable green instead of flipping to white with the
   rest of the card content in dark mode (same treatment as .price-amount) */
body.dark-mode .tier-price { color: #14b8a6; }

/* Replaces the old inline style="" on the "You're currently on Tier X" banner */
.current-tier-banner {
    margin-bottom: 1rem;
    padding: 0.875rem 1.125rem;
    background: var(--bg-card);
    border: 0.0625rem solid var(--border);
    border-radius: 0.625rem;
    color: var(--text-main);
}
body.dark-mode .current-tier-banner {
    background: #1e293b;
}

/* ==========================================================================
   CHECKOUT & PAYMENT GATEWAY (Refactored & Minified)
   ========================================================================== */

/* Layout & Header */
.payment-wrapper { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; margin-top: -0.5rem; }
.payment-header-section { text-align: center; padding: 0.5rem 0; margin-bottom: 0; }
.payment-lock-icon { font-size: 2.25rem; color: var(--pay-primary); margin-bottom: 0.375rem; display: inline-flex; align-items: center; justify-content: center; }
.payment-header-section h1 { font-size: 1.45rem; font-weight: 800; color: var(--text-main); letter-spacing: -0.02em; margin: 0; line-height: 1.2; }
.payment-subhead { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.375rem; line-height: 1.4; }
.payment-user-pill { display: inline-flex; align-items: center; justify-content: center; background: var(--bg-slate); border: 0.0625rem solid var(--border); padding: 0.3rem 0.85rem; border-radius: 6.25rem; font-size: 0.775rem; font-weight: 600; color: var(--text-main); margin-top: 0.625rem; letter-spacing: 0.01em; }

/* Summary Card */
.payment-summary-card { background: var(--bg-card); border: 0.0625rem solid var(--border); border-radius: 1rem; padding: 1.25rem; display: flex; flex-direction: column; }
.summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }
.summary-value { font-weight: 600; color: var(--text-main); }
.summary-divider { border: 0; border-top: 0.0625rem solid var(--border); margin: 0.875rem 0; }
.total-row { font-size: 0.95rem; font-weight: 700; color: var(--text-main); }
.total-row .summary-value { font-size: 1.35rem; font-weight: 800; color: var(--pay-primary); letter-spacing: -0.02em; }

/* Gateway Simulation Box */
.gateway-simulation-box { background: var(--bg-card); border: 0.0938rem dashed var(--border-dashed); border-radius: 1rem; padding: 1.25rem; text-align: center; display: flex; flex-direction: column; }
.gateway-title { font-size: 0.9rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; justify-content: center; gap: 0.375rem; margin-bottom: 0.375rem; }
.gateway-desc { font-size: 0.775rem; color: var(--text-muted); line-height: 1.45; margin-bottom: 1.125rem; padding: 0 0.25rem; }
.gateway-buttons { display: flex; flex-direction: column; gap: 0.625rem; width: 100%; }

/* Gateway Buttons */
.mock-gate-btn { width: 100%; padding: 0.95rem 1.25rem; border: none; border-radius: 0.5rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: #ffffff; transition: transform 0.15s, background-color 0.15s, box-shadow 0.15s; -webkit-tap-highlight-color: transparent; }
.mock-gate-btn:active { transform: scale(0.985); }

/* Button States */
.mock-gate-btn.btn-success { background-color: var(--success); box-shadow: 0 2px 8px rgba(7, 94, 84, 0.15); }
.mock-gate-btn.btn-success:hover { background-color: var(--success-hover); box-shadow: 0 4px 12px rgba(7, 94, 84, 0.25); }
.mock-gate-btn.btn-danger { background-color: var(--danger); box-shadow: 0 2px 8px rgba(239, 68, 68, 0.15); }
.mock-gate-btn.btn-danger:hover { background-color: var(--danger-hover); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25); }
.mock-gate-btn.btn-cancel { background-color: var(--cancel); box-shadow: 0 2px 8px rgba(100, 116, 139, 0.1); }
.mock-gate-btn.btn-cancel:hover { background-color: var(--cancel-hover); box-shadow: 0 4px 12px rgba(100, 116, 139, 0.2); }

/* Footer Notice */
.payment-footer-notice { text-align: center; font-size: 0.725rem; color: var(--text-muted); margin-top: 0.5rem; padding-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.35rem; line-height: 1.3; }
.payment-footer-notice i { font-size: 0.775rem; }

/* ==========================================================================
   VERIFICATION AUDIT INPUT & FORMS (Refactored & Minified)
   ========================================================================== */

/* Form Structures */
.verification-form { text-align: left; display: flex; flex-direction: column; gap: 1.25rem; }
.form-group-block { display: flex; flex-direction: column; gap: 0.35rem; }
.form-input-label { font-size: 0.8rem; font-weight: 600; color: var(--text-main); }
.form-input-field { width: 100%; padding: 0.75rem; border: 1px solid var(--border); background: var(--bg-action); color: var(--text-main); border-radius: 0.5rem; font-size: 0.85rem; font-family: inherit; box-sizing: border-box; transition: border-color 0.2s ease; }
.form-input-field:focus { outline: none; border-color: var(--benefit-icon-color); }
.form-textarea { resize: none; height: 4.5rem; }
.form-select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1rem; padding-right: 2rem; }
.form-input-tip { font-size: 0.65rem; color: var(--text-muted); }

/* File Dropzone Component */
.upload-dropzone { border: 2px dashed var(--border); background: var(--input-bg); border-radius: 0.75rem; padding: 1.5rem; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; transition: all 0.2s ease; }
.upload-dropzone:hover { border-color: var(--benefit-icon-color); background: var(--bg-action); }
.upload-dropzone.attached { border-color: var(--success); background: var(--success-bg); }
.dropzone-icon { font-size: 1.75rem; color: var(--text-muted); }
.upload-dropzone.attached .dropzone-icon { color: var(--success); }
.dropzone-text { font-size: 0.8rem; font-weight: 600; color: var(--text-main); }
.dropzone-subtext { font-size: 0.65rem; color: var(--text-muted); }

/* --- Core Layout & Structure --- */
.profile-wrapper, .posts-container { width: 100%; max-width: 520px; margin: 1.5rem auto; padding: 0 1rem; box-sizing: border-box; }
.profile-form, .form-grid, .premium-fields-wrapper { display: flex; flex-direction: column; gap: 1.5rem; }
.form-grid { gap: 1.25rem; }

/* ── Accommodations hub page (see accommodations.js) ── */
.accommodations-intro { display: flex; align-items: flex-start; gap: 0.85rem; max-width: 520px; margin: 1.25rem auto 0; padding: 0 1rem; box-sizing: border-box; }
.accommodations-intro-icon { flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: color-mix(in srgb, var(--primary) 12%, var(--bg-card)); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.accommodations-intro-title { font-size: 0.92rem; font-weight: 700; color: var(--text-main); }
.accommodations-intro-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; line-height: 1.45; }
.accommodations-contact-warning { display: flex; align-items: center; gap: 0.6rem; max-width: 520px; margin: 0.9rem auto 0; padding: 0.7rem 1rem; box-sizing: border-box; background: color-mix(in srgb, #e2a000 12%, var(--bg-card)); border: 1px solid #e2a000; border-radius: 0.75rem; font-size: 0.8rem; color: var(--text-main); }
.accommodations-contact-warning i { color: #e2a000; flex-shrink: 0; }
.accommodations-contact-warning a { color: var(--primary); font-weight: 700; }

/* --- Clean Circular Avatar & Camera Badge --- */
.agent-avatar-container { display: flex; justify-content: center; padding: 0.5rem 0 1.5rem; }
.agent-avatar-preview-wrapper { position: relative; width: 7.5rem; height: 7.5rem; border-radius: 50%; background: var(--input-bg); display: flex; align-items: center; justify-content: center; border: 3px solid var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.agent-avatar-preview-wrapper img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.letter-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}
.avatar-camera-badge { position: absolute; bottom: -2px; right: -2px; background: var(--primary); color: #fff; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 3px solid var(--bg-card); box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: transform 0.2s; }
.avatar-camera-badge:hover { transform: scale(1.05); }
#agentAvatarFileInput, .file-input-wrapper input { display: none !important; }

/* --- Form Fields & Dropdowns --- */
.form-group-block { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group-block label { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.form-block-label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.form-group-block input, .form-group-block textarea, .select-wrapper select { width: 100%; padding: 0.875rem 1rem; border: 1px solid var(--border); background: var(--bg-card); border-radius: 0.75rem; font-size: 0.95rem; color: var(--text-main); outline: none; box-sizing: border-box; transition: border-color 0.2s; }
.form-group-block input:focus, .form-group-block textarea:focus, .select-wrapper select:focus { border-color: var(--primary); }

.select-wrapper { position: relative; }
.select-wrapper select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; cursor: pointer; }
.select-arrow-icon { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; font-size: 0.85rem; }
.section-divider { border: 0; height: 1px; background: var(--border); margin: 1rem 0; }

/* --- Paid Business Account: multi-campus chip picker (pick one, several,
   or all campuses of the chosen university) — see lodge-manager.js.
   Deliberately styled after .fsheet-type-chip so it reads as "the same
   kind of control" as the existing apartment-type filter chips. --- */
.campus-chip-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.campus-chip { padding: 0.4rem 0.875rem; border-radius: 2rem; border: 1px solid var(--border); background: var(--input-bg); color: var(--text-muted); font-size: 0.8rem; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.campus-chip:hover { border-color: var(--primary); color: var(--primary); }
.campus-chip.is-active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* "Online / no physical location" toggle — see lodge-manager.js. Sits
   right under the campus chips it's an alternative to. */
.delivers-everywhere-row { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; padding: 0.7rem 0.85rem; border-radius: 0.75rem; background: var(--input-bg); border: 1px solid var(--border); cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--text-main); }
.delivers-everywhere-row input[type="checkbox"] { width: 1.1rem; height: 1.1rem; flex-shrink: 0; accent-color: var(--primary); cursor: pointer; }
.delivers-everywhere-row i { color: var(--primary); margin-right: 0.2rem; }
.delivers-everywhere-hint { display: block; margin-top: 0.4rem; font-size: 0.75rem; color: var(--text-muted); }

/* --- Premium Tier Mechanics --- */
.tier-locked-faded { opacity: 0.6; pointer-events: none; }
.menu-group-title { font-size: 0.95rem; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 0.5rem; }
.premium-upsell-lock-card { display: flex; align-items: center; justify-content: space-between; background: var(--bg-action); border: 1px dashed var(--primary); border-radius: 0.75rem; padding: 1rem; cursor: pointer; width: 100%; box-sizing: border-box; }
.upsell-text { color: var(--primary); font-size: 0.875rem; font-weight: 600; }

/* --- Integrated Buttons System --- */
.form-actions { display: flex; flex-direction: column; gap: 0.75rem; }
.btn-primary, .btn-danger { width: 100%; padding: 0.95rem; font-size: 0.95rem; font-weight: 600; border-radius: 0.75rem; cursor: pointer; box-sizing: border-box; transition: 0.2s; }
.btn-primary { background: var(--primary); color: #fff; border: none; }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }

/* --- User Posts Feed Engine --- */
.posts-header { font-size: 1.1rem; font-weight: 700; color: var(--text-main); margin-bottom: 1rem; }
.btn-secondary-outline { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1rem; border: 1px solid var(--border); border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--text-main); cursor: pointer; background: var(--bg-card); }
.file-input-wrapper { margin: 0.75rem 0; }
.post-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.25rem; margin-bottom: 1rem; transition: opacity 0.3s; }
.post-images-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.875rem; }
.post-images-grid img { width: calc(33.333% - 0.35rem); min-width: 80px; height: 80px; object-fit: cover; border-radius: 0.5rem; border: 1px solid var(--border); }
.post-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding-top: 0.875rem; border-top: 1px solid var(--border); }
.post-date { font-size: 11px; color: var(--text-muted); }
.post-actions { display: flex; gap: 0.5rem; }
.action-btn { background: transparent; border: none; font-size: 0.85rem; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 0.25rem; }
.btn-edit { color: var(--primary); }
.btn-delete { color: var(--danger); }

/* --- System Alerts & Fallbacks --- */
.empty-state { text-align: center; padding: 2rem; color: var(--text-muted); font-size: 0.95rem; }
.alert-limit { background: #fff9db; border: 1px solid #ffe066; color: #f59f00; padding: 1rem; border-radius: 0.75rem; font-size: 0.9rem; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; }
.auth-fallback-container { padding: 3rem 1.5rem; text-align: center; color: var(--text-muted); }

/* ==========================================================================
   MESSAGES/CHAT ARCHITECTURE LAYOUT
   ========================================================================== */

/* Chat-specific tokens not in the global root */
.chat-page-wrapper {
    --bubble-sent: color-mix(in srgb, var(--primary) 20%, white);
    --bubble-sent-text: #1e293b;
    --bubble-received: #ffffff;
    --bubble-received-text: #1e293b;
}

body.dark-mode .chat-page-wrapper {
    --bubble-sent: color-mix(in srgb, var(--primary) 25%, var(--bg-card));
    --bubble-sent-text: #f8fafc;
    --bubble-received: #334155;
    --bubble-received-text: #f8fafc;
}

.chat-page-wrapper {
    width: 100%;
    height: 100%;
    background-color: var(--bg-body);
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    transition: background 0.3s ease;
}

/* ── Header ── */
.chat-page-wrapper .chat-header {
    background: var(--primary);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.chat-page-wrapper .back-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-page-wrapper .agent-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    /* In light theme --primary is the same green as .chat-header's own
       background, so a plain letter-avatar circle (also --primary) visually
       disappears into the header behind it. A white ring gives it a clear
       edge regardless of what's inside — letter or uploaded photo. Dark
       theme flips --primary to white for the header text/avatars, so it
       already has natural contrast and doesn't need this. */
    border: 0.125rem solid #fff;
}

body.dark-mode .chat-page-wrapper .agent-avatar {
    border-color: transparent;
}

.chat-page-wrapper .agent-avatar .letter-avatar {
    font-size: 1.1rem;
}

.chat-page-wrapper .agent-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.chat-page-wrapper .agent-info {
    flex: 1;
    min-width: 0;
}

.chat-page-wrapper .agent-name {
    font-weight: 600;
    font-size: 1rem;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-page-wrapper .agent-status {
    font-size: 0.7rem;
    opacity: 0.9;
    color: rgba(255, 255, 255, 0.85);
}

/* Chat options menu button — opens the WhatsApp-number dropdown.
   Vertical three-dot icon, sized like a normal icon button, no text
   label, pinned near the header's right edge. */
.chat-page-wrapper .menu-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: auto;
}

/* Dropdown */
.chat-page-wrapper .header-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    z-index: 100;
    min-width: 240px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    display: none;
    flex-direction: column;
    gap: 10px;
}

.chat-page-wrapper .header-dropdown.open {
    display: flex;
}

.chat-page-wrapper .header-dropdown label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.chat-page-wrapper .header-dropdown input[type="tel"] {
    width: 100%;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text-main);
    font-size: 0.9rem;
    box-sizing: border-box;
    outline: none;
}

.chat-page-wrapper .header-dropdown .save-wa-btn {
    padding: 9px;
    background: var(--success);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.chat-page-wrapper .header-dropdown .save-wa-btn:hover {
    background: var(--success-hover);
}

/* ── Messages Area ── */
.chat-page-wrapper #messages-area {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: var(--bg-body);
}

.chat-page-wrapper .message-wrapper {
    display: flex;
    width: 100%;
}

.chat-page-wrapper .message-wrapper.sent {
    justify-content: flex-end;
}

.chat-page-wrapper .message-wrapper.received {
    justify-content: flex-start;
}

.chat-page-wrapper .message-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 16px;
    position: relative;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.chat-page-wrapper .sent .message-bubble {
    background: var(--bubble-sent);
    color: var(--bubble-sent-text);
    border-bottom-right-radius: 4px;
}

.chat-page-wrapper .received .message-bubble {
    background: var(--bubble-received);
    color: var(--bubble-received-text);
    border-bottom-left-radius: 4px;
    border: 1px solid var(--border);
}

.chat-page-wrapper .message-text {
    font-size: 0.92rem;
    line-height: 1.45;
}

.chat-page-wrapper .message-time {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 4px;
    text-align: right;
}

/* Quoted-post card shown inside a message bubble when that message was
   sent as a reply from a specific post's "Contact in App" button. */
.chat-page-wrapper .quoted-post-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    background: rgba(0, 0, 0, 0.06);
    border: none;
    border-radius: 0.6rem;
    padding: 0.4rem;
    margin-bottom: 0.4rem;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    color: inherit;
}
.chat-page-wrapper .received .quoted-post-card { background: var(--bg-body); }
.chat-page-wrapper .quoted-post-thumb {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.4rem;
    object-fit: cover;
    flex-shrink: 0;
}
.chat-page-wrapper .quoted-post-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}
.chat-page-wrapper .quoted-post-label {
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.8;
}
.chat-page-wrapper .quoted-post-snippet {
    font-size: 0.75rem;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Composer's "replying to this post" preview bar — sits between the
   message list and the input row, with a ✕ to cancel it before sending. */
.chat-page-wrapper .reply-preview-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}
.chat-page-wrapper .reply-preview-thumb {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.4rem;
    object-fit: cover;
    flex-shrink: 0;
}
.chat-page-wrapper .reply-preview-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
.chat-page-wrapper .reply-preview-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--primary);
}
.chat-page-wrapper .reply-preview-snippet {
    font-size: 0.78rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-page-wrapper .reply-preview-cancel {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: none;
    background: var(--input-bg);
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
}
.chat-page-wrapper .reply-preview-cancel:hover {
    background: var(--border);
    color: var(--text-main);
}

/* ── Input Area ── */
.chat-page-wrapper .input-area {
    padding: 10px 12px;
    background: var(--bg-card);
    display: flex;
    gap: 8px;
    align-items: center;
    border-top: 1px solid var(--border);
    box-sizing: border-box;
}

/* WhatsApp icon — sized and colored to exactly match the right action
   button (#actionBtn: 40x40 circle, var(--primary) fill when "live"). */
.chat-page-wrapper .wa-icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.2s;
}

.chat-page-wrapper .wa-icon-btn svg {
    width: 26px;
    height: 26px;
}

.chat-page-wrapper .wa-icon-btn.inactive {
    background: none;
}

.chat-page-wrapper .wa-icon-btn.inactive svg circle,
.chat-page-wrapper .wa-icon-btn.inactive svg path {
    fill: var(--text-muted);
    opacity: 0.45;
}

/* Activated state: filled circle in var(--primary), matching #actionBtn's
   resting look exactly. The inner circle is colored the same as the button
   background (so it blends seamlessly) and the call glyph renders white. */
.chat-page-wrapper .wa-icon-btn.active {
    background: var(--primary);
}

.chat-page-wrapper .wa-icon-btn.active svg circle {
    fill: var(--primary);
}

.chat-page-wrapper .wa-icon-btn.active svg path {
    fill: white;
    opacity: 1;
}

/* Text input wrapper */
.chat-page-wrapper .input-text-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: 0 14px;
    min-width: 0;
}

.chat-page-wrapper #messageInput {
    flex: 1;
    padding: 10px 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-main);
    font-size: 0.92rem;
    min-width: 0;
}

/* Right action button */
.chat-page-wrapper .icon-btn {
    border: none;
    background: var(--primary);
    color: white;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: transform 0.1s ease, background 0.2s;
}

.chat-page-wrapper .icon-btn:active {
    transform: scale(0.92);
}

.chat-page-wrapper .icon-btn.send-voice-btn {
    background: var(--success);
}

/* ── Recording Bar ── */
.chat-page-wrapper .recording-bar {
    display: none;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.chat-page-wrapper .recording-bar.active {
    display: flex;
}

.chat-page-wrapper .rec-delete-btn {
    background: none;
    border: none;
    color: var(--danger);
    font-size: 1rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.chat-page-wrapper .rec-timer {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--danger);
    min-width: 36px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.chat-page-wrapper .rec-waveform {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 32px;
    overflow: hidden;
    min-width: 0;
}

.chat-page-wrapper .rec-waveform span {
    display: inline-block;
    width: 3px;
    border-radius: 2px;
    background: var(--danger);
    animation: wave-bar 0.8s ease-in-out infinite;
    flex-shrink: 0;
}

.chat-page-wrapper .rec-waveform span:nth-child(1) { animation-delay: 0.00s; height: 40%; }
.chat-page-wrapper .rec-waveform span:nth-child(2) { animation-delay: 0.10s; height: 70%; }
.chat-page-wrapper .rec-waveform span:nth-child(3) { animation-delay: 0.20s; height: 55%; }
.chat-page-wrapper .rec-waveform span:nth-child(4) { animation-delay: 0.30s; height: 90%; }
.chat-page-wrapper .rec-waveform span:nth-child(5) { animation-delay: 0.40s; height: 60%; }
.chat-page-wrapper .rec-waveform span:nth-child(6) { animation-delay: 0.10s; height: 45%; }
.chat-page-wrapper .rec-waveform span:nth-child(7) { animation-delay: 0.20s; height: 80%; }
.chat-page-wrapper .rec-waveform span:nth-child(8) { animation-delay: 0.35s; height: 50%; }

@keyframes wave-bar {
    0%, 100% { transform: scaleY(0.4); opacity: 0.7; }
    50%       { transform: scaleY(1);   opacity: 1;   }
}

.chat-page-wrapper .rec-pause-btn {
    background: none;
    border: 1.5px solid var(--text-muted);
    color: var(--text-main);
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    font-size: 0.78rem;
}

/* ==========================================================================
   CHAT LIST DASHBOARD ARCHITECTURE
   ========================================================================== */

.chat-list-screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-card);
    box-sizing: border-box;
}

.chat-list-screen .conversations-scroll-area {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-top: 5.375rem; /* clears the absolutely-positioned standard .header */
    padding-bottom: 70px; /* Accounts for bottom nav bar positioning gaps */
}

/* Chat Item Layout Row Elements */
.conversation-item-row {
    display: flex;
    padding: 14px 16px;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.15s ease;
}

.conversation-item-row.is-unread {
    border: 1.5px solid var(--primary);
    border-radius: 0.875rem;
    margin: 0.25rem 0.5rem;
}

.conversation-item-row.is-pinned {
    background: var(--bg-body);
}

.row-pin-icon {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-right: 0.1rem;
}

.conversation-item-row:hover {
    background-color: var(--input-bg);
}

.conversation-item-row .row-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--input-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.conversation-item-row .row-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.conversation-item-row .row-avatar i {
    font-size: 2rem;
    color: var(--text-muted);
}

.conversation-item-row .row-avatar .letter-avatar {
    font-size: 1.3rem;
}

.conversation-item-row .row-details {
    flex: 1;
    min-width: 0; /* Forces truncation properties to respect flex box limits */
}

.conversation-item-row .row-top-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.conversation-item-row .peer-title-text {
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-item-row .peer-time-stamp {
    font-size: 0.72rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.conversation-item-row .row-message-preview {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fallback Structural Mechanics */
.chat-list-loading {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-muted);
}

.chat-list-loading i {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.empty-chats-state {
    text-align: center;
    margin: auto 0;
    padding: 2rem;
    color: var(--text-muted);
}

.empty-chats-state i {
    font-size: 3rem;
    color: var(--border);
    margin-bottom: 1rem;
}

.empty-chats-state h3 {
    color: var(--text-main);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.empty-chats-state p {
    font-size: 0.88rem;
    max-width: 280px;
    margin: 0 auto;
    line-height: 1.4;
}


/* ==========================================================================
   MOBILE VIEWPORT & SAFE AREA ADJUSTMENTS
   ========================================================================== */
@media (max-width: 768px) {
    /* Ensures the main application frame or wrapper takes up exactly 100% of the true visible height */
    .app-container, main, #app, .wrapper {
        height: 100%;
        max-height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Automatically adds safe space beneath your low navbar for modern edge-to-edge phone screens */
    footer, .bottom-nav, .low-navbar, nav[style*="bottom"] {
        padding-bottom: env(safe-area-inset-bottom, 12px);
        flex-shrink: 0;
    }
}

/* ==========================================================================
   AGENT PROFILE PAGE
   ========================================================================== */

/* Page fade-in */
.animate-fade {
    animation: fadeIn 0.25s ease-out both;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Auth fallback */
.auth-fallback-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2rem;
}
.fallback-text {
    color: var(--text-muted);
    font-size: 0.95rem;
    text-align: center;
}

/* ==========================================================================
   PROFILE WRAPPER
   ========================================================================== */
.profile-wrapper {
    margin-bottom: 1.5rem;
    /* Overrides the narrower max-width/padding it would otherwise inherit
       from the shared ".profile-wrapper, .posts-container" rule further up
       this file, so this section spans the exact same width as the posts
       section below it (see .posts-container's matching override). */
    max-width: none;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
}

/* ---------- VIEW MODE CARD ---------- */
.profile-view-card {
    background: var(--bg-card);
    border: 0.0625rem solid var(--border);
    border-radius: 1.25rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);
}

.profile-view-avatar {
    display: flex;
    justify-content: center;
}

.profile-avatar-circle {
    position: relative;
    width: 5rem;
    height: 5rem;
}

.profile-avatar-edit-btn {
    position: absolute;
    bottom: -0.15rem;
    right: -0.15rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 0.1875rem solid var(--bg-card);
    box-shadow: 0 0.125rem 0.375rem rgba(0,0,0,0.15);
    font-size: 0.68rem;
    transition: transform 0.15s;
}

.profile-avatar-edit-btn:hover {
    transform: scale(1.08);
}

.profile-avatar-edit-btn.is-uploading {
    pointer-events: none;
    opacity: 0.65;
}

.profile-view-avatar img,
.profile-view-avatar .letter-avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 0.1875rem solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--input-bg);
    color: var(--text-muted);
    font-size: 1.75rem;
}

.profile-view-avatar .letter-avatar {
    background: var(--primary);
    color: #fff;
    font-size: 2.1rem;
}

.profile-view-details {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.profile-view-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 0.0625rem solid var(--border);
}

.profile-view-row:last-child {
    border-bottom: none;
}

.profile-view-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 5rem;
}

.profile-view-value {
    font-size: 0.9rem;
    color: var(--text-main);
    font-weight: 500;
    text-align: right;
    word-break: break-word;
}

.profile-view-bio-row {
    flex-direction: column;
    align-items: flex-start;
}

.profile-view-bio-row .profile-view-value {
    text-align: left;
    font-weight: 400;
    line-height: 1.55;
    color: var(--text-muted);
}

/* Photos need their own line entirely, not a narrow column squeezed to
   the right of the label like a plain text value — the grid below wants
   the row's full width. Was previously reusing .profile-view-row's
   default label:value side-by-side layout unmodified, which put the
   photo strip to the right of "Photos" instead of below it. */
.profile-view-photos-row {
    flex-direction: column;
    align-items: flex-start;
}

.profile-view-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.25rem;
}

/* ==========================================================================
   EDIT / CREATE MODE — FORM
   ========================================================================== */
.profile-form {
    background: var(--bg-card);
    border: 0.0625rem solid var(--border);
    border-radius: 1.25rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);
}

/* ---------- FORM GRID ---------- */
.form-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group-block {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.form-group-block label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.form-group-block input[type="text"],
.form-group-block input[type="tel"],
.form-group-block textarea {
    width: 100%;
    background: var(--input-bg);
    border: 0.0625rem solid var(--border);
    border-radius: 0.75rem;
    padding: 0.75rem 0.875rem;
    color: var(--text-main);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
    font-family: 'Inter', sans-serif;
    resize: none;
}

.form-group-block input:focus,
.form-group-block textarea:focus {
    border-color: var(--primary);
    background-color: var(--bg-card);
}

.form-group-block input::placeholder,
.form-group-block textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* Select wrapper with custom chevron */
.select-wrapper {
    position: relative;
}

.select-wrapper select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: var(--input-bg);
    border: 0.0625rem solid var(--border);
    border-radius: 0.75rem;
    padding: 0.75rem 2.25rem 0.75rem 0.875rem;
    color: var(--text-main);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.select-wrapper select:focus {
    border-color: var(--primary);
    background-color: var(--bg-card);
}

.select-arrow-icon {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.7rem;
    pointer-events: none;
}

.optional-tag {
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-muted);
    opacity: 0.75;
}

/* ---------- FORM ACTIONS ---------- */
.form-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ---------- BUTTONS (page-level) ---------- */
.btn-primary {
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: 0.75rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity 0.2s;
    flex: 1;
    justify-content: center;
}

.btn-primary:hover   { opacity: 0.88; }
.btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-secondary-outline {
    background: transparent;
    color: var(--text-muted);
    border: 0.0625rem solid var(--border);
    border-radius: 0.75rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: border-color 0.2s, color 0.2s;
    flex: 1;
    justify-content: center;
}

.btn-secondary-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ==========================================================================
   POSTS SECTION
   ========================================================================== */
.posts-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Overrides the narrower max-width/padding it would otherwise inherit
       from the shared ".profile-wrapper, .posts-container" rule above, so
       these cards span the same width as the account page's tabs
       (.menu-group), which only ever pick up .content-area's own padding. */
    max-width: none;
    padding: 0;
    margin: 1.5rem 0;
}

.posts-header {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}

.posts-header span {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.posts-header i {
    color: var(--primary);
    font-size: 0.9rem;
}

.new-listing-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.new-listing-btn:hover { opacity: 0.88; }

/* ---------- CREATE POST FORM ---------- */
.create-post-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
}

.create-post-back-btn {
    background: var(--bg-card);
    border: 0.0625rem solid var(--border);
    color: var(--text-main);
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
}

.image-preview-thumb {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
}

.image-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.625rem;
    border: 0.0625rem solid var(--border);
}

.image-preview-remove-btn {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--danger, #e74c3c);
    color: #fff;
    border: 0.125rem solid var(--bg-body);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.post-form-card {
    background: var(--bg-card);
    border: 0.0625rem solid var(--border);
    border-radius: 1.25rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);
}

.post-textarea {
    width: 100%;
    background: var(--input-bg);
    border: 0.0625rem solid var(--border);
    border-radius: 0.75rem;
    padding: 0.75rem 0.875rem;
    color: var(--text-main);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    line-height: 1.55;
    resize: none;
    outline: none;
    min-height: 5rem;
    transition: border-color 0.2s, background-color 0.2s;
}

.post-textarea:focus {
    border-color: var(--primary);
    background-color: var(--bg-card);
}

.post-textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.file-input-wrapper {
    display: flex;
    align-items: center;
}

.file-input-wrapper label.btn-secondary-outline {
    font-size: 0.82rem;
    padding: 0.55rem 1rem;
    flex: none;
    cursor: pointer;
}

.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.image-preview-container img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 0.625rem;
    border: 0.0625rem solid var(--border);
}

.btn-submit-post {
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: 0.75rem;
    padding: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    transition: opacity 0.2s;
}

.btn-submit-post:hover    { opacity: 0.88; }
.btn-submit-post:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---------- POSTS LIST ---------- */
.posts-list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    background: var(--bg-card);
    border: 0.0625rem dashed var(--border);
    border-radius: 1.25rem;
}

/* ---------- POST CARD ---------- */
.post-card {
    background: var(--bg-card);
    border: 0.0625rem solid var(--border);
    border-radius: 1.25rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);
    transition: opacity 0.3s ease;
}

.post-card-content {
    font-size: 0.9rem;
    color: var(--text-main);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.post-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
    gap: 0.5rem;
}

.post-images-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.625rem;
    border: 0.0625rem solid var(--border);
}

.post-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 0.0625rem solid var(--border);
}

.post-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.post-actions {
    display: flex;
    gap: 0.5rem;
}

.action-btn {
    border: none;
    border-radius: 0.625rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: opacity 0.2s;
}

.btn-edit {
    background: var(--input-bg);
    color: var(--text-main);
    border: 0.0625rem solid var(--border);
}

.btn-edit:hover { opacity: 0.75; }

.btn-delete {
    background: #fef2f2;
    color: var(--danger);
    border: 0.0625rem solid #fecaca;
}

.btn-delete:hover { opacity: 0.8; }

/* ---------- EDIT MODE (inline) ---------- */
.edit-mode-controls {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

.btn-cancel {
    background: var(--input-bg);
    color: var(--text-muted);
    border: 0.0625rem solid var(--border);
    border-radius: 0.625rem;
    padding: 0.45rem 0.875rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-cancel:hover { opacity: 0.7; }

.btn-save {
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: 0.625rem;
    padding: 0.45rem 0.875rem;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn-save:hover    { opacity: 0.88; }
.btn-save:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ---------- POST METADATA ROW (apartment type + price range) ---------- */
.post-meta-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.post-meta-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    min-width: 9rem;
}

.post-meta-group label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.optional-tag {
    text-transform: none;
    font-weight: 500;
    letter-spacing: normal;
    opacity: 0.75;
}

.post-video-link-input {
    width: 100%;
    background: var(--input-bg);
    border: 0.0625rem solid var(--border);
    border-radius: 0.75rem;
    padding: 0.7rem 0.875rem;
    color: var(--text-main);
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
    box-sizing: border-box;
}
.post-video-link-input:focus {
    border-color: var(--primary);
    background-color: var(--bg-card);
}
.post-video-link-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.price-range-inputs {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.price-range-inputs input[type="number"] {
    flex: 1;
    min-width: 0;
    background: var(--input-bg);
    border: 0.0625rem solid var(--border);
    border-radius: 0.75rem;
    padding: 0.75rem 0.625rem;
    color: var(--text-main);
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
    -moz-appearance: textfield;
}

.price-range-inputs input[type="number"]::-webkit-outer-spin-button,
.price-range-inputs input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.price-range-inputs input[type="number"]:focus {
    border-color: var(--primary);
    background-color: var(--bg-card);
}

.price-range-inputs input[type="number"]::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.price-range-sep {
    font-size: 0.85rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ---------- LISTING TAGS (on post cards) ---------- */
.post-listing-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding-bottom: 0.5rem;
    border-bottom: 0.0625rem solid var(--border);
}

.listing-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 2rem;
    line-height: 1;
}

.listing-tag-type {
    background: var(--input-bg);
    color: var(--text-main);
    border: 0.0625rem solid var(--border);
}

.listing-tag-price {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    border: 0.0625rem solid color-mix(in srgb, var(--primary) 25%, transparent);
}


/* ---------- PAYMENT PLAN COLUMN (post form + edit form) ---------- */
.payment-plan-group {
    flex: 1 1 100%;
    min-width: 0;
}

.payment-plan-inputs {
    display: flex;
    gap: 0.5rem;
}

.payment-input-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.payment-sub-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1.3;
}

.payment-sub-label small {
    font-size: 0.63rem;
    font-weight: 500;
    opacity: 0.75;
}

.payment-input-block input[type="text"] {
    width: 100%;
    background: var(--input-bg);
    border: 0.0625rem solid var(--border);
    border-radius: 0.75rem;
    padding: 0.7rem 0.75rem;
    color: var(--text-main);
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s, background-color 0.2s;
}

.payment-input-block input[type="text"]:focus {
    border-color: var(--primary);
    background-color: var(--bg-card);
}

.payment-input-block input[type="text"]::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* Slightly wider layout once there's room for meta row to sit side by side */
@media (min-width: 480px) {
    .post-meta-group:not(.payment-plan-group) {
        flex: 0 1 9rem;
    }
    .payment-plan-group {
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   PUBLIC PROFILE PAGE
   ========================================================================== */

.public-profile-screen {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ---------- PROFILE HEADER ---------- */
.public-profile-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    background: var(--bg-card);
    border: 0.0625rem solid var(--border);
    border-radius: 1.25rem;
    padding: 1.125rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);
}

.public-avatar-wrapper {
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--input-bg);
    border: 0.1875rem solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.public-avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.public-avatar-wrapper .letter-avatar {
    font-size: 2rem;
}

/* .profile-avatar-frame (lodge-detail.js's CardDisplayView) previously had
   no CSS at all — same "profile hero" role as .public-avatar-wrapper
   above, sized to match. */
.profile-avatar-frame {
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--input-bg);
    border: 0.1875rem solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 auto 0.75rem;
}
.profile-avatar-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-avatar-frame .letter-avatar {
    font-size: 2rem;
}

.public-profile-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.public-profile-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.public-profile-location {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.public-profile-location span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- ABOUT ---------- */
.about-container {
    background: var(--bg-card);
    border: 0.0625rem solid var(--border);
    border-radius: 1.25rem;
    padding: 1rem 1.125rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.about-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.about-container p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-main);
    margin: 0;
}

/* ---------- CONTACT BUTTON ---------- */
.public-contact-links {
    display: flex;
    gap: 0.6rem;
}

.btn-chat-in-app {
    flex: 1;
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: 0.75rem;
    padding: 0.8rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: opacity 0.2s;
}

.btn-chat-in-app:hover { opacity: 0.88; }

/* The business-comment button (public-profile.js) sits in this same row —
   it reuses .action-btn/.comment-toggle-btn from postCard.js for behavior
   (wireCommentPanel finds it by that class) but needs to actually look
   like its siblings here rather than a feed card's action row. */
.public-contact-links .comment-toggle-btn {
    flex: 0 0 auto;
    min-width: 3.75rem;
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.public-contact-links .comment-toggle-btn:hover {
    background: var(--bg-body);
    border-color: var(--text-muted);
}
.public-contact-links .comment-toggle-btn.action-btn-active {
    color: var(--primary);
    border-color: var(--primary);
}

/* ---------- SECTION DIVIDER / LISTINGS HEADER ---------- */
.section-divider-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0 0;
}

.section-divider-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.section-divider-label i {
    color: var(--primary);
    font-size: 0.85rem;
}

/* ---------- POSTS FEED ---------- */
.public-profile-posts {
    display: flex;
    flex-direction: column;
}

.public-posts-feed-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.no-posts-message {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    background: var(--bg-card);
    border: 0.0625rem dashed var(--border);
    border-radius: 1.25rem;
}

/* ---------- POST CARD ---------- */
.post-card {
    background: var(--bg-card);
    border: 0.0625rem solid var(--border);
    border-radius: 1.25rem;
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04);
}

.post-body {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text-main);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Gallery — scales cleanly from 1 to 5 images */
.post-card-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
    gap: 0.4rem;
}

.gallery-asset-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 0.625rem;
    border: 0.0625rem solid var(--border);
    display: block;
}

/* ---------- POST FOOTER ---------- */
.post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.625rem;
    border-top: 0.0625rem solid var(--border);
    gap: 0.5rem;
}

.post-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.post-actions {
    display: flex;
    gap: 0.5rem;
}

.action-btn {
    background: var(--input-bg);
    border: 0.0625rem solid var(--border);
    border-radius: 0.625rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: var(--text-main);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: border-color 0.2s, color 0.2s;
}

.action-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ---------- ERROR STATE ---------- */
.error-state-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
}

.personal-profile-container{padding:1.25rem}
.profile-field-group{margin-bottom:1.25rem}
.profile-field-label{display:block;font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-main);margin-bottom:0.5rem}
.profile-field-input{width:100%;padding:0.75rem;border:0.0625rem solid var(--border);border-radius:0.75rem;background-color:var(--bg-body);color:var(--text-muted);font-size:0.95rem;cursor:not-allowed;outline:none;box-sizing:border-box}
/* Business Name / Phone Number are editable (unlike Username/Email above)
   — overrides the disabled/readonly look those get by default. */
.profile-field-input:not([readonly]){color:var(--text-main);cursor:text;background-color:var(--bg-card)}
.profile-field-input:not([readonly]):focus{border-color:var(--primary)}
.profile-field-hint{display:block;margin-top:0.4rem;font-size:0.78rem;color:var(--text-muted)}
.profile-save-btn{width:100%;margin-top:0.5rem}


/* ==========================================================================
   ADMIN DASHBOARD
   ========================================================================== */
.admin-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:var(--bg-card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.admin-header h2{font-size:1rem;font-weight:700;color:var(--text-main);margin:0}
.admin-header small{font-size:.7rem;color:var(--text-muted)}
.admin-exit-btn{font-size:.8rem;font-weight:700;color:var(--primary);text-decoration:none;padding:.4rem .875rem;border:1px solid var(--primary);border-radius:99px}
.admin-container{flex:1;overflow-y:auto;padding:1rem 1.25rem 6rem;background:var(--bg-body)}
.admin-bottom-nav{display:flex;justify-content:space-around;padding:.6rem .5rem;background:var(--bg-card);border-top:1px solid var(--border);position:sticky;bottom:0;z-index:100}
.admin-nav-item{display:flex;flex-direction:column;align-items:center;gap:.2rem;background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:.65rem;font-weight:600;padding:.35rem .5rem;border-radius:.5rem;transition:color .2s}
.admin-nav-item svg{width:1.1rem;height:1.1rem;fill:currentColor}
.admin-nav-item.active{color:var(--primary)}
.admin-nav-item.active svg{fill:var(--primary)}
.admin-panel-content{display:flex;flex-direction:column;gap:.75rem}
.panel-title{font-size:1.05rem;font-weight:700;color:var(--text-main);margin:0}
.panel-subtitle{font-size:.78rem;color:var(--text-muted);margin:0}
.panel-title-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.15rem}
.panel-title-row .panel-title{margin:0}
.inc-reset-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .75rem;border-radius:.6rem;border:1px solid var(--border);background:var(--bg-body);color:var(--text-muted);font-size:.75rem;font-weight:700;cursor:pointer;white-space:nowrap}
.inc-reset-btn:hover{border-color:#e11d48;color:#e11d48}
.inc-reset-warning{font-size:.8rem;line-height:1.5;color:var(--text-muted);margin:.5rem 0 1rem}
.inc-reset-error{font-size:.78rem;color:#e11d48;margin:.5rem 0 0}
.inc-reset-actions{display:flex;gap:.6rem;margin-top:1rem}
.inc-reset-actions .ab{flex:1;justify-content:center}
.admin-search-input{width:100%;padding:.7rem .875rem;border:1px solid var(--border);border-radius:.75rem;background:var(--bg-body);color:var(--text-main);font-size:.85rem;outline:none}
.admin-search-input:focus{border-color:var(--primary)}
.u-search-row{display:flex;gap:.6rem;align-items:center}
.u-search-row .admin-search-input{flex:1;min-width:0}
.admin-filter-select{flex:0 0 auto;padding:.7rem .75rem;border:1px solid var(--border);border-radius:.75rem;background:var(--bg-body);color:var(--text-main);font-size:.8rem;font-weight:600;outline:none;cursor:pointer;max-width:9.5rem}
.admin-filter-select:focus{border-color:var(--primary)}

/* ==========================================================================
   ADMIN — OVERVIEW PANEL
   (extracted from renderOverview()'s embedded <style> block)
   ========================================================================== */
.ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;padding:.25rem 0}
.ov-card{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1rem;border-radius:.875rem;background:var(--bg-card);border:1px solid var(--border)}
.ov-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.ov-value{font-size:2rem;font-weight:800;color:var(--text-main);line-height:1}
.ov-total{grid-column:1/-1;background:var(--primary-gradient);border:none}
.ov-total .ov-label,.ov-total .ov-value{color:#fff}
.ov-premium .ov-value{color:#b8860b}
.ov-guest .ov-value{color:var(--text-muted)}

/* .ov-total's background flips to a white gradient in dark mode (same
   convention as every other --primary-gradient element) but its label/value
   text is hardcoded white, so it would vanish. Force a dark surface here
   instead of following the white-flip convention. */
body.dark-mode .ov-total {
    background: #1e293b;
}

/* Same issue as .ov-total above, on the income page's Total Income card:
   its gradient background flips to near-white in dark mode, but the
   label/value text stays hardcoded white, making it unreadable. Give it
   the same plain dark-card look as the period card next to it. */
body.dark-mode .inc-total {
    background: #1e293b;
}

/* ---------------- Active Users (DAU/WAU/MAU) tracker ---------------- */
.ov-active-section {
    margin-top: .75rem;
    padding: 1.1rem 1rem;
    border-radius: .875rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.ov-active-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
}
.ov-active-title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}
.ov-period-toggle {
    display: flex;
    gap: .25rem;
    background: var(--bg-body);
    border-radius: .5rem;
    padding: .2rem;
}
.ov-period-btn {
    border: none;
    background: none;
    padding: .3rem .65rem;
    border-radius: .375rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}
.ov-period-btn.is-active {
    background: var(--primary);
    color: #fff;
}

/* Overview panel — Day/Week/Month toggle: in dark mode --primary becomes
   white, so the old filled-pill active state (white bg + white text) made
   the label invisible. Give it the same border-only treatment used for the
   Alerts panel's All/Tier audience toggle instead of a filled background. */
body.dark-mode .ov-period-toggle .ov-period-btn.is-active {
    background: transparent !important;
    color: var(--primary) !important;
    border: 1px solid #fff !important;
}

.ov-active-value { font-size: 2.25rem; font-weight: 800; color: var(--text-main); line-height: 1; }
.ov-active-sub { margin: .3rem 0 0; font-size: .78rem; color: var(--text-muted); }

/* ── In-App Chats Initiated (total + multi-select calendar) ── */
.ov-chats-section {
    margin-top: .75rem;
    padding: 1.1rem 1rem;
    border-radius: .875rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.ov-cal-card {
    margin-top: 1rem;
    padding: .85rem;
    border-radius: .75rem;
    background: var(--bg-body);
    border: 1px solid var(--border);
}
.ov-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
}
.ov-cal-month {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-main);
}
.ov-cal-nav {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: none;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: .72rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ov-cal-nav:hover { background: var(--border); color: var(--text-main); }

.ov-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: .65rem;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: .3rem;
}

.ov-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: .2rem;
}

.ov-cal-cell {
    position: relative;
    aspect-ratio: 1;
    border: none;
    background: none;
    border-radius: .5rem;
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s, color .15s;
}
.ov-cal-cell:hover { background: var(--border); }
.ov-cal-cell-empty { cursor: default; visibility: hidden; }
.ov-cal-cell-today { box-shadow: inset 0 0 0 1px var(--primary); }
.ov-cal-cell-selected {
    background: var(--primary);
    color: #fff;
}
body.dark-mode .ov-cal-cell-selected {
    background: #fff;
    color: #000;
}
.ov-cal-cell-dot {
    position: absolute;
    bottom: .2rem;
    width: .28rem;
    height: .28rem;
    border-radius: 50%;
    background: var(--primary);
}
.ov-cal-cell-selected .ov-cal-cell-dot { background: #fff; }
body.dark-mode .ov-cal-cell-selected .ov-cal-cell-dot { background: #000; }

.ov-cal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .85rem;
    padding-top: .75rem;
    border-top: 1px solid var(--border);
}
.ov-cal-selected-label { font-size: .78rem; color: var(--text-muted); font-weight: 600; }
.ov-cal-selected-count { font-size: 1.15rem; font-weight: 800; color: var(--text-main); }
.ov-cal-clear-btn {
    margin-top: .6rem;
    width: 100%;
    padding: .5rem;
    border-radius: .5rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 700;
    cursor: pointer;
}
.ov-cal-clear-btn:hover { color: var(--text-main); border-color: var(--text-muted); }

/* ── Danger Zone — Delete All Posts (see admin/overview.js) ── */
.ov-danger-section {
    margin-top: .75rem;
    padding: 1.1rem 1rem;
    border-radius: .875rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
}
.ov-danger-title { color: var(--danger); display: flex; align-items: center; gap: .4rem; }
.ov-danger-card {
    margin-top: .4rem;
    padding: .9rem;
    border-radius: .75rem;
    border: 1px dashed var(--danger);
    background: color-mix(in srgb, var(--danger) 6%, var(--bg-card));
}
.ov-danger-card-title { font-size: .95rem; font-weight: 800; color: var(--text-main); margin-bottom: .3rem; }
.ov-danger-card-sub { font-size: .78rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 .8rem; }
.ov-danger-confirm-label { display: block; font-size: .72rem; color: var(--text-muted); margin-bottom: .35rem; }
.ov-danger-confirm-input {
    width: 100%;
    box-sizing: border-box;
    padding: .65rem .8rem;
    border-radius: .5rem;
    border: 1px solid var(--border);
    background: var(--bg-body);
    color: var(--text-main);
    font-size: .85rem;
    margin-bottom: .7rem;
}
.ov-danger-btn {
    width: 100%;
    padding: .7rem;
    border-radius: .6rem;
    border: none;
    background: var(--danger);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: opacity .15s;
}
.ov-danger-btn:disabled { opacity: .45; cursor: not-allowed; }
.ov-danger-btn:not(:disabled):hover { opacity: .88; }
.ov-danger-status { margin: .6rem 0 0; font-size: .78rem; color: var(--text-muted); text-align: center; min-height: 1em; }

/* ==========================================================================
   ADMIN — INCOME PANEL
   ========================================================================== */
.inc-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.inc-card{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1rem;border-radius:.875rem;background:var(--bg-card);border:1px solid var(--border)}
.inc-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.inc-value{font-size:1.6rem;font-weight:800;color:var(--text-main);line-height:1.15}
.inc-total{background:var(--primary-gradient);border:none}
.inc-total .inc-label,.inc-total .inc-value{color:#fff}

.inc-toggle-group{display:flex;gap:.4rem;margin-top:.25rem}
.inc-toggle{flex:1;padding:.55rem;border:1px solid var(--border);border-radius:.625rem;background:var(--bg-body);color:var(--text-muted);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s}
.inc-toggle.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* Income panel — Weekly/Monthly view toggle: same fix as the Overview
   period toggle above — border-only active state in dark mode instead of
   a filled white pill that swallows the label text. */
body.dark-mode .inc-toggle-group .inc-toggle.active {
    background: var(--bg-body) !important;
    color: var(--primary) !important;
    border-color: #fff !important;
}

.inc-chart-card{background:var(--bg-card);border:1px solid var(--border);border-radius:1rem;padding:1rem;display:flex;flex-direction:column;gap:.75rem}
.inc-chart-header{display:flex;justify-content:space-between;align-items:baseline}
.inc-chart-title{font-size:.85rem;font-weight:700;color:var(--text-main)}
.inc-chart-sub{font-size:.7rem;color:var(--text-muted)}
.inc-chart-bars{display:flex;align-items:flex-end;gap:.5rem;min-height:9rem;padding-top:.5rem}
.inc-chart-empty{margin:auto;color:var(--text-muted);font-size:.82rem;padding:2rem 0}
.inc-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:0}
.inc-bar-track{width:100%;max-width:1.75rem;height:7rem;background:var(--bg-body);border-radius:.4rem;display:flex;align-items:flex-end;overflow:hidden;border:1px solid var(--border)}
.inc-bar-fill{width:100%;background:var(--primary-gradient);border-radius:.4rem .4rem 0 0;transition:height .3s ease}
.inc-bar-value{font-size:.62rem;font-weight:700;color:var(--text-main);white-space:nowrap}
.inc-bar-label{font-size:.6rem;color:var(--text-muted);white-space:nowrap}

/* ==========================================================================
   CUSTOM SELECT — MOBILE-STYLE BOTTOM-SHEET PICKER
   (see js/utils/customSelect.js — progressive enhancement over native
   <select> elements used for university/campus/apartment-type/document-type
   dropdowns, so they match the app's design instead of the OS picker UI)
   ========================================================================== */
.custom-select-wrapper { position: relative; display: inline-block; }
.form-group .custom-select-wrapper,
.form-group-block .custom-select-wrapper,
.select-wrapper .custom-select-wrapper,
.post-meta-group .custom-select-wrapper {
    display: block;
    width: 100%;
}

/* The native <select> stays in the DOM (visually hidden but still
   focusable) so `.value`, `required`, and `change` listeners keep working
   exactly as before — only the trigger + sheet below are new. */
.custom-select-native {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.custom-select-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .875rem 1rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: .75rem;
    font-size: .95rem;
    font-family: inherit;
    color: var(--text-main);
    cursor: pointer;
    text-align: left;
    transition: border-color .2s;
}
.custom-select-trigger:focus-visible,
.custom-select-trigger.is-open {
    border-color: var(--primary);
    outline: none;
}
.custom-select-trigger.is-disabled { opacity: .6; cursor: not-allowed; }
.custom-select-trigger.is-placeholder .custom-select-value { color: var(--text-muted); }
.custom-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-caret {
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: .8rem;
    transition: transform .2s ease;
}
.custom-select-trigger.is-open .custom-select-caret { transform: rotate(180deg); }

/* Compact "pill" variant for the campus filter chip in the home header bar */
.campus-select-wrapper .custom-select-trigger {
    width: auto;
    padding: .625rem 1rem .625rem .875rem;
    border: none;
    border-radius: .625rem;
    background: var(--primary);
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
}
.campus-select-wrapper .custom-select-caret { color: #fff; }
body.dark-mode .campus-select-wrapper .custom-select-trigger {
    background: #ffffff;
    color: #0f172a;
}
body.dark-mode .campus-select-wrapper .custom-select-caret { color: #0f172a; }

/* ---------------- Bottom sheet ---------------- */
.custom-select-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0);
    backdrop-filter: blur(0);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 999;
    padding: 0;
    opacity: 0;
    transition: opacity .2s ease, background-color .2s ease, backdrop-filter .2s ease;
}
@media (min-width: 640px) {
    .custom-select-overlay { align-items: center; padding: 1rem; }
}
.custom-select-overlay.is-open {
    opacity: 1;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}

.custom-select-sheet {
    width: 100%;
    max-width: 480px;
    max-height: 70dvh;
    overflow-y: auto;
    background: var(--bg-card);
    border-radius: 1.25rem 1.25rem 0 0;
    padding: .75rem 0 1.25rem;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .15);
    transform: translateY(100%);
    transition: transform .22s ease;
}
@media (min-width: 640px) {
    .custom-select-sheet { border-radius: 1.25rem; transform: translateY(16px); }
}
.custom-select-overlay.is-open .custom-select-sheet { transform: translateY(0); }

.custom-select-sheet-handle {
    width: 36px; height: 4px;
    border-radius: 99px;
    background: var(--border);
    margin: 0 auto .75rem;
}
@media (min-width: 640px) {
    .custom-select-sheet-handle { display: none; }
}
.custom-select-sheet-title {
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    padding: 0 1.25rem .5rem;
}
.custom-select-sheet-list { display: flex; flex-direction: column; }
.custom-select-sheet-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .875rem 1.25rem;
    border: none;
    background: none;
    font-size: .95rem;
    font-family: inherit;
    color: var(--text-main);
    text-align: left;
    cursor: pointer;
    transition: background-color .15s;
}
.custom-select-sheet-item:hover,
.custom-select-sheet-item:active { background: var(--bg-body); }
.custom-select-sheet-item.is-selected { color: var(--primary); font-weight: 700; }
.custom-select-check { color: var(--primary); }

/* ==========================================================================
   AUTHENTICATION — PASSWORD FIELD / TOGGLE UI
   (extracted from authentication.js's embedded <style> block)
   ========================================================================== */
.input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}
.input-wrapper .form-input {
    width: 100%;
    padding-right: 42px;
    box-sizing: border-box;
}
.password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    transition: color 0.2s ease;
    z-index: 2;
}
.password-toggle:hover {
    color: #333;
}
.password-toggle svg {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   ADMIN — VERIFY PANEL
   (extracted from admin/verify.js's embedded <style> block)
   ========================================================================== */
.v-list{display:flex;flex-direction:column;gap:.75rem;margin-top:.5rem;max-height:calc(100dvh - 230px);overflow-y:auto}
.v-card{background:var(--bg-card);border:1px solid var(--border);border-radius:.875rem;padding:1rem;display:flex;flex-direction:column;gap:.75rem}
.v-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
.v-name{font-size:.9rem;font-weight:700;color:var(--text-main);margin:0}
.v-date{font-size:.7rem;color:var(--text-muted)}
.v-pending-tag{font-size:.65rem;font-weight:800;background:#fef3c7;color:#b45309;padding:3px 8px;border-radius:99px;white-space:nowrap}
.v-doc-box{background:var(--bg-body);border-radius:.625rem;padding:.75rem;font-size:.8rem;color:var(--text-main);display:flex;flex-direction:column;gap:.4rem}
.v-doc-box a{color:var(--primary);font-weight:700;text-decoration:none}
.v-info-row{display:flex;gap:.4rem;flex-wrap:wrap}
.v-info-row span{color:var(--text-muted)}
.v-info-row strong{color:var(--text-main)}
.v-row-btns{display:flex;gap:.5rem}
.vb{border:none;border-radius:.625rem;padding:.5rem .875rem;font-size:.8rem;font-weight:700;cursor:pointer;flex:1}
.vb-approve{background:#dcfce7;color:#15803d}
.vb-reject{background:#fee2e2;color:#b91c1c}
.v-reject-box{display:none;flex-direction:column;gap:.5rem}
.v-reject-box textarea{width:100%;padding:.6rem;border:1px solid var(--border);border-radius:.625rem;font-size:.82rem;font-family:inherit;resize:vertical;min-height:80px;outline:none;box-sizing:border-box}
.v-reject-actions{display:flex;gap:.5rem}
.v-empty{text-align:center;color:var(--text-muted);padding:3rem 0}
.v-doc-img{width:100%;max-height:180px;object-fit:cover;border-radius:.5rem;margin-top:.4rem;cursor:pointer}
.v-error{color:#b91c1c;font-size:.78rem;text-align:center;padding:.5rem}

/* ==========================================================================
   ADMIN — ALERTS PANEL
   (extracted from admin/alerts.js's embedded <style> block)
   ========================================================================== */
.al-form{display:flex;flex-direction:column;gap:1rem;margin-top:.5rem}
.al-field{display:flex;flex-direction:column;gap:.4rem}
.al-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.al-toggle-group{display:flex;gap:.4rem}
.al-toggle{flex:1;padding:.55rem;border:1px solid var(--border);border-radius:.625rem;background:var(--bg-body);color:var(--text-muted);font-size:.8rem;font-weight:600;cursor:pointer;transition:all .15s}
.al-toggle.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.al-textarea{min-height:130px;resize:vertical;font-family:inherit;font-size:.9rem}
.al-status{text-align:center;font-size:.8rem;color:var(--text-muted);min-height:1.2rem;margin:0}

/* Dark mode: active toggle should only get a highlighted border,
   never a filled/white background (which hides the label text).
   Higher specificity + !important guard against any other global
   ".active" rule elsewhere in the stylesheet stomping on this. */
body.dark-mode .al-toggle-group .al-toggle.active{
    background: var(--bg-body) !important;
    color: var(--primary) !important;
    border-color: #fff !important;
}

/* ---------------- Alert history ---------------- */
.al-history-section{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.al-history-header{font-size:.85rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 .75rem;display:flex;align-items:center;gap:.4rem}
.al-history-header i{color:var(--primary)}
.al-history-list{display:flex;flex-direction:column;gap:.65rem}
.al-history-empty{text-align:center;color:var(--text-muted);font-size:.82rem;padding:2rem 0}
.al-history-item{background:var(--bg-card);border:1px solid var(--border);border-radius:.875rem;padding:.875rem}
.al-history-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.4rem}
.al-history-badge{font-size:.63rem;font-weight:700;padding:2px 8px;border-radius:99px;text-transform:uppercase;letter-spacing:.02em;flex-shrink:0}
.al-history-badge.audience-all{background:#e0f2fe;color:#0369a1}
.al-history-badge.audience-tier{background:#fef3c7;color:#92400e}
.al-history-date{font-size:.7rem;color:var(--text-muted);flex-shrink:0}
.al-history-title{margin:0 0 .3rem;font-size:.9rem;font-weight:700;color:var(--text-main)}
.al-history-content{margin:0;font-size:.82rem;color:var(--text-muted);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.al-history-actions{display:flex;gap:.5rem;margin-top:.65rem;padding-top:.65rem;border-top:1px solid var(--border)}
.al-history-btn{border:none;border-radius:.5rem;padding:.4rem .75rem;font-size:.75rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;transition:opacity .2s}
.al-edit-btn{background:var(--bg-body);color:var(--text-main);border:1px solid var(--border)}
.al-delete-btn{background:#fef2f2;color:var(--danger,#dc2626);border:1px solid #fecaca}
.al-edit-btn:hover,.al-delete-btn:hover{opacity:.8}
.al-history-edit-mode{display:flex;flex-direction:column;gap:.6rem;margin-top:.6rem}
.al-history-edit-actions{display:flex;justify-content:flex-end;gap:.5rem}
.al-btn-cancel{background:var(--bg-body);color:var(--text-muted);border:1px solid var(--border);border-radius:.5rem;padding:.4rem .875rem;font-size:.78rem;font-weight:600;cursor:pointer}
.al-btn-save{background:var(--primary);color:#fff;border:none;border-radius:.5rem;padding:.4rem .875rem;font-size:.78rem;font-weight:600;cursor:pointer}
.al-btn-cancel:disabled,.al-btn-save:disabled{opacity:.6;cursor:not-allowed}

/* ==========================================================================
   ADMIN — SHARED MODAL SHELL
   (users.js and verified-users.js each shipped their own copy of
   .adm-modal/.adm-modal-box/.md-* with slightly different values — since
   <style> tags apply document-wide regardless of which panel injected them,
   whichever admin tab was opened last silently overrode the other's modal
   styling. Consolidated here into one definition, used by both the "All
   Users" and "Verified Users" detail modals.)
   ========================================================================== */
.adm-modal{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(2px);display:flex;align-items:flex-end;justify-content:center;z-index:200;padding:0}
@media(min-width:640px){.adm-modal{align-items:center;padding:1rem}}
.adm-modal-box{position:relative;width:100%;max-width:480px;max-height:88dvh;overflow-y:auto;background:var(--bg-card);border-radius:1.25rem 1.25rem 0 0;padding:1.5rem 1.25rem 2rem;box-shadow:0 -8px 30px rgba(0,0,0,.15);animation:admModalIn .22s ease}
@media(min-width:640px){.adm-modal-box{border-radius:1.25rem;padding:1.5rem}}
@keyframes admModalIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.adm-modal-close{position:absolute;top:.75rem;right:.75rem;width:32px;height:32px;border:none;border-radius:50%;background:var(--bg-soft,#f1f5f9);color:var(--text-muted);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.adm-modal-close:hover{background:var(--border)}
.adm-modal-title{margin:0 0 1.1rem;font-size:1.05rem;font-weight:800;color:var(--text-main);padding-right:2rem}
.md-section{margin-bottom:1.1rem;padding-bottom:1.1rem;border-bottom:1px solid var(--border)}
.md-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.md-head{font-size:.68rem;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.55rem}
.md-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.4rem 0;font-size:.82rem}
.md-row span{color:var(--text-muted);flex-shrink:0}
.md-row strong{color:var(--text-main);font-weight:600;text-align:right;word-break:break-word}

/* ==========================================================================
   ADMIN — ALL USERS PANEL
   (extracted from admin/users.js's embedded <style> block)
   ========================================================================== */
.u-list{margin-top:.75rem;display:flex;flex-direction:column;gap:.5rem;max-height:calc(100dvh - 260px);overflow-y:auto}
.u-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem .875rem;background:var(--bg-card);border:1px solid var(--border);border-radius:.75rem}
.u-info{flex:1;min-width:0}
.u-email{margin:0;font-size:.82rem;font-weight:700;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-meta{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.3rem}
.u-badge{font-size:.65rem;font-weight:700;padding:2px 7px;border-radius:99px}
.u-free{background:#f1f5f9;color:#64748b}
.u-premium{background:#fef3c7;color:#92400e}
.u-verified{background:#dcfce7;color:#15803d}
.u-banned{background:#fee2e2;color:#b91c1c}
.u-agent{background:#e0f2fe;color:#0369a1}

.agent-access-note{font-size:.75rem;line-height:1.5;color:var(--text-muted);margin:.4rem 0 .75rem}
.ab-accept-agent{background:#dcfce7;color:#15803d}
.ab-reject-agent{background:#fee2e2;color:#b91c1c}
.u-actions{display:flex;gap:.375rem;flex-shrink:0}
.u-empty{text-align:center;color:var(--text-muted);padding:2rem 0}
.ab{border:none;border-radius:.5rem;padding:.35rem .65rem;font-size:.75rem;font-weight:700;cursor:pointer}
.ab-view{background:#e0f2fe;color:#0369a1}
.ab-ban{background:#fee2e2;color:#b91c1c}
.ab-grant-premium{background:#fef3c7;color:#92400e;width:100%;margin-top:.5rem;padding:.55rem .65rem}

/* ==========================================================================
   ADMIN — VERIFIED USERS PANEL
   (extracted from admin/verified-users.js's embedded <style> block)
   ========================================================================== */
.vu-list{margin-top:.75rem;display:flex;flex-direction:column;gap:.5rem;max-height:calc(100dvh - 280px);overflow-y:auto}
.vu-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem .875rem;background:var(--bg-card);border:1px solid var(--border);border-radius:.75rem}
.vu-info{flex:1;min-width:0}
.vu-name{margin:0;font-size:.85rem;font-weight:700;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vu-email{margin:.15rem 0 0;font-size:.73rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vu-badge-verified{font-size:.65rem;font-weight:700;padding:2px 8px;border-radius:99px;background:#dcfce7;color:#15803d;display:inline-block;margin-top:.3rem}
.vu-empty{text-align:center;color:var(--text-muted);padding:3rem 0}
.vu-view-btn{border:none;border-radius:.5rem;padding:.35rem .75rem;font-size:.75rem;font-weight:700;cursor:pointer;background:#e0f2fe;color:#0369a1;flex-shrink:0}
.vu-doc-link{display:inline-block;color:var(--primary);font-weight:700;font-size:.82rem;text-decoration:none;margin-bottom:.5rem}
.vu-doc-link:hover{text-decoration:underline}
.vu-doc-empty{color:var(--text-muted);font-size:.82rem}
.vu-doc-img{width:100%;border-radius:.625rem;margin-top:.5rem;max-height:220px;object-fit:contain;border:1px solid var(--border);background:var(--bg-soft,#f8fafc);display:block}

/* ==========================================================================
   BOTTOM NAV — UNREAD UPDATES BADGE
   ========================================================================== */
.nav-icon-wrap { position: relative; display: inline-flex; }
.nav-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--danger, #dc2626);
    color: #fff;
    font-size: .625rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bg-card);
}

/* ==========================================================================
   UPDATES PAGE
   ========================================================================== */
.updates-list { display: flex; flex-direction: column; gap: .625rem; margin-top: 1.25rem; }
.updates-loading-text { text-align: center; color: var(--text-muted); font-size: .875rem; margin-top: 1.25rem; }

.updates-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    border-radius: .875rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    margin-top: 1.25rem;
}
.updates-empty-icon { font-size: 2.25rem; color: var(--border); margin-bottom: .75rem; }
.updates-empty-state h3 { margin: 0 0 .3rem; font-size: 1rem; color: var(--text-main); }
.updates-empty-state p { margin: 0; font-size: .82rem; color: var(--text-muted); }

.update-card {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .875rem;
    border-radius: .875rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.update-card:active { background: var(--bg-body); }
.update-card.is-unread { border-color: var(--primary); }
.update-card.is-read { opacity: .72; }

.update-dot {
    flex-shrink: 0;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-top: .4rem;
    background: var(--primary);
}
.update-card.is-read .update-dot { background: transparent; }

.update-card-main { flex: 1; min-width: 0; }
.update-card-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}
.update-headline {
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    color: var(--text-main);
}
.update-card.is-read .update-headline { font-weight: 600; }
.update-date {
    flex-shrink: 0;
    font-size: .68rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.update-snippet {
    margin: .3rem 0 0;
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.update-chevron { flex-shrink: 0; color: var(--text-muted); font-size: .75rem; margin-top: .5rem; }

/* ---------------- Full-message detail sheet ---------------- */
.update-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0);
    backdrop-filter: blur(0);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, background-color .2s ease, backdrop-filter .2s ease;
}
@media (min-width: 640px) {
    .update-modal-overlay { align-items: center; padding: 1rem; }
}
.update-modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
    background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}
.update-modal-sheet {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 75dvh;
    overflow-y: auto;
    background: var(--bg-card);
    border-radius: 1.25rem 1.25rem 0 0;
    padding: .75rem 1.25rem 2rem;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .15);
    transform: translateY(100%);
    transition: transform .22s ease;
}
@media (min-width: 640px) {
    .update-modal-sheet { border-radius: 1.25rem; transform: translateY(16px); }
}
.update-modal-overlay.is-open .update-modal-sheet { transform: translateY(0); }
.update-modal-sheet-handle {
    width: 36px; height: 4px;
    border-radius: 99px;
    background: var(--border);
    margin: 0 auto 1rem;
}
@media (min-width: 640px) { .update-modal-sheet-handle { display: none; } }
.update-modal-close {
    position: absolute;
    top: .75rem; right: .75rem;
    width: 32px; height: 32px;
    border: none;
    border-radius: 50%;
    background: var(--bg-body);
    color: var(--text-muted);
    font-size: .9rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.update-modal-date { font-size: .72rem; color: var(--text-muted); margin-bottom: .4rem; padding-right: 2rem; }
.update-modal-headline { margin: 0 0 .75rem; font-size: 1.05rem; font-weight: 800; color: var(--text-main); padding-right: 2rem; }
.update-modal-body { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--text-main); white-space: pre-wrap; word-break: break-word; }
.update-modal-actions { display: flex; flex-direction: column; gap: .625rem; margin-top: 1.25rem; }
.update-modal-actions .btn-primary, .update-modal-actions .btn-secondary-outline { width: 100%; justify-content: center; }



/* ==========================================================================
   BUSINESS PAGE — search & filter toolbar for the agent's own listings
   ========================================================================== */
.my-posts-toolbar { display: flex; gap: 0.5rem; align-items: center; margin: 0.85rem 0; }
.my-posts-toolbar .hsearch-input-wrap { flex: 1; }

/* ==========================================================================
   CATEGORY SELECT — Account page's "Category" tab
   ========================================================================== */
.category-select-hint {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0.25rem 0 1.25rem;
}

.category-select-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.category-select-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    background: var(--bg-card);
    border: 0.0938rem solid var(--border);
    border-radius: 0.9rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

.category-select-row:hover {
    background: var(--bg-body);
}

.category-select-row.is-selected {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-card));
}

.category-select-icon {
    width: 2.2rem;
    height: 2.2rem;
    min-width: 2.2rem;
    border-radius: 50%;
    background: var(--input-bg);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

.category-select-row.is-selected .category-select-icon {
    background: var(--primary);
    color: #fff;
}

.category-select-label {
    flex: 1;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-main);
}

.category-select-check {
    color: var(--primary);
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.15s;
}

.category-select-row.is-selected .category-select-check {
    opacity: 1;
}

/* The save button used to be a plain flex child right after the category
   list, relying on `position: sticky` inside .content-area's own scroll —
   which meant it only ever "stuck" once the list was tall enough to
   scroll, and otherwise just sat wherever the list happened to end,
   making it look like it moved around between category counts/devices.
   .category-select-screen (Category AND University tabs — see
   category-select.js / university-select.js) now owns its OWN scroll
   region (.category-select-scroll) instead, with this button as a
   sibling outside it — so it's pinned to the bottom of the screen
   unconditionally, never scrolls, and never moves. */
.category-select-screen.content-area {
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    padding-bottom: 1.25rem;
}
/* Category (unlike University) is a bottom-nav root tab now, so the
   bottom-nav bar renders underneath it (see router.js) — needs the same
   6rem clearance every other nav-visible .content-area reserves, or the
   pinned Save button ends up sitting behind the nav icons instead of
   above them. University still uses the plain 1.25rem above since it's a
   one-off setup page with no bottom nav shown at all. */
.category-tab-screen.category-select-screen.content-area {
    padding-bottom: 6rem;
}
.category-select-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.category-save-btn {
    flex-shrink: 0;
    width: 100%;
    margin-top: 0.75rem;
}

/* ==========================================================================
   BUSINESS PHOTOS — used on the Business Account's own profile
   (lodge-manager.js, up to 5 for any non-Accommodation category) and post
   editing for those same categories (postCard.js's edit mode) — same slot
   markup, same upload-per-slot behavior. create-post.js's own generic form
   no longer has a photo step at all (those categories post text-only —
   see utils/businessCard.js for where the photos actually show up).
   ========================================================================== */
.business-photos-editor,
.generic-post-photos-editor {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.business-photos-editor-5 {
    grid-template-columns: repeat(3, 1fr);
}

.business-photo-slot {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.85rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.business-photo-slot.has-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.business-photo-slot-empty {
    background: var(--input-bg);
    border: 0.125rem dashed var(--border);
    color: var(--text-muted);
    font-size: 1.3rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

.business-photo-slot-empty:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.business-photo-remove-btn {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    cursor: pointer;
}

/* ── Product photo uploader (up to 5, grid — see create-post.js). Reuses
   the same grid shape .business-photos-editor above uses, via the shared
   .generic-post-photos-editor container class. ── */
.product-photo-uploader { margin-bottom: 1rem; }
.product-photo-slot {
    position: relative;
    aspect-ratio: 1;
    border-radius: 0.85rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}
.product-photo-slot.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.product-photo-slot-empty {
    background: var(--input-bg);
    border: 0.125rem dashed var(--border);
    color: var(--text-muted);
    font-size: 1.3rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.product-photo-slot-empty span { font-size: 0.62rem; font-weight: 600; text-align: center; padding: 0 0.3rem; }
.product-photo-slot-empty:hover { border-color: var(--primary); color: var(--primary); }
.product-photo-slot-loading { background: var(--input-bg); border: 0.125rem dashed var(--border); color: var(--primary); font-size: 1.2rem; }
.product-photo-remove-btn {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    cursor: pointer;
}

/* ── Price input (see create-post.js's product form) ── */
.price-input-wrap { position: relative; }
.price-input-currency { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-weight: 600; pointer-events: none; }
.price-input-wrap input { padding-left: 1.7rem !important; }

.business-photos-strip {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.3rem;
}

.business-photo-thumb {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 0.6rem;
    object-fit: cover;
    border: 0.0625rem solid var(--border);
}