@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&family=DM+Serif+Display:ital@0;1&display=swap');

/* ── Odin Brand Tokens ── */
:root {
    --wb:             #7B2D45;   /* Winterberry  — logo "v", buttons, chips  */
    --ink:            #2A1E14;   /* Cumberland   — all primary text          */
    --bg:             #FAF6EE;   /* Page bg      — warm off-white            */
    --mason:          #FAF6EE;   /* Mason Bay    — nav / card bg             */
    --surface:        #FFFFFF;   /* Cream        — cards, search bar         */
    --muted:          #9A8A7A;   /* Warm grey    — meta text, placeholders   */
    --border:         #EAE0D2;   /* Warm border  — dividers, card borders    */
    --text-secondary: #9A8A7A;   /* Alias for --muted — search icons, hints  */
    --border-light:   #EAE0D2;   /* Alias for --border — light dividers      */
    --nav-height:     72px;      /* Bottom tab bar content height            */
}

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: var(--bg);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            color: var(--ink);
            padding-bottom: 80px;
        }

        /* Header */
        .header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(250, 246, 238, 0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        }

        .header-content {
            padding: 8px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1400px;
            margin: 0 auto;
        }

        .header-title {
            font-family: 'DM Serif Display', Georgia, serif;
            font-size: 22px;
            font-weight: 700;
            color: var(--ink);
            letter-spacing: -0.3px;
        }

        .header-accent {
            color: #7B2D45;
        }

        .header-logo {
            display: flex;
            align-items: center;
            line-height: 1;
        }

        /* Odin wordmark — reusable across header, landing nav, auth modal */
        .odin-wordmark {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            font-weight: 900;
            font-size: 28px;
            letter-spacing: -0.06em;
            line-height: 1;
            display: inline-flex;
            align-items: baseline;
        }

        .odin-wordmark-lg {
            font-size: 36px;
            letter-spacing: -0.06em;
        }

        .odin-o    { color: var(--wb); }
        .odin-din { color: var(--ink); }

        /* Bell notification button */
        .header-bell-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: none;
            border: none;
            cursor: pointer;
            border-radius: 50%;
            padding: 0;
            transition: background 0.18s;
        }

        .header-bell-btn:hover {
            background: rgba(123, 45, 69, 0.08);
        }

        .header-bell-icon {
            width: 22px;
            height: 22px;
            color: var(--ink);
            transition: color 0.18s;
        }

        .header-bell-btn:hover .header-bell-icon {
            color: var(--wb);
        }

        .header-notif-dot {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 9px;
            height: 9px;
            background: #ef4444;
            border-radius: 50%;
            border: 2px solid var(--bg);
            display: none;
        }

        /* ── Language picker button + dropdown ── */
        .header-lang-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
        }

        .header-lang-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            height: 32px;
            padding: 0 10px 0 8px;
            border-radius: 20px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            color: var(--ink);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.18s, border-color 0.18s;
            letter-spacing: 0.02em;
        }

        .header-lang-btn:hover {
            background: rgba(123,45,69,0.07);
            border-color: var(--wb);
        }

        .lang-picker-dropdown {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 200px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(42,30,20,0.15);
            z-index: 3000;
            overflow: hidden;
            animation: langDropIn 0.18s cubic-bezier(0.34,1.56,0.64,1);
        }

        .lang-picker-dropdown.open {
            display: block;
        }

        @keyframes langDropIn {
            from { opacity: 0; transform: translateY(-6px) scale(0.97); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        .lang-picker-header {
            padding: 12px 16px 8px;
            font-size: 11px;
            font-weight: 700;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.07em;
            border-bottom: 1px solid var(--border);
        }

        .lang-picker-list {
            padding: 6px 0;
            max-height: 280px;
            overflow-y: auto;
        }

        .lang-picker-item {
            display: block;
            width: 100%;
            text-align: left;
            padding: 9px 16px;
            background: none;
            border: none;
            font-size: 13px;
            font-weight: 500;
            color: var(--ink);
            cursor: pointer;
            transition: background 0.14s;
            border-radius: 0;
        }

        .lang-picker-item:hover {
            background: rgba(123,45,69,0.07);
        }

        .lang-picker-item.active {
            background: rgba(123,45,69,0.1);
            color: var(--wb);
            font-weight: 700;
        }

        /* Header App-mode pills */
        .header-mode-pills {
            display: flex;
            background: rgba(250, 246, 238, 0.9);
            border: 1.5px solid var(--border);
            border-radius: 18px;
            padding: 2px;
            gap: 1px;
        }

        .hdr-pill {
            padding: 3px 12px;
            border-radius: 15px;
            border: none;
            font-size: 11px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            letter-spacing: 0.02em;
            cursor: pointer;
            background: transparent;
            color: var(--muted);
            transition: all 0.18s;
        }

        .hdr-pill.active {
            background: #7B2D45;
            color: #fff;
        }

        /* Keep avatar styles for profile page internal use */
        .header-avatar-wrap {
            position: relative;
            display: inline-flex;
            cursor: pointer;
        }

        .header-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #7B2D45, #5A1F30);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 14px;
            transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .location-indicator {
            font-size: 12px;
            color: var(--muted);
            padding: 6px 12px;
            background: var(--mason);
            border-radius: 16px;
        }
        .location-indicator.active {
            color: #7B2D45;
            background: #FAF6EE;
        }
        .location-indicator.error {
            color: #dc2626;
            background: #fee2e2;
        }

        /* Bottom Tab Bar - 5 tabs: Home, Discover, Saved, Add, Profile */
        .bottom-tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            min-height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
            background: rgba(250, 246, 238, 0.97);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-top: 1px solid var(--border);
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            padding: 8px 0 max(8px, env(safe-area-inset-bottom));
            z-index: 1000;
            box-shadow: 0 -2px 10px rgba(42,30,20,0.08);
        }

        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 6px 4px;
            cursor: pointer;
            border: none;
            background: transparent;
            transition: all 0.2s;
        }

        .tab-icon {
            font-size: 24px;
            color: var(--muted);
            transition: color 0.2s;
        }

        .tab-icon-svg {
            width: 24px;
            height: 24px;
            color: var(--muted);
            stroke: var(--muted);
            transition: all 0.2s;
        }

        .tab-label {
            font-size: 10px;
            color: var(--muted);
            font-weight: 500;
            transition: color 0.2s;
        }

        .tab-item.active .tab-icon,
        .tab-item.active .tab-label {
            color: #7B2D45;
        }

        .tab-item.active .tab-icon-svg {
            color: #7B2D45;
            stroke: #7B2D45;
        }

        .tab-item.active .tab-label {
            color: #7B2D45;
        }

        /* Profile tab avatar in tab bar */
        .tab-item .tab-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--border);
            color: var(--muted);
            font-size: 13px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .tab-item.active .tab-avatar {
            background: linear-gradient(135deg, #7B2D45, #5A1F30);
            color: #ffffff;
        }

        /* Content */
        .content {
            flex: 1;
            background: var(--bg);
            padding-bottom: 20px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* When header is hidden (non-Home pages), add safe-area top padding
           so content doesn't go under the phone's status bar / notch */
        body.no-header .content {
            padding-top: max(12px, env(safe-area-inset-top));
        }

        .hidden { display: none !important; }

        /* ── Global page heading token (Search page is the standard) ── */
        /* !important on font-size beats all descendant/element selectors */
        .page-heading {
            font-family: 'DM Serif Display', Georgia, serif !important;
            font-size: 26px !important;
            font-weight: 400 !important;
            line-height: 1.15 !important;
            letter-spacing: -0.01em !important;
            color: var(--ink, #2A1E14) !important;
            margin: 0 0 4px;
        }
        @media (min-width: 480px) {
            .page-heading { font-size: 28px !important; }
        }
        @media (min-width: 768px) {
            .page-heading { font-size: 34px !important; }
        }
        .page-heading .highlight { color: #7B2D45; }

        .page-subtitle {
            font-size: 16px;
            color: var(--muted, #8A7968);
            line-height: 1.5;
            margin: 0 0 20px;
            min-height: 1.5em;
            transition: opacity 0.35s ease;
        }
        .page-subtitle-fade { opacity: 0; }

        /* (Landing page removed) */

        /* HOME PAGE - Recurring users */
        .home-page {
            max-width: 600px;
            margin: 0 auto;
            padding: 16px 16px 40px;
            box-sizing: border-box;
        }

        @media (min-width: 480px) {
            .home-page { padding: 16px 20px 40px; }
        }

        @media (min-width: 768px) {
            .home-page { max-width: 900px; padding: 20px 32px 40px; }
        }

        /* Greeting */
        .home-greeting {
            padding: 4px 0 2px;
        }

        .home-greeting h1 {
            /* font-size controlled by .page-heading global token */
            line-height: 1.15;
        }

        .home-greeting p {
            margin-top: 6px;
            color: var(--muted);
            font-size: 15px;
            line-height: 1.5;
        }

        /* Subtitle (time-based prompt) */
        .home-subtitle {
            margin-top: 4px;
            font-size: 15px;
            color: var(--muted);
        }

        /* Location icon button — icon + on/off label (Option B) */
        .home-loc-pill {
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1px;
            width: 42px;
            height: 42px;
            border-radius: 12px;
            cursor: pointer;
            border: 1.5px solid var(--border);
            background: var(--surface);
            transition: all 0.18s;
            padding: 0;
        }
        .home-loc-pill svg {
            width: 16px;
            height: 16px;
            transition: all 0.18s;
        }
        .home-loc-pill .loc-label {
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            line-height: 1;
            font-family: 'Inter', sans-serif;
            transition: color 0.18s;
        }
        .home-loc-pill.home-loc-on {
            background: #7B2D4514;
            border-color: #7B2D45;
        }
        .home-loc-pill.home-loc-on svg {
            color: #7B2D45;
            fill: #7B2D45;
        }
        .home-loc-pill.home-loc-on .loc-label {
            color: #7B2D45;
        }
        .home-loc-pill.home-loc-off {
            background: var(--surface);
            border-color: var(--border);
        }
        .home-loc-pill.home-loc-off svg {
            color: var(--muted);
            fill: none;
            stroke: var(--muted);
        }
        .home-loc-pill.home-loc-off .loc-label {
            color: var(--muted);
        }
        .home-loc-pill:hover {
            border-color: #7B2D45;
            opacity: 0.85;
        }

        /* Quick search chips */
        .home-chips-row {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 0 0 8px;
            scrollbar-width: none;
            -ms-overflow-style: none;
            margin-bottom: 2px;
        }

        .home-chips-row::-webkit-scrollbar { display: none; }

        .home-chip {
            flex-shrink: 0;
            padding: 7px 14px;
            background: var(--surface);
            border: 1.5px solid var(--border);
            border-radius: 50px;
            font-size: 13px;
            font-weight: 500;
            color: #374151;
            cursor: pointer;
            font-family: inherit;
            transition: all 0.18s;
            white-space: nowrap;
        }

        .home-chip:hover {
            border-color: #7B2D45;
            color: #7B2D45;
            background: #F5EDE8;
        }

        /* Horizontal list save cards */
        .home-saves-list {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

        .hsl-row {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px solid var(--mason);
            cursor: pointer;
            transition: background 0.15s;
        }

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

        .hsl-row:hover { background: rgba(123, 45, 69,0.04); border-radius: 8px; padding-left: 6px; padding-right: 6px; }

        .hsl-thumb {
            width: 52px;
            height: 52px;
            border-radius: 10px;
            object-fit: cover;
            flex-shrink: 0;
            background: var(--border);
            display: block;
        }

        .hsl-thumb-emoji {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            background: var(--mason);
        }

        .hsl-info {
            flex: 1;
            min-width: 0;
        }

        .hsl-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--ink);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .hsl-meta {
            font-size: 12px;
            color: var(--muted);
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .hsl-delete {
            flex-shrink: 0;
            background: none;
            border: none;
            font-size: 18px;
            color: #d1d5db;
            cursor: pointer;
            padding: 4px 6px;
            line-height: 1;
            border-radius: 50%;
            transition: color 0.15s, background 0.15s;
        }

        .hsl-delete:hover { color: #ef4444; background: #fee2e2; }

        /* Breathing Search Bar */
        .home-search-wrapper {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 14px 0 12px;
        }

        .home-search-inner {
            position: relative;
            flex: 1;
            min-width: 0;
        }

        /* search wrapper fills full home-page container width at all sizes */

        .home-search-bar {
            width: 100%;
            padding: 10px 44px 10px 40px;
            font-size: 15px;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            border: 1.5px solid var(--border);
            border-radius: 50px;
            background: var(--surface);
            color: var(--ink);
            outline: none;
            transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .home-search-bar::placeholder { color: var(--muted); }

        /* Send arrow button inside search bar */
        .home-search-send {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--wb);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: background 0.18s, transform 0.18s;
        }

        .home-search-send svg {
            width: 14px;
            height: 14px;
            color: white;
            stroke: white;
        }

        .home-search-send:hover {
            background: #5A1F30;
        }

        .home-search-send:active {
            transform: translateY(-50%) scale(0.93);
        }

        .home-search-bar:focus {
            border-color: #7B2D45;
            box-shadow: 0 0 0 4px rgba(123, 45, 69, 0.12);
        }

        .home-search-wrapper.breathing .home-search-bar {
            animation: breathe 2.5s ease-in-out infinite;
        }

        .home-search-bar:focus {
            animation: none;
        }

        @keyframes breathe {
            0%, 100% { box-shadow: 0 0 0 3px rgba(123, 45, 69, 0.08); }
            50%      { box-shadow: 0 0 0 8px rgba(123, 45, 69, 0.05); }
        }

        .home-search-icon {
            position: absolute;
            left: 13px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            color: var(--muted);
            pointer-events: none;
            transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .home-search-bar:focus ~ .home-search-icon { color: #7B2D45; }

        .home-voice-btn { display: none; }

        /* ── Section header (shared) ── */
        .home-saves-section,
        .home-feed-section {
            margin-bottom: 24px;
        }

        .home-section-header {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .home-section-title {
            font-family: 'DM Serif Display', Georgia, serif;
            font-size: 18px;
            font-weight: 400;
            letter-spacing: -0.01em;
            color: var(--ink);
        }

        .home-section-header a {
            font-size: 13px;
            color: #7B2D45;
            text-decoration: none;
            font-weight: 600;
            cursor: pointer;
            flex-shrink: 0;
        }

        /* ── Friend feed — horizontal scroll + nav arrows ── */
        .home-feed-wrap {
            position: relative;
        }

        .home-feed-scroll {
            display: flex;
            align-items: stretch;
            gap: 12px;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x proximity;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding-bottom: 8px;
            /* touch-action removed: pan-x was preventing vertical page scroll when finger starts on a card */
            /* bleed to page edge on mobile — padding is ignored by iOS Safari
               on overflow flex containers, so we use ::before / ::after instead */
            margin: 0 -16px;   /* Fix 7: was -24px, now matches new 16px home-page padding */
            padding-left: 0;
            padding-right: 0;
        }

        /* Left spacer: 16px inset minus 12px gap = 4px */
        .home-feed-scroll::before {
            content: '';
            flex-shrink: 0;
            width: 4px;
            min-height: 1px;
        }

        /* Right spacer: 16px desired inset minus 12px gap = 4px */
        .home-feed-scroll::after {
            content: '';
            flex-shrink: 0;
            width: 4px;
            min-height: 1px;
        }

        @media (min-width: 768px) {
            .home-feed-scroll {
                margin: 0;
            }
            .home-feed-scroll::before,
            .home-feed-scroll::after {
                display: none;
            }
        }

        .home-feed-scroll::-webkit-scrollbar { display: none; }

        /* Nav arrow buttons — hidden on mobile (touch scroll), shown on desktop */
        .feed-nav-btn {
            display: none;
        }

        @media (min-width: 768px) {
            .feed-nav-btn {
                display: flex;
                position: absolute;
                top: 50%;
                transform: translateY(-60%);
                width: 32px;
                height: 32px;
                border-radius: 50%;
                background: var(--surface);
                border: 1.5px solid var(--border);
                box-shadow: 0 2px 8px rgba(42,30,20,0.12);
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: var(--ink);
                transition: background 0.15s, box-shadow 0.15s, opacity 0.2s;
                z-index: 2;
            }

            .feed-nav-btn:hover {
                background: var(--bg);
                box-shadow: 0 4px 12px rgba(42,30,20,0.16);
            }

            .feed-nav-btn:disabled,
            .feed-nav-btn.hidden {
                opacity: 0;
                pointer-events: none;
            }

            .feed-nav-prev { left: -16px; }
            .feed-nav-next { right: -16px; }
        }

        /* Gradient fade hint on mobile right edge */
        .feed-scroll-hint {
            position: absolute;
            right: -24px;
            top: 0;
            bottom: 8px;
            width: 52px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 6px;
            background: linear-gradient(to right, transparent, var(--bg) 65%);
            pointer-events: none;
            color: var(--muted);
            transition: opacity 0.4s ease;
        }

        @media (min-width: 768px) {
            .feed-scroll-hint { display: none; }
        }

        .feed-scroll-hint.hidden { opacity: 0; }

        /* ── Animated search placeholder ── */
        @keyframes placeholderFadeIn {
            from { opacity: 0; }
            to   { opacity: 1; }
        }

        @keyframes placeholderFadeOut {
            from { opacity: 1; }
            to   { opacity: 0; }
        }

        .home-search-placeholder-text {
            /* Stretch over the input and use identical padding + border
               offsets so the text sits exactly where native placeholder would. */
            position: absolute;
            top: 1.5px;      /* match input border-width */
            left: 1.5px;
            right: 1.5px;
            bottom: 1.5px;
            padding: 10px 42px 10px 38px;  /* input padding minus border */
            display: flex;
            align-items: center;
            font-size: 15px;
            line-height: 1;
            color: var(--muted);
            pointer-events: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }

        .home-search-placeholder-text.fade-in {
            animation: placeholderFadeIn 0.5s ease forwards;
        }

        .home-search-placeholder-text.fade-out {
            animation: placeholderFadeOut 0.4s ease forwards;
        }

        /* Hide native placeholder when our custom one is active */
        .home-search-bar.custom-placeholder::placeholder {
            color: transparent;
        }

        /* ── Home Feed Card — polished, matches discovery card ── */
        .hf-card {
            flex-shrink: 0;
            width: 192px;
            background: #ffffff;
            border-radius: 16px;
            overflow: hidden;
            border: none;
            scroll-snap-align: start;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            display: flex;
            flex-direction: column;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 0.5px 2px rgba(0,0,0,0.04);
        }

        .hf-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
        }

        /* Media wrapper */
        .hf-card-media-wrap {
            width: 100%;
            height: 120px;
            flex-shrink: 0;
            overflow: hidden;
            background: linear-gradient(135deg, #FAF6EE 0%, #EAE0D2 100%);
            position: relative;
        }

        .hf-card-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* No-photo placeholder — SVG icon centred on warm gradient */
        .hf-card-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hf-card-placeholder svg {
            width: 36px;
            height: 36px;
            color: #DDD8D2;
        }

        /* Card body */
        .hf-card-body {
            padding: 9px 11px 10px;
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .hf-card-title {
            font-size: 13px;
            font-weight: 600;
            color: #1A1A1A;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Summary — quoted, muted */
        .hf-card-summary {
            font-size: 12px;
            color: #6B6B6B;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Chips row — category + distance */
        .hf-card-chips-row {
            display: flex;
            align-items: center;
            gap: 5px;
            flex-wrap: wrap;
        }

        .hf-card-cat {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 10px;
            font-weight: 500;
            padding: 3px 8px;
            border-radius: 50px;
            background: #FAF6EE;
            color: #7A3B10;
            white-space: nowrap;
        }

        .hf-card-cat svg {
            width: 10px;
            height: 10px;
            flex-shrink: 0;
        }

        .hf-card-dist {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 10px;
            font-weight: 500;
            padding: 3px 8px;
            border-radius: 50px;
            background: rgba(123, 45, 69, 0.08);
            color: #7B2D45;
            white-space: nowrap;
        }

        .hf-card-dist svg {
            width: 10px;
            height: 10px;
            flex-shrink: 0;
        }

        .hf-card-private {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            font-size: 10px;
            font-weight: 500;
            padding: 3px 8px;
            border-radius: 50px;
            background: rgba(42, 30, 20, 0.07);
            color: #4A3728;
            white-space: nowrap;
        }
        .hf-card-private svg {
            width: 10px;
            height: 10px;
            flex-shrink: 0;
        }

        /* Saved-by row */
        .hf-card-by {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4px;
            margin-top: auto;
            padding-top: 8px;
            border-top: 1px solid #F0EBE4;
        }

        /* Stacked avatar group */
        .hf-card-avatars {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        .hf-card-avatar {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: linear-gradient(135deg, #7B2D45, #5A1F30);
            color: white;
            font-size: 9px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            border: 2px solid #ffffff;
            position: relative;
        }

        .hf-card-name {
            font-size: 11px;
            color: #6B6B6B;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            min-width: 0;
        }

        /* ── Empty state — no friends ── */
        .home-empty-friends {
            margin-bottom: 24px;
        }

        .home-empty-inner {
            position: relative;
            background: var(--surface);
            border: 1.5px dashed var(--border);
            border-radius: 16px;
            padding: 16px 16px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }

        .home-empty-close {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: none;
            border: 1.5px solid var(--border);
            color: var(--muted);
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            line-height: 1;
        }

        .home-empty-close:hover {
            background: var(--border);
            color: var(--ink);
        }

        .home-empty-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: #7B2D4510;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #7B2D45;
        }

        .home-empty-text strong {
            display: block;
            font-size: 15px;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 4px;
        }

        .home-empty-text p {
            font-size: 13px;
            color: var(--muted);
            line-height: 1.5;
            margin: 0;
        }

        .home-empty-btn {
            background: #7B2D45;
            color: white;
            border: none;
            padding: 9px 20px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: background 0.18s;
        }

        .home-empty-btn:hover { background: #5A1F30; }

        /* ── Recently viewed — compact horizontal list ── */
        .home-recent-section {
            margin-bottom: 24px;
        }

        .home-recent-scroll {
            display: flex;
            align-items: stretch;
            gap: 10px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x proximity;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding-bottom: 4px;
            margin: 0 -16px;   /* Fix 7: match new 16px home-page padding */
            padding-left: 0;
            padding-right: 0;
        }

        /* Left spacer: 24px inset minus 10px gap = 14px */
        .home-recent-scroll::before {
            content: '';
            flex-shrink: 0;
            width: 14px;
            min-height: 1px;
        }

        /* Right spacer: 24px inset minus 10px gap = 14px */
        .home-recent-scroll::after {
            content: '';
            flex-shrink: 0;
            width: 14px;
            min-height: 1px;
        }

        .home-recent-scroll::-webkit-scrollbar { display: none; }

        .home-recent-wrap {
            position: relative;
        }

        .hr-scroll-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 3;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1.5px solid var(--border);
            background: var(--surface);
            color: var(--ink);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(42,30,20,0.10);
            transition: opacity 0.2s, background 0.15s, border-color 0.15s;
            padding: 0;
        }
        .hr-scroll-arrow:hover {
            background: #7B2D4510;
            border-color: #7B2D45;
            color: #7B2D45;
        }
        .hr-scroll-left { left: 0; }
        .hr-scroll-right { right: 0; }

        /* Mobile: hide arrows, show fade hint on right edge */
        @media (max-width: 767px) {
            .hr-scroll-arrow { display: none !important; }
            .home-recent-wrap::after {
                content: '';
                position: absolute;
                top: 0;
                right: -24px;
                width: 40px;
                height: 100%;
                background: linear-gradient(to left, var(--bg) 30%, transparent);
                pointer-events: none;
                z-index: 2;
            }
        }

        @media (min-width: 768px) {
            .home-recent-scroll {
                margin: 0;
            }
            .home-recent-scroll::before,
            .home-recent-scroll::after {
                display: none;
            }
        }

        .hr-card {
            flex-shrink: 0;
            width: 120px;
            background: var(--surface);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid var(--border);
            scroll-snap-align: start;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            display: flex;
            flex-direction: column;
        }

        .hr-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 14px rgba(42,30,20,0.1);
        }

        .hr-card-img {
            width: 100%;
            height: 68px;
            object-fit: cover;
            display: block;
            background: var(--bg);
        }

        .hr-card-emoji {
            width: 100%;
            height: 68px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            background: var(--bg);
        }

        .hr-card-body {
            padding: 8px 10px 10px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .hr-card-title {
            font-size: 12px;
            font-weight: 600;
            color: var(--ink);
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .hr-card-type {
            font-size: 10px;
            color: var(--muted);
            margin-top: 2px;
            text-transform: capitalize;
        }

        .home-saves-scroll {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding-bottom: 8px;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .home-saves-scroll::-webkit-scrollbar { display: none; }

        .home-save-card {
            flex-shrink: 0;
            width: 160px;
            background: #ffffff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 0.5px 2px rgba(0,0,0,0.04);
            scroll-snap-align: start;
            transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            position: relative;
        }

        .home-save-card:hover { transform: translateY(-3px); }

        .home-save-delete {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: rgba(0,0,0,0.5);
            color: #fff;
            border: none;
            font-size: 14px;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s;
            z-index: 2;
        }

        .home-save-card:hover .home-save-delete { opacity: 1; }

        .home-save-delete:hover { background: rgba(220,38,38,0.8); }

        .home-save-img {
            width: 100%;
            height: 100px;
            object-fit: cover;
            display: block;
            background: var(--border);
        }

        .home-save-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            background: var(--mason);
        }

        .home-save-title {
            padding: 8px 12px 0;
            font-size: 13px;
            font-weight: 600;
            color: var(--ink);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .home-save-addedby {
            padding: 2px 12px 10px;
            font-size: 11px;
            color: var(--muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Quick Actions (legacy - hidden) */
        .home-quick-actions { display: none; }

        /* Activity Section on Home */
        .home-activity-section {
            margin-bottom: 24px;
        }

        .activity-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 14px 4px;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background 0.15s;
        }

        .activity-item:last-child { border-bottom: none; }

        .activity-item:hover { background: rgba(123, 45, 69,0.04); }

        .activity-item.unread {
            background: #F5EDE8;
        }

        .activity-item.unread:hover {
            background: #FAF6EE;
        }

        .activity-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #7B2D45, #9B4D65);
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 600;
            flex-shrink: 0;
        }

        .activity-body {
            flex: 1;
            min-width: 0;
        }

        .activity-message {
            font-size: 14px;
            color: #374151;
            line-height: 1.4;
        }

        .activity-time {
            font-size: 12px;
            color: var(--muted);
            margin-top: 2px;
        }

        .activity-empty {
            text-align: center;
            color: var(--muted);
            font-size: 14px;
            padding: 24px 0;
        }

        /* Legacy home-card styles (kept for backwards compat) */
        .home-card-content {
            flex: 1;
        }

        .home-card-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 6px;
        }

        .home-card-desc {
            font-size: 14px;
            color: var(--muted);
        }

        /* DISCOVER MODE */
        .discover-container {
            max-width: 900px;
            margin: 0 auto;
            padding: 12px 16px;
        }

        @media (min-width: 768px) {
            .discover-container { padding: 16px 32px; }
        }

        .discover-header {
            margin-bottom: 6px;
        }

        /* Title row: heading + Map toggle side-by-side */
        .discover-title-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 2px;
        }

        /* Map toggle button — looks like a soft pill badge */
        .dc-map-toggle-btn {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            flex-shrink: 0;
            padding: 6px 14px;
            border-radius: 20px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: 500;
            color: var(--ink);
            cursor: pointer;
            transition: background 0.18s, border-color 0.18s, color 0.18s;
        }
        .dc-map-toggle-btn svg { flex-shrink: 0; stroke: currentColor; }
        .dc-map-toggle-btn:hover {
            border-color: #7B2D45;
            color: #7B2D45;
        }
        .dc-map-toggle-btn.active {
            background: #7B2D45;
            border-color: #7B2D45;
            color: #FAF6EE;
        }

        .page-title {
            font-family: 'DM Serif Display', Georgia, serif;
            font-size: 22px;
            font-weight: 700;
            color: #1A1A1A;
            margin-bottom: 1px;
            letter-spacing: -0.3px;
        }

        .page-subtitle {
            font-size: 13px;
            color: var(--muted);
            margin-bottom: 0;
        }

        /* Discover Search Wrapper */
        .discover-search-wrapper {
            display: flex;
            align-items: center;
            background: #ffffff;
            border-radius: 14px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            padding: 4px 6px 4px 16px;
            margin-bottom: 20px;
            transition: box-shadow 0.25s;
        }

        .discover-search-wrapper:focus-within {
            box-shadow: 0 4px 20px rgba(123, 45, 69, 0.15);
        }

        .discover-search-icon {
            width: 18px;
            height: 18px;
            color: var(--muted);
            flex-shrink: 0;
            margin-right: 10px;
        }

        .search-input {
            flex: 1;
            padding: 10px 0;
            border: none;
            border-radius: 0;
            font-size: 15px;
            background: transparent;
            color: #1A1A1A;
            transition: none;
        }

        .search-input:focus {
            outline: none;
            border-color: transparent;
            box-shadow: none;
        }

        .search-input::placeholder {
            color: var(--muted);
        }

        /* Filter Pill */
        .filter-pill {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            border: none;
            background: var(--bg);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: #6B6B6B;
            transition: all 0.2s;
            position: relative;
        }

        .filter-pill:hover {
            background: #FAF6EE;
            color: #7B2D45;
        }

        /* Legacy filter-btn — hidden but still functional */
        .filter-btn {
            display: none;
        }

        .filter-badge {
            background: #7B2D45;
            color: #ffffff;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            font-weight: 700;
            position: absolute;
            top: -3px;
            right: -3px;
        }

        /* Filter Modal */
        .filter-modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            z-index: 2000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }

        .filter-modal-backdrop.active {
            opacity: 1;
            pointer-events: auto;
        }

        .filter-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.95);
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.15);
            width: 90%;
            max-width: 400px;
            max-height: 80vh;
            overflow: hidden;
            z-index: 2001;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s;
            display: flex;
            flex-direction: column;
        }

        .filter-modal.active {
            opacity: 1;
            pointer-events: auto;
            transform: translate(-50%, -50%) scale(1);
        }

        .filter-modal-header {
            padding: 20px;
            border-bottom: 1px solid var(--border);
            font-size: 18px;
            font-weight: 600;
        }

        .filter-modal-content {
            flex: 1;
            overflow-y: auto;
        }

        .filter-section {
            border-bottom: 1px solid var(--border);
        }

        .filter-section-header {
            padding: 16px 20px;
            display: flex;
            justify-content: space-between;
            cursor: pointer;
            transition: background 0.2s;
        }

        .filter-section-header:hover {
            background: var(--bg);
        }

        .filter-section-title {
            font-size: 15px;
            font-weight: 500;
            color: #374151;
        }

        .filter-section-chevron {
            font-size: 18px;
            color: var(--muted);
            transition: transform 0.2s;
        }

        .filter-section.expanded .filter-section-chevron {
            transform: rotate(90deg);
        }

        .filter-section-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        .filter-section.expanded .filter-section-content {
            max-height: 500px;
        }

        .filter-section-options {
            padding: 0 20px 16px 20px;
        }

        .filter-option {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 0;
            cursor: pointer;
        }

        .filter-option input[type="checkbox"] {
            width: 20px;
            height: 20px;
            cursor: pointer;
            accent-color: #7B2D45;
        }

        .filter-option label {
            flex: 1;
            font-size: 14px;
            color: #374151;
            cursor: pointer;
        }

        .filter-modal-footer {
            padding: 16px 20px;
            border-top: 1px solid var(--border);
            display: flex;
            gap: 12px;
        }

        .clear-btn {
            flex: 1;
            padding: 12px;
            border: 1px solid var(--border);
            background: #ffffff;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            color: #6B6B6B;
            cursor: pointer;
            transition: all 0.2s;
        }

        .clear-btn:hover {
            background: var(--bg);
            color: #1A1A1A;
        }

        .done-btn {
            flex: 1;
            padding: 12px;
            background: #7B2D45;
            color: #ffffff;
            border: none;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.2s;
        }

        .done-btn:hover {
            background: #5A1F30;
        }

        /* Active Filters */
        .active-filters-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }

        .active-filter-chip {
            padding: 6px 12px;
            background: #FAF6EE;
            color: #7A3B10;
            border-radius: 16px;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .active-filter-remove {
            cursor: pointer;
            font-weight: bold;
        }

        /* Grid */
        .discover-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-bottom: 16px;
        }

        @media (min-width: 768px) {
            .discover-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 18px;
            }
        }

        @media (min-width: 1024px) {
            .discover-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (min-width: 1400px) {
            .discover-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        /* Discovery Card — Premium Collection Style */
        .discovery-card {
            background: #ffffff;
            border: none;
            border-radius: 16px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 0.5px 2px rgba(0,0,0,0.04);
        }

        .discovery-card:hover {
            border-color: transparent;
            box-shadow: 0 8px 30px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
            transform: translateY(-3px);
        }

        .discovery-card-photo {
            width: 100%;
            height: 140px;
            background: linear-gradient(135deg, #FAF6EE 0%, #EAE0D2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }

        .discovery-card-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .discovery-card-photo-placeholder {
            font-size: 32px;
            color: #DDD8D2;
        }

        .discovery-card-content {
            padding: 12px 14px 14px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .discovery-card-title {
            font-weight: 600;
            color: #1A1A1A;
            font-size: 15px;
            margin-bottom: 6px;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .discovery-card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-bottom: 8px;
        }

        .discovery-tag {
            font-size: 10px;
            padding: 3px 8px;
            border-radius: 50px;
            font-weight: 500;
        }

        .discovery-tag-distance {
            background: #FAF6EE;
            color: #7A3B10;
        }

        .discovery-tag-person {
            background: rgba(123, 45, 69, 0.1);
            color: #7B2D45;
        }

        .discovery-tag-time {
            background: var(--mason);
            color: var(--muted);
        }

        .discovery-card-snippet {
            font-size: 12px;
            color: #6B6B6B;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-top: auto;
        }

        .discovery-card-snippet strong {
            color: #374151;
        }

        /* Legacy support */
        .discovery-card-distance-text {
            color: #7B2D45;
            font-size: 12px;
            font-weight: 500;
            margin-bottom: 8px;
        }

        .discovery-card-note {
            background: #FAF6EE;
            border-left: 3px solid #7B2D45;
            padding: 10px;
            margin-bottom: 10px;
            border-radius: 8px;
            font-size: 12px;
            color: #374151;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .discovery-card-note-label {
            font-size: 10px;
            font-weight: 600;
            color: #7B2D45;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            margin-bottom: 4px;
            font-style: normal;
        }

        .discovery-card-description {
            color: #6B6B6B;
            font-size: 13px;
            line-height: 1.5;
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .discovery-card-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: var(--muted);
            padding-top: 10px;
            border-top: 1px solid var(--mason);
        }

        /* Empty State */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            grid-column: 1 / -1;
        }

        .empty-state-title {
            font-family: 'DM Serif Display', Georgia, serif;
            font-size: 22px;
            font-weight: 700;
            color: #1A1A1A;
            margin-bottom: 8px;
        }

        .empty-state-text {
            font-size: 14px;
            color: var(--muted);
            margin-bottom: 24px;
        }

        .empty-state-btn {
            padding: 12px 28px;
            background: #7B2D45;
            color: #ffffff;
            border: none;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.2s;
        }

        .empty-state-btn:hover {
            background: #5A1F30;
        }

        /* Load More */
        .load-more-container {
            text-align: center;
            margin: 24px 0;
        }

        .load-more-btn {
            padding: 12px 32px;
            background: #ffffff;
            border: 1px dashed var(--border);
            border-radius: 50px;
            font-size: 14px;
            font-weight: 500;
            color: #6B6B6B;
            cursor: pointer;
            transition: all 0.2s;
        }

        .load-more-btn:hover {
            border-color: #7B2D45;
            color: #7B2D45;
            background: #FAF6EE;
        }

        /* Map - Collapsible */
        .map-section {
            margin-top: 16px;
            padding-bottom: 16px;
        }

        .map-toggle-btn {
            width: 100%;
            padding: 12px 16px;
            background: #ffffff;
            border: none;
            border-radius: 14px;
            font-size: 14px;
            font-weight: 500;
            color: #6B6B6B;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 16px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            transition: all 0.2s;
        }

        .map-toggle-btn:hover {
            color: #7B2D45;
            box-shadow: 0 4px 16px rgba(123, 45, 69, 0.12);
        }

        .map-toggle-icon-svg {
            color: #7B2D45;
        }

        .map-toggle-icon {
            transition: transform 0.3s;
            font-size: 12px;
            color: var(--muted);
        }

        .map-toggle-btn.collapsed .map-toggle-icon {
            transform: rotate(-90deg);
        }

        .discover-map-container {
            border-radius: 16px;
            overflow: hidden;
            border: none;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            height: 400px;
            transition: all 0.3s;
        }

        .discover-map-container.hidden {
            height: 0;
            border: none;
            box-shadow: none;
            margin: 0;
        }

        #discoverMap {
            width: 100%;
            height: 100%;
        }

        /* SEARCH MODE */
        .search-header {
            max-width: 600px;
            margin: 0 auto;
            padding: 8px 20px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        @media (min-width: 768px) {
            .search-header { max-width: 720px; padding: 8px 28px 0; }
        }

        .search-back-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            color: #7B2D45;
            cursor: pointer;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            padding: 0;
            transition: background 0.15s;
            flex-shrink: 0;
        }

        .search-back-btn:hover {
            background: rgba(123, 45, 69, 0.08);
        }

        .search-back-btn svg {
            flex-shrink: 0;
        }

        .search-header-title {
            font-family: 'DM Serif Display', Georgia, serif;
            font-size: 18px;
            font-weight: 400;
            color: var(--ink);
            flex: 1;
            text-align: center;
        }

        /* New session — icon-only circle matching Winterberry theme */
        .new-session-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #7B2D45;
            border: none;
            cursor: pointer;
            color: #ffffff;
            flex-shrink: 0;
            transition: background 0.18s, transform 0.18s;
        }

        .new-session-btn:hover {
            background: #5A1F30;
        }

        .new-session-btn:active {
            transform: rotate(-30deg);
        }

        .new-session-icon {
            font-size: 16px;
        }

        .chat-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 0 20px 100px;
        }

        @media (min-width: 768px) {
            .chat-container { max-width: 720px; padding: 0 28px 100px; }
        }

        .welcome {
            text-align: left;
            padding: 20px 0 24px;
        }

        /* Search page greeting — mirrors home greeting style */
        .search-greeting {
            margin-bottom: 20px;
        }

        .search-greeting h1 {
            /* font-size controlled by .page-heading global token */
            line-height: 1.15;
            margin-bottom: 4px;
        }

        .search-greeting p {
            font-size: 15px;
            color: var(--muted);
            line-height: 1.5;
        }

        .welcome p {
            color: var(--muted);
            font-size: 15px;
            margin-bottom: 16px;
        }

        .suggestions-label {
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 8px;
            margin-top: 4px;
        }

        .suggestions {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 8px;
        }

        .suggestion-chip {
            background: var(--surface);
            border: 1px solid var(--border);
            padding: 4px 10px;
            border-radius: 16px;
            font-size: 12px;
            color: var(--ink);
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            transition: border-color 0.15s, color 0.15s, background 0.15s;
            white-space: nowrap;
            line-height: 1.4;
        }

        .suggestion-chip:hover {
            border-color: #7B2D45;
            color: #7B2D45;
            background: #F5EDE8;
        }

        /* Hide bottom tab bar when iPhone keyboard is open */
        body.keyboard-open .bottom-tab-bar {
            display: none !important;
        }

        /* ── Translate globe button on Home + Discover feed cards ── */
        .feed-card-translate-btn {
            display: inline-flex;
            align-items: center;
            flex-shrink: 0;
            background: none;
            border: none;
            color: rgba(123,45,69,0.6);
            font-size: 11px;
            font-weight: 500;
            padding: 2px 6px 2px 4px;
            border-radius: 8px;
            cursor: pointer;
            transition: color 0.15s, background 0.15s;
            line-height: 1;
            white-space: nowrap;
        }
        .feed-card-translate-btn:hover {
            color: #7B2D45;
            background: rgba(123,45,69,0.07);
        }

        /* Translated snippet shown below The Word on feed cards */
        .feed-card-translation {
            font-size: 11px;
            color: var(--text-muted, #888);
            font-style: italic;
            margin-top: 2px;
            line-height: 1.4;
        }

        /* ── Translate loading animation ── */
        @keyframes translate-pulse {
            0%, 100% { opacity: 1; }
            50%       { opacity: 0.45; }
        }
        .translate-loading {
            animation: translate-pulse 1s ease-in-out infinite;
            pointer-events: none;
        }

        /* ── Save count + translate footer row on result cards ── */
        .top-pick-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 8px;
            gap: 8px;
        }

        /* Compact cards are only 180px — stack save count above translate btn */
        .compact-footer {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin-top: 8px;
            gap: 4px;
        }

        .result-save-count {
            font-size: 10px;
            color: var(--text-muted, #9ca3af);
            white-space: nowrap;
        }

        /* ── Translate button on inline result cards ── */
        .card-translate-btn {
            display: inline-block;
            margin-top: 8px;
            background: none;
            border: 1px solid rgba(123,45,69,0.25);
            color: #7B2D45;
            font-size: 11px;
            font-family: 'Inter', sans-serif;
            padding: 3px 9px;
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s;
        }

        .card-translate-btn:hover {
            background: rgba(123,45,69,0.07);
            border-color: #7B2D45;
        }

        .compact-translate-btn {
            margin-top: 6px;
            font-size: 10px;
            padding: 2px 8px;
        }

        /* ── Animated search placeholder overlay ── */
        .search-input-inner {
            position: relative;
        }

        .search-animated-placeholder {
            position: absolute;
            left: 36px; /* after the search icon */
            top: 50%;
            transform: translateY(-50%);
            font-size: 14px;
            color: #aaa;
            pointer-events: none;
            white-space: nowrap;
            overflow: hidden;
            max-width: calc(100% - 80px);
            font-family: 'Inter', sans-serif;
            font-weight: 300;
        }

        .search-animated-placeholder.anim-fade-in {
            animation: searchPlaceholderFadeIn 0.5s ease forwards;
        }

        .search-animated-placeholder.anim-fade-out {
            animation: searchPlaceholderFadeOut 0.4s ease forwards;
        }

        @keyframes searchPlaceholderFadeIn {
            from { opacity: 0; transform: translateY(calc(-50% + 6px)); }
            to   { opacity: 1; transform: translateY(-50%); }
        }

        @keyframes searchPlaceholderFadeOut {
            from { opacity: 1; transform: translateY(-50%); }
            to   { opacity: 0; transform: translateY(calc(-50% - 6px)); }
        }

        /* Hide animated placeholder when input has value or is focused */
        #messageInput:focus ~ .search-animated-placeholder,
        #messageInput:not(:placeholder-shown) ~ .search-animated-placeholder {
            display: none;
        }

        /* ── Recent Searches — horizontal pill row ── */
        .recent-searches-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .recent-clear-all-btn {
            background: none;
            border: none;
            font-size: 11px;
            color: #7B2D45;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            padding: 0;
            opacity: 0.65;
            transition: opacity 0.15s;
        }

        .recent-clear-all-btn:hover { opacity: 1; }

        /* Horizontally scrollable pill row — wrapper clips the row cleanly */
        .recent-searches-row-wrap {
            position: relative;
            overflow: hidden;           /* clips the bleeding row at the container edge */
        }

        /* Right-edge fade hint — signals more pills are scrollable */
        .recent-searches-row-wrap::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 32px;
            height: 100%;
            background: linear-gradient(to right, transparent, var(--bg, #FAF6EE));
            pointer-events: none;
            z-index: 1;
        }

        /* Horizontally scrollable pill row */
        .recent-searches-row {
            display: flex;
            flex-direction: row;
            gap: 6px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding-bottom: 4px;
            padding-left: 2px;
            padding-right: 32px;        /* space so last pill clears the fade */
        }
        .recent-searches-row::-webkit-scrollbar { display: none; }

        /* Each recent item is a pill with text + inline × */
        .recent-search-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 16px;
            padding: 4px 8px 4px 10px;
            font-size: 12px;
            color: var(--ink);
            font-family: 'Inter', sans-serif;
            white-space: nowrap;
            cursor: pointer;
            flex-shrink: 0;
            transition: border-color 0.15s, background 0.15s;
        }

        .recent-search-pill:hover {
            border-color: #7B2D45;
            background: #F5EDE8;
        }

        .recent-search-pill-text {
            max-width: 110px;           /* tighter cap so pills don't crowd the row */
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .recent-pill-delete {
            background: none;
            border: none;
            color: var(--muted);
            cursor: pointer;
            font-size: 13px;
            line-height: 1;
            padding: 0 1px;
            opacity: 0.45;
            transition: opacity 0.15s;
            flex-shrink: 0;
        }

        .recent-pill-delete:hover { opacity: 1; color: #7B2D45; }

        .message {
            margin-bottom: 24px;
            animation: fadeIn 0.3s;
        }

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

        .message-user {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 16px;
        }

        .message-user .message-bubble {
            background: var(--mason);
            color: var(--ink);
            padding: 12px 16px;
            border-radius: 18px;
            max-width: 70%;
            font-size: 15px;
        }

        .message-assistant {
            margin-bottom: 24px;
        }

        .message-content {
            color: #374151;
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 16px;
        }

        /* Result Cards - NEW DESIGN */
        .results-section {
            margin-top: 16px;
        }

        .results-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border);
        }

        .results-header-icon {
            font-size: 18px;
        }

        .results-header-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--ink);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .results-header-count {
            font-size: 12px;
            color: var(--muted);
            margin-left: auto;
        }

        /* TOP PICKS - Featured Cards */
        .top-picks-section {
            margin-bottom: 20px;
        }

        .top-pick-card {
            background: linear-gradient(135deg, #ffffff 0%, #F5EDE8 100%);
            border: 2px solid #7B2D45;
            border-radius: 16px;
            padding: 16px;
            margin-bottom: 12px;
            cursor: pointer;
            display: flex;
            gap: 14px;
            position: relative;
            transition: all 0.2s;
        }

        .top-pick-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(123, 45, 69, 0.15);
        }

        .top-pick-badge {
            position: absolute;
            top: -8px;
            left: 16px;
            background: linear-gradient(135deg, #7B2D45, #9B4D65);
            color: white;
            font-size: 10px;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 8px rgba(123, 45, 69, 0.3);
        }

        .top-pick-photo {
            width: 100px;
            height: 100px;
            border-radius: 12px;
            overflow: hidden;
            flex-shrink: 0;
            background: var(--mason);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .top-pick-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .top-pick-content {
            flex: 1;
            min-width: 0;
        }

        .top-pick-title {
            font-weight: 700;
            color: var(--ink);
            font-size: 17px;
            margin-bottom: 4px;
        }

        .top-pick-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            flex-wrap: wrap;
        }

        .meta-tag {
            font-size: 11px;
            padding: 3px 8px;
            border-radius: 10px;
            font-weight: 500;
        }

        .meta-distance {
            background: #FAF6EE;
            color: #7A3B10;
        }

        .meta-added-by {
            background: #fef3c7;
            color: #92400e;
        }

        .meta-saves {
            background: #f0f4ff;
            color: #3b4a8a;
        }

        .top-pick-reason {
            background: rgba(123, 45, 69, 0.1);
            border-radius: 8px;
            padding: 8px 10px;
            font-size: 13px;
            color: #5A1F30;
            line-height: 1.4;
        }

        .top-pick-reason-label {
            font-size: 10px;
            font-weight: 700;
            color: #7B2D45;
            text-transform: uppercase;
            margin-bottom: 3px;
        }

        /* Language toggle button */
        .lang-toggle-btn {
            background: none;
            border: none;
            color: #7B2D45;
            font-size: 12px;
            padding: 4px 0;
            cursor: pointer;
            text-decoration: underline;
            opacity: 0.8;
            font-family: inherit;
        }
        .lang-toggle-btn:active {
            opacity: 1;
        }
        .lang-toggle-btn:disabled {
            opacity: 0.5;
            cursor: wait;
            text-decoration: none;
        }
        .drawer-lang-toggle {
            margin: 8px 0;
            display: block;
        }

        /* Translation block — shown below original, never replacing it */
        .drawer-translation-block {
            margin-top: 10px;
            padding: 10px 14px;
            background: rgba(123, 45, 69, 0.06);
            border-left: 3px solid #7B2D45;
            border-radius: 0 10px 10px 0;
            animation: fadeInUp 0.2s ease;
        }

        .drawer-translation-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #7B2D45;
            margin-bottom: 5px;
            opacity: 0.8;
        }

        .drawer-translation-text {
            font-size: 14px;
            color: var(--ink);
            line-height: 1.5;
            margin: 0;
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(4px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* MORE OPTIONS - 2 Column Grid */
        .more-options-section {
            margin-bottom: 16px;
        }

        /* Horizontal scrolling carousel for more results */
        .more-options-scroll {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x proximity;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding-bottom: 8px;
            touch-action: pan-x pan-y;
            /* No negative margin — aligns left edge with top pick card */
            padding-right: 8px;
        }

        .more-options-scroll::-webkit-scrollbar { display: none; }

        .more-options-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .scroll-arrow {
            position: absolute;
            z-index: 3;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1.5px solid var(--border);
            background: var(--surface);
            color: var(--ink);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: opacity 0.2s, transform 0.15s;
        }
        .scroll-arrow:hover {
            border-color: #7B2D45;
            color: #7B2D45;
            transform: scale(1.08);
        }
        .scroll-arrow-left {
            left: -16px;
        }
        .scroll-arrow-right {
            right: -16px;
        }

        /* Hide scroll arrows on mobile — swipe is natural */
        @media (max-width: 600px) {
            .scroll-arrow {
                display: none;
            }
        }

        .compact-card {
            background: #ffffff;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 12px;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
            width: 180px;
            scroll-snap-align: start;
        }

        .compact-card:hover {
            border-color: #7B2D45;
            box-shadow: 0 4px 12px rgba(123, 45, 69, 0.1);
        }

        .compact-photo {
            width: 100%;
            height: 100px;
            border-radius: 8px;
            overflow: hidden;
            background: var(--mason);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .compact-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .compact-photo-placeholder {
            font-size: 24px;
            color: #DDD8D2;
        }

        .compact-title {
            font-weight: 600;
            color: var(--ink);
            font-size: 13px;
            margin-bottom: 3px;
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .compact-meta {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            color: var(--muted);
            margin-bottom: 6px;
        }

        .compact-snippet {
            font-size: 11px;
            color: var(--muted);
            line-height: 1.35;
            margin-bottom: 4px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .compact-snippet strong {
            color: #374151;
        }

        .cc-chips-row {
            margin: 4px 0 2px;
        }

        /* ── Compact card: Discover-style adder row ── */
        .cc-adder-row {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-top: 2px;
            margin-bottom: 4px;
        }

        .cc-adder-avatar {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            font-weight: 700;
            color: #fff;
            flex-shrink: 0;
        }

        .cc-adder-name {
            font-size: 11px;
            font-weight: 600;
            color: #2A1E14;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .cc-saves-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid #F0EBE4;
            margin-top: 6px;
            padding-top: 6px;
        }

        /* LEGACY - Keep for backwards compat */
        .result-card {
            background: #ffffff;
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 0;
            margin-bottom: 12px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 0;
            overflow: hidden;
        }

        .result-card:hover {
            border-color: #7B2D45;
            box-shadow: 0 2px 8px rgba(123, 45, 69, 0.1);
        }

        .result-photo {
            width: 100%;
            height: 160px;
            border-radius: 0;
            overflow: hidden;
            flex-shrink: 0;
            background: var(--mason);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .result-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .result-content {
            flex: 1;
            padding: 14px 16px 16px;
        }

        .result-title {
            font-weight: 700;
            color: var(--ink);
            font-size: 17px;
            margin-bottom: 4px;
        }

        .result-meta-line {
            color: var(--muted);
            font-size: 12px;
            margin-bottom: 10px;
            font-weight: 500;
        }

        .result-description {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .result-relevance {
            background: #F5EDE8;
            border-left: 3px solid #7B2D45;
            padding: 10px 12px;
            margin-bottom: 12px;
            border-radius: 6px;
        }

        .relevance-label {
            font-size: 11px;
            font-weight: 600;
            color: #7A3B10;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            margin-bottom: 6px;
        }

        .relevance-text {
            font-size: 13px;
            color: #7A3B10;
            line-height: 1.5;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .result-personal-note {
            background: rgba(123, 45, 69, 0.05);
            border-left: 3px solid #7B2D45;
            border-radius: 0 8px 8px 0;
            padding: 10px 14px;
            margin-bottom: 12px;
            font-size: 14px;
            font-style: italic;
            color: #2A1E14;
            line-height: 1.55;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .result-personal-note-label {
            font-size: 9px;
            font-weight: 700;
            color: #7B2D45;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 5px;
            font-style: normal;
        }

        /* Typing Indicator */
        .typing-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 16px;
            background: var(--mason);
            border-radius: 18px;
            max-width: fit-content;
        }
        .typing-dots { display: flex; gap: 4px; }
        .typing-dot {
            width: 8px;
            height: 8px;
            background: #7B2D45;
            border-radius: 50%;
            animation: bounce 1.4s infinite ease-in-out;
        }
        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
        @keyframes bounce {
            0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
            40% { transform: scale(1); opacity: 1; }
        }

        /* Search Results Map — matches Discover map style */
        .search-map-container {
            margin-top: 16px;
            border-radius: 14px;
            overflow: hidden;
            border: 1px solid var(--border);
            height: 260px;
            position: relative;
        }
        .search-map-container .leaflet-container {
            border-radius: 14px;
        }
        /* Search map locate button — sits bottom-right like Discover controls */
        .smap-controls {
            position: absolute;
            right: 12px;
            bottom: 12px;
            z-index: 500;
            background: rgba(250,246,238,0.97);
            border: 1px solid var(--border-light);
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(42,30,20,0.18);
            backdrop-filter: blur(10px);
            overflow: hidden;
        }

        /* Photo Lightbox */
        .photo-lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 3000;
            padding: 20px;
        }

        .photo-lightbox.active {
            display: flex;
        }

        .photo-lightbox img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: 8px;
        }

        .lightbox-close {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 40px;
            color: #ffffff;
            cursor: pointer;
            z-index: 3001;
        }

        /* Drawer */
        .detail-drawer {
            position: fixed;
            right: 0;
            top: 0;
            width: 440px;
            max-width: 90vw;
            height: 100vh;
            background: var(--bg);
            box-shadow: -4px 0 24px rgba(42, 30, 20, 0.15);
            transform: translateX(100%);
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 2000;
            overflow-y: auto;
        }

        .detail-drawer.open {
            transform: translateX(0);
        }

        .drawer-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(42, 30, 20, 0.4);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
            z-index: 1999;
        }

        .drawer-backdrop.active {
            opacity: 1;
            pointer-events: auto;
        }

        .drawer-header {
            position: sticky;
            top: 0;
            background: var(--bg);
            border-bottom: 1px solid var(--border);
            padding: 14px 20px;
            display: flex;
            justify-content: flex-end;
            z-index: 10;
        }

        /* Hidden on desktop, shown on mobile via media query */
        .drawer-handle { display: none; }

        .drawer-close {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--surface);
            border: 1.5px solid var(--border);
            color: var(--muted);
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }

        .drawer-close:hover {
            background: var(--border);
            color: var(--ink);
        }

        .drawer-content {
            padding: 0;
        }

        /* ── Hero photo ── */
        .drawer-hero {
            position: relative;
            width: 100%;
            height: 280px;
            overflow: hidden;
            cursor: pointer;
            background: var(--border);
        }
        .drawer-hero img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .drawer-hero-fade {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 80px;
            background: linear-gradient(transparent, var(--bg));
            pointer-events: none;
        }

        /* ── Drawer body padding ── */
        .drawer-body {
            padding: 0 24px 32px;
        }

        /* ── Title ── */
        .drawer-title {
            font-family: 'DM Serif Display', serif;
            font-size: 26px;
            font-weight: 400;
            color: var(--ink);
            margin-bottom: 4px;
            letter-spacing: -0.01em;
            line-height: 1.2;
        }

        /* ── Meta line (inline) ── */
        .drawer-meta-line {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--muted);
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .drawer-meta-dot {
            color: var(--border);
        }
        .drawer-meta-dist {
            color: var(--wb);
            font-weight: 600;
        }

        /* ── The Word (pull-quote) ── */
        .drawer-quote {
            border-left: 3px solid var(--wb);
            padding: 12px 16px;
            margin-bottom: 8px;
            background: rgba(123, 45, 69, 0.04);
            border-radius: 0 10px 10px 0;
        }
        .drawer-quote-label {
            font-size: 10px;
            font-weight: 700;
            color: var(--wb);
            text-transform: uppercase;
            letter-spacing: 0.6px;
            margin-bottom: 5px;
        }
        .drawer-quote-text {
            color: var(--ink);
            font-size: 15px;
            line-height: 1.6;
            font-style: italic;
        }
        .drawer-quote-locked .drawer-quote-text {
            color: var(--muted);
            font-style: normal;
        }
        /* Translate button — small, sits below the quote */
        .drawer-translate-btn {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: var(--muted);
            background: none;
            border: none;
            padding: 2px 0 0 0;
            margin-bottom: 16px;
            cursor: pointer;
            text-decoration: underline;
            text-underline-offset: 2px;
            transition: color 0.2s;
        }
        .drawer-translate-btn:hover { color: var(--wb); }

        /* ── Description (secondary) ── */
        .drawer-desc {
            color: var(--muted);
            font-size: 14px;
            line-height: 1.7;
            margin: 0 0 20px;
        }

        /* ── Quick actions ── */
        .drawer-quick-actions {
            margin-bottom: 20px;
        }
        .drawer-address-line {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 13px;
            color: var(--muted);
            margin-bottom: 10px;
        }
        .drawer-action-btns {
            display: flex;
            gap: 8px;
        }
        /* Primary CTA — filled */
        .drawer-btn-primary {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 11px 16px;
            background: var(--wb);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .drawer-btn-primary:hover { opacity: 0.88; }
        .drawer-btn-primary svg { flex-shrink: 0; }
        /* Secondary CTA — outline */
        .drawer-btn-secondary {
            flex: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 11px 16px;
            background: var(--surface);
            color: var(--ink);
            border: 1.5px solid var(--border);
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
        }
        .drawer-btn-secondary:hover {
            border-color: var(--wb);
            color: var(--wb);
            background: rgba(123, 45, 69, 0.04);
        }
        .drawer-btn-secondary svg { flex-shrink: 0; }

        /* ── Social section ── */
        .drawer-social {
            border-top: 1px solid var(--border);
            padding-top: 16px;
            margin-top: 4px;
        }
        .drawer-comments {
            margin-top: 12px;
        }

        /* Legacy — edit mode still uses these old classes */
        .drawer-story {
            background: #fef3c7;
            border-left: 4px solid #f59e0b;
            padding: 16px;
            margin-bottom: 20px;
            border-radius: 12px;
        }
        .drawer-story-label {
            font-size: 11px;
            font-weight: 700;
            color: #b45309;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }
        .drawer-story-text {
            color: #78350f;
            font-size: 15px;
            line-height: 1.6;
            font-style: italic;
        }

        /* Input Area - Only for Search Mode */
        .input-area {
            position: fixed;
            bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
            left: 0;
            right: 0;
            background: var(--bg);
            padding: 10px 20px;
            border-top: 1px solid var(--border);
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            z-index: 999;
        }

        .input-area.hidden {
            display: none;
        }

        .input-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
            max-width: 600px;
            margin: 0 auto;
        }

        @media (min-width: 768px) {
            .input-wrapper { max-width: 720px; }
        }

        /* Pill-shaped search bar — mirrors home search bar */
        .search-input-inner {
            position: relative;
            flex: 1;
            min-width: 0;
            background: var(--surface);
            border: 1.5px solid var(--border);
            border-radius: 50px;
            transition: border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                        box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .search-input-inner:focus-within {
            border-color: #7B2D45;
            box-shadow: 0 0 0 4px rgba(123, 45, 69, 0.12);
        }

        .search-input-icon {
            position: absolute;
            left: 13px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
            color: var(--muted);
            pointer-events: none;
            transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .search-input-inner:focus-within .search-input-icon {
            color: #7B2D45;
        }

        #messageInput {
            width: 100%;
            border: none;
            outline: none;
            background: transparent;
            font-size: 15px;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            padding: 10px 44px 10px 40px;
            border-radius: 50px;
            color: var(--ink);
        }


        #sendButton {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: none;
            background: #7B2D45;
            color: #ffffff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            transition: background 0.18s, transform 0.18s;
        }

        #sendButton svg {
            width: 14px;
            height: 14px;
            stroke: white;
        }

        #sendButton:hover {
            background: #5A1F30;
        }

        #sendButton:active {
            transform: translateY(-50%) scale(0.93);
        }

        /* Refresh/New session button — standalone */
        .input-new-btn {
            width: auto;
            height: 36px;
            padding: 0 10px;
            border-radius: 18px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            color: var(--muted);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            flex-shrink: 0;
            transition: color 0.18s, background 0.18s, border-color 0.18s;
        }

        .input-new-btn:hover {
            color: #7B2D45;
            border-color: #7B2D45;
            background: rgba(123, 45, 69, 0.06);
        }

        .input-new-btn:active {
            transform: scale(0.95);
        }

        .input-btn-label {
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.01em;
            line-height: 1;
        }

        /* INPUT MODE */
        #inputMode {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .input-form-container {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px 16px 120px;
            box-sizing: border-box;
        }
        @media (min-width: 480px) {
            .input-form-container { padding: 20px 20px 120px; }
        }
        @media (min-width: 768px) {
            .input-form-container { max-width: 800px; padding: 20px 40px 140px; }
        }
        @media (min-width: 1024px) {
            .input-form-container { max-width: 860px; }
        }

        /* ── Add page desktop — single column, centred ── */
        @media (min-width: 768px) {
            #addForm {
                display: block;
                max-width: 560px;
                margin-left: auto;
                margin-right: auto;
            }
            /* Also centre the URL hero bar and OG card to match */
            .url-hero-bar,
            .og-preview-card,
            .og-loading,
            .url-hero-divider,
            .details-toggle,
            .details-body {
                max-width: 560px;
                margin-left: auto;
                margin-right: auto;
            }
            #addForm .form-group-take .your-take-textarea {
                min-height: 140px;
            }
        }

        .input-form-container h2 {
            /* font-size controlled by .page-heading global token */
            margin-bottom: 2px;
        }

        .input-form-container p {
            color: var(--muted);
            font-size: 13px;
            margin-bottom: 16px;
        }

        .form-group {
            margin-bottom: 10px;
        }

        .form-group label {
            display: block;
            font-size: 11px;
            font-weight: 600;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 10px 13px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            border-radius: 10px;
            font-size: 14px;
            font-family: inherit;
            color: var(--ink);
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            outline: none;
            border-color: #7B2D45;
            box-shadow: 0 0 0 3px rgba(123, 45, 69, 0.1);
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: #C4B9AD;
        }

        .form-group textarea {
            resize: vertical;
            min-height: 90px;
        }

        .form-group input[type="file"] {
            padding: 10px 16px;
            background: var(--bg);
            border-style: dashed;
            cursor: pointer;
        }

        .submit-btn {
            width: 100%;
            padding: 13px;
            background: linear-gradient(135deg, #7B2D45 0%, #9B3A5A 100%);
            color: #ffffff;
            border: none;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.25s;
            box-shadow: 0 4px 14px rgba(123, 45, 69, 0.25);
            margin-top: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .submit-btn:hover {
            background: linear-gradient(135deg, #5A1F30 0%, #7B2D45 100%);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(123, 45, 69, 0.35);
        }

        .submit-btn:active {
            transform: scale(0.97);
        }

        .submit-btn:disabled {
            opacity: 0.6;
            pointer-events: none;
        }

        /* ── URL Hero Bar ── */
        .url-hero-bar {
            background: var(--surface);
            border: 2px solid var(--border);
            border-radius: 12px;
            padding: 10px 14px;
            margin-bottom: 8px;
            position: relative;
            transition: border-color 0.25s, box-shadow 0.25s;
        }

        .url-hero-bar:focus-within {
            border-color: #7B2D45;
            box-shadow: 0 0 0 4px rgba(123, 45, 69, 0.08);
        }

        .url-hero-icon {
            position: absolute;
            left: 16px;
            top: 18px;
            color: #7B2D45;
            opacity: 0.6;
        }

        .url-hero-bar input {
            flex: 1;
            min-width: 0;
            border: none;
            background: transparent;
            font-size: 14px;
            padding: 2px 2px 2px 32px;
            color: var(--ink);
            font-family: 'Inter', sans-serif;
            outline: none;
        }

        .url-hero-bar input::placeholder {
            color: #B8A99A;
        }

        /* URL input top row: input + paste button sit side by side */
        .url-hero-input-row {
            display: flex;
            align-items: center;
            width: 100%;
        }

        .url-paste-btn {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 5px 10px;
            background: rgba(123, 45, 69, 0.08);
            border: 1.5px solid rgba(123, 45, 69, 0.2);
            border-radius: 8px;
            color: #7B2D45;
            font-size: 12px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: background 0.2s, border-color 0.2s;
            white-space: nowrap;
            margin-left: 6px;
        }
        .url-paste-btn:hover {
            background: rgba(123, 45, 69, 0.14);
            border-color: #7B2D45;
        }
        .url-paste-btn:active { transform: scale(0.96); }
        .url-paste-btn--success {
            background: rgba(34, 139, 34, 0.1);
            border-color: rgba(34, 139, 34, 0.4);
            color: #228b22;
        }

        .url-hero-hint {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 11px;
            color: #7B2D45;
            opacity: 0.7;
            margin-top: 8px;
            padding-left: 32px;
            animation: hintPulse 2s ease-in-out 1s 1;
        }

        @keyframes hintPulse {
            0%, 100% { opacity: 0.7; }
            50% { opacity: 1; }
        }

        /* ── OG Preview Card ── */
        .og-preview-card {
            display: flex;
            align-items: stretch;
            background: var(--surface);
            border: 1.5px solid var(--border);
            border-radius: 14px;
            overflow: hidden;
            margin-bottom: 12px;
            position: relative;
            animation: slideUp 0.3s ease;
        }

        .og-preview-card.hidden {
            display: none;
        }

        .og-preview-img {
            width: 90px;
            min-height: 80px;
            object-fit: cover;
            flex-shrink: 0;
            background: var(--bg);
        }

        .og-preview-body {
            padding: 12px 32px 12px 14px;
            flex: 1;
            min-width: 0;
        }

        .og-preview-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--ink);
            line-height: 1.3;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .og-preview-desc {
            font-size: 12px;
            color: var(--muted);
            margin-top: 3px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .og-preview-url {
            font-size: 11px;
            color: #7B2D45;
            margin-top: 4px;
            opacity: 0.7;
        }

        .og-preview-close {
            position: absolute;
            top: 6px;
            right: 8px;
            background: none;
            border: none;
            font-size: 18px;
            color: var(--muted);
            cursor: pointer;
            padding: 2px 6px;
            border-radius: 50%;
            line-height: 1;
        }

        .og-preview-close:hover {
            background: rgba(0,0,0,0.05);
            color: var(--ink);
        }

        @keyframes slideUp {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ── OG Loading Shimmer ── */
        .og-loading {
            display: flex;
            align-items: center;
            gap: 12px;
            background: var(--surface);
            border: 1.5px solid var(--border);
            border-radius: 14px;
            overflow: hidden;
            margin-bottom: 12px;
            padding: 14px;
        }

        .og-loading.hidden {
            display: none;
        }

        .og-loading-shimmer {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            background: linear-gradient(90deg, var(--bg) 25%, rgba(123,45,69,0.06) 50%, var(--bg) 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            flex-shrink: 0;
        }

        .og-loading-lines {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .shimmer-line {
            height: 12px;
            border-radius: 6px;
            background: linear-gradient(90deg, var(--bg) 25%, rgba(123,45,69,0.06) 50%, var(--bg) 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        .shimmer-line.w70 { width: 70%; }
        .shimmer-line.w50 { width: 50%; }

        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        /* ── URL Hero Divider ── */
        .url-hero-divider {
            display: flex;
            align-items: center;
            margin: 8px 0;
            gap: 12px;
        }

        .url-hero-divider::before,
        .url-hero-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border);
        }

        .url-hero-divider span {
            font-size: 11px;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        /* ── Details Toggle ── */
        .details-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 14px;
            margin: 4px 0 0;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 10px;
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        .details-toggle:active { opacity: 0.75; }
        .details-toggle-label {
            font-size: 13px;
            font-weight: 500;
            color: var(--muted);
        }
        .details-toggle-chevron {
            color: var(--muted);
            transition: transform 0.2s ease;
            flex-shrink: 0;
        }
        .details-body {
            margin-top: 2px;
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 12px 14px 4px;
            background: var(--surface);
        }
        .autofill-hint {
            font-size: 11px;
            color: var(--muted);
            margin: 4px 0 0;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .autofill-hint::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            background: var(--accent, #7B2D45);
            border-radius: 50%;
            flex-shrink: 0;
        }

        /* ── Form Sections ── */
        .form-section {
            background: var(--surface);
            border: 1.5px solid var(--border);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 16px;
        }

        .form-section .form-group:last-child {
            margin-bottom: 0;
        }

        .form-section-label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 700;
            color: #7B2D45;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 16px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border);
        }

        .form-section-label svg {
            opacity: 0.7;
        }

        /* ── New compact Add form styles ── */
        /* Title field: textarea that grows + optional clear button */
        .title-field-row {
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }

        .title-input-large {
            flex: 1;
            width: 100%;
            padding: 10px 13px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            border-radius: 10px;
            font-size: 15px;
            font-family: 'DM Serif Display', serif;
            color: var(--ink);
            transition: border-color 0.2s, box-shadow 0.2s;
            box-sizing: border-box;
            display: block;
            resize: none;
            overflow-y: hidden;
            overflow-x: hidden;
            line-height: 1.4;
            min-height: 44px;
            -webkit-appearance: none; /* iOS reset */
        }
        .title-input-large:focus {
            outline: none;
            border-color: #7B2D45;
            box-shadow: 0 0 0 3px rgba(123, 45, 69, 0.1);
        }
        .title-input-large::placeholder { color: #C4B9AD; }

        /* Clear prefill button — shown after OG auto-fill */
        .clear-prefill-btn {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 8px 10px;
            background: transparent;
            border: 1.5px solid var(--border);
            border-radius: 8px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 500;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            transition: color 0.2s, border-color 0.2s, background 0.2s;
            white-space: nowrap;
            margin-top: 0;
        }
        .clear-prefill-btn:hover {
            color: #7B2D45;
            border-color: #7B2D45;
            background: rgba(123, 45, 69, 0.05);
        }
        .clear-prefill-btn.hidden { display: none; }

        .form-group-category { margin-bottom: 10px; }

        .field-label-inline {
            display: block;
            font-size: 11px;
            font-weight: 600;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }
        .field-label-required { color: #7B2D45; }
        .field-label-optional {
            font-weight: 400;
            text-transform: none;
            letter-spacing: 0;
            font-size: 11px;
            color: #aaa;
        }

        .your-take-textarea {
            width: 100%;
            padding: 10px 13px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            border-radius: 10px;
            font-size: 13px;
            font-family: inherit;
            color: var(--ink);
            resize: none;           /* remove manual resize — JS handles growth */
            min-height: 72px;
            transition: border-color 0.2s, box-shadow 0.2s;
            box-sizing: border-box;
            display: block;
            overflow-y: hidden;
            -webkit-appearance: none;
            line-height: 1.5;
        }
        .your-take-textarea::placeholder {
            font-size: 13px;
            color: #C4B9AD;
            line-height: 1.5;
        }
        .your-take-textarea:focus {
            outline: none;
            border-color: #7B2D45;
            box-shadow: 0 0 0 3px rgba(123, 45, 69, 0.1);
        }
        .your-take-textarea::placeholder { color: #C4B9AD; }

        .address-group { margin-bottom: 10px; }

        /* Compact photo upload */
        .photo-upload-compact {
            flex-direction: row !important;
            padding: 9px 14px !important;
            gap: 8px !important;
            justify-content: flex-start !important;
        }
        .photo-upload-compact span { font-size: 13px; }

        /* ── Category Pills ── */
        .category-pills {
            display: flex;
            gap: 6px;
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none; /* Firefox */
        }
        .category-pills::-webkit-scrollbar { display: none; }

        .category-pill {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 7px 12px;
            border: 1.5px solid var(--border);
            border-radius: 20px;
            background: var(--bg);
            font-size: 13px;
            font-weight: 500;
            color: var(--muted);
            cursor: pointer;
            transition: all 0.2s;
            font-family: 'Inter', sans-serif;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .category-pill:hover {
            border-color: #7B2D45;
            color: #7B2D45;
        }

        .category-pill.active {
            background: rgba(123, 45, 69, 0.08);
            border-color: #7B2D45;
            color: #7B2D45;
            font-weight: 600;
        }

        .category-pill svg {
            flex-shrink: 0;
        }

        /* ── Photo Upload Zone ── */
        .photo-upload-zone {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            padding: 10px 14px;
            border: 1.5px dashed var(--border);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
            background: var(--bg);
        }

        .photo-upload-zone:hover {
            border-color: #7B2D45;
            background: rgba(123, 45, 69, 0.03);
        }

        .photo-upload-zone span {
            font-size: 13px;
            color: var(--muted);
        }

        /* ── Photo Preview with controls ── */
        .photo-preview-wrap {
            position: relative;
            margin-top: 12px;
            border-radius: 14px;
            overflow: hidden;
            border: 1.5px solid var(--border);
        }

        .photo-preview-wrap img {
            width: 100%;
            display: block;
            max-height: 200px;
            object-fit: cover;
        }

        .photo-preview-badge {
            position: absolute;
            top: 8px;
            left: 8px;
            background: rgba(0,0,0,0.55);
            color: #fff;
            font-size: 10px;
            font-weight: 600;
            padding: 3px 8px;
            border-radius: 6px;
            letter-spacing: 0.3px;
            text-transform: uppercase;
        }

        .photo-preview-actions {
            display: flex;
            gap: 0;
            border-top: 1px solid var(--border);
        }

        .photo-action-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 10px;
            background: var(--surface);
            border: none;
            font-size: 12px;
            font-weight: 500;
            color: var(--muted);
            cursor: pointer;
            transition: all 0.15s;
            font-family: 'Inter', sans-serif;
        }

        .photo-action-btn:first-child {
            border-right: 1px solid var(--border);
        }

        .photo-action-btn:hover {
            background: rgba(123, 45, 69, 0.05);
            color: #7B2D45;
        }

        .photo-action-remove:hover {
            background: rgba(220, 38, 38, 0.05);
            color: #dc2626;
        }

        /* ── Save Success Overlay ── */
        .save-success-overlay {
            position: fixed;
            inset: 0;
            background: rgba(250, 246, 238, 0.95);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            animation: fadeInOverlay 0.3s ease;
        }

        .save-success-overlay.hidden {
            display: none;
        }

        .save-success-content {
            text-align: center;
            animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .save-success-check {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(123, 45, 69, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
            animation: checkPulse 0.6s ease;
        }

        .save-success-content h3 {
            font-family: 'DM Serif Display', serif;
            font-size: 28px;
            color: var(--ink);
            margin: 0 0 6px;
        }

        .save-success-content p {
            color: var(--muted);
            font-size: 14px;
            margin: 0;
        }

        @keyframes fadeInOverlay {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes popIn {
            0% { transform: scale(0.8); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

        @keyframes checkPulse {
            0% { transform: scale(0); }
            50% { transform: scale(1.15); }
            100% { transform: scale(1); }
        }

        /* ── Mobile textarea / input improvements ── */
        .form-group textarea {
            resize: vertical;
            min-height: 70px;
            -webkit-appearance: none;
        }

        @media (max-width: 600px) {
            .form-group textarea {
                min-height: 60px;
                font-size: 16px; /* prevents iOS zoom */
            }
            .form-group input,
            .form-group select {
                font-size: 16px; /* prevents iOS zoom */
            }
            .input-form-container {
                padding: 0 16px 140px;
            }
            .form-section {
                padding: 16px;
            }
            .category-pill {
                font-size: 12px;
            }
        }

        /* Capture form header row */
        .capture-form-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .capture-form-header h2 {
            margin: 0 0 4px;
        }

        .capture-form-header p {
            margin: 0;
        }

        .clear-form-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 7px 12px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            border-radius: 10px;
            font-size: 13px;
            font-weight: 500;
            color: var(--muted);
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.2s;
            margin-top: 4px;
        }

        .clear-form-btn:hover {
            border-color: #7B2D45;
            color: #7B2D45;
            background: rgba(123, 45, 69, 0.05);
        }

        /* Address input row with detect button */
        .address-input-row {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .address-input-row input {
            flex: 1;
        }

        .detect-loc-btn {
            flex-shrink: 0;
            width: auto;
            min-width: 44px;
            height: 44px;
            padding: 0 12px;
            border: 1.5px solid var(--border);
            background: var(--surface);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            cursor: pointer;
            color: #7B2D45;
            transition: background 0.2s, border-color 0.2s;
        }
        .detect-loc-label {
            font-size: 12px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            color: #7B2D45;
        }

        .detect-loc-btn:hover {
            background: rgba(123, 45, 69, 0.07);
            border-color: #7B2D45;
        }

        .detect-loc-btn:active {
            transform: scale(0.95);
        }

        /* Address autocomplete dropdown */
        .address-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--surface);
            border: 1.5px solid var(--border);
            border-top: none;
            border-radius: 0 0 12px 12px;
            z-index: 100;
            box-shadow: 0 6px 20px rgba(0,0,0,0.12);
            overflow: hidden;
        }

        .address-dropdown.hidden {
            display: none;
        }

        .address-option {
            padding: 11px 16px;
            font-size: 14px;
            color: var(--ink);
            cursor: pointer;
            border-bottom: 1px solid var(--border);
            line-height: 1.4;
            transition: background 0.15s;
        }

        .address-option:last-child {
            border-bottom: none;
        }

        .address-option:hover,
        .address-option.focused {
            background: rgba(123, 45, 69, 0.07);
        }

        .address-option-main {
            font-weight: 500;
        }

        .address-option-sub {
            font-size: 12px;
            color: var(--muted);
            margin-top: 2px;
        }

        .address-searching {
            padding: 11px 16px;
            font-size: 13px;
            color: var(--muted);
        }

        .success-msg {
            background: var(--bg);
            color: #7B2D45;
            padding: 14px;
            border-radius: 12px;
            margin-bottom: 20px;
            text-align: center;
            font-weight: 500;
            border: 1px solid var(--border);
        }

        .error-msg {
            background: #fee2e2;
            color: #991b1b;
            padding: 14px;
            border-radius: 8px;
            margin-bottom: 20px;
            text-align: center;
        }

        /* Mobile */
        @media (max-width: 640px) {
            .discover-search-wrapper {
                border-radius: 12px;
                padding: 2px 4px 2px 14px;
            }

            .search-input {
                font-size: 14px;
            }

            .discover-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }

            .result-card {
                /* already flex-direction: column at all sizes */
            }

            .result-photo {
                width: 100%;
                height: 140px;
            }

            .page-title {
                font-size: 24px;
            }

            .landing-actions {
                gap: 10px;
            }

            .home-card {
                padding: 20px;
            }

            .home-card-icon {
                font-size: 40px;
            }

            /* New card styles for mobile */
            .top-pick-card {
                flex-direction: column;
                padding: 14px;
            }

            .top-pick-photo {
                width: 100%;
                height: 120px;
                margin-bottom: 10px;
            }

            .top-pick-badge {
                top: -6px;
                left: 12px;
                font-size: 9px;
                padding: 3px 8px;
            }

            .top-pick-title {
                font-size: 15px;
            }

            .more-options-scroll {
                gap: 10px;
            }

            .compact-photo {
                height: 70px;
            }

            .compact-title {
                font-size: 13px;
            }

            .compact-meta {
                font-size: 10px;
            }

            .compact-snippet {
                font-size: 11px;
                -webkit-line-clamp: 2;
            }

            .results-header-title {
                font-size: 12px;
            }

            /* Discovery card mobile */
            .discovery-card-photo {
                height: 110px;
            }

            .discovery-card-content {
                padding: 10px 10px 12px;
            }

            .discovery-card-title {
                font-size: 13px;
            }

            .discovery-tag {
                font-size: 9px;
                padding: 2px 6px;
            }

            .discovery-card-snippet {
                font-size: 11px;
            }
        }
/* ========================================
   AUTH SCREEN - Apple/Google Inspired
   ======================================== */

#loginScreen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    overflow-y: auto;
}

.auth-container {
    width: 100%;
    max-width: 400px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-brand {
    text-align: center;
    margin-bottom: 40px;
}

.auth-logo {
    margin-bottom: 20px;
}

.auth-title {
    font-size: 28px;
    font-weight: 700;
    color: #1d1d1f;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.auth-subtitle {
    font-size: 15px;
    color: #86868b;
    font-weight: 400;
    line-height: 1.5;
}

.auth-card {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* Tab Toggle */
.auth-tabs {
    display: flex;
    background: var(--mason);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 28px;
}

.auth-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #86868b;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.auth-tab.active {
    background: #ffffff;
    color: #1d1d1f;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Google Button */
.auth-btn-google {
    width: 100%;
    padding: 12px 16px;
    background: #ffffff;
    color: #1d1d1f;
    border: 1px solid #dadce0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
    font-family: inherit;
}

.auth-btn-google:hover {
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.auth-btn-google:active {
    transform: scale(0.98);
}

.auth-btn-google:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.google-icon {
    flex-shrink: 0;
}

/* Divider */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-divider span {
    padding: 0 16px;
    font-size: 13px;
    color: #86868b;
    font-weight: 400;
}

/* Form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-field label {
    font-size: 13px;
    font-weight: 500;
    color: #1d1d1f;
}

.auth-field input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #d2d2d7;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: #1d1d1f;
    background: #ffffff;
    transition: all 0.2s;
    -webkit-appearance: none;
    box-sizing: border-box;
}

.auth-field input:focus {
    outline: none;
    border-color: #7B2D45;
    box-shadow: 0 0 0 3px rgba(123, 45, 69, 0.15);
}

.auth-field input.field-error {
    border-color: #ff3b30;
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.1);
}

.auth-field input::placeholder {
    color: #c7c7cc;
}

/* Primary Button */
.auth-btn-primary {
    width: 100%;
    padding: 13px 16px;
    background: #7B2D45;
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    margin-top: 4px;
}

.auth-btn-primary:hover {
    background: #5A1F30;
}

.auth-btn-primary:active {
    transform: scale(0.98);
}

.auth-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Forgot Password Link */
.auth-link {
    background: none;
    border: none;
    color: #7B2D45;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
    padding: 4px 0;
    text-align: center;
    font-family: inherit;
    transition: color 0.2s;
}

.auth-link:hover {
    color: #5A1F30;
    text-decoration: underline;
}

/* Messages */
.auth-message {
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    animation: authFadeIn 0.3s ease;
}

.auth-message.error {
    background: #fff2f2;
    color: #ff3b30;
    border: 1px solid #ffcdd2;
}

.auth-message.success {
    background: #F5EDE8;
    color: #7B2D45;
    border: 1px solid #F5D5B5;
}

.auth-message.info {
    background: #F5EDE8;
    color: #7B2D45;
    border: 1px solid #F5D5B5;
}

@keyframes authFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Loading Spinner */
.auth-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: authSpin 0.6s linear infinite;
    vertical-align: middle;
}

.auth-btn-google .auth-spinner {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: #1d1d1f;
}

@keyframes authSpin {
    to { transform: rotate(360deg); }
}

/* Footer */
.auth-footer {
    margin-top: 32px;
    font-size: 12px;
    color: #c7c7cc;
    text-align: center;
}

/* Responsive */
@media (max-width: 480px) {
    .auth-container {
        padding: 32px 20px;
    }
    .auth-card {
        padding: 24px 20px;
        border: none;
        box-shadow: none;
    }
    .auth-title {
        font-size: 24px;
    }
}

/* ========================================
   HEADER
   ======================================== */
.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ========================================
   PROFILE PAGE
   ======================================== */
.profile-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 20px 120px;
}

@media (min-width: 768px) {
    .profile-container { max-width: 900px; padding: 20px 32px 120px; }
}

/* ── Profile page header ── */
.profile-page-header {
    padding-top: 0;
    margin-bottom: 4px;
}

/* ── Airbnb-style profile card ── */
.profile-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 20px;
    margin: 12px 0 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
}

.profile-card-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    min-width: 90px;
}

.profile-avatar-large {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7B2D45, #5A1F30);
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.profile-name {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    color: #7B2D45 !important;
    letter-spacing: -0.2px;
    text-align: center;
    margin-bottom: 2px;
    line-height: 1.2;
}

.profile-bio {
    font-size: 11px;
    color: var(--muted);
    text-align: center;
    line-height: 1.3;
    margin-top: 2px;
}

.profile-email {
    font-size: 11px;
    color: var(--muted);
    margin-top: 1px;
}

.profile-card-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-stat-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 0;
}

.profile-stat-divider {
    height: 1px;
    background: #f0f0f0;
    width: 100%;
}

.profile-stat-number {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
}

.profile-stat-label {
    font-size: 13px;
    color: var(--muted);
    font-weight: 400;
}

/* Edit profile link */
.profile-edit-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    color: #7B2D45;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 0;
    margin: 2px auto 4px;
    font-family: inherit;
    transition: opacity 0.2s;
}

.profile-edit-link:hover {
    opacity: 0.8;
}

/* Trust Tier Labels */
.tier-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.tier-label h3 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: var(--ink);
}

.tier-badge {
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tier-badge.inner {
    background: #FAF6EE;
    color: #7B2D45;
}

.tier-badge.outer {
    background: #E8F0FE;
    color: #4A90D9;
}

.tier-badge.pending {
    background: #fef3c7;
    color: #92400e;
}

.tier-desc {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 12px;
    line-height: 1.4;
}

/* Airbnb-style 2 profile boxes */
.profile-boxes-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0 4px;
}

.profile-box {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.18s, box-shadow 0.18s;
    -webkit-tap-highlight-color: transparent;
}

.profile-box:active {
    transform: scale(0.97);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.pbox-visuals {
    width: 100%;
    height: 96px;
    background: #F5F0E8;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pbox-icon-placeholder {
    color: #9c8474;
    opacity: 0.7;
}

.pbox-thumbs-stack,
.pbox-avatars-stack {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.pbox-thumb {
    position: absolute;
    width: 52px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    background: #e8e0d4;
}

.pbox-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pbox-thumb-emoji {
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pbox-thumb:nth-child(1) { transform: rotate(-8deg) translate(-18px, 4px); z-index: 1; }
.pbox-thumb:nth-child(2) { transform: rotate(4deg) translate(8px, -4px); z-index: 2; }
.pbox-thumb:nth-child(3) { transform: rotate(-2deg) translate(-4px, 8px); z-index: 3; }

.pbox-avatar {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.pbox-avatar:nth-child(1) { transform: translate(-22px, 0); z-index: 1; }
.pbox-avatar:nth-child(2) { transform: translate(4px, -8px); z-index: 2; }
.pbox-avatar:nth-child(3) { transform: translate(24px, 6px); z-index: 3; }

.pbox-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

/* Invite Button */
.invite-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border-radius: 16px;
    border: 2px dashed var(--border);
    background: transparent;
    color: #7B2D45;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 12px;
}

.invite-btn:hover {
    border-color: #7B2D45;
    background: #FAF6EE;
}

.logout-btn {
    width: 100%;
    padding: 14px;
    background: #ffffff;
    color: #dc2626;
    border: 1px solid #fecaca;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 32px;
    transition: all 0.2s;
}

.logout-btn:hover {
    background: #fef2f2;
    border-color: #dc2626;
}

/* ══════════════════════════════════════════
   PROFILE V2 — Airbnb-style redesign
══════════════════════════════════════════ */

/* Identity card */
.profile-card-v2 {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 16px;
    margin: 8px 0 4px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    position: relative;
}

.pcv2-avatar-wrap {
    flex: 0 0 auto;
}

.pcv2-identity {
    flex: 1;
    min-width: 0;
}

.pcv2-identity .profile-name {
    text-align: left;
    margin-bottom: 3px;
    font-size: 22px;
}

.pcv2-identity .profile-bio {
    text-align: left;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pcv2-edit-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #f5f0e8;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #7B2D45;
    transition: background 0.18s;
    padding: 0;
}
.pcv2-edit-btn:hover { background: #ede8e0; }

/* Stats row — horizontal, 4 cols */
.profile-stats-row {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 14px;
    padding: 14px 8px;
    margin: 10px 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    gap: 0;
}

.profile-stat-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pstat-kb .profile-stat-number {
    color: #7B2D45;
}

.pstat-kb .profile-stat-label {
    font-size: 10px;
    letter-spacing: -0.1px;
}

.pstat-divider {
    width: 1px;
    height: 32px;
    background: #f0ece4;
    flex-shrink: 0;
}

/* pbox label row with count */
.pbox-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 12px;
    background: #fff;
}

.pbox-count {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
}

/* Settings list rows */
.profile-settings-list {
    margin-top: 16px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.profile-settings-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 15px 16px;
    background: none;
    border: none;
    border-bottom: 1px solid #f5f2ee;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

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

.profile-settings-row:hover {
    background: #faf8f5;
}

.profile-settings-row--danger {
    color: #dc2626;
}

.profile-settings-row--danger svg {
    stroke: #dc2626;
}

/* ══════════════════════════════════════════
   PROFILE SLIDE-UP DRAWERS (Circle + Saves)
══════════════════════════════════════════ */
.profile-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.28s ease;
}

.profile-drawer.is-open {
    pointer-events: auto;
    opacity: 1;
}

.profile-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
}

.profile-drawer-sheet {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 100%;
    max-width: 600px;
    max-height: 88vh;
    height: 88vh;
    background: var(--bg, #FAF8F5);
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
    overflow: hidden;
}

@media (min-width: 768px) {
    .profile-drawer-sheet {
        max-width: 640px;
        border-radius: 20px 20px 0 0;
    }
}

.profile-drawer.is-open .profile-drawer-sheet {
    transform: translateX(-50%) translateY(0);
}

.profile-drawer-handle {
    width: 36px;
    height: 4px;
    background: #d1cbc3;
    border-radius: 2px;
    margin: 10px auto 0;
    flex-shrink: 0;
}

.profile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 12px;
    flex-shrink: 0;
    border-bottom: 1px solid #f0ece4;
}

.profile-drawer-title {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.profile-drawer-close {
    background: #f0ece4;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink);
    padding: 0;
    transition: background 0.15s;
}
.profile-drawer-close:hover { background: #e5e0d8; }

.profile-drawer-body {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    padding: 16px 18px max(40px, env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Settings row — right-aligned value label */
.profile-settings-value {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: #7B2D45;
    background: #FAF0F3;
    padding: 2px 8px;
    border-radius: 6px;
}

/* Language drawer list */
.lang-drawer-desc {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 16px;
    line-height: 1.5;
}

.lang-drawer-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lang-drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    background: #ffffff;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.lang-drawer-item:hover {
    background: #f5f0e8;
}

.lang-drawer-item.is-active {
    background: #FAF0F3;
    color: #7B2D45;
    font-weight: 600;
}

.lang-drawer-item.is-active::after {
    content: '✓';
    margin-left: auto;
    font-size: 14px;
    color: #7B2D45;
}

/* Hide old header language button — superseded by profile settings row */
#headerLangWrap {
    display: none !important;
}

/* ── Close account (subtle) ── */
.close-account-subtle {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid #f3f4f6;
    text-align: center;
}

.close-account-desc {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 6px;
}

.close-account-link {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    text-decoration: underline;
    padding: 0;
    transition: color 0.15s;
}

.close-account-link:hover {
    color: #6b7280;
}

/* ── Delete confirmation overlay ── */
.delete-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.delete-confirm-box {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 24px;
    max-width: 380px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}

.delete-confirm-title {
    font-size: 20px;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 12px;
}

.delete-confirm-body {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
}

.delete-confirm-input {
    width: 100%;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

.delete-confirm-input:focus {
    border-color: #dc2626;
}

.delete-account-msg {
    font-size: 13px;
    margin-top: 8px;
    color: #dc2626;
}

.delete-confirm-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.delete-confirm-cancel {
    flex: 1;
    padding: 12px;
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    color: #374151;
    transition: background 0.2s;
}

.delete-confirm-cancel:hover { background: #e5e7eb; }

.delete-confirm-go {
    flex: 1;
    padding: 12px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.delete-confirm-go:hover { background: #b91c1c; }
.delete-confirm-go:disabled { opacity: 0.5; cursor: not-allowed; }

/* ========================================
   REACTION BUTTON - Card photo overlay (🙌)
   ======================================== */
.react-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 2;
    box-shadow: 0 1px 6px rgba(0,0,0,0.10);
}

.react-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.react-btn.endorsed {
    background: #7B2D45;
    border-color: #7B2D45;
    box-shadow: 0 2px 8px rgba(123, 45, 69, 0.3);
}

.react-icon {
    font-size: 14px;
    line-height: 1;
}

.bookmark-icon {
    display: block;
}

.react-count {
    font-size: 11px;
    font-weight: 700;
    color: #5a5a5a;
    line-height: 1;
}

.react-btn.endorsed .react-count {
    color: #ffffff;
}

/* ========================================
   REACTIONS - Drawer (single bookmark)
   ======================================== */
.drawer-reactions {
    margin-bottom: 14px;
}

/* Save row: avatars on left, save button on right */
.drawer-save-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
}

.drawer-save-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

/* Stacked avatar initials */
.endorse-avatars {
    display: flex;
    flex-direction: row-reverse; /* stack right-to-left for overlap effect */
}

.endorse-avatar-chip {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--wb);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg);
    margin-right: -8px;
    flex-shrink: 0;
}

.endorse-avatars .endorse-avatar-chip:last-child {
    margin-right: 0;
}

.endorse-names {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.4;
}

.endorse-names strong {
    color: var(--ink);
    font-weight: 600;
}

.drawer-bookmark-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid var(--border);
    background: #ffffff;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

.drawer-bookmark-btn:hover {
    border-color: #7B2D45;
    background: #F5EDE8;
}

.drawer-bookmark-btn.active {
    border-color: #7B2D45;
    background: #F5EDE8;
}

.bookmark-icon-lg {
    flex-shrink: 0;
}

.drawer-bookmark-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    line-height: 1;
}

.drawer-bookmark-btn.active .drawer-bookmark-label {
    color: #7B2D45;
}

/* ========================================
   EDIT DISCOVERY - Drawer inline edit
   ======================================== */
.drawer-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.drawer-title-row .drawer-title {
    flex: 1;
    margin: 0;
}

.drawer-edit-btn {
    flex-shrink: 0;
    background: none;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    padding: 6px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 2px;
}

.drawer-edit-btn:hover {
    border-color: #7B2D45;
    background: #F5EDE8;
}

.edit-form {
    padding: 8px 0;
}

.edit-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin: 12px 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.edit-label:first-child {
    margin-top: 0;
}

.edit-input,
.edit-textarea,
.edit-select {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    background: #ffffff;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.edit-input:focus,
.edit-textarea:focus,
.edit-select:focus {
    outline: none;
    border-color: #7B2D45;
}

.edit-textarea {
    resize: vertical;
    min-height: 60px;
}

.edit-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.edit-cancel-btn {
    flex: 1;
    padding: 12px;
    border: 1.5px solid var(--border);
    background: #ffffff;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    color: var(--muted);
}

.edit-save-btn {
    flex: 2;
    padding: 12px;
    border: none;
    background: #7B2D45;
    color: #ffffff;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.edit-save-btn:hover {
    background: #5A1F30;
}

.edit-save-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Delete item zone (inside edit form) ── */
.edit-delete-zone {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.edit-delete-btn {
    background: none;
    border: none;
    color: #dc2626;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 8px;
    text-decoration: underline;
    opacity: 0.8;
    transition: opacity 0.15s;
}

.edit-delete-btn:hover { opacity: 1; }

.edit-delete-confirm {
    margin-top: 14px;
    background: #fff5f5;
    border: 1px solid #fca5a5;
    border-radius: 10px;
    padding: 14px 16px;
}

.edit-delete-warning {
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
    margin-bottom: 12px;
}

.edit-delete-confirm-actions {
    display: flex;
    gap: 8px;
}

.edit-delete-cancel-btn {
    flex: 1;
    padding: 10px;
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    color: #374151;
    transition: background 0.2s;
}

.edit-delete-cancel-btn:hover { background: #e5e7eb; }

.edit-delete-go-btn {
    flex: 1;
    padding: 10px;
    background: #dc2626;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}

.edit-delete-go-btn:hover { background: #b91c1c; }
.edit-delete-go-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Note edit inline */
.note-edit {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    padding: 0 4px;
    opacity: 0.6;
}

.note-edit:hover {
    opacity: 1;
}

.note-edit-input {
    width: 100%;
    padding: 8px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    box-sizing: border-box;
}

.note-edit-input:focus {
    outline: none;
    border-color: #7B2D45;
}

.note-edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    justify-content: flex-end;
}

.note-edit-cancel,
.note-edit-save {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.note-edit-cancel {
    background: var(--border);
    color: var(--muted);
}

.note-edit-save {
    background: #7B2D45;
    color: #ffffff;
}

/* ========================================
   PROFILE - My Saves List
   ======================================== */
.profile-section-divider {
    height: 1px;
    background: var(--border);
    margin: 16px 0 12px;
}

#profileMode .home-section-header {
    margin-bottom: 8px;
}
#profileMode .home-section-header h2 {
    font-size: 17px;
}

.profile-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 16px;
}

/* My Saves wrapper with scroll arrows */
.profile-saves-wrap {
    position: relative;
}

.ps-scroll-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(42,30,20,0.10);
    transition: opacity 0.2s, background 0.15s, border-color 0.15s;
    padding: 0;
}
.ps-scroll-arrow:hover {
    background: #7B2D4510;
    border-color: #7B2D45;
    color: #7B2D45;
}
.ps-scroll-left { left: -4px; }
.ps-scroll-right { right: -4px; }

@media (max-width: 767px) {
    .ps-scroll-arrow { display: none !important; }
}

/* My Saves - Horizontal Scrolling Cards */
.my-endorsements-list-horizontal {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.my-endorsements-list-horizontal::-webkit-scrollbar {
    display: none;
}

.my-endorsements-empty {
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    padding: 12px 0;
    width: 100%;
}

.my-endorse-card {
    flex-shrink: 0;
    width: 140px;
    background: #ffffff;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 0.5px 2px rgba(0,0,0,0.04);
}

.my-endorse-card:hover {
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
}

.my-endorse-card-photo {
    width: 100%;
    height: 80px;
    background: var(--mason);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.my-endorse-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-endorse-placeholder {
    font-size: 24px;
}

.my-endorse-card-title {
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-endorse-card-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #7B2D45;
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
}

/* ========================================
   RECENTLY VIEWED - Discover page
   ======================================== */
.recently-viewed-section {
    margin-bottom: 20px;
    padding-top: 0;
    overflow: visible;
}

.recently-viewed-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.recently-viewed-header a {
    font-size: 13px;
    color: #7B2D45;
    text-decoration: none;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.recently-viewed-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    padding-top: 6px;
    padding-bottom: 4px;
    padding-left: 2px;
    -webkit-overflow-scrolling: touch;
}

.recently-viewed-row::-webkit-scrollbar {
    display: none;
}

.rv-item {
    flex-shrink: 0;
    text-align: center;
    cursor: pointer;
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rv-thumb-wrap {
    position: relative;
    width: 56px;
    margin: 0 auto 4px;
}

.rv-remove {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--muted);
    color: #ffffff;
    border: 2px solid #ffffff;
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 3;
    padding: 0;
}

.rv-item:hover .rv-remove {
    opacity: 1;
}

.rv-remove:hover {
    background: #dc2626;
}

.rv-thumb {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--mason);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s, transform 0.2s;
}

.rv-item:hover .rv-thumb {
    box-shadow: 0 4px 12px rgba(123, 45, 69, 0.15);
    transform: translateY(-1px);
}

.rv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rv-placeholder {
    font-size: 20px;
}

.rv-label {
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========================================
   PROFILE - View / Edit mode
   ======================================== */
.profile-bio {
    font-size: 13px;
    color: var(--muted);
    margin-top: 4px;
    line-height: 1.4;
}

.profile-edit-btn {
    width: 100%;
    padding: 12px;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.profile-edit-btn:hover {
    border-color: #7B2D45;
    color: #7B2D45;
}

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

.profile-edit-header h3 {
    font-size: 18px;
    font-weight: 600;
}

.profile-edit-close {
    background: none;
    border: none;
    color: #7B2D45;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
}

/* TAB BAR - Profile Avatar (legacy override — now inline in tab bar section) */

/* ===== PHASE B: You + Friends Collapsible Section ===== */
.friends-section {
    margin: 20px 0 8px;
    border-top: 1px solid var(--border);
    padding-top: 4px;
}

.friends-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 8px 0;
    user-select: none;
}

.friends-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.friends-section-arrow {
    font-size: 11px;
    color: #9ca3af;
    transition: transform 0.2s;
}

.friends-section-body {
    overflow: hidden;
    max-height: 2000px;
    transition: max-height 0.3s ease;
    padding-top: 4px;
}

.friends-section-body.collapsed {
    max-height: 0;
    padding-top: 0;
}

.notes-loading {
    font-size: 13px;
    color: #9ca3af;
    padding: 8px 0;
}

/* ===== PHASE B: Community Notes (inside You + Friends) ===== */
.community-notes {
    margin: 12px 0 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
}

/* Collapsible toggle button */
.community-notes-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 6px 0;
    cursor: pointer;
}

.community-notes-label {
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comments-chevron {
    color: #9ca3af;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.community-notes-toggle.expanded .comments-chevron {
    transform: rotate(180deg);
}

.community-notes-body {
    padding-top: 10px;
}

.notes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.notes-empty {
    font-size: 13px;
    color: #9ca3af;
    text-align: left;
    padding: 4px 0 12px;
}

.note-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.note-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #DDD8D2;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.note-body {
    flex: 1;
    min-width: 0;
}

.note-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.note-author {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.note-time {
    font-size: 11px;
    color: #9ca3af;
}

.note-delete {
    margin-left: auto;
    background: none;
    border: none;
    color: #DDD8D2;
    font-size: 16px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.note-delete:hover {
    color: #ef4444;
}

.note-text {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.4;
    word-wrap: break-word;
}

.note-input-wrap {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.note-input {
    flex: 1;
    border: 1px solid #DDD8D2;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    outline: none;
    transition: border-color 0.2s;
}

.note-input:focus {
    border-color: #7B2D45;
}

.note-submit-btn {
    background: var(--muted);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.note-submit-btn:hover {
    background: #4b5563;
}

/* ===== PHASE B: Notification Badge ===== */
.tab-item {
    position: relative;
}

/* .notif-badge — retired; dot is now .header-notif-dot on the header avatar */
.notif-badge { display: none !important; }

/* ===== PHASE B: Notification List ===== */
.notifications-list {
    margin-top: 20px;
}

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

.notifications-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.notif-mark-all {
    background: none;
    border: none;
    color: #7B2D45;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
}

.notif-mark-all:hover {
    text-decoration: underline;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 2px;
    position: relative;
}

.notif-delete {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
    margin-left: auto;
    align-self: center;
}

.notif-item:hover .notif-delete {
    opacity: 1;
}

.notif-delete:hover {
    color: #dc2626;
}

/* On mobile always show delete button */
@media (max-width: 640px) {
    .notif-delete { opacity: 0.5; }
}

.notif-item:hover {
    background: var(--mason);
}

.notif-item.unread {
    background: #F5EDE8;
}

.notif-item.unread:hover {
    background: #FAF6EE;
}

.notif-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 2px;
}

.notif-body {
    flex: 1;
    min-width: 0;
}

.notif-message {
    font-size: 13px;
    color: #374151;
    line-height: 1.4;
}

.notif-time {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 2px;
}

/* ===== PHASE C: Friends Network ===== */

.friends-subsection-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Friend search */
.friends-search-container {
    position: relative;
    margin-bottom: 10px;
}

.friends-search-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    font-size: 15px;
    background: var(--bg);
    outline: none;
    transition: border-color 0.2s;
}

.friends-search-input:focus {
    border-color: #7B2D45;
    background: #fff;
}

.friend-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 50;
    max-height: 240px;
    overflow-y: auto;
    margin-top: 4px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.search-result-item:hover {
    background: var(--mason);
}

.search-result-item:first-child {
    border-radius: 12px 12px 0 0;
}

.search-result-item:last-child {
    border-radius: 0 0 12px 12px;
}

.search-result-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7B2D45, #9B4D65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

.search-result-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-email {
    font-size: 12px;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-action {
    flex-shrink: 0;
}

.search-result-action button {
    padding: 6px 14px;
    border-radius: 20px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.add-friend-btn {
    background: #7B2D45;
    color: #fff;
}

.add-friend-btn:hover {
    background: #5A1F30;
}

.add-friend-btn:disabled {
    background: #DDD8D2;
    cursor: default;
}

.search-result-status {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.search-result-status.pending {
    background: #fef3c7;
    color: #92400e;
}

.search-result-status.added {
    background: #FAF6EE;
    color: #7A3B10;
}

/* Friend request cards */
.friend-requests-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.friend-request-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #F5EDE8, #F5EDE8);
    border: 1px solid #F5D5B5;
    border-radius: 14px;
}

.friend-request-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7B2D45, #5A1F30);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

.friend-request-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.friend-request-info {
    flex: 1;
    min-width: 0;
}

.friend-request-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.friend-request-time {
    font-size: 12px;
    color: #9ca3af;
}

.friend-request-email {
    font-size: 12px;
    color: #9ca3af;
}

.friend-request-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.friend-request-actions button {
    padding: 6px 14px;
    border-radius: 20px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.accept-btn {
    background: #7B2D45;
    color: #fff;
}

.accept-btn:hover {
    background: #5A1F30;
}

.reject-btn {
    background: var(--mason);
    color: var(--muted);
}

.reject-btn:hover {
    background: var(--border);
}

/* Friends list — person-row layout */
.friends-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 16px;
}

.friend-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    text-align: left;
    transition: background 0.15s;
}

.friend-card:last-child {
    border-bottom: none;
}

.friend-card:hover {
    background: rgba(123, 45, 69, 0.04);
    box-shadow: none;
}

.friend-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7B2D45, #9B4D65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    overflow: visible;
    flex-shrink: 0;
    position: relative;
}

/* Trust ring indicator around friend avatar */
.friend-card-avatar::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px dashed #4A90D9;
    pointer-events: none;
}

.friend-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.friend-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.friend-card-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-card-common {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.2;
    min-height: 14px;
}

.friend-card-common:not(:empty) {
    color: #7B2D45;
    font-weight: 500;
}

/* Empty state */
.friends-empty-state {
    text-align: center;
    padding: 20px;
    color: #9ca3af;
    font-size: 14px;
}

/* Privacy teaser — replaces personal story for non-friends */
.privacy-teaser .drawer-story-text {
    font-style: italic;
    color: #9ca3af;
    background: var(--bg);
}

.privacy-teaser .drawer-story-label::after {
    content: ' 🔒';
}

.privacy-teaser-card {
    font-style: italic;
    color: #9ca3af !important;
    font-size: 12px;
}

/* ===== PHASE D: Polish ===== */

/* Friend card ⋮ menu */
.friend-card {
    position: relative;
}

.friend-card-menu-btn {
    position: relative;
    top: auto;
    right: auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s;
    z-index: 2;
    flex-shrink: 0;
    margin-left: auto;
}

.friend-card-menu-btn:hover {
    background: var(--mason);
    color: #374151;
}

.friend-card-menu {
    position: absolute;
    top: 28px;
    right: 4px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 10;
    overflow: hidden;
    min-width: 100px;
}

.friend-card-menu button {
    display: block;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    text-align: left;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: background 0.15s;
}

.friend-card-menu button:hover {
    background: var(--mason);
}

.friend-card-menu button:last-child {
    color: #ef4444;
}

.friend-card-menu button:last-child:hover {
    background: #fef2f2;
}

/* Toast notification */
.app-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #1f2937;
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    max-width: 90%;
    text-align: center;
}

.app-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ========================================
   FRIEND PROFILE DRAWER
   ======================================== */
.friend-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0 20px;
    gap: 12px;
}

.friend-profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7B2D45, #9B4D65);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
}

.friend-profile-name {
    font-family: 'DM Serif Display', serif;
    font-size: 22px;
    margin: 0;
    color: var(--ink);
}

.friend-profile-count {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 12px;
}

.friend-profile-loading,
.friend-profile-empty {
    text-align: center;
    color: var(--muted);
    padding: 32px 0;
    font-size: 14px;
}

/* Common saves section in friend drawer */
.friend-common-section {
    margin-bottom: 16px;
    padding: 12px;
    background: #F5EDE8;
    border-radius: 14px;
}

.friend-common-header {
    font-size: 13px;
    font-weight: 600;
    color: #7B2D45;
    margin-bottom: 10px;
}

.friend-common-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.friend-common-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
    max-width: 180px;
}

.friend-common-chip:hover {
    border-color: #7B2D45;
    background: #fff;
}

.friend-common-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.friend-common-emoji {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}

.friend-common-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-discoveries-toggle {
    text-align: center;
    padding: 8px 0;
}

.friend-show-discoveries-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.friend-show-discoveries-btn:hover {
    border-color: #7B2D45;
    color: #7B2D45;
    background: #7B2D4508;
}

.friend-profile-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.friend-item-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.friend-item-card:hover {
    border-color: #7B2D45;
    box-shadow: 0 2px 8px rgba(123, 45, 69, 0.1);
}

.friend-item-photo-wrap {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
}

.friend-item-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.friend-item-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5EDE8;
    font-size: 24px;
}

.friend-item-info {
    flex: 1;
    min-width: 0;
}

.friend-item-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 4px;
}

.friend-item-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.4;
    margin-bottom: 4px;
}

.friend-item-type {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #7B2D45;
    background: #F5EDE8;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: capitalize;
}

/* ========================================
   SEARCH RESULTS BOTTOM SHEET
   ======================================== */
.search-sheet-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.search-sheet-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.search-bottom-sheet {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    z-index: 999;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.search-bottom-sheet.half-open {
    transform: translateY(calc(100% - 45vh));
}

.search-bottom-sheet.full-open {
    transform: translateY(0);
}

.sheet-drag-handle {
    padding: 12px 0 4px;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.sheet-handle-bar {
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
}

.sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 12px;
    border-bottom: 1px solid var(--border);
}

.sheet-title {
    font-family: 'DM Serif Display', serif;
    font-size: 18px;
    color: var(--ink);
}

.sheet-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 8px;
}

.sheet-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 32px;
    -webkit-overflow-scrolling: touch;
}

.sheet-reopen-link {
    color: #7B2D45;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

/* Onboarding welcome banner */
.onboarding-banner {
    background: linear-gradient(135deg, #FAF6EE, #EAE0D2);
    border: 1px solid #F5D5B5;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity 0.3s;
}

.onboarding-icon {
    font-size: 28px;
}

.onboarding-text strong {
    font-size: 16px;
    color: #C06A30;
    display: block;
    margin-bottom: 4px;
}

.onboarding-text p {
    font-size: 14px;
    color: #7B2D45;
    margin: 0;
    line-height: 1.4;
}

.onboarding-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.onboarding-btn {
    padding: 8px 18px;
    border-radius: 20px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.onboarding-btn-primary {
    background: #7B2D45;
    color: #fff;
}

.onboarding-btn-primary:hover {
    background: #5A1F30;
}

.onboarding-btn-secondary {
    background: rgba(255,255,255,0.7);
    color: #7B2D45;
}

.onboarding-btn-secondary:hover {
    background: rgba(255,255,255,0.9);
}

/* Welcome modal overlay */
.onb-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 16, 10, 0.58);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: opacity 0.3s ease;
}
.onb-modal-card {
    background: #FAF6EE;
    border-radius: 22px;
    padding: 36px 36px 30px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 32px 80px rgba(26, 16, 10, 0.28);
    animation: onb-slide-in 0.38s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
@keyframes onb-slide-in {
    from { opacity: 0; transform: translateY(22px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* Close button */
.onb-close {
    position: absolute;
    top: 16px; right: 18px;
    background: none; border: none;
    font-size: 18px; color: #9A8A7A;
    cursor: pointer; padding: 4px 6px; line-height: 1;
    border-radius: 6px; transition: color 0.15s, background 0.15s;
}
.onb-close:hover { color: #2A1E14; background: rgba(42,30,20,0.06); }
/* Title + subtitle */
.onb-modal-title {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 26px;
    font-weight: 400;
    color: #2A1E14;
    line-height: 1.15;
    margin-bottom: 5px;
}
.onb-modal-title .onb-brand { color: #7B2D45; }
.onb-modal-subtitle {
    font-size: 14px;
    color: #7A6A5A;
    line-height: 1.5;
    margin-bottom: 20px;
    font-weight: 400;
}
/* Body copy */
.onb-modal-body {
    font-size: 14px;
    color: #4A3728;
    line-height: 1.75;
    margin-bottom: 16px;
}
/* Search hint chip */
.onb-search-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(123, 45, 69, 0.06);
    border: 1px solid rgba(123, 45, 69, 0.16);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
}
.onb-search-icon {
    color: #7B2D45;
    flex-shrink: 0;
    opacity: 0.65;
}
.onb-search-label {
    font-size: 13px;
    color: #4A3728;
    font-weight: 400;
}
.onb-search-label em {
    font-style: italic;
    color: #2A1E14;
    font-weight: 500;
}
.onb-search-arrow {
    margin-left: auto;
    font-size: 13px;
    color: #7B2D45;
    opacity: 0.5;
    flex-shrink: 0;
}
/* Founding note */
.onb-founding-note {
    font-size: 11px;
    color: #9A8A7A;
    line-height: 1.65;
    margin-bottom: 20px;
    padding-left: 1px;
}
/* Section divider */
.onb-divider {
    height: 1px;
    background: #EAE0D2;
    margin: 0 0 20px;
}
/* Save section */
.onb-save-body {
    font-size: 13px;
    color: #7A6A5A;
    line-height: 1.75;
    margin-bottom: 14px;
}
.onb-save-body strong {
    color: #2A1E14;
    font-weight: 600;
}
/* Privacy badge */
.onb-privacy {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11.5px;
    color: #9A8A7A;
    line-height: 1.6;
    margin-bottom: 26px;
    padding: 10px 14px;
    background: rgba(42, 30, 20, 0.04);
    border-radius: 9px;
}
.onb-privacy-icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: #9A8A7A;
    opacity: 0.6;
}
/* Actions */
.onb-modal-actions {
    display: flex;
    gap: 10px;
}
.onb-btn-primary {
    flex: 1;
    background: #7B2D45;
    color: #FAF6EE;
    border: none;
    border-radius: 10px;
    padding: 14px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    letter-spacing: 0.01em;
}
.onb-btn-primary:hover {
    background: #5A1F30;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(123,45,69,0.3);
}
.onb-btn-secondary {
    background: transparent;
    color: #7B2D45;
    border: 1.5px solid #EAE0D2;
    border-radius: 10px;
    padding: 14px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.onb-btn-secondary:hover { border-color: #7B2D45; background: rgba(123,45,69,0.04); }
@media (max-width: 480px) {
    .onb-modal-card { padding: 28px 22px 24px; border-radius: 18px; }
    .onb-modal-title { font-size: 23px; }
    .onb-modal-actions { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════
   ONBOARDING FLOW — 4-step full-screen overlay
   March 2026
   ══════════════════════════════════════════════════════════ */
#onboardingOverlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(26, 16, 10, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.onb-screen {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: onbFadeIn 0.35s ease;
}
@keyframes onbFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.onb-screen-inner {
    background: #FAF6EE;
    border-radius: 24px;
    padding: 40px 36px 32px;
    max-width: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
}
.onb-logo-mark {
    margin-bottom: 20px;
}
.onb-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(123,45,69,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.onb-invite-avatar {
    margin-bottom: 16px;
}
.onb-heading {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 26px;
    color: #2A1E14;
    line-height: 1.2;
    margin: 0 0 14px;
}
.onb-heading .onb-brand { color: #7B2D45; }
.onb-body {
    font-size: 14px;
    color: #6B5744;
    line-height: 1.6;
    margin: 0 0 24px;
}
.onb-body em {
    font-style: italic;
    color: #7B2D45;
}
/* Primary CTA — full width */
#onboardingOverlay .onb-btn-primary {
    width: 100%;
    background: #7B2D45;
    color: #FAF6EE;
    border: none;
    border-radius: 12px;
    padding: 14px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 10px;
}
#onboardingOverlay .onb-btn-primary:hover { background: #5A1F30; }
/* Skip link */
.onb-btn-skip {
    background: none;
    border: none;
    color: #9A8A7A;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    padding: 4px 8px;
    margin-bottom: 20px;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s;
}
.onb-btn-skip:hover { color: #2A1E14; }
/* Progress dots */
.onb-dots {
    display: flex;
    gap: 7px;
    justify-content: center;
    margin-top: 4px;
}
.onb-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #DDD0B8;
    transition: background 0.2s;
}
.onb-dot-active {
    background: #7B2D45;
}
@media (max-width: 480px) {
    .onb-screen-inner {
        padding: 32px 24px 28px;
        border-radius: 20px;
    }
    .onb-heading { font-size: 22px; }
}

/* Enhanced friends empty state */
.friends-empty-icon {
    font-size: 32px;
    margin-bottom: 6px;
}

.friends-empty-state p {
    margin: 0;
}

.friends-empty-state p:first-of-type {
    font-weight: 600;
    color: var(--muted);
}

.friends-empty-hint {
    font-size: 13px;
    color: #9ca3af;
    margin-top: 4px !important;
}

/* ========================================
   SAVED PAGE
   ======================================== */
.saved-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 16px 20px 120px;
}

.my-endorsements-list-vertical {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.saved-item-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

.saved-item-card:last-child { border-bottom: none; }

.saved-item-card:hover { background: rgba(123, 45, 69,0.04); }

.saved-item-photo {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--mason);
    display: flex;
    align-items: center;
    justify-content: center;
}

.saved-item-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.saved-item-placeholder {
    font-size: 24px;
}

.saved-item-content {
    flex: 1;
    min-width: 0;
}

.saved-item-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
}

.saved-item-meta {
    font-size: 12px;
    color: #9ca3af;
    display: flex;
    gap: 8px;
}

.saved-item-desc {
    font-size: 13px;
    color: var(--muted);
    margin-top: 4px;
    line-height: 1.3;
}

.saved-item-remove {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    color: #9ca3af;
    border: none;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.saved-item-remove:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Friend search empty state */
.friend-search-empty {
    padding: 16px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
}

/* Mobile tweaks */
@media (max-width: 640px) {
    .rv-item { width: 56px; }
    .rv-thumb-wrap { width: 48px; }
    .rv-thumb { width: 48px; height: 48px; }
    .rv-remove { opacity: 0.7; }
    .rv-label { font-size: 9px; }
    .my-endorse-card { width: 110px; }
    .my-endorse-card-photo { height: 70px; }
    /* .notif-badge retired — dot is on header avatar */
    .friends-list { flex-direction: column; }
    .friend-card { padding: 10px 0; }
    .friend-card-avatar { width: 40px; height: 40px; font-size: 14px; }
    .friend-request-actions button { padding: 5px 10px; font-size: 11px; }
    .onboarding-banner { padding: 14px; }
    .home-save-card { width: 140px; }
    .home-save-delete { opacity: 0.7; }
    .activity-avatar { width: 36px; height: 36px; font-size: 14px; }
    .saved-item-photo { width: 56px; height: 56px; }
}

/* ========================================
   LAUNCHER HOME (Simple mode)
   ======================================== */
.launcher-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 768px) {
    .launcher-page { max-width: 900px; padding: 20px 32px 16px; }
}

.launcher-greeting {
    line-height: 1.2;
}

.launcher-greeting h1 {
    /* font-size controlled by .page-heading global token */
    margin: 0;
    line-height: 1.2;
}

.launcher-name {
    color: #7B2D45 !important;
}

.launcher-sub-greeting {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--muted);
    margin: 3px 0 0;
    letter-spacing: 0;
}

.launcher-mode-toggle,
.feed-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 0 4px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
}

.launcher-tiles {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.launcher-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Base tile */
.launcher-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: transform 0.15s, box-shadow 0.15s;
}
.launcher-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(42,30,20,0.12);
}
.launcher-tile:active {
    transform: translateY(0);
}

/* Hero search tile */
.tile-search {
    background: linear-gradient(135deg, #7B2D45, #5A1F30);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(123, 45, 69, 0.28);
}
.tile-search .launcher-tile-label {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
}
.tile-search .launcher-tile-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.72);
}
.tile-search .launcher-tile-arrow {
    margin-left: auto;
    color: rgba(255,255,255,0.7);
    flex-shrink: 0;
}
.tile-search .launcher-tile-icon {
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Add & Browse tiles (half-width, vertical) */
.tile-add,
.tile-browse {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 16px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    box-shadow: 0 2px 8px rgba(42,30,20,0.06);
}
.tile-add:hover, .tile-browse:hover {
    border-color: #7B2D45;
}
.tile-add .launcher-tile-icon,
.tile-browse .launcher-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tile-add .launcher-tile-icon {
    background: #F5EDE8;
    color: #7B2D45;
}
.tile-browse .launcher-tile-icon {
    background: #EDE8F5;
    color: #4B2D7B;
}
.tile-add .launcher-tile-label,
.tile-browse .launcher-tile-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}
.tile-add .launcher-tile-sub,
.tile-browse .launcher-tile-sub {
    font-size: 11px;
    color: var(--muted);
}

.launcher-tile-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Profile button — small secondary */
.launcher-profile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 1px solid var(--border);
    border-radius: 40px;
    padding: 8px 16px 8px 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    align-self: center;
    transition: border-color 0.15s, color 0.15s;
}
.launcher-profile-btn:hover {
    border-color: #7B2D45;
    color: #7B2D45;
}
.launcher-profile-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7B2D45, #5A1F30);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   HOME STYLE PICKER BANNER
   ======================================== */
.style-picker-banner {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 18px;
    margin: 12px 20px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(42,30,20,0.08);
}

.style-picker-title {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 18px;
    color: var(--ink);
    margin-bottom: 4px;
}

.style-picker-sub {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 16px;
}

.style-picker-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.style-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--bg);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
}
.style-option:hover {
    border-color: #7B2D45;
    background: #F5EDE8;
}
.style-option-icon { font-size: 24px; }
.style-option-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}
.style-option-desc {
    font-size: 11px;
    color: var(--muted);
}

.style-picker-dismiss {
    display: block;
    width: 100%;
    background: none;
    border: none;
    font-size: 13px;
    color: var(--muted);
    cursor: pointer;
    padding: 4px;
    font-family: inherit;
}
.style-picker-dismiss:hover { color: var(--ink); }

/* ========================================
   PROFILE HOME STYLE TOGGLE
   ======================================== */
.profile-style-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

.profile-style-label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.profile-style-pills {
    display: flex;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 3px;
    gap: 2px;
}

.style-pill {
    padding: 4px 14px;
    border-radius: 16px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background: none;
    color: var(--muted);
    transition: all 0.15s;
}
.style-pill.active {
    background: #7B2D45;
    color: #ffffff;
}

/* ══════════════════════════════════════════
   DISCOVER / MAP  —  NEW MOCKUP STYLES
══════════════════════════════════════════ */

/* ── Discover|Map toggle pill — shared styles ── */
.dc-view-toggle {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}
.dc-toggle-pill {
    display: inline-flex;
    background: rgba(250, 246, 238, 0.95);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 3px;
    gap: 2px;
}
.dc-toggle-btn {
    padding: 7px 20px;
    border-radius: 17px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.01em;
    cursor: pointer;
    background: transparent;
    color: var(--muted);
    transition: all 0.18s;
    white-space: nowrap;
}
.dc-toggle-btn.active {
    background: #7B2D45;
    color: #fff;
    box-shadow: 0 1px 4px rgba(123,45,69,0.25);
}

/* (Floating map toggle removed — toggle now lives in the sticky header) */

/* ── Collections screen ── */
.discover-collections-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.discover-scroll-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    align-self: center;
    box-sizing: border-box;
}
@media(min-width: 480px) {
    .discover-scroll-wrap { padding: 20px 20px 0; }
}
@media(min-width: 768px) {
    .discover-scroll-wrap { max-width: 900px; padding: 20px 32px 0; }
}
.discover-scroll-wrap::-webkit-scrollbar { display: none; }

/* Pinned search bar — sits directly below the header, never scrolls.
   Full width so the background fills edge-to-edge on all screen sizes. */
.dc-search-pinned {
    flex-shrink: 0;
    background: var(--bg, #FAF6EE);
    border-bottom: 1px solid var(--border-light);
    width: 100%;
    box-sizing: border-box;
}

/* Inline variant — inside the scroll wrap, flows with content, no sticky behaviour */
.dc-search-inline {
    border-bottom: none;
    background: transparent;
    width: 100%;
    margin-bottom: 4px;
    box-sizing: border-box;
}
.dc-search-inline .dc-search-row,
.dc-search-inline .recently-viewed-section,
.dc-search-inline .active-filters-bar {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}
.dc-search-inline .dc-search-row { padding-top: 0; padding-bottom: 0; }
/* Inner content mirrors discover-scroll-wrap centering */
.dc-search-pinned .dc-search-row,
.dc-search-pinned .recently-viewed-section,
.dc-search-pinned .active-filters-bar {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}
@media(min-width: 480px) {
    .dc-search-pinned .dc-search-row,
    .dc-search-pinned .recently-viewed-section,
    .dc-search-pinned .active-filters-bar {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media(min-width: 768px) {
    .dc-search-pinned .dc-search-row,
    .dc-search-pinned .recently-viewed-section,
    .dc-search-pinned .active-filters-bar {
        max-width: 900px;
        padding-left: 32px;
        padding-right: 32px;
    }
}
.dc-search-pinned .dc-search-row { padding-top: 5px; padding-bottom: 5px; }
.dc-search-pinned .recently-viewed-section { padding-top: 4px; margin-bottom: 5px; }
.dc-search-pinned .active-filters-bar { margin-bottom: 0; padding-bottom: 5px; }
.discover-header { padding: 8px 0 3px; }
.dc-heading {
    /* font-size controlled by .page-heading global token */
    line-height: 1.15;
}
/* .dc-subheading now inherits all styles from .page-subtitle */
.dc-subheading {
    margin-top: 3px;
}

/* Search row */
.dc-search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
    width: 100%;
    box-sizing: border-box;
}
.dc-search-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1.5px solid var(--border-light);
    border-radius: 50px;
    padding: 10px 16px;
    transition: border-color 0.22s, box-shadow 0.22s;
}
.dc-search-bar:focus-within {
    border-color: #7B2D45;
    box-shadow: 0 0 0 3px rgba(123,45,69,0.10);
}
.dc-search-svg {
    width: 16px; height: 16px;
    stroke: var(--text-secondary);
    flex-shrink: 0;
    transition: stroke 0.2s;
}
.dc-search-bar:focus-within .dc-search-svg { stroke: #7B2D45; }
.dc-search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: #2A1E14;
    outline: none;
}
.dc-search-bar input::placeholder { color: var(--text-secondary); }

.dc-filter-btn {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--surface);
    border: 1.5px solid var(--border-light);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    position: relative;
    transition: background 0.22s;
}
.dc-filter-btn:hover { background: var(--border-light); }
.dc-filter-btn svg {
    width: 17px; height: 17px;
    stroke: #2A1E14; stroke-width: 2; fill: none;
}

/* Section header */
.dc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.dc-section-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #2A1E14;
}
.dc-group-toggle {
    display: none;
}

/* Sort control */
.dc-sort-wrap {
    flex-shrink: 0;
}
.dc-sort-select {
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236A5A4A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    border: 1.5px solid var(--border-light);
    border-radius: 8px;
    padding: 5px 28px 5px 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: #6A5A4A;
    cursor: pointer;
    outline: none;
    transition: border-color 0.18s;
}
.dc-sort-select:focus { border-color: #7B2D45; }

/* Back row */
.dc-back-row {
    margin-bottom: 12px;
}

/* Empty state */
.dc-empty-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px 32px;
    gap: 12px;
}
.dc-empty-icon {
    width: 64px; height: 64px;
    background: var(--surface);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 4px;
}
.dc-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: #2A1E14;
    letter-spacing: -0.2px;
}
.dc-empty-body {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 280px;
}
.dc-empty-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 240px;
    margin-top: 8px;
}
.dc-empty-btn {
    width: 100%;
    padding: 12px 20px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity 0.18s;
}
.dc-empty-btn:hover { opacity: 0.85; }
.dc-empty-btn-primary {
    background: #7B2D45;
    color: #FAF6EE;
}
.dc-empty-btn-secondary {
    background: var(--surface);
    border: 1.5px solid var(--border);
    color: #2A1E14;
}
.dc-group-btn {
    padding: 4px 10px;
    border-radius: 6px;
    border: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-secondary);
    background: transparent;
    transition: all 0.18s;
}
.dc-group-btn.active {
    background: #2A1E14;
    color: #EDE0CC;
}

/* Back button */
.dc-back-btn {
    font-size: 13px;
    color: #7B2D45;
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    padding: 0;
}

/* ── Smart section tabs (WhatsApp-style pills) ── */
.dc-section-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
    margin-bottom: 0;
    -webkit-overflow-scrolling: touch;
}
.dc-section-tabs::-webkit-scrollbar { display: none; }
.dc-stab {
    flex-shrink: 0;
    padding: 6px 14px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #6A5A4A;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    white-space: nowrap;
    line-height: 1.3;
    -webkit-tap-highlight-color: transparent;
}
.dc-stab:hover {
    border-color: #7B2D45;
    color: #7B2D45;
    background: rgba(123,45,69,0.04);
}
.dc-stab.active {
    background: #7B2D45;
    border-color: #7B2D45;
    color: #FAF6EE;
    font-weight: 600;
}
.dc-stab.active:hover { background: #5A1F30; border-color: #5A1F30; color: #FAF6EE; }

/* ── Divider between tabs and Surprise me ── */
.dc-tabs-divider {
    display: block;
    flex-shrink: 0;
    width: 1px;
    height: 20px;
    background: var(--border);
    align-self: center;
    opacity: 0.7;
}

/* ── Surprise Me button ── */
.dc-surprise-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: #D4622A;
    border: none;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.3;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 1px 4px rgba(212,98,42,0.25);
    -webkit-tap-highlight-color: transparent;
}
.dc-surprise-btn:hover {
    background: #be561f;
    box-shadow: 0 2px 8px rgba(212,98,42,0.35);
}
.dc-surprise-btn--active {
    transform: scale(0.93);
    background: #be561f;
}

/* ── Surprise strip ── */
.dc-surprise-strip {
    background: rgba(123,45,69,0.04);
    border: 1.5px solid rgba(123,45,69,0.15);
    border-radius: 14px;
    padding: 14px 14px 12px;
    margin-bottom: 18px;
    animation: surpriseIn 0.25s ease;
}
@keyframes surpriseIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dc-surprise-strip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.dc-surprise-strip-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #7B2D45;
    font-family: 'Inter', sans-serif;
}
.dc-surprise-strip-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.dc-surprise-action-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: transparent;
    border: 1.5px solid rgba(123,45,69,0.3);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #7B2D45;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.dc-surprise-action-btn:hover {
    background: rgba(123,45,69,0.08);
    border-color: #7B2D45;
}
.dc-surprise-close-btn {
    padding: 4px 8px;
}
/* Surprise grid — always a horizontal scroll row, 3 cards visible at a time */
.dc-surprise-grid-wrap {
    position: relative;
}
.dc-surprise-grid {
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
    margin-top: 0;
}
.dc-surprise-grid::-webkit-scrollbar { display: none; }
.dc-surprise-grid .hf-card {
    flex: 0 0 calc(33.33% - 8px);
    min-width: 180px;
}
/* Scroll arrows — desktop only */
.dc-sg-arrow {
    display: none; /* shown via JS when needed */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(42,30,20,0.12);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    padding: 0;
}
.dc-sg-arrow:hover {
    background: rgba(123,45,69,0.06);
    border-color: #7B2D45;
    color: #7B2D45;
}
.dc-sg-arrow-left  { left: -14px; }
.dc-sg-arrow-right { right: -14px; }
/* Mobile: hide arrows, touch scroll is enough */
@media (max-width: 639px) {
    .dc-sg-arrow { display: none !important; }
    .dc-surprise-grid .hf-card { flex: 0 0 200px; }
}

/* ── Discover category chips (hidden — replaced by section tabs) ── */
.dc-chips-row {
    display: none;
}
.dc-chips-row::-webkit-scrollbar { display: none; }
.dc-chip {
    flex-shrink: 0;
    padding: 7px 16px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #6A5A4A;
    cursor: pointer;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
    white-space: nowrap;
}
.dc-chip:hover {
    border-color: #7B2D45;
    color: #7B2D45;
    background: rgba(123, 45, 69, 0.04);
}
.dc-chip.active {
    background: #7B2D45;
    border-color: #7B2D45;
    color: #FAF6EE;
    font-weight: 600;
}
.dc-chip.active:hover {
    background: #5A1F30;
    border-color: #5A1F30;
}

/* ── Chip count badge ── */
.dc-chip-count {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.6;
    margin-left: 1px;
}
.dc-chip.active .dc-chip-count { opacity: 0.75; }

/* ── Map chip ── */
.dc-chip-map {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}
.dc-chip-map svg {
    width: 13px; height: 13px;
    stroke: currentColor;
    fill: none;
}

/* ── Friends filter bubbles ── */
.dc-friends-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 0 14px;
}
.dc-friends-row::-webkit-scrollbar { display: none; }

.dc-friend-bubble {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 2px;
    border-radius: 12px;
    transition: transform 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.dc-friend-bubble:active { transform: scale(0.93); }
.dc-friend-img {
    width: 42px; height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid var(--border-light);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dc-friend-bubble.active .dc-friend-img {
    border-color: #7B2D45;
    box-shadow: 0 0 0 2px rgba(123,45,69,0.18);
}
.dc-friend-initial {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: 2.5px solid var(--border-light);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dc-friend-bubble.active .dc-friend-initial {
    border-color: #7B2D45;
    box-shadow: 0 0 0 2px rgba(123,45,69,0.18);
}
.dc-friend-name {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
    max-width: 54px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    line-height: 1.2;
}
.dc-friend-bubble.active .dc-friend-name {
    color: #7B2D45;
    font-weight: 600;
}

/* ── Distance quick pills ── */
.dc-distance-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 14px;
}
.dc-dist-label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var(--muted);
}
.dc-dist-label svg { stroke: var(--muted); }
.dc-dist-pill {
    flex-shrink: 0;
    padding: 5px 13px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #6A5A4A;
    cursor: pointer;
    transition: all 0.18s;
    -webkit-tap-highlight-color: transparent;
}
.dc-dist-pill:hover { border-color: #7B2D45; color: #7B2D45; }
.dc-dist-pill.active {
    background: #7B2D45;
    border-color: #7B2D45;
    color: #FAF6EE;
    font-weight: 600;
}

/* ── Discover search results count bar ── */
.dc-results-count {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 4px 0 8px;
}
.dc-results-count strong {
    color: var(--ink);
    font-weight: 600;
}

/* ── Collection cards grid ── */
.dc-collections-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}
@media(min-width: 768px) {
    .dc-collections-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media(min-width: 1100px) {
    .dc-collections-grid { grid-template-columns: 1fr 1fr 1fr; }
}

.dc-coll-card {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(42,30,20,0.09), 0 0.5px 2px rgba(42,30,20,0.05);
    transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), box-shadow 0.22s;
    opacity: 0;
    animation: dcCardIn 0.42s ease forwards;
}
.dc-coll-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(42,30,20,0.14), 0 2px 6px rgba(42,30,20,0.07);
}
.dc-coll-card.featured .dc-coll-img { height: 250px; }
@keyframes dcCardIn { to { opacity: 1; } }

.dc-coll-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    background: var(--border-light);
}
/* Slightly taller cards on larger screens */
@media(min-width: 768px) {
    .dc-coll-img { height: 200px; }
}
/* No-photo fallback */
.dc-coll-placeholder {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    background: linear-gradient(135deg, #EDE0CC 0%, #D4C8B0 100%);
}
@media(min-width: 768px) {
    .dc-coll-placeholder { height: 200px; }
}
.dc-coll-card.featured .dc-coll-placeholder { height: 220px; }
@media(min-width: 768px) {
    .dc-coll-card.featured .dc-coll-placeholder { height: 250px; }
}

.dc-coll-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(42,30,20,0.78) 0%, rgba(42,30,20,0.05) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
}
.dc-coll-title {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 20px;
    font-weight: 400;
    color: white;
    line-height: 1.2;
    letter-spacing: -0.2px;
}
.dc-coll-card.featured .dc-coll-title { font-size: 24px; }

.dc-coll-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.dc-coll-avatars { display: flex; }
.dc-coll-av {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700;
    color: white;
    border: 2px solid #C9A227;
    margin-left: -6px;
}
.dc-coll-av:first-child { margin-left: 0; }
.dc-coll-count {
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(4px);
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    color: white;
}

.scroll-end-pad { height: 20px; }

/* ══ MAP SCREEN ══ */
#discoverMode {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
#discoverMode.hidden { display: none !important; }

/* When full-screen map is active — override body padding and lock scroll */
body.map-view-open {
    padding-bottom: 0 !important;
    overflow: hidden;
}
body.map-view-open .content {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    overflow: hidden;
    /* iOS Safari: ensure the content column doesn't collapse */
    min-height: 0;
    flex: 1 1 auto;
}

/* Map topbar: back button + title + filter */
.dmap-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    background: #FAF6EE;
    border-bottom: 1px solid #EAE0D2;
    flex-shrink: 0;
    z-index: 25;
}
.dmap-back-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #7B2D45;
    padding: 4px 8px 4px 2px;
}
.dmap-back-btn:hover { color: #5A1F30; }
.dmap-topbar-title {
    font-size: 14px;
    font-weight: 600;
    color: #2A1E14;
}
.dmap-topbar-filter-btn {
    position: relative;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #7B2D45;
    padding: 4px 2px 4px 8px;
}
.dmap-topbar-filter-btn:hover { color: #5A1F30; }
.dmap-topbar-filter-badge {
    position: absolute;
    top: 0;
    right: -2px;
    background: #7B2D45;
    color: #fff;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.discover-map-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: #FAF6EE;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.dmap-inner {
    flex: 1;
    display: flex;
    overflow: hidden;
    position: relative;
    min-height: 0;
    height: 100%;
}

/* Desktop side panel */
.dmap-side-panel {
    display: none;
}
@media(min-width: 768px) {
    .dmap-side-panel {
        display: flex;
        flex-direction: column;
        width: 280px;
        flex-shrink: 0;
        background: var(--bg, #FAF6EE);
        border-right: 1px solid var(--border-light);
        overflow: hidden;
        z-index: 10;
    }
}
.dmap-panel-search {
    padding: 8px 12px 8px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}
.dmap-panel-search-bar {
    display: flex; align-items: center; gap: 8px;
    background: var(--surface);
    border: 1.5px solid var(--border-light);
    border-radius: 50px;
    padding: 9px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.dmap-panel-search-bar svg {
    width: 14px; height: 14px;
    stroke: var(--text-secondary);
    stroke-width: 2; fill: none; flex-shrink: 0;
}
.dmap-panel-search-bar input {
    flex: 1; border: none; background: transparent;
    font-family: inherit; font-size: 13px; color: #2A1E14; outline: none;
}
.dmap-panel-search-bar input::placeholder { color: var(--text-secondary); }
.dmap-panel-filter-row {
    display: flex; align-items: center; justify-content: space-between;
}
.dmap-panel-count { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.dmap-panel-filter-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1.5px solid var(--border-light);
    background: var(--surface);
    cursor: pointer;
    font-size: 12px; font-weight: 600; color: #2A1E14;
    font-family: inherit;
}
.dmap-panel-filter-btn svg {
    width: 13px; height: 13px;
    stroke: #2A1E14; stroke-width: 2; fill: none;
}
.dmap-panel-list {
    flex: 1; overflow-y: auto; padding: 8px 0;
    scrollbar-width: thin; scrollbar-color: var(--border-light) transparent;
}
.dmap-panel-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.18s;
}
.dmap-panel-item:last-child { border-bottom: none; }
.dmap-panel-item:hover { background: var(--surface); }
.dmap-panel-item.active-item {
    background: var(--surface);
    border-left: 3px solid #7B2D45;
    padding-left: 11px;
}
.dmap-pi-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dmap-pi-info { flex: 1; min-width: 0; }
.dmap-pi-name {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 14px; color: #2A1E14;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dmap-pi-meta {
    font-size: 11px; color: var(--text-secondary); margin-top: 1px;
}
.dmap-pi-meta strong { color: #2A1E14; font-weight: 600; }
.dmap-pi-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.dmap-pi-dist { font-size: 11px; color: var(--text-secondary); font-weight: 500; }
.dmap-pi-saves { font-size: 11px; font-weight: 700; color: #7B2D45; }

/* Map area — position:relative so children can use position:absolute */
.dmap-area {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    min-height: 200px;
    height: 100%;
}
/* Leaflet map fills the area absolutely — most reliable cross-browser */
#discoverMap {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1;
    /* iOS Safari sometimes won't render transforms without this */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Floating search bar — mobile only */
.dmap-float-search {
    position: absolute;
    top: 0; left: 8px; right: 8px;
    z-index: 400;
    display: flex; align-items: center; gap: 8px;
    padding-top: 6px;
}
@media(min-width: 768px) { .dmap-float-search { display: none; } }

.dmap-float-bar {
    flex: 1;
    display: flex; align-items: center; gap: 8px;
    background: rgba(250,246,238,0.96);
    border: 1px solid var(--border-light);
    border-radius: 50px;
    padding: 10px 14px;
    box-shadow: 0 2px 16px rgba(42,30,20,0.18);
    backdrop-filter: blur(10px);
}
.dmap-float-bar svg {
    width: 15px; height: 15px;
    stroke: var(--text-secondary); stroke-width: 2; fill: none; flex-shrink: 0;
}
.dmap-float-bar input {
    flex: 1; border: none; background: transparent;
    font-family: inherit; font-size: 13px; color: #2A1E14; outline: none;
}
.dmap-float-bar input::placeholder { color: var(--text-secondary); }

.dmap-float-filter {
    flex-shrink: 0; width: 42px; height: 42px;
    border-radius: 12px;
    background: rgba(250,246,238,0.96);
    border: 1px solid var(--border-light);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(42,30,20,0.14);
    backdrop-filter: blur(10px);
}
.dmap-float-filter svg {
    width: 17px; height: 17px;
    stroke: #2A1E14; stroke-width: 2; fill: none;
}

/* ── Map controls: zoom + locate group ── */
.dmap-controls {
    position: absolute;
    right: 14px;
    bottom: 145px; /* sits above card strip */
    z-index: 500;
    display: flex;
    flex-direction: column;
    background: rgba(250,246,238,0.97);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(42,30,20,0.18);
    backdrop-filter: blur(10px);
    overflow: hidden;
}
@media(min-width: 768px) {
    .dmap-controls { bottom: 24px; }
}
.dmap-ctrl-btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    cursor: pointer;
    transition: background 0.15s;
}
.dmap-ctrl-btn:hover { background: rgba(123,45,69,0.07); }
.dmap-ctrl-btn svg {
    width: 16px; height: 16px;
    stroke: #2A1E14; stroke-width: 2.5; fill: none;
}
.dmap-locate-btn svg {
    stroke: #7B2D45 !important;
}
.dmap-locate-btn.locating svg { stroke: #2979FF !important; }
.dmap-ctrl-divider {
    height: 1px;
    background: var(--border-light);
    margin: 0 8px;
}

/* Bottom card strip — mobile only */
.dmap-cards-wrap {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 400;
    padding-bottom: 10px;
    background: linear-gradient(to top, rgba(42,30,20,0.50) 0%, transparent 100%);
    pointer-events: none;
}
@media(min-width: 768px) { .dmap-cards-wrap { display: none; } }

.dmap-cards-label {
    padding: 0 20px 5px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: rgba(255,255,255,0.75);
    pointer-events: none;
}
.dmap-cards-strip {
    display: flex; gap: 10px;
    overflow-x: auto; padding: 0 20px 2px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none;
    pointer-events: all;
}
.dmap-cards-strip::-webkit-scrollbar { display: none; }

/* Compact map card */
.dmap-card {
    flex-shrink: 0; width: 200px;
    background: var(--surface, #ffffff);
    border-radius: 12px;
    border: 1.5px solid var(--border-light);
    scroll-snap-align: start;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(42,30,20,0.09);
    transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
    padding: 10px 12px;
}
.dmap-card.active-card {
    border-color: #7B2D45;
    box-shadow: 0 0 0 2px rgba(123,45,69,0.15), 0 4px 18px rgba(42,30,20,0.12);
}
.dmap-card:active { transform: scale(0.97); }

.dmc-header { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.dmc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dmc-name {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 14px; color: #2A1E14;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.dmc-dist { font-size: 10px; color: var(--text-secondary); font-weight: 600; flex-shrink: 0; }

.dmc-by { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.dmc-avatar {
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 7px; font-weight: 700; color: white;
    border: 1.5px solid #C9A227; flex-shrink: 0;
}
.dmc-by-text { font-size: 11px; color: var(--text-secondary); }
.dmc-by-text strong { color: #2A1E14; font-weight: 600; }

.dmc-odin-row {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; color: #7B2D45;
}
.dmc-odin-row svg { width: 10px; height: 10px; stroke: #7B2D45; stroke-width: 2.5; fill: none; }

/* Leaflet popup override */
.leaflet-popup-content-wrapper {
    border-radius: 10px !important; padding: 0 !important;
    box-shadow: 0 4px 18px rgba(42,30,20,0.18) !important;
    border: 1px solid var(--border-light) !important;
    background: var(--surface, #fff) !important;
}
.leaflet-popup-content { margin: 0 !important; width: auto !important; }
.leaflet-popup-tip-container { display: none !important; }
.leaflet-popup-close-button { display: none !important; }
.odin-pop {
    padding: 10px 13px; min-width: 175px; max-width: 220px;
    font-family: 'Inter', sans-serif;
}
.odin-pop-cat { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.odin-pop-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.odin-pop-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.odin-pop-name {
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 15px; color: #2A1E14; line-height: 1.2; margin-bottom: 5px;
}
.odin-pop-by { display: flex; align-items: center; gap: 5px; }
.odin-pop-av {
    width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 7px; font-weight: 700; color: white;
    border: 1.5px solid #C9A227; flex-shrink: 0;
}
.odin-pop-by-text { font-size: 11px; color: var(--text-secondary); }
.odin-pop-by-text strong { color: #2A1E14; }

/* ── Popup "View details" button ── */
.odin-pop-view {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 7px 0;
    border: none;
    border-top: 1px solid var(--border);
    background: transparent;
    color: #7B2D45;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    letter-spacing: 0.02em;
    transition: color 0.15s;
}
.odin-pop-view:hover { color: #5a1e32; }

/* ── Mobile drawer: slide up from bottom ── */
@media (max-width: 767px) {
    .detail-drawer {
        top: auto !important;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100% !important;
        max-width: 100vw !important;
        height: 92vh;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -4px 30px rgba(42, 30, 20, 0.18);
        transform: translateY(100%) !important;
    }
    .detail-drawer.open {
        transform: translateY(0) !important;
    }
    /* Pull handle indicator */
    .drawer-handle {
        display: block;
        width: 36px;
        height: 4px;
        background: var(--border);
        border-radius: 2px;
        margin: 0 auto 4px;
    }
    .drawer-header {
        border-bottom: none;
        padding: 10px 16px 6px;
        flex-direction: column;
        align-items: stretch;
    }
    .drawer-hero {
        height: 220px;
    }
    .drawer-body {
        padding: 0 18px 24px;
    }
    .drawer-title {
        font-size: 22px;
    }
}

/* ── Privacy Toggle ── */
/* ── Visibility block (Add + Edit forms) ── */
.visibility-group {
    border-top: 1px solid var(--border);
    padding-top: 10px;
}
.visibility-label-row {
    margin-bottom: 6px;
}
.visibility-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.07em;
    color: var(--muted);
    text-transform: uppercase;
}
.visibility-status {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}
.visibility-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 0.2s;
}
.privacy-toggle-row:active .visibility-icon {
    transform: scale(0.9);
}
.visibility-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.visibility-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    transition: color 0.2s;
}
.visibility-desc {
    font-size: 12px;
    color: var(--muted);
    transition: color 0.2s;
}

.privacy-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    cursor: pointer;
}
.privacy-toggle-text {
    font-size: 14px;
    color: var(--muted);
    transition: color 0.25s;
}
.privacy-toggle-text.active {
    color: var(--wb);
    font-weight: 500;
}
.privacy-toggle-track {
    width: 44px;
    height: 24px;
    background: var(--border);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.25s;
    flex-shrink: 0;
}
.privacy-toggle-track.active {
    background: var(--wb);
}
.privacy-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.privacy-toggle-track.active .privacy-toggle-knob {
    transform: translateX(20px);
}

/* ── Visibility Selector ── */
.vis-selector {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}
.vis-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    cursor: pointer;
    transition: all 0.18s;
    font-family: 'Inter', sans-serif;
}
.vis-option:hover {
    border-color: #7B2D45;
}
.vis-option.active {
    border-color: #7B2D45;
    background: rgba(123,45,69,0.07);
}
.vis-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--muted);
    transition: color 0.18s;
}
.vis-option.active .vis-label {
    color: #7B2D45;
    font-weight: 600;
}
.vis-hint {
    font-size: 11px;
    color: var(--muted);
    margin: 5px 0 0;
    line-height: 1.4;
    transition: color 0.2s, background 0.2s;
}
.vis-hint--friends {
    color: var(--wb, #7B2D45);
    background: rgba(123, 45, 69, 0.06);
    border-radius: 6px;
    padding: 6px 8px;
    margin-top: 7px;
}

/* Private badge on discovery cards */
.private-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--wb);
    background: rgba(123, 45, 69, 0.08);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

/* ── Search progress messages ── */
.search-status-text {
    display: inline;
    font-size: 13px;
    color: var(--muted);
    font-style: italic;
    font-family: 'Inter', sans-serif;
    transition: opacity 0.2s ease;
    margin-left: 4px;
}


/* ── Auth form — compact on mobile ── */
@media (max-width: 780px) {
    .auth-form { gap: 12px; }
    .auth-field { gap: 4px; }
    .auth-field label { font-size: 12px; }
    .auth-field input { padding: 10px 12px; font-size: 14px; }
    .auth-btn-primary { padding: 12px 16px; font-size: 14px; margin-top: 2px; }
    .auth-btn-google { padding: 11px 16px; font-size: 14px; }
}

/* ── Launcher + Circle Feed + Continue Exploring combined home ── */
#launcherHome {
    display: flex;
    flex-direction: column;
    padding-bottom: 100px; /* space above tab bar */
}

.launcher-circle-feed {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 4px 20px 12px;
}

#launcherRecentSection {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 4px 20px 4px;
}

@media (min-width: 768px) {
    .launcher-circle-feed { max-width: 900px; padding: 4px 32px 12px; }
    #launcherRecentSection { max-width: 900px; padding: 4px 32px 4px; }
}

/* Fix: neutralise the negative bleed margins inside launcher sections
   so cards don't clip at the left edge */
.launcher-circle-feed .home-feed-scroll,
#launcherRecentSection .home-recent-scroll {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}
.launcher-circle-feed .home-feed-scroll::before,
.launcher-circle-feed .home-feed-scroll::after,
#launcherRecentSection .home-recent-scroll::before,
#launcherRecentSection .home-recent-scroll::after {
    display: none;
}

/* ── Circle feed "Show more" button ── */
.circle-feed-show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 12px;
    padding: 11px 20px;
    background: transparent;
    border: 1.5px solid var(--border, #EAE0D2);
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted, #9A8A7A);
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.circle-feed-show-more:hover {
    border-color: #7B2D45;
    color: #7B2D45;
    background: rgba(123,45,69,0.04);
}
.circle-feed-show-more svg {
    flex-shrink: 0;
}

/* ── Odin Trust Layers: Extended Circle styles ── */

/* Card badge for extended circle items */
.extended-circle-badge {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* Drawer: anonymous byline */
.drawer-meta-by.extended-circle-anon {
    color: #6b7280;
    font-style: italic;
}

/* Drawer: extended circle story block (soft locked state) */
.drawer-quote-extended {
    border-left: 2px solid rgba(59, 130, 246, 0.25);
    background: rgba(59, 130, 246, 0.04);
}

.drawer-quote-extended .drawer-quote-text {
    color: #9ca3af;
    font-style: italic;
}

/* Extended circle comments locked notice */
.community-notes--hidden {
    margin: 12px 0 0;
}

.extended-circle-notice {
    font-size: 13px;
    color: #9ca3af;
    background: rgba(59, 130, 246, 0.05);
    border: 1px dashed rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    padding: 14px 16px;
    line-height: 1.5;
    text-align: center;
}

.extended-circle-notice-sub {
    font-size: 12px;
    color: #c4b5b5;
    display: block;
    margin-top: 4px;
}

/* ── Extended Circle: Friends row filter bubble ── */
.dc-friend-bubble--extended .dc-friend-initial--extended {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    font-size: 14px;
    border: 1.5px solid rgba(59, 130, 246, 0.3);
}
.dc-friend-bubble--extended.active .dc-friend-initial--extended {
    background: #3b82f6;
    border-color: #3b82f6;
}

/* ── Extended Circle: Collection card avatar ── */
.dc-coll-av--extended {
    background: rgba(59, 130, 246, 0.12);
    border: 1.5px solid rgba(59, 130, 246, 0.3);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ══════════════════════════════════════════════════════════
   INVITE LINK SECTION — Profile tab
   March 2026
   ══════════════════════════════════════════════════════════ */
.invite-link-section {
    background: #FAF6EE;
    border: 1.5px solid #EAE0D2;
    border-radius: 16px;
    padding: 18px 18px 16px;
    margin: 0 0 18px;
}
.invite-link-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #2A1E14;
    margin-bottom: 6px;
}
.invite-link-header svg {
    color: #7B2D45;
    flex-shrink: 0;
}
.invite-link-body {
    font-size: 13px;
    color: #6B5744;
    line-height: 1.5;
    margin: 0 0 14px;
}
.invite-link-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #7B2D45;
    color: #FAF6EE;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
    justify-content: center;
}
.invite-link-btn:hover { background: #5A1F30; }
.invite-link-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.invite-link-result {
    margin-top: 14px;
}
.invite-link-box {
    display: flex;
    align-items: center;
    background: #F0E8DC;
    border-radius: 8px;
    padding: 8px 10px;
    gap: 8px;
    margin-bottom: 6px;
}
.invite-link-url {
    flex: 1;
    font-size: 12px;
    color: #2A1E14;
    font-family: 'Inter', monospace;
    word-break: break-all;
    line-height: 1.4;
}
.invite-link-copy {
    flex-shrink: 0;
    background: #7B2D45;
    color: #FAF6EE;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.15s;
}
.invite-link-copy:hover { background: #5A1F30; }
.invite-link-hint {
    font-size: 11px;
    color: #9A8A7A;
    margin: 0;
    line-height: 1.4;
}

/* ============================================================
   ODIN FEED CARD — v2 (19 Mar 2026)
   ============================================================ */

/* Distance inline with title */
.fc-dist {
    font-size: 11px;
    color: #9A8A7A;
    font-weight: 400;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Attribution line: "Saved by X · Xd" */
.fc-attribution {
    font-size: 12px;
    color: #7A6A5A;
    margin: 2px 0 4px;
    line-height: 1.4;
}

/* Via line: Save Inheritance signal */
.fc-via {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #7A6A5A;
    margin: 2px 0 4px;
}
.fc-via-dot {
    color: #A0682A;
    font-size: 10px;
    line-height: 1;
}

/* Snippet area */
.fc-snippet {
    font-size: 13px;
    line-height: 1.5;
    margin: 3px 0 6px;
}
.fc-snippet-quoted {
    font-style: italic;
    color: #4A3828;
}
.fc-snippet-summary {
    color: #6B6B6B;
    font-style: normal;
}

/* Bottom row: category chip + saves chip */
.fc-bottom-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.fc-category-chip {
    font-size: 11px;
    color: #7A6A5A;
    background: #F0E8DC;
    border-radius: 10px;
    padding: 2px 8px;
    font-weight: 500;
}
.fc-saves-chip {
    font-size: 11px;
    color: #9A8A7A;
    padding: 2px 0;
}

/* ============================================================
   ODIN RESULT CARD (DRAWER) — v2 (19 Mar 2026)
   ============================================================ */

/* Circle trust signal row */
.drawer-circle-signal {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #7A6A5A;
    margin: 6px 0 10px;
}
.rc-via-dot {
    color: #A0682A;
    font-size: 11px;
}
.rc-circle-dot {
    color: #7B2D45;
    font-size: 11px;
}

/* Quote attribution "— [Name]" under THE WORD */
.drawer-quote-attribution {
    font-size: 12px;
    color: #9A8A7A;
    margin-top: 4px;
    font-style: normal;
}

/* "What's this about" summary block */
.drawer-summary-block {
    margin: 10px 0;
    padding: 10px 12px;
    background: #F7F3EE;
    border-radius: 8px;
}
.drawer-summary-label {
    font-size: 11px;
    font-weight: 600;
    color: #9A8A7A;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.drawer-summary-text {
    font-size: 13px;
    color: #4A3828;
    line-height: 1.55;
}

/* Footer attribution */
.drawer-footer-attribution {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 6px;
    padding-top: 10px;
    border-top: 1px solid #EDE6DC;
}
.drawer-saved-by {
    font-size: 12px;
    color: #7A6A5A;
    flex: 1;
}
.drawer-saver-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #7B2D45;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    border: 2px solid #FAF6EE;
}

/* "Ask [Name] about this" CTA — Scenario 3 only */
.drawer-ask-btn {
    display: block;
    width: 100%;
    margin: 10px 0 4px;
    padding: 11px 16px;
    background: transparent;
    border: 1.5px solid #A0682A;
    border-radius: 10px;
    color: #A0682A;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, color 0.15s;
    box-sizing: border-box;
}
.drawer-ask-btn:hover {
    background: #A0682A;
    color: #FAF6EE;
}

/* Hide legacy duplicate address line in drawer */
.drawer-address-line-legacy {
    display: none;
}

/* ============================================================
   DISCOVER GRID — reuse hf-card style in grid layout
   ============================================================ */

/* Override hf-card's fixed width so it fills grid columns */
.dc-grid-card {
    width: 100%;
    flex-shrink: 1;
    scroll-snap-align: unset;
}

/* Quoted snippet inside discover grid card — italic warm tone */
.dc-snippet-quoted {
    font-style: italic;
    color: #4A3828 !important;
}

/* Endorsement button overlay — keep on top of hf-card-media-wrap */
.hf-card-media-wrap .endorse-btn,
.hf-card-media-wrap .endorse-count-overlay {
    position: absolute;
    z-index: 2;
}

/* ── The Word — italic personal note snippet (Home + Discover) ── */
.hf-card-word {
    font-size: 11px;
    font-style: italic;
    color: #4A3828;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hf-card-word--gated {
    font-style: normal;
    color: #9A8A7A;
    font-size: 11px;
}

/* ── Discover card: "Added by" row (above divider) ── */
.hf-card-adder {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
}

.dc-adder-avatar {
    width: 18px !important;
    height: 18px !important;
    font-size: 9px !important;
    flex-shrink: 0;
    border: none !important;
}

.hf-card-person-name {
    font-size: 11px;
    font-weight: 600;
    color: #2A1E14;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}

/* ── Discover card: saves row (below divider) ── */
.dc-grid-card .hf-card-by {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid #F0EBE4;
}

.hf-card-save-count {
    font-size: 11px;
    color: #7B2D45;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* ── Discover section tabs + "See all" wrapper ── */
.dc-section-tabs-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 0 4px;
}

/* Strip the spacing from .dc-section-tabs when inside the row */
.dc-section-tabs-row .dc-section-tabs {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.dc-section-tabs-row .dc-section-tabs::-webkit-scrollbar {
    display: none;
}

.dc-see-all-btn {
    flex-shrink: 0;
    align-self: center;
    padding: 8px 16px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #6A5A4A;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}

.dc-see-all-btn:hover,
.dc-see-all-btn:active {
    border-color: #7B2D45;
    color: #7B2D45;
    background: rgba(123,45,69,0.04);
}

/* ── Coach Marks ── */
#coachMark {
    position: fixed;
    bottom: calc(64px + env(safe-area-inset-bottom) + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(11, 15, 26, 0.92);
    color: #FAF6EE;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    padding: 10px 16px;
    border-radius: 10px;
    max-width: 280px;
    text-align: center;
    z-index: 9999;
    pointer-events: auto;
    animation: coachFadeIn 0.3s ease;
}

@keyframes coachFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}