/* ============================================
   Rio Favela Tour — Design System v4
   Clean · Responsive · Dark-first
   ============================================ */

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

/* ── Tokens ── */
:root {
    --card: #ffffff; --ring: #a1a1a1; --input: #e5e5e5;
    --muted: #f5f5f5; --accent: #f5f5f5; --border: #e5e5e5;
    --radius: 0.625rem; --popover: #ffffff; --primary: #171717;
    --sidebar: #fafafa; --secondary: #f5f5f5; --background: #ffffff;
    --foreground: #0a0a0a; --destructive: #e7000b;
    --sidebar-border: #e5e5e5; --sidebar-accent: #f5f5f5;
    --sidebar-primary: #171717; --sidebar-foreground: #0a0a0a;
    --muted-foreground: #737373; --accent-foreground: #171717;
    --card-foreground: #0a0a0a; --popover-foreground: #0a0a0a;
    --primary-foreground: #fafafa; --secondary-foreground: #171717;
    --destructive-foreground: #ffffff;
    --radius-sm: calc(var(--radius) - 2px);
    --radius-lg: calc(var(--radius) + 4px);
    --radius-xl: calc(var(--radius) + 8px);
    --radius-2xl: calc(var(--radius) + 14px);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    --shadow-glow: 0 0 0 3px rgba(23,23,23,0.08);
    --brand: #7c3aed; --brand-light: rgba(124,58,237,0.1);
    --brand-border: rgba(124,58,237,0.2);
    --success: #16a34a; --warning: #d97706;
    --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
    --sidebar-w: 15rem;
    --topbar-h: 3.25rem; /* mobile menu button area */
    --nav-h: 3.75rem;    /* bottom nav height */
}

/* ── Dark Mode ── */
.dark, [data-theme="dark"] {
    --card: #111111; --ring: #525252; --input: #262626;
    --muted: #1a1a1a; --accent: #1f1f1f; --border: #2a2a2a;
    --popover: #111111; --primary: #fafafa; --sidebar: #0d0d0d;
    --secondary: #1a1a1a; --background: #0a0a0a; --foreground: #fafafa;
    --destructive: #ef4444; --sidebar-border: #1f1f1f;
    --sidebar-accent: #1a1a1a; --sidebar-primary: #fafafa;
    --sidebar-foreground: #fafafa; --muted-foreground: #a1a1a1;
    --accent-foreground: #fafafa; --card-foreground: #fafafa;
    --popover-foreground: #fafafa; --primary-foreground: #0a0a0a;
    --secondary-foreground: #fafafa; --destructive-foreground: #ffffff;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);
    --shadow-glow: 0 0 0 3px rgba(124,58,237,0.15);
    --brand-light: rgba(124,58,237,0.15);
    --brand-border: rgba(124,58,237,0.25);
}
html.light { color-scheme: light; }

/* ── Base ── */
html { color-scheme: dark; scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    background: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* ── Aurora ── */
.dark body::before {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(124,58,237,0.07) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 70%, rgba(22,163,74,0.04) 0%, transparent 60%);
}
aside, main, nav, header { position: relative; z-index: 1; }

/* ============================================
   LAYOUT — The Foundation
   ============================================ */

/* Sidebar: always visible on desktop, hidden on mobile */
.sidebar-glass {
    position: fixed; left: 0; top: 0;
    width: var(--sidebar-w); height: 100dvh;
    background: #0d0d0d;
    border-right: 1px solid rgba(255,255,255,0.08);
    z-index: 9990;
    display: flex; flex-direction: column;
    padding: 1.25rem 0.875rem;
    overflow-y: auto;
    transform: translateX(0);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    will-change: transform;
}
html.light .sidebar-glass {
    background: #fafafa;
    border-right: 1px solid rgba(0,0,0,0.1);
}
@media (max-width: 767px) {
    .sidebar-glass {
        transform: translateX(-100%);
        width: min(var(--sidebar-w), 82vw);
        box-shadow: none;
        /* Force fully opaque — no transparency, no blur */
        background: #111111 !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        opacity: 1 !important;
    }
    html.light .sidebar-glass {
        background: #ffffff !important;
    }
    .sidebar-glass.show {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(0,0,0,0.6);
    }
}

/* Main content area */
#main-content {
    min-height: 100dvh;
    /* Mobile: 120px bottom padding — safe for iPhone home indicator + nav bar */
    padding: calc(var(--topbar-h) + 0.75rem) 1rem 120px;
}
@media (min-width: 768px) {
    #main-content {
        margin-left: var(--sidebar-w);
        padding: 2rem 2.5rem 2.5rem;
    }
}

/* Page header */
#page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
#view-title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--foreground);
}
@media (min-width: 768px) { #view-title { font-size: 1.625rem; } }
#view-subtitle {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin-top: 0.2rem;
}

/* Mobile menu button — fixed top-left */
.mobile-menu-btn {
    position: fixed;
    top: 0.75rem; left: 0.75rem;
    z-index: 9998;
    width: 2.25rem; height: 2.25rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--foreground);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s;
}
.mobile-menu-btn:hover { background: var(--secondary); }
@media (min-width: 768px) { .mobile-menu-btn { display: none; } }

/* Sidebar overlay — darkens background when sidebar open on mobile */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 9989;
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
@media (max-width: 767px) {
    .sidebar-overlay { display: block; }
    .sidebar-overlay.show { opacity: 1; pointer-events: all; }
}

/* Bottom navigation — mobile only */
.bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(10,10,10,0.82);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    border-top: 1px solid var(--border);
    z-index: 9999;
    align-items: center;
    justify-content: space-around;
}
html.light .bottom-nav {
    background: rgba(250,250,250,0.88);
}
@media (max-width: 767px) { .bottom-nav { display: flex; } }

.bottom-nav-item {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; gap: 0.2rem;
    padding: 0.5rem 0.25rem;
    border: none; background: transparent;
    color: var(--muted-foreground);
    font-size: 0.5625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    cursor: pointer; transition: color 0.15s;
    font-family: var(--font-sans);
    position: relative;
}
.bottom-nav-item::after {
    content: '';
    position: absolute; top: 0; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 2px;
    background: var(--brand);
    border-radius: 0 0 2px 2px;
    transition: width 0.2s ease;
}
.bottom-nav-item.active { color: var(--foreground); }
.bottom-nav-item.active::after { width: 1.5rem; }
.bottom-nav-logout {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; gap: 0.2rem;
    padding: 0.5rem 0.25rem;
    border: none; background: transparent;
    color: var(--muted-foreground);
    font-size: 0.5625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    cursor: pointer; transition: color 0.15s;
    font-family: var(--font-sans);
}
.bottom-nav-logout:hover { color: var(--destructive); }

/* Progress bar */
.top-progress-bar {
    position: fixed; top: 0; left: 0;
    height: 2px; width: 0%;
    background: linear-gradient(90deg, var(--brand), #a855f7, var(--brand));
    background-size: 200% 100%;
    z-index: 9999;
    transition: width 0.3s ease;
    animation: progressShimmer 1.5s linear infinite;
}
.top-progress-bar.loading { width: 75%; }
.top-progress-bar.done { width: 100%; opacity: 0; transition: width 0.15s ease, opacity 0.4s ease 0.15s; }
@keyframes progressShimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

/* Community alert banner */
.community-alert {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9998;
    background: var(--destructive); color: white;
    padding: 0.625rem 1rem;
    display: flex; align-items: center; gap: 0.625rem;
    font-size: 0.8125rem; font-weight: 600;
    animation: slideDown 0.3s ease;
    box-shadow: 0 4px 12px rgba(239,68,68,0.4);
}
.community-alert.deu-bom { background: var(--success); box-shadow: 0 4px 12px rgba(22,163,74,0.4); }
@keyframes slideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }

/* ============================================
   SIDEBAR INTERNALS
   ============================================ */
.sidebar-logo-wrap { padding: 0.25rem 0.375rem 1rem; cursor: pointer; }
.sidebar-user {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius);
    background: var(--accent); border: 1px solid var(--border);
    margin-bottom: 0.875rem;
}
.sidebar-avatar {
    width: 2rem; height: 2rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8125rem; flex-shrink: 0; color: white;
}
.nav-section-label {
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; color: var(--muted-foreground);
    padding: 0 0.75rem; margin: 0.625rem 0 0.25rem;
}
.nav-btn {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.5rem 0.75rem; border-radius: var(--radius);
    font-weight: 500; font-size: 0.875rem;
    color: var(--sidebar-foreground); background: transparent; border: none;
    width: 100%; text-align: left; cursor: pointer;
    transition: background 0.15s; font-family: var(--font-sans);
}
.nav-btn:hover { background: var(--sidebar-accent); }
.nav-btn.active { background: var(--sidebar-accent); color: var(--sidebar-primary); font-weight: 600; }
.nav-btn .nav-icon { color: var(--muted-foreground); transition: color 0.15s; flex-shrink: 0; }
.nav-btn.active .nav-icon, .nav-btn:hover .nav-icon { color: var(--sidebar-primary); }
.sidebar-logout {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.5rem 0.75rem; border-radius: var(--radius);
    font-weight: 500; font-size: 0.875rem;
    color: var(--muted-foreground); background: transparent; border: none;
    width: 100%; cursor: pointer; transition: background 0.15s, color 0.15s;
    font-family: var(--font-sans);
}
.sidebar-logout:hover { background: rgba(239,68,68,0.08); color: var(--destructive); }

/* ============================================
   CARDS & COMPONENTS
   ============================================ */
.glass-card, .bento-item {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s;
}
.glass-card:hover, .bento-item:hover { box-shadow: var(--shadow-md); }

.fintech-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-xl); padding: 1.125rem;
    box-shadow: var(--shadow-sm); transition: box-shadow 0.2s;
}
.fintech-card:hover { box-shadow: var(--shadow-md); }
.fintech-label {
    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--muted-foreground); margin-bottom: 0.375rem;
}
.fintech-value {
    font-size: 1.75rem; font-weight: 700; letter-spacing: -0.04em;
    line-height: 1; font-variant-numeric: tabular-nums; color: var(--foreground);
}
.fintech-value-sm {
    font-size: 1.25rem; font-weight: 700; letter-spacing: -0.04em;
    line-height: 1; font-variant-numeric: tabular-nums; color: var(--foreground);
}
.stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.125rem; box-shadow: var(--shadow-sm); }
.stat-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); margin-bottom: 0.375rem; font-weight: 600; }
.stat-value { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--foreground); }

/* Gradient text */
.gradient-text, .text-gradient {
    background: linear-gradient(135deg, var(--foreground) 40%, var(--brand));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── Buttons ── */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.5rem 1rem; background: var(--primary); color: var(--primary-foreground);
    border: none; border-radius: var(--radius); font-weight: 600; font-size: 0.875rem;
    cursor: pointer; transition: opacity 0.15s; font-family: var(--font-sans);
}
.btn-primary:hover { opacity: 0.88; }
.btn-primary:active { opacity: 0.75; transform: scale(0.98); }
.btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.5rem 1rem; background: var(--secondary); color: var(--secondary-foreground);
    border: 1px solid var(--border); border-radius: var(--radius); font-weight: 600;
    font-size: 0.875rem; cursor: pointer; transition: background 0.15s; font-family: var(--font-sans);
}
.btn-secondary:hover { background: var(--accent); }
.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.5rem 1rem; background: transparent; color: var(--foreground);
    border: none; border-radius: var(--radius); font-weight: 500; font-size: 0.875rem;
    cursor: pointer; transition: background 0.15s; font-family: var(--font-sans);
}
.btn-ghost:hover { background: var(--accent); }
.btn-destructive {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.5rem 1rem; background: var(--destructive); color: var(--destructive-foreground);
    border: none; border-radius: var(--radius); font-weight: 600; font-size: 0.875rem;
    cursor: pointer; transition: opacity 0.15s; font-family: var(--font-sans);
}
.btn-destructive:hover { opacity: 0.88; }
.glass-button { background: var(--secondary); border: 1px solid var(--border); border-radius: var(--radius); color: var(--foreground); cursor: pointer; transition: background 0.15s; font-family: var(--font-sans); }
.glass-button:hover { background: var(--accent); }
.book-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.5rem 1.125rem; background: var(--primary); color: var(--primary-foreground);
    border: none; border-radius: var(--radius); font-weight: 600; font-size: 0.8125rem;
    cursor: pointer; transition: opacity 0.15s; font-family: var(--font-sans);
}
.book-btn:hover { opacity: 0.85; }
.book-btn span { position: relative; z-index: 1; }
.border-beam { position: relative; overflow: hidden; }
@keyframes border-beam { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.border-beam::after {
    content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--brand) 50%, transparent 100%);
    background-size: 200% 100%; animation: border-beam 2.5s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude; pointer-events: none;
}
.price-tag { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.04em; color: var(--foreground); }
.tip-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white; border: none; border-radius: var(--radius);
    font-weight: 700; font-size: 0.875rem; cursor: pointer;
    transition: opacity 0.15s; font-family: var(--font-sans);
}
.tip-btn:hover { opacity: 0.88; }

/* ── Experience Cards ── */
.experience-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-xl); overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    cursor: pointer; display: flex; flex-direction: column;
    box-shadow: var(--shadow-sm);
}
.experience-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.experience-card-img {
    position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; flex-shrink: 0;
}
.experience-card-img img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform 0.4s ease;
}
.experience-card:hover .experience-card-img img { transform: scale(1.04); }
.experience-card-content {
    padding: 1rem; flex: 1; display: flex; flex-direction: column; min-height: 0;
}
.experience-card-title {
    font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.02em;
    margin-bottom: 0.25rem; color: var(--card-foreground);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.experience-card-desc {
    color: var(--muted-foreground); font-size: 0.8125rem; line-height: 1.55;
    margin-bottom: 0.875rem; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.experience-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }

/* ── Bento Grid ── */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 480px) { .bento-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bento-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) {
    .bento-item-large { grid-column: span 2; }
    .bento-item-wide  { grid-column: span 2; }
}

/* ── Stories Feed ── */
.stories-feed {
    display: flex; gap: 0.75rem; overflow-x: auto;
    padding: 0.25rem 0 0.75rem; scrollbar-width: none; -ms-overflow-style: none;
}
.stories-feed::-webkit-scrollbar { display: none; }
.story-item { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; flex-shrink: 0; cursor: pointer; }
.story-ring {
    width: 3.25rem; height: 3.25rem; border-radius: 50%; padding: 2px;
    background: linear-gradient(135deg, var(--brand), #ec4899); transition: transform 0.2s;
}
.story-ring:hover { transform: scale(1.05); }
.story-ring.seen { background: var(--border); }
.story-avatar {
    width: 100%; height: 100%; border-radius: 50%;
    background: var(--secondary); border: 2px solid var(--background);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.9375rem; color: var(--foreground); overflow: hidden;
}
.story-avatar img { width: 100%; height: 100%; object-fit: cover; }
.story-name { font-size: 0.6rem; font-weight: 600; color: var(--muted-foreground); max-width: 3.25rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.story-add {
    width: 3.25rem; height: 3.25rem; border-radius: 50%;
    background: var(--secondary); border: 2px dashed var(--border);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.15s;
}
.story-add:hover { background: var(--accent); }

/* Story Viewer */
.story-viewer { position: fixed; inset: 0; background: #000; z-index: 10000; display: flex; flex-direction: column; }
.story-progress-bar { display: flex; gap: 0.25rem; padding: 0.75rem 1rem 0.5rem; }
.story-progress-segment { flex: 1; height: 2px; background: rgba(255,255,255,0.3); border-radius: 1px; overflow: hidden; }
.story-progress-fill { height: 100%; background: white; width: 0%; transition: width linear; }
.story-content { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.story-content img, .story-content video { max-width: 100%; max-height: 100%; object-fit: contain; }
.story-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem 1.25rem 1.25rem; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: white; }

/* ── Forms ── */
.payment-input, .registration-input {
    width: 100%; padding: 0.625rem 0.875rem;
    background: var(--background); border: 1px solid var(--input);
    border-radius: var(--radius); color: var(--foreground);
    font-size: 0.875rem; font-family: var(--font-sans);
    transition: border-color 0.15s, box-shadow 0.15s; outline: none;
}
.payment-input:focus, .registration-input:focus {
    border-color: var(--ring); box-shadow: 0 0 0 3px var(--shadow-glow);
}
.payment-input::placeholder, .registration-input::placeholder { color: var(--muted-foreground); }
select.registration-input { cursor: pointer; }
textarea.registration-input { resize: vertical; min-height: 80px; }

/* ── Search ── */
.search-bar { position: relative; margin-bottom: 0.875rem; }
.search-input {
    width: 100%; padding: 0.625rem 0.875rem 0.625rem 2.5rem;
    background: var(--background); border: 1px solid var(--input);
    border-radius: var(--radius); color: var(--foreground);
    font-size: 0.875rem; font-family: var(--font-sans);
    transition: border-color 0.15s, box-shadow 0.15s; outline: none;
}
.search-input:focus { border-color: var(--ring); box-shadow: 0 0 0 3px var(--shadow-glow); }
.search-input::placeholder { color: var(--muted-foreground); }
.search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }
.filter-chips { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-top: 0.625rem; }
.filter-chip {
    padding: 0.3125rem 0.75rem; background: var(--secondary); border: 1px solid var(--border);
    border-radius: 2rem; font-size: 0.75rem; font-weight: 500; cursor: pointer;
    transition: all 0.15s; color: var(--muted-foreground); font-family: var(--font-sans);
    white-space: nowrap;
}
.filter-chip:hover { background: var(--accent); color: var(--foreground); }
.filter-chip.active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); font-weight: 600; }

/* ── Vibe Tags ── */
.vibe-tag {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.625rem; border-radius: 2rem; font-size: 0.6875rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s; font-family: var(--font-sans);
    border: 1px solid var(--border); background: var(--secondary); color: var(--muted-foreground);
    white-space: nowrap;
}
.vibe-tag.active, .vibe-tag.selected { background: var(--brand-light); border-color: var(--brand-border); color: var(--brand); }
.vibe-tag:hover { background: var(--accent); }
.vibe-tags-row { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.875rem; }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.625rem; border-radius: 2rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-sans); }
.badge-success  { background: rgba(22,163,74,0.12);  color: #16a34a; border: 1px solid rgba(22,163,74,0.2); }
.badge-warning  { background: rgba(217,119,6,0.12);  color: #d97706; border: 1px solid rgba(217,119,6,0.2); }
.badge-error    { background: rgba(239,68,68,0.1);   color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.badge-info     { background: rgba(124,58,237,0.12); color: #7c3aed; border: 1px solid rgba(124,58,237,0.2); }
.badge-neutral  { background: var(--secondary); color: var(--muted-foreground); border: 1px solid var(--border); }
.status-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.625rem; border-radius: 2rem; font-size: 0.6875rem; font-weight: 600; }
.status-badge-active  { background: rgba(22,163,74,0.12); color: #16a34a; border: 1px solid rgba(22,163,74,0.2); }
.status-badge-pending { background: rgba(239,68,68,0.1); color: #ef4444; border: 1px solid rgba(239,68,68,0.2); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-dot-pulse { animation: pulse 2s ease-in-out infinite; }

/* Super Cria badge */
.super-cria-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.5rem; border-radius: 2rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white; font-size: 0.6rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.06em;
}

/* Match score */
.match-score {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.5rem; background: var(--brand-light);
    border: 1px solid var(--brand-border); border-radius: 2rem;
    font-size: 0.6rem; font-weight: 700; color: var(--brand); white-space: nowrap;
}

/* ── Toast ── */
.notification-toast {
    position: fixed; top: 1.25rem; right: 1.25rem;
    padding: 0.75rem 1rem; background: var(--popover); border: 1px solid var(--border);
    border-radius: var(--radius-lg); color: var(--popover-foreground);
    font-size: 0.8125rem; font-weight: 500; font-family: var(--font-sans);
    box-shadow: var(--shadow-lg);
    transform: translateX(calc(100% + 2rem)); opacity: 0;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
    z-index: 9999; max-width: 340px; cursor: pointer;
    display: flex; align-items: center; gap: 0.625rem;
}
.notification-toast.show { transform: translateX(0); opacity: 1; }
.notification-toast.success { border-left: 3px solid #16a34a; }
.notification-toast.error   { border-left: 3px solid #ef4444; }
.notification-toast.warning { border-left: 3px solid #d97706; }
.notification-toast.info    { border-left: 3px solid #7c3aed; }
@media (max-width: 767px) { .notification-toast { top: 0.75rem; right: 0.75rem; left: 0.75rem; max-width: none; } }

/* ── Modals — slide up on mobile ── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: flex-end; justify-content: center;
    z-index: 9999; padding: 0;
    opacity: 0; transition: opacity 0.25s ease;
}
@media (min-width: 640px) { .modal-overlay { align-items: center; padding: 1rem; } }
.modal-overlay.show { opacity: 1; }
.modal-content {
    background: rgba(10,10,10,0.72);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
    padding: 1.5rem; width: 100%; max-width: 100%;
    max-height: 92dvh; overflow-y: auto; position: relative;
    transform: translateY(100%); opacity: 0;
    transition: transform 0.35s cubic-bezier(0.32,0.72,0,1), opacity 0.25s ease;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
html.light .modal-content {
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 -8px 40px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.9);
}
@media (min-width: 640px) {
    .modal-content {
        border-radius: var(--radius-2xl);
        max-width: 520px;
        transform: scale(0.95) translateY(8px);
        background: rgba(10,10,10,0.78);
        backdrop-filter: blur(28px) saturate(180%);
        -webkit-backdrop-filter: blur(28px) saturate(180%);
    }
    html.light .modal-content {
        background: rgba(255,255,255,0.88);
    }
    .modal-overlay.show .modal-content { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-overlay.show .modal-content { transform: translateY(0); opacity: 1; }
.registration-modal-content { max-width: 680px; }
.modal-close {
    position: absolute; top: 1rem; right: 1rem;
    width: 2rem; height: 2rem; border-radius: var(--radius-sm);
    background: var(--secondary); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.15s; color: var(--foreground);
}
.modal-close:hover { background: rgba(239,68,68,0.1); color: var(--destructive); }
.modal-content::-webkit-scrollbar { width: 5px; }
.modal-content::-webkit-scrollbar-track { background: var(--secondary); }
.modal-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Confirm Dialog ── */
.confirm-dialog {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    z-index: 10001; padding: 1rem; opacity: 0; transition: opacity 0.2s ease;
}
.confirm-dialog.show { opacity: 1; }
.confirm-dialog-content {
    background: rgba(10,10,10,0.82);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-xl); padding: 1.5rem; max-width: 360px; width: 100%;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
    transform: scale(0.95); opacity: 0;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease;
}
html.light .confirm-dialog-content {
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(0,0,0,0.08);
}
.confirm-dialog.show .confirm-dialog-content { transform: scale(1); opacity: 1; }

/* ── Success Modal ── */
.success-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000; opacity: 0; transition: opacity 0.25s ease;
}
.success-modal.show { opacity: 1; }
.success-modal-content {
    text-align: center; padding: 2rem; background: var(--popover);
    border: 1px solid var(--border); border-radius: var(--radius-2xl);
    max-width: 360px; box-shadow: var(--shadow-lg);
}
.success-icon {
    width: 4rem; height: 4rem; margin: 0 auto 1rem;
    background: var(--primary); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

/* ── Payment ── */
.payment-method-btn {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem;
    background: var(--secondary); border: 1px solid var(--border);
    border-radius: var(--radius); transition: all 0.15s; cursor: pointer;
    color: var(--foreground); font-family: var(--font-sans);
}
.payment-method-btn:hover { background: var(--accent); border-color: var(--ring); }
.payment-method-btn.selected { border-color: var(--ring); }
.time-slots { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.time-slot {
    padding: 0.4375rem 0.875rem; background: var(--secondary); border: 1px solid var(--border);
    border-radius: var(--radius); font-size: 0.8125rem; font-weight: 600;
    cursor: pointer; transition: all 0.15s; color: var(--foreground); font-family: var(--font-sans);
    font-variant-numeric: tabular-nums;
}
.time-slot:hover { background: var(--accent); border-color: var(--ring); }
.time-slot.selected { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.participant-selector {
    display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem 1rem;
    background: var(--secondary); border: 1px solid var(--border); border-radius: var(--radius);
}
.participant-btn {
    width: 2rem; height: 2rem; border-radius: 50%; background: var(--card);
    border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.15s; color: var(--foreground);
    font-size: 1.125rem; font-weight: 700; flex-shrink: 0;
}
.participant-btn:hover { background: var(--accent); }
.participant-count { font-size: 1.125rem; font-weight: 700; min-width: 2rem; text-align: center; }

/* ── Map ── */
.tour-map { height: 200px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); margin: 0.875rem 0; position: relative; }
.tour-map .leaflet-container { height: 100%; width: 100%; }
.map-info-bar {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    padding: 0.75rem 1rem; background: var(--secondary); border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: 0.75rem;
}
.map-info-item { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; color: var(--foreground); }
.map-info-item span { color: var(--muted-foreground); font-weight: 400; }
.uber-btn {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;
    background: #000; color: white; border: none; border-radius: var(--radius);
    font-size: 0.8125rem; font-weight: 700; cursor: pointer; transition: opacity 0.15s;
    font-family: var(--font-sans); text-decoration: none;
}
.uber-btn:hover { opacity: 0.85; }

/* ── Security Advisory ── */
.security-advisory {
    background: rgba(124,58,237,0.06); border: 1px solid var(--brand-border);
    border-radius: var(--radius-lg); padding: 0.875rem 1rem;
    margin: 0.875rem 0; font-size: 0.8125rem; color: var(--muted-foreground); line-height: 1.6;
}
.security-advisory strong { color: var(--foreground); }

/* ── Cancel Policy ── */
.cancel-policy { background: var(--secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; margin: 0.875rem 0; }
.cancel-policy-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.8125rem; }
.cancel-policy-row:last-child { border-bottom: none; padding-bottom: 0; }
.refund-full { color: var(--success); font-weight: 700; }
.refund-half { color: var(--warning); font-weight: 700; }
.refund-none { color: var(--destructive); font-weight: 700; }

/* ── Online Toggle ── */
.online-toggle {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem;
    background: var(--secondary); border: 1px solid var(--border);
    border-radius: var(--radius-lg); margin-bottom: 1rem;
}
.toggle-switch { position: relative; width: 2.75rem; height: 1.5rem; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; cursor: pointer; background: var(--border); border-radius: 1.5rem; transition: background 0.2s; }
.toggle-slider::before { content: ''; position: absolute; width: 1.125rem; height: 1.125rem; left: 0.1875rem; bottom: 0.1875rem; background: white; border-radius: 50%; transition: transform 0.2s; }
.toggle-switch input:checked + .toggle-slider { background: var(--success); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(1.25rem); }

/* ── Work Areas ── */
.work-area-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 0.625rem; }
.work-area-btn {
    padding: 0.625rem 0.75rem; background: var(--secondary); border: 1px solid var(--border);
    border-radius: var(--radius); font-size: 0.8125rem; font-weight: 500;
    cursor: pointer; transition: all 0.15s; color: var(--foreground);
    font-family: var(--font-sans); text-align: left;
    display: flex; align-items: center; gap: 0.5rem;
}
.work-area-btn.active { background: var(--brand-light); border-color: var(--brand-border); color: var(--brand); font-weight: 600; }
.work-area-btn:hover { background: var(--accent); }

/* ── Active Tour Timer ── */
.active-tour-banner {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9997;
    background: linear-gradient(135deg, var(--brand), #ec4899);
    color: white; padding: 0.75rem 1rem;
    display: flex; align-items: center; gap: 0.75rem;
    font-size: 0.875rem; font-weight: 600;
    box-shadow: 0 4px 12px rgba(124,58,237,0.4);
}
.sos-btn {
    margin-left: auto; padding: 0.375rem 0.875rem;
    background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.4);
    border-radius: var(--radius); color: white; font-weight: 800; font-size: 0.8125rem;
    cursor: pointer; transition: background 0.15s; font-family: var(--font-sans);
    animation: pulse 2s ease-in-out infinite;
}
.sos-btn:hover { background: rgba(255,255,255,0.35); }

/* ── Voucher ── */
.voucher-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.voucher-header { background: linear-gradient(135deg, var(--brand), #ec4899); padding: 1.5rem; color: white; text-align: center; }
.voucher-body { padding: 1.5rem; }
.voucher-divider { display: flex; align-items: center; margin: 1rem 0; position: relative; }
.voucher-divider::before, .voucher-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.voucher-circle { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--background); border: 1px solid var(--border); flex-shrink: 0; margin: 0 -0.625rem; }
.voucher-qr { display: flex; justify-content: center; padding: 1rem; background: white; border-radius: var(--radius); margin: 1rem 0; }
.voucher-qr canvas { border-radius: 0.25rem; }

/* ── Theme Toggle ── */
.theme-toggle {
    width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius); background: var(--secondary); border: 1px solid var(--border);
    cursor: pointer; transition: background 0.15s; color: var(--foreground);
}
.theme-toggle:hover { background: var(--accent); }
.lang-selector {
    display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem;
    background: var(--secondary); border: 1px solid var(--border); border-radius: var(--radius);
    cursor: pointer; font-size: 0.75rem; font-weight: 600; color: var(--foreground);
    transition: background 0.15s; font-family: var(--font-sans);
}
.lang-selector:hover { background: var(--accent); }

/* ── Skeleton ── */
@keyframes shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } }
.skeleton {
    background: linear-gradient(90deg, var(--secondary) 25%, var(--accent) 50%, var(--secondary) 75%);
    background-size: 600px 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius);
}
.skeleton-card { border-radius: var(--radius-xl); }

/* ── Animations ── */
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.stagger-item { animation: fadeInUp 0.4s ease backwards; }
.stagger-item:nth-child(1)  { animation-delay: 0.03s; }
.stagger-item:nth-child(2)  { animation-delay: 0.06s; }
.stagger-item:nth-child(3)  { animation-delay: 0.09s; }
.stagger-item:nth-child(4)  { animation-delay: 0.12s; }
.stagger-item:nth-child(5)  { animation-delay: 0.15s; }
.stagger-item:nth-child(6)  { animation-delay: 0.18s; }
.stagger-item:nth-child(7)  { animation-delay: 0.21s; }
.stagger-item:nth-child(8)  { animation-delay: 0.24s; }
.stagger-item:nth-child(9)  { animation-delay: 0.27s; }
.stagger-item:nth-child(10) { animation-delay: 0.30s; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-spin { animation: spin 0.7s linear infinite; }

/* ── Misc ── */
.font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.number-ticker { font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.fab {
    position: fixed; bottom: 1.5rem; right: 1.5rem;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--primary); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-lg); transition: opacity 0.15s; z-index: 100;
    color: var(--primary-foreground);
}
.fab:hover { opacity: 0.85; }
.login-quick-btn {
    display: flex; flex-direction: column; align-items: center; gap: 0.125rem;
    padding: 0.75rem 0.5rem; background: var(--secondary); border: 1px solid var(--border);
    border-radius: var(--radius); cursor: pointer; transition: all 0.15s;
    color: var(--foreground); font-family: var(--font-sans);
}
.login-quick-btn:hover { background: var(--accent); border-color: var(--ring); }
.login-quick-btn:active { transform: scale(0.97); }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 2rem; text-align: center; color: var(--muted-foreground); }
.empty-state-icon { margin-bottom: 1rem; opacity: 0.4; }
.empty-state h3 { font-size: 1rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.375rem; }
.empty-state p { font-size: 0.875rem; margin-bottom: 1.25rem; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: var(--brand-light); color: var(--foreground); }

/* ── Responsive ── */
@media (max-width: 400px) {
    .fintech-value { font-size: 1.375rem; }
    .fintech-value-sm { font-size: 1.125rem; }
    .bento-grid { grid-template-columns: 1fr !important; }
    .bento-item-large, .bento-item-wide { grid-column: span 1 !important; }
}
@media print {
    .sidebar-glass, .bottom-nav, .mobile-menu-btn, .top-progress-bar { display: none !important; }
    #main-content { margin: 0 !important; padding: 1rem !important; }
}

/* ============================================
   LOGIN PAGE — Apple-style with Favicon center
   ============================================ */
.login-page {
    min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    background: var(--background);
    padding: 1.5rem;
}
.login-card {
    width: 100%; max-width: 400px;
    background: rgba(10,10,10,0.72);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-2xl);
    padding: 2.5rem 2rem;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}
html.light .login-card {
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 24px 64px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.9);
}
.login-favicon {
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.75rem;
}
.login-favicon svg { width: 3rem; height: 3rem; }

/* ============================================
   VANITY PROFILE — Login Wall (blur effect)
   ============================================ */
.login-wall {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
}
.login-wall-blur {
    filter: blur(12px);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    transform: scale(1.05); /* hide blur edges */
}
.login-wall-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1rem;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 2;
    padding: 2rem;
    text-align: center;
}
.login-wall-overlay h3 {
    font-size: 1.125rem; font-weight: 700;
    color: #fff; letter-spacing: -0.02em;
}
.login-wall-overlay p {
    font-size: 0.8125rem; color: rgba(255,255,255,0.75);
    max-width: 260px; line-height: 1.5;
}

/* ============================================
   STORY UPLOADER — Cria upload UI
   ============================================ */
.story-uploader {
    display: flex; flex-direction: column; align-items: center;
    gap: 1rem; padding: 1.5rem;
    background: var(--secondary); border: 2px dashed var(--border);
    border-radius: var(--radius-xl); cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    text-align: center;
}
.story-uploader:hover, .story-uploader.drag-over {
    border-color: var(--brand); background: var(--brand-light);
}
.story-uploader input[type="file"] { display: none; }
.story-uploader-icon {
    width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--brand-light); border: 1px solid var(--brand-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--brand);
}
.story-upload-preview {
    position: relative; width: 100%; aspect-ratio: 9/16;
    max-height: 320px; border-radius: var(--radius-lg); overflow: hidden;
    background: #000;
}
.story-upload-preview video,
.story-upload-preview img {
    width: 100%; height: 100%; object-fit: cover;
}
.story-upload-progress {
    height: 3px; background: var(--border); border-radius: 2px; overflow: hidden;
    margin-top: 0.5rem;
}
.story-upload-progress-fill {
    height: 100%; background: var(--brand);
    transition: width 0.3s ease;
}

/* ============================================
   MAP COMPONENT
   ============================================ */
.map-container {
    width: 100%; height: 280px;
    border-radius: var(--radius-xl); overflow: hidden;
    border: 1px solid var(--border);
    position: relative;
}
.map-container .leaflet-container {
    width: 100%; height: 100%;
    background: var(--secondary);
}
.uber-btn {
    display: inline-flex; align-items: center; gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    background: #000; color: #fff;
    border: none; border-radius: var(--radius);
    font-weight: 700; font-size: 0.875rem;
    cursor: pointer; transition: opacity 0.15s;
    font-family: var(--font-sans);
    text-decoration: none;
}
.uber-btn:hover { opacity: 0.85; }
html.light .uber-btn { background: #111; }

/* ============================================
   PAGE TRANSITIONS
   ============================================ */
#content-area {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* ============================================
   VOUCHER — Apple Wallet Style
   ============================================ */
.voucher-modal-content {
    border-radius: 24px !important;
    overflow: hidden;
}
/* Ensure voucher modal has 24px radius on mobile too */
.modal-overlay .voucher-modal-content {
    border-radius: 24px !important;
}

/* ============================================
   SPRING ANIMATIONS — Modal & Button Physics
   ============================================ */
@keyframes springIn {
    0%   { transform: scale(0.88) translateY(12px); opacity: 0; }
    60%  { transform: scale(1.03) translateY(-2px); opacity: 1; }
    80%  { transform: scale(0.98) translateY(1px); }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes springUp {
    0%   { transform: translateY(100%); opacity: 0; }
    60%  { transform: translateY(-4px); opacity: 1; }
    80%  { transform: translateY(2px); }
    100% { transform: translateY(0); opacity: 1; }
}

/* Apply spring to modals on desktop */
@media (min-width: 640px) {
    .modal-overlay.show .modal-content {
        animation: springIn 0.42s cubic-bezier(0.34,1.56,0.64,1) forwards;
    }
}
/* Spring up on mobile */
@media (max-width: 639px) {
    .modal-overlay.show .modal-content {
        animation: springUp 0.38s cubic-bezier(0.34,1.56,0.64,1) forwards;
    }
}

/* Button press micro-interaction */
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active,
.book-btn:active,
.filter-chip:active,
.bottom-nav-item:active {
    transform: scale(0.95);
    transition: transform 0.08s ease;
}

/* ============================================
   SKELETON LOADERS — Shimmer
   ============================================ */
.skeleton {
    background: var(--secondary);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}
.skeleton::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.06) 40%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0.06) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.6s ease-in-out infinite;
}
html.light .skeleton::after {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0,0,0,0.04) 40%,
        rgba(0,0,0,0.08) 50%,
        rgba(0,0,0,0.04) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.skeleton-card  { border-radius: var(--radius-xl); }
.skeleton-text  { height: 0.875rem; border-radius: 4px; margin-bottom: 0.5rem; }
.skeleton-title { height: 1.25rem; border-radius: 4px; margin-bottom: 0.75rem; width: 60%; }
.skeleton-avatar { border-radius: 50%; }

/* ============================================
   SAFE-AREA — iPhone notch / Dynamic Island
   ============================================ */
.bottom-nav {
    padding-bottom: max(env(safe-area-inset-bottom), 0.5rem);
    height: auto;
    min-height: calc(var(--nav-h) + env(safe-area-inset-bottom));
}
#main-content {
    padding-bottom: max(120px, calc(var(--nav-h) + env(safe-area-inset-bottom) + 1rem));
}

/* ============================================
   NOTIFICATION CENTER — Toast Stack
   ============================================ */
#notification-stack {
    position: fixed;
    top: 1rem; right: 1rem;
    display: flex; flex-direction: column; gap: 0.5rem;
    z-index: 10000;
    pointer-events: none;
    max-width: 340px;
}
@media (max-width: 639px) {
    #notification-stack {
        top: 0.75rem; right: 0.75rem; left: 0.75rem;
        max-width: none;
    }
}
.toast-item {
    background: var(--popover);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    display: flex; align-items: center; gap: 0.625rem;
    font-size: 0.8125rem; font-weight: 500;
    box-shadow: var(--shadow-lg);
    pointer-events: all;
    cursor: pointer;
    transform: translateX(calc(100% + 2rem));
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
}
.toast-item.show { transform: translateX(0); opacity: 1; }
.toast-item.success { border-left: 3px solid var(--success); }
.toast-item.error   { border-left: 3px solid var(--destructive); }
.toast-item.warning { border-left: 3px solid var(--warning); }
.toast-item.info    { border-left: 3px solid var(--brand); }
.toast-item.booking { border-left: 3px solid var(--brand); background: var(--brand-light); }

/* ============================================
   PROMOTED PLACES — Lugares Tab
   ============================================ */
.promoted-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.5rem; border-radius: 2rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white; font-size: 0.6rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.06em;
}
.promoted-card {
    border: 1px solid rgba(124,58,237,0.3) !important;
    box-shadow: 0 0 0 1px rgba(124,58,237,0.15), var(--shadow-md) !important;
    position: relative;
}
.promoted-card::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(124,58,237,0.04), transparent);
    pointer-events: none;
    z-index: 0;
}

/* ============================================
   PUBLIC PROFILE WALL — Login blur
   ============================================ */
.price-wall {
    position: relative;
    display: inline-block;
}
.price-wall-blur {
    filter: blur(8px);
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}
.price-wall-lock {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}

/* ============================================
   REAL-TIME BOOKING PULSE
   ============================================ */
@keyframes bookingPulse {
    0%   { box-shadow: 0 0 0 0 rgba(124,58,237,0.4); }
    70%  { box-shadow: 0 0 0 12px rgba(124,58,237,0); }
    100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }
}
.new-booking-pulse {
    animation: bookingPulse 1s ease-out 3;
    border-color: var(--brand) !important;
}

/* ============================================
   PULL-TO-REFRESH
   ============================================ */
.ptr-indicator {
    position: fixed;
    top: calc(var(--topbar-h) + 0.5rem);
    left: 50%;
    transform: translateX(-50%) translateY(-80px);
    background: var(--popover);
    border: 1px solid var(--border);
    border-radius: 2rem;
    padding: 0.5rem 1rem;
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.75rem; font-weight: 600;
    box-shadow: var(--shadow-md);
    z-index: 9990;
    transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease;
    opacity: 0;
    pointer-events: none;
}
.ptr-indicator.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.ptr-indicator.refreshing .ptr-icon { animation: spin 0.7s linear infinite; }
@media (min-width: 768px) { .ptr-indicator { display: none; } }

/* ============================================
   SKELETON — exact card heights
   ============================================ */
.skeleton-experience-card { height: 280px; border-radius: var(--radius-xl); }
.skeleton-fintech-card     { height: 90px;  border-radius: var(--radius-xl); }
.skeleton-booking-card     { height: 110px; border-radius: var(--radius-xl); }
.skeleton-story            { width: 3.25rem; height: 3.25rem; border-radius: 50%; }
.skeleton-list-item        { height: 72px;  border-radius: var(--radius); }

/* ============================================
   ANIMATED RF LOGO — Path draw animation
   ============================================ */
@keyframes drawPath {
    to { stroke-dashoffset: 0; }
}
@keyframes fadeIn {
    to { opacity: 1; }
}

/* Sidebar logo also gets the animated version */
.sidebar-logo-wrap svg path,
.sidebar-logo-wrap svg line {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: drawPath 0.6s ease forwards;
}

/* ============================================
   BUTTON PALETTE — Consistent across themes
   ============================================ */

/* Primary — solid black/white, adapts to theme */
.btn-primary {
    background: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border: none !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    transition: opacity 0.15s, transform 0.08s ease !important;
}
.btn-primary:hover  { opacity: 0.88 !important; }
.btn-primary:active { transform: scale(0.96) !important; opacity: 0.75 !important; }

/* CTA / Pay button — Electric Violet gradient */
.btn-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);
    color: white; border: none; border-radius: var(--radius);
    font-weight: 800; font-size: 0.9375rem; letter-spacing: 0.02em;
    cursor: pointer; font-family: var(--font-sans);
    transition: opacity 0.15s, transform 0.08s ease;
    box-shadow: 0 4px 20px rgba(124,58,237,0.35);
    text-transform: uppercase;
}
.btn-cta:hover  { opacity: 0.92; box-shadow: 0 6px 28px rgba(124,58,237,0.45); }
.btn-cta:active { transform: scale(0.97); }

/* Secondary — outlined */
.btn-secondary {
    background: var(--secondary) !important;
    color: var(--secondary-foreground) !important;
    border: 1px solid var(--border) !important;
    font-weight: 600 !important;
    transition: background 0.15s, transform 0.08s ease !important;
}
.btn-secondary:hover  { background: var(--accent) !important; }
.btn-secondary:active { transform: scale(0.96) !important; }

/* Destructive */
.btn-destructive {
    background: var(--destructive) !important;
    color: var(--destructive-foreground) !important;
    border: none !important;
    font-weight: 700 !important;
}
.btn-destructive:hover  { opacity: 0.88 !important; }
.btn-destructive:active { transform: scale(0.96) !important; }

/* ============================================
   THEME TRANSITION — smooth switch
   ============================================ */
*, *::before, *::after {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease;
}
/* Exclude transforms and opacity from the global transition */
.btn-primary, .btn-secondary, .btn-cta, .btn-destructive,
.experience-card, .glass-card, .modal-content, .sidebar-glass {
    transition: background-color 0.2s ease, border-color 0.2s ease,
                color 0.15s ease, box-shadow 0.2s ease,
                opacity 0.15s ease, transform 0.08s ease !important;
}

/* Light mode button overrides */
html.light .btn-primary {
    background: #171717 !important;
    color: #fafafa !important;
}
html.light .btn-secondary {
    background: #f5f5f5 !important;
    color: #171717 !important;
    border-color: #e5e5e5 !important;
}

/* ============================================
   MOCK USER AVATARS — login quick access
   ============================================ */
.login-quick-btn img {
    width: 2rem; height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.125rem;
}